Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

settings UI: Add brighness on hover effect for "X" icon in upload avatar. 

Increase brightness on hover effect for "X" icon in upload
avatar area is added and change the text to "delete profile picture"
while hovering over "X" icon in the avatar upload area.
This commit is contained in:
jagansivam28 2020-04-16 23:16:45 +05:30 committed by Tim Abbott
parent 105c168b19
commit 0de77cabb0
2 changed files with 31 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
static/styles/settings.scss
View File

@ -1145,7 +1145,7 @@ input[type=checkbox].inline-block {
#user_avatar_delete_button {
cursor: pointer;
color: hsl(236, 33%, 90%);
color: hsl(0, 0%, 75%);
opacity: 0;
font-size: 3rem;
position: absolute;
@ -1154,9 +1154,31 @@ input[type=checkbox].inline-block {
z-index: 99;
}
#user_avatar_delete_button:hover {
color: hsl(0, 0%, 100%);
}
#user_avatar_delete_button:hover ~ #user_avatar_upload_button {
visibility: hidden;
}
#user_avatar_delete_button:hover ~ #user_avatar_delete {
visibility: visible;
}
#user_avatar_delete {
color: hsl(0, 0%, 100%);
font-size: 0.85rem;
position: absolute;
top: 90px;
right: 40px;
visibility: hidden;
z-index: 99;
}
#user_avatar_upload_button {
cursor: pointer;
color: hsl(236, 33%, 90%);
color: hsl(0, 0%, 85%);
opacity: 0;
font-size: 0.85rem;
position: absolute;
@ -1165,6 +1187,10 @@ input[type=checkbox].inline-block {
z-index: 99;
}
#user_avatar_upload_button:hover {
color: hsl(0, 0%, 100%);
}
#user-avatar-spinner {
position: absolute;
top: 40%;

3
static/templates/settings/account_settings.hbs
View File

@ -163,6 +163,9 @@
{{#unless user_can_change_avatar}}style="display:none"{{/unless}}>
×
</span>
<span id="user_avatar_delete" 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>
<span id="user_avatar_upload_button" aria-label="{{t 'Upload new profile picture'}}" role="button" tabindex="0"
{{#if (and (not page_params.is_admin) page_params.realm_avatar_changes_disabled)}}style="display:none"{{/if}}>