Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

CSS: set groupchat owner badge to groupchat color

Browse Source
This commit is contained in:
JC Brand 2018-12-10 14:49:54 +01:00
parent 262b9f9260
commit 1d55b131f6
7 changed files with 39 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
css/converse.css
View File

@ -9354,6 +9354,7 @@ readers do not read off random characters that represent icons */
--heading-display: block;
--heading-color: white;
--chatroom-head-color: #E77051;
--chatroom-head-color-dark: #D24E2B;
--chatroom-head-color-lighten-25-percent: #f6ccc1;
--chatroom-head-button-color: var(--chatroom-head-color);
--chatroom-head-title-font-weight: normal;
@ -9902,8 +9903,9 @@ body.reset {
border-color: var(--primary-color-dark); }
#conversejs .badge {
text-shadow: none; }
#conversejs .badge {
color: white; }
#conversejs .btn-primary, #conversejs .button-primary, #conversejs .badge-primary {
color: white;
background-color: var(--primary-color);
border-color: transparent; }
#conversejs .btn-primary:hover, #conversejs .button-primary:hover, #conversejs .badge-primary:hover {
@ -9912,8 +9914,16 @@ body.reset {
#conversejs .btn-primary.active, #conversejs .button-primary.active, #conversejs .badge-primary.active {
background-color: var(--primary-color-dark) !important;
border-color: transparent !important; }
#conversejs .badge-groupchat {
background-color: var(--chatroom-head-color);
border-color: transparent; }
#conversejs .badge-groupchat:hover {
background-color: var(--chatroom-head-color-dark);
border-color: transparent; }
#conversejs .badge-groupchat.active {
background-color: var(--chatroom-head-color-dark) !important;
border-color: transparent !important; }
#conversejs .btn-info, #conversejs .badge-info {
color: white;
background-color: var(--primary-color);
border-color: var(--primary-color); }
#conversejs .btn-info:hover, #conversejs .badge-info:hover {

2
dist/converse.js vendored
View File

@ -93577,7 +93577,7 @@ __e(o.hint_show) +
__e(o.nick || o.jid) +
'</span>\n <span class="occupant-badges">\n ';
if (o.affiliation === "owner") { ;
__p += '\n <span class="badge badge-primary">' +
__p += '\n <span class="badge badge-groupchat">' +
__e(o.label_owner) +
'</span>\n ';
} ;

10
mockup/chatroom.html
View File

@ -28,8 +28,8 @@
<p class="chatroom-description">Two households, both alike in dignity, In fair Verona, where we lay our scene.</p>
</div>
<div class="chatbox-buttons row no-gutters">
<a class="chatbox-btn fa fa-close"></a>
<a class="chatbox-btn fa fa-wrench"></a>
<a class="chatbox-btn fa fa-sign-out-alt" title="Leave this groupchat"></a>
<a class="chatbox-btn fa fa-wrench" title="Configure this groupchat"></a>
</div>
</div>
@ -292,7 +292,7 @@
<form class="sendXMPPMessage">
<ul class="chat-toolbar no-text-select">
<li class="toggle-smiley fa fa-smile-o" title="Insert a smiley"></li>
<li class="toggle-occupants"><a class="fa fa-user-times" title="Hide the list of occupants"></a></li>
<li class="toggle-occupants"><a class="fa fa-angle-double-right" title="Hide the list of occupants"></a></li>
</ul>
<textarea class="chat-textarea form-control" placeholder="Message"></textarea>
</form>
@ -314,7 +314,7 @@
<div class="col occupant-nick-badge">
<span class="occupant-nick">Juliet Capulet</span>
<span class="occupant-badges">
<span class="badge badge-danger">Owner</span>
<span class="badge badge-groupchat">Owner</span>
<span class="badge badge-info">Moderator</span>
</span>
</div>
@ -456,7 +456,7 @@
<div class="col occupant-nick-badge">
<span class="occupant-nick">Escalus, Prince of Verona and then some</span>
<span class="occupant-badges">
<span class="badge badge-danger">Admin</span>
<span class="badge badge-info">Admin</span>
<span class="badge badge-info">Moderator</span>
</span>
</div>

1
sass/_chatrooms.scss
View File

@ -1,7 +1,6 @@
#conversejs.converse-embedded,
#conversejs {
.badge-room-color {
background-color: var(--chatroom-head-color);
}

19
sass/_core.scss
View File

@ -470,8 +470,11 @@ body.reset {
text-shadow: none;
}
.btn-primary, .button-primary, .badge-primary {
.badge {
color: white;
}
.btn-primary, .button-primary, .badge-primary {
background-color: var(--primary-color);
border-color: transparent;
&:hover {
@ -484,8 +487,20 @@ body.reset {
}
}
.badge-groupchat {
background-color: var(--chatroom-head-color);
border-color: transparent;
&:hover {
background-color: var(--chatroom-head-color-dark);
border-color: transparent;
}
&.active {
background-color: var(--chatroom-head-color-dark) !important;
border-color: transparent !important;
}
}
.btn-info, .badge-info {
color: white;
background-color: var(--primary-color);
border-color: var(--primary-color);
&:hover {

5
sass/_variables.scss
View File

@ -97,7 +97,8 @@ $font-path: "webfonts/icomoon/fonts/" !default;
--heading-display: block;
--heading-color: white;
--chatroom-head-color: #E77051; // $red
--chatroom-head-color: #E77051; // $orange
--chatroom-head-color-dark: #D24E2B; // $red
--chatroom-head-color-lighten-25-percent: #f6ccc1; // lighten($red, 25%)
--chatroom-head-button-color: var(--chatroom-head-color);
--chatroom-head-title-font-weight: normal;
@ -112,7 +113,7 @@ $font-path: "webfonts/icomoon/fonts/" !default;
--chatroom-correcting-color: #fadfd7; // lighten($red, 30%)
--headline-head-color: #E7A151; // $orange
--headline-message-color: #D2842B; // $dark-orange
--headline-message-color: #D2842B;
--chatbox-button-size: 14px;
--fullpage-chatbox-button-size: 16px;

2
src/templates/occupant.html
View File

@ -19,7 +19,7 @@
<span class="occupant-nick">{{{o.nick || o.jid}}}</span>
<span class="occupant-badges">
{[ if (o.affiliation === "owner") { ]}
<span class="badge badge-primary">{{{o.label_owner}}}</span>
<span class="badge badge-groupchat">{{{o.label_owner}}}</span>
{[ } ]}
{[ if (o.affiliation === "admin") { ]}
<span class="badge badge-info">{{{o.label_admin}}}</span>