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

Update user status colors and icons 

fixes #1209
This commit is contained in:
Lauren Mayers 2018-10-07 14:17:52 -04:00 committed by JC Brand
parent a49c1f5592
commit ba689f4185
8 changed files with 38 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGES.md
View File

@ -19,6 +19,7 @@
- #1193 OMEMO messages without a `<body>` fallback are ignored
- #1199 Can't get back from to login screen from registration screen
- #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
- #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

22
css/converse.css
View File

@ -9706,17 +9706,17 @@ body.reset {
color: #578EA9;
font-size: 20px;
margin-right: 0.5em; }
#conversejs .set-xmpp-status .fa-circle,
#conversejs .xmpp-status .fa-circle,
#conversejs .roster-contacts .fa-circle {
#conversejs .set-xmpp-status .chat-status--online,
#conversejs .xmpp-status .chat-status--online,
#conversejs .roster-contacts .chat-status--online {
color: #3AA569; }
#conversejs .set-xmpp-status .fa-minus-circle,
#conversejs .xmpp-status .fa-minus-circle,
#conversejs .roster-contacts .fa-minus-circle {
#conversejs .set-xmpp-status .chat-status--busy,
#conversejs .xmpp-status .chat-status--busy,
#conversejs .roster-contacts .chat-status--busy {
color: #E77051; }
#conversejs .set-xmpp-status .fa-dot-circle-o,
#conversejs .xmpp-status .fa-dot-circle-o,
#conversejs .roster-contacts .fa-dot-circle-o {
#conversejs .set-xmpp-status .chat-status--away,
#conversejs .xmpp-status .chat-status--away,
#conversejs .roster-contacts .chat-status--away {
color: #E7A151; }
#conversejs .set-xmpp-status .far.fa-circle,
#conversejs .set-xmpp-status .fa-times-circle,
@ -10339,8 +10339,8 @@ body.reset {
color: #89d6ab; }
#conversejs .items-list .list-item.open .fa-minus-circle {
color: #f0a794; }
#conversejs .items-list .list-item.open .fa-dot-circle-o {
color: #f0c594; }
#conversejs .items-list .list-item.open .fa-dot-circle {
color: #f6dec1; }
#conversejs .items-list .list-item.open .far .fa-circle,
#conversejs .items-list .list-item.open .fa-times-circle {
color: #e6e7e4; }

20
dist/converse.js vendored
View File

@ -43834,6 +43834,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
return;
}
if (_.isBoolean(plugin.enabled) && plugin.enabled || _.isFunction(plugin.enabled) && plugin.enabled(this.plugged) || _.isNil(plugin.enabled)) {
_.extend(plugin, this.properties);
if (plugin.dependencies) {
this.loadPluginDependencies(plugin);
@ -43907,7 +43908,6 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
//# sourceMappingURL=pluggable.js.map
/***/ }),
/***/ "./node_modules/process/browser.js":
@ -78403,25 +78403,25 @@ __e(o.label_close) +
if (o.status === 'online') { ;
__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) +
'</label>\n </div>\n <div class="custom-control custom-radio">\n <input ';
if (o.status === 'busy') { ;
__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) +
'</label>\n </div>\n <div class="custom-control custom-radio">\n <input ';
if (o.status === 'away') { ;
__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) +
'</label>\n </div>\n <div class="custom-control custom-radio">\n <input ';
if (o.status === 'xa') { ;
__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) +
'</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) +
@ -80340,23 +80340,23 @@ __e(o.chat_status) +
__e(o.chat_status) +
'">\n <span class="\n ';
if (o.chat_status === 'online') { ;
__p += ' fa fa-circle ';
__p += ' fa fa-circle chat-status chat-status--online';
} ;
__p += '\n ';
if (o.chat_status === 'dnd') { ;
__p += ' fa fa-minus-circle ';
__p += ' fa fa-minus-circle chat-status chat-status--busy ';
} ;
__p += '\n ';
if (o.chat_status === 'away') { ;
__p += ' fa fa-dot-circle ';
__p += ' fa fa-circle chat-status chat-status--away';
} ;
__p += '\n ';
if (o.chat_status === 'xa') { ;
__p += ' far fa-circle ';
__p += ' far fa-circle chat-status chat-status--xa ';
} ;
__p += '\n ';
if (o.chat_status === 'offline') { ;
__p += ' fa fa-times-circle ';
__p += ' fa fa-circle chat-status chat-status--offline';
} ;
__p += '"></span> ' +
__e(o.status_message) +

4
mockup/user-panel.html
View File

@ -150,12 +150,12 @@
</li>
<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">
<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>
</li>
<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">
<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>
</li>
</ul>

6
sass/_controlbox.scss
View File

@ -23,13 +23,13 @@
.set-xmpp-status,
.xmpp-status,
.roster-contacts {
.fa-circle {
.chat-status--online {
color: $green;
}
.fa-minus-circle {
.chat-status--busy {
color: $red
}
.fa-dot-circle-o {
.chat-status--away {
color: $orange,
}
.far.fa-circle,

4
sass/_lists.scss
View File

@ -87,8 +87,8 @@
.fa-minus-circle {
color: lighten($red, 15%);
}
.fa-dot-circle-o {
color: lighten($orange, 15%);
.fa-dot-circle {
color: lighten($orange, 25%);
}
.far .fa-circle,
.fa-times-circle {

8
src/templates/chat_status_modal.html
View File

@ -15,25 +15,25 @@
<input {[ if (o.status === 'online') { ]} checked="checked" {[ } ]}
type="radio" id="radio-online" value="online" name="chat_status" class="custom-control-input">
<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 class="custom-control custom-radio">
<input {[ if (o.status === 'busy') { ]} checked="checked" {[ } ]}
type="radio" id="radio-busy" value="dnd" name="chat_status" class="custom-control-input">
<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 class="custom-control custom-radio">
<input {[ if (o.status === 'away') { ]} checked="checked" {[ } ]}
type="radio" id="radio-away" value="away" name="chat_status" class="custom-control-input">
<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 class="custom-control custom-radio">
<input {[ if (o.status === 'xa') { ]} checked="checked" {[ } ]}
type="radio" id="radio-xa" value="xa" name="chat_status" class="custom-control-input">
<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 class="btn-group w-100">

10
src/templates/profile_view.html
View File

@ -13,11 +13,11 @@
<div class="d-flex xmpp-status">
<span class="{{{o.chat_status}}} w-100 align-self-center" data-value="{{{o.chat_status}}}">
<span class="
{[ if (o.chat_status === 'online') { ]} fa fa-circle {[ } ]}
{[ if (o.chat_status === 'dnd') { ]} fa fa-minus-circle {[ } ]}
{[ if (o.chat_status === 'away') { ]} fa fa-dot-circle {[ } ]}
{[ if (o.chat_status === 'xa') { ]} far fa-circle {[ } ]}
{[ if (o.chat_status === 'offline') { ]} fa fa-times-circle {[ } ]}"></span> {{{o.status_message}}}</span>
{[ if (o.chat_status === 'online') { ]} fa fa-circle chat-status chat-status--online{[ } ]}
{[ if (o.chat_status === 'dnd') { ]} fa fa-minus-circle chat-status chat-status--busy {[ } ]}
{[ if (o.chat_status === 'away') { ]} fa fa-circle chat-status chat-status--away{[ } ]}
{[ if (o.chat_status === 'xa') { ]} far fa-circle chat-status chat-status--xa {[ } ]}
{[ 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>
</div>
</div>