settings: Add tooltip for user read receipts setting.

We show tooltip for user read receipts setting mentioning
that the organization has disabled read receipts setting
when an organization does so. We hide the tooltip when
organization read receipts setting is enabled.

We also fix the alignment of "i" icons with label and headings
at various places by moving it 1 pixel below. There may be
some places where it is not fixed, but those will be fixed
separately.

static/js/server_events_dispatch.js

@@ -227,6 +227,7 @@ export function dispatch_normal_event(event) {
                 waiting_period_threshold: noop,
                 want_advertise_in_communities_directory: noop,
                 wildcard_mention_policy: noop,
+                enable_read_receipts: settings_account.update_send_read_receipts_tooltip,
             };
             switch (event.op) {
                 case "update":

static/js/settings.js

@@ -100,6 +100,9 @@ export function build_page() {
         default_language_name: settings_display.user_default_language_name,
         realm_push_notifications_enabled: page_params.realm_push_notifications_enabled,
         settings_object: user_settings,
+        send_read_receipts_tooltip: $t({
+            defaultMessage: "Read receipts are currently disabled in this organization.",
+        }),
     });
 
     $(".settings-box").html(rendered_settings_tab);

static/js/settings_account.js

@@ -78,6 +78,14 @@ export function update_avatar_change_display() {
     }
 }
 
+export function update_send_read_receipts_tooltip() {
+    if (page_params.realm_enable_read_receipts) {
+        $("#send_read_receipts_label .settings-info-icon").hide();
+    } else {
+        $("#send_read_receipts_label .settings-info-icon").show();
+    }
+}
+
 function display_avatar_upload_complete() {
     $("#user-avatar-upload-widget .upload-spinner-background").css({visibility: "hidden"});
     $("#user-avatar-upload-widget .image-upload-text").show();

static/styles/settings.css

@@ -31,6 +31,11 @@ h3,
             opacity: 1;
         }
     }
+
+    .fa-info-circle {
+        top: 1px;
+        position: relative;
+    }
 }
 
 /* TODO: This should ideally be added to help_link_widget.hbs,

static/templates/settings/account_settings.hbs

@@ -68,6 +68,8 @@
                   setting_name="send_read_receipts"
                   is_checked=settings_object.send_read_receipts
                   label=settings_label.send_read_receipts
+                  tooltip_text=send_read_receipts_tooltip
+                  hide_tooltip=page_params.realm_enable_read_receipts
                   }}
                 {{/if}}
             </div>

static/templates/settings/settings_checkbox.hbs

@@ -10,6 +10,9 @@
         {{#if help_link}}
         {{> ../help_link_widget link=help_link }}
         {{/if}}
+        {{#if tooltip_text}}
+        <i class="tippy-zulip-tooltip fa fa-info-circle settings-info-icon" {{#if hide_tooltip}}style="display: none;"{{/if}} data-tippy-content="{{tooltip_text}}"></i>
+        {{/if}}
     </label>
 </div>
 {{/unless}}