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 @@ ...@@ -6,6 +6,7 @@
- #161 XEP-0363: HTTP File Upload - #161 XEP-0363: HTTP File Upload
- #337 API call to update a VCard - #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 - It's now also possible to edit your VCard via the UI
- Automatically grow/shrink input as text is entered/removed - 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 - 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 { ...@@ -8293,7 +8293,8 @@ body.reset {
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list { #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list {
overflow-y: auto; overflow-y: auto;
flex-basis: 0; 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.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul.features-list,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list { #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list {
padding-top: 0; } padding-top: 0; }
...@@ -8322,14 +8323,15 @@ body.reset { ...@@ -8322,14 +8323,15 @@ body.reset {
cursor: pointer; } cursor: pointer; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant div.row.no-gutters, #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 { #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.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .badge,
#conversejs .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.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 { #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status {
display: inline-block; display: inline-block;
margin: 0.5em 0.5em 0.5em 0; margin: 0 0.5em 0.125em 0;
width: 0.5em; width: 0.5em;
height: 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, #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 { ...@@ -8433,7 +8433,8 @@ body {
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list { #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list {
overflow-y: auto; overflow-y: auto;
flex-basis: 0; 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.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul.features-list,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list { #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list {
padding-top: 0; } padding-top: 0; }
...@@ -8462,14 +8463,15 @@ body { ...@@ -8462,14 +8463,15 @@ body {
cursor: pointer; } cursor: pointer; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant div.row.no-gutters, #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 { #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.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .badge,
#conversejs .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.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 { #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status {
display: inline-block; display: inline-block;
margin: 0.5em 0.5em 0.5em 0; margin: 0 0.5em 0.125em 0;
width: 0.5em; width: 0.5em;
height: 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, #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 @@ ...@@ -232,52 +232,196 @@
</form> </form>
<ul class="occupant-list"> <ul class="occupant-list">
<li class="moderator occupant" title="Click to mention leia in your message."> <li class="moderator occupant" title="Click to mention Juliet Capulet in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Juliet Capulet <div class="row no-gutters">
<span class="badge badge-info">Owner</span> <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>
<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> <span class="badge badge-info">Moderator</span>
</div>
</div>
</li> </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="moderator occupant" title="Click to mention Lady Montague in your message.">
<li class="participant occupant" title="Click to mention leia in your message."> <div class="row no-gutters">
<div class="occupant-status occupant-online circle" title="Online"></div>Mercutio <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> <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>
<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> </ul>
<div class="chatroom-features"> <div class="chatroom-features">
<p class="occupants-heading">Features</p> <p class="occupants-heading">Features</p>
......
sass/_chatrooms.scss
View file @ 9bc21741
...@@ -157,6 +157,7 @@ ...@@ -157,6 +157,7 @@
overflow-y: auto; overflow-y: auto;
flex-basis: 0; flex-basis: 0;
flex-grow: 1; flex-grow: 1;
border-bottom: 1px solid lightgrey;
} }
&.features-list { &.features-list {
padding-top: 0; padding-top: 0;
...@@ -185,15 +186,15 @@ ...@@ -185,15 +186,15 @@
div.row.no-gutters { div.row.no-gutters {
flex-wrap: nowrap; flex-wrap: nowrap;
min-height: 1.5em;
} }
.badge { .badge {
margin-top: 0.125rem; margin-bottom: 0.125rem;
} }
.occupant-status { .occupant-status {
display: inline-block; display: inline-block;
margin: 0.5em 0.5em 0.5em 0; margin: 0 0.5em 0.125em 0;
width: 0.5em; width: 0.5em;
height: 0.5em; height: 0.5em;
......
src/templates/occupant.html
View file @ 9bc21741
...@@ -16,9 +16,7 @@ ...@@ -16,9 +16,7 @@
<div class="occupant-status occupant-{{{o.show}}} circle" title="{{{o.hint_show}}}"></div> <div class="occupant-status occupant-{{{o.show}}} circle" title="{{{o.hint_show}}}"></div>
</div> </div>
<div class="col"> <div class="col">
<span class="occupant-nick"> <span class="occupant-nick">{{{o.nick || o.jid}}}</span>
{{{o.nick || o.jid}}}
</span>
{[ if (o.affiliation === "owner") { ]} {[ if (o.affiliation === "owner") { ]}
<span class="badge badge-danger">{{{o.label_owner}}}</span> <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