settings org: Replace realm logo delete button with X icon.

Replacing delete button for `realm day/night logo` with "X" icon in the
right corner of the logo image to match "user profile" avatar UI.
This commit is contained in:
jagansivam28 2020-06-08 02:27:40 +05:30 committed by Tim Abbott
parent 500dc37d46
commit 923f6b40c5
4 changed files with 19 additions and 8 deletions

View File

@ -663,7 +663,7 @@ input[type=checkbox] {
height: 200px; height: 200px;
} }
.realm-icon-section .avatar-icon-settings { .realm-icon-section .avatar-icon-logo-settings {
width: 100px; width: 100px;
height: 100px; height: 100px;
} }
@ -1185,7 +1185,7 @@ input[type=checkbox] {
font-size: 1.2em; font-size: 1.2em;
} }
.avatar-icon-settings { .avatar-icon-logo-settings {
position: relative; position: relative;
border-radius: 5px; border-radius: 5px;
box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.1); box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.1);
@ -1257,6 +1257,11 @@ input[type=checkbox] {
right: 18px; right: 18px;
} }
.realm_logo_delete {
top: 17px;
right: 80px;
}
.settings-page-upload-text { .settings-page-upload-text {
cursor: pointer; cursor: pointer;
font-size: 0.85rem; font-size: 0.85rem;

View File

@ -156,7 +156,7 @@
<h3>{{t "Profile picture" }}</h3> <h3>{{t "Profile picture" }}</h3>
<div class="inline-block"> <div class="inline-block">
<div id="user-settings-avatar" class="avatar-icon-settings"> <div id="user-settings-avatar" class="avatar-icon-logo-settings">
<div class="settings-page-image-background"></div> <div class="settings-page-image-background"></div>
<span id="avatar-spinner-background" class="upload-spinner-background"> <span id="avatar-spinner-background" class="upload-spinner-background">
<object id="user-avatar-spinner" type="image/svg+xml" data="/static/images/tail-spin.svg"></object> <object id="user-avatar-spinner" type="image/svg+xml" data="/static/images/tail-spin.svg"></object>

View File

@ -28,7 +28,7 @@
<div>{{t "Organization profile picture" }}</div> <div>{{t "Organization profile picture" }}</div>
<div class="realm-icon-section"> <div class="realm-icon-section">
<div class="inline-block"> <div class="inline-block">
<div class="avatar-icon-settings"> <div class="avatar-icon-logo-settings">
{{#if is_admin}} {{#if is_admin}}
<div id="realm_icon_upload_button"> <div id="realm_icon_upload_button">
<div class="settings-page-image-background"></div> <div class="settings-page-image-background"></div>

View File

@ -1,5 +1,14 @@
<div id="{{theme_mode}}-logo-section" class="realm-logo-section"> <div id="{{theme_mode}}-logo-section" class="realm-logo-section">
<div class="inline-block realm-logo-block"> <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>
{{/if}}
<img class="realm-logo-img" src="{{ logo_url }}"/> <img class="realm-logo-img" src="{{ logo_url }}"/>
<input type="file" name="realm-logo-file-input" <input type="file" name="realm-logo-file-input"
class="realm-logo-file-input notvisible" value="{{t 'Upload logo' }}"/> class="realm-logo-file-input notvisible" value="{{t 'Upload logo' }}"/>
@ -12,9 +21,6 @@
<span class="upload-logo-button-text">{{t 'Upload new logo' }}</span> <span class="upload-logo-button-text">{{t 'Upload new logo' }}</span>
<span class="upload-logo-spinner"></span> <span class="upload-logo-spinner"></span>
</button> </button>
<button class="realm-logo-delete-button button rounded btn-danger w-200 m-t-10 block input-size">
{{t 'Delete logo' }}
</button>
{{/if}} {{/if}}
</div> </div>
{{/if}} {{/if}}