Skip to content

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

Mockup: Add "Announcements" section, update markup and styles for user-panel

parent 57f7e31a
Show whitespace changes
Inline Side-by-side
Showing with 187 additions and 203 deletions
css/converse.css
View file @ afcb8081
......@@ -7711,9 +7711,17 @@ body.reset {
text-overflow: ellipsis; }
#conversejs #controlbox .controlbox-pane .userinfo .profile {
margin-bottom: 0.75em; }
#conversejs #controlbox .list-container .items-list .list-item {
border: none;
clear: both;
color: #777;
display: block;
height: 2em;
overflow: hidden;
text-shadow: 0 1px 0 #FAFAFA;
word-wrap: break-word; }
#conversejs #controlbox #chatrooms {
padding: 0;
padding-bottom: 0.5em; }
padding: 0; }
#conversejs #controlbox #chatrooms form.add-chatroom {
margin: 0;
padding: 0; }
......@@ -7730,16 +7738,6 @@ body.reset {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list {
margin: 0.5em 0;
text-align: left; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom {
border: none;
clear: both;
color: #777;
display: block;
overflow: hidden;
margin-top: 0.5em;
text-shadow: 0 1px 0 #FAFAFA;
word-wrap: break-word; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a:hover,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a:hover {
color: #206485; }
......@@ -7781,9 +7779,9 @@ body.reset {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark.button-on:hover,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark.button-on:hover {
color: #206485; }
#conversejs #controlbox #chatrooms, #conversejs #controlbox #converse-roster {
#conversejs #controlbox .controlbox-section {
margin: 1em 0 0 0; }
#conversejs #controlbox #chatrooms div.d-flex span, #conversejs #controlbox #converse-roster div.d-flex span {
#conversejs #controlbox .controlbox-section .controlbox-heading {
margin: 0 0 0.5em 0;
text-transform: uppercase; }
#conversejs #controlbox .dropdown a {
......@@ -8344,7 +8342,7 @@ body.reset {
#conversejs .chatbox.headlines .chat-body {
background-color: #E7A151;
border-radius: 4px; }
#conversejs .chatbox.headlines .chat-body .chat-message span.chat-msg-them {
#conversejs .chatbox.headlines .chat-body .chat-message {
color: #D2842B; }
#conversejs .chatbox.headlines .chat-content {
height: 100%;
......@@ -8404,14 +8402,10 @@ body.reset {
#conversejs .message.chat-msg.onload {
animation: colorchange-chatmessage 1s;
-webkit-animation: colorchange-chatmessage 1s; }
#conversejs .message.chat-msg.delayed .chat-msg-them {
color: #41b875; }
#conversejs .message.chat-msg.delayed .chat-msg-me {
color: #6899b2; }
#conversejs .message.chat-msg:hover {
background-color: rgba(0, 0, 0, 0.035); }
#conversejs .message.chat-msg .spoiler-hint {
margin-bottom: 1em; }
margin-bottom: 0.5em; }
#conversejs .message.chat-msg .toggle-spoiler {
color: white; }
#conversejs .message.chat-msg .toggle-spoiler i {
......@@ -8441,10 +8435,6 @@ body.reset {
font-weight: bold; }
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-time {
padding-left: 0.5em; }
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-them {
color: #3AA569; }
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-me {
color: #578EA9; }
#conversejs .message.chat-msg.chat-msg-followup .chat-msg-heading,
#conversejs .message.chat-msg.chat-msg-followup .avatar {
display: none; }
......@@ -8453,12 +8443,6 @@ body.reset {
#conversejs .chatroom-body .message.onload {
animation: colorchange-chatmessage-muc 1s;
-webkit-animation: colorchange-chatmessage-muc 1s; }
#conversejs .chatroom-body .message.delayed .chat-msg-them {
color: #41b875; }
#conversejs .chatroom-body .message.delayed .chat-msg-me {
color: #6899b2; }
#conversejs .chatroom-body .message .chat-msg-them {
color: #3AA569; }
#conversejs .chatroom-body .message .separator {
border: 0.5px solid #E77051; }
......
css/inverse.css
View file @ afcb8081
......@@ -7785,9 +7785,17 @@ body {
text-overflow: ellipsis; }
#conversejs #controlbox .controlbox-pane .userinfo .profile {
margin-bottom: 0.75em; }
#conversejs #controlbox .list-container .items-list .list-item {
border: none;
clear: both;
color: #777;
display: block;
height: 2em;
overflow: hidden;
text-shadow: 0 1px 0 #FAFAFA;
word-wrap: break-word; }
#conversejs #controlbox #chatrooms {
padding: 0;
padding-bottom: 0.5em; }
padding: 0; }
#conversejs #controlbox #chatrooms form.add-chatroom {
margin: 0;
padding: 0; }
......@@ -7804,16 +7812,6 @@ body {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list {
margin: 0.5em 0;
text-align: left; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom {
border: none;
clear: both;
color: #777;
display: block;
overflow: hidden;
margin-top: 0.5em;
text-shadow: 0 1px 0 #FAFAFA;
word-wrap: break-word; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a:hover,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a:hover {
color: #206485; }
......@@ -7855,9 +7853,9 @@ body {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark.button-on:hover,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark.button-on:hover {
color: #206485; }
#conversejs #controlbox #chatrooms, #conversejs #controlbox #converse-roster {
#conversejs #controlbox .controlbox-section {
margin: 1em 0 0 0; }
#conversejs #controlbox #chatrooms div.d-flex span, #conversejs #controlbox #converse-roster div.d-flex span {
#conversejs #controlbox .controlbox-section .controlbox-heading {
margin: 0 0 0.5em 0;
text-transform: uppercase; }
#conversejs #controlbox .dropdown a {
......@@ -8524,7 +8522,7 @@ body {
#conversejs .chatbox.headlines .chat-body {
background-color: #E7A151;
border-radius: 4px; }
#conversejs .chatbox.headlines .chat-body .chat-message span.chat-msg-them {
#conversejs .chatbox.headlines .chat-body .chat-message {
color: #D2842B; }
#conversejs .chatbox.headlines .chat-content {
height: 100%;
......@@ -8592,10 +8590,6 @@ body {
#conversejs .message.chat-msg.onload {
animation: colorchange-chatmessage 1s;
-webkit-animation: colorchange-chatmessage 1s; }
#conversejs .message.chat-msg.delayed .chat-msg-them {
color: #41b875; }
#conversejs .message.chat-msg.delayed .chat-msg-me {
color: #6899b2; }
#conversejs .message.chat-msg:hover {
background-color: rgba(0, 0, 0, 0.035); }
#conversejs .message.chat-msg .spoiler-hint {
......@@ -8629,10 +8623,6 @@ body {
font-weight: bold; }
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-time {
padding-left: 0.5em; }
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-them {
color: #3AA569; }
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-me {
color: #578EA9; }
#conversejs .message.chat-msg.chat-msg-followup .chat-msg-heading,
#conversejs .message.chat-msg.chat-msg-followup .avatar {
display: none; }
......@@ -8641,12 +8631,6 @@ body {
#conversejs .chatroom-body .message.onload {
animation: colorchange-chatmessage-muc 1s;
-webkit-animation: colorchange-chatmessage-muc 1s; }
#conversejs .chatroom-body .message.delayed .chat-msg-them {
color: #41b875; }
#conversejs .chatroom-body .message.delayed .chat-msg-me {
color: #6899b2; }
#conversejs .chatroom-body .message .chat-msg-them {
color: #3AA569; }
#conversejs .chatroom-body .message .separator {
border: 0.5px solid #E77051; }
......
mockup/chatroom.html
View file @ afcb8081
......@@ -24,7 +24,7 @@
<div class="flyout box-flyout">
<div class="chat-head chat-head-chatroom row no-gutters">
<div class="col col-9">
<div class="chat-title">ACT II. SCENE II. Capulet's orchard.</div>
<div class="chat-title">Capulet's orchard</div>
<p class="chatroom-topic">Two households, both alike in dignity, In fair Verona, where we lay our scene.</p>
</div>
<div class="chatbox-buttons row no-gutters">
......@@ -114,7 +114,7 @@
</div>
</div>
<div class="message chat-msg {{{o.extra_classes}}}" data-isodate="{{{o.time}}}" data-msgid="{{{o.msgid}}}">
<div class="message chat-msg" data-isodate="2018-04-36T18:07:36+02:00" data-msgid="some-long-id">
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
......
mockup/user-panel.html
View file @ afcb8081
......@@ -14,38 +14,78 @@
</div>
</div>
<div id="chatrooms">
<div id="headlines" class="controlbox-section">
<div class="d-flex">
<span class="w-100">Chatrooms</span>
<span class="w-100 controlbox-heading">Announcements</span>
</div>
<div class="list-container">
<div class="items-list">
<div class="list-item open-headline d-flex flex-row">
<a class="w-100" data-jid="montague.lit" title="Click to show" href="chatroom.html">Montague.lit</a>
</div>
<div class="list-item open-headline d-flex flex-row">
<a class="w-100" data-jid="montague.lit" title="Click to show" href="chatroom.html">Capulet.lit</a>
</div>
</div>
</div>
</div>
<div id="chatrooms" class="controlbox-section">
<div class="d-flex">
<span class="w-100 controlbox-heading">Group Chats</span>
<a class="chatbox-btn fa fa-users" title="Click to add a new room" data-toggle="modal" data-target="#chatroomsModal"></a>
</div>
<div class="list-container rooms-list-container">
<div class="rooms-list">
<div class="available-chatroom d-flex flex-row">
<span class="badge badge-info msgs-indicator">1</span>
<a class="open-room available-room w-100" data-room-jid="public@conference.test.com" title="Click to open this room" href="chatroom.html">public</a>
<a href="#" class="room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
data-html="true" data-content="<b>Room Address (JID): </b><br>public@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a>
<div class="rooms-list items-list">
<div class="list-item available-chatroom d-flex flex-row">
<a class="open-room available-room w-100" data-room-jid="public@conference.test.com" title="Click to open this room" href="chatroom.html">Capulet's orchard</a>
<!-- <span class="badge badge-info msgs-indicator">1</span> -->
<a href="#"
class="room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
data-html="true" data-content="<b>Room Address (JID): </b><br>public@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">
&nbsp;</a>
<a href="#" class="fa fa-bookmark" title="Click to bookmark this room">&nbsp;</a>
</div>
<div class="list-item available-chatroom d-flex flex-row">
<a class="open-room available-room w-100" data-room-jid="team@conference.test.com" title="Click to open this room" href="chatroom.html">Juliet's Balcony</a>
<a href="#"
class="room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
data-html="true" data-content="<b>Room Address (JID): </b><br>public@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">
&nbsp;</a>
<a href="#" class="fa fa-bookmark" title="Click to bookmark this room">&nbsp;</a>
<a href="#" class="fa fa-times" title="Click to leave this room">&nbsp;</a>
</div>
<div class="available-chatroom d-flex flex-row">
<a class="open-room available-room w-100" data-room-jid="team@conference.test.com" title="Click to open this room" href="chatroom.html">team</a>
<a href="#" class="room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
data-html="true" data-content="<b>Room Address (JID): </b><br>team@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a>
</div>
<div class="available-chatroom d-flex flex-row">
<a class="open-room available-room w-100" data-room-jid="test@conference.test.com" title="Click to open this room" href="chatroom.html">test</a>
<a href="#" class="room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
data-html="true" data-content="<b>Room Address (JID): </b><br>test@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a>
</div>
</div>
<div id="bookmarks" class="controlbox-section">
<div class="d-flex"><span class="w-100 controlbox-heading">Bookmarks</span></div>
<div class="list-container rooms-list-container">
<div class="rooms-list items-list">
<div class="list-item available-chatroom d-flex flex-row">
<a class="open-room available-room w-100" data-room-jid="public@conference.test.com" title="Click to open this room" href="chatroom.html">Capulet's orchard</a>
<!-- <span class="badge badge-info msgs-indicator">1</span> -->
<a href="#"
class="room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
data-html="true" data-content="<b>Room Address (JID): </b><br>public@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">
&nbsp;</a>
<a href="#" class="fa fa-bookmark" title="Click to bookmark this room">&nbsp;</a>
</div>
<div class="list-item available-chatroom d-flex flex-row">
<a class="open-room available-room w-100" data-room-jid="team@conference.test.com" title="Click to open this room" href="chatroom.html">Juliet's Balcony</a>
<a href="#"
class="room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
data-html="true" data-content="<b>Room Address (JID): </b><br>public@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">
&nbsp;</a>
<a href="#" class="fa fa-bookmark" title="Click to bookmark this room">&nbsp;</a>
</div>
</div>
</div>
</div>
<div id="converse-roster">
<div id="converse-roster" class="controlbox-section">
<div class="d-flex">
<span class="w-100">Contacts</span>
<span class="w-100 controlbox-heading">Contacts</span>
<a class="chatbox-btn fa fa-user-plus" title="Click to add new chat contacts" data-toggle="modal" data-target="#addContactModal"></a>
</div>
<form class="roster-filter-form input-button-group">
......@@ -83,7 +123,6 @@
<div class="roster-group" data-group="Colleagues">
<a href="#" data-group="Colleagues" class="group-toggle" title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Colleagues</a>
<ul>
<li class="away current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
......
sass/_controlbox.scss
View file @ afcb8081
......@@ -226,9 +226,23 @@
}
}
.list-container {
.items-list {
.list-item {
border: none;
clear: both;
color: $text-color;
display: block;
height: 2em;
overflow: hidden;
text-shadow: 0 1px 0 $text-shadow-color;
word-wrap: break-word;
}
}
}
#chatrooms {
padding: 0;
padding-bottom: 0.5em;
form.add-chatroom {
input[type=button],
......@@ -256,14 +270,6 @@
.available-chatroom,
.open-chatroom {
border: none;
clear: both;
color: $text-color;
display: block;
overflow: hidden;
margin-top: 0.5em;
text-shadow: 0 1px 0 $text-shadow-color;
word-wrap: break-word;
a:hover {
color: $dark-link-color;
}
......@@ -310,9 +316,10 @@
}
}
#chatrooms, #converse-roster {
.controlbox-section {
margin: 1em 0 0 0;
div.d-flex span {
.controlbox-heading {
margin: 0 0 0.5em 0;
text-transform: uppercase;
}
......
sass/_headline.scss
View file @ afcb8081
......@@ -9,13 +9,9 @@
background-color: $headline-head-color;
border-radius: $chatbox-border-radius;
.chat-message {
span {
&.chat-msg-them {
color: $dark-orange;
}
}
}
}
.chat-content {
height: 100%;
border-radius: $chatbox-border-radius;
......
sass/_messages.scss
View file @ afcb8081
......@@ -74,14 +74,6 @@
animation: colorchange-chatmessage 1s;
-webkit-animation: colorchange-chatmessage 1s;
}
&.delayed {
.chat-msg-them {
color: lighten($message-them-color, 5%);
}
.chat-msg-me {
color: lighten($link-color, 5%);
}
}
&:hover {
background-color: rgba(0, 0, 0, 0.035);
}
......@@ -132,12 +124,6 @@
.chat-msg-time {
padding-left: 0.5em;
}
.chat-msg-them {
color: $message-them-color;
}
.chat-msg-me {
color: $link-color;
}
}
&.chat-msg-followup {
.chat-msg-heading,
......@@ -157,18 +143,6 @@
animation: colorchange-chatmessage-muc 1s;
-webkit-animation: colorchange-chatmessage-muc 1s;
}
&.delayed {
.chat-msg-them {
color: lighten($chatroom-message-them-color, 5%);
}
.chat-msg-me {
color: lighten($link-color, 5%);
}
}
.chat-msg-them {
color: $chatroom-message-them-color;
}
.separator {
border: 0.5px solid $chatroom-head-color;
}
......
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