cci(page): add toolbar hide/collapse

Author: ChlodAlejandro

i18n/core/en.json

@@ -93,6 +93,11 @@
     "deputy.session.revision.new.tooltip": "This edit created a new page.",
     "deputy.session.revision.missing": "The revision [[Special:Diff/$1|$1]] could not be found. It may have been deleted or suppressed.",
 
+    "deputy.session.page.close": "Minimize the toolbar to the sidebar",
+    "deputy.session.page.collapse": "Collapse the toolbar",
+    "deputy.session.page.expand": "Expand the toolbar",
+    "deputy.session.page.open": "Open Deputy toolbar",
+    "deputy.session.page.open.tooltip": "Open the Deputy page toolbar",
     "deputy.session.page.diff.previous": "Navigate to the previous unassessed revision",
     "deputy.session.page.diff.next": "Navigate to the next unassessed revision",
     "deputy.session.page.diff.loadFail": "Failed to load diff. Please check your internet connection and try again.",

src/config/UserConfiguration.ts

@@ -1,14 +1,19 @@
 import Setting from './Setting';
 import MwApi from '../MwApi';
 import { CopyrightProblemsResponseSet } from '../modules/ia/models/CopyrightProblemsResponse';
-import { generateEnumConfigurationProperties, PortletNameView } from './types';
+import {
+	generateEnumConfigurationProperties,
+	generateEnumSerializers,
+	PortletNameView
+} from './types';
 import { CompletionAction, TripleCompletionAction } from '../modules/shared/CompletionAction';
 import { EnumValue } from '../types';
 import DeputyVersion from '../DeputyVersion';
 import ConfigurationBase from './ConfigurationBase';
 import {
 	ContributionSurveyRowSigningBehavior
 } from '../models/ContributionSurveyRowSigningBehavior';
+import { DeputyPageToolbarState } from '../ui/page/DeputyPageToolbarState';
 import error from '../util/error';
 
 /**
@@ -159,6 +164,14 @@ export default class UserConfiguration extends ConfigurationBase {
 			displayOptions: {
 				type: 'checkbox'
 			}
+		} ),
+		toolbarInitialState: new Setting<
+			EnumValue<typeof DeputyPageToolbarState>,
+			DeputyPageToolbarState
+		>( {
+			...generateEnumSerializers( DeputyPageToolbarState, DeputyPageToolbarState.Open ),
+			defaultValue: DeputyPageToolbarState.Open,
+			displayOptions: { hidden: true }
 		} )
 	};
 	public readonly ante = <const>{

src/config/types.ts

@@ -1,5 +1,23 @@
 import fromObjectEntries from '../util/fromObjectEntries';
 import { DisplayOptions } from './Setting';
+/**
+ * Generates serializer and deserializer for serialized <b>string</b> enums.
+ *
+ * Trying to use anything that isn't a string enum here (union enum, numeral enum)
+ * will likely cause serialization/deserialization failures.
+ *
+ * @param _enum
+ * @param defaultValue
+ * @return An object containing a `serializer` and `deserializer`.
+ */
+export function generateEnumSerializers<T>( _enum: T, defaultValue?: T[keyof T] ) {
+	return {
+		serialize: ( value: typeof _enum[keyof typeof _enum] ) =>
+			value === defaultValue ? undefined : value,
+		deserialize: ( value: any ) =>
+			value as typeof _enum[keyof typeof _enum]
+	};
+}
 
 /**
  * Generates configuration properties for serialized <b>string</b> enums.
@@ -16,10 +34,7 @@ export function generateEnumConfigurationProperties<T>(
 	defaultValue?: T[keyof T],
 ) {
 	return {
-		serialize: ( value: typeof _enum[keyof typeof _enum] ) =>
-			value === defaultValue ? undefined : value,
-		deserialize: ( value: any ) =>
-			value as typeof _enum[keyof typeof _enum],
+		...generateEnumSerializers( _enum, defaultValue ),
 		displayOptions: <DisplayOptions>{
 			type: 'radio'
 		},

src/css/deputy.css

@@ -400,15 +400,78 @@ body.mediawiki.rtl .dp-cs-row-head > :not(:first-child):not(:last-child) {
 	left: 8px;
 	z-index: 100;
 
-	padding: 8px;
 	background-color: #fff;
 	border: 1px solid gray;
 	font-size: 0.9rem;
 
 	display: flex;
+}
+
+.dp-pageToolbar .dp-pageToolbar-main {
+	padding: 8px;
+	display: flex;
 	align-items: center;
 }
 
+.dp-pageToolbar-actions {
+	width: 12px;
+	display: flex;
+	flex-direction: column;
+	font-size: 12px;
+	line-height: 1em;
+}
+
+.dp-pageToolbar-close {
+	cursor: pointer;
+	height: 12px;
+	text-align: center;
+	background-color: rgba(0, 0, 0, 0.25);
+}
+
+.dp-pageToolbar-close:hover {
+	transition: background-color 0.1s ease-in-out;
+	background-color: rgba(0, 0, 0, 0.4);
+}
+
+.dp-pageToolbar-close::before {
+	content: '×';
+	vertical-align: middle;
+	position: relative;
+	right: 1px;
+}
+
+.dp-pageToolbar-collapse {
+	cursor: pointer;
+	flex: 1;
+	background-color: rgba(0, 0, 0, 0.125);
+	text-align: center;
+	writing-mode: vertical-rl;
+	position: relative;
+}
+
+.dp-pageToolbar-collapse:hover {
+	transition: background-color 0.1s ease-in-out;
+	background-color: rgba(0, 0, 0, 0.25);
+}
+
+.dp-pageToolbar-collapse::before {
+	content: '»';
+	position: absolute;
+	vertical-align: middle;
+	width: 12px;
+	left: 0;
+	bottom: 2px;
+}
+
+.dp-pageToolbar-collapsed {
+	cursor: pointer;
+	width: 32px;
+	height: 32px;
+	/* logo-white.svg */
+	background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDgwIDEwODAiIHdpZHRoPSIxMDgwIiBoZWlnaHQ9IjEwODAiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojMDI5N2IxO308L3N0eWxlPjwvZGVmcz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik04NzcuNTQsNDM4LjY5YTQzNy41NCw0MzcuNTQsMCwwLDEtODQuMzgsMjU4Ljc4bDI2Ny4wNiwyNjcuMjJhNjcuNTYsNjcuNTYsMCwxLDEtOTUuNTYsOTUuNTRMNjk3LjYsNzkzYTQzNi4yNyw0MzYuMjcsMCwwLDEtMjU4LjgzLDg0LjM2QzE5Ni4zOSw4NzcuMzcsMCw2ODEsMCw0MzguNjlTMTk2LjM5LDAsNDM4Ljc3LDAsODc3LjU0LDE5Ni4zNSw4NzcuNTQsNDM4LjY5Wk00MzguNzcsNzQyLjM5YzE2Ny43LDAsMzAzLjc3LTEzNiwzMDMuNzctMzAzLjdTNjA2LjQ3LDEzNSw0MzguNzcsMTM1LDEzNSwyNzEsMTM1LDQzOC42OSwyNzEuMDcsNzQyLjM5LDQzOC43Nyw3NDIuMzlaIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNTI0LjgzLDUxNS4yOGExMDQuODUsMTA0Ljg1LDAsMCwxLTE0OS40MSwwYy00MS41LTQxLjg3LTQxLjUtMTEwLDAtMTUxLjk1YTEwNC45MiwxMDQuOTIsMCwwLDEsMTQ5LjUxLjA4QTUwLjc2LDUwLjc2LDAsMCwwLDU5NywyOTEuOWEyMDYuNDQsMjA2LjQ0LDAsMCwwLTI5My41NSwwYy04MC41Nyw4MS4yNy04MC41NywyMTMuNTMsMCwyOTQuODNBMjA1LjI1LDIwNS4yNSwwLDAsMCw0NTAuMTgsNjQ4aDBBMjA1LjMsMjA1LjMsMCwwLDAsNTk3LDU4Ni43MWE1MC43Nyw1MC43NywwLDAsMC03Mi4xNi03MS40M1oiLz48L3N2Zz4=') no-repeat center;
+	background-size: 24px;
+}
+
 @media only screen and (max-width: 768px) {
 	.dp-pageToolbar {
 		flex-wrap: wrap;

src/session/DeputyPageSession.ts

@@ -40,7 +40,6 @@ export default class DeputyPageSession {
 	readonly sessionCloseHandler = this.onSessionClosed.bind( this );
 
 	/**
-	 *
 	 * @param data
 	 */
 	init( data: DeputyPageStatusResponseMessage ) {

src/ui/page/DeputyPageToolbar.tsx

@@ -18,6 +18,8 @@ import DeputyPageMenu, { DeputyPageMenuOption } from './DeputyPageMenu';
 import deputyPageAnalysisOptions from './DeputyPageAnalysisOptions';
 import deputyPageTools from './DeputyPageTools';
 import error from '../../util/error';
+import { DeputyPageToolbarState } from './DeputyPageToolbarState';
+import log from '../../util/log';
 
 export interface DeputyPageToolbarOptions extends Omit<DeputyPageStatusResponseMessage, 'type'> {
 	/**
@@ -59,6 +61,8 @@ export default class DeputyPageToolbar implements DeputyUIElement {
 	 */
 	revision?: number;
 
+	state = DeputyPageToolbarState.Open;
+
 	readonly instanceId = generateId();
 	readonly revisionStatusUpdateListener = this.onRevisionStatusUpdate.bind( this );
 
@@ -73,6 +77,7 @@ export default class DeputyPageToolbar implements DeputyUIElement {
 			this.revision = options.revision ?? mw.config.get( 'wgRevisionId' );
 		}
 
+		this.state = window.deputy.config.cci.toolbarInitialState.get();
 		this.runAsyncJobs();
 	}
 
@@ -389,17 +394,80 @@ export default class DeputyPageToolbar implements DeputyUIElement {
 		</div>;
 	}
 
+	/**
+	 * Rends the page toolbar actions and main section, if the dropdown is open.
+	 */
+	renderOpen(): JSX.Element[] {
+		return [
+			<div class="dp-pageToolbar-actions">
+				<div
+					class="dp-pageToolbar-close"
+					role="button"
+					title={ mw.msg( 'deputy.session.page.close' ) }
+					onClick={ () => this.setState( DeputyPageToolbarState.Hidden ) }
+				/>
+				<div
+					class="dp-pageToolbar-collapse"
+					role="button"
+					title={ mw.msg( 'deputy.session.page.collapse' ) }
+					onClick={ () => this.setState( DeputyPageToolbarState.Collapsed ) }
+				/>
+			</div>,
+			<div class="dp-pageToolbar-main">
+				{ this.renderStatusDropdown() }
+				{ this.renderCaseInfo() }
+				{ this.renderRevisionInfo() }
+				{ this.revisionNavigationSection =
+					this.renderRevisionNavigationButtons() as HTMLElement }
+				{ this.renderMenus() }
+			</div>
+		];
+	}
+
+	/**
+	 * Renders the collapsed toolbar button.
+	 *
+	 * @return The render button, to be included in the main toolbar.
+	 */
+	renderCollapsed(): JSX.Element {
+		return <div
+			class="dp-pageToolbar-collapsed"
+			role="button"
+			title={ mw.msg( 'deputy.session.page.expand' ) }
+			onClick={ () => this.setState( DeputyPageToolbarState.Open ) }
+		/>;
+	}
+
 	/**
 	 * @inheritDoc
 	 */
 	render(): HTMLElement {
+		console.log( this.state );
+		if ( this.state === DeputyPageToolbarState.Hidden ) {
+			const portletLink = mw.util.addPortletLink(
+				'p-tb',
+				'#',
+				mw.msg( 'deputy.session.page.open' ),
+				'pt-dp-pt',
+				mw.msg( 'deputy.session.page.open.tooltip' )
+			);
+			portletLink.querySelector( 'a' ).addEventListener( 'click', ( event ) => {
+				event.preventDefault();
+				this.setState( DeputyPageToolbarState.Open );
+				return false;
+			} );
+			// Placeholder element
+			return this.element = <div class="deputy" /> as HTMLElement;
+		} else {
+			const toolbar = document.getElementById( 'pt-dp-pt' );
+			if ( toolbar ) {
+				removeElement( toolbar );
+			}
+		}
+
 		return this.element = <div class="deputy dp-pageToolbar">
-			{ this.renderStatusDropdown() }
-			{ this.renderCaseInfo() }
-			{ this.renderRevisionInfo() }
-			{ this.revisionNavigationSection =
-				this.renderRevisionNavigationButtons() as HTMLElement }
-			{ this.renderMenus() }
+			{ this.state === DeputyPageToolbarState.Open && this.renderOpen() }
+			{ this.state === DeputyPageToolbarState.Collapsed && this.renderCollapsed() }
 		</div> as HTMLElement;
 	}
 
@@ -415,6 +483,20 @@ export default class DeputyPageToolbar implements DeputyUIElement {
 		this.nextRevisionButton?.setDisabled( disabled );
 	}
 
+	/**
+	 * Sets the display state of the toolbar. This will also set the
+	 * initial state configuration option for the user.
+	 *
+	 * @param state
+	 */
+	setState( state: DeputyPageToolbarState ) {
+		this.state = state;
+		window.deputy.config.cci.toolbarInitialState.set( state );
+		window.deputy.config.save();
+
+		swapElements( this.element, this.render() );
+	}
+
 	/**
 	 * Performs cleanup and removes the element from the DOM.
 	 */

src/ui/page/DeputyPageToolbarState.ts

@@ -0,0 +1,5 @@
+export enum DeputyPageToolbarState {
+	Open,
+	Collapsed,
+	Hidden
+}