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
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 187 additions and 203 deletions
css/converse.css
View file @ afcb8081
This diff is collapsed.
css/inverse.css
View file @ afcb8081
This diff is collapsed.
mockup/chatroom.html
View file @ afcb8081
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
<div class="flyout box-flyout"> <div class="flyout box-flyout">
<div class="chat-head chat-head-chatroom row no-gutters"> <div class="chat-head chat-head-chatroom row no-gutters">
<div class="col col-9"> <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> <p class="chatroom-topic">Two households, both alike in dignity, In fair Verona, where we lay our scene.</p>
</div> </div>
<div class="chatbox-buttons row no-gutters"> <div class="chatbox-buttons row no-gutters">
...@@ -114,7 +114,7 @@ ...@@ -114,7 +114,7 @@
</div> </div>
</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> <canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content"> <div class="chat-msg-content">
<span class="chat-msg-heading"> <span class="chat-msg-heading">
......
mockup/user-panel.html
View file @ afcb8081
...@@ -14,38 +14,78 @@ ...@@ -14,38 +14,78 @@
</div> </div>
</div> </div>
<div id="chatrooms"> <div id="headlines" class="controlbox-section">
<div class="d-flex"> <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> <a class="chatbox-btn fa fa-users" title="Click to add a new room" data-toggle="modal" data-target="#chatroomsModal"></a>
</div> </div>
<div class="list-container rooms-list-container"> <div class="list-container rooms-list-container">
<div class="rooms-list"> <div class="rooms-list items-list">
<div class="available-chatroom d-flex flex-row"> <div class="list-item 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">Capulet's orchard</a>
<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> <!-- <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" <a href="#"
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> 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-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>
<div class="available-chatroom d-flex flex-row"> </div>
<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> </div>
<a href="#" class="room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info" </div>
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 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>
<div class="available-chatroom d-flex flex-row"> <div class="list-item 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 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" <a href="#"
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> 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> </div>
</div> </div>
<div id="converse-roster"> <div id="converse-roster" class="controlbox-section">
<div class="d-flex"> <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> <a class="chatbox-btn fa fa-user-plus" title="Click to add new chat contacts" data-toggle="modal" data-target="#addContactModal"></a>
</div> </div>
<form class="roster-filter-form input-button-group"> <form class="roster-filter-form input-button-group">
...@@ -83,7 +123,6 @@ ...@@ -83,7 +123,6 @@
<div class="roster-group" data-group="Colleagues"> <div class="roster-group" data-group="Colleagues">
<a href="#" data-group="Colleagues" class="group-toggle" title="Click to hide these contacts"> <a href="#" data-group="Colleagues" class="group-toggle" title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Colleagues</a> <span class="fa fa-caret-down"></span> Colleagues</a>
<ul> <ul>
<li class="away current-xmpp-contact d-flex"> <li class="away current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html"> <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 @@ ...@@ -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 { #chatrooms {
padding: 0; padding: 0;
padding-bottom: 0.5em;
form.add-chatroom { form.add-chatroom {
input[type=button], input[type=button],
...@@ -256,14 +270,6 @@ ...@@ -256,14 +270,6 @@
.available-chatroom, .available-chatroom,
.open-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 { a:hover {
color: $dark-link-color; color: $dark-link-color;
} }
...@@ -310,9 +316,10 @@ ...@@ -310,9 +316,10 @@
} }
} }
#chatrooms, #converse-roster { .controlbox-section {
margin: 1em 0 0 0; margin: 1em 0 0 0;
div.d-flex span {
.controlbox-heading {
margin: 0 0 0.5em 0; margin: 0 0 0.5em 0;
text-transform: uppercase; text-transform: uppercase;
} }
......
sass/_headline.scss
View file @ afcb8081
...@@ -9,11 +9,7 @@ ...@@ -9,11 +9,7 @@
background-color: $headline-head-color; background-color: $headline-head-color;
border-radius: $chatbox-border-radius; border-radius: $chatbox-border-radius;
.chat-message { .chat-message {
span { color: $dark-orange;
&.chat-msg-them {
color: $dark-orange;
}
}
} }
} }
.chat-content { .chat-content {
......
sass/_messages.scss
View file @ afcb8081
...@@ -74,14 +74,6 @@ ...@@ -74,14 +74,6 @@
animation: colorchange-chatmessage 1s; animation: colorchange-chatmessage 1s;
-webkit-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 { &:hover {
background-color: rgba(0, 0, 0, 0.035); background-color: rgba(0, 0, 0, 0.035);
} }
...@@ -132,12 +124,6 @@ ...@@ -132,12 +124,6 @@
.chat-msg-time { .chat-msg-time {
padding-left: 0.5em; padding-left: 0.5em;
} }
.chat-msg-them {
color: $message-them-color;
}
.chat-msg-me {
color: $link-color;
}
} }
&.chat-msg-followup { &.chat-msg-followup {
.chat-msg-heading, .chat-msg-heading,
...@@ -157,18 +143,6 @@ ...@@ -157,18 +143,6 @@
animation: colorchange-chatmessage-muc 1s; animation: colorchange-chatmessage-muc 1s;
-webkit-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 { .separator {
border: 0.5px solid $chatroom-head-color; 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