wikimedia/mediawiki-extensions-VisualEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor synced 2024-11-15 10:35:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make sidebar header and search field sticky during scroll

Browse source 
The search field will stay at the top of the window while scrolling a
single template.  In multi-part transclusions, the header will also
be sticky.

Hides the template header in single-part transclusions.

Bug: T298618
Change-Id: Ib050e30a50ef965c1524e977d3a600c3ff836774
This commit is contained in:
Adam Wight 2022-01-13 10:47:24 +01:00 committed by WMDE-Fisch
parent 2819958a8a
commit a244f510c4
3 changed files with 34 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
modules/ve-mw/ui/styles/dialogs/ve.ui.MWTransclusionDialog.css
View file

@ -102,6 +102,20 @@
color: #72777d;
}
.ve-ui-mwTransclusionDialog-newSidebar.ve-ui-mwTransclusionDialog-single-transclusion .ve-ui-mwTransclusionOutlineButtonWidget {
display: none;
}
.ve-ui-mwTransclusionOutlineTemplateWidget-sticky {
background-color: #fff;
/* there's a weird space between the scrollable and the children that messes with sticky */
margin-top: -8px;
padding: 8px 0;
position: sticky;
top: 0;
z-index: 1;
}
.ve-ui-mwTransclusionDialog .oo-ui-bookletLayout .oo-ui-fieldsetLayout > .oo-ui-labelElement-label {
height: 1.5em;
overflow: hidden;
@ -260,6 +274,11 @@
width: auto;
}
.ve-ui-mwTransclusionOutlineTemplateWidget-searchWidget:last-child {
/* Workaround to override oo-ui-inputWidget:last-child rule */
margin-right: 24px;
}
.ve-ui-mwTransclusionOutlineTemplateWidget-no-match {
font-style: italic;
color: #72777d;
@ -281,5 +300,6 @@
}
.ve-ui-mwTransclusionOutlineToggleUnusedWidget {
margin: -4px 18px 8px 18px;
margin-top: -4px; /* reduce default margin to top element */
margin-left: 18px; /* align text of the button with surrounding elements */
}

6
modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlinePartWidget.js
View file

@ -64,8 +64,10 @@ ve.ui.MWTransclusionOutlinePartWidget = function VeUiMWTransclusionOutlinePartWi
replace: 'updateButtonAriaDescription'
} );
this.$element
.append( this.header.$element );
if ( !config.suppressHeader ) {
this.$element
.append( this.header.$element );
}
};
/* Inheritance */

12
modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineTemplateWidget.js
View file

@ -20,7 +20,9 @@ ve.ui.MWTransclusionOutlineTemplateWidget = function VeUiMWTransclusionOutlineTe
label: spec.getLabel(),
ariaDescriptionUnselected: ve.msg( 'visualeditor-dialog-transclusion-template-widget-aria' ),
ariaDescriptionSelected: ve.msg( 'visualeditor-dialog-transclusion-template-widget-aria-selected' ),
ariaDescriptionSelectedSingle: ve.msg( 'visualeditor-dialog-transclusion-template-widget-aria-selected-single' )
ariaDescriptionSelectedSingle: ve.msg( 'visualeditor-dialog-transclusion-template-widget-aria-selected-single' ),
// This subclass needs additional control over header structure.
suppressHeader: true
} );
// Initialization
@ -62,6 +64,11 @@ ve.ui.MWTransclusionOutlineTemplateWidget = function VeUiMWTransclusionOutlineTe
toggleUnusedFields: 'onToggleUnusedFields'
} );
var stickyRows = new OO.ui.Element( {
classes: [ 've-ui-mwTransclusionOutlineTemplateWidget-sticky' ],
content: [ this.header, this.searchWidget, this.toggleUnusedWidget ]
} );
this.parameters = new ve.ui.MWTransclusionOutlineParameterSelectWidget( {
items: parameterNames.map( this.createCheckbox.bind( this ) ),
ariaLabel: ve.msg( 'visualeditor-dialog-transclusion-param-selection-aria-label', spec.getLabel() ),
@ -73,10 +80,9 @@ ve.ui.MWTransclusionOutlineTemplateWidget = function VeUiMWTransclusionOutlineTe
} );
this.$element.append(
this.searchWidget.$element,
stickyRows.$element,
this.infoWidget.$element,
$parametersAriaDescription,
this.toggleUnusedWidget.$element,
this.parameters.$element
);
};