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 @@
<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>
</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="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 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,11 +9,7 @@
background-color: $headline-head-color;
border-radius: $chatbox-border-radius;
.chat-message {
span {
&.chat-msg-them {
color: $dark-orange;
}
}
color: $dark-orange;
}
}
.chat-content {
......
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