Trang chủ Khám phá Trợ giúp
Đăng ký Đăng nhập
im-changing.ru
/
converse.js
mirror of https://github.com/conversejs/converse.js.git
2
0
Fork 0
Các tập tin Các vấn đề 0 Wiki
Browse Source

Update user status colors and icons

fixes #1209
Lauren Mayers 6 năm trước cách đây
mục cha
a49c1f5592
commit
ba689f4185
8 tập tin đã thay đổi với 38 bổ sung và 37 xóa
Split View Hiển thị tình trạng sai khác
  1. 1 0
      CHANGES.md
  2. 11 11
      css/converse.css
  3. 10 10
      dist/converse.js
  4. 2 2
      mockup/user-panel.html
  5. 3 3
      sass/_controlbox.scss
  6. 2 2
      sass/_lists.scss
  7. 4 4
      src/templates/chat_status_modal.html
  8. 5 5
      src/templates/profile_view.html

+ 1 - 0
CHANGES.md
Xem Tập Tin 

@@ -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

+ 11 - 11
css/converse.css
Xem Tập Tin 

@@ -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; }

+ 10 - 10
dist/converse.js
Xem Tập Tin 

@@ -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) +

+ 2 - 2
mockup/user-panel.html
Xem Tập Tin 

@@ -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>

+ 3 - 3
sass/_controlbox.scss
Xem Tập Tin 

@@ -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,

+ 2 - 2
sass/_lists.scss
Xem Tập Tin 

@@ -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 {

+ 4 - 4
src/templates/chat_status_modal.html
Xem Tập Tin 

@@ -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">

+ 5 - 5
src/templates/profile_view.html
Xem Tập Tin 

@@ -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>