settings CSS: Refactor delete button, text css to use common css class.

Refactor user avatar and realm icon delete-button, delete-text CSS
to use common CSS Class.
This commit is contained in:
jagansivam28 2020-06-07 01:03:42 +05:30 committed by Tim Abbott
parent 961100024e
commit a9b0c03a0d
3 changed files with 10 additions and 18 deletions

View File

@ -1209,27 +1209,22 @@ input[type=checkbox] {
cursor: pointer;
}
#realm_icon_delete_button,
#user_avatar_delete_button {
.settings-page-delete-button {
cursor: pointer;
color: hsl(0, 0%, 75%);
opacity: 0;
position: absolute;
font-size: 2rem;
top: 10px;
right: 10px;
z-index: 99;
}
#realm_icon_delete_button {
font-size: 2rem;
}
#user_avatar_delete_button {
font-size: 3rem;
}
#realm_icon_delete_button:hover,
#user_avatar_delete_button:hover {
.settings-page-delete-button:hover {
color: hsl(0, 0%, 100%);
}
@ -1239,13 +1234,11 @@ input[type=checkbox] {
}
#realm_icon_delete_button:hover ~ #realm_icon_delete,
#user_avatar_delete_button:hover ~ #user_avatar_delete {
.settings-page-delete-button:hover ~ .settings-page-delete-text {
visibility: visible;
}
#realm_icon_delete,
#user_avatar_delete {
.settings-page-delete-text {
color: hsl(0, 0%, 100%);
font-size: 0.85rem;
position: absolute;
@ -1337,8 +1330,7 @@ input[type=checkbox] {
cursor: pointer;
}
#realm_icon_delete_button,
#user_avatar_delete_button {
.settings-page-delete-button {
opacity: 1;
}

View File

@ -159,11 +159,11 @@
<div id="user-settings-avatar" class="avatar-icon-settings">
<div id="user-avatar-background"></div>
<div id="user-avatar-block" style="background-image: url({{ page_params.avatar_url_medium }})" {{#if page_params.is_guest}} class="guest-avatar"{{/if}}></div>
<span id="user_avatar_delete_button" aria-label="{{t 'Delete profile picture'}}" role="button" tabindex="0"
<span id="user_avatar_delete_button" class="settings-page-delete-button" aria-label="{{t 'Delete profile picture'}}" role="button" tabindex="0"
{{#unless user_can_change_avatar}}style="display:none"{{/unless}}>
&times;
</span>
<span id="user_avatar_delete" aria-label="{{t 'Delete profile picture'}}" tabindex="0">
<span id="user_avatar_delete" class="settings-page-delete-text" aria-label="{{t 'Delete profile picture'}}" tabindex="0">
{{t 'Delete profile picture' }}
</span>
<object id="user-avatar-spinner" type="image/svg+xml" data="/static/images/tail-spin.svg"></object>

View File

@ -32,10 +32,10 @@
{{#if is_admin}}
<div id="realm_icon_upload_button">
<div id="realm-icon-background"></div>
<span id="realm_icon_delete_button" aria-label="{{t 'Delete organization icon'}}" role="button" tabindex="0">
<span id="realm_icon_delete_button" class="settings-page-delete-button" aria-label="{{t 'Delete organization icon'}}" role="button" tabindex="0">
&times;
</span>
<span id="realm_icon_delete" aria-label="{{t 'Delete organization icon'}}" tabindex="0">
<span id="realm_icon_delete" class="settings-page-delete-text" aria-label="{{t 'Delete organization icon'}}" tabindex="0">
{{t 'Delete icon' }}
</span>
<span id="realm_icon_upload" aria-label="{{t 'Upload organization icon'}}" role="button" tabindex="0">