wikimedia/mediawiki-extensions-VisualEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor synced 2024-11-23 14:06:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Attach content to teleport target instead of <body>, remove Vector hacks

Browse source 
In MediaWiki, OO.ui.getTeleportTarget() is overridden to return
a different element (itself attached to body), which is supposed
to be styled appropriately by skins (e.g. z-index above any
floating header, font-size same as body text, etc.).

As a result, we no longer need to do weird things with the
'vector-body' class to achieve correct font size on Vector,
and we can remove some font-size overrides for Vector and MonoBook.

Bug: T348288
Bug: T339058
Change-Id: I6329b3023573b3dcfc8f471c4693be9bb1e9e430
This commit is contained in:
Bartosz Dziewoński 2023-10-31 22:06:04 +01:00
parent 7a935ec017
commit 5667832c1b
12 changed files with 10 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
extension.json
View file

@ -1578,12 +1578,10 @@
"modules/ve-mw/themes/wikimediaui.css"
],
"vector": [
"modules/ve-mw/themes/wikimediaui.css",
"modules/ve-mw/ui/styles/tools/ve.ui.MWTargetWidget-vector.less"
"modules/ve-mw/themes/wikimediaui.css"
],
"vector-2022": [
"modules/ve-mw/themes/wikimediaui.css",
"modules/ve-mw/ui/styles/tools/ve.ui.MWTargetWidget-vector.less"
"modules/ve-mw/themes/wikimediaui.css"
],
"monobook": [
"modules/ve-mw/themes/apex.css"

5
modules/ve-mw/init/styles/ve.init.mw.DesktopTarget-monobook.less
View file

@ -5,11 +5,6 @@
* @license The MIT License (MIT); see LICENSE.txt
*/
/* Global overlay is outside the #globalWrapper so apply the font size fix */
.ve-ui-overlay-global {
font-size: 1.28em; /* 0.8em / x-small */
}
/* stylelint-disable-next-line selector-class-pattern */
.mw-body a.external.ve-ce-linkAnnotation.ve-ce-annotation-active {
/* Monobook sets a background:url(); rule which overrides the colour. TODO: Fix upstream */

12
modules/ve-mw/init/styles/ve.init.mw.DesktopTarget-vector.less
View file

@ -15,11 +15,6 @@
}
}
.ve-ui-overlay-global {
/* Same as main content font-size in Vector */
font-size: 0.875em;
}
/* Slug animation needs more specific rules and skin-specific target margins */
.mw-body-content p.ve-ce-branchNode-newSlug {
margin: -0.3em 0 -0.1em 0;
@ -36,10 +31,3 @@
color: #72777d;
}
}
.ve-ui-overlay .mw-body-content {
/* Fix font-size for surfaces inside UI overlays */
/* Increase specificity to deal with :not selector hack in core's typography.less */
/* stylelint-disable-next-line declaration-no-important */
font-size: 1em !important;
}

2
modules/ve-mw/init/targets/ve.init.mw.DesktopArticleTarget.js
View file

@ -352,7 +352,7 @@ ve.init.mw.DesktopArticleTarget.prototype.loadSuccess = function () {
$( '#ca-edit' ).removeClass( 'visualeditor-showtabdialog' );
// Set up a temporary window manager
var windowManager = new OO.ui.WindowManager();
$( document.body ).append( windowManager.$element );
$( OO.ui.getTeleportTarget() ).append( windowManager.$element );
this.editingTabDialog = new mw.libs.ve.EditingTabDialog();
windowManager.addWindows( [ this.editingTabDialog ] );
windowManager.openWindow( this.editingTabDialog )

4
modules/ve-mw/preinit/ve.init.mw.DesktopArticleTarget.init.js
View file

@ -1490,7 +1490,7 @@
$( '#ca-edit' ).removeClass( 'visualeditor-showtabdialog' );
// Set up a temporary window manager
windowManager = new OO.ui.WindowManager();
$( document.body ).append( windowManager.$element );
$( OO.ui.getTeleportTarget() ).append( windowManager.$element );
editingTabDialog = new mw.libs.ve.EditingTabDialog();
windowManager.addWindows( [ editingTabDialog ] );
windowManager.openWindow( editingTabDialog )
@ -1541,7 +1541,7 @@
}
windowManager = new OO.ui.WindowManager();
welcomeDialog = new mw.libs.ve.WelcomeDialog();
$( document.body ).append( windowManager.$element );
$( OO.ui.getTeleportTarget() ).append( windowManager.$element );
windowManager.addWindows( [ welcomeDialog ] );
windowManager.openWindow(
welcomeDialog,

2
modules/ve-mw/ui/dialogs/ve.ui.MWConfirmationDialog.js
View file

@ -41,7 +41,7 @@ ve.ui.MWConfirmationDialog.static.size = 'small';
*/
ve.ui.MWConfirmationDialog.static.confirm = function ( prompt, successCmd ) {
var windowManager = new OO.ui.WindowManager();
$( document.body ).append( windowManager.$element );
$( OO.ui.getTeleportTarget() ).append( windowManager.$element );
var dialog = new ve.ui.MWConfirmationDialog();
windowManager.addWindows( [ dialog ] );
windowManager.openWindow( dialog, {

6
modules/ve-mw/ui/dialogs/ve.ui.MWSaveDialog.js
View file

@ -137,8 +137,6 @@ ve.ui.MWSaveDialog.prototype.setDiffAndReview = function ( wikitextDiffPromise,
diffElement.$document.addClass( [
'mw-body-content',
'mw-parser-output',
// HACK: T287733
mw.config.get( 'skin' ) === 'vector' || mw.config.get( 'skin' ) === 'vector-2022' ? 'vector-body' : null,
'mw-content-' + visualDiff.newDoc.getDir()
] );
ve.targetLinksToNewWindow( diffElement.$document[ 0 ] );
@ -645,9 +643,7 @@ ve.ui.MWSaveDialog.prototype.initialize = function () {
this.$previewHeading = $( '<h1>' ).addClass( 'firstHeading' );
this.$previewViewer = $( '<div>' ).addClass( [
'mw-body-content',
'mw-parser-output',
// HACK: T287733
mw.config.get( 'skin' ) === 'vector' || mw.config.get( 'skin' ) === 'vector-2022' ? 'vector-body' : null
'mw-parser-output'
] );
this.previewPanel.$element
// Make focusable for keyboard accessible scrolling

2
modules/ve-mw/ui/dialogs/ve.ui.MWTemplateDialog.js
View file

@ -37,7 +37,7 @@ ve.ui.MWTemplateDialog = function VeUiMWTemplateDialog( config ) {
this.preventReselection = false;
this.confirmDialogs = new ve.ui.WindowManager( { factory: ve.ui.windowFactory, isolate: true } );
$( document.body ).append( this.confirmDialogs.$element );
$( OO.ui.getTeleportTarget() ).append( this.confirmDialogs.$element );
};
/* Inheritance */

2
modules/ve-mw/ui/elements/ve.ui.MWFloatingHelpElement.js
View file

@ -39,7 +39,7 @@ ve.ui.MWFloatingHelpElement = function VeUiMWFloatingHelpElement( config ) {
this.windowManager.$element.addClass( 've-ui-mwFloatingHelpElement-windowManager' );
if ( OO.ui.isMobile() ) {
$( document.body ).append( this.windowManager.$element );
$( OO.ui.getTeleportTarget() ).append( this.windowManager.$element );
} else {
this.$element.append( this.windowManager.$element );
}

4
modules/ve-mw/ui/pages/ve.ui.MWTemplatesUsedPage.js
View file

@ -30,9 +30,7 @@ ve.ui.MWTemplatesUsedPage = function VeUiMWTemplatesUsedPage() {
} );
this.templatesUsedFieldset.$group.addClass( [
'mw-body-content',
// HACK: T287733
mw.config.get( 'skin' ) === 'vector' || mw.config.get( 'skin' ) === 'vector-2022' ? 'vector-body' : null
'mw-body-content'
] );
target.getContentApi().get( {

18
modules/ve-mw/ui/styles/tools/ve.ui.MWTargetWidget-vector.less
View file

@ -1,18 +0,0 @@
/*!
* VisualEditor MediaWiki Vector-specific MWTargetWidget styles.
*
* @copyright 2011-2022 VisualEditor Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
/* stylelint-disable-next-line selector-class-pattern */
.ve-ui-mwTargetWidget .ve-ui-surface.vector-body {
// Suppress the stacking context usually established by .vector-body (T314230).
// We wouldn't need to do this if the context menus and inspectors were appended to an overlay (T266521).
z-index: auto;
}
.ve-ui-mwTargetWidget > .ve-init-target > .mw-body-content {
// Remove top margin used by Vector 2022 in main content
margin-top: 0;
}

7
modules/ve-mw/ui/widgets/ve.ui.MWTargetWidget.js
View file

@ -19,13 +19,6 @@
ve.ui.MWTargetWidget = function VeUiMWTargetWidget( config ) {
this.surfaceClasses = ve.copy( config.surfaceClasses ) || [];
// HACK: T287733
// This assumes the target widget is being shown outside of vector-body, otherwise this
// will apply the class a second time and cause problems.
if ( mw.config.get( 'skin' ) === 'vector' || mw.config.get( 'skin' ) === 'vector-2022' ) {
this.surfaceClasses.push( 'vector-body' );
}
// Parent constructor
ve.ui.MWTargetWidget.super.apply( this, arguments );