Esanders has uploaded a new change for review.
https://gerrit.wikimedia.org/r/282678
Change subject: Adjust DOM and CSS so UI surface runs from top to bottom of page
......................................................................
Adjust DOM and CSS so UI surface runs from top to bottom of page
Place things like the page title and redirect link inside a new
container $originalContent, which is appended to the surface
when ready. Replace margins with padding in various places.
This will allow us to surface-height-matching sidebar for dialogs.
Change-Id: I60d80fb303bdaf93e9d121f62d534ee3a3056e59
---
M modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget-monobook.css
M modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget-vector.css
M modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget.init.css
M modules/ve-mw/init/targets/ve.init.mw.DesktopArticleTarget.js
4 files changed, 51 insertions(+), 21 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/VisualEditor
refs/changes/78/282678/1
diff --git
a/modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget-monobook.css
b/modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget-monobook.css
index 219c837..cdb6a57 100644
--- a/modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget-monobook.css
+++ b/modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget-monobook.css
@@ -19,16 +19,17 @@
.ve-init-mw-desktopArticleTarget .mw-body-content,
.ve-ui-overlay-global .mw-body-content {
/* Match skin's font-size for the surface content */
- font-size: 0.992187499998em; /* 1/1.00787401575 */
+ font-size: 0.9921875em; /* 1/1.00787401575 */
}
.ve-init-mw-desktopArticleTarget-toolbar {
- /* 0.6/0.8, 0.8/0.8, 1/0.6 */
- margin: -0.75em -1em 1.25em -1em;
+ /* 1/1.00787401575 */
+ margin: -0.9921875em;
+ margin-bottom: 0;
}
-.ve-init-mw-desktopArticleTarget-toolbar > .oo-ui-toolbar-bar {
- top: -3px;
+.ve-init-mw-desktopArticleTarget-originalContent {
+ padding-top: 0.9921875em;
}
/* Main document debug bar */
@@ -39,6 +40,11 @@
margin: 1em -1em -1em -1em;
}
+.ve-init-mw-target-surface {
+ margin-bottom: -0.9921875em;
+ padding-bottom: 0.9921875em;
+}
+
.ve-init-mw-target-surface .ve-ce-documentNode,
.ve-init-mw-target-surface .ve-ui-surface-placeholder {
padding: 0;
diff --git
a/modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget-vector.css
b/modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget-vector.css
index 4535a2c..e40d5eb 100644
--- a/modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget-vector.css
+++ b/modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget-vector.css
@@ -20,7 +20,17 @@
of content editable.
*/
/* 0.8/0.8, 1/0.8 */
- margin: 1em -1.25em 0 -1.25em;
+ margin: 0 -1.25em -1.25em -1.25em;
+ padding-bottom: 1.25em;
+}
+
+.ve-init-mw-desktopArticleTarget-originalContent {
+ padding-top: 1.25em;
+}
+
+.ve-init-mw-target-surface .ve-init-mw-desktopArticleTarget-originalContent {
+ padding-left: 1.25em;
+ padding-right: 1.25em;
}
.ve-init-mw-target-surface .ve-ce-documentNode,
@@ -53,7 +63,7 @@
.ve-init-mw-desktopArticleTarget-toolbar {
/* 1/0.8 */
- margin: -1.25em -1.25em 1.25em -1.25em;
+ margin: -1.25em -1.25em 0 -1.25em;
position: relative;
}
@@ -89,7 +99,17 @@
@media screen and (min-width: 982px) {
.ve-init-mw-target-surface {
/* 0.8/0.8, 1.5/0.8 */
- margin: 1em -1.875em 0 -1.875em;
+ margin: 0 -1.875em -1.875em -1.875em;
+ padding-bottom: 1.875em;
+ }
+
+ .ve-init-mw-desktopArticleTarget-originalContent {
+ padding-top: 1.875em;
+ }
+
+ .ve-init-mw-target-surface
.ve-init-mw-desktopArticleTarget-originalContent {
+ padding-left: 1.875em;
+ padding-right: 1.875em;
}
.ve-init-mw-target-surface .ve-ce-documentNode,
@@ -99,14 +119,14 @@
.ve-init-mw-desktopArticleTarget-toolbar {
/* 1.25/0.8, 1.5/0.8 */
- margin: -1.5625em -1.875em 1.875em -1.875em;
+ margin: -1.5625em -1.875em 0 -1.875em;
}
/* Main document debug bar */
.ve-init-mw-desktopArticleTarget > .ve-ui-debugBar {
/* 1/0.8, 1.5/0.8 */
padding: 1.875em;
- margin: 1.25em -1.875em -1.875em -1.875em;
+ margin: 1.875em -1.875em -1.875em -1.875em;
}
}
diff --git a/modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget.init.css
b/modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget.init.css
index b27162b..8ea5155 100644
--- a/modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget.init.css
+++ b/modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget.init.css
@@ -54,10 +54,6 @@
user-select: none;
}
-.ve-activated #firstHeading {
- cursor: default;
-}
-
/* Progress bar mimicking OOUI */
.ve-activated #content {
diff --git a/modules/ve-mw/init/targets/ve.init.mw.DesktopArticleTarget.js
b/modules/ve-mw/init/targets/ve.init.mw.DesktopArticleTarget.js
index 0fcd95a..431610a 100644
--- a/modules/ve-mw/init/targets/ve.init.mw.DesktopArticleTarget.js
+++ b/modules/ve-mw/init/targets/ve.init.mw.DesktopArticleTarget.js
@@ -71,9 +71,12 @@
this.originalDocumentTitle = document.title;
this.tabLayout = mw.config.get( 'wgVisualEditorConfig' ).tabLayout;
this.events = new ve.init.mw.ArticleTargetEvents( this );
+ this.$originalContent = $( '<div>' ).addClass(
've-init-mw-desktopArticleTarget-originalContent' );
// Initialization
- this.$element.addClass( 've-init-mw-desktopArticleTarget' );
+ this.$element
+ .addClass( 've-init-mw-desktopArticleTarget' )
+ .append( this.$originalContent );
if ( history.replaceState ) {
// We replace the current state with one that's marked with our
tag. This way, when users
@@ -414,6 +417,8 @@
$( 'html' ).removeClass( 've-loading' ).addClass(
've-activating' );
$.when( this.activatingDeferred, this.toolbarSetupDeferred
).done( function () {
$( 'html' ).removeClass( 've-activating' ).addClass(
've-active' );
+ // Move original content inside the surface for
viewport calculations
+ target.getSurface().$element.prepend(
target.$originalContent );
if ( !target.editingTabDialog ) {
// We have to focus the page after hiding the
original content, otherwise
// in firefox the contentEditable container was
below the view page, and
@@ -546,6 +551,9 @@
this.getToolbar().$actions.empty();
}
+ // Move original content back out of the surface
+ this.$element.prepend( this.$originalContent );
+
// Check we got as far as setting up the surface
if ( this.getSurface() ) {
if ( this.active ) {
@@ -570,8 +578,8 @@
target.deactivating = false;
$( 'html' ).removeClass( 've-deactivating' );
- // Move remaining elements back out of the target
- target.$element.parent().append( target.$element.children() );
+ // Move original content back out of the target
+ target.$element.parent().append(
target.$originalContent.children() );
mw.hook( 've.deactivationComplete' ).fire( target.edited );
} );
@@ -699,8 +707,8 @@
$( '<br>' )
);
}
- this.$element.children( '.redirectMsg' ).remove();
- this.$element.find( '.ve-init-mw-target-surface' ).before( $(
'<div>' )
+ this.$originalContent.find( '.redirectMsg' ).remove();
+ this.$originalContent.append( $( '<div>' )
// Bit of a hack: Make sure any redirect note is styled
.addClass( 'redirectMsg mw-content-' + $( 'html'
).attr( 'dir' ) )
@@ -729,7 +737,7 @@
*/
ve.init.mw.DesktopArticleTarget.prototype.onMetaItemRemoved = function (
metaItem ) {
if ( metaItem.getType() === 'mwRedirect' ) {
- this.$element.children( '.redirectMsg' ).remove();
+ this.$originalContent.find( '.redirectMsg' ).remove();
$( '#contentSub #redirectsub, #contentSub #redirectsub + br'
).remove();
}
};
@@ -1101,7 +1109,7 @@
mw.hook( 've.activate' ).fire();
// Move all native content inside the target
- this.$element.append( this.$element.siblings() );
+ this.$originalContent.append( this.$element.siblings() );
// Push veaction=edit url in history (if not already. If we got here by
a veaction=edit
// permalink then it will be there already and the constructor called
#activate)
--
To view, visit https://gerrit.wikimedia.org/r/282678
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I60d80fb303bdaf93e9d121f62d534ee3a3056e59
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Esanders <esand...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
