jenkins-bot has submitted this change and it was merged.
Change subject: Dir fix for iframes and widgets
......................................................................
Dir fix for iframes and widgets
This fix adds a directionality property to the frame objects so directions
can be inherited and manipulated inside the frame <body> tags.
There are also several corrections to flipping positioning of panels
in the GridLayout and of the icons in fieldsets and labeled elements
so they appear properly (right instead of left).
I've added a 've-rtl' / 've-ltr' class to frame content divs to serve as
selectors for rtl fixes and general language fixes. Most CSS corrections
would likely be fixed when CSSJanus works in iframes, but the selectors
would still be useful.
This sets the stage for directionality inheritance inside iframes,
and fixes most of the problem with the Page Settings window in RTL wikis.
It also fixes all the labels with icons across VE interface.
Bug: 49613
Change-Id: I418e669b0999552167683352acb365a4249ab9cc
---
M modules/ve/ui/layouts/ve.ui.GridLayout.js
M modules/ve/ui/layouts/ve.ui.PanelLayout.js
M modules/ve/ui/styles/ve.ui.Dialog.css
M modules/ve/ui/styles/ve.ui.Layout.css
M modules/ve/ui/styles/ve.ui.Widget.css
M modules/ve/ui/styles/ve.ui.Window.css
M modules/ve/ui/ve.ui.Frame.js
7 files changed, 60 insertions(+), 5 deletions(-)
Approvals:
Catrope: Looks good to me, approved
jenkins-bot: Verified
diff --git a/modules/ve/ui/layouts/ve.ui.GridLayout.js
b/modules/ve/ui/layouts/ve.ui.GridLayout.js
index 55164e0..af2558b 100644
--- a/modules/ve/ui/layouts/ve.ui.GridLayout.js
+++ b/modules/ve/ui/layouts/ve.ui.GridLayout.js
@@ -122,6 +122,7 @@
i = 0,
left = 0,
top = 0,
+ dimensions,
width = 0,
height = 0,
cols = this.widths.length,
@@ -132,18 +133,25 @@
panel = this.panels[i];
width = this.widths[x];
height = this.heights[y];
- panel.$.css( {
+ dimensions = {
'width': Math.round( width * 100 ) + '%',
'height': Math.round( height * 100 ) + '%',
- 'left': Math.round( left * 100 ) + '%',
'top': Math.round( top * 100 ) + '%'
- } );
+ };
+ // If RTL, reverse:
+ if ( this.$$.frame.dir === 'rtl' ) {
+ dimensions.right = Math.round( left * 100 ) +
'%';
+ } else {
+ dimensions.left = Math.round( left * 100 ) +
'%';
+ }
+ panel.$.css( dimensions );
i++;
left += width;
}
top += height;
left = 0;
}
+
this.emit( 'update' );
};
diff --git a/modules/ve/ui/layouts/ve.ui.PanelLayout.js
b/modules/ve/ui/layouts/ve.ui.PanelLayout.js
index baecce5..103dbe7 100644
--- a/modules/ve/ui/layouts/ve.ui.PanelLayout.js
+++ b/modules/ve/ui/layouts/ve.ui.PanelLayout.js
@@ -27,6 +27,9 @@
if ( config.scroll ) {
this.$.css( 'overflow-y', 'auto' );
}
+
+ // Add directionality class:
+ this.$.addClass( 've-' + this.$$.frame.dir );
};
/* Inheritance */
diff --git a/modules/ve/ui/styles/ve.ui.Dialog.css
b/modules/ve/ui/styles/ve.ui.Dialog.css
index 68d5208..c6d5bf6 100644
--- a/modules/ve/ui/styles/ve.ui.Dialog.css
+++ b/modules/ve/ui/styles/ve.ui.Dialog.css
@@ -110,6 +110,11 @@
margin: 0.125em 0.25em;
}
+/* @noflip */
+.ve-rtl .ve-ui-window-foot .ve-ui-buttonWidget {
+ float: left;
+}
+
.ve-ui-window-closeButton {
float: right;
margin: 0.25em 0.25em;
@@ -123,10 +128,21 @@
border-top-left-radius: 0;
}
+/* @noflip */
+.ve-rtl .ve-ui-window-closeButton {
+ float: left;
+}
+
.ve-ui-pagedDialog-outlinePanel {
border-right: solid 1px #ddd;
}
+/* @noflip */
+.ve-ui-pagedDialog-outlinePanel.ve-rtl {
+ border-right: 0px;
+ border-left: solid 1px #ddd;
+}
+
.ve-ui-pagedDialog-outlinePanel-editable .ve-ui-outlineWidget {
position: absolute;
top: 0;
diff --git a/modules/ve/ui/styles/ve.ui.Layout.css
b/modules/ve/ui/styles/ve.ui.Layout.css
index 029eab4..51fc245 100644
--- a/modules/ve/ui/styles/ve.ui.Layout.css
+++ b/modules/ve/ui/styles/ve.ui.Layout.css
@@ -35,3 +35,9 @@
background-position: left center;
background-repeat: no-repeat;
}
+
+/* @noflip */
+.ve-rtl .ve-ui-fieldsetLayout-decorated > legend.ve-ui-labeledElement-label {
+ padding-right: 1.75em;
+ background-position: right center;
+}
diff --git a/modules/ve/ui/styles/ve.ui.Widget.css
b/modules/ve/ui/styles/ve.ui.Widget.css
index ab95129..3586227 100644
--- a/modules/ve/ui/styles/ve.ui.Widget.css
+++ b/modules/ve/ui/styles/ve.ui.Widget.css
@@ -196,6 +196,13 @@
font-size: 1.1em;
}
+/* @noflip */
+.ve-rtl ul li.ve-ui-outlineItemWidget {
+ padding: 1.25em 3.5em 1.25em 3.5em;
+ background-position: 1em right center;
+ margin-right: 1.25em;
+}
+
.ve-ui-outlineItemWidget-level-1 {
padding-left: 5.5em;
background-position: 3em center;
diff --git a/modules/ve/ui/styles/ve.ui.Window.css
b/modules/ve/ui/styles/ve.ui.Window.css
index fb7a1fc..79b3e39 100644
--- a/modules/ve/ui/styles/ve.ui.Window.css
+++ b/modules/ve/ui/styles/ve.ui.Window.css
@@ -31,6 +31,11 @@
background-repeat: no-repeat;
}
+/* @noflip */
+.ve-rtl .ve-ui-window-icon {
+ float: right;
+}
+
.ve-ui-window-title {
float: left;
line-height: 2em;
@@ -39,6 +44,11 @@
cursor: default;
}
+/* @noflip */
+.ve-rtl .ve-ui-window-title {
+ float: right;
+}
+
.ve-ui-window-overlay {
font-family: sans-serif;
line-height: 1.5em;
diff --git a/modules/ve/ui/ve.ui.Frame.js b/modules/ve/ui/ve.ui.Frame.js
index 0699e9c..5e71345 100644
--- a/modules/ve/ui/ve.ui.Frame.js
+++ b/modules/ve/ui/ve.ui.Frame.js
@@ -31,6 +31,7 @@
this.$
.addClass( 've-ui-frame' )
.attr( { 'frameborder': 0, 'scrolling': 'no' } );
+
};
/* Inheritance */
@@ -83,13 +84,16 @@
this.emit( 'initialize' );
}, this );
+ // Figure out directionality:
+ this.dir = this.$.closest( '[dir]' ).prop( 'dir' ) || 'ltr';
+
// Initialize contents
doc.open();
doc.write(
'<!doctype html>' +
'<html>' +
- '<body style="padding:0;margin:0;">' +
- '<div class="ve-ui-frame-content"></div>' +
+ '<body style="padding:0;margin:0;direction:' + this.dir
+ ';" dir="' + this.dir + '">' +
+ '<div class="ve-ui-frame-content ve-' +
this.dir + '"></div>' +
'</body>' +
'</html>'
);
@@ -97,6 +101,7 @@
// Import all stylesheets
style.textContent = '@import "' + this.config.stylesheets.join(
'";\n@import "' ) + '";';
+
doc.body.appendChild( style );
// Poll for access to stylesheet content
--
To view, visit https://gerrit.wikimedia.org/r/69341
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I418e669b0999552167683352acb365a4249ab9cc
Gerrit-PatchSet: 13
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Mooeypoo <[email protected]>
Gerrit-Reviewer: Amire80 <[email protected]>
Gerrit-Reviewer: Catrope <[email protected]>
Gerrit-Reviewer: Inez <[email protected]>
Gerrit-Reviewer: Krinkle <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
