Robmoen has uploaded a new change for review.
https://gerrit.wikimedia.org/r/70851
Change subject: Make local overlays local to surface and remove insane z-indexes
......................................................................
Make local overlays local to surface and remove insane z-indexes
ve.ui.Surface.js
* Make local overlay a child of ve-ui-surface and a sibling to ve-ce-surface
elements.
** This keeps local overlays relative to their surface and eliminates the need
for insane
z-indexes.
ve.ui.PopupWidget.js
* PopupWidget boundaries are now relative to ve-ce-surface and no longer
protrude out
ve.ce.Node.css, ve.ui.Window.css
* Removal or replacement of insane z-indexes.
ve.ce.FocusableNode.js, ve.ce.ProtectedNode.js, ve.ce.ResizableNode.js,
ve.ui.Context.js
* Translate offsets from local overlay
ve.init.mw.ViewPageTarget-monobook.css, ve.init.mw.ViewPageTarget-vector.css
* Skin specific z-indexes for global overlay
ve.init.mw.ViewPageTarget.js
* Applied direction specific mw class to ce.Surface vs ui.Surface to prevent mw
content styles
from being applied to ui elements.
ve.ui.Dialog.css
* Adjustments to surface inside of dialog so that relative offsets for local
overlays can be
properly calculated.
ve.ui.Surface.css
* Explicitly force .ve-ui-surface to be relative so that it's children can be
relatively positioned.
ve.ui.Widget.css
* Removal of unnecessary font-size properties now that local overlay is sibling
of surface.
ve.js
* Added get relative position helper method to translate position offsets from
target parent
Bug: 50241
Change-Id: Ibadce404a2286bc5dcec48f0d9da89004dbbd867
---
M modules/ve/ce/styles/ve.ce.Node.css
M modules/ve/ce/ve.ce.FocusableNode.js
M modules/ve/ce/ve.ce.ProtectedNode.js
M modules/ve/ce/ve.ce.ResizableNode.js
M modules/ve/init/mw/styles/ve.init.mw.ViewPageTarget-monobook.css
M modules/ve/init/mw/styles/ve.init.mw.ViewPageTarget-vector.css
M modules/ve/init/mw/styles/ve.init.mw.ViewPageTarget.css
M modules/ve/init/mw/targets/ve.init.mw.ViewPageTarget.js
M modules/ve/ui/styles/ve.ui.Dialog.css
M modules/ve/ui/styles/ve.ui.Surface.css
M modules/ve/ui/styles/ve.ui.Tool.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.Context.js
M modules/ve/ui/ve.ui.Surface.js
M modules/ve/ui/widgets/ve.ui.PopupWidget.js
M modules/ve/ui/widgets/ve.ui.TextInputMenuWidget.js
M modules/ve/ve.js
18 files changed, 61 insertions(+), 31 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/VisualEditor
refs/changes/51/70851/1
diff --git a/modules/ve/ce/styles/ve.ce.Node.css
b/modules/ve/ce/styles/ve.ce.Node.css
index fb17953..1cab4fd 100644
--- a/modules/ve/ce/styles/ve.ce.Node.css
+++ b/modules/ve/ce/styles/ve.ce.Node.css
@@ -80,7 +80,7 @@
}
.ve-ce-resizableNode-handles-resizing {
- z-index: 10000;
+ z-index: 2;
}
.ve-ce-resizableNode-handles div {
diff --git a/modules/ve/ce/ve.ce.FocusableNode.js
b/modules/ve/ce/ve.ce.FocusableNode.js
index 9b7c7ca..5178062 100644
--- a/modules/ve/ce/ve.ce.FocusableNode.js
+++ b/modules/ve/ce/ve.ce.FocusableNode.js
@@ -126,7 +126,7 @@
this.$.find( '*' ).add( this.$ ).each(
ve.bind( function( i, element ) {
- elementOffset = $( element ).offset();
+ elementOffset = ve.getRelativePosition( $( element ),
this.getRoot().getSurface().getSurface().$ );
this.$highlights = this.$highlights.add(
$( '<div>' )
.css( {
diff --git a/modules/ve/ce/ve.ce.ProtectedNode.js
b/modules/ve/ce/ve.ce.ProtectedNode.js
index e01befb..a14cbf0 100644
--- a/modules/ve/ce/ve.ce.ProtectedNode.js
+++ b/modules/ve/ce/ve.ce.ProtectedNode.js
@@ -232,7 +232,7 @@
this.$.find( '.ve-ce-protectedNode-shield' ).each(
ve.bind( function ( i, element ) {
var $shield = $( element ),
- offset = $shield.offset();
+ offset = ve.getRelativePosition( $shield,
this.getRoot().getSurface().getSurface().$ );
this.$phantoms.eq( i ).css( {
'top': offset.top,
'left': offset.left,
diff --git a/modules/ve/ce/ve.ce.ResizableNode.js
b/modules/ve/ce/ve.ce.ResizableNode.js
index 3d0c91a..56dfee3 100644
--- a/modules/ve/ce/ve.ce.ResizableNode.js
+++ b/modules/ve/ce/ve.ce.ResizableNode.js
@@ -59,7 +59,7 @@
* @method
*/
ve.ce.ResizableNode.prototype.onResizableFocus = function () {
- var offset = this.$resizable.offset();
+ var offset = ve.getRelativePosition( this.$resizable,
this.getRoot().getSurface().getSurface().$ );
this.$resizeHandles
.css( {
diff --git a/modules/ve/init/mw/styles/ve.init.mw.ViewPageTarget-monobook.css
b/modules/ve/init/mw/styles/ve.init.mw.ViewPageTarget-monobook.css
index d3c6840..9800915 100644
--- a/modules/ve/init/mw/styles/ve.init.mw.ViewPageTarget-monobook.css
+++ b/modules/ve/init/mw/styles/ve.init.mw.ViewPageTarget-monobook.css
@@ -19,3 +19,7 @@
font-size: 1.25em;
line-height: 1.5em;
}
+
+.ve-ui-surface-overlay-global {
+ z-index: 4;
+}
diff --git a/modules/ve/init/mw/styles/ve.init.mw.ViewPageTarget-vector.css
b/modules/ve/init/mw/styles/ve.init.mw.ViewPageTarget-vector.css
index d7b99d6..ba5dc0c 100644
--- a/modules/ve/init/mw/styles/ve.init.mw.ViewPageTarget-vector.css
+++ b/modules/ve/init/mw/styles/ve.init.mw.ViewPageTarget-vector.css
@@ -6,19 +6,16 @@
*/
.ve-ui-surface {
- margin-top: 0.8em;
- margin-left: -1.5em;
- margin-right: -1.5em;
+ margin: 0.8em -1.5em 0 -1.5em;
}
.ve-ce-documentNode {
font-size: 0.8em;
- padding-left: 1.875em; /* 1.5/0.8 */
- padding-right: 1.875em; /* 1.5/0.8 */
+ padding: 0 1.875em; /* 1.5/0.8 */
}
.ve-init-mw-viewPageTarget-toolbar {
- margin: -1em -1em 1em -1em;
+ margin: -1em;
-webkit-transition: margin 200ms ease-out;
-moz-transition: margin 200ms ease-out;
-o-transition: margin 200ms ease-out;
@@ -28,4 +25,8 @@
.ve-init-mw-viewPageTarget-toolbar .ve-ui-toolbar-bar {
display: none;
-}
\ No newline at end of file
+}
+
+.ve-ui-surface-overlay-global {
+ z-index: 101; /* #p-personal is z-index 100 in vector :( */
+}
diff --git a/modules/ve/init/mw/styles/ve.init.mw.ViewPageTarget.css
b/modules/ve/init/mw/styles/ve.init.mw.ViewPageTarget.css
index d27b57b..d6de410 100644
--- a/modules/ve/init/mw/styles/ve.init.mw.ViewPageTarget.css
+++ b/modules/ve/init/mw/styles/ve.init.mw.ViewPageTarget.css
@@ -8,7 +8,7 @@
/* VisualEditor */
.ve-ui-menuWidget {
- font-size: 0.9em;
+ font-size: 0.8em;
}
.ve-init-mw-viewPageTarget-pageTitle {
diff --git a/modules/ve/init/mw/targets/ve.init.mw.ViewPageTarget.js
b/modules/ve/init/mw/targets/ve.init.mw.ViewPageTarget.js
index 3c10afa..3805c94 100644
--- a/modules/ve/init/mw/targets/ve.init.mw.ViewPageTarget.js
+++ b/modules/ve/init/mw/targets/ve.init.mw.ViewPageTarget.js
@@ -853,7 +853,7 @@
} );
// Add appropriately mw-content-ltr or mw-content-rtl class
- this.surface.$.addClass( 'mw-content-' + mw.config.get(
'wgVisualEditor' ).pageLanguageDir );
+ this.surface.view.$.addClass( 'mw-content-' + mw.config.get(
'wgVisualEditor' ).pageLanguageDir );
};
/**
diff --git a/modules/ve/ui/styles/ve.ui.Dialog.css
b/modules/ve/ui/styles/ve.ui.Dialog.css
index 77c7302..d4d07fd 100644
--- a/modules/ve/ui/styles/ve.ui.Dialog.css
+++ b/modules/ve/ui/styles/ve.ui.Dialog.css
@@ -166,13 +166,16 @@
}
.ve-ui-window-body .ve-ui-surface {
- padding: 0.25em 1.25em;
border: solid 1px #ddd;
border-radius: 0.25em;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
+.ve-ui-window-body .ve-ce-documentNode {
+ padding: 0 1.875em; /* 1.5/0.8 */
+}
+
/* ve.ui.MWTransclusionDialog */
.ve-ui-mwTransclusionDialog-input {
diff --git a/modules/ve/ui/styles/ve.ui.Surface.css
b/modules/ve/ui/styles/ve.ui.Surface.css
index 2aed355..b073a07 100644
--- a/modules/ve/ui/styles/ve.ui.Surface.css
+++ b/modules/ve/ui/styles/ve.ui.Surface.css
@@ -5,6 +5,10 @@
* @license The MIT License (MIT); see LICENSE.txt
*/
+.ve-ui-surface {
+ position: relative;
+}
+
.ve-ui-surface:after {
content: ".";
display: block;
@@ -23,3 +27,7 @@
right: 0;
left: 0;
}
+
+.ve-ui-surface-overlay-local {
+ z-index: 1;
+}
diff --git a/modules/ve/ui/styles/ve.ui.Tool.css
b/modules/ve/ui/styles/ve.ui.Tool.css
index 63013c8..fd4d138 100644
--- a/modules/ve/ui/styles/ve.ui.Tool.css
+++ b/modules/ve/ui/styles/ve.ui.Tool.css
@@ -117,7 +117,7 @@
.ve-ui-dropdownTool .ve-ui-menuWidget {
left: -1px;
top: 2.5em;
- z-index: 10000;
+ z-index: 4;
}
.ve-ui-dropdownTool .ve-ui-labeledElement-label {
diff --git a/modules/ve/ui/styles/ve.ui.Widget.css
b/modules/ve/ui/styles/ve.ui.Widget.css
index aeb8b7d..3de059a 100644
--- a/modules/ve/ui/styles/ve.ui.Widget.css
+++ b/modules/ve/ui/styles/ve.ui.Widget.css
@@ -371,7 +371,6 @@
.ve-ui-mwLinkTargetInputWidget-menu {
width: 20em;
margin-top: -7px;
- font-size: 0.8em;
}
.ve-ui-mwLinkTargetInputWidget-menu .ve-ui-menuWidget-item {
@@ -675,7 +674,6 @@
padding: 0.5em;
color: #fff;
text-shadow: 1px 1px #000;
- font-size: 0.8em;
line-height: 1.125em;
background-color: rgba(0,0,0,0.5);
text-overflow: ellipsis;
diff --git a/modules/ve/ui/styles/ve.ui.Window.css
b/modules/ve/ui/styles/ve.ui.Window.css
index fb7a1fc..3e664cf 100644
--- a/modules/ve/ui/styles/ve.ui.Window.css
+++ b/modules/ve/ui/styles/ve.ui.Window.css
@@ -46,5 +46,4 @@
position: absolute;
top: 0;
left: 0;
- z-index: 1000;
}
diff --git a/modules/ve/ui/ve.ui.Context.js b/modules/ve/ui/ve.ui.Context.js
index 97cca57..d4c3304 100644
--- a/modules/ve/ui/ve.ui.Context.js
+++ b/modules/ve/ui/ve.ui.Context.js
@@ -29,7 +29,7 @@
this.embedded = false;
this.selection = null;
this.toolbar = null;
- this.popup = new ve.ui.PopupWidget( { '$$': this.$$ } );
+ this.popup = new ve.ui.PopupWidget( { '$$': this.$$, surface:
this.surface } );
this.$menu = this.$$( '<div>' );
this.inspectors = new ve.ui.WindowSet( surface, ve.ui.inspectorFactory
);
@@ -254,22 +254,27 @@
* @chainable
*/
ve.ui.Context.prototype.updateDimensions = function ( transition ) {
- var position, $container, focusableOffset, focusableWidth,
+ var $container, focusableOffset, focusableWidth,
inspector = this.inspectors.getCurrent(),
- focusedNode = this.surface.getView().getFocusedNode();
+ focusedNode = this.surface.getView().getFocusedNode(),
+ // Get cursor position
+ position = this.surface.getView().getSelectionRect(),
+ surfaceOffset = this.surface.view.$.offset();
- // Get cursor position
- position = this.surface.getView().getSelectionRect();
+ // translate from ce surface
+ position = {
+ y: position.end.y - surfaceOffset.top,
+ x: position.end.x - surfaceOffset.left
+ };
if ( position ) {
if ( this.embedded ) {
- focusableOffset = focusedNode.$focusable.offset();
+ focusableOffset = ve.getRelativePosition(
focusedNode.$focusable, this.surface.$ );
focusableWidth = focusedNode.$focusable.outerWidth();
$container = this.$menu;
position = { 'x': focusableOffset.left +
focusableWidth, 'y': focusableOffset.top };
this.popup.align = 'right';
} else {
- position = position && position.end;
$container = inspector ? this.inspectors.$ : this.$menu;
this.popup.align = 'center';
}
diff --git a/modules/ve/ui/ve.ui.Surface.js b/modules/ve/ui/ve.ui.Surface.js
index 780ab10..531191c 100644
--- a/modules/ve/ui/ve.ui.Surface.js
+++ b/modules/ve/ui/ve.ui.Surface.js
@@ -63,8 +63,9 @@
/* Methods */
ve.ui.Surface.prototype.initialize = function () {
- this.$$( 'body' ).append( this.$localOverlay );
+ this.view.$.after( this.$localOverlay );
$( 'body' ).append( this.$globalOverlay );
+
this.view.initialize();
// By re-asserting the current selection and forcing a poll we force
selection to be something
// reasonable - otherwise in Firefox, the initial selection is (0,0),
causing bug 42277
@@ -240,3 +241,4 @@
this.commands[trigger] = command.action;
}
};
+
diff --git a/modules/ve/ui/widgets/ve.ui.PopupWidget.js
b/modules/ve/ui/widgets/ve.ui.PopupWidget.js
index a340478..d8850e6 100644
--- a/modules/ve/ui/widgets/ve.ui.PopupWidget.js
+++ b/modules/ve/ui/widgets/ve.ui.PopupWidget.js
@@ -26,6 +26,7 @@
this.visible = false;
this.$callout = this.$$( '<div>' );
this.$body = this.$$( '<div>' );
+ this.surface = config.surface;
this.transitionTimeout = null;
this.align = config.align || 'center';
this.autoClose = !!config.autoClose;
@@ -44,7 +45,7 @@
// Listen for blur events
this.$body.on( 'blur', ve.bind( this.onPopupBlur, this ) );
}
- this.$
+ this.$.hide()
.addClass( 've-ui-popupWidget' )
.append(
this.$body.addClass( 've-ui-popupWidget-body' ),
@@ -152,7 +153,7 @@
}
// Prevent viewport clipping, using padding between body and popup edges
- overlapRight = this.$$( 'body' ).width() - ( x + ( width + left + (
padding * 2 ) ) );
+ overlapRight = this.surface.view.$.outerWidth( true ) - ( x + ( width +
left + ( padding * 2 ) ) );
overlapLeft = x + ( left - ( padding * 2 ) );
if ( overlapRight < 0 ) {
overlapOffset = overlapRight;
diff --git a/modules/ve/ui/widgets/ve.ui.TextInputMenuWidget.js
b/modules/ve/ui/widgets/ve.ui.TextInputMenuWidget.js
index 8639d1f..1573bc2 100644
--- a/modules/ve/ui/widgets/ve.ui.TextInputMenuWidget.js
+++ b/modules/ve/ui/widgets/ve.ui.TextInputMenuWidget.js
@@ -86,12 +86,12 @@
dimensions = $container.offset();
// Position under input
- dimensions.top += $container.outerHeight( true );
- dimensions.width = $container.outerWidth( true );
+ dimensions.top += $container.height();
+ dimensions.width = $container.width();
// Compensate for frame position if in a differnt frame
if ( this.input.$$.frame && this.input.$$.context !==
this.$[0].ownerDocument ) {
- frameOffset = this.input.$$.frame.$.offset();
+ frameOffset = ve.getRelativePosition( this.input.$$.frame.$,
this.$.closest( '.ve-ui-surface' ) );
dimensions.left += frameOffset.left;
dimensions.top += frameOffset.top;
}
diff --git a/modules/ve/ve.js b/modules/ve/ve.js
index 1c4bf80..9d3c72a 100644
--- a/modules/ve/ve.js
+++ b/modules/ve/ve.js
@@ -901,6 +901,15 @@
'PAGEDOWN': 34
};
+ ve.getRelativePosition = function ( $element, $target ) {
+ var elementOffset = $element.offset(),
+ targetOffset = $target.offset();
+ return {
+ top: elementOffset.top - targetOffset.top,
+ left: elementOffset.left - targetOffset.left
+ };
+ };
+
// Expose
window.ve = ve;
}( OO ) );
--
To view, visit https://gerrit.wikimedia.org/r/70851
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ibadce404a2286bc5dcec48f0d9da89004dbbd867
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Robmoen <rm...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
