From 2bf63c1e493b202612d2d4f49880b3bfee3b5ab9 Mon Sep 17 00:00:00 2001
From: Sayam Samal <samal.sayam@gmail.com>
Date: Fri, 25 Feb 2022 04:33:20 +0530
Subject: [PATCH] settings: Remove profile picture header in the profile
 section.

This commit removes the profile picture header and adds an overlay to
handle disabled avatar changes in an organization.
---
 static/styles/image_upload_widget.css         | 19 +++++++++++++++++--
 .../settings/image_upload_widget.hbs          |  8 +++++++-
 .../templates/settings/profile_settings.hbs   |  8 +-------
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/static/styles/image_upload_widget.css b/static/styles/image_upload_widget.css
index 1dee2f138f..9aec5366db 100644
--- a/static/styles/image_upload_widget.css
+++ b/static/styles/image_upload_widget.css
@@ -109,11 +109,11 @@
 .user-avatar-section,
 .realm-logo-section,
 .realm-icon-section {
-    margin-bottom: 20px;
+    margin: 0 20px 20px 0;
     position: relative;
 
     .inline-block {
-        margin: 5px 20px 0 0;
+        margin-top: 15px;
         vertical-align: top;
         border-radius: 4px;
     }
@@ -127,6 +127,15 @@
         z-index: 99;
     }
 
+    .image-disabled-text {
+        color: hsl(0, 0%, 85%);
+        cursor: not-allowed;
+        position: absolute;
+        text-align: center;
+        visibility: hidden;
+        z-index: 99;
+    }
+
     .image-delete-button {
         font-size: 3rem;
     }
@@ -155,6 +164,12 @@
         height: 200px;
         top: 0;
     }
+
+    &:hover {
+        .image-disabled-text {
+            visibility: visible;
+        }
+    }
 }
 
 #user-avatar-source {
diff --git a/static/templates/settings/image_upload_widget.hbs b/static/templates/settings/image_upload_widget.hbs
index 30ef46e8fe..ca58de1f19 100644
--- a/static/templates/settings/image_upload_widget.hbs
+++ b/static/templates/settings/image_upload_widget.hbs
@@ -1,4 +1,10 @@
-<div id ="{{widget}}-upload-widget" class="inline-block image_upload_widget">
+<div id="{{widget}}-upload-widget" class="inline-block image_upload_widget">
+    <div class="image-disabled {{#if is_editable_by_current_user}}hide{{/if}}">
+        <div class="image-upload-background"></div>
+        <span class="image-disabled-text flex" aria-label="{{ disabled_text }}" role="button" tabindex="0">
+            {{ disabled_text }}
+        </span>
+    </div>
     <div class="image_upload_button {{#unless is_editable_by_current_user}}hide{{/unless}}">
         <div class="image-upload-background"></div>
         <button class="image-delete-button" aria-label="{{ delete_text }}" role="button" tabindex="0">
diff --git a/static/templates/settings/profile_settings.hbs b/static/templates/settings/profile_settings.hbs
index 80286a6244..02a6b21add 100644
--- a/static/templates/settings/profile_settings.hbs
+++ b/static/templates/settings/profile_settings.hbs
@@ -53,17 +53,11 @@
             </div>
         </div>
         <div class="inline-block user-avatar-section">
-            <h3>
-                {{t "Profile picture" }}
-                <i class="fa fa-question-circle change_name_tooltip tippy-zulip-tooltip settings-info-icon"
-                  {{#if user_can_change_avatar}}style="display:none"{{/if}}
-                  data-tippy-content="{{t 'Avatar changes are disabled in this organization.' }}">
-                </i>
-            </h3>
             {{> image_upload_widget
               widget = "user-avatar"
               upload_text = (t "Upload new profile picture")
               delete_text = (t "Delete profile picture")
+              disabled_text = (t "Avatar changes are disabled in this organization")
               is_editable_by_current_user = user_can_change_avatar
               image = page_params.avatar_url_medium}}
             <div id="user-avatar-source">