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

View File

@ -78,7 +78,7 @@ exports.update_person = function update(person) {
page_params.avatar_source = person.avatar_source;
page_params.avatar_url = url;
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);

View File

@ -1207,12 +1207,20 @@ input[type=checkbox] {
right: 20px;
}
.image_upload_spinner {
.image_upload_spinner {
top: 40%;
right: 40%;
width: 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 {
@ -1223,8 +1231,12 @@ input[type=checkbox] {
transition: all 0.3s ease;
#realm-icon-block,
#user-avatar-block {
#realm-icon-block {
background-size: 100%;
height: 100%;
}
.image-block {
background-size: 100%;
height: 100%;
}
@ -1241,14 +1253,6 @@ input[type=checkbox] {
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 {
cursor: pointer;
color: hsl(0, 0%, 75%);

View File

@ -16,7 +16,7 @@
</span>
</div>
{{/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' }}" />
<div id="user_avatar_file_input_error" class="text-error"></div>
</div>