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

user_profile_modal: Move presence activity status to modal header. 

Moving the last active status icon to the modal header, we obtain a
cleaner visual design for the user profile modal which is more
consistent with other parts of UI.
This commit is contained in:
Sayam Samal 2022-11-10 01:23:11 +05:30 committed by Tim Abbott
parent 52a04b53ad
commit f204a4c592
2 changed files with 9 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
static/styles/popovers.css
View File

@ -302,7 +302,7 @@ ul {
} }
} }
.popover_user_presence { .user_profile_presence {
width: 8px; width: 8px;
height: 8px; height: 8px;
margin: 0 5px; margin: 0 5px;
@ -350,6 +350,11 @@ ul {
justify-content: center; justify-content: center;
} }
.popover_user_presence {
margin: 5px 10px;
vertical-align: middle;
}
.modal__close { .modal__close {
position: absolute; position: absolute;
right: 20px; right: 20px;
@ -418,11 +423,6 @@ ul {
} }
} }
#user-status {
text-align: center;
margin: 0 0 10px;
}
hr { hr {
border: 1px solid hsl(0, 0%, 93%); border: 1px solid hsl(0, 0%, 93%);
margin: 5px 0; margin: 5px 0;

7
static/templates/user_profile_modal.hbs
View File

@ -2,6 +2,9 @@
<div class="modal__overlay" tabindex="-1" data-micromodal-close> <div class="modal__overlay" tabindex="-1" data-micromodal-close>
<div class="modal__container new-style" role="dialog" aria-modal="true" aria-labelledby="dialog_title"> <div class="modal__container new-style" role="dialog" aria-modal="true" aria-labelledby="dialog_title">
<div class="modal__header"> <div class="modal__header">
<div class="tippy-zulip-tooltip" data-tippy-content="{{last_seen}}">
<span class="{{user_circle_class}} user_circle user_profile_presence"></span>
</div>
<h1 class="modal__title" id="name"> <h1 class="modal__title" id="name">
{{full_name}} {{full_name}}
{{#if is_bot}} {{#if is_bot}}
@ -60,10 +63,6 @@
<div id="avatar" {{#if user_is_guest}} class="guest-avatar" {{/if}} <div id="avatar" {{#if user_is_guest}} class="guest-avatar" {{/if}}
style="background-image: url('{{user_avatar}}');"> style="background-image: url('{{user_avatar}}');">
</div> </div>
<div id="user-status" class="default-field">
<span class="value">{{last_seen}}</span>
<span class="{{user_circle_class}} user_circle popover_user_presence"></span>
</div>
</div> </div>
</div> </div>
<div class="bottom"> <div class="bottom">