user status: Add ability to edit status text.

.eslintrc.json

@@ -204,6 +204,7 @@
         "user_pill": false,
         "user_search": false,
         "user_status": false,
+        "user_status_ui": false,
         "util": false,
         "poll_widget": false,
         "widgetize": false,

frontend_tests/node_tests/ui_init.js

@@ -118,6 +118,7 @@ zrequire('typing');
 zrequire('top_left_corner');
 zrequire('starred_messages');
 zrequire('user_status');
+zrequire('user_status_ui');
 zrequire('ui_init');
 
 set_global('$', global.make_zjquery());

frontend_tests/node_tests/user_status.js

@@ -42,10 +42,12 @@ run_test('server', () => {
     initialize();
 
     var sent_data;
+    var success;
 
     channel.post = (opts) => {
         sent_data = opts.data;
         assert.equal(opts.url, '/json/users/me/status');
+        success = opts.success;
     };
 
     assert.equal(sent_data, undefined);
@@ -55,4 +57,16 @@ run_test('server', () => {
 
     user_status.server_revoke_away();
     assert.deepEqual(sent_data, {away: false, status_text: undefined});
+
+    var called;
+
+    user_status.server_update({
+        status_text: 'out to lunch',
+        success: () => {
+            called = true;
+        },
+    });
+
+    success();
+    assert(called);
 });

static/js/bundles/app.js

@@ -154,6 +154,7 @@ import "js/zulip.js";
 import "js/presence.js";
 import "js/user_search.js";
 import "js/user_status.js";
+import "js/user_status_ui.js";
 import "js/buddy_data.js";
 import "js/padded_widget.js";
 import "js/buddy_list.js";
@@ -229,4 +230,5 @@ import "styles/media.scss";
 import "styles/typing_notifications.scss";
 import "styles/hotspots.scss";
 import "styles/night_mode.scss";
+import "styles/user_status.scss";
 import "styles/widgets.scss";

static/js/popovers.js

@@ -792,6 +792,15 @@ exports.register_click_handlers = function () {
         e.preventDefault();
     });
 
+    $('body').on('click', '.update_status_text', function (e) {
+        popovers.hide_all();
+
+        user_status_ui.open_overlay();
+
+        e.stopPropagation();
+        e.preventDefault();
+    });
+
     $('#user_presences').on('click', 'span.arrow', function (e) {
         e.stopPropagation();
 

static/js/ui_init.js

@@ -335,6 +335,7 @@ exports.initialize_everything = function () {
     panels.initialize();
     typing.initialize();
     starred_messages.initialize();
+    user_status_ui.initialize();
 };
 
 $(function () {

static/js/user_status.js

@@ -13,6 +13,11 @@ exports.server_update = function (opts) {
             status_text: opts.status_text,
         },
         idempotent: true,
+        success: function () {
+            if (opts.success) {
+                opts.success();
+            }
+        },
     });
 };
 

static/js/user_status_ui.js

@@ -0,0 +1,91 @@
+var user_status_ui = (function () {
+
+var exports = {};
+
+exports.input_field = function () {
+    return $('.user_status_overlay input.user_status');
+};
+
+exports.submit_button = function () {
+    return $('.user_status_overlay .set_user_status');
+};
+
+exports.open_overlay = function () {
+    var overlay = $(".user_status_overlay");
+    overlays.open_overlay({
+        name: 'user_status_overlay',
+        overlay: overlay,
+        on_close: function () {},
+    });
+
+    var user_id = people.my_current_user_id();
+    var old_status_text = user_status.get_status_text(user_id);
+    var field = exports.input_field();
+    field.val(old_status_text);
+    field.select();
+    field.focus();
+
+    var button = exports.submit_button();
+    button.attr('disabled', true);
+};
+
+exports.close_overlay = function () {
+    overlays.close_overlay('user_status_overlay');
+};
+
+exports.submit_new_status = function () {
+    var user_id = people.my_current_user_id();
+    var old_status_text = user_status.get_status_text(user_id) || '';
+    old_status_text = old_status_text.trim();
+    var new_status_text = exports.input_field().val().trim();
+
+    if (old_status_text === new_status_text) {
+        exports.close_overlay();
+        return;
+    }
+
+    user_status.server_update({
+        status_text: new_status_text,
+        success: function () {
+            exports.close_overlay();
+        },
+    });
+};
+
+exports.update_button = function () {
+    var user_id = people.my_current_user_id();
+    var old_status_text = user_status.get_status_text(user_id) || '';
+    old_status_text = old_status_text.trim();
+    var new_status_text = exports.input_field().val().trim();
+    var button = exports.submit_button();
+
+    if (old_status_text === new_status_text) {
+        button.attr('disabled', true);
+    } else {
+        button.attr('disabled', false);
+    }
+
+    if (new_status_text === '') {
+        button.text(i18n.t('Clear'));
+    } else {
+        button.text(i18n.t('Change'));
+    }
+};
+
+exports.initialize = function () {
+    $('body').on('click', '.user_status_overlay .set_user_status', function () {
+        exports.submit_new_status();
+    });
+
+    $('body').on('keyup', '.user_status_overlay input.user_status', function () {
+        exports.update_button();
+    });
+};
+
+return exports;
+
+}());
+if (typeof module !== 'undefined') {
+    module.exports = user_status_ui;
+}
+window.user_status_ui = user_status_ui;

static/styles/user_status.scss

@@ -0,0 +1,28 @@
+.user_status_overlay .overlay-content {
+    width: 320px;
+    margin: 0 auto;
+    padding-left: 30px;
+    padding-right: 30px;
+    padding-bottom: 30px;
+    padding-top: 10px;
+    position: relative;
+    top: calc((30vh - 50px) / 2);
+    border-radius: 4px;
+    overflow: hidden;
+
+    background-color: hsl(0, 0%, 100%);
+}
+
+.user_status_overlay .user_status_change_title {
+    font-size: 130%;
+    font-weight: 600;
+    padding: 5px;
+}
+
+.user_status_overlay input.user_status {
+    width: 170px;
+};
+
+.user_status_overlay button:focus {
+    font-weight: 650;
+};

static/templates/user_info_popover_content.handlebars

@@ -95,4 +95,11 @@
         </a>
     </li>
     {{/if}}
+    {{#if is_me}}
+    <li>
+        <a href="#" class="update_status_text">
+            <i class="fa fa-comments" aria-hidden="true"></i> {{#tr this}}Update status{{/tr}}
+        </a>
+    </li>
+    {{/if}}
 </ul>

templates/zerver/app/index.html

@@ -150,6 +150,17 @@
             </div>
         </div>
     </div>
+    <div class="user_status_overlay overlay new-style" data-overlay="user_status_overlay" aria-hidden="true">
+        <div class="overlay-content modal-bg">
+            <div class="user_status_change_title">Change user status</div>
+            <div>
+                <input type="text" class="user_status" />
+                <button class="sea-green rounded button set_user_status">
+                    Change
+                </button>
+            </div>
+        </div>
+    </div>
     {% include "zerver/app/invite_user.html" %}
     {% include "zerver/app/bankruptcy.html" %}
     {% include "zerver/app/logout.html" %}