Skip to content

C
converse.js
Commit ba689f41 authored by Lauren Mayers's avatar Lauren Mayers Committed by JC Brand
Browse files
Options

Update user status colors and icons 

fixes #1209
parent a49c1f55
Show whitespace changes
Inline Side-by-side
Showing with 38 additions and 37 deletions
CHANGES.md
View file @ ba689f41
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
- #1193 OMEMO messages without a `<body>` fallback are ignored - #1193 OMEMO messages without a `<body>` fallback are ignored
- #1199 Can't get back from to login screen from registration screen - #1199 Can't get back from to login screen from registration screen
- #1204 Link encoding issue - #1204 Link encoding issue
- #1209 Bring color codes of users' status in line with other clients
- #1214 Setting `allow_contact_requests` to `false` has no effect - #1214 Setting `allow_contact_requests` to `false` has no effect
- #1221 Avoid creating a headlines box if we don't have anything to show inside it - #1221 Avoid creating a headlines box if we don't have anything to show inside it
- #1222 Adding a bookmark should prefill the room name - #1222 Adding a bookmark should prefill the room name
......
css/converse.css
View file @ ba689f41
...@@ -9706,17 +9706,17 @@ body.reset { ...@@ -9706,17 +9706,17 @@ body.reset {
color: #578EA9; color: #578EA9;
font-size: 20px; font-size: 20px;
margin-right: 0.5em; } margin-right: 0.5em; }
#conversejs .set-xmpp-status .fa-circle, #conversejs .set-xmpp-status .chat-status--online,
#conversejs .xmpp-status .fa-circle, #conversejs .xmpp-status .chat-status--online,
#conversejs .roster-contacts .fa-circle { #conversejs .roster-contacts .chat-status--online {
color: #3AA569; } color: #3AA569; }
#conversejs .set-xmpp-status .fa-minus-circle, #conversejs .set-xmpp-status .chat-status--busy,
#conversejs .xmpp-status .fa-minus-circle, #conversejs .xmpp-status .chat-status--busy,
#conversejs .roster-contacts .fa-minus-circle { #conversejs .roster-contacts .chat-status--busy {
color: #E77051; } color: #E77051; }
#conversejs .set-xmpp-status .fa-dot-circle-o, #conversejs .set-xmpp-status .chat-status--away,
#conversejs .xmpp-status .fa-dot-circle-o, #conversejs .xmpp-status .chat-status--away,
#conversejs .roster-contacts .fa-dot-circle-o { #conversejs .roster-contacts .chat-status--away {
color: #E7A151; } color: #E7A151; }
#conversejs .set-xmpp-status .far.fa-circle, #conversejs .set-xmpp-status .far.fa-circle,
#conversejs .set-xmpp-status .fa-times-circle, #conversejs .set-xmpp-status .fa-times-circle,
...@@ -10339,8 +10339,8 @@ body.reset { ...@@ -10339,8 +10339,8 @@ body.reset {
color: #89d6ab; } color: #89d6ab; }
#conversejs .items-list .list-item.open .fa-minus-circle { #conversejs .items-list .list-item.open .fa-minus-circle {
color: #f0a794; } color: #f0a794; }
#conversejs .items-list .list-item.open .fa-dot-circle-o { #conversejs .items-list .list-item.open .fa-dot-circle {
color: #f0c594; } color: #f6dec1; }
#conversejs .items-list .list-item.open .far .fa-circle, #conversejs .items-list .list-item.open .far .fa-circle,
#conversejs .items-list .list-item.open .fa-times-circle { #conversejs .items-list .list-item.open .fa-times-circle {
color: #e6e7e4; } color: #e6e7e4; }
......
dist/converse.js
View file @ ba689f41
...@@ -43834,6 +43834,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_ ...@@ -43834,6 +43834,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
return; return;
} }
if (_.isBoolean(plugin.enabled) && plugin.enabled || _.isFunction(plugin.enabled) && plugin.enabled(this.plugged) || _.isNil(plugin.enabled)) { if (_.isBoolean(plugin.enabled) && plugin.enabled || _.isFunction(plugin.enabled) && plugin.enabled(this.plugged) || _.isNil(plugin.enabled)) {
_.extend(plugin, this.properties); _.extend(plugin, this.properties);
if (plugin.dependencies) { if (plugin.dependencies) {
this.loadPluginDependencies(plugin); this.loadPluginDependencies(plugin);
...@@ -43907,7 +43908,6 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_ ...@@ -43907,7 +43908,6 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
//# sourceMappingURL=pluggable.js.map //# sourceMappingURL=pluggable.js.map
/***/ }), /***/ }),
/***/ "./node_modules/process/browser.js": /***/ "./node_modules/process/browser.js":
...@@ -78403,25 +78403,25 @@ __e(o.label_close) + ...@@ -78403,25 +78403,25 @@ __e(o.label_close) +
if (o.status === 'online') { ; if (o.status === 'online') { ;
__p += ' checked="checked" '; __p += ' checked="checked" ';
} ; } ;
__p += '\n type="radio" id="radio-online" value="online" name="chat_status" class="custom-control-input">\n <label class="custom-control-label" for="radio-online">\n <span class="fa fa-circle"></span>&nbsp;' + __p += '\n type="radio" id="radio-online" value="online" name="chat_status" class="custom-control-input">\n <label class="custom-control-label" for="radio-online">\n <span class="fa fa-circle chat-status chat-status--online"></span>&nbsp;' +
__e(o.label_online) + __e(o.label_online) +
'</label>\n </div>\n <div class="custom-control custom-radio">\n <input '; '</label>\n </div>\n <div class="custom-control custom-radio">\n <input ';
if (o.status === 'busy') { ; if (o.status === 'busy') { ;
__p += ' checked="checked" '; __p += ' checked="checked" ';
} ; } ;
__p += '\n type="radio" id="radio-busy" value="dnd" name="chat_status" class="custom-control-input">\n <label class="custom-control-label" for="radio-busy">\n <span class="fa fa-minus-circle"></span>&nbsp;' + __p += '\n type="radio" id="radio-busy" value="dnd" name="chat_status" class="custom-control-input">\n <label class="custom-control-label" for="radio-busy">\n <span class="fa fa-minus-circle chat-status chat-status--busy"></span>&nbsp;' +
__e(o.label_busy) + __e(o.label_busy) +
'</label>\n </div>\n <div class="custom-control custom-radio">\n <input '; '</label>\n </div>\n <div class="custom-control custom-radio">\n <input ';
if (o.status === 'away') { ; if (o.status === 'away') { ;
__p += ' checked="checked" '; __p += ' checked="checked" ';
} ; } ;
__p += '\n type="radio" id="radio-away" value="away" name="chat_status" class="custom-control-input">\n <label class="custom-control-label" for="radio-away">\n <span class="fa fa-dot-circle"></span>&nbsp;' + __p += '\n type="radio" id="radio-away" value="away" name="chat_status" class="custom-control-input">\n <label class="custom-control-label" for="radio-away">\n <span class="fa fa-circle chat-status chat-status--away"></span>&nbsp;' +
__e(o.label_away) + __e(o.label_away) +
'</label>\n </div>\n <div class="custom-control custom-radio">\n <input '; '</label>\n </div>\n <div class="custom-control custom-radio">\n <input ';
if (o.status === 'xa') { ; if (o.status === 'xa') { ;
__p += ' checked="checked" '; __p += ' checked="checked" ';
} ; } ;
__p += '\n type="radio" id="radio-xa" value="xa" name="chat_status" class="custom-control-input">\n <label class="custom-control-label" for="radio-xa">\n <span class="far fa-circle"></span>&nbsp;' + __p += '\n type="radio" id="radio-xa" value="xa" name="chat_status" class="custom-control-input">\n <label class="custom-control-label" for="radio-xa">\n <span class="far fa-circle chat-status chat-status--xa"></span>&nbsp;' +
__e(o.label_xa) + __e(o.label_xa) +
'</label>\n </div>\n </div>\n <div class="btn-group w-100">\n <input name="status_message" type="text" class="form-control" \n value="' + '</label>\n </div>\n </div>\n <div class="btn-group w-100">\n <input name="status_message" type="text" class="form-control" \n value="' +
__e(o.status_message) + __e(o.status_message) +
...@@ -80340,23 +80340,23 @@ __e(o.chat_status) + ...@@ -80340,23 +80340,23 @@ __e(o.chat_status) +
__e(o.chat_status) + __e(o.chat_status) +
'">\n <span class="\n '; '">\n <span class="\n ';
if (o.chat_status === 'online') { ; if (o.chat_status === 'online') { ;
__p += ' fa fa-circle '; __p += ' fa fa-circle chat-status chat-status--online';
} ; } ;
__p += '\n '; __p += '\n ';
if (o.chat_status === 'dnd') { ; if (o.chat_status === 'dnd') { ;
__p += ' fa fa-minus-circle '; __p += ' fa fa-minus-circle chat-status chat-status--busy ';
} ; } ;
__p += '\n '; __p += '\n ';
if (o.chat_status === 'away') { ; if (o.chat_status === 'away') { ;
__p += ' fa fa-dot-circle '; __p += ' fa fa-circle chat-status chat-status--away';
} ; } ;
__p += '\n '; __p += '\n ';
if (o.chat_status === 'xa') { ; if (o.chat_status === 'xa') { ;
__p += ' far fa-circle '; __p += ' far fa-circle chat-status chat-status--xa ';
} ; } ;
__p += '\n '; __p += '\n ';
if (o.chat_status === 'offline') { ; if (o.chat_status === 'offline') { ;
__p += ' fa fa-times-circle '; __p += ' fa fa-circle chat-status chat-status--offline';
} ; } ;
__p += '"></span> ' + __p += '"></span> ' +
__e(o.status_message) + __e(o.status_message) +
mockup/user-panel.html
View file @ ba689f41
...@@ -150,12 +150,12 @@ ...@@ -150,12 +150,12 @@
</li> </li>
<li class="list-item controlbox-padded offline current-xmpp-contact d-flex"> <li class="list-item controlbox-padded offline 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">
<span class="fa fa-times-circle" title="This contact is offline"></span> Montague</a> <span class="fa fa-circle chat-status chat-status--offline" title="This contact is offline"></span> Montague</a>
<a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a> <a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li> </li>
<li class="list-item controlbox-padded offline current-xmpp-contact d-flex"> <li class="list-item controlbox-padded offline 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">
<span class="fa fa-times-circle" title="This contact is offline"></span> Lady Montague</a> <span class="fa fa-circle chat-status chat-status--offline" title="This contact is offline"></span> Lady Montague</a>
<a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a> <a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li> </li>
</ul> </ul>
......
sass/_controlbox.scss
View file @ ba689f41
...@@ -23,13 +23,13 @@ ...@@ -23,13 +23,13 @@
.set-xmpp-status, .set-xmpp-status,
.xmpp-status, .xmpp-status,
.roster-contacts { .roster-contacts {
.fa-circle { .chat-status--online {
color: $green; color: $green;
} }
.fa-minus-circle { .chat-status--busy {
color: $red color: $red
} }
.fa-dot-circle-o { .chat-status--away {
color: $orange, color: $orange,
} }
.far.fa-circle, .far.fa-circle,
......
sass/_lists.scss
View file @ ba689f41
...@@ -87,8 +87,8 @@ ...@@ -87,8 +87,8 @@
.fa-minus-circle { .fa-minus-circle {
color: lighten($red, 15%); color: lighten($red, 15%);
} }
.fa-dot-circle-o { .fa-dot-circle {
color: lighten($orange, 15%); color: lighten($orange, 25%);
} }
.far .fa-circle, .far .fa-circle,
.fa-times-circle { .fa-times-circle {
......
src/templates/chat_status_modal.html
View file @ ba689f41
...@@ -15,25 +15,25 @@ ...@@ -15,25 +15,25 @@
<input {[ if (o.status === 'online') { ]} checked="checked" {[ } ]} <input {[ if (o.status === 'online') { ]} checked="checked" {[ } ]}
type="radio" id="radio-online" value="online" name="chat_status" class="custom-control-input"> type="radio" id="radio-online" value="online" name="chat_status" class="custom-control-input">
<label class="custom-control-label" for="radio-online"> <label class="custom-control-label" for="radio-online">
<span class="fa fa-circle"></span>&nbsp;{{{o.label_online}}}</label> <span class="fa fa-circle chat-status chat-status--online"></span>&nbsp;{{{o.label_online}}}</label>
</div> </div>
<div class="custom-control custom-radio"> <div class="custom-control custom-radio">
<input {[ if (o.status === 'busy') { ]} checked="checked" {[ } ]} <input {[ if (o.status === 'busy') { ]} checked="checked" {[ } ]}
type="radio" id="radio-busy" value="dnd" name="chat_status" class="custom-control-input"> type="radio" id="radio-busy" value="dnd" name="chat_status" class="custom-control-input">
<label class="custom-control-label" for="radio-busy"> <label class="custom-control-label" for="radio-busy">
<span class="fa fa-minus-circle"></span>&nbsp;{{{o.label_busy}}}</label> <span class="fa fa-minus-circle chat-status chat-status--busy"></span>&nbsp;{{{o.label_busy}}}</label>
</div> </div>
<div class="custom-control custom-radio"> <div class="custom-control custom-radio">
<input {[ if (o.status === 'away') { ]} checked="checked" {[ } ]} <input {[ if (o.status === 'away') { ]} checked="checked" {[ } ]}
type="radio" id="radio-away" value="away" name="chat_status" class="custom-control-input"> type="radio" id="radio-away" value="away" name="chat_status" class="custom-control-input">
<label class="custom-control-label" for="radio-away"> <label class="custom-control-label" for="radio-away">
<span class="fa fa-dot-circle"></span>&nbsp;{{{o.label_away}}}</label> <span class="fa fa-circle chat-status chat-status--away"></span>&nbsp;{{{o.label_away}}}</label>
</div> </div>
<div class="custom-control custom-radio"> <div class="custom-control custom-radio">
<input {[ if (o.status === 'xa') { ]} checked="checked" {[ } ]} <input {[ if (o.status === 'xa') { ]} checked="checked" {[ } ]}
type="radio" id="radio-xa" value="xa" name="chat_status" class="custom-control-input"> type="radio" id="radio-xa" value="xa" name="chat_status" class="custom-control-input">
<label class="custom-control-label" for="radio-xa"> <label class="custom-control-label" for="radio-xa">
<span class="far fa-circle"></span>&nbsp;{{{o.label_xa}}}</label> <span class="far fa-circle chat-status chat-status--xa"></span>&nbsp;{{{o.label_xa}}}</label>
</div> </div>
</div> </div>
<div class="btn-group w-100"> <div class="btn-group w-100">
......
src/templates/profile_view.html
View file @ ba689f41
...@@ -13,11 +13,11 @@ ...@@ -13,11 +13,11 @@
<div class="d-flex xmpp-status"> <div class="d-flex xmpp-status">
<span class="{{{o.chat_status}}} w-100 align-self-center" data-value="{{{o.chat_status}}}"> <span class="{{{o.chat_status}}} w-100 align-self-center" data-value="{{{o.chat_status}}}">
<span class=" <span class="
{[ if (o.chat_status === 'online') { ]} fa fa-circle {[ } ]} {[ if (o.chat_status === 'online') { ]} fa fa-circle chat-status chat-status--online{[ } ]}
{[ if (o.chat_status === 'dnd') { ]} fa fa-minus-circle {[ } ]} {[ if (o.chat_status === 'dnd') { ]} fa fa-minus-circle chat-status chat-status--busy {[ } ]}
{[ if (o.chat_status === 'away') { ]} fa fa-dot-circle {[ } ]} {[ if (o.chat_status === 'away') { ]} fa fa-circle chat-status chat-status--away{[ } ]}
{[ if (o.chat_status === 'xa') { ]} far fa-circle {[ } ]} {[ if (o.chat_status === 'xa') { ]} far fa-circle chat-status chat-status--xa {[ } ]}
{[ if (o.chat_status === 'offline') { ]} fa fa-times-circle {[ } ]}"></span> {{{o.status_message}}}</span> {[ if (o.chat_status === 'offline') { ]} fa fa-circle chat-status chat-status--offline{[ } ]}"></span> {{{o.status_message}}}</span>
<a class="chatbox-btn change-status fa fa-pencil-alt" title="{{{o.title_change_status}}}" data-toggle="modal" data-target="#changeStatusModal"></a> <a class="chatbox-btn change-status fa fa-pencil-alt" title="{{{o.title_change_status}}}" data-toggle="modal" data-target="#changeStatusModal"></a>
</div> </div>
</div> </div>
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