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

[IMP] website: adapt for dark-mode

Browse Source 
This commit adapts several components in order to correctly handle
color-scheme variations.

task-2710677

Part-of: odoo/odoo#102868
This commit is contained in:
stefanorigano (SRI)
2022-10-11 13:15:53 +02:00
committed by Pierre Paridans
parent 45cfe93166
commit f84b9b7ef3
12 changed files with 40 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/client_actions/configurator/configurator.js
+1 -1
View File
@@ -104,7 +104,7 @@ class DescriptionScreen extends Component {
open: this._customizeNoResultMenuStyle.bind(this),
focus: this._disableKeyboardNav.bind(this),
classes: {
'ui-autocomplete': 'custom-ui-autocomplete shadow-lg border-0 o_configurator_show_fast',
'ui-autocomplete': 'custom-ui-autocomplete shadow-lg border-0 o_configurator_show_fast o_configurator_industry_dropdown',
},
});
if (this.state.selectedIndustry) {
addons/website/static/src/client_actions/configurator/configurator.scss
+11 -1
View File
@@ -1,6 +1,6 @@
.o_configurator_container {
@include o-position-absolute(0, 0, 0, 0);
background-color: $white;
background-color: $o-view-background-color;
.o_configurator_screen {
@@ -74,6 +74,12 @@
}
}
.o_configurator_odoo_logo {
background-image: var(--configurator-logo, url(/web/static/img/odoo_logo.svg));
background-repeat: no-repeat;
background-size: contain;
}
// ==== Screens
&.o_description_screen {
@@ -127,6 +133,10 @@
}
}
.o_configurator_industry_dropdown {
background: $dropdown-bg;
}
.dropdown {
box-shadow: inset 0 -3px 0 map-get($theme-colors, primary);
addons/website/static/src/client_actions/configurator/configurator.xml
+8 -18
View File
@@ -9,9 +9,7 @@
<t t-name="website.Configurator.WelcomeScreen" owl="1">
<div class="o_configurator_screen h-100 d-flex flex-column o_welcome_screen">
<div class="container-fluid pt-3 pb-2">
<img class="ms-lg-5" style="height: 31px; width: 99px;" src="/website/static/src/img/odoo_logo.svg" title="Odoo Logo"/>
</div>
<div class="o_configurator_odoo_logo mt-4 ms-4" style="height: 31px; width: 99px;"/>
<div class="o_configurator_screen_content d-flex h-100">
<div class="container align-self-center o_configurator_show">
<div class="display-4 mb-2">Ready to build the<br class="d-none d-lg-inline"/>
@@ -28,9 +26,7 @@
<t t-name="website.Configurator.DescriptionScreen" owl="1">
<div class="o_configurator_screen h-100 d-flex flex-column o_description_screen">
<div class="container-fluid pt-3 pb-2">
<img class="ms-lg-5" style="height: 31px; width: 99px;" src="/website/static/src/img/odoo_logo.svg" title="Odoo Logo"/>
</div>
<div class="o_configurator_odoo_logo mt-4 ms-5" style="height: 31px; width: 99px;"/>
<div class="o_configurator_screen_content d-flex h-100 flex-grow-1">
<div class="container align-self-center">
<div class="o_configurator_typing_text d-inline d-md-block mb-md-2 mb-lg-4 o_configurator_show">
@@ -41,7 +37,7 @@
<i class="text-primary" t-if="state.selectedType">
<t t-esc="state.getSelectedType(state.selectedType).label"/>
</i>
<i class="fa fa-angle-down text-black-50 ms-auto ps-2" role="img"/>
<i class="fa fa-angle-down ms-auto ps-2" role="img"/>
</a>
</div>
<div t-attf-class="dropdown-menu border-0 shadow-lg {{state.selectedType ? 'o_step_completed' : 'o_step_todo show'}}" role="menu">
@@ -69,7 +65,7 @@
<t t-if="state.selectedPurpose">
<t t-esc="state.getSelectedPurpose(state.selectedPurpose).label"/>
</t>
<i class="fa fa-angle-down text-black-50 ms-auto ps-2" role="img"/>
<i class="fa fa-angle-down ms-auto ps-2" role="img"/>
</a>
</div>
<div class="dropdown-menu border-0 shadow-lg" role="menu">
@@ -89,9 +85,7 @@
<t t-name="website.Configurator.PaletteSelectionScreen" owl="1">
<div class="o_configurator_screen h-100 d-flex flex-column o_palette_selection_screen">
<div class="container-fluid pt-3 pb-2">
<img class="ms-lg-5" style="height: 31px; width: 99px;" src="/website/static/src/img/odoo_logo.svg" title="Odoo Logo"/>
</div>
<div class="o_configurator_odoo_logo mt-4 ms-5" style="height: 31px; width: 99px;"/>
<div class="o_configurator_screen_content container palette_selection d-flex flex-grow-1 h-100">
<div class="o_content_container d-flex flex-row w-100 h-auto align-self-md-center o_configurator_show">
<div class="o_detect_logo w-25 order-lg-3 my-4 my-md-0 d-flex flex-column">
@@ -124,7 +118,7 @@
</div>
<div class="o_palettes_separator position-relative d-flex justify-content-center order-lg-2 w-0 py-3 py-lg-0 px-lg-5 mb-4 mb-lg-0">
<div class="border-top w-100"></div>
<b class="palette_selection_or bg-white text-muted w-lg-100 text-center px-3 py-lg-3">OR</b>
<b class="palette_selection_or bg-view text-muted w-lg-100 text-center px-3 py-lg-3">OR</b>
<div class="border-start d-none d-lg-inline h-100 mx-auto w-0"></div>
</div>
<div class="o_palettes_container w-auto flex-grow-1 o_configurator_show_fast">
@@ -151,9 +145,7 @@
<t t-name="website.Configurator.FeatureSelection" owl="1">
<div class="o_configurator_screen h-100 d-flex flex-column o_feature_selection_screen">
<div class="container-fluid pt-3 pb-2">
<img class="ms-lg-5" style="height: 31px; width: 99px;" src="/website/static/src/img/odoo_logo.svg" title="Odoo Logo"/>
</div>
<div class="o_configurator_odoo_logo mt-4 ms-5" style="height: 31px; width: 99px;"/>
<div class="o_configurator_screen_content overflow-hidden container d-flex flex-grow-1 align-items-center">
<div class="m-auto d-flex mh-100 flex-column">
<div class="o_configurator_typing_text o_configurator_show_fast">Add <b class="text-info">Pages</b> and <b class="text-warning">Features</b></div>
@@ -193,9 +185,7 @@
<t t-name="website.Configurator.ThemeSelectionScreen" owl="1">
<div class="o_configurator_screen h-100 d-flex flex-column o_theme_selection_screen">
<div class="container-fluid pt-3 pb-2">
<img class="ms-lg-5" style="height: 31px; width: 99px;" src="/website/static/src/img/odoo_logo.svg" title="Odoo Logo"/>
</div>
<div class="o_configurator_odoo_logo mt-4 ms-5" style="height: 31px; width: 99px;"/>
<div class="o_configurator_screen_content d-flex flex-column flex-grow-1 align-items-center">
<div class="m-auto w-100 w-md-75 w-xl-100">
<div class="o_configurator_typing_text text-center mt-4 mb-lg-4">Choose your favorite <b>Theme</b>
addons/website/static/src/components/dialog/seo.scss
+3 -2
View File
@@ -1,4 +1,6 @@
.oe_seo_configuration {
--seo__preview-title-color: #1a0dab; // Google Search color
#language-box {
padding-right: 25px;
background-color: white;
@@ -82,7 +84,7 @@
.r {
cursor: pointer;
color:#1a0dab;
color:var(--seo__preview-title-color);
font-size: 18px;
overflow: hidden;
text-overflow: ellipsis;
@@ -95,7 +97,6 @@
line-height: 18px;
color: #545454;
.kv {
color: #006621;
font-size: 14px;
line-height: 18px;
}
addons/website/static/src/components/dialog/seo.xml
+2 -2
View File
@@ -103,8 +103,8 @@
<t t-if="props.isIndexed">
<div class="r"><t t-esc="props.title"/></div>
<div class="s">
<div class="kv"><t t-esc="props.url"/></div>
<div class="st"><t t-esc="description"/></div>
<div class="kv mb-1 text-muted"><t t-esc="props.url"/></div>
<div class="st text-black"><t t-esc="description"/></div>
</div>
</t>
<t t-else="">
addons/website/static/src/components/website_loader/website_loader.scss
+5
View File
@@ -1,4 +1,6 @@
.o_website_loader_container {
--website-loader-color: #{$white};
font-family: "Montserrat", $font-family-sans-serif;
background-color: rgba($o-shadow-color, .9);
pointer-events: all;
@@ -6,6 +8,7 @@
justify-content: space-evenly;
z-index: $zindex-modal - 1;
padding: 7%;
color: var(--website-loader-color);
.o_website_loader {
position: relative;
@@ -19,6 +22,8 @@
.o_website_loader_tip {
font-size: 0.5em;
color: var(--website-loader-color);
@include media-breakpoint-down(md) {
width: 50% !important;
}
addons/website/static/src/components/website_loader/website_loader.xml
+1 -1
View File
@@ -2,7 +2,7 @@
<templates id="template" xml:space="preserve">
<t t-name="website.website_loader" owl="1">
<div t-if="state.isVisible" class="o_website_loader_container position-fixed fixed-top fixed-left
h-100 w-100 d-flex flex-column align-items-center text-white fw-bold text-center">
h-100 w-100 d-flex flex-column align-items-center fw-bold text-center">
<t t-if="state.title" t-esc="state.title"/>
<t t-elif="state.showTips">Building your website...</t>
<div class="o_website_loader"/>
addons/website/static/src/img/website_dashboard_visit_demo_dark_mode.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

addons/website/static/src/scss/website.backend.scss
+4 -6
View File
@@ -1,12 +1,12 @@
.o_dashboards {
background-color: #ececec;
background-color: $o-view-background-color;
&:has(iframe[src*='plausible']) {
background-color: #f9fafb; // Copied from iframe.
}
.o_website_dashboard {
background-color: #ececec;
background-color: $o-view-background-color;
&:has(iframe[src*='plausible']) {
background-color: #f9fafb; // Copied from iframe.
@@ -156,7 +156,7 @@
margin-top: 16px;
height: 300px;
background-size: 100% !important;
background: url("/website/static/src/img/website_dashboard_visit_demo.png") no-repeat;
background: var(--Dashboard__demoBackground, url("/website/static/src/img/website_dashboard_visit_demo.png")) no-repeat;
position: relative;
.o_buttons {
@@ -164,7 +164,7 @@
}
.o_layer {
background-color: rgba(255,255,255,.3);
background-color: rgba($o-view-background-color,.3);
position: absolute;
top: 0;
left: 0;
@@ -197,7 +197,6 @@
.o_kanban_renderer.o_theme_kanban {
$o-theme-kanban-gray: #fcfcfc;
background-color: $o-theme-kanban-gray;
/// Un-grouped Layout (default)
&.o_kanban_ungrouped {
@@ -231,7 +230,6 @@
.o_theme_preview_top {
position: relative;
border: 1px solid darken($o-theme-kanban-gray, 20%);
border-radius: 2px;
transform-origin: center bottom;
transition: all .1s ease 0s;
addons/website/static/src/systray_items/edit_website.xml
+1 -1
View File
@@ -2,7 +2,7 @@
<templates xml:space="preserve">
<t t-name="website.EditWebsiteSystray" owl="1">
<div class="o_edit_website_container d-none d-md-block" t-att-class="{ o_translatable: translatable }">
<a href="#" accesskey="a" t-on-click="startEdit">
<a href="#" accesskey="a" t-on-click="startEdit" class="text-reset">
<span t-if="translatable" class="fa fa-pencil me-2"/>
<span t-else="" class="fa me-2" t-att-class="{ 'fa-refresh fa-spin': this.state.isLoading, 'fa-pencil': !this.state.isLoading }"/>
<t t-esc="label"/>
addons/website/views/res_config_settings_views.xml
+2 -3
View File
@@ -20,8 +20,7 @@
<field name="arch" type="xml">
<xpath expr="//div[hasclass('settings')]" position="inside">
<div class="app_settings_block" data-string="Website" string="Website" data-key="website" groups="website.group_website_designer">
<div class="row app_settings_header mb-0 mt-0 ms-0 mw-100"
style="background-color: #FEF0D0; margin-bottom: 0px !important; margin-top: 0px !important;">
<div class="row app_settings_header my-0 ms-0 mw-100 bg-warning bg-opacity-25">
<div class="col-xs-12 col-md-6 ms-0 o_setting_box">
<div class="o_setting_right_pane border-start-0 ms-0 ps-0">
<div class="content-group">
@@ -75,7 +74,7 @@
</div>
<div class="row mt8">
<label class="col-lg-3" string="Favicon" for="favicon"/>
<field name="favicon" widget="image" class="float-start oe_avatar"/>
<field name="favicon" widget="image" class="float-start oe_avatar bg-view"/>
</div>
</div>
</div>
addons/website/views/website_views.xml
+2 -2
View File
@@ -29,7 +29,7 @@
<group name="domain">
<field name="name"/>
<field name="domain"/>
<field name="logo" widget="image" class="oe_avatar float-start"/>
<field name="logo" widget="image" class="oe_avatar w-auto float-start"/>
<field name="language_count" invisible="1"/>
<field name="company_id" options="{'no_open': True, 'no_create': True}" groups="base.group_multi_company"/>
<field name="language_ids" widget="many2many_tags" options="{'no_open': True, 'no_create': True}"/>
@@ -319,7 +319,7 @@
<t t-set="has_screenshot" t-value="record.image_ids.raw_value.length > 1"/>
<t t-set="image_url" t-value="has_image ? '/web/image/' + record.image_ids.raw_value[0] : record.icon.value"/>
<div class="o_theme_preview_top bg-white mb4">
<div class="o_theme_preview_top bg-white mb4 border">
<div t-attf-class="bg-gray-lighter #{has_screenshot? 'o_theme_screenshot' : (has_image ? 'o_theme_cover' : 'o_theme_logo')}" t-attf-style="background-image: url(#{image_url});"/>
<div t-if="record.is_installed_on_current_website.raw_value" class="o_button_area">
<button type="object" name="button_refresh_theme" class="btn btn-primary">Update theme</button>