Skip to content

fix: Set toolbar direction based on toolbar language #7902

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 27 commits into from
May 12, 2024
Merged

fix: Set toolbar direction based on toolbar language #7902

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
61e4cef
Fix: Set toolbar direction based on toolbar language
fsbraun May 2, 2024
bc52f94
Fix: Modal buttons did not respect `dir` attribute
fsbraun May 2, 2024
4a0138e
Add RTL patch for older browsers, e.g., Chrome < 120
fsbraun May 2, 2024
7d087d8
Fix: typos
fsbraun May 2, 2024
fa2d541
Revert changes to assets
fsbraun May 2, 2024
dfb54d4
remove newline at end: Update cms.pagetree.css
fsbraun May 2, 2024
7f43c3d
Update cms.base.css
fsbraun May 2, 2024
627694c
Undo changes to assets
fsbraun May 2, 2024
f769f45
Merge branch 'fix/toolbar-language-rtl' of github.com:fsbraun/django-…
fsbraun May 2, 2024
0089a5e
No float on mobile
fsbraun May 2, 2024
444c2a0
Comlete polyfill
fsbraun May 2, 2024
73b1e88
fix: Adjust resize handle and resize js routine
fsbraun May 2, 2024
1c535b4
fix eslint error
fsbraun May 2, 2024
0b53ff2
Merge branch 'develop-4' into fix/toolbar-language-rtl
fsbraun May 2, 2024
920b7bf
Fix: Let toolbar also become LTR for RTL content
fsbraun May 3, 2024
af36762
Merge branch 'fix/toolbar-language-rtl' of github.com:fsbraun/django-…
fsbraun May 3, 2024
1423fa0
Fix: Arrow position for droppable locations in structure board
fsbraun May 3, 2024
5727f31
Move sideframe to the right for RTL UI
fsbraun May 3, 2024
cac1c4b
Fix: test case to deal with non-existing urls
fsbraun May 3, 2024
941610e
Merge branch 'develop-4' into fix/toolbar-language-rtl
fsbraun May 5, 2024
db129f6
Merge branch 'develop-4' into fix/toolbar-language-rtl
fsbraun May 8, 2024
a4a7c2e
Fixed cms debug bar styling ignoring rtl
fsbraun May 8, 2024
db112f5
Merge branch 'fix/toolbar-language-rtl' of github.com:fsbraun/django-…
fsbraun May 8, 2024
daf612f
Fix wizard rtl bug
fsbraun May 8, 2024
0ff3e01
Merge branch 'develop-4' into fix/toolbar-language-rtl
fsbraun May 9, 2024
8b72365
Fix resize cursor, missing patches for legacy browsers
fsbraun May 12, 2024
2f5978b
Fix: nw -> ne in patch file
fsbraun May 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions cms/static/cms/js/modules/cms.modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -576,6 +576,7 @@ class Modal {
var height = this.ui.modal.height();
var modalLeft = this.ui.modal.position().left;
var modalTop = this.ui.modal.position().top;
var resizeDir = this.ui.resize.css('direction') === 'rtl' ? -1 : +1;

// create event for stopping
this.ui.body.on(this.pointerUp, function(e) {
Expand All @@ -588,11 +589,11 @@ class Modal {
.on(this.pointerMove, function(e) {
var mvX = pointerEvent.originalEvent.pageX - e.originalEvent.pageX;
var mvY = pointerEvent.originalEvent.pageY - e.originalEvent.pageY;
var w = width - mvX * 2;
var w = width - resizeDir * mvX * 2;
var h = height - mvY * 2;
var wMin = that.options.minWidth;
var hMin = that.options.minHeight;
var left = mvX + modalLeft;
var left = resizeDir * mvX + modalLeft;
var top = mvY + modalTop;

// add some limits
Expand Down
10 changes: 4 additions & 6 deletions cms/static/cms/sass/cms.base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,7 @@ div.cms {
@import "components/pagetree/node-state";
}

//##############################################################################
// DJANGO DEBUG TOOLBAR FIX
// removed as of: //github.com/divio/django-cms/issues/2476
// #djDebug #djDebugToolbarHandle {
// top:35px !important; border-right:none !important;
// }
// Can be removed once suffucently many users have browsers the support `:dir()`
div.cms[dir=rtl] {
@import "libs/rtl_patch";
}
3 changes: 3 additions & 0 deletions cms/static/cms/sass/cms.wizard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,9 @@ $wizard-input-size: 16px;
// tablet and up
@media (min-width: $screen-tablet) {
float: left !important;
&:dir(rtl) {
float: right !important;
}
width: 48% !important;
}

Expand Down
14 changes: 13 additions & 1 deletion cms/static/cms/sass/components/_modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,19 +193,25 @@

.cms-modal-resize {
position: absolute;
right: 0;
inset-inline-end: 0;
bottom: 0;
z-index: z(modal, resize);
font-size: 10px;
color: $gray-light;
width: $modal-resize-size;
height: $modal-resize-size;
cursor: nw-resize;
&:dir(rtl) {
cursor: ne-resize;
}
span {
position: absolute;
bottom: 5px;
right: 5px;
font-size: $font-size-small;
&:dir(rtl) {
transform: scale(-1,1) translate(2px, 0); // flip drag triangle
}
}
}

Expand Down Expand Up @@ -256,6 +262,9 @@
$margin: math.div($toolbar-height - $toolbar-button-height, 2);
@extend .cms-toolbar-item-buttons;
float: right;
&:dir(rtl) {
float: left;
}
margin-inline-start: $margin;

.cancel-link {
Expand All @@ -264,6 +273,9 @@
}
.cms-modal-item-buttons-left {
float: left;
&:dir(rtl) {
float: right;
}
}

// alter footer when html markup is loaded
Expand Down
4 changes: 2 additions & 2 deletions cms/static/cms/sass/components/_sideframe.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
display: none;
position: fixed;
top: 0;
left: 0;
inline-start: 0;
width: 0;
bottom: 0;
z-index: z(sideframe, base);
Expand Down Expand Up @@ -60,7 +60,7 @@
.cms-sideframe-controls {
position: absolute;
top: $sideframe-buttons-position-top + $sideframe-buttons-offset;
right: $sideframe-buttons-position-right;
inset-inline-end: $sideframe-buttons-position-right;
z-index: z(sideframe, buttons);
box-shadow: $toolbar-shadow;
background-color: $white;
Expand Down
8 changes: 4 additions & 4 deletions cms/static/cms/sass/components/_structureboard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,12 @@
content: "";
position: absolute;
top: -8px;
left: -4px;
inset-inline-start: -4px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid $color-primary;
border-inline-start: 8px solid $color-primary;
}
}
.cms-draggables > .cms-droppable:first-child {
Expand Down Expand Up @@ -371,7 +371,7 @@
margin-inline-start: $structure-dragarea-padding-horizontal - 10px;
cursor: pointer;
transform: rotate(180deg);
[dir="rtl"] & {
&:dir(rtl) {
transform: rotate(0deg);
}
}
Expand All @@ -381,7 +381,7 @@
}
.cms-dragitem-expanded:before {
transform: rotate(-90deg);
[dir="rtl"] & {
&:dir(rtl) {
transform: rotate(-90deg);
}
}
Expand Down
18 changes: 9 additions & 9 deletions cms/static/cms/sass/components/_toolbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
// items
.cms-toolbar-item {
float: left;
[dir=rtl] & {
&:dir(rtl) {
float: right;
}
}
Expand Down Expand Up @@ -85,7 +85,7 @@
z-index: 30;

@at-root .cms-structure-mode-structure & {
right: $toolbar-height;
inset-inline-end: $toolbar-height;
}
}
.cms-toolbar .cms-btn-action {
Expand All @@ -107,13 +107,13 @@
li {
position: relative;
float: left;
[dir=rtl] & {
&:dir(rtl) {
float: right;
}
}
li a {
float: left;
[dir=rtl] & {
&:dir(rtl) {
float: right;
}
color: $toolbar-menu-item-color;
Expand Down Expand Up @@ -184,7 +184,7 @@
display: block;
.cms-icon {
display: block;
[dir="rtl"] & {
&:dir(rtl) {
// undo arrow rotation for RTL
transform: rotate(0deg);
}
Expand Down Expand Up @@ -241,7 +241,7 @@

.cms-toolbar-item {
float: none;
[dir=rtl] & {
[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
Expand All @@ -254,7 +254,7 @@
}
.cms-toolbar-item-cms-mode-switcher a {
float: left !important;
[dir=rtl] & {
&:dir(rtl) {
float: right !important;
}
width: 50%;
Expand Down Expand Up @@ -415,7 +415,7 @@
cursor: pointer;
display: none;
float: right;
[dir=rtl] & {
&:dir(rtl) {
float: left;
}
position: relative;
Expand Down Expand Up @@ -570,7 +570,7 @@

a {
float: left;
[dir=rtl] & {
&:dir(rtl) {
float: right;
}
line-height: $toolbar-button-height;
Expand Down
16 changes: 8 additions & 8 deletions cms/static/cms/sass/components/pagetree/_tree.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -390,7 +390,7 @@
color: $gray-darkest;
background: none;

[dir=rtl] & {
&:dir(rtl) {
// inline-start & inline-end are not widely supported
float: right;
}
Expand Down Expand Up @@ -451,7 +451,7 @@
min-width: $pagetree-cell-inner-height;
height: $pagetree-cell-inner-height;

[dir=rtl] & {
&:dir(rtl) {
// inline-start & inline-end are not widely supported
float: left;
}
Expand Down Expand Up @@ -501,7 +501,7 @@
.cms-tree-reload {
float: right;

[dir=rtl] & {
&:dir(rtl) {
// inline-start & inline-end are not widely supported
float: left;
}
Expand Down Expand Up @@ -652,7 +652,7 @@
float: left;
margin-inline-end: 5px;

[dir=rtl] & {
&:dir(rtl) {
// inline-start & inline-end are not widely supported
float: right;
}
Expand All @@ -676,7 +676,7 @@
.cms-tree-filters {
float: right;

[dir=rtl] & {
&:dir(rtl) {
// inline-start & inline-end are not widely supported
float: left;
}
Expand Down Expand Up @@ -822,7 +822,7 @@
margin-inline-start: -1px;
}
.jstree-ocl {
float: left;
float: left;
position: relative;
inset-inline-start: $pagetree-nesting-padding;
font-size: 12px;
Expand All @@ -832,7 +832,7 @@
padding-block-end: 10px;
padding-inline-start: 0px;

[dir=rtl] & {
&:dir(rtl) {
// inline-start & inline-end are not widely supported
float: right;
}
Expand Down Expand Up @@ -892,7 +892,7 @@
color: $gray !important;
}

[dir=rtl] & {
&:dir(rtl) {
// no direct logical property for background-position
background-position: calc(100% - 2px) center;
}
Expand Down
87 changes: 87 additions & 0 deletions cms/static/cms/sass/libs/_rtl_patch.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
/* This patch file contains all :dir(rtl) selectors for browsers that do not support it yet */
/* Once, sufficiently many users have browsers that support `:dir()`, this file can be removed */

/* component: toolbar */

.cms-toolbar {
.cms-toolbar-item {
float: right;
}
}

.cms-toolbar-item-navigation {
li, li a {
float: right;
}
.cms-toolbar-item-navigation-children > a span .cms-icon {
transform: rotate(0deg);
}
}

.cms-toolbar-more .cms-toolbar-item-cms-mode-switcher a {
float: right !important;
}

.cms-messages .cms-messages-close {
float: left;
}

.cms-toolbar-item-buttons a {
float: right;
}


/* component: modal */

.cms-modal-item-buttons {
float: left;
}

.cms-modal-item-buttons-left {
float: right;
}

.cms-modal-resize {
cursor: ne-resize;
span {
transform: scale(-1,1) translate(2px, 0); // flip drag triangle
}
}


/* component: structureboard */

.cms-structure {
.cms-dragitem-collapsable:before {
transform: rotate(0deg);
}
.cms-dragitem-expanded:before {
transform: rotate(-90deg);
}
}


/* component: tree */

.cms-pagetree-section {
h2 {
float: right;
}

}

.cms-tree-col, .cms-tree-reload, .cms-tree-filters {
float: left;
}

.cms-tree-search {
float: right;
}

.jstree-django-cms .jstree-ocl {
float: right;
}

.jstree-anchor {
background-position: calc(100% - 2px) center;
}
4 changes: 2 additions & 2 deletions cms/static/cms/sass/settings/_cms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,8 +137,8 @@ $z-layers: (
"messages": 999999,
"toolbar": (
"base": 9999999,
"left": 10,
"right": 10,
"inset-inline-start": 10,
"inset-inline-end": 10,
),
"sideframe": (
"base": 999999,
Expand Down
Loading