[REF] mail: ThreadViewTopbar, review and simplify scss
Part of the overall v16 SCSS optimization/restyle, task-2704984 task-2850473 closes odoo/odoo#91116 Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
This commit is contained in:
Brieuc-brd
@@ -7,18 +7,8 @@
|
||||
}
|
||||
|
||||
.o_ThreadViewTopbar_avatar {
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.o_ThreadViewTopbar_editableItem {
|
||||
border: $border-width solid;
|
||||
}
|
||||
|
||||
.o_ThreadViewTopbar_threadDescriptionSeparator {
|
||||
width: $border-width;
|
||||
height: $font-size-sm;
|
||||
height: $o-mail-partner-avatar-size;
|
||||
width: $o-mail-partner-avatar-size;
|
||||
}
|
||||
|
||||
.o_ThreadViewTopbar_title {
|
||||
@@ -29,83 +19,11 @@
|
||||
// Style
|
||||
// ------------------------------------------------------------------
|
||||
|
||||
.o_ThreadViewTopbar {
|
||||
background-color: gray('100');
|
||||
}
|
||||
|
||||
.o_ThreadViewTopbar_button {
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
|
||||
&.o-active {
|
||||
color: gray('700');
|
||||
}
|
||||
|
||||
&:not(.o-active) {
|
||||
color: gray('500');
|
||||
}
|
||||
|
||||
@include hover-focus () {
|
||||
outline: none;
|
||||
color: gray('600');
|
||||
}
|
||||
}
|
||||
|
||||
// use selector specificity to override bootstrap style
|
||||
input.o_ThreadViewTopbar_guestNameInput {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.o_ThreadViewTopbar_invitePopoverView .popover-body {
|
||||
padding: 0; // cancel unwanted padding
|
||||
}
|
||||
|
||||
.o_ThreadViewTopbar_threadDescriptionSeparator {
|
||||
background-color: $border-color;
|
||||
}
|
||||
|
||||
.o_ThreadViewTopbar_threadName {
|
||||
max-width: map-get($sizes, 75);
|
||||
|
||||
&:not(.o-threadNameEditable) {
|
||||
border-color: transparent; // presence of border even if invisible to prevent flicker
|
||||
}
|
||||
|
||||
&.o-threadNameEditable {
|
||||
background-color: $white;
|
||||
border-color: $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.o_ThreadViewTopbar_threadDescription {
|
||||
|
||||
&:not(.o-threadDescriptionEditable) {
|
||||
border-color: transparent; // presence of border even if invisible to prevent flicker
|
||||
}
|
||||
|
||||
&.o-threadDescriptionEditable {
|
||||
background-color: $white;
|
||||
border-color: $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.o_ThreadViewTopbar_threadAddDescriptionEmptyLabel {
|
||||
color: gray('400');
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: gray('900');
|
||||
}
|
||||
}
|
||||
|
||||
.o_ThreadViewTopbar_userName {
|
||||
&:not(.o-userNameEditable) {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&.o-userNameEditable {
|
||||
background-color: $white;
|
||||
border-color: $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,14 +3,14 @@
|
||||
|
||||
<t t-name="mail.ThreadViewTopbar" owl="1">
|
||||
<t t-if="threadViewTopbar">
|
||||
<div class="o_ThreadViewTopbar d-flex flex-shrink-0 w-100 px-3" t-attf-class="{{ className }}" t-ref="root">
|
||||
<div class="o_ThreadViewTopbar d-flex flex-shrink-0 w-100 px-3 bg-100" t-attf-class="{{ className }}" t-ref="root">
|
||||
<t t-if="threadViewTopbar.thread">
|
||||
<ThreadIcon className="'o_ThreadViewTopbar_threadIcon mr-2 align-self-center'" thread="threadViewTopbar.thread"/>
|
||||
</t>
|
||||
<div class="o_ThreadViewTopbar_title d-flex flex-grow-1 align-self-center align-items-center">
|
||||
<t t-if="threadViewTopbar.thread">
|
||||
<t t-if="!threadViewTopbar.isEditingThreadName">
|
||||
<div class="o_ThreadViewTopbar_threadName o_ThreadViewTopbar_editableItem flex-shrink-0 px-1 text-truncate lead font-weight-bold" t-att-title="threadViewTopbar.thread.displayName" t-on-click="threadViewTopbar.onClickTopbarThreadName" t-on-mouseenter="threadViewTopbar.onMouseEnterTopbarThreadName" t-on-mouseleave="threadViewTopbar.onMouseLeaveTopbarThreadName" t-att-class="{ 'o-threadNameEditable': threadViewTopbar.isMouseOverThreadName and !messaging.isCurrentUserGuest }">
|
||||
<div class="o_ThreadViewTopbar_threadName o_ThreadViewTopbar_editableItem lead flex-shrink-0 px-1 border text-truncate font-weight-bold" t-att-title="threadViewTopbar.thread.displayName" t-on-click="threadViewTopbar.onClickTopbarThreadName" t-on-mouseenter="threadViewTopbar.onMouseEnterTopbarThreadName" t-on-mouseleave="threadViewTopbar.onMouseLeaveTopbarThreadName" t-attf-class="{{ threadViewTopbar.isMouseOverThreadName and !messaging.isCurrentUserGuest ? 'o-threadNameEditable bg-white' : 'border-light' }}">
|
||||
<t t-esc="threadViewTopbar.thread.displayName"/>
|
||||
</div>
|
||||
</t>
|
||||
@@ -19,20 +19,20 @@
|
||||
</t>
|
||||
</t>
|
||||
<t t-if="!threadViewTopbar.thread">
|
||||
<div class="o_ThreadViewTopbar_threadName flex-shrink-0 px-1 text-truncate lead font-weight-bold">
|
||||
<div class="o_ThreadViewTopbar_threadName lead flex-shrink-0 px-1 text-truncate font-weight-bold">
|
||||
Discuss
|
||||
</div>
|
||||
</t>
|
||||
<t t-if="threadViewTopbar.hasDescriptionArea">
|
||||
<div class="o_ThreadViewTopbar_threadDescriptionSeparator flex-shrink-0 mx-2"/>
|
||||
<div class="o_ThreadViewTopbar_threadDescriptionSeparator flex-shrink-0 mx-2 py-2 border-left"/>
|
||||
<t t-if="!threadViewTopbar.isEditingThreadDescription">
|
||||
<t t-if="threadViewTopbar.thread.description">
|
||||
<div class="o_ThreadViewTopbar_threadDescription o_ThreadViewTopbar_editableItem text-truncate px-1" t-att-title="threadViewTopbar.thread.description" t-on-click="threadViewTopbar.onClickTopbarThreadDescription" t-on-mouseenter="threadViewTopbar.onMouseEnterTopbarThreadDescription" t-on-mouseleave="threadViewTopbar.onMouseLeaveTopbarThreadDescription" t-att-class="{ 'o-threadDescriptionEditable': threadViewTopbar.isDescriptionHighlighted }">
|
||||
<div class="o_ThreadViewTopbar_threadDescription o_ThreadViewTopbar_editableItem px-1 border text-truncate" t-att-title="threadViewTopbar.thread.description" t-on-click="threadViewTopbar.onClickTopbarThreadDescription" t-on-mouseenter="threadViewTopbar.onMouseEnterTopbarThreadDescription" t-on-mouseleave="threadViewTopbar.onMouseLeaveTopbarThreadDescription" t-attf-class="{{ threadViewTopbar.isDescriptionHighlighted ? 'o-threadDescriptionEditable bg-white' : 'border-light' }}">
|
||||
<t t-esc="threadViewTopbar.thread.description"/>
|
||||
</div>
|
||||
</t>
|
||||
<t t-if="!threadViewTopbar.thread.description">
|
||||
<div class="o_ThreadViewTopbar_threadAddDescriptionEmptyLabel text-truncate" t-on-click="threadViewTopbar.onClickTopbarThreadDescription">
|
||||
<div class="o_ThreadViewTopbar_threadAddDescriptionEmptyLabel text-truncate text-900 opacity-50 opacity-100-hover o_cursor_pointer" t-on-click="threadViewTopbar.onClickTopbarThreadDescription">
|
||||
Add a description
|
||||
</div>
|
||||
</t>
|
||||
@@ -50,16 +50,16 @@
|
||||
<button class="o_ThreadViewTopbar_unstarAllButton btn btn-secondary" t-att-disabled="threadViewTopbar.threadView.messages.length === 0" t-on-click="threadViewTopbar.onClickUnstarAll">Unstar all</button>
|
||||
</t>
|
||||
<t t-if="threadViewTopbar.thread and threadViewTopbar.thread.hasCallFeature and threadViewTopbar.thread.rtcSessions.length === 0">
|
||||
<button class="o_ThreadViewTopbar_callButton o_ThreadViewTopbar_button o-active" t-att-disabled="threadViewTopbar.thread.hasPendingRtcRequest" title="Start a Call" t-on-click="threadViewTopbar.onClickPhone">
|
||||
<i class="fa fa-lg fa-phone"/>
|
||||
<button class="o_ThreadViewTopbar_callButton o_ThreadViewTopbar_button btn px-2 border-none bg-transparent shadow-none opacity-100 opacity-75-hover o-active" t-att-disabled="threadViewTopbar.thread.hasPendingRtcRequest" title="Start a Call" t-on-click="threadViewTopbar.onClickPhone">
|
||||
<i class="fa fa-lg fa-phone text-800"/>
|
||||
</button>
|
||||
<button class="o_ThreadViewTopbar_callButton o_ThreadViewTopbar_button o-active" t-att-disabled="threadViewTopbar.thread.hasPendingRtcRequest" title="Start a Video Call" t-on-click="threadViewTopbar.onClickCamera">
|
||||
<i class="fa fa-lg fa-video-camera"/>
|
||||
<button class="o_ThreadViewTopbar_callButton o_ThreadViewTopbar_button btn px-2 border-none bg-transparent shadow-none opacity-100 opacity-75-hover o-active" t-att-disabled="threadViewTopbar.thread.hasPendingRtcRequest" title="Start a Video Call" t-on-click="threadViewTopbar.onClickCamera">
|
||||
<i class="fa fa-lg fa-video-camera text-800"/>
|
||||
</button>
|
||||
</t>
|
||||
<t t-if="threadViewTopbar.thread and threadViewTopbar.thread.hasInviteFeature">
|
||||
<button class="o_ThreadViewTopbar_inviteButton o_ThreadViewTopbar_button" t-att-class="{ 'o-active': threadViewTopbar.invitePopoverView }" title="Add users" t-on-click="threadViewTopbar.onClickInviteButton" t-ref="inviteButton">
|
||||
<i class="fa fa-lg fa-user-plus"/>
|
||||
<button class="o_ThreadViewTopbar_inviteButton o_ThreadViewTopbar_button btn px-2 border-none bg-transparent shadow-none" t-attf-class="{{ threadViewTopbar.invitePopoverView ? 'opacity-100 opacity-75-hover o-active' : 'opacity-75 opacity-100-hover' }}" title="Add users" t-on-click="threadViewTopbar.onClickInviteButton" t-ref="inviteButton">
|
||||
<i class="fa fa-lg fa-user-plus" t-attf-class="{{ threadViewTopbar.invitePopoverView ? 'text-800' : 'text-600' }}"/>
|
||||
</button>
|
||||
<t t-if="threadViewTopbar.invitePopoverView">
|
||||
<PopoverView className="'o_ThreadViewTopbar_invitePopoverView'" record="threadViewTopbar.invitePopoverView"/>
|
||||
@@ -67,22 +67,22 @@
|
||||
</t>
|
||||
<!-- FIXME: guests should be able to see members but there currently is no route for it, so hide it for now -->
|
||||
<t t-if="!messaging.isCurrentUserGuest and threadViewTopbar.thread and threadViewTopbar.thread.hasMemberListFeature and threadViewTopbar.threadView.hasMemberList and !threadViewTopbar.threadView.isMemberListOpened">
|
||||
<button class="o_ThreadViewTopbar_showMemberListButton o_ThreadViewTopbar_button" title="Show Member List" t-on-click="threadViewTopbar.onClickShowMemberList">
|
||||
<i class="fa fa-lg fa-users"/>
|
||||
<button class="o_ThreadViewTopbar_showMemberListButton o_ThreadViewTopbar_button btn px-2 border-none bg-transparent shadow-none opacity-75 opacity-100-hover" title="Show Member List" t-on-click="threadViewTopbar.onClickShowMemberList">
|
||||
<i class="fa fa-lg fa-users text-600"/>
|
||||
</button>
|
||||
</t>
|
||||
<t t-if="threadViewTopbar.thread and threadViewTopbar.thread.hasMemberListFeature and threadViewTopbar.threadView.hasMemberList and threadViewTopbar.threadView.isMemberListOpened">
|
||||
<button class="o_ThreadViewTopbar_hideMemberListButton o_ThreadViewTopbar_button o-active" title="Hide Member List" t-on-click="threadViewTopbar.onClickHideMemberList">
|
||||
<i class="fa fa-lg fa-users"/>
|
||||
<button class="o_ThreadViewTopbar_hideMemberListButton o_ThreadViewTopbar_button btn px-2 border-none bg-transparent shadow-none opacity-100 opacity-75-hover o-active" title="Hide Member List" t-on-click="threadViewTopbar.onClickHideMemberList">
|
||||
<i class="fa fa-lg fa-users text-800"/>
|
||||
</button>
|
||||
</t>
|
||||
</div>
|
||||
<!-- FIXME: handle display on mobile -->
|
||||
<t t-if="threadViewTopbar.threadView.threadViewer.discussPublicView and !messaging.device.isSmall">
|
||||
<div class="o_ThreadViewTopbar_userInfo d-flex align-items-center">
|
||||
<img class="o_ThreadViewTopbar_avatar ml-1 mr-1 rounded-circle" t-att-src="threadViewTopbar.avatarUrl" alt="Avatar"/>
|
||||
<img class="o_ThreadViewTopbar_avatar mx-1 rounded-circle o_object_fit_cover" t-att-src="threadViewTopbar.avatarUrl" alt="Avatar"/>
|
||||
<t t-if="!threadViewTopbar.isEditingGuestName">
|
||||
<span class="o_ThreadViewTopbar_userName o_ThreadViewTopbar_editableItem px-1 font-weight-bold text-truncate" t-att-class="{ 'o-userNameEditable': threadViewTopbar.isMouseOverUserName and messaging.isCurrentUserGuest }" t-on-click="threadViewTopbar.onClickUserName" t-on-mouseenter="threadViewTopbar.onMouseEnterUserName" t-on-mouseleave="threadViewTopbar.onMouseLeaveUserName">
|
||||
<span class="o_ThreadViewTopbar_userName o_ThreadViewTopbar_editableItem px-1 border font-weight-bold text-truncate" t-attf-class="{{ threadViewTopbar.isMouseOverUserName and messaging.isCurrentUserGuest ? 'o-userNameEditable bg-white' : 'border-light' }}" t-on-click="threadViewTopbar.onClickUserName" t-on-mouseenter="threadViewTopbar.onMouseEnterUserName" t-on-mouseleave="threadViewTopbar.onMouseLeaveUserName">
|
||||
<t t-esc="messaging.isCurrentUserGuest ? messaging.currentGuest.name : messaging.currentUser.nameOrDisplayName"/>
|
||||
</span>
|
||||
</t>
|
||||
|
||||
Reference in New Issue
Block a user