Skip to content

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

Update mockup and CSS accordingly

parent 859bc061
Show whitespace changes
Inline Side-by-side
Showing with 205 additions and 57 deletions
CHANGES.md
View file @ 9bc21741
......@@ -6,6 +6,7 @@
- #161 XEP-0363: HTTP File Upload
- #337 API call to update a VCard
- #1094 Show room members who aren't currently online
- It's now also possible to edit your VCard via the UI
- Automatically grow/shrink input as text is entered/removed
- MP4 and MP3 files when sent as XEP-0066 Out of Band Data, are now playable directly in chat
......
css/converse.css
View file @ 9bc21741
......@@ -8293,7 +8293,8 @@ body.reset {
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list {
overflow-y: auto;
flex-basis: 0;
flex-grow: 1; }
flex-grow: 1;
border-bottom: 1px solid lightgrey; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul.features-list,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list {
padding-top: 0; }
......@@ -8322,14 +8323,15 @@ body.reset {
cursor: pointer; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant div.row.no-gutters,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant div.row.no-gutters {
flex-wrap: nowrap; }
flex-wrap: nowrap;
min-height: 1.5em; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .badge,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .badge {
margin-top: 0.125rem; }
margin-bottom: 0.125rem; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status {
display: inline-block;
margin: 0.5em 0.5em 0.5em 0;
margin: 0 0.5em 0.125em 0;
width: 0.5em;
height: 0.5em; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-online, #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-chat,
......
css/inverse.css
View file @ 9bc21741
......@@ -8433,7 +8433,8 @@ body {
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list {
overflow-y: auto;
flex-basis: 0;
flex-grow: 1; }
flex-grow: 1;
border-bottom: 1px solid lightgrey; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul.features-list,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list {
padding-top: 0; }
......@@ -8462,14 +8463,15 @@ body {
cursor: pointer; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant div.row.no-gutters,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant div.row.no-gutters {
flex-wrap: nowrap; }
flex-wrap: nowrap;
min-height: 1.5em; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .badge,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .badge {
margin-top: 0.125rem; }
margin-bottom: 0.125rem; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status {
display: inline-block;
margin: 0.5em 0.5em 0.5em 0;
margin: 0 0.5em 0.125em 0;
width: 0.5em;
height: 0.5em; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-online, #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-chat,
......
mockup/chatroom.html
View file @ 9bc21741
......@@ -232,52 +232,196 @@
</form>
<ul class="occupant-list">
<li class="moderator occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Juliet Capulet
<span class="badge badge-info">Owner</span>
<li class="moderator occupant" title="Click to mention Juliet Capulet in your message.">
<div class="row no-gutters">
<div class="col-auto">
<div class="occupant-status occupant-online circle" title="Online"></div>
</div>
<div class="col">
<span class="occupant-nick">Juliet Capulet</span>
<span class="badge badge-danger">Owner</span>
<span class="badge badge-info">Moderator</span>
</div>
</div>
</li>
<li class="moderator occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Romeo Montague
<li class="moderator occupant" title="Click to mention Romeo Montague in your message.">
<div class="row no-gutters">
<div class="col-auto">
<div class="occupant-status occupant-online circle" title="Online"></div>
</div>
<div class="col">
<span class="occupant-nick">Romeo Montague</span>
<span class="badge badge-info">Moderator</span>
</div>
</div>
</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-away circle" title="Away"></div>Lady Montague</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Mercutio
<li class="moderator occupant" title="Click to mention Lady Montague in your message.">
<div class="row no-gutters">
<div class="col-auto">
<div class="occupant-status occupant-away circle" title="Away"></div>
</div>
<div class="col">
<span class="occupant-nick">Lady Montague</span>
</div>
</div>
</li>
<li class="moderator occupant" title="Click to mention Mercutio in your message.">
<div class="row no-gutters">
<div class="col-auto">
<div class="occupant-status occupant-online circle" title="Online"></div>
</div>
<div class="col">
<span class="occupant-nick">Mercutio</span>
<span class="badge badge-secondary">Visitor</span>
</div>
</div>
</li>
<li class="moderator occupant" title="Click to mention Lord Montague in your message.">
<div class="row no-gutters">
<div class="col-auto">
<div class="occupant-status occupant-dnd circle" title="Busy"></div>
</div>
<div class="col">
<span class="occupant-nick">Lord Montague</span>
</div>
</div>
</li>
<li class="moderator occupant" title="Click to mention Friar Laurence in your message.">
<div class="row no-gutters">
<div class="col-auto">
<div class="occupant-status occupant-online circle" title="Online"></div>
</div>
<div class="col">
<span class="occupant-nick">Friar Laurence</span>
</div>
</div>
</li>
<li class="moderator occupant" title="Click to mention Tybalt in your message.">
<div class="row no-gutters">
<div class="col-auto">
<div class="occupant-status occupant-online circle" title="Online"></div>
</div>
<div class="col">
<span class="occupant-nick">Tybalt</span>
</div>
</div>
</li>
<li class="moderator occupant" title="Click to mention Paris in your message.">
<div class="row no-gutters">
<div class="col-auto">
<div class="occupant-status occupant-online circle" title="Online"></div>
</div>
<div class="col">
<span class="occupant-nick">Paris</span>
</div>
</div>
</li>
<li class="moderator occupant" title="Click to mention Lord Capulet in your message.">
<div class="row no-gutters">
<div class="col-auto">
<div class="occupant-status occupant-online circle" title="Online"></div>
</div>
<div class="col">
<span class="occupant-nick">Lord Capulet</span>
</div>
</div>
</li>
<li class="moderator occupant" title="Click to mention Benviolo in your message.">
<div class="row no-gutters">
<div class="col-auto">
<div class="occupant-status occupant-online circle" title="Online"></div>
</div>
<div class="col">
<span class="occupant-nick">Benviolo</span>
</div>
</div>
</li>
<li class="moderator occupant" title="Click to mention Lady Capulet in your message.">
<div class="row no-gutters">
<div class="col-auto">
<div class="occupant-status occupant-online circle" title="Online"></div>
</div>
<div class="col">
<span class="occupant-nick">Lady Capulet</span>
</div>
</div>
</li>
<li class="moderator occupant" title="Click to mention Balthasar in your message.">
<div class="row no-gutters">
<div class="col-auto">
<div class="occupant-status occupant-online circle" title="Online"></div>
</div>
<div class="col">
<span class="occupant-nick">Balthasar</span>
</div>
</div>
</li>
<li class="moderator occupant" title="Click to mention Escalus, Prince of Verona in your message.">
<div class="row no-gutters">
<div class="col-auto">
<div class="occupant-status occupant-online circle" title="Online"></div>
</div>
<div class="col">
<span class="occupant-nick">Escalus, Prince of Verona</span>
</div>
</div>
</li>
<li class="moderator occupant" title="Click to mention Peter in your message.">
<div class="row no-gutters">
<div class="col-auto">
<div class="occupant-status occupant-online circle" title="Online"></div>
</div>
<div class="col">
<span class="occupant-nick">Peter</span>
</div>
</div>
</li>
<li class="moderator occupant" title="Click to mention Abram in your message.">
<div class="row no-gutters">
<div class="col-auto">
<div class="occupant-status occupant-online circle" title="Online"></div>
</div>
<div class="col">
<span class="occupant-nick">Abram</span>
</div>
</div>
</li>
<li class="moderator occupant" title="Click to mention Sampson in your message.">
<div class="row no-gutters">
<div class="col-auto">
<div class="occupant-status occupant-online circle" title="Online"></div>
</div>
<div class="col">
<span class="occupant-nick">Sampson</span>
</div>
</div>
</li>
<li class="moderator occupant" title="Click to mention Gregory in your message.">
<div class="row no-gutters">
<div class="col-auto">
<div class="occupant-status occupant-online circle" title="Online"></div>
</div>
<div class="col">
<span class="occupant-nick">Gregory</span>
</div>
</div>
</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-offline circle" title="Offline"></div>Lord Montague</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Friar Laurence</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Tybalt</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Paris</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Lord Capulet</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Benvolio</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Lady Capulet</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Balthasar</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Escalus, Prince of Verona</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Peter</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Abram</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Sampson</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>The Nurse</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Gregory</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Friar John</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Servant</li>
</ul>
<div class="chatroom-features">
<p class="occupants-heading">Features</p>
......
sass/_chatrooms.scss
View file @ 9bc21741
......@@ -157,6 +157,7 @@
overflow-y: auto;
flex-basis: 0;
flex-grow: 1;
border-bottom: 1px solid lightgrey;
}
&.features-list {
padding-top: 0;
......@@ -185,15 +186,15 @@
div.row.no-gutters {
flex-wrap: nowrap;
min-height: 1.5em;
}
.badge {
margin-top: 0.125rem;
margin-bottom: 0.125rem;
}
.occupant-status {
display: inline-block;
margin: 0.5em 0.5em 0.5em 0;
margin: 0 0.5em 0.125em 0;
width: 0.5em;
height: 0.5em;
......
src/templates/occupant.html
View file @ 9bc21741
......@@ -16,9 +16,7 @@
<div class="occupant-status occupant-{{{o.show}}} circle" title="{{{o.hint_show}}}"></div>
</div>
<div class="col">
<span class="occupant-nick">
{{{o.nick || o.jid}}}
</span>
<span class="occupant-nick">{{{o.nick || o.jid}}}</span>
{[ if (o.affiliation === "owner") { ]}
<span class="badge badge-danger">{{{o.label_owner}}}</span>
{[ } ]}
......
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