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

user avatar: Remove `image-block` id. 

Now we can remove `user-avatar-block` id and add common class `image_block`.
we can access this class using `#user-avatar-upload-widget .image_block`
so that we can have only one id at top-level and 'image_upload_widget.hbs`
can be more dynamic so we can use for other similar widgets also.
This commit is contained in:
jagansivam28 2020-06-15 11:08:56 +05:30 committed by Tim Abbott
parent 9fde085536
commit 4fe066c437
3 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
static/js/user_events.js
View File

@ -78,7 +78,7 @@ exports.update_person = function update(person) {
page_params.avatar_source = person.avatar_source; page_params.avatar_source = person.avatar_source;
page_params.avatar_url = url; page_params.avatar_url = url;
page_params.avatar_url_medium = person.avatar_url_medium; page_params.avatar_url_medium = person.avatar_url_medium;
$("#user-avatar-block").attr("src", person.avatar_url_medium); $("#user-avatar-upload-widget .image-block").attr("src", person.avatar_url_medium);
} }
message_live_update.update_avatar(person_obj.user_id, person.avatar_url); message_live_update.update_avatar(person_obj.user_id, person.avatar_url);

26
static/styles/settings.scss
View File

@ -1207,12 +1207,20 @@ input[type=checkbox] {
right: 20px; right: 20px;
} }
.image_upload_spinner { .image_upload_spinner {
top: 40%; top: 40%;
right: 40%; right: 40%;
width: 50px; width: 50px;
height: 50px; height: 50px;
} }
.image-block {
border-radius: 5px;
box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.1);
width: 200px;
height: 200px;
top: 0px;
}
} }
.avatar-icon-logo-settings { .avatar-icon-logo-settings {
@ -1223,8 +1231,12 @@ input[type=checkbox] {
transition: all 0.3s ease; transition: all 0.3s ease;
#realm-icon-block, #realm-icon-block {
#user-avatar-block { background-size: 100%;
height: 100%;
}
.image-block {
background-size: 100%; background-size: 100%;
height: 100%; height: 100%;
} }
@ -1241,14 +1253,6 @@ input[type=checkbox] {
cursor: pointer; cursor: pointer;
} }
#user-avatar-block {
border-radius: 5px;
box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.1);
width: 200px;
height: 200px;
top: 0px;
}
.settings-page-delete-button { .settings-page-delete-button {
cursor: pointer; cursor: pointer;
color: hsl(0, 0%, 75%); color: hsl(0, 0%, 75%);

2
static/templates/settings/image_upload_widget.hbs
View File

@ -16,7 +16,7 @@
</span> </span>
</div> </div>
{{/if}} {{/if}}
<img id="user-avatar-block" src="{{ image }}"/> <img class="image-block" src="{{ image }}"/>
<input type="file" name="user_avatar_file_input" class="notvisible" id="user_avatar_file_input" value="{{t 'Upload profile picture' }}" /> <input type="file" name="user_avatar_file_input" class="notvisible" id="user_avatar_file_input" value="{{t 'Upload profile picture' }}" />
<div id="user_avatar_file_input_error" class="text-error"></div> <div id="user_avatar_file_input_error" class="text-error"></div>
</div> </div>