Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Update chatbox headers and buttons

Browse Source
This commit is contained in:
JC Brand 2018-02-20 16:41:55 +01:00
parent 33595e9e01
commit 21556832f8
11 changed files with 194 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
css/converse.css
View File

@ -5119,6 +5119,19 @@ body.reset {
#converse-embedded-chat .flyout, #converse-embedded-chat .flyout,
#conversejs .flyout { #conversejs .flyout {
bottom: 0; } } bottom: 0; } }
#converse-embedded-chat .chatbox-btn,
#conversejs .chatbox-btn {
border-radius: 25%;
border: none;
cursor: pointer;
font-size: 12px;
margin: 0 0.2em;
padding: 0.3em;
text-decoration: none; }
#converse-embedded-chat .chatbox-btn:active,
#conversejs .chatbox-btn:active {
position: relative;
top: 1px; }
#converse-embedded-chat .chat-head, #converse-embedded-chat .chat-head,
#conversejs .chat-head { #conversejs .chat-head {
flex-wrap: nowrap; flex-wrap: nowrap;
@ -5136,8 +5149,7 @@ body.reset {
margin-right: 0.5em; } margin-right: 0.5em; }
#converse-embedded-chat .chat-head .chatbox-buttons, #converse-embedded-chat .chat-head .chatbox-buttons,
#conversejs .chat-head .chatbox-buttons { #conversejs .chat-head .chatbox-buttons {
flex-direction: row-reverse; flex-direction: row-reverse; }
float: right; }
#converse-embedded-chat .chat-head .user-custom-message, #converse-embedded-chat .chat-head .user-custom-message,
#conversejs .chat-head .user-custom-message { #conversejs .chat-head .user-custom-message {
color: white; color: white;
@ -5148,26 +5160,33 @@ body.reset {
white-space: nowrap; white-space: nowrap;
margin: 0; margin: 0;
padding-top: 0.2em; } padding-top: 0.2em; }
#converse-embedded-chat .chatbox-btn, #converse-embedded-chat .chat-head a.chatbox-btn.fa, #converse-embedded-chat .chat-head a:visited.chatbox-btn.fa, #converse-embedded-chat .chat-head a:hover.chatbox-btn.fa, #converse-embedded-chat .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa,
#conversejs .chatbox-btn { #conversejs .chat-head a.chatbox-btn.fa,
border-radius: 25%; #conversejs .chat-head a:visited.chatbox-btn.fa,
border: none; #conversejs .chat-head a:hover.chatbox-btn.fa,
color: white; #conversejs .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa {
cursor: pointer; color: white; }
display: inline-block; #converse-embedded-chat .chat-head a.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head a:visited.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head a:hover.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa.button-on,
float: right; #conversejs .chat-head a.chatbox-btn.fa.button-on,
font-size: 12px; #conversejs .chat-head a:visited.chatbox-btn.fa.button-on,
margin: 0 0.2em; #conversejs .chat-head a:hover.chatbox-btn.fa.button-on,
padding: 0.3em; #conversejs .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa.button-on {
text-decoration: none; } background-color: white;
#converse-embedded-chat .chatbox-btn:active, color: #3AA569; }
#conversejs .chatbox-btn:active { #converse-embedded-chat .chat-head .chatbox-btn,
position: relative; #conversejs .chat-head .chatbox-btn {
top: 1px; } color: white; }
#converse-embedded-chat .chatbox-btn.button-on, #converse-embedded-chat .chat-head .chatbox-btn.fa,
#conversejs .chatbox-btn.button-on { #conversejs .chat-head .chatbox-btn.fa {
background-color: white; color: white; }
color: #3AA569; } #converse-embedded-chat .chat-head .chatbox-btn:active,
#conversejs .chat-head .chatbox-btn:active {
position: relative;
top: 1px; }
#converse-embedded-chat .chat-head .chatbox-btn.button-on,
#conversejs .chat-head .chatbox-btn.button-on {
background-color: white;
color: #3AA569; }
#converse-embedded-chat .chatbox, #converse-embedded-chat .chatbox,
#conversejs .chatbox { #conversejs .chatbox {
text-align: left; text-align: left;
@ -5965,8 +5984,8 @@ body.reset {
padding: 10px 8px 0 8px; } padding: 10px 8px 0 8px; }
#conversejs .toggle-controlbox span { #conversejs .toggle-controlbox span {
color: white; } color: white; }
#conversejs .xmpp-status .online, #conversejs .xmpp-status-menu .online { #conversejs .xmpp-status .online, #conversejs .xmpp-status .fa-circle, #conversejs .xmpp-status-menu .online, #conversejs .xmpp-status-menu .fa-circle {
color: #3AA569; } color: #33925d; }
#conversejs .xmpp-status .dnd, #conversejs .xmpp-status-menu .dnd { #conversejs .xmpp-status .dnd, #conversejs .xmpp-status-menu .dnd {
color: #E77051; } color: #E77051; }
#conversejs .xmpp-status .away, #conversejs .xmpp-status-menu .away { #conversejs .xmpp-status .away, #conversejs .xmpp-status-menu .away {
@ -6150,6 +6169,19 @@ body.reset {
white-space: nowrap; white-space: nowrap;
overflow-y: hidden; overflow-y: hidden;
text-overflow: ellipsis; } text-overflow: ellipsis; }
#converse-embedded-chat .chat-head-chatroom a.chatbox-btn.fa, #converse-embedded-chat .chat-head-chatroom a:visited.chatbox-btn.fa, #converse-embedded-chat .chat-head-chatroom a:hover.chatbox-btn.fa, #converse-embedded-chat .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa,
#conversejs .chat-head-chatroom a.chatbox-btn.fa,
#conversejs .chat-head-chatroom a:visited.chatbox-btn.fa,
#conversejs .chat-head-chatroom a:hover.chatbox-btn.fa,
#conversejs .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa {
color: white; }
#converse-embedded-chat .chat-head-chatroom a.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head-chatroom a:visited.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head-chatroom a:hover.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa.button-on,
#conversejs .chat-head-chatroom a.chatbox-btn.fa.button-on,
#conversejs .chat-head-chatroom a:visited.chatbox-btn.fa.button-on,
#conversejs .chat-head-chatroom a:hover.chatbox-btn.fa.button-on,
#conversejs .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa.button-on {
background-color: white;
color: #E77051; }
#converse-embedded-chat .chat-head-chatroom .chatbox-btn.button-on, #converse-embedded-chat .chat-head-chatroom .chatbox-btn.button-on,
#conversejs .chat-head-chatroom .chatbox-btn.button-on { #conversejs .chat-head-chatroom .chatbox-btn.button-on {
background-color: white; background-color: white;

83
css/inverse.css
View File

@ -5175,6 +5175,19 @@ body {
#converse-embedded-chat .flyout, #converse-embedded-chat .flyout,
#conversejs .flyout { #conversejs .flyout {
bottom: 0; } } bottom: 0; } }
#converse-embedded-chat .chatbox-btn,
#conversejs .chatbox-btn {
border-radius: 25%;
border: none;
cursor: pointer;
font-size: 16px;
margin: 0 0.2em;
padding: 0.3em;
text-decoration: none; }
#converse-embedded-chat .chatbox-btn:active,
#conversejs .chatbox-btn:active {
position: relative;
top: 1px; }
#converse-embedded-chat .chat-head, #converse-embedded-chat .chat-head,
#conversejs .chat-head { #conversejs .chat-head {
flex-wrap: nowrap; flex-wrap: nowrap;
@ -5192,8 +5205,7 @@ body {
margin-right: 0.5em; } margin-right: 0.5em; }
#converse-embedded-chat .chat-head .chatbox-buttons, #converse-embedded-chat .chat-head .chatbox-buttons,
#conversejs .chat-head .chatbox-buttons { #conversejs .chat-head .chatbox-buttons {
flex-direction: row-reverse; flex-direction: row-reverse; }
float: right; }
#converse-embedded-chat .chat-head .user-custom-message, #converse-embedded-chat .chat-head .user-custom-message,
#conversejs .chat-head .user-custom-message { #conversejs .chat-head .user-custom-message {
color: white; color: white;
@ -5204,26 +5216,33 @@ body {
white-space: nowrap; white-space: nowrap;
margin: 0; margin: 0;
padding-top: 0.2em; } padding-top: 0.2em; }
#converse-embedded-chat .chatbox-btn, #converse-embedded-chat .chat-head a.chatbox-btn.fa, #converse-embedded-chat .chat-head a:visited.chatbox-btn.fa, #converse-embedded-chat .chat-head a:hover.chatbox-btn.fa, #converse-embedded-chat .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa,
#conversejs .chatbox-btn { #conversejs .chat-head a.chatbox-btn.fa,
border-radius: 25%; #conversejs .chat-head a:visited.chatbox-btn.fa,
border: none; #conversejs .chat-head a:hover.chatbox-btn.fa,
color: white; #conversejs .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa {
cursor: pointer; color: white; }
display: inline-block; #converse-embedded-chat .chat-head a.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head a:visited.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head a:hover.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa.button-on,
float: right; #conversejs .chat-head a.chatbox-btn.fa.button-on,
font-size: 16px; #conversejs .chat-head a:visited.chatbox-btn.fa.button-on,
margin: 0 0.2em; #conversejs .chat-head a:hover.chatbox-btn.fa.button-on,
padding: 0.3em; #conversejs .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa.button-on {
text-decoration: none; } background-color: white;
#converse-embedded-chat .chatbox-btn:active, color: #3AA569; }
#conversejs .chatbox-btn:active { #converse-embedded-chat .chat-head .chatbox-btn,
position: relative; #conversejs .chat-head .chatbox-btn {
top: 1px; } color: white; }
#converse-embedded-chat .chatbox-btn.button-on, #converse-embedded-chat .chat-head .chatbox-btn.fa,
#conversejs .chatbox-btn.button-on { #conversejs .chat-head .chatbox-btn.fa {
background-color: white; color: white; }
color: #3AA569; } #converse-embedded-chat .chat-head .chatbox-btn:active,
#conversejs .chat-head .chatbox-btn:active {
position: relative;
top: 1px; }
#converse-embedded-chat .chat-head .chatbox-btn.button-on,
#conversejs .chat-head .chatbox-btn.button-on {
background-color: white;
color: #3AA569; }
#converse-embedded-chat .chatbox, #converse-embedded-chat .chatbox,
#conversejs .chatbox { #conversejs .chatbox {
text-align: left; text-align: left;
@ -5624,6 +5643,7 @@ body {
font-size: 18px; font-size: 18px;
margin: 0 0.3em; } margin: 0 0.3em; }
#conversejs.fullscreen .flyout { #conversejs.fullscreen .flyout {
border-radius: 0;
border: 1.2em solid #3AA569; border: 1.2em solid #3AA569;
border-top: 0.8em solid #3AA569; border-top: 0.8em solid #3AA569;
bottom: 0; } bottom: 0; }
@ -6036,8 +6056,8 @@ body {
padding: 10px 8px 0 8px; } padding: 10px 8px 0 8px; }
#conversejs .toggle-controlbox span { #conversejs .toggle-controlbox span {
color: white; } color: white; }
#conversejs .xmpp-status .online, #conversejs .xmpp-status-menu .online { #conversejs .xmpp-status .online, #conversejs .xmpp-status .fa-circle, #conversejs .xmpp-status-menu .online, #conversejs .xmpp-status-menu .fa-circle {
color: #3AA569; } color: #33925d; }
#conversejs .xmpp-status .dnd, #conversejs .xmpp-status-menu .dnd { #conversejs .xmpp-status .dnd, #conversejs .xmpp-status-menu .dnd {
color: #E77051; } color: #E77051; }
#conversejs .xmpp-status .away, #conversejs .xmpp-status-menu .away { #conversejs .xmpp-status .away, #conversejs .xmpp-status-menu .away {
@ -6283,6 +6303,19 @@ body {
white-space: nowrap; white-space: nowrap;
overflow-y: hidden; overflow-y: hidden;
text-overflow: ellipsis; } text-overflow: ellipsis; }
#converse-embedded-chat .chat-head-chatroom a.chatbox-btn.fa, #converse-embedded-chat .chat-head-chatroom a:visited.chatbox-btn.fa, #converse-embedded-chat .chat-head-chatroom a:hover.chatbox-btn.fa, #converse-embedded-chat .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa,
#conversejs .chat-head-chatroom a.chatbox-btn.fa,
#conversejs .chat-head-chatroom a:visited.chatbox-btn.fa,
#conversejs .chat-head-chatroom a:hover.chatbox-btn.fa,
#conversejs .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa {
color: white; }
#converse-embedded-chat .chat-head-chatroom a.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head-chatroom a:visited.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head-chatroom a:hover.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa.button-on,
#conversejs .chat-head-chatroom a.chatbox-btn.fa.button-on,
#conversejs .chat-head-chatroom a:visited.chatbox-btn.fa.button-on,
#conversejs .chat-head-chatroom a:hover.chatbox-btn.fa.button-on,
#conversejs .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa.button-on {
background-color: white;
color: #E77051; }
#converse-embedded-chat .chat-head-chatroom .chatbox-btn.button-on, #converse-embedded-chat .chat-head-chatroom .chatbox-btn.button-on,
#conversejs .chat-head-chatroom .chatbox-btn.button-on { #conversejs .chat-head-chatroom .chatbox-btn.button-on {
background-color: white; background-color: white;
@ -6520,8 +6553,6 @@ body {
#conversejs.fullscreen .chat-head-chatroom { #conversejs.fullscreen .chat-head-chatroom {
height: 62px; height: 62px;
font-size: 20px; } font-size: 20px; }
#conversejs.fullscreen .chat-head-chatroom .close-chatbox-button:before {
content: "\e601"; }
#conversejs.fullscreen .chat-head-chatroom .chat-title .chatroom-description { #conversejs.fullscreen .chat-head-chatroom .chat-title .chatroom-description {
font-size: 65%; } font-size: 65%; }
#conversejs.fullscreen .chatroom .box-flyout { #conversejs.fullscreen .chatroom .box-flyout {

5
mockup/user-panel.html
View File

@ -3,8 +3,9 @@
<div class="d-flex"> <div class="d-flex">
<canvas height="20" width="20" class="avatar align-self-center"></canvas> <canvas height="20" width="20" class="avatar align-self-center"></canvas>
<span class="username w-100 align-self-center">Walter White</span> <span class="username w-100 align-self-center">Walter White</span>
<a class="chatbox-btn fa fa-vcard align-self-center" title="Your profile" data-toggle="modal" data-target="#userProfileModal"></a> <!-- <a class="chatbox-btn fa fa-vcard align-self-center" title="Your profile" data-toggle="modal" data-target="#userProfileModal"></a> -->
<a class="chatbox-btn fa fa-cog align-self-center" title="Change settings" data-toggle="modal" data-target="#settingsModal"></a> <!-- <a class="chatbox-btn fa fa-cog align-self-center" title="Change settings" data-toggle="modal" data-target="#settingsModal"></a> -->
<a class="chatbox-btn fa fa-sign-out align-self-center" title="Log out"></a>
</div> </div>
<div class="d-flex xmpp-status"> <div class="d-flex xmpp-status">
<span class="online w-100 align-self-center" data-value="online"> <span class="online w-100 align-self-center" data-value="online">

61
sass/_chatbox.scss
View File

@ -18,6 +18,22 @@
bottom: 0; bottom: 0;
} }
} }
.chatbox-btn {
border-radius: 25%;
border: none;
cursor: pointer;
font-size: $box-close-font-size;
margin: 0 0.2em;
padding: 0.3em;
text-decoration: none;
&:active {
position: relative;
top: 1px;
}
}
.chat-head { .chat-head {
flex-wrap: nowrap; flex-wrap: nowrap;
color: #ffffff; color: #ffffff;
@ -37,7 +53,6 @@
.chatbox-buttons { .chatbox-buttons {
flex-direction: row-reverse; flex-direction: row-reverse;
float: right;
} }
.user-custom-message { .user-custom-message {
@ -50,27 +65,35 @@
margin: 0; margin: 0;
padding-top: 0.2em; padding-top: 0.2em;
} }
}
.chatbox-btn { a, a:visited, a:hover, a:not([href]):not([tabindex]) {
border-radius: 25%; &.chatbox-btn {
border: none; &.fa {
color: white; color: white;
cursor: pointer; &.button-on {
display: inline-block; background-color: white;
float: right; color: $chat-head-color;
font-size: $box-close-font-size; }
margin: 0 0.2em; }
padding: 0.3em; }
text-decoration: none;
&:active {
position: relative;
top: 1px;
} }
&.button-on {
background-color: white; .chatbox-btn {
color: $chat-head-color; color: white;
&.fa {
color: white;
}
&:active {
position: relative;
top: 1px;
}
&.button-on {
background-color: white;
color: $chat-head-color;
}
} }
} }
.chatbox { .chatbox {
text-align: left; text-align: left;
margin: 0 $chat-gutter; margin: 0 $chat-gutter;

12
sass/_chatrooms.scss
View File

@ -20,6 +20,18 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
a, a:visited, a:hover, a:not([href]):not([tabindex]) {
&.chatbox-btn {
&.fa {
color: $chat-head-text-color;
&.button-on {
background-color: $chat-head-text-color;
color: $chatroom-head-color;
}
}
}
}
.chatbox-btn { .chatbox-btn {
&.button-on { &.button-on {
background-color: $chat-head-text-color; background-color: $chat-head-text-color;

4
sass/_controlbox.scss
View File

@ -491,8 +491,8 @@
} }
.xmpp-status, .xmpp-status-menu { .xmpp-status, .xmpp-status-menu {
.online { .online, .fa-circle {
color: $green; color: darken($green, 5%);
} }
.dnd { .dnd {
color: $red color: $red

1
sass/inverse/_chatbox.scss
View File

@ -4,6 +4,7 @@
margin: 0 0.3em; margin: 0 0.3em;
} }
.flyout { .flyout {
border-radius: 0;
border: $flyout-padding solid $chat-head-color; border: $flyout-padding solid $chat-head-color;
border-top: 0.8em solid $chat-head-color; border-top: 0.8em solid $chat-head-color;
bottom: 0; bottom: 0;

3
sass/inverse/_chatrooms.scss
View File

@ -3,9 +3,6 @@
.chat-head-chatroom { .chat-head-chatroom {
height: $chatroom-head-height; height: $chatroom-head-height;
font-size: 20px; font-size: 20px;
.close-chatbox-button:before {
content: "\e601"; // Leave icon
}
.chat-title { .chat-title {
.chatroom-description { .chatroom-description {
font-size: 65%; font-size: 65%;

2
src/templates/chatroom.html
View File

@ -1,4 +1,4 @@
<div class="flyout box-flyout"> <div class="flyout box-flyout">
<div class="chat-head chat-head-chatroom"></div> <div class="chat-head chat-head-chatroom row no-gutters"></div>
<div class="chat-body chatroom-body"></div> <div class="chat-body chatroom-body"></div>
</div> </div>

6
src/templates/chatroom_bookmark_toggle.html
View File

@ -1,4 +1,2 @@
<a class="chatbox-btn toggle-bookmark icon-pushpin <a class="chatbox-btn toggle-bookmark fa fa-bookmark
{[ if (o.bookmarked) {]} {[ if (o.bookmarked) {]} button-on {[ } ]}" title="{{{o.info_toggle_bookmark}}}"></a>
button-on
{[ } ]}" title="{{{o.info_toggle_bookmark}}}"></a>

29
src/templates/chatroom_head.html
View File

@ -1,12 +1,19 @@
<a class="chatbox-btn close-chatbox-button icon-close" title="{{{o.info_close}}}"></a> <div class="col-sm-9 col-lg-9">
{[ if (o.affiliation == 'owner') { ]} <div class="chat-title" title="{{{o.jid}}}">
<a class="chatbox-btn configure-chatroom-button icon-wrench" title="{{{o.info_configure}}} "></a> {[ if (o.name && o.name !== o.Strophe.getNodeFromJid(o.jid)) { ]}
{[ } ]} <span class="chatroom-name">{{{ o.name }}}</span>
<div class="chat-title" title="{{{o.jid}}}"> {[ } else { ]}
{[ if (o.name && o.name !== o.Strophe.getNodeFromJid(o.jid)) { ]} <span class="chatroom-name">{{{ o.Strophe.getNodeFromJid(o.jid) }}}</span>@{{{ o.Strophe.getDomainFromJid(o.jid) }}}
<span class="chatroom-name">{{{ o.name }}}</span> {[ } ]}
{[ } else { ]} <p class="chatroom-description">{{{ o.description }}}<p/>
<span class="chatroom-name">{{{ o.Strophe.getNodeFromJid(o.jid) }}}</span>@{{{ o.Strophe.getDomainFromJid(o.jid) }}} </div>
{[ } ]}
<p class="chatroom-description">{{{ o.description }}}<p/>
</div> </div>
<div class="col-sm-3 col-lg-3">
<div class="chatbox-buttons row no-gutters">
<a class="chatbox-btn close-chatbox-button fa fa-sign-out" title="{{{o.info_close}}}"></a>
{[ if (o.affiliation == 'owner') { ]}
<a class="chatbox-btn configure-chatroom-button fa fa-wrench" title="{{{o.info_configure}}} "></a>
{[ } ]}
</div>
</div>