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