From a244f510c47af4dd7b0eaf9e13f3024e0cde206b Mon Sep 17 00:00:00 2001
From: Adam Wight <adam.wight@wikimedia.de>
Date: Thu, 13 Jan 2022 10:47:24 +0100
Subject: [PATCH] Make sidebar header and search field sticky during scroll

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
---
 .../dialogs/ve.ui.MWTransclusionDialog.css    | 22 ++++++++++++++++++-
 .../ve.ui.MWTransclusionOutlinePartWidget.js  |  6 +++--
 ....ui.MWTransclusionOutlineTemplateWidget.js | 12 +++++++---
 3 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/modules/ve-mw/ui/styles/dialogs/ve.ui.MWTransclusionDialog.css b/modules/ve-mw/ui/styles/dialogs/ve.ui.MWTransclusionDialog.css
index aabbf50b2c..2714b7053f 100644
--- a/modules/ve-mw/ui/styles/dialogs/ve.ui.MWTransclusionDialog.css
+++ b/modules/ve-mw/ui/styles/dialogs/ve.ui.MWTransclusionDialog.css
@@ -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 */
 }
diff --git a/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlinePartWidget.js b/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlinePartWidget.js
index 750fc46762..8407b07311 100644
--- a/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlinePartWidget.js
+++ b/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlinePartWidget.js
@@ -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 */
diff --git a/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineTemplateWidget.js b/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineTemplateWidget.js
index 96d13b528f..8fbf78fa23 100644
--- a/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineTemplateWidget.js
+++ b/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineTemplateWidget.js
@@ -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
 	);
 };