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

View File

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

View File

@ -2,6 +2,9 @@
<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__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">
{{full_name}}
{{#if is_bot}}
@ -60,10 +63,6 @@
<div id="avatar" {{#if user_is_guest}} class="guest-avatar" {{/if}}
style="background-image: url('{{user_avatar}}');">
</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 class="bottom">