Skip to content

C
converse.js
Commit 21556832 authored by JC Brand's avatar JC Brand
Browse files
Options

Update chatbox headers and buttons

parent 33595e9e
Show whitespace changes
Inline Side-by-side
Showing with 194 additions and 92 deletions
css/converse.css
View file @ 21556832
...@@ -5119,6 +5119,19 @@ body.reset { ...@@ -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 { ...@@ -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,24 +5160,31 @@ body.reset { ...@@ -5148,24 +5160,31 @@ 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,
#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; position: relative;
top: 1px; } top: 1px; }
#converse-embedded-chat .chatbox-btn.button-on, #converse-embedded-chat .chat-head .chatbox-btn.button-on,
#conversejs .chatbox-btn.button-on { #conversejs .chat-head .chatbox-btn.button-on {
background-color: white; background-color: white;
color: #3AA569; } color: #3AA569; }
#converse-embedded-chat .chatbox, #converse-embedded-chat .chatbox,
...@@ -5965,8 +5984,8 @@ body.reset { ...@@ -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 { ...@@ -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;
......
css/inverse.css
View file @ 21556832
...@@ -5175,6 +5175,19 @@ body { ...@@ -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 { ...@@ -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,24 +5216,31 @@ body { ...@@ -5204,24 +5216,31 @@ 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,
#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; position: relative;
top: 1px; } top: 1px; }
#converse-embedded-chat .chatbox-btn.button-on, #converse-embedded-chat .chat-head .chatbox-btn.button-on,
#conversejs .chatbox-btn.button-on { #conversejs .chat-head .chatbox-btn.button-on {
background-color: white; background-color: white;
color: #3AA569; } color: #3AA569; }
#converse-embedded-chat .chatbox, #converse-embedded-chat .chatbox,
...@@ -5624,6 +5643,7 @@ body { ...@@ -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 { ...@@ -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 { ...@@ -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 { ...@@ -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 {
......
mockup/user-panel.html
View file @ 21556832
...@@ -3,8 +3,9 @@ ...@@ -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">
......
sass/_chatbox.scss
View file @ 21556832
...@@ -18,6 +18,22 @@ ...@@ -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 @@ ...@@ -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,18 +65,24 @@ ...@@ -50,18 +65,24 @@
margin: 0; margin: 0;
padding-top: 0.2em; padding-top: 0.2em;
} }
a, a:visited, a:hover, a:not([href]):not([tabindex]) {
&.chatbox-btn {
&.fa {
color: white;
&.button-on {
background-color: white;
color: $chat-head-color;
}
}
}
} }
.chatbox-btn { .chatbox-btn {
border-radius: 25%;
border: none;
color: white; color: white;
cursor: pointer; &.fa {
display: inline-block; color: white;
float: right; }
font-size: $box-close-font-size;
margin: 0 0.2em;
padding: 0.3em;
text-decoration: none;
&:active { &:active {
position: relative; position: relative;
top: 1px; top: 1px;
...@@ -71,6 +92,8 @@ ...@@ -71,6 +92,8 @@
color: $chat-head-color; color: $chat-head-color;
} }
} }
}
.chatbox { .chatbox {
text-align: left; text-align: left;
margin: 0 $chat-gutter; margin: 0 $chat-gutter;
......
sass/_chatrooms.scss
View file @ 21556832
...@@ -20,6 +20,18 @@ ...@@ -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;
......
sass/_controlbox.scss
View file @ 21556832
...@@ -491,8 +491,8 @@ ...@@ -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
......
sass/inverse/_chatbox.scss
View file @ 21556832
...@@ -4,6 +4,7 @@ ...@@ -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;
......
sass/inverse/_chatrooms.scss
View file @ 21556832
...@@ -3,9 +3,6 @@ ...@@ -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%;
......
src/templates/chatroom.html
View file @ 21556832
<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>
src/templates/chatroom_bookmark_toggle.html
View file @ 21556832
<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>
src/templates/chatroom_head.html
View file @ 21556832
<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>
{[ } ]}
<div class="chat-title" title="{{{o.jid}}}">
{[ if (o.name && o.name !== o.Strophe.getNodeFromJid(o.jid)) { ]} {[ if (o.name && o.name !== o.Strophe.getNodeFromJid(o.jid)) { ]}
<span class="chatroom-name">{{{ o.name }}}</span> <span class="chatroom-name">{{{ o.name }}}</span>
{[ } else { ]} {[ } else { ]}
<span class="chatroom-name">{{{ o.Strophe.getNodeFromJid(o.jid) }}}</span>@{{{ o.Strophe.getDomainFromJid(o.jid) }}} <span class="chatroom-name">{{{ o.Strophe.getNodeFromJid(o.jid) }}}</span>@{{{ o.Strophe.getDomainFromJid(o.jid) }}}
{[ } ]} {[ } ]}
<p class="chatroom-description">{{{ o.description }}}<p/> <p class="chatroom-description">{{{ o.description }}}<p/>
</div>
</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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7