From f9cbcccdfea939f5707c7b3372f926244a7c189d Mon Sep 17 00:00:00 2001 From: Antoine Guenet Date: Fri, 22 Jul 2022 09:55:24 +0000 Subject: [PATCH] [REF] web_editor: convert editor styles to scss Odoo Editor's styles were defined in CSS when it was all still part of a separate repository. They can now be converted to SCSS, which will allow us to use Odoo's SCSS variables in the future, and allows us now to refactor the styles in the more readable SCSS format. Part-of: odoo/odoo#96287 --- addons/web_editor/__manifest__.py | 8 +- .../src/{base_style.css => base_style.scss} | 0 .../js/editor/odoo-editor/src/checklist.css | 24 -- .../js/editor/odoo-editor/src/checklist.scss | 27 ++ .../src/js/editor/odoo-editor/src/style.css | 324 ------------------ .../src/js/editor/odoo-editor/src/style.scss | 316 +++++++++++++++++ .../editor/odoo-editor/test/editor-test.html | 2 - addons/web_editor/views/editor.xml | 3 +- 8 files changed, 350 insertions(+), 354 deletions(-) rename addons/web_editor/static/src/js/editor/odoo-editor/src/{base_style.css => base_style.scss} (100%) delete mode 100644 addons/web_editor/static/src/js/editor/odoo-editor/src/checklist.css create mode 100644 addons/web_editor/static/src/js/editor/odoo-editor/src/checklist.scss delete mode 100644 addons/web_editor/static/src/js/editor/odoo-editor/src/style.css create mode 100644 addons/web_editor/static/src/js/editor/odoo-editor/src/style.scss diff --git a/addons/web_editor/__manifest__.py b/addons/web_editor/__manifest__.py index de91b072837..e0a1ca669ef 100644 --- a/addons/web_editor/__manifest__.py +++ b/addons/web_editor/__manifest__.py @@ -38,7 +38,6 @@ Odoo Web Editor widget. 'web_editor/static/lib/DOMPurify.js', # odoo-editor - 'web_editor/static/src/js/editor/odoo-editor/src/style.css', 'web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js', 'web_editor/static/src/js/editor/odoo-editor/src/utils/constants.js', 'web_editor/static/src/js/editor/odoo-editor/src/utils/sanitize.js', @@ -66,6 +65,7 @@ Odoo Web Editor widget. 'web_editor/static/src/scss/bootstrap_overridden.scss', 'web/static/src/libs/bootstrap/pre_variables.scss', 'web/static/lib/bootstrap/scss/_variables.scss', + 'web_editor/static/src/js/editor/odoo-editor/src/style.scss', # integration 'web_editor/static/src/scss/wysiwyg.scss', @@ -98,8 +98,12 @@ Odoo Web Editor widget. 'web_editor/static/src/components/upload_progress_toast/*.js', 'web_editor/static/src/components/upload_progress_toast/*.scss', ], + 'web_editor.assets_tests_styles': [ + 'web_editor/static/src/js/editor/odoo-editor/src/base_style.scss', + 'web_editor/static/src/js/editor/odoo-editor/src/checklist.scss', + ], 'web.assets_common': [ - 'web_editor/static/src/js/editor/odoo-editor/src/base_style.css', + 'web_editor/static/src/js/editor/odoo-editor/src/base_style.scss', 'web_editor/static/lib/vkbeautify/**/*', 'web_editor/static/src/js/common/**/*', 'web_editor/static/src/js/editor/odoo-editor/src/utils/utils.js', diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/base_style.css b/addons/web_editor/static/src/js/editor/odoo-editor/src/base_style.scss similarity index 100% rename from addons/web_editor/static/src/js/editor/odoo-editor/src/base_style.css rename to addons/web_editor/static/src/js/editor/odoo-editor/src/base_style.scss diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/checklist.css b/addons/web_editor/static/src/js/editor/odoo-editor/src/checklist.css deleted file mode 100644 index 758fcc4f2cd..00000000000 --- a/addons/web_editor/static/src/js/editor/odoo-editor/src/checklist.css +++ /dev/null @@ -1,24 +0,0 @@ -ul.o_checklist > li { - list-style: none; - position: relative; - margin-left: 20px; -} -ul.o_checklist > li:not(.oe-nested):before { - content: ''; - position: absolute; - left: -20px; - display: block; - height: 14px; - width: 14px; - top: 1px; - border: 1px solid; - cursor: pointer; -} -ul.o_checklist > li.o_checked:after { - content: "✓"; - transition: opacity .5s; - position: absolute; - left: -18px; - top: -1px; - opacity: 1; -} diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/checklist.scss b/addons/web_editor/static/src/js/editor/odoo-editor/src/checklist.scss new file mode 100644 index 00000000000..1369b780b58 --- /dev/null +++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/checklist.scss @@ -0,0 +1,27 @@ +ul.o_checklist { + > li { + list-style: none; + position: relative; + margin-left: 20px; + + &:not(.oe-nested):before { + content: ''; + position: absolute; + left: -20px; + display: block; + height: 14px; + width: 14px; + top: 1px; + border: 1px solid; + cursor: pointer; + } + &.o_checked:after { + content: "✓"; + transition: opacity .5s; + position: absolute; + left: -18px; + top: -1px; + opacity: 1; + } + } +} diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/style.css b/addons/web_editor/static/src/js/editor/odoo-editor/src/style.css deleted file mode 100644 index 07452150734..00000000000 --- a/addons/web_editor/static/src/js/editor/odoo-editor/src/style.css +++ /dev/null @@ -1,324 +0,0 @@ -.oe-floating { - box-shadow: 0px 3px 18px rgba(0, 0, 0, .23); - border-radius: 4px; - position: absolute; -} - -/* toolbar styling */ - -.oe-toolbar { - box-sizing: border-box; - position: absolute; - visibility: hidden; - height: fit-content; - width: fit-content; - padding-left: 5px; - padding-right: 5px; - background: #222222; - color: white; - border-radius: 8px; -} -.oe-toolbar.toolbar-bottom::before { - content: ''; - position: absolute; - width: 0; - height: 0; - left: var(--arrow-left-pos); - top: var(--arrow-top-pos); - border: transparent 10px solid; - border-bottom: #222222 10px solid; - z-index: 0; -} -.oe-toolbar:not(.toolbar-bottom)::before { - content: ''; - position: absolute; - width: 0; - height: 0; - left: var(--arrow-left-pos); - top: var(--arrow-top-pos); - border: transparent 10px solid; - border-top: #222222 10px solid; - z-index: 0; - pointer-events: none; -} -.oe-toolbar .button-group { - display: inline-block; - margin-right: 13px; -} -.oe-toolbar .button-group:last-of-type { - margin-right: 0; -} -.oe-toolbar .btn { - position: relative; - box-sizing: content-box; - display: inline-block; - padding: 7px; - color: white; -} -.oe-toolbar .btn:not(.disabled):hover { - background: #868686; -} -.oe-toolbar .dropdown-menu .btn { - background: #222222; -} -.oe-toolbar .btn.active { - background: #555555; -} -.oe-tablepicker-dropdown .oe-tablepicker { - margin: -3px 2px -6px 2px; -} -.oe-tablepicker { - width: max-content; - width: -webkit-max-content; -} -.oe-tablepicker-wrapper.oe-floating { - padding: 3px; - z-index: 1051; - background: white; -} -.oe-tablepicker-row { - line-height: 0; -} -.oe-tablepicker .oe-tablepicker-row .oe-tablepicker-cell { - display: inline-block; - background: #EFEFEE; - width: 19px; - height: 19px; - padding: 0; - margin-right: 3px; - margin-bottom: 3px; -} -.oe-tablepicker .oe-tablepicker-row .oe-tablepicker-cell:last-of-type { - margin-right: 0; -} -.oe-tablepicker .oe-tablepicker-row .oe-tablepicker-cell.active { - background: #d3d1cb; -} -.oe-tablepicker-size { - text-align: center; - margin-top: 7px; -} -.oe-tablepicker-dropdown .oe-tablepicker-size { - color: white; -} -.oe-toolbar .dropdown-toggle { - background: transparent; - border: none; - padding: 7px; -} -.oe-toolbar .dropdown-toggle[aria-expanded="true"] { - background: #555555; -} -.oe-toolbar .dropdown-menu { - background: #222222; - min-width: max-content; - min-width: -webkit-max-content; - text-align: center; -} -.oe-toolbar .dropdown-item { - background: transparent; - color: white; -} -.oe-toolbar .dropdown-item pre, -.oe-toolbar .dropdown-item h1, -.oe-toolbar .dropdown-item h2, -.oe-toolbar .dropdown-item h3, -.oe-toolbar .dropdown-item h4, -.oe-toolbar .dropdown-item h5, -.oe-toolbar .dropdown-item h6, -.oe-toolbar .dropdown-item blockquote { - margin: 0; - color: white; -} -.oe-toolbar li > a.dropdown-item { - color: white; -} -.oe-toolbar .dropdown-item:hover, .oe-toolbar .dropdown-item:focus { - color: white; - background: #868686; -} -.oe-toolbar .dropdown-item.active, .oe-toolbar .dropdown-item:active { - color: white; - background: #555555; -} - -.oe-toolbar label { - display: inline-block; -} - -.oe-toolbar label span { - display: inline-block; -} - -.oe-toolbar input[type="color"] { - width: 0; - height: 0; - padding: 0; - border: none; - box-sizing: border-box; - position: absolute; - opacity: 0; - top: 100%; - margin: 2px 0 0; -} - -.oe-toolbar #colorInputButtonGroup label { - margin-bottom: 0; -} -.oe-toolbar .color-indicator { - background-color: transparent; - padding-bottom: 4px; -} -.oe-toolbar .color-indicator.fore-color { - border-bottom: 2px solid var(--fore-color); - padding: 5px; -} -.oe-toolbar .color-indicator.hilite-color { - border-bottom: 2px solid var(--hilite-color); - padding: 5px; -} -.oe-toolbar #style .dropdown-menu { - text-align: left; -} -@media only screen and (max-width: 767px) { - .oe-toolbar { - position: relative; - visibility: visible; - width: 100%; - border-radius: 0; - background-color: white; - } - .oe-toolbar .btn { - color: black; - } -} -/* Content styling */ - -.oe-powerbox-wrapper { - position: absolute; - z-index: 1051; - border: black; - background-color: white; - max-height: 40vh; - box-sizing: border-box; - max-width: 100%; - box-shadow: 0px 3px 18px rgba(0, 0, 0, .23); - border-radius: 4px; - overflow: hidden; - display: flex; -} -.oe-powerbox-mainWrapper { - flex: 1 1 auto; - overflow: auto; - padding: 5px 0; - overscroll-behavior: contain; -} - -.oe-powerbox-category, .oe-powerbox-noResult { - margin: 10px; - color: rgba(0, 0, 0, 0.6); - font-size: 11px; -} -.oe-powerbox-category { - text-transform: uppercase; - margin: 5px 12px; -} -.oe-powerbox-noResult { - display: none; -} - -.oe-powerbox-commandWrapper { - display: flex; - padding: 6px 12px; - cursor: pointer; -} - -.oe-powerbox-commandWrapper.active { - background: #EFEFEE; -} - -i.oe-powerbox-commandImg { - display: flex; - height: 30px; - width: 30px; - align-items: center; - justify-content: center; - background: white; - color: rgba(0, 0, 0, 0.6); - border: 1px solid rgba(0, 0, 0, 0.1); - border-radius: 7px; - font-size: 15px; -} - -.oe-powerbox-commandName { - font-size: 13px; -} - -.oe-powerbox-commandDescription { - color: rgba(0, 0, 0, 0.5); - font-size: 12px; -} - -.oe-powerbox-commandRightCol { - margin: 0 10px; -} - -.oe-powerbox-wrapper ::-webkit-scrollbar { - background: transparent; -} -.oe-powerbox-wrapper ::-webkit-scrollbar { - width: 10px; - height: 10px; -} -.oe-powerbox-wrapper ::-webkit-scrollbar-thumb { - background: #D3D1CB; -} -.oe-powerbox-wrapper ::-webkit-scrollbar-track { - background: #EDECE9; -} - -/* Command hints */ - -.oe-hint { - position: relative; - caret-color: rgb(55, 53, 47); -} -.oe-hint:before { - content: attr(placeholder); - position: absolute; - top: 0; - left: 0; - display: block; - color: inherit; - opacity: 0.4; - pointer-events: none; - text-align: inherit; - width: 100%; -} - -/* Collaboration cursor */ -.oe-collaboration-selections-container { - position: absolute; - isolation: isolate; - height: 0; - width: 0; - z-index: 1; -} -.oe-collaboration-caret-top-square { - min-height: 5px; - min-width: 5px; - color: #fff; - text-shadow: 0 0 5px #000; - position: absolute; - bottom: 100%; - left: -4px; - white-space: nowrap; -} - -.oe-collaboration-caret-top-square:hover::before { - content: attr(data-client-name); -} -.oe-collaboration-caret-top-square:hover { - border-radius: 2px; - padding: 0.3em 0.6em; -} diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/style.scss b/addons/web_editor/static/src/js/editor/odoo-editor/src/style.scss new file mode 100644 index 00000000000..d9d4406fa6d --- /dev/null +++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/style.scss @@ -0,0 +1,316 @@ +.oe-floating { + box-shadow: 0px 3px 18px rgba(0, 0, 0, .23); + border-radius: 4px; + position: absolute; +} + +/* toolbar styling */ + +.oe-toolbar { + box-sizing: border-box; + position: absolute; + visibility: hidden; + height: fit-content; + width: fit-content; + padding-left: 5px; + padding-right: 5px; + background: #222222; + color: white; + border-radius: 8px; + + .toolbar-bottom::before { + content: ''; + position: absolute; + width: 0; + height: 0; + left: var(--arrow-left-pos); + top: var(--arrow-top-pos); + border: transparent 10px solid; + border-bottom: #222222 10px solid; + z-index: 0; + } + &:not(.toolbar-bottom)::before { + content: ''; + position: absolute; + width: 0; + height: 0; + left: var(--arrow-left-pos); + top: var(--arrow-top-pos); + border: transparent 10px solid; + border-top: #222222 10px solid; + z-index: 0; + pointer-events: none; + } + .button-group { + display: inline-block; + margin-right: 13px; + } + .button-group:last-of-type { + margin-right: 0; + } + .btn { + position: relative; + box-sizing: content-box; + display: inline-block; + padding: 7px; + color: white; + } + .btn:not(.disabled):hover { + background: #868686; + } + .oe-toolbar .dropdown-menu .btn { + background: #222222; + } + .btn.active { + background: #555555; + } + .dropdown-toggle { + background: transparent; + border: none; + padding: 7px; + + &[aria-expanded="true"] { + background: #555555; + } + } + .dropdown-menu { + background: #222222; + min-width: max-content; + min-width: -webkit-max-content; + text-align: center; + } + .dropdown-item { + background: transparent; + color: white; + + pre, h1, h2, h3, h4, h5, h6, blockquote { + margin: 0; + color: white; + } + &:hover, &:focus { + color: white; + background: #868686; + } + &.active, &:active { + color: white; + background: #555555; + } + } + li > a.dropdown-item { + color: white; + } + label, label span { + display: inline-block; + } + input[type="color"] { + width: 0; + height: 0; + padding: 0; + border: none; + box-sizing: border-box; + position: absolute; + opacity: 0; + top: 100%; + margin: 2px 0 0; + } + #colorInputButtonGroup label { + margin-bottom: 0; + } + .color-indicator { + background-color: transparent; + padding-bottom: 4px; + + &.fore-color { + border-bottom: 2px solid var(--fore-color); + padding: 5px; + } + &.hilite-color { + border-bottom: 2px solid var(--hilite-color); + padding: 5px; + } + } + #style .dropdown-menu { + text-align: left; + } +} + +.oe-tablepicker-dropdown .oe-tablepicker { + margin: -3px 2px -6px 2px; +} +.oe-tablepicker-wrapper.oe-floating { + padding: 3px; + z-index: 1051; + background: white; +} +.oe-tablepicker-row { + line-height: 0; +} +.oe-tablepicker { + width: max-content; + width: -webkit-max-content; + + .oe-tablepicker-row .oe-tablepicker-cell { + display: inline-block; + background: #EFEFEE; + width: 19px; + height: 19px; + padding: 0; + margin-right: 3px; + margin-bottom: 3px; + + &:last-of-type { + margin-right: 0; + } + &.active { + background: #d3d1cb; + } + } +} +.oe-tablepicker-size { + text-align: center; + margin-top: 7px; +} +.oe-tablepicker-dropdown .oe-tablepicker-size { + color: white; +} +@media only screen and (max-width: 767px) { + .oe-toolbar { + position: relative; + visibility: visible; + width: 100%; + border-radius: 0; + background-color: white; + + .btn { + color: black; + } + } +} + +/* Content styling */ + +.oe-powerbox-wrapper { + position: absolute; + z-index: 1051; + border: black; + background-color: white; + max-height: 40vh; + box-sizing: border-box; + max-width: 100%; + box-shadow: 0px 3px 18px rgba(0, 0, 0, .23); + border-radius: 4px; + overflow: hidden; + display: flex; + + ::-webkit-scrollbar { + background: transparent; + } + ::-webkit-scrollbar { + width: 10px; + height: 10px; + } + ::-webkit-scrollbar-thumb { + background: #D3D1CB; + } + ::-webkit-scrollbar-track { + background: #EDECE9; + } +} +.oe-powerbox-mainWrapper { + flex: 1 1 auto; + overflow: auto; + padding: 5px 0; + overscroll-behavior: contain; +} + +.oe-powerbox-category, .oe-powerbox-noResult { + margin: 10px; + color: rgba(0, 0, 0, 0.6); + font-size: 11px; +} +.oe-powerbox-category { + text-transform: uppercase; + margin: 5px 12px; +} +.oe-powerbox-noResult { + display: none; +} +.oe-powerbox-commandWrapper { + display: flex; + padding: 6px 12px; + cursor: pointer; + + &.active { + background: #EFEFEE; + } +} +i.oe-powerbox-commandImg { + display: flex; + height: 30px; + width: 30px; + align-items: center; + justify-content: center; + background: white; + color: rgba(0, 0, 0, 0.6); + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 7px; + font-size: 15px; +} +.oe-powerbox-commandName { + font-size: 13px; +} +.oe-powerbox-commandDescription { + color: rgba(0, 0, 0, 0.5); + font-size: 12px; +} +.oe-powerbox-commandRightCol { + margin: 0 10px; +} + +/* Command hints */ + +.oe-hint { + position: relative; + caret-color: rgb(55, 53, 47); + + &:before { + content: attr(placeholder); + position: absolute; + top: 0; + left: 0; + display: block; + color: inherit; + opacity: 0.4; + pointer-events: none; + text-align: inherit; + width: 100%; + } +} + +/* Collaboration cursor */ +.oe-collaboration-selections-container { + position: absolute; + isolation: isolate; + height: 0; + width: 0; + z-index: 1; +} +.oe-collaboration-caret-top-square { + min-height: 5px; + min-width: 5px; + color: #fff; + text-shadow: 0 0 5px #000; + position: absolute; + bottom: 100%; + left: -4px; + white-space: nowrap; + + &:hover { + border-radius: 2px; + padding: 0.3em 0.6em; + + &::before { + content: attr(data-client-name); + } + } +} diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/test/editor-test.html b/addons/web_editor/static/src/js/editor/odoo-editor/test/editor-test.html index eecd500375e..c3e7b0cea36 100644 --- a/addons/web_editor/static/src/js/editor/odoo-editor/test/editor-test.html +++ b/addons/web_editor/static/src/js/editor/odoo-editor/test/editor-test.html @@ -7,8 +7,6 @@ Odoo Editor tests - -