From a964977960c9026c776ba81b57344ee0d71423e3 Mon Sep 17 00:00:00 2001 From: Steve Howell Date: Sat, 26 Jan 2019 20:14:33 +0000 Subject: [PATCH] user status: Add ability to edit status text. --- .eslintrc.json | 1 + frontend_tests/node_tests/ui_init.js | 1 + frontend_tests/node_tests/user_status.js | 14 +++ static/js/bundles/app.js | 2 + static/js/popovers.js | 9 ++ static/js/ui_init.js | 1 + static/js/user_status.js | 5 + static/js/user_status_ui.js | 91 +++++++++++++++++++ static/styles/user_status.scss | 28 ++++++ .../user_info_popover_content.handlebars | 7 ++ templates/zerver/app/index.html | 11 +++ 11 files changed, 170 insertions(+) create mode 100644 static/js/user_status_ui.js create mode 100644 static/styles/user_status.scss diff --git a/.eslintrc.json b/.eslintrc.json index bb7a7062b7..98dd9980fc 100644 --- a/.eslintrc.json +++ b/.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, diff --git a/frontend_tests/node_tests/ui_init.js b/frontend_tests/node_tests/ui_init.js index 04218aec73..07661fb686 100644 --- a/frontend_tests/node_tests/ui_init.js +++ b/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()); diff --git a/frontend_tests/node_tests/user_status.js b/frontend_tests/node_tests/user_status.js index d73307431e..304fdba260 100644 --- a/frontend_tests/node_tests/user_status.js +++ b/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); }); diff --git a/static/js/bundles/app.js b/static/js/bundles/app.js index e39429dce4..d7274718b9 100644 --- a/static/js/bundles/app.js +++ b/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"; diff --git a/static/js/popovers.js b/static/js/popovers.js index 14749ec1d5..e97e82727f 100644 --- a/static/js/popovers.js +++ b/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(); diff --git a/static/js/ui_init.js b/static/js/ui_init.js index 6d42a4a3da..cd28d6a763 100644 --- a/static/js/ui_init.js +++ b/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 () { diff --git a/static/js/user_status.js b/static/js/user_status.js index 34de4b9ecd..2d59551ad6 100644 --- a/static/js/user_status.js +++ b/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(); + } + }, }); }; diff --git a/static/js/user_status_ui.js b/static/js/user_status_ui.js new file mode 100644 index 0000000000..be8ca44758 --- /dev/null +++ b/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; diff --git a/static/styles/user_status.scss b/static/styles/user_status.scss new file mode 100644 index 0000000000..b6f355997b --- /dev/null +++ b/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; +}; diff --git a/static/templates/user_info_popover_content.handlebars b/static/templates/user_info_popover_content.handlebars index 378bbf9b3d..c3a677cc95 100644 --- a/static/templates/user_info_popover_content.handlebars +++ b/static/templates/user_info_popover_content.handlebars @@ -95,4 +95,11 @@ {{/if}} + {{#if is_me}} +
  • + + {{#tr this}}Update status{{/tr}} + +
    • + {{/if}} diff --git a/templates/zerver/app/index.html b/templates/zerver/app/index.html index a900684c55..e04c0a3850 100644 --- a/templates/zerver/app/index.html +++ b/templates/zerver/app/index.html @@ -150,6 +150,17 @@ + {% include "zerver/app/invite_user.html" %} {% include "zerver/app/bankruptcy.html" %} {% include "zerver/app/logout.html" %}