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

83
css/inverse.css
View File

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

5
mockup/user-panel.html
View File

@ -3,8 +3,9 @@
<div class="d-flex">
<canvas height="20" width="20" class="avatar align-self-center"></canvas>
<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-cog align-self-center" title="Change settings" data-toggle="modal" data-target="#settingsModal"></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-sign-out align-self-center" title="Log out"></a>
</div>
<div class="d-flex xmpp-status">
<span class="online w-100 align-self-center" data-value="online">

61
sass/_chatbox.scss
View File

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

12
sass/_chatrooms.scss
View File

@ -20,6 +20,18 @@
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 {
&.button-on {
background-color: $chat-head-text-color;

4
sass/_controlbox.scss
View File

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

1
sass/inverse/_chatbox.scss
View File

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

3
sass/inverse/_chatrooms.scss
View File

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

2
src/templates/chatroom.html
View File

@ -1,4 +1,4 @@
<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>

6
src/templates/chatroom_bookmark_toggle.html
View File

@ -1,4 +1,2 @@
<a class="chatbox-btn toggle-bookmark icon-pushpin
{[ if (o.bookmarked) {]}
button-on
{[ } ]}" title="{{{o.info_toggle_bookmark}}}"></a>
<a class="chatbox-btn toggle-bookmark fa fa-bookmark
{[ if (o.bookmarked) {]} 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>
{[ if (o.affiliation == 'owner') { ]}
<a class="chatbox-btn configure-chatroom-button icon-wrench" title="{{{o.info_configure}}} "></a>
{[ } ]}
<div class="chat-title" title="{{{o.jid}}}">
{[ if (o.name && o.name !== o.Strophe.getNodeFromJid(o.jid)) { ]}
<span class="chatroom-name">{{{ o.name }}}</span>
{[ } else { ]}
<span class="chatroom-name">{{{ o.Strophe.getNodeFromJid(o.jid) }}}</span>@{{{ o.Strophe.getDomainFromJid(o.jid) }}}
{[ } ]}
<p class="chatroom-description">{{{ o.description }}}<p/>
<div class="col-sm-9 col-lg-9">
<div class="chat-title" title="{{{o.jid}}}">
{[ if (o.name && o.name !== o.Strophe.getNodeFromJid(o.jid)) { ]}
<span class="chatroom-name">{{{ o.name }}}</span>
{[ } else { ]}
<span class="chatroom-name">{{{ o.Strophe.getNodeFromJid(o.jid) }}}</span>@{{{ o.Strophe.getDomainFromJid(o.jid) }}}
{[ } ]}
<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>