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

[REF] mail: RtcLayoutMenu, review and simplify scss

Browse Source 
Part of the overall v16 SCSS optimization/restyle, task-2704984

task-2855553

Part-of: odoo/odoo#91551
This commit is contained in:
Brieuc-brd
2022-05-30 15:32:04 +02:00
parent db716a54eb
commit ca4d72bf14
2 changed files with 38 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/mail/static/src/components/rtc_layout_menu/rtc_layout_menu.scss
-57
View File
@@ -1,57 +0,0 @@
// ------------------------------------------------------------------
// Layout
// ------------------------------------------------------------------
.o_RtcLayoutMenu {
display: flex;
flex-direction: column;
padding: map-get($spacers, 1);
}
.o_RtcLayoutMenu_inputText {
@include text-truncate();
}
.o_RtcLayoutMenu_separator {
width: 100%;
}
.o_RtcLayoutMenu_radio {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 1.3em;
}
.o_RtcLayoutMenu_radioIcon {
width: 5rem;
height: 5rem;
margin-inline-end: map-get($spacers, 1);
}
.o_RtcLayoutMenu_radioInput {
margin: map-get($spacers, 3);
}
// ------------------------------------------------------------------
// Style
// ------------------------------------------------------------------
.o_RtcLayoutMenu_radio {
cursor: pointer;
border-radius: 5px;
&:hover {
background-color: gray('100');
box-shadow: 0px 0px 1px 1px gray('300') inset;
}
&:active {
background-color: gray('200');
box-shadow: 0px 0px 1px 1px gray('400') inset;
}
}
.o_RtcLayoutMenu_separator {
background-color: $border-color;
}
addons/mail/static/src/components/rtc_layout_menu/rtc_layout_menu.xml
+38 -28
View File
@@ -3,49 +3,59 @@
<t t-name="mail.RtcLayoutMenu" owl="1">
<t t-if="layoutMenu">
<div class="o_RtcLayoutMenu" t-attf-class="{{ className }}" t-ref="root">
<div class="o_RtcLayoutMenu d-flex flex-column p-1" t-attf-class="{{ className }}" t-ref="root">
<t t-if="layoutMenu.callViewer.threadView.thread.videoCount > 0">
<label class="o_RtcLayoutMenu_radio">
<div class="btn btn-light p-0 rounded font-weight-normal">
<label class="o_RtcLayoutMenu_radio d-flex align-items-center justify-content-between m-0 rounded fs-4 o_cursor_pointer">
<div class="o_RtcLayoutMenu_radioInputContainer">
<input class="o_RtcLayoutMenu_radioInput" type="radio" name="filter" value="all" t-on-click="layoutMenu.onClickFilter" t-att-checked="!layoutMenu.callViewer.filterVideoGrid"/>
<span class="o_RtcLayoutMenu_inputText">Show All</span>
<input class="o_RtcLayoutMenu_radioInput m-3" type="radio" name="filter" value="all" t-on-click="layoutMenu.onClickFilter" t-att-checked="!layoutMenu.callViewer.filterVideoGrid"/>
<span class="o_RtcLayoutMenu_inputText text-truncate">Show All</span>
</div>
</label>
<label class="o_RtcLayoutMenu_radio">
<div class="o_RtcLayoutMenu_radioInputContainer">
<input class="o_RtcLayoutMenu_radioInput" type="radio" name="filter" value="video" t-on-click="layoutMenu.onClickFilter" t-att-checked="layoutMenu.callViewer.filterVideoGrid"/>
<span class="o_RtcLayoutMenu_inputText">Show only video</span>
</div>
</label>
<hr class="o_RtcLayoutMenu_separator"/>
</t>
<label class="o_RtcLayoutMenu_radio">
<div class="o_RtcLayoutMenu_radioInputContainer">
<input class="o_RtcLayoutMenu_radioInput" type="radio" name="layout" value="tiled" t-on-click="layoutMenu.onClickLayout" t-att-checked="messaging.userSetting.rtcLayout === 'tiled'"/>
<span class="o_RtcLayoutMenu_inputText">Tiled</span>
</div>
<span class="o_RtcLayoutMenu_radioIcon">
<div class="btn btn-light p-0 rounded font-weight-normal">
<label class="o_RtcLayoutMenu_radio d-flex align-items-center justify-content-between m-0 rounded fs-4 o_cursor_pointer">
<div class="o_RtcLayoutMenu_radioInputContainer">
<input class="o_RtcLayoutMenu_radioInput m-3" type="radio" name="filter" value="video" t-on-click="layoutMenu.onClickFilter" t-att-checked="layoutMenu.callViewer.filterVideoGrid"/>
<span class="o_RtcLayoutMenu_inputText text-truncate">Show only video</span>
</div>
</label>
</div>
<hr class="o_RtcLayoutMenu_separator w-100 bg-300"/>
</t>
<div class="btn btn-light p-0 rounded font-weight-normal">
<label class="o_RtcLayoutMenu_radio d-flex align-items-center justify-content-between m-0 rounded fs-4 o_cursor_pointer">
<div class="o_RtcLayoutMenu_radioInputContainer">
<input class="o_RtcLayoutMenu_radioInput m-3" type="radio" name="layout" value="tiled" t-on-click="layoutMenu.onClickLayout" t-att-checked="messaging.userSetting.rtcLayout === 'tiled'"/>
<span class="o_RtcLayoutMenu_inputText text-truncate">Tiled</span>
</div>
<span class="o_RtcLayoutMenu_radioIcon me-1">
<t t-call="mail.RtcLayoutMenu_gridSvg"/>
</span>
</label>
<label class="o_RtcLayoutMenu_radio">
</div>
<div class="btn btn-light p-0 rounded font-weight-normal">
<label class="o_RtcLayoutMenu_radio d-flex align-items-center justify-content-between m-0 rounded fs-4 o_cursor_pointer">
<div class="o_RtcLayoutMenu_radioInputContainer">
<input class="o_RtcLayoutMenu_radioInput" type="radio" name="layout" value="spotlight" t-on-click="layoutMenu.onClickLayout" t-att-checked="messaging.userSetting.rtcLayout === 'spotlight'"/>
<span class="o_RtcLayoutMenu_inputText">Spotlight</span>
<input class="o_RtcLayoutMenu_radioInput m-3" type="radio" name="layout" value="spotlight" t-on-click="layoutMenu.onClickLayout" t-att-checked="messaging.userSetting.rtcLayout === 'spotlight'"/>
<span class="o_RtcLayoutMenu_inputText text-truncate">Spotlight</span>
</div>
<span class="o_RtcLayoutMenu_radioIcon">
<span class="o_RtcLayoutMenu_radioIcon me-1">
<t t-call="mail.RtcLayoutMenu_spotlightSvg"/>
</span>
</label>
<label class="o_RtcLayoutMenu_radio">
</div>
<div class="btn btn-light p-0 rounded font-weight-normal">
<label class="o_RtcLayoutMenu_radio d-flex align-items-center justify-content-between m-0 rounded fs-4 o_cursor_pointer">
<div class="o_RtcLayoutMenu_radioInputContainer">
<input class="o_RtcLayoutMenu_radioInput" type="radio" name="layout" value="sidebar" t-on-click="layoutMenu.onClickLayout" t-att-checked="messaging.userSetting.rtcLayout === 'sidebar'"/>
<span class="o_RtcLayoutMenu_inputText">Sidebar</span>
<input class="o_RtcLayoutMenu_radioInput m-3" type="radio" name="layout" value="sidebar" t-on-click="layoutMenu.onClickLayout" t-att-checked="messaging.userSetting.rtcLayout === 'sidebar'"/>
<span class="o_RtcLayoutMenu_inputText text-truncate">Sidebar</span>
</div>
<span class="o_RtcLayoutMenu_radioIcon">
<span class="o_RtcLayoutMenu_radioIcon me-1">
<t t-call="mail.RtcLayoutMenu_sidebarSvg"/>
</span>
</label>
</div>
</div>
</t>
</t>
@@ -53,7 +63,7 @@
<!-- TODO TEMPORARY ICONS -->
<t t-name="mail.RtcLayoutMenu_gridSvg" owl="1">
<svg viewBox="0 0 300 300">
<svg viewBox="0 0 300 300" width="5rem" height="5rem">
<g transform="matrix(1.08 0 0 1.29 63.85 96.61)">
<rect style="fill: currentColor" x="-37.46" y="-19.415" rx="0" ry="0" width="74.92" height="38.83"/>
</g>
@@ -85,7 +95,7 @@
</t>
<t t-name="mail.RtcLayoutMenu_spotlightSvg" owl="1">
<svg viewBox="0 0 300 300">
<svg viewBox="0 0 300 300" width="5rem" height="5rem">
<g transform="matrix(3.38 0 0 4.04 150 150)">
<rect style="fill: currentColor" x="-38" y="-20" rx="0" ry="0" width="75" height="39"/>
</g>
@@ -93,7 +103,7 @@
</t>
<t t-name="mail.RtcLayoutMenu_sidebarSvg" owl="1">
<svg viewBox="0 0 300 300">
<svg viewBox="0 0 300 300" width="5rem" height="5rem">
<g transform="matrix(2.66 0 0 4.04 122.89 150.02)">
<rect style="fill: currentColor" x="-37.46" y="-19.415" rx="0" ry="0" width="74.92" height="38.83"/>
</g>