settings org: Trigger realm logo upload by clicking on logo element.

We now trigger realm day/night logo upload by clicking on realm
day/night logo element itself rather than having a big upload button
and to match our user avatar UI.  Added new spinner over the logo
element itself to show while uploading realm logo for both day and
night logos.

static/js/settings_org.js

@@ -942,20 +942,23 @@ exports.build_page = function () {
         });
     });
 
-    function realm_icon_upload_complete() {
-        $('#icon-spinner-background').css({visibility: 'hidden'});
-        $('#realm_icon_upload').show();
-        $('#realm_icon_delete_button').show();
+    function realm_icon_logo_upload_complete(spinner, upload_text, delete_button) {
+        spinner.css({visibility: 'hidden'});
+        upload_text.show();
+        delete_button.show();
 
     }
 
-    function realm_icon_upload_start() {
-        $('#icon-spinner-background').css({visibility: "visible"});
-        $('#realm_icon_upload').hide();
-        $('#realm_icon_delete_button').hide();
+    function realm_icon_logo_upload_start(spinner, upload_text, delete_button) {
+        spinner.css({visibility: "visible"});
+        upload_text.hide();
+        delete_button.hide();
     }
 
     function upload_realm_icon(file_input) {
+        const spinner = $('#icon-spinner-background');
+        const upload_text =  $('#realm_icon_upload');
+        const delete_button = $('#realm_icon_delete_button');
         const form_data = new FormData();
 
         form_data.append('csrfmiddlewaretoken', csrf_token);
@@ -965,7 +968,7 @@ exports.build_page = function () {
 
         const error_field = $("#realm_icon_file_input_error");
         error_field.hide();
-        realm_icon_upload_start();
+        realm_icon_logo_upload_start(spinner, upload_text, delete_button);
 
         channel.post({
             url: '/json/realm/icon',
@@ -974,10 +977,10 @@ exports.build_page = function () {
             processData: false,
             contentType: false,
             success: function () {
-                realm_icon_upload_complete();
+                realm_icon_logo_upload_complete(spinner, upload_text, delete_button);
             },
             error: function (xhr) {
-                realm_icon_upload_complete();
+                realm_icon_logo_upload_complete(spinner, upload_text, delete_button);
                 ui_report.error("", xhr, error_field);
             },
         });
@@ -989,7 +992,8 @@ exports.build_page = function () {
         const form_data = new FormData();
         let spinner;
         let error_field;
-        let button_text;
+        let upload_text;
+        let delete_button;
 
         form_data.append('csrfmiddlewaretoken', csrf_token);
         for (const [i, file] of Array.prototype.entries.call(file_input[0].files)) {
@@ -998,16 +1002,17 @@ exports.build_page = function () {
         if (night) {
             error_field = $("#night-logo-section .realm-logo-file-input-error");
             spinner = $("#night-logo-section .upload-logo-spinner");
-            button_text = $("#night-logo-section .upload-logo-button-text");
+            upload_text = $('#night-logo-section .realm_logo_upload');
+            delete_button = $('#night-logo-section .realm-logo-delete-button');
         } else {
             error_field = $("#day-logo-section .realm-logo-file-input-error");
             spinner = $("#day-logo-section .upload-logo-spinner");
-            button_text = $("#day-logo-section .upload-logo-button-text");
+            upload_text = $('#day-logo-section .realm_logo_upload');
+            delete_button = $('#day-logo-section .realm-logo-delete-button');
         }
         spinner.expectOne();
         error_field.hide();
-        button_text.expectOne().hide();
-        loading.make_indicator(spinner, {text: i18n.t("Uploading logo.")});
+        realm_icon_logo_upload_start(spinner, upload_text, delete_button);
         form_data.append('night', JSON.stringify(night));
         channel.post({
             url: '/json/realm/logo',
@@ -1016,12 +1021,10 @@ exports.build_page = function () {
             processData: false,
             contentType: false,
             success: function () {
-                loading.destroy_indicator(spinner);
-                button_text.expectOne().show();
+                realm_icon_logo_upload_complete(spinner, upload_text, delete_button);
             },
             error: function (xhr) {
-                loading.destroy_indicator(spinner);
-                button_text.expectOne().show();
+                realm_icon_logo_upload_complete(spinner, upload_text, delete_button);
                 ui_report.error("", xhr, error_field);
             },
         });

static/styles/settings.scss

@@ -1281,6 +1281,11 @@ input[type=checkbox] {
         right: 18px;
     }
 
+    .realm_logo_upload {
+        top: 17px;
+        right: 80px;
+    }
+
     .settings-page-upload-text:hover {
         color: hsl(0, 0%, 100%);
     }
@@ -1318,6 +1323,17 @@ input[type=checkbox] {
         right: 30%;
     }
 
+    .upload-logo-spinner {
+        left: 0;
+    }
+
+    .realm-logo-spinner {
+        width: 45px;
+        height: 55px;
+        top: 30%;
+        right: 30%;
+    }
+
     .guest-avatar::after {
         outline: 9px solid hsl(0, 0%, 100%);
     }

static/templates/settings/realm-logo-widget.hbs

@@ -1,27 +1,25 @@
 <div id="{{theme_mode}}-logo-section" class="realm-logo-section">
     <div class="inline-block avatar-icon-logo-settings realm-logo-block">
         {{#if (and is_admin zulip_plan_is_not_limited)}}
-        <div class="settings-page-image-background"></div>
-        <span class="realm-logo-delete-button settings-page-delete-button" aria-label="{{t 'Delete organization logo'}}" role="button" tabindex="0">
-            &times;
-        </span>
-        <span class="settings-page-delete-text realm_logo_delete" aria-label="{{t 'Delete organization logo'}}" tabindex="0">
-            {{t 'Delete logo' }}
-        </span>
+        <div class="realm-logo-upload-button {{theme_mode}}-settings">
+            <div class="settings-page-image-background"></div>
+            <span class="realm-logo-delete-button settings-page-delete-button" aria-label="{{t 'Delete organization logo'}}" role="button" tabindex="0">
+                &times;
+            </span>
+            <span class="settings-page-delete-text realm_logo_delete" aria-label="{{t 'Delete organization logo'}}" tabindex="0">
+                {{t 'Delete logo' }}
+            </span>
+            <span class="settings-page-upload-text realm_logo_upload" aria-label="{{t 'Upload organization logo'}}" role="button" tabindex="0">
+                {{t 'Upload logo' }}
+            </span>
+            <span class="upload-spinner-background upload-logo-spinner">
+                <object class="realm-logo-spinner" type="image/svg+xml" data="/static/images/tail-spin.svg"></object>
+            </span>
+        </div>
         {{/if}}
         <img class="realm-logo-img" src="{{ logo_url }}"/>
         <input type="file" name="realm-logo-file-input"
           class="realm-logo-file-input notvisible" value="{{t 'Upload logo' }}"/>
-    </div>
-    {{#if is_admin}}
-    <div class="inline-block avatar-controls">
         <div class="realm-logo-file-input-error alert text-error"></div>
-        {{#if zulip_plan_is_not_limited}}
-        <button class="realm-logo-upload-button button rounded sea-green w-200 block input-size {{theme_mode}}-settings">
-            <span class="upload-logo-button-text">{{t 'Upload new logo' }}</span>
-            <span class="upload-logo-spinner"></span>
-        </button>
-        {{/if}}
     </div>
-    {{/if}}
 </div>