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

[IMP] web: searchbar, mini-calendar & CommandPalette design

Browse Source 
Ensure square-ish table cell in mini-calendar.

Better breadcrumbs actions alignment in ControlPanel.

task-2818586

Part-of: odoo/odoo#116641
This commit is contained in:
stefanorigano (SRI)
2023-05-12 22:59:15 +02:00
committed by Pierre Paridans
parent 18cb11891e
commit 23504d3d85
8 changed files with 47 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/lunch/static/src/components/lunch_dashboard.xml
+1 -1
View File
@@ -72,7 +72,7 @@
<t t-name="lunch.LunchDashboardOrder" owl="1">
<LunchAlerts alerts="state.infos.alerts"/>
<div class="o_lunch_banner container-fluid p-4 border-bottom bg-view">
<div class="o_lunch_banner container-fluid p-4 bg-view">
<div class="row h-100">
<div class="col-12 col-md-4">
<div class="row h-100 align-content-center">
addons/web/static/src/core/commands/command_palette.xml
+1 -1
View File
@@ -46,7 +46,7 @@
</t>
</div>
<div t-if="state.FooterComponent" class="o_command_palette_footer mt-2 px-4 py-2 border-top bg-100 text-muted">
<div t-if="state.FooterComponent" class="o_command_palette_footer mt-2 px-4 py-2 border-top rounded-bottom bg-100 text-muted">
<t t-component="state.FooterComponent" switchNamespace="(namespace) => this.debounceSearch(namespace.concat(this.state.searchValue))"/>
</div>
</div>
addons/web/static/src/scss/bootstrap_overridden.scss
Vendored
+2 -2
View File
@@ -98,8 +98,8 @@ $border-radius-sm: $o-border-radius-sm !default;
$border-radius-lg: $o-border-radius-lg !default;
$border-color: $o-gray-300 !default;
$component-active-color: $o-brand-primary !default;
$component-active-bg: $gray-200 !default;
$component-active-color: $o-component-active-color !default;
$component-active-bg: $o-component-active-bg !default;
$caret-width: 4px !default;
addons/web/static/src/scss/primary_variables.scss
+7 -4
View File
@@ -104,7 +104,10 @@ $o-main-favorite-color: #f3cc00 !default;
$o-main-code-color: #d2317b !default;
// Components colors
// TODO: move variables in components
$o-component-active-color: $o-gray-900 !default;
$o-component-active-bg: mix($o-action, $o-gray-100, 20%) !default;
$o-component-active-border: $o-action !default;
$o-view-background-color: white !default;
$o-shadow-color: #303030 !default;
@@ -247,9 +250,9 @@ $o-btns-bs-override: map-merge((
hover-border: $o-gray-400,
hover-color: $o-gray-900,
active-background: mix($o-action, $o-gray-100, 20%),
active-border: $o-action,
active-color: $o-gray-900,
active-background: $o-component-active-bg,
active-border: $o-component-active-border,
active-color: $o-component-active-color,
),
"light": (
background: $o-white,
addons/web/static/src/search/layout.xml
+1 -1
View File
@@ -7,7 +7,7 @@
</t>
<t t-component="components.ControlPanel" slots="controlPanelSlots" t-if="display.controlPanel" display="display.controlPanel"/>
<t t-component="components.Banner" t-if="display.banner"/>
<div t-ref="content" class="o_content" t-attf-class="{{props.className}}" t-att-class="{ o_component_with_search_panel: display.searchPanel }">
<div t-ref="content" class="o_content" t-attf-class="{{props.className}}" t-att-class="{ 'o_component_with_search_panel bg-200': display.searchPanel }">
<t t-component="components.SearchPanel" t-if="display.searchPanel"/>
<t t-slot="default" contentRef="contentRef" />
</div>
addons/web/static/src/search/search_panel/search_panel.xml
+1 -1
View File
@@ -11,7 +11,7 @@
</t>
<t t-name="web.SearchPanelContent" owl="1">
<div class="o_search_panel flex-grow-0 flex-shrink-0 border-end pe-2 pb-5 ps-4 h-100 bg-view overflow-auto" t-att-class="env.searchModel.searchPanelInfo.className" t-ref="root">
<div class="o_search_panel flex-grow-0 flex-shrink-0 pe-2 pb-5 ps-4 h-100 bg-view overflow-auto" t-att-class="env.searchModel.searchPanelInfo.className" t-ref="root">
<div t-if="!sections or sections.length === 0" class="o_search_panel_empty_state me-3">
<p class="mt-3 small text-muted">No quick filter available.</p>
<p class="small text-muted">Update the filters in the search bar to display more records.</p>
addons/web/static/src/views/calendar/calendar_controller.scss
+29 -22
View File
@@ -1,5 +1,5 @@
// Variables
$o-cw-color-today-accent: #fc3d39;
$o-cw-color-today-accent: #fe3b30;
$o-cw-filter-avatar-size: 20px;
// Animations
@@ -66,32 +66,39 @@ $o-cw-filter-avatar-size: 20px;
a,
span {
padding: 5px 0;
display: flex;
width: 100%;
align-items: center;
justify-content: center;
aspect-ratio: 4/3;
background: none;
text-align: center;
vertical-align: middle;
font-size: 1.2rem;
color: map-get($grays, "900");
font-weight: 400;
color: $headings-color;
line-height: 1;
}
&.ui-datepicker-current-day a {
background: $info;
color: color-contrast($info);
font-weight: bold;
&.ui-datepicker-today, &.ui-datepicker-current-day {
&, a {
position: relative;
color: var(--ui-datepicker-badge-color, #{$o-component-active-color});
}
&:before {
@include o-position-absolute(0, $left: 50%);
display: block;
height: 100%;
aspect-ratio: 1;
border-radius: 100%;
border: var(--ui-datepicker-badge-border, 1px solid #{$o-component-active-border});
background: var(--ui-datepicker-badge-background, #{$o-component-active-bg});
transform: translateX(-50%);
content: "";
}
}
&.ui-datepicker-today a {
margin: auto;
border-radius: 100%;
padding: 0.1em;
width: 25px;
background: mix($o-cw-color-today-accent, white, 80%);
color: white;
}
&.ui-datepicker-current-day.ui-datepicker-today a {
background: $o-cw-color-today-accent;
&.ui-datepicker-today {
--ui-datepicker-badge-border: 1px solid #{$o-cw-color-today-accent};
--ui-datepicker-badge-background: #{$o-cw-color-today-accent};
--ui-datepicker-badge-color: #{color-contrast($o-cw-color-today-accent)};
}
}
addons/web/static/src/views/form/form_status_indicator/form_status_indicator.xml
+5 -6
View File
@@ -2,12 +2,12 @@
<templates xml:space="preserve">
<t t-name="web.FormStatusIndicator" owl="1">
<div class="o_form_status_indicator d-md-flex ms-md-1" t-att-class="{ o_form_status_indicator_new_record: props.model.root.isNew }">
<div class="o_form_status_indicator d-md-flex align-items-center" t-att-class="{ o_form_status_indicator_new_record: props.model.root.isNew }">
<div class="o_form_status_indicator_buttons d-flex" t-att-class="{ invisible: !(props.model.root.isNew or displayButtons) }">
<button
type="button"
class="o_form_button_save btn btn-light py-0"
t-att-disabled="props.isDisabled"
class="o_form_button_save btn btn-light px-1 lh-sm"
t-att-disabled="props.isDisabled || !props.model.root.isNew and indicatorMode === 'invalid'"
data-hotkey="s"
t-on-click.stop="save"
data-tooltip="Save manually"
@@ -16,7 +16,7 @@
</button>
<button
type="button"
class="o_form_button_cancel btn btn-light py-0"
class="o_form_button_cancel btn btn-light px-1 lh-sm"
t-att-disabled="props.isDisabled"
data-hotkey="j"
t-on-click.stop="discard"
@@ -28,9 +28,8 @@
<span
t-if="!props.model.root.isNew and indicatorMode === 'invalid'"
class="text-danger small ms-2"
data-tooltip="Correct issues to save, or discard changes">
data-tooltip="Unable to save. Correct the issue or discard changes">
<i class="fa fa-warning" />
Unable to save
</span>
</div>
</t>