Skip to content

Commit

Permalink
feat: Add RTL support to toolbar (#7871)
Browse files Browse the repository at this point in the history 
* feat: Add RTL support to toolbar

* fix: Add logical text-align value for toolbar dropdown

* fix: Correctly calculate available width of toolbar

* fix: Fix weird floating bug with toolbar more buttons
  • Loading branch information
@sakhawy
sakhawy committed Apr 15, 2024
1 parent c600897 commit 92a1086
Show file tree
Hide file tree
Showing 4 changed files with 59 additions and 37 deletions.
2 changes: 1 addition & 1 deletion cms/static/cms/js/modules/cms.navigation.js
View file
Expand Up @@ -129,7 +129,7 @@ class Navigation {
*/
_calculateAvailableWidth() {
var fullWidth = this.ui.window.width();
var reduce = parseInt(this.ui.toolbarRightPart.css('padding-right'), 10) + this.ui.logo.outerWidth(true);
var reduce = parseInt(this.ui.toolbarRightPart.css('padding-inline-end'), 10) + this.ui.logo.outerWidth(true);

return fullWidth - reduce;
}
Expand Down
2 changes: 1 addition & 1 deletion cms/static/cms/sass/components/_reset.scss
View file
Expand Up @@ -21,7 +21,7 @@
h3 {
color: var(--dca-black);
font: normal #{$font-size-normal}/#{$line-height-normal} Helvetica,Arial,sans-serif;
text-align: left;
text-align: start;
text-decoration: none;
box-sizing: border-box;
height: auto;
Expand Down
90 changes: 56 additions & 34 deletions cms/static/cms/sass/components/_toolbar.scss
View file
Expand Up @@ -25,40 +25,44 @@
clip: rect(0, auto, 10px, 0);
background: $toolbar-border !important;
@at-root .cms-structure-mode-structure & {
right: $toolbar-height - 1px;
inset-inline-end: $toolbar-height - 1px;
}
}

.cms-toolbar-left {
position: absolute;
left: 0;
inset-inline-start: 0;
top: 0;
z-index: z(toolbar, left);
z-index: z(toolbar, inset-inline-start);
}
.cms-toolbar-right {
position: absolute;
right: 0;
inset-inline-end: 0;
top: 0;
z-index: z(toolbar, right);
padding-right: $toolbar-height;
z-index: z(toolbar, inset-inline-end);
padding-inline-end:$toolbar-height;
}

.cms-toolbar-left .cms-toolbar-item {
margin-right: $toolbar-left-space;
margin-inline-end: $toolbar-left-space;
&:last-child {
margin-right: 0;
margin-inline-end: 0;
}
}
.cms-toolbar-right .cms-toolbar-item {
margin-right: $toolbar-right-space;
margin-inline-end: $toolbar-right-space;
}

// items
.cms-toolbar-item {
float: left;
[dir=rtl] & {
float: right;
}
}
}


@at-root .cms-toolbar-non-sticky {
position: static !important;
.cms .cms-toolbar {
Expand Down Expand Up @@ -103,9 +107,15 @@
li {
position: relative;
float: left;
[dir=rtl] & {
float: right;
}
}
li a {
float: left;
[dir=rtl] & {
float: right;
}
color: $toolbar-menu-item-color;
padding: $toolbar-menu-item-padding;
line-height: $toolbar-height;
Expand All @@ -122,7 +132,7 @@
display: none;
position: absolute;
top: 50%;
right: 7px;
inset-inline-end: 7px;
margin-top: math.div(-$toolbar-dropdown-item-icon-size, 2);
font-size: $toolbar-dropdown-item-icon-size;
transform: rotate(180deg);
Expand All @@ -134,7 +144,7 @@
display: block;
position: absolute;
top: $toolbar-height;
left: 0;
inset-inline-start: 0;
min-width: $toolbar-dropdown-min-width;
padding: $toolbar-dropdown-padding;
border: 1px solid $white;
Expand Down Expand Up @@ -165,7 +175,7 @@
ul {
display: none;
top: -(nth($toolbar-dropdown-padding, 1) + 1px);
left: 100%;
inset-inline-start: 100%;
}
> a {
cursor: default;
Expand Down Expand Up @@ -227,13 +237,22 @@

.cms-toolbar-item {
float: none;
[dir=rtl] & {
// a bit weird, but if removed, it will best match
// with [dir="rtl"] div.cms .cms-toolbar .cms-toolbar-item
// and will float to the right
float: none;
}
margin: $toolbar-menu-item-padding !important;
overflow: hidden;
margin-top: 5px;
margin-bottom: 8px;
}
.cms-toolbar-item-cms-mode-switcher a {
float: left !important;
[dir=rtl] & {
float: right !important;
}
width: 50%;
}
.cms-toolbar-item-buttons {
Expand Down Expand Up @@ -295,27 +314,24 @@
border: none;
box-shadow: none;
position: relative;
left: 0;
inset-inline-start: 0;
top: 0;
border-radius: 0;
margin-left: 20px;
margin-inline-start:20px;
}
}
.cms-toolbar-item-cms-mode-switcher {
// display: none;
position: absolute;
right: 0;
top: 0;
position: absolute;
right: 0;
inset-inline-end: 0;
top: 0;
width: $toolbar-height;
height: $toolbar-height;
margin-right: 0 !important;
margin-inline-end:0 !important;

.cms-btn {
position: absolute;
right: 0;
inset-inline-end: 0;
top: 0;
border-top: 0 !important;
border-right: 0 !important;
Expand All @@ -327,9 +343,9 @@
clip: rect(0, $toolbar-height, $toolbar-height, 0px);
.cms-icon {
position: absolute;
left: math.div($toolbar-height, 2);
inset-inline-start: math.div($toolbar-height, 2);
top: math.div($toolbar-height, 2);
margin-left: -10px;
margin-inline-start:-10px;
margin-top: -9px;
font-size: 20px !important;
}
Expand Down Expand Up @@ -395,10 +411,13 @@
cursor: pointer;
display: none;
float: right;
[dir=rtl] & {
float: left;
}
position: relative;
width: $messages-close-area-size;
height: $messages-line-height;
text-align: right;
text-align: end;
span {
font-size: $messages-close-icon-size;
}
Expand All @@ -414,7 +433,7 @@
//###########################################################
// #TOOLBAR/elements/logo#
.cms-toolbar-item-logo {
margin-right: 0 !important;
margin-inline-end:0 !important;

a {
@extend .cms-icon;
Expand All @@ -424,8 +443,8 @@
line-height: $toolbar-height;
height: $toolbar-height;
transition: color $speed-base;
padding-left: $toolbar-left-space;
padding-right: $toolbar-left-space;
padding-inline-start:$toolbar-left-space;
padding-inline-end:$toolbar-left-space;

span {
display: none;
Expand All @@ -445,7 +464,7 @@
display: inline-block;
vertical-align: middle;
line-height: $toolbar-height;
padding-left: $toolbar-left-space;
padding-inline-start:$toolbar-left-space;
margin: 0;
cursor: pointer;
}
Expand Down Expand Up @@ -494,7 +513,7 @@

// overlap with logo when it gets too small
@media (max-width: $screen-tablet - 280px) {
margin-left: -110px;
margin-inline-start:-110px;
}
// mobile only
@media (max-width: $screen-tablet) {
Expand All @@ -506,12 +525,12 @@
label {
position: relative;
padding: 0;
margin-right: -1px;
margin-inline-end:-1px;
margin-bottom: -1px;
}
label span {
position: absolute;
left: 5px;
inset-inline-start: 5px;
top: 0;
z-index: 1;
color: $gray-light;
Expand Down Expand Up @@ -547,6 +566,9 @@

a {
float: left;
[dir=rtl] & {
float: right;
}
line-height: $toolbar-button-height;
height: $toolbar-button-height;
font-size: $toolbar-button-font-size;
Expand All @@ -556,7 +578,7 @@
border-radius: $toolbar-button-border-radius 0 0 $toolbar-button-border-radius;
}
a:last-child {
margin-left: -1px;
margin-inline-start:-1px;
border-radius: 0 $toolbar-button-border-radius $toolbar-button-border-radius 0;
}
a:only-child {
Expand All @@ -570,7 +592,7 @@
.cms-screenblock {
position: fixed;
top: 0;
right: 0;
inset-inline-end: 0;
z-index: z(screenblock);
color: $screenblock-color;
text-align: center;
Expand Down Expand Up @@ -612,7 +634,7 @@
position: fixed;
z-index: 99999999;
top: 0;
left: 0;
inset-inline-start: 0;

width: 100%;
height: 3px;
Expand All @@ -621,7 +643,7 @@
.cms-loading-peg {
display: block;
position: absolute;
right: 0px;
inset-inline-end: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #29d, 0 0 5px $color-primary;
Expand Down
2 changes: 1 addition & 1 deletion cms/templates/cms/toolbar/toolbar.html
View file
Expand Up @@ -4,7 +4,7 @@
class="cms cms-reset
{% if not user.is_authenticated %} cms-toolbar-auth{% endif %}
{% if debug %} cms-toolbar-debug{% endif %}"
dir="ltr" data-touch-action="none">
data-touch-action="none">

{% block toolbar_top %}
{% endblock toolbar_top %}
Expand Down

0 comments on commit 92a1086

Please sign in to comment.