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

[IMP] website: redesign the toggle switch

Browse Source 
This commit redesigns the toggle switch in website to make it clearer
and prettier.

task-2586313

closes odoo/odoo#77392

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
Benjamin Vray
2021-11-29 15:40:50 +00:00
parent 0aa9925caf
commit e717ccd353
2 changed files with 26 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/scss/website.editor.ui.scss
+25 -27
View File
@@ -6,8 +6,8 @@
}
// INPUTS
$o-we-switch-size: 2ex !default;
$o-we-switch-inactive-color: #F7F7F7 !default;
$o-we-switch-size: 1.2em !default;
$o-we-switch-inactive-color: rgba($text-muted, 0.4) !default;
.o_switch {
display: flex;
align-items: center;
@@ -18,45 +18,43 @@ $o-we-switch-inactive-color: #F7F7F7 !default;
display: none;
+ span {
background-color: $o-we-switch-inactive-color;
box-shadow: inset 0 0 0px 1px darken($o-we-switch-inactive-color, 10%);
border-radius: 100rem;
height: $o-we-switch-size;
width: $o-we-switch-size * 1.8;
margin-right: 0.5em;
display: inline-block;
transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
border-radius: $o-we-switch-size;
width: $o-we-switch-size * 1.7;
padding-left: 3px;
padding-right: 3px;
background-color: $o-we-switch-inactive-color;
font-size: $o-we-switch-size * 1.09;
line-height: $o-we-switch-size;
color: $o-we-switch-inactive-color;
transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1);
&:after {
content: "";
background: white;
display: block;
width: $o-we-switch-size - 0.2;
height: $o-we-switch-size - 0.2;
margin-top: 0.1ex;
margin-left: 0.1ex;
border-radius: 100rem;
transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
box-shadow: 0 1px 1px darken($o-we-switch-inactive-color, 35%), inset 0 0 0 1px lighten($o-we-switch-inactive-color, 10%);
content: "\f057"; // fa-times-circle
font-family: 'FontAwesome';
color: white;
transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1);
}
}
&:checked+span {
box-shadow: none;
background: $o-we-color-success;
&:checked + span {
background: $o-brand-primary;
&:after {
margin-left: ($o-we-switch-size*1.8 - $o-we-switch-size) + 0.1;
content: "\f058"; // fa-check-circle
margin-left: ($o-we-switch-size * 1.7) - $o-we-switch-size;
}
}
}
&.o_switch_danger {
>input {
&:not(:checked)+span {
box-shadow: none;
&.o_switch_danger_success {
> input {
&:not(:checked) + span {
background: $o-we-color-danger;
}
&:checked + span {
background: $o-we-color-success;
}
}
}
}
addons/website/views/website_navbar_templates.xml
+1 -1
View File
@@ -4,7 +4,7 @@
<template id="website_publisher" name="Website Publisher">
<t groups="website.group_website_publisher" t-if="'website_published' in main_object.fields_get() and ('can_publish' not in main_object.fields_get() or main_object.can_publish)">
<div t-attf-class="js_publish_management #{extra_classes} #{main_object.website_published and 'css_published' or 'css_unpublished'}" t-att-data-description="env['ir.model']._get(main_object._name).display_name" t-att-data-id="main_object.id" t-att-data-object="main_object._name" t-att-data-controller="publish_controller">
<label class="o_switch o_switch_danger js_publish_btn m-0" t-att-accesskey="desktop_navbar and 'p'">
<label class="o_switch o_switch_danger_success js_publish_btn m-0" t-att-accesskey="desktop_navbar and 'p'">
<input type="checkbox" t-att-checked="main_object.website_published"/>
<span/>
<span class="css_publish">Unpublished</span>