[REF] *: odoo_ui_icons

Following new policies in terms of product design-language, this commit
will partially revert 546477d reducing the number of `oi` icons.

It will also improve rendering when icons are rendered at our default
font-size (13px), avoiding blur effects when icons use thin lines.

Since fontAwesome will coexists with `oi` longer than expected, the
commit will also review size utility-classes in order to get consistent
result when used in conjunction with fa's ones (notably `fa-lg`).

Part-of: odoo/odoo#85651
This commit is contained in:
stefanorigano (SRI)
2022-03-03 14:19:44 +00:00
parent 745ad763a5
commit 28f910f5be
45 changed files with 147 additions and 443 deletions
@@ -4,7 +4,7 @@
<t t-name="mail.MessagingMenu" owl="1">
<div class="o_MessagingMenu dropdown" t-att-class="{ 'show': messagingMenu ? messagingMenu.isOpen : false, 'o-mobile': messaging ? messaging.device.isMobile : false }" t-attf-class="{{ className }}" t-ref="root">
<a class="o_MessagingMenu_toggler dropdown-toggle o-no-caret o-dropdown--narrow" t-att-class="{ 'o-no-notification': messagingMenu ? !messagingMenu.counter : false }" href="#" title="Conversations" role="button" t-att-aria-expanded="messagingMenu and messagingMenu.isOpen ? 'true' : 'false'" aria-haspopup="true" t-on-click="_onClickToggler">
<i class="o_MessagingMenu_icon oi oi-large oi-discuss" role="img" aria-label="Messages"/>
<i class="o_MessagingMenu_icon fa fa-lg fa-comments" role="img" aria-label="Messages"/>
<t t-if="!messagingMenu or !messaging.isInitialized">
<i class="o_MessagingMenu_loading fa fa-circle-o-notch fa-spin"/>
</t>
@@ -152,7 +152,7 @@ QUnit.test('basic rendering', async function (assert) {
"should have icon on clickable element in messaging menu"
);
assert.ok(
document.querySelector(`.o_MessagingMenu_icon`).classList.contains('oi-discuss'),
document.querySelector(`.o_MessagingMenu_icon`).classList.contains('fa-comments'),
"should have 'comments' icon on clickable element in messaging menu"
);
assert.strictEqual(
@@ -9,10 +9,10 @@
<t t-set="title">Open conference: <t t-esc="messaging.rtc.channel.displayName"/></t>
<a class="o_RtcActivityNotice_button px-3 user-select-none dropdown-toggle o-no-caret o-dropdown--narrow" t-att-title="title" role="button" t-on-click="_onClick">
<div class="o_RtcActivityNotice_buttonContent d-flex align-items-center">
<i class="o_RtcActivityNotice_outputIndicator oi oi-large" t-att-class="{
'oi-phone--voice': !messaging.rtc.sendDisplay and !messaging.rtc.sendUserVideo,
'oi-video': messaging.rtc.sendUserVideo,
'oi-screen': messaging.rtc.sendDisplay,
<i class="o_RtcActivityNotice_outputIndicator fa fa-lg" t-att-class="{
'fa-microphone': !messaging.rtc.sendDisplay and !messaging.rtc.sendUserVideo,
'fa-video-camera': messaging.rtc.sendUserVideo,
'fa-desktop': messaging.rtc.sendDisplay,
}"/>
<em class="o_RtcActivityNotice_buttonTitle text-truncate" t-esc="messaging.rtc.channel.displayName"/>
</div>
@@ -51,12 +51,12 @@
<div class="o_RtcCallParticipantCard_overlayTop">
<t t-if="callParticipantCard.rtcSession.isSelfMuted and !callParticipantCard.rtcSession.isDeaf">
<span class="o_RtcCallParticipantCard_overlayTopElement" t-att-class="{'o-isMinimized': callParticipantCard.isMinimized }" title="muted" aria-label="muted">
<i class="oi oi-microphone--off--filled"/>
<i class="fa fa-microphone-slash"/>
</span>
</t>
<t t-if="callParticipantCard.rtcSession.isDeaf">
<span class="o_RtcCallParticipantCard_overlayTopElement" t-att-class="{'o-isMinimized': callParticipantCard.isMinimized }" title="deaf" aria-label="deaf">
<i class="oi oi-volume--mute--filled"/>
<i class="fa fa-deaf"/>
</span>
</t>
<t t-if="callParticipantCard.rtcSession.channel.rtc and callParticipantCard.rtcSession.isAudioInError">
@@ -16,8 +16,8 @@
<div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
<i class="oi" t-att-class="{
'oi-large': !rtcController.isSmall,
'oi-microphone--filled': !messaging.rtc.currentRtcSession.isMute,
'oi-microphone--off--filled': messaging.rtc.currentRtcSession.isMute,
'fa-microphone': !messaging.rtc.currentRtcSession.isMute,
'fa-microphone-slash': messaging.rtc.currentRtcSession.isMute,
'text-danger': messaging.rtc.currentRtcSession.isMute,
}"/>
</div>
@@ -32,8 +32,8 @@
<div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
<i class="oi" t-att-class="{
'oi-large': !rtcController.isSmall,
'oi-volume--up--filled': !messaging.rtc.currentRtcSession.isDeaf,
'oi-volume--mute--filled': messaging.rtc.currentRtcSession.isDeaf,
'fa-headphones: !messaging.rtc.currentRtcSession.isDeaf,
'fa-deaf': messaging.rtc.currentRtcSession.isDeaf,
'text-danger': messaging.rtc.currentRtcSession.isDeaf,
}"/>
</div>
@@ -49,7 +49,7 @@
t-att-title="cameraTitle"
t-on-click="rtcController.onClickCamera">
<div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
<i class="oi oi-video--filled" t-att-class="{ 'oi-large': !rtcController.isSmall }"/>
<i class="fa fa-video-camera" t-att-class="{ 'oi-large': !rtcController.isSmall }"/>
</div>
</button>
<t t-if="messaging.rtc.sendDisplay"><t t-set="displayTitle">Stop screen sharing</t></t>
@@ -63,7 +63,7 @@
t-att-title="displayTitle"
t-on-click="rtcController.onClickScreen">
<div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
<i class="oi oi-screen" t-att-class="{ 'oi-large': !rtcController.isSmall }"/>
<i class="fa fa-desktop" t-att-class="{ 'oi-large': !rtcController.isSmall }"/>
</div>
</button>
<Popover position="'top'">
@@ -73,7 +73,7 @@
t-att-class="{ 'o-isSmall': rtcController.isSmall }"
>
<div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
<i class="oi oi-overflow-menu--horizontal" t-att-class="{ 'oi-large': !rtcController.isSmall }"/>
<i class="fa fa-ellipsis-h" t-att-class="{ 'oi-large': !rtcController.isSmall }"/>
</div>
</button>
<t t-set-slot="opened">
@@ -89,7 +89,7 @@
t-att-disabled="rtcController.callViewer.threadView.thread.hasPendingRtcRequest"
t-on-click="rtcController.onClickToggleVideoCall">
<div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
<i class="oi oi-video--filled" t-att-class="{ 'oi-large': !rtcController.isSmall }"/>
<i class="fa fa-video-camera" t-att-class="{ 'oi-large': !rtcController.isSmall }"/>
</div>
</button>
</t>
@@ -102,7 +102,7 @@
t-att-disabled="rtcController.callViewer.threadView.thread.hasPendingRtcRequest"
t-on-click="rtcController.onClickRejectCall">
<div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
<i class="oi oi-phone--filled" t-att-class="{ 'oi-large': !rtcController.isSmall }"/>
<i class="fa fa-phone" t-att-class="{ 'oi-large': !rtcController.isSmall }"/>
</div>
</button>
</t>
@@ -115,7 +115,7 @@
t-att-title="phoneTitle"
t-on-click="rtcController.onClickToggleAudioCall">
<div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
<i class="oi oi-phone--filled" t-att-class="{ 'oi-large': !rtcController.isSmall }"/>
<i class="fa fa-phone" t-att-class="{ 'oi-large': !rtcController.isSmall }"/>
</div>
</button>
</t>
@@ -14,7 +14,7 @@ const _lt = core._lt;
const ActivityView = BasicView.extend({
accesskey: "a",
display_name: _lt('Activity'),
icon: 'oi-event--schedule',
icon: 'fa fa-clock-o',
config: _.extend({}, BasicView.prototype.config, {
Controller: ActivityController,
Model: ActivityModel,
+1 -1
View File
@@ -51,7 +51,7 @@
<t t-name="mail.systray.ActivityMenu">
<div class="o_mail_systray_item dropdown">
<a class="dropdown-toggle o-no-caret o-dropdown--narrow" data-toggle="dropdown" data-display="static" aria-expanded="false" title="Activities" href="#" role="button">
<i class="oi oi-large oi-calendar" role="img" aria-label="Activities"/> <span class="o_notification_counter badge"/>
<i class="fa fa-lg fa-clock-o" role="img" aria-label="Activities"/> <span class="o_notification_counter badge"/>
</a>
<div class="o_mail_systray_dropdown dropdown-menu dropdown-menu-right" role="menu">
<div class="o_mail_systray_dropdown_items"/>
+19 -319
View File
@@ -1,14 +1,13 @@
@font-face {
font-family: 'odoo_ui_icons';
src: url('fonts/odoo_ui_icons.woff2') format('woff2'), url('fonts/odoo_ui_icons.woff?wpto0f') format('woff');
src: url('fonts/odoo_ui_icons.woff2') format('woff2'), url('fonts/odoo_ui_icons.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: block;
}
.oi {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'odoo_ui_icons' !important;
font-family: 'odoo_ui_icons';
speak: never;
font-style: normal;
font-weight: normal;
@@ -21,321 +20,22 @@
-moz-osx-font-smoothing: grayscale;
}
.oi-odoo:before {
content: "\e900";
}
.oi-studio--filled:before {
content: "\e901";
}
.oi-studio:before {
content: "\e902";
}
.oi-apps:before {
content: "\e910";
}
.oi-discuss:before {
content: "\e90f";
}
.oi-chart--area--filled:before {
content: "\e90d";
}
.oi-chart--cohort:before {
content: "\e90e";
}
.oi-filter--filled:before {
content: "\e90c";
}
.oi-message--filled:before {
content: "\e909";
}
.oi-message:before {
content: "\e90a";
}
.oi-chevron-right--thick:before {
content: "\e907";
}
.oi-chevron-left--thick:before {
content: "\e908";
}
.oi-pencil:before {
content: "\e903";
}
.oi-mobile:before {
content: "\e904";
}
.oi-add--thick:before {
content: "\e905";
}
.oi-subtract--thick:before {
content: "\e906";
}
.oi-add:before {
content: "\e90b";
}
.oi-alarm--add:before {
content: "\e915";
}
.oi-align--vertical-top:before {
content: "\e91d";
}
.oi-arrow--down:before {
content: "\e93a";
}
.oi-arrow--left:before {
content: "\e93b";
}
.oi-arrow--right:before {
content: "\e93c";
}
.oi-arrow--up:before {
content: "\e93f";
}
.oi-attachment:before {
content: "\e94c";
}
.oi-calendar--heat-map:before {
content: "\e992";
}
.oi-calendar:before {
content: "\e995";
}
.oi-caret--down:before {
content: "\e99c";
}
.oi-caret--left:before {
content: "\e99d";
}
.oi-caret--right:before {
content: "\e99e";
}
.oi-caret--sort--down:before {
content: "\e99f";
}
.oi-caret--sort--up:before {
content: "\e9a0";
}
.oi-caret--sort:before {
content: "\e9a1";
}
.oi-caret--up:before {
content: "\e9a2";
}
.oi-chart--bullet:before {
content: "\e9c3";
}
.oi-chart--column:before {
content: "\e9c8";
}
.oi-chart--line-smooth:before {
content: "\e9d2";
}
.oi-chart--pie:before {
content: "\e9dc";
}
.oi-chart--stacked:before {
content: "\e9e7";
}
.oi-chat--launch:before {
content: "\e9f0";
}
.oi-chat:before {
content: "\e9f4";
}
.oi-checkmark:before {
content: "\ea02";
}
.oi-chevron--down:before {
content: "\ea05";
}
.oi-chevron--left:before {
content: "\ea06";
}
.oi-chevron--mini:before {
content: "\ea07";
}
.oi-chevron--right:before {
content: "\ea08";
}
.oi-chevron--up:before {
content: "\ea0c";
}
.oi-close:before {
content: "\ea22";
}
.oi-connection--two-way:before {
content: "\ea51";
}
.oi-container-software:before {
content: "\ea57";
}
.oi-contrast:before {
content: "\ea5c";
}
.oi-cross-tab:before {
content: "\ea6d";
}
.oi-dashboard:before {
content: "\ea85";
}
.oi-data--base:before {
content: "\ea89";
}
.oi-data--check:before {
content: "\ea8b";
}
.oi-debug:before {
content: "\eaa8";
}
.oi-document--download:before {
content: "\eae6";
}
.oi-event--schedule:before {
content: "\eb1d";
}
.oi-event:before {
content: "\eb1e";
}
.oi-filter:before {
content: "\eb42";
}
.oi-headphones:before {
content: "\ebaa";
}
.oi-headset:before {
content: "\ebab";
}
.oi-launch:before {
content: "\ec06";
}
.oi-layers:before {
content: "\ec07";
}
.oi-map:before {
content: "\ec60";
}
.oi-maximize:before {
content: "\ec63";
}
.oi-menu:before {
content: "\ec6a";
}
.oi-microphone--filled:before {
content: "\ec6e";
}
.oi-microphone--off--filled:before {
content: "\ec6f";
}
.oi-microphone--off:before {
content: "\ec70";
}
.oi-microphone:before {
content: "\ec71";
}
.oi-open-panel--filled--right:before {
content: "\ecd5";
}
.oi-overflow-menu--horizontal:before {
content: "\ece0";
}
.oi-overflow-menu--vertical:before {
content: "\ece1";
}
.oi-pen:before {
content: "\ed04";
}
.oi-phone--application:before {
content: "\ed0c";
}
.oi-phone--filled:before {
content: "\ed0f";
}
.oi-phone--voice--filled:before {
content: "\ed1c";
}
.oi-phone--voice:before {
content: "\ed1d";
}
.oi-phone:before {
content: "\ed1e";
}
.oi-printer:before {
content: "\ed3e";
}
.oi-reminder:before {
content: "\ed62";
}
.oi-screen:before {
content: "\edab";
}
.oi-search:before {
content: "\edb1";
}
.oi-settings--adjust:before {
content: "\edc2";
}
.oi-settings:before {
content: "\edc6";
}
.oi-show-data--cards:before {
content: "\edd7";
}
.oi-sort--ascending:before {
content: "\ee03";
}
.oi-sort--descending:before {
content: "\ee04";
}
.oi-star--filled:before {
content: "\ee0d";
}
.oi-star--half:before {
content: "\ee0e";
}
.oi-star:before {
content: "\ee10";
}
.oi-subtract:before {
content: "\ee26";
}
.oi-table--split:before {
content: "\ee35";
}
.oi-table:before {
content: "\ee37";
}
.oi-trash-can:before {
content: "\eeb5";
}
.oi-user--follow:before {
content: "\eee2";
}
.oi-user--multiple:before {
content: "\eee5";
}
.oi-user:before {
content: "\eeef";
}
.oi-video--filled:before {
content: "\eefe";
}
.oi-video:before {
content: "\ef01";
}
.oi-view-next:before {
content: "\ef07";
}
.oi-volume--mute--filled:before {
content: "\ef1b";
}
.oi-volume--mute:before {
content: "\ef1c";
}
.oi-volume--up--filled:before {
content: "\ef20";
}
.oi-volume--up:before {
content: "\ef21";
}
.oi-alarm:before {
content: "\e917";
content: '\00d7';
font-family: sans-serif;
font-weight: bold;
}
.oi-view-pivot:before { content: '\e800'; }
.oi-voip:before { content: '\e803'; }
.oi-odoo:before { content: '\e806'; }
.oi-search:before { content: '\e808'; }
.oi-group:before { content: '\e80a'; }
.oi-settings-adjust:before { content: '\e80c'; }
.oi-apps:before { content: '\e80d'; }
.oi-panel-right:before { content: '\e810'; }
.oi-launch:before { content: '\e812'; }
.oi-studio:before { content: '\e813'; }
.oi-view-kanban:before { content: '\e814'; }
.oi-view-cohort:before { content: '\e816'; }
.oi-view-list:before { content: '\e817'; }
@@ -8,7 +8,7 @@
togglerClass="`o-dropdown--narrow ${env.inDialog?'btn btn-link':''}`"
>
<t t-set-slot="toggler">
<i class="oi oi-large oi-debug"/>
<i class="fa fa-lg fa-bug"/>
</t>
<t t-foreach="elements" t-as="element" t-key="element_index">
<DropdownItem
@@ -179,10 +179,10 @@ odoo.define('web.searchUtils', function (require) {
};
// Search bar
const FACET_ICONS = {
filter: 'oi oi-small oi-filter',
groupBy: 'oi oi-small oi-layers',
favorite: 'oi oi-small oi-star',
comparison: 'oi oi-small oi-contrast',
filter: 'fa fa-filter',
groupBy: 'oi oi-group',
favorite: 'fa fa-star',
comparison: 'fa fa-adjust',
};
//-------------------------------------------------------------------------
@@ -30,7 +30,7 @@ const scalesInfo = {
var CalendarView = AbstractView.extend({
display_name: _lt('Calendar'),
icon: 'oi-calendar',
icon: 'fa fa-calendar',
jsLibs: [
'/web/static/lib/fullcalendar/core/main.js',
'/web/static/lib/fullcalendar/interaction/main.js',
@@ -14,7 +14,7 @@ var _lt = core._lt;
var KanbanView = BasicView.extend({
accesskey: "k",
display_name: _lt("Kanban"),
icon: 'oi-align--vertical-top',
icon: 'oi oi-view-kanban',
mobile_friendly: true,
config: _.extend({}, BasicView.prototype.config, {
Model: KanbanModel,
@@ -1132,7 +1132,7 @@ var ListRenderer = BasicRenderer.extend({
if (this._shouldRenderOptionalColumnsDropdown()) {
this.el.classList.add('o_list_optional_columns');
this.$('table').append(
$('<i class="o_optional_columns_dropdown_toggle oi oi-settings--adjust"/>')
$('<i class="o_optional_columns_dropdown_toggle oi oi-settings-adjust"/>')
);
this.$el.append(this._renderOptionalColumnsDropdown());
}
@@ -20,7 +20,7 @@ var _lt = core._lt;
var ListView = BasicView.extend({
accesskey: "l",
display_name: _lt('List'),
icon: 'oi-table',
icon: 'oi oi-view-list',
config: _.extend({}, BasicView.prototype.config, {
Model: ListModel,
Renderer: ListRenderer,
+8 -8
View File
@@ -419,7 +419,7 @@
<t t-set="buttonLabel">View %s</t>
<button type="button"
t-att-accesskey="view.accessKey"
t-attf-class="btn btn-light oi o_switch_view o_{{ view.type }} {{ view.icon }}"
t-attf-class="btn btn-light o_switch_view o_{{ view.type }} {{ view.icon }}"
t-att-class="{ active: env.view.type === view.type }"
t-att-aria-label="sprintf(buttonLabel.toString(), view.type)"
t-att-data-tooltip="view.name"
@@ -586,7 +586,7 @@
</button>
</t>
<t t-if="widget.is_action_enabled('export_xlsx') and widget.isExportEnable">
<button type="button" class="btn btn-secondary oi oi-document--download o_list_export_xlsx" title="Export All" aria-label="Export All"/>
<button type="button" class="btn btn-secondary fa fa-download o_list_export_xlsx" title="Export All" aria-label="Export All"/>
</t>
</div>
</t>
@@ -739,16 +739,16 @@
<t t-name="GraphView.buttons">
<div class="btn-group mb-2 mb-sm-auto" role="toolbar" aria-label="Main actions"/>
<div class="btn-group o_graph_align mb-2 mb-sm-auto" role="toolbar" aria-label="Change graph">
<button class="btn btn-secondary o_graph_button oi oi-chart--column" title="Bar Chart" aria-label="Bar Chart" data-mode="bar"/>
<button class="btn btn-secondary o_graph_button oi oi-chart--area--filled" title="Line Chart" aria-label="Line Chart" data-mode="line"/>
<button class="btn btn-secondary o_graph_button oi oi-chart--pie" title="Pie Chart" aria-label="Pie Chart" data-mode="pie"/>
<button class="btn btn-secondary o_graph_button fa fa-bar-chart" title="Bar Chart" aria-label="Bar Chart" data-mode="bar"/>
<button class="btn btn-secondary o_graph_button fa fa-area-chart" title="Line Chart" aria-label="Line Chart" data-mode="line"/>
<button class="btn btn-secondary o_graph_button fa fa-pie-chart" title="Pie Chart" aria-label="Pie Chart" data-mode="pie"/>
</div>
<div class="btn-group o_stack_align mb-2 mb-sm-auto" role="toolbar" aria-label="Change graph">
<button class="btn btn-secondary o_graph_button oi oi-chart--stacked" title="Stacked" aria-label="Stacked" data-mode="stack"/>
<button class="btn btn-secondary o_graph_button fa fa-database" title="Stacked" aria-label="Stacked" data-mode="stack"/>
</div>
<div class="btn-group o_sort_align mb-2 mb-sm-auto" role="toolbar" aria-label="Sort graph">
<button class="btn btn-secondary o_graph_button oi oi-sort--descending" title="Descending" aria-label="Descending" data-order="desc"/>
<button class="btn btn-secondary o_graph_button oi oi-sort--ascending" title="Ascending" aria-label="Ascending" data-order="asc"/>
<button class="btn btn-secondary o_graph_button fa fa-sort-amount-desc" title="Descending" aria-label="Descending" data-order="desc"/>
<button class="btn btn-secondary o_graph_button fa fa-sort-amount-asc" title="Ascending" aria-label="Ascending" data-order="asc"/>
</div>
</t>
@@ -19,11 +19,10 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* makes the font 33% larger relative to the icon container */
/* matches 'oi-large' utility-class */
.fa-lg {
font-size: 1.33333333em;
line-height: 0.75em;
vertical-align: -15%;
font-size: 1.315em;
vertical-align: -6%;
}
.fa-2x {
font-size: 2em;
@@ -35,7 +35,7 @@
<t t-if="env.config.viewSwitcherEntries.length">
<nav class="btn-group o_cp_switch_buttons">
<t t-foreach="env.config.viewSwitcherEntries" t-as="view" t-key="view.type">
<button class="btn btn-light oi o_switch_view "
<button class="btn btn-light o_switch_view "
t-attf-class="o_{{view.type}} {{view.icon}} {{view.active ? 'active' : ''}}"
t-att-data-tooltip="view.name"
t-on-click="() => this.onViewClicked(view.type)"
@@ -4,7 +4,7 @@
<t t-name="web.FavoriteMenu" owl="1">
<Dropdown class="'o_favorite_menu btn-group'" togglerClass="'btn btn-light'">
<t t-set-slot="toggler">
<i class="oi-small mr-1" t-att-class="icon"/>
<i class="mr-1" t-att-class="icon"/>
<span class="o_dropdown_title">Favorites</span>
</t>
<t t-set="currentGroup" t-value="null"/>
@@ -4,7 +4,7 @@
<t t-name="web.FilterMenu" owl="1">
<Dropdown class="'o_filter_menu btn-group ' + props.class" togglerClass="'btn btn-light'">
<t t-set-slot="toggler">
<i class="oi-small mr-1" t-att-class="icon"/>
<i class="mr-1" t-att-class="icon"/>
<span class="o_dropdown_title">Filters</span>
</t>
<t t-set="currentGroup" t-value="null"/>
@@ -7,7 +7,7 @@
t-props="dropdownProps"
>
<t t-set-slot="toggler">
<i class="oi-small mr-1" t-att-class="icon"/>
<i class="mr-1" t-att-class="icon"/>
<span class="o_dropdown_title">Group By<t t-if="props.showCaretDown"> <i class="fa fa-caret-down ml-1"/></t></span>
</t>
<t t-set="currentGroup" t-value="null"/>
+4 -4
View File
@@ -1,10 +1,10 @@
/** @odoo-module **/
export const FACET_ICONS = {
filter: "oi oi-filter",
groupBy: "oi oi-layers",
favorite: "oi oi-star",
comparison: "oi oi-contrast",
filter: "fa fa-filter",
groupBy: "oi oi-group",
favorite: "fa fa-star",
comparison: "fa fa-adjust",
};
export const GROUPABLE_TYPES = [
@@ -155,7 +155,7 @@ GraphView.props = {
GraphView.type = "graph";
GraphView.display_name = _lt("Graph");
GraphView.icon = "oi oi-chart--line-smooth";
GraphView.icon = "fa fa-area-chart";
GraphView.multiRecord = true;
GraphView.Model = GraphModel;
@@ -14,31 +14,31 @@
</div>
</t>
<div class="btn-group" role="toolbar" aria-label="Change graph">
<button class="btn btn-secondary oi oi-chart--column o_graph_button" data-tooltip="Bar Chart" aria-label="Bar Chart" data-mode="bar"
<button class="btn btn-secondary fa fa-bar-chart o_graph_button" data-tooltip="Bar Chart" aria-label="Bar Chart" data-mode="bar"
t-on-click="() => this.onModeSelected('bar')"
t-att-class="{ active: model.metaData.mode === 'bar' }"
/>
<button class="btn btn-secondary oi oi-chart--area--filled o_graph_button" data-tooltip="Line Chart" aria-label="Line Chart" data-mode="line"
<button class="btn btn-secondary fa fa-area-chart o_graph_button" data-tooltip="Line Chart" aria-label="Line Chart" data-mode="line"
t-on-click="() => this.onModeSelected('line')"
t-att-class="{ active: model.metaData.mode === 'line' }"
/>
<button class="btn btn-secondary oi oi-chart--pie o_graph_button" data-tooltip="Pie Chart" aria-label="Pie Chart" data-mode="pie"
<button class="btn btn-secondary fa fa-pie-chart o_graph_button" data-tooltip="Pie Chart" aria-label="Pie Chart" data-mode="pie"
t-on-click="() => this.onModeSelected('pie')"
t-att-class="{ active: model.metaData.mode === 'pie' }"
/>
</div>
<div t-if="model.metaData.mode === 'bar'" class="btn-group" role="toolbar" aria-label="Change graph">
<button class="btn btn-secondary oi oi-chart--stacked o_graph_button" data-tooltip="Stacked" aria-label="Stacked"
<button class="btn btn-secondary fa fa-database o_graph_button" data-tooltip="Stacked" aria-label="Stacked"
t-on-click="toggleStacked"
t-att-class="{ active: model.metaData.stacked }"
/>
</div>
<div t-if="model.metaData.mode !== 'pie' and model.metaData.domains.length === 1" class="btn-group" role="toolbar" aria-label="Sort graph">
<button class="btn btn-secondary oi oi-sort--descending o_graph_button" data-tooltip="Descending" aria-label="Descending"
<button class="btn btn-secondary fa fa-sort-amount-desc o_graph_button" data-tooltip="Descending" aria-label="Descending"
t-on-click="() => this.toggleOrder('DESC')"
t-att-class="{ active: model.metaData.order === 'DESC' }"
/>
<button class="btn btn-secondary oi oi-sort--ascending o_graph_button" data-tooltip="Ascending" aria-label="Ascending"
<button class="btn btn-secondary fa fa-sort-amount-asc o_graph_button" data-tooltip="Ascending" aria-label="Ascending"
t-on-click="() => this.toggleOrder('ASC')"
t-att-class="{ active: model.metaData.order === 'ASC' }"
/>
@@ -83,7 +83,7 @@
/>
</t>
<span t-if="l10n.direction === 'rtl'" t-esc="cell.title"/>
<i t-attf-class="oi oi-{{ cell.isLeaf ? 'add' : 'subtract' }}--thick me-1"/>
<i t-attf-class="fa fa-{{ cell.isLeaf ? 'plus-square' : 'minus-square-o' }} me-1"/>
<span t-if="l10n.direction === 'ltr'" t-esc="cell.title"/>
</th>
</t>
@@ -96,7 +96,7 @@
o_pivot_sort_order_desc: cell.order === 'desc',
}" t-on-click.prevent="() => this.onMeasureClick(cell)" t-on-mouseover="onMouseEnter" t-on-mouseout="onMouseLeave">
<t t-esc="cell.title"/>
<i t-if="cell.order === 'asc' || cell.order ==='desc'" t-attf-class="oi oi-{{ cell.order === 'asc' ? 'caret--up' : 'caret--down' }} ms-1"/>
<i t-if="cell.order === 'asc' || cell.order ==='desc'" t-attf-class="fa fa-caret-{{ cell.order === 'asc' ? 'up' : 'down' }} ms-1"/>
</th>
</t>
@@ -175,7 +175,7 @@ PivotView.ArchParser = PivotArchParser;
PivotView.type = "pivot";
PivotView.display_name = _lt("Pivot");
PivotView.icon = "oi-cross-tab";
PivotView.icon = "oi oi-view-pivot";
PivotView.multiRecord = true;
PivotView.searchMenuTypes = ["filter", "groupBy", "comparison", "favorite"];
@@ -167,7 +167,6 @@
.o_mobile_menu_toggle {
@extend %-main-navbar-entry-base;
@extend %-main-navbar-entry-spacing;
font-size: $o-navbar-brand-font-size;
}
}
@@ -8,7 +8,7 @@
class="o_mobile_menu_toggle dropdown-toggle o-no-caret d-md-none"
title="Toggle menu" aria-label="Toggle menu"
t-on-click="_openBurger">
<i class="oi oi-large oi-open-panel--filled--right"/>
<i class="oi oi-panel-right"/>
</a>
<t t-portal="'body'">
<Transition name="'burgerslide'" visible="state.isBurgerOpened" leaveDuration="200" t-slot-scope="transition">
@@ -18,7 +18,7 @@
<span class="dropdown-toggle small d-flex align-items-center justify-content-between o-no-caret" t-att-class="{active: isUserMenuUnfolded}">
<img class="o_burger_menu_avatar o_image_24_cover rounded-circle" t-att-src="'/web/image?model=res.users&amp;field=avatar_128&amp;id=' + user.userId" alt="Menu"/>
<span class="o_burger_menu_username px-2"><t t-esc="user.name"/></span>
<i t-if="isUserMenuTogglable" class="oi" t-att-class="state.isUserMenuOpened ? 'oi-caret--down' : 'oi-caret--left'"/>
<i t-if="isUserMenuTogglable" class="fa" t-att-class="state.isUserMenuOpened ? 'fa-caret-down' : 'fa-caret-left'"/>
</span>
<span type="button" class="o_burger_menu_close oi oi-close" aria-label="Close menu" title="Close menu" t-on-click.stop="_closeBurger"/>
</div>
+19 -13
View File
@@ -5,21 +5,23 @@
// Sizes
// ----------------------------------------------------------------------------
$oi-default-size: 1em;
$oi-default-size: 1em; // Normally 13px
$oi-sizes: (
'small': (
'font-size': .8em,
'vertical-align': 2%,
'font-size': .769em, // ~ 10px
'vertical-align': 10%,
),
'normal': (
'font-size': $oi-default-size,
),
'large': (
'font-size': 1.2em,
'font-size': 1.315em, // ~ 17px
'vertical-align': -6%,
),
'larger': (
'font-size': 1.77em,
'font-size': 1.462em, // ~ 19px
'vertical-align': -10%,
),
);
@@ -27,16 +29,20 @@ $oi-sizes: (
// Allows to dinamically update rules according to the context and eventual
// utility classes.
// ----------------------------------------------------------------------------
.oi::before {
font-size: var(--oi-font-size, $oi-default-size);
vertical-align: var(--oi-vertical-align, 0);
text-rendering: geometricPrecision;
.oi, .fa {
&:before {
font-size: var(--oi-font-size, $oi-default-size);
vertical-align: var(--oi-vertical-align, 0);
text-rendering: geometricPrecision;
}
}
.oi-fw:before {
display: inline-block;
width: var(--oi-fw-width, $oi-default-size * 1.3);
text-align: center;
.oi-fw, .fa-fw {
&:before {
display: inline-block;
width: var(--oi-fw-width, $oi-default-size * 1.3);
text-align: center;
}
}
// Print CSS variables for each size/breakpoint
@@ -140,7 +140,7 @@
<t t-name="web.NavBar.SectionsMenu.MoreDropdown" owl="1">
<Dropdown class="'o_menu_sections_more'" title="'More Menu'" hotkey="hotkey">
<t t-set-slot="toggler">
<i class="oi oi-large oi-add--thick"/>
<i class="fa fa-plus"/>
</t>
<t t-foreach="sections" t-as="section" t-key="section.id">
@@ -4,7 +4,7 @@
<t t-name="web.SwitchCompanyMenu" owl="1">
<Dropdown class="'o_switch_company_menu d-none d-md-block'" position="'bottom-end'">
<t t-set-slot="toggler">
<i class="oi oi-large oi-connection--two-way d-lg-none"/>
<i class="fa fa-building d-lg-none"/>
<span class="oe_topbar_name d-none d-lg-block" t-esc="currentCompany.name"/>
</t>
<t t-foreach="Object.values(companyService.availableCompanies).sort((c1, c2) => c1.sequence - c2.sequence)" t-as="company" t-key="company.id">
@@ -175,7 +175,7 @@ QUnit.module("DebugMenu", (hooks) => {
props: { close: () => {} },
});
assert.containsOnce(target, ".o_dialog");
assert.containsNone(target, ".o_dialog .o_debug_manager .oi-debug");
assert.containsNone(target, ".o_dialog .o_debug_manager .fa-bug");
});
QUnit.test(
@@ -228,7 +228,7 @@ QUnit.module("DebugMenu", (hooks) => {
props: { close: () => {} },
});
assert.containsOnce(target, ".o_dialog");
assert.containsOnce(target, ".o_dialog .o_debug_manager .oi-debug");
assert.containsOnce(target, ".o_dialog .o_debug_manager .fa-bug");
await click(target, ".o_dialog .o_debug_manager button");
const debugManagerEl = target.querySelector(".o_debug_manager");
assert.containsN(debugManagerEl, ".dropdown-menu .dropdown-item", 2);
@@ -54,7 +54,7 @@ odoo.define('web.comparison_menu_tests', function (require) {
await cpHelpers.toggleMenuItem(controlPanel, "Birthday");
await cpHelpers.toggleMenuItemOption(controlPanel, "Birthday", "January");
assert.containsOnce(controlPanel, 'div.o_comparison_menu > button i.oi.oi-contrast');
assert.containsOnce(controlPanel, 'div.o_comparison_menu > button i.fa.fa-adjust');
assert.strictEqual(controlPanel.el.querySelector('div.o_comparison_menu > button span').innerText.trim(), "Comparison");
await cpHelpers.toggleComparisonMenu(controlPanel);
@@ -39,7 +39,7 @@ odoo.define('web.favorite_menu_tests', function (require) {
};
const controlPanel = await createControlPanel(params);
assert.containsOnce(controlPanel, 'div.o_favorite_menu > button i.oi.oi-star');
assert.containsOnce(controlPanel, 'div.o_favorite_menu > button i.fa.fa-star');
assert.strictEqual(controlPanel.el.querySelector('div.o_favorite_menu > button span').innerText.trim(), "Favorites");
await cpHelpers.toggleFavoriteMenu(controlPanel);
@@ -103,7 +103,7 @@ odoo.define('web.filter_menu_tests', function (require) {
assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ['Foo']);
assert.containsOnce(controlPanel.el.querySelector('.o_searchview .o_searchview_facet'),
'span.oi.oi-filter.o_searchview_facet_label');
'span.fa.fa-filter.o_searchview_facet_label');
assert.ok(cpHelpers.isItemSelected(controlPanel, "Foo"));
@@ -108,7 +108,7 @@ odoo.define('web.groupby_menu_tests', function (require) {
await cpHelpers.toggleMenuItem(controlPanel, 0);
assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ['Groupby Foo']);
assert.containsOnce(controlPanel.el.querySelector('.o_searchview .o_searchview_facet'),
'span.oi.oi-layers.o_searchview_facet_label');
'span.oi.oi-group.o_searchview_facet_label');
assert.ok(cpHelpers.isItemSelected(controlPanel, 0));
await cpHelpers.toggleMenuItem(controlPanel, 0);
@@ -1758,7 +1758,7 @@ QUnit.module('Views', {
this.selectTimeRanges = async (comparisonOptionId, basicDomainId) => {
const facetEls = graph.el.querySelectorAll('.o_searchview_facet');
const facetIndex = [...facetEls].findIndex(el => !!el.querySelector('span.oi-filter'));
const facetIndex = [...facetEls].findIndex(el => !!el.querySelector('span.fa-filter'));
if (facetIndex > -1) {
await cpHelpers.removeFacet(graph.el, facetIndex);
}
@@ -1780,7 +1780,7 @@ QUnit.module('Views', {
const productWasSelected = cpHelpers.isItemSelected(graph.el, 'Product');
const facetEls = graph.el.querySelectorAll('.o_searchview_facet');
const facetIndex = [...facetEls].findIndex(el => !!el.querySelector('span.oi-layers'));
const facetIndex = [...facetEls].findIndex(el => !!el.querySelector('span.oi-group'));
if (facetIndex > -1) {
await cpHelpers.removeFacet(graph.el, facetIndex);
await cpHelpers.toggleGroupByMenu(graph.el);
@@ -61,7 +61,7 @@ QUnit.module("Search", (hooks) => {
await toggleFilterMenu(target);
await toggleMenuItem(target, "Birthday");
await toggleMenuItemOption(target, "Birthday", "January");
assert.containsOnce(target, "div.o_comparison_menu > button i.oi.oi-contrast");
assert.containsOnce(target, "div.o_comparison_menu > button i.fa.fa-adjust");
assert.strictEqual(
target
.querySelector("div.o_comparison_menu > button span")
@@ -84,8 +84,8 @@ QUnit.module("Search", (hooks) => {
Component: ControlPanel,
config: {
viewSwitcherEntries: [
{ type: "list", active: true, icon: "oi-table", name: "List" },
{ type: "kanban", icon: "oi-align--vertical-top", name: "Kanban" },
{ type: "list", active: true, icon: "oi-view-list", name: "List" },
{ type: "kanban", icon: "oi-view-kanban", name: "Kanban" },
],
},
searchMenuTypes: [],
@@ -98,7 +98,7 @@ QUnit.module("Search", (hooks) => {
assert.strictEqual(views[0].getAttribute("data-tooltip"), "List");
assert.hasClass(views[0], "active");
assert.strictEqual(views[1].getAttribute("data-tooltip"), "Kanban");
assert.hasClass(views[1], "oi-align--vertical-top");
assert.hasClass(views[1], "oi-view-kanban");
controlPanel.env.services.action.switchView = (viewType) => {
assert.step(viewType);
@@ -75,7 +75,7 @@ QUnit.module("Search", (hooks) => {
},
});
assert.containsOnce(target, "div.o_favorite_menu > button i.oi.oi-star");
assert.containsOnce(target, "div.o_favorite_menu > button i.fa.fa-star");
assert.strictEqual(
target
.querySelector("div.o_favorite_menu > button span")
@@ -108,7 +108,7 @@ QUnit.module("Search", (hooks) => {
},
});
assert.containsOnce(target, "div.o_favorite_menu > button i.oi.oi-star");
assert.containsOnce(target, "div.o_favorite_menu > button i.fa.fa-star");
assert.strictEqual(
target
.querySelector("div.o_favorite_menu > button span")
@@ -120,7 +120,7 @@ QUnit.module("Search", (hooks) => {
assert.deepEqual(getFacetTexts(target), ["Foo"]);
assert.containsOnce(
target.querySelector(".o_searchview .o_searchview_facet"),
"span.oi.oi-filter.o_searchview_facet_label"
"span.fa.fa-filter.o_searchview_facet_label"
);
assert.ok(isItemSelected(target, "Foo"));
assert.deepEqual(getDomain(controlPanel), [["foo", "=", "qsdf"]]);
@@ -138,7 +138,7 @@ QUnit.module("Search", (hooks) => {
assert.deepEqual(getFacetTexts(target), ["Foo"]);
assert.containsOnce(
target.querySelector(".o_searchview .o_searchview_facet"),
"span.oi.oi-layers.o_searchview_facet_label"
"span.oi.oi-group.o_searchview_facet_label"
);
assert.ok(isItemSelected(target, "Foo"));
@@ -3037,37 +3037,37 @@ QUnit.module("Views", (hooks) => {
`,
});
assert.containsOnce(target, "button.oi-sort--ascending");
assert.containsOnce(target, "button.oi-sort--descending");
assert.containsOnce(target, "button.fa-sort-amount-asc");
assert.containsOnce(target, "button.fa-sort-amount-desc");
checkLegend(assert, graph, "Count", "measure should be by count");
assert.hasClass(
target.querySelector("button.oi-sort--descending"),
target.querySelector("button.fa-sort-amount-desc"),
"active",
'sorting should be applie on descending order by default when sorting="desc"'
);
checkDatasets(assert, graph, "data", { data: [4, 3, 1] });
await click(target, "button.oi-sort--ascending");
await click(target, "button.fa-sort-amount-asc");
assert.hasClass(
target.querySelector("button.oi-sort--ascending"),
target.querySelector("button.fa-sort-amount-asc"),
"active",
"ascending order should be applied"
);
checkDatasets(assert, graph, "data", { data: [1, 3, 4] });
await click(target, "button.oi-sort--descending");
await click(target, "button.fa-sort-amount-desc");
assert.hasClass(
target.querySelector("button.oi-sort--descending"),
target.querySelector("button.fa-sort-amount-desc"),
"active",
"descending order button should be active"
);
checkDatasets(assert, graph, "data", { data: [4, 3, 1] });
// again click on descending button to deactivate order button
await click(target, "button.oi-sort--descending");
await click(target, "button.fa-sort-amount-desc");
assert.doesNotHaveClass(
target.querySelector("button.oi-sort--descending"),
target.querySelector("button.fa-sort-amount-desc"),
"active",
"descending order button should not be active"
);
@@ -3075,28 +3075,28 @@ QUnit.module("Views", (hooks) => {
// set line mode
await selectMode(target, "line");
assert.containsOnce(target, "button.oi-sort--ascending");
assert.containsOnce(target, "button.oi-sort--descending");
assert.containsOnce(target, "button.fa-sort-amount-asc");
assert.containsOnce(target, "button.fa-sort-amount-desc");
checkLegend(assert, graph, "Count", "measure should be by count");
assert.doesNotHaveClass(
target.querySelector("button.oi-sort--descending"),
target.querySelector("button.fa-sort-amount-desc"),
"active",
"descending order should be applied"
);
checkDatasets(assert, graph, "data", { data: [4, 1, 3] });
await click(target, "button.oi-sort--ascending");
await click(target, "button.fa-sort-amount-asc");
assert.hasClass(
target.querySelector("button.oi-sort--ascending"),
target.querySelector("button.fa-sort-amount-asc"),
"active",
"ascending order button should be active"
);
checkDatasets(assert, graph, "data", { data: [1, 3, 4] });
await click(target, "button.oi-sort--descending");
await click(target, "button.fa-sort-amount-desc");
assert.hasClass(
target.querySelector("button.oi-sort--descending"),
target.querySelector("button.fa-sort-amount-desc"),
"active",
"descending order button should be active"
);
@@ -3125,26 +3125,26 @@ QUnit.module("Views", (hooks) => {
checkLegend(assert, graph, ["false", "true"], "measure should be by count");
checkDatasets(assert, graph, "data", [{ data: [1, 1, 3] }, { data: [3, 0, 0] }]);
await click(target, "button.oi-sort--ascending");
await click(target, "button.fa-sort-amount-asc");
assert.hasClass(
target.querySelector("button.oi-sort--ascending"),
target.querySelector("button.fa-sort-amount-asc"),
"active",
"ascending order should be applied by default"
);
checkDatasets(assert, graph, "data", [{ data: [1, 3, 1] }, { data: [0, 0, 3] }]);
await click(target, "button.oi-sort--descending");
await click(target, "button.fa-sort-amount-desc");
assert.hasClass(
target.querySelector("button.oi-sort--descending"),
target.querySelector("button.fa-sort-amount-desc"),
"active",
"ascending order button should be active"
);
checkDatasets(assert, graph, "data", [{ data: [1, 3, 1] }, { data: [3, 0, 0] }]);
// again click on descending button to deactivate order button
await click(target, "button.oi-sort--descending");
await click(target, "button.fa-sort-amount-desc");
assert.doesNotHaveClass(
target.querySelector("button.oi-sort--descending"),
target.querySelector("button.fa-sort-amount-desc"),
"active",
"descending order button should not be active"
);
@@ -3185,9 +3185,9 @@ QUnit.module("Views", (hooks) => {
{ data: [0, 1, 0, 0] },
]);
await click(target, "button.oi-sort--ascending");
await click(target, "button.fa-sort-amount-asc");
assert.hasClass(
target.querySelector("button.oi-sort--ascending"),
target.querySelector("button.fa-sort-amount-asc"),
"active",
"ascending order should be applied by default"
);
@@ -3197,9 +3197,9 @@ QUnit.module("Views", (hooks) => {
{ data: [0, 0, 0, 1] },
]);
await click(target, "button.oi-sort--descending");
await click(target, "button.fa-sort-amount-desc");
assert.hasClass(
target.querySelector("button.oi-sort--descending"),
target.querySelector("button.fa-sort-amount-desc"),
"active",
"descending order button should be active"
);
@@ -3210,9 +3210,9 @@ QUnit.module("Views", (hooks) => {
]);
// again click on descending button to deactivate order button
await click(target, "button.oi-sort--descending");
await click(target, "button.fa-sort-amount-desc");
assert.doesNotHaveClass(
target.querySelector("button.oi-sort--descending"),
target.querySelector("button.fa-sort-amount-desc"),
"active",
"descending order button should not be active"
);
@@ -82,7 +82,7 @@
</t>
<!-- Mobile preview -->
<div class="o_mobile_preview o_menu_systray_item" id="mobile-menu">
<a data-action="show-mobile-preview" href="#" accesskey="v"><span title="Mobile preview" role="img" aria-label="Mobile preview" class="oi oi-mobile"/></a>
<a data-action="show-mobile-preview" href="#" accesskey="v"><span title="Mobile preview" role="img" aria-label="Mobile preview" class="fa fa-mobile"/></a>
</div>
<div groups="website.group_multi_website" t-if="multi_website_websites" id="website_switcher" class="o_menu_systray_item">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" accesskey="w">
@@ -109,7 +109,7 @@
<!-- Page Edition -->
<div class="o_new_content_menu o_menu_systray_item" id="new-content-menu">
<a href="#" accesskey="c"><span class="oi oi-add--thick mr-1"/>New</a>
<a href="#" accesskey="c"><span class="fa fa-plus mr-1"/>New</a>
<div id="o_new_content_menu_choices" class="o_hidden">
<div class="container pt32 pb32">
<div class="row">
@@ -199,7 +199,7 @@
</div>
</div>
<div t-if="not translatable" id="edit-page-menu" class="o_menu_systray_item">
<a data-action="edit" href="#" accesskey="a"><span class="oi oi-pencil mr-1"/>Edit</a>
<a data-action="edit" href="#" accesskey="a"><span class="fa fa-pencil mr-1"/>Edit</a>
</div>
<div t-if="edit_in_backend or ('website_published' in main_object.fields_get() and main_object._name != 'website.page')" class="o_menu_systray_item">
<a role="button" class="btn pl-0 rounded-0 dropdown-toggle css_edit_dynamic" data-toggle="dropdown" href="#">