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

[REF] web_editor: editor UI style and stability improvements

Browse Source 
* Review style of some UI components
* Rename some content
* Define a font-family less variable to be used to avoid that themes
customizations affect the UI. Note: theme should ideally not redefine
the font family of the body but of the #wrapwrap element but this is
done for safety.
* Overwrite other theme's customisations
* Minor style fixes
This commit is contained in:
stefanorigano
2016-08-31 16:37:20 +02:00
committed by qsm-odoo
parent 4d68d779dc
commit 1634cad46c
6 changed files with 126 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/less/web_editor.ui.less
+102 -21
View File
@@ -8,7 +8,7 @@
background-color: rgba(0,0,0,0);
.o-transition(background-color, 400ms, @o-we-md-ease);
font-family: Roboto, @font-family-sans-serif;
font-family: @o-we-font-family;
form.navbar-form {
height: 100%;
@@ -28,20 +28,30 @@
height: 100%;
margin: 0;
padding: 10px;
line-height: 1;
font-weight: bold;
line-height: 1.2;
font-size: 13px;
font-family: @o-we-font-family;
.o-transition(all, 0.3s);
border: none;
border-radius: 0;
.fa {
margin-right: @grid-gutter-width/4;
&.fa-times {
color: @o-we-color-danger;
}
}
&.btn-primary {
.button-variant(white, @odoo-brand-primary, @odoo-brand-primary);
text-transform: uppercase;
}
&.btn-default {
.button-variant(white, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
text-transform: uppercase;
&:hover {
background: fade(black, 50%);
}
}
&:focus, &:active, &:focus:active {
@@ -92,8 +102,10 @@ html[lang] > body.editor_enable{
padding: 0;
background: @o-we-color-dark;
text-align: center;
font-size: 20px;
font-weight: normal;
font-size: 17px;
color: white;
font-family: @o-we-font-family;
}
#o_scroll {
@@ -286,6 +298,7 @@ html[lang] > body.editor_enable{
// OVERLAY OPTIONS
> .oe_overlay_options {
font-family: @o-we-font-family;
.o-position-absolute(@bottom: 0, @left: 0);
width: 250px; // the parent oe_overlay has a width equal to the snippet width, the 250px is there to force the options to stay on one line without overriding bootstrap .btn-group
text-align: left;
@@ -304,7 +317,7 @@ html[lang] > body.editor_enable{
line-height: @o-overlay-option-size;
font-size: 11px;
border-radius: 0;
font-weight: 600;
font-weight: normal;
.o-transition(all, 400ms);
color: @o-we-color-text-light;
@@ -312,18 +325,32 @@ html[lang] > body.editor_enable{
&:hover {
color: white;
background-color: lighten(@o-we-color-dark, 10%);
> .fa {
color: white;
}
}
&.oe_snippet_remove {
color: white;
background-color: @o-we-color-danger;
border-color: darken(@o-we-color-danger, 20%);
> .fa {
color: white;
}
&:hover {
background-color: darken(@o-we-color-danger, 20%);
}
}
&.oe_snippet_parent > i {
.scaleX(-1);
font-size: 12px;
}
> .fa {
color: @o-we-color-text-light;
}
}
@@ -383,9 +410,9 @@ html[lang] > body.editor_enable{
background-color: @o-we-color-light;
a {
color: @o-we-color-text-light;
font-weight: 600;
font-weight: normal;
font-size: 12px;
padding: 5px 20px;
padding: 5px 35px 5px 20px;
}
> li {
@@ -410,7 +437,7 @@ html[lang] > body.editor_enable{
}
&.divider {
background-color: @o-we-color-divider;
margin: 0;
margin: 0 8px;
}
&.active > a {
color: white;
@@ -423,32 +450,52 @@ html[lang] > body.editor_enable{
}
}
&.dropdown-header {
color: wheat;
color: white;
font-weight: bold;
font-size: 12px;
margin-top: 2px;
&:hover {
background-color: initial;
}
&.o_main_header {
padding-left: 4px;
padding-left: 8px;
}
&.o_parent_editor_header {
color: wheat;
font-weight: 400;
font-size: 10px;
margin: 7px 0 4px 4px;
&::before {
content: "\f148";
.o-position-absolute(@top: 0, @left: 5px);
.o-position-absolute(@top: 2px, @left: 8px);
font-family: FontAwesome;
.scaleX(-1);
}
~ li:not(.dropdown-header) {
padding-left: 16px;
a {
font-size: 11px;
padding: 4px 35px 4px 20px;
opacity: 0.8;
&:hover {
opacity: 1;
}
}
}
}
}
&.separator {
display: block;
margin: 4px 35px 4px 20px;
height: 1px;
background: fade(@o-we-color-text-light, 10%);
}
> a > i {
width: 16px;
margin-right: 4px;
margin-right: 8px;
}
}
}
@@ -679,6 +726,11 @@ html[lang] > body.editor_enable{
.popover-content {
height: @odoo-navbar-height;
white-space: nowrap;
font-family: @o-we-font-family;
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: @o-we-font-family;
}
.btn {
height: @odoo-navbar-height;
@@ -689,9 +741,18 @@ html[lang] > body.editor_enable{
color: @o-we-color-text-normal;
border-top: 2px solid transparent;
.o-transition(all, 0.3s);
> .fa {
color: @o-we-color-text-normal;
}
&:hover {
border-top: 2px solid @o-we-color-text-normal;
color: @o-we-color-text-normal;
color: @o-we-color-text-light;
> .fa {
color: @o-we-color-text-light;
}
}
.o_image_alt {
@@ -704,16 +765,26 @@ html[lang] > body.editor_enable{
background-color: @o-we-color-dark;
color: @o-we-color-text-light;
box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.5);
> .fa {
color: @o-we-color-text-light;
}
}
}
> .btn-group {
margin-top: -2px;
&.open .dropdown-toggle {
border-top: 2px solid white;
background-color: @o-we-color-darker;
color: white;
box-shadow: none;
&.open, .btn-group.open {
.dropdown-toggle {
border-top: 2px solid white;
background-color: @o-we-color-darker;
color: white;
box-shadow: none;
> .fa, > span {
color: white;
}
}
}
}
.dropdown-menu {
@@ -725,9 +796,17 @@ html[lang] > body.editor_enable{
width: 100%;
color: @o-we-color-text-light;
> .fa {
color: @o-we-color-text-light;
}
&:hover {
background-color: @o-we-tab-active-bg;
color: white;
> .fa {
color: white;
}
}
}
}
@@ -940,8 +1019,10 @@ table.colorpicker {
padding: 5px 10px 0;
.note-color-reset {
font-size: 20px!important;
color: desaturate(fade(@o-we-color-danger, 60%), 40%);
margin: 3px 0 0;
padding: 0;
cursor: pointer;
&:hover {
background: transparent!important;
color: @o-we-color-danger;
addons/web_editor/static/src/less/web_editor.variables.less
+1
View File
@@ -1,3 +1,4 @@
@o-we-font-family: Roboto, 'Montserrat', "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
@o-we-color-dark: #2c2c36;
@o-we-color-darker: darken(@o-we-color-dark, 2%);
addons/website/static/src/js/website.mobile.js
+1 -1
View File
@@ -39,7 +39,7 @@ website.TopBar.include({
var self = this;
this.$el.on('click', 'a[data-action=show-mobile-preview]', function () {
new MobilePreviewDialog(self, {
title: _t('Mobile preview') + " <span class='fa fa-repeat'/>",
title: _t('Mobile preview') + " <span class='fa fa-refresh'/>",
}).open();
});
return this._super();
addons/website/static/src/less/website.ui.components.less
+18 -1
View File
@@ -7,7 +7,11 @@ body .modal {
}
&.o_website_modal {
font-family: "Roboto", Roboto, sans-serif;
font-family: @o-we-font-family;
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: @o-we-font-family;
}
.modal-content {
border-radius: 0;
@@ -80,6 +84,7 @@ body .modal {
color: lightgray;
opacity: 1;
font-size: 25px;
font-weight: normal;
}
.modal-content {
@@ -91,6 +96,16 @@ body .modal {
.modal-header {
border: none;
cursor: pointer;
font-family: @o-we-font-family;
h4 {
font-family:inherit;
font-weight: normal;
.fa {
margin-left: @grid-gutter-width/2;
}
}
}
.modal-body {
@@ -125,6 +140,8 @@ body .modal {
// ADD NEW PAGE MODAL
&#o_website_add_page_modal {
font-family: @o-we-font-family;
&.in {
.o-flex-display()!important;
.o-justify-content(center);
addons/website/static/src/less/website.ui.less
+2 -7
View File
@@ -10,7 +10,7 @@ body.o_connected_user {
position: fixed;
z-index: 1001;
font-family: Roboto, @font-family-sans-serif;
font-family: @o-we-font-family;
font-size: @odoo-font-size-base;
a:hover, a:focus {
text-decoration: none;
@@ -25,12 +25,7 @@ body.o_connected_user {
padding: 0 @grid-gutter-width/2;
&[data-action="edit"], &[data-action="translate"] {
background-color: @odoo-brand-optional;
outline: 1px solid @odoo-brand-optional;
&:hover, &:focus {
background-color: darken(@odoo-brand-optional, 10%);
outline-color: darken(@odoo-brand-optional, 10%);
}
.button-variant(white, @odoo-brand-optional, @odoo-brand-optional);
@media (max-width: @screen-xs-max) {
&, &:hover, &:focus {
addons/website/views/snippets.xml
+2 -2
View File
@@ -645,7 +645,7 @@
<div id="snippet_content" class="o_panel">
<div class="o_panel_header">
<i class="fa fa-indent"/> Content
<i class="fa fa-indent"/> Inner content
</div>
<div class="o_panel_body">
<t t-snippet="website.s_well" t-thumbnail="/website/static/src/img/blocks/block_well.png"/>
@@ -658,7 +658,7 @@
<div id="snippet_feature" class="o_panel">
<div class="o_panel_header">
<i class="fa fa-check-square"/> Feature
<i class="fa fa-diamond"/> Feature
</div>
<div class="o_panel_body">
<t t-snippet="website.s_image_gallery" t-thumbnail="/website/static/src/img/blocks/block_image_gallery.png"/>