pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] mail: consistent default visual of thread topbar icon buttons

Browse Source 
- Consistent icon color by default (dark grey)
- Hover feedback visual for all buttons
- Rounded border on hover

Task-2860749

closes odoo/odoo#92209

Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>
This commit is contained in:
Alexandre Kühn
2022-05-31 19:17:41 +02:00
parent 6355ccd8f3
commit 6da3e22926
2 changed files with 14 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/mail/static/src/components/thread_view_topbar/thread_view_topbar.scss
+4
View File
@@ -19,6 +19,10 @@
// Style
// ------------------------------------------------------------------
.o_ThreadViewTopbar_button:hover {
background-color: $gray-300;
}
// use selector specificity to override bootstrap style
input.o_ThreadViewTopbar_guestNameInput {
width: 150px;
addons/mail/static/src/components/thread_view_topbar/thread_view_topbar.xml
+10 -10
View File
@@ -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 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 class="o_ThreadViewTopbar_callButton o_ThreadViewTopbar_button btn px-2 border-none rounded shadow-none" t-att-disabled="threadViewTopbar.thread.hasPendingRtcRequest" title="Start a Call" t-on-click="threadViewTopbar.onClickPhone">
<i class="fa fa-lg fa-phone text-700"/>
</button>
<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 class="o_ThreadViewTopbar_callButton o_ThreadViewTopbar_button btn px-2 border-none rounded shadow-none" 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-700"/>
</button>
</t>
<t t-if="threadViewTopbar.thread and threadViewTopbar.thread.hasInviteFeature">
<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 class="o_ThreadViewTopbar_inviteButton o_ThreadViewTopbar_button btn px-2 border-none rounded shadow-none" t-attf-class="{{ threadViewTopbar.invitePopoverView ? '' : '' }}" 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-500' : 'text-700' }}"/>
</button>
<t t-if="threadViewTopbar.invitePopoverView">
<PopoverView className="'o_ThreadViewTopbar_invitePopoverView'" record="threadViewTopbar.invitePopoverView"/>
@@ -67,13 +67,13 @@
</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 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 class="o_ThreadViewTopbar_showMemberListButton o_ThreadViewTopbar_button btn px-2 border-none rounded shadow-none" title="Show Member List" t-on-click="threadViewTopbar.onClickShowMemberList">
<i class="fa fa-lg fa-users text-700"/>
</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 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 class="o_ThreadViewTopbar_hideMemberListButton o_ThreadViewTopbar_button btn px-2 border-none rounded shadow-none" title="Hide Member List" t-on-click="threadViewTopbar.onClickHideMemberList">
<i class="fa fa-lg fa-users text-500"/>
</button>
</t>
</div>