[IMP] web: widget ribbon scss revamp #99336
Conversation
|
|
morm-odoo
force-pushed
the
master-web-widget-ribbon-scss-revamp-morm
branch
from
33a0790
to
c3087da
Compare
| text-transform: uppercase; | ||
| text-align: center; | ||
| overflow: hidden; | ||
| user-select: none; | ||
| &.o_small { | ||
| font-size: 12px; |
There was a problem hiding this comment.
small class or <small> tag ?
There was a problem hiding this comment.
Those classes are added via JS
There was a problem hiding this comment.
Yes. Is it a problem?
| z-index: 1; | ||
| position: absolute; | ||
| display: grid; | ||
| align-items: center; | ||
| width: 225px; | ||
| height: 48px; |
There was a problem hiding this comment.
These width/height values look arbitrary :/
Can we use a different approach?
| @@ -1,8 +1,6 @@ | |||
| .ribbon { | |||
| width: 150px; | |||
| height: 150px; | |||
There was a problem hiding this comment.
Arbitrary values... why exactly 150px?
Can't we, for example, let the browser compute these dimensions based on the content?
If it's not possible can we use variables instead?
There was a problem hiding this comment.
We can't change those value dynamically without affecting the border of the ribbon, so I added a scss variable file
morm-odoo
force-pushed
the
master-web-widget-ribbon-scss-revamp-morm
branch
from
c3087da
to
021e759
Compare
| @@ -38,11 +23,10 @@ | |||
|
|
|||
| &-top-right { | |||
There was a problem hiding this comment.
This class seems redundant since it's added to the main container by default.
Could you traceback the history of the class and check if it's really needed?
| @@ -38,11 +23,10 @@ | |||
|
|
|||
| &-top-right { | |||
| margin-top: -$o-sheet-vpadding; | |||
There was a problem hiding this comment.
The component is supposed to be rendered also outside formView's...
does this value works for other views too? I would be surprised.
Investigate this, eventually I propose to use css variables, something like:
| margin-top: -$o-sheet-vpadding; | |
| margin-top: var(--ribbon-margin-top, #{-$o-sheet-vpadding}); | |
| . o_kanban_record & { | |
| --ribbon-margin-top: #{$o-kanban-inside-vgutter}; | |
| } |
| @@ -13,21 +11,8 @@ | |||
| } | |||
There was a problem hiding this comment.
border: 5px solid #2980b9;
why 🥺
| @@ -63,12 +47,3 @@ | |||
| } | |||
There was a problem hiding this comment.
& span {
left: -15px;
top: 30px;
[...]
}These left and top values... 30px, -15px... can we replace them with something less arbitrary ?
morm-odoo
force-pushed
the
master-web-widget-ribbon-scss-revamp-morm
branch
2 times, most recently
from
b60d111
to
18bd271
Compare
|
@stefanorigano can you check if you agree with my new version of the ribbon? :) |
Prior to this commit, there was unnecessary scss for the ribbon widget. A lot of template are not converted to owl yet, so we added the scss to the legacy ui.scss file, and it has to be removed after the migration to owl. task-2968399
Prior to this commit, some scss related to the status (state selection component) was not at the right place
Prior to this commit, the scss related to the status (state selection component) was not optimal.
This commit add a scss variable file for the ribbon widget.
Prior to this commit, there was unnecessary scss for the ribbon widget. The same design is possible to get with a simpler css.
morm-odoo
force-pushed
the
master-web-widget-ribbon-scss-revamp-morm
branch
from
18bd271
to
791cb82
Compare
Prior to this PR, there was unnecessary scss for the ribbon widget.
A lot of template are not converted to owl yet, so we added the ribbon scss to the legacy ui.scss file, and it has to be removed after the migration to owl is complete.
task-2968399