Impress: add buttons for .uno:InsertCanvasSlide & .uno:ReshufflePages

- Add buttons for .uno:InsertCanvasSlide and .uno:ReshufflePages
- Create Widget.NewSlideLayoutEntry.ts for having both grid, and a
  separate button in the dropdown

Signed-off-by: Mohit Marathe <[email protected]>
Change-Id: I82120479cf599f9058a6151cda0827ea12c8d777

Author: mohit-marathe

browser/Makefile.am

@@ -459,6 +459,7 @@ COOL_JS_LST =\
 	src/control/jsdialog/Widget.MobileBorderSelector.js \
 	src/control/jsdialog/Widget.MobileTabControl.js \
 	src/control/jsdialog/Widget.MultilineEdit.js \
+	src/control/jsdialog/Widget.NewSlideLayoutEntry.ts \
 	src/control/jsdialog/Widget.OverflowGroup.ts \
 	src/control/jsdialog/Widget.OverflowManager.ts \
 	src/control/jsdialog/Widget.Progressbar.js \
@@ -1120,6 +1121,7 @@ pot:
 		src/control/jsdialog/Widget.PageSizeEntry.ts \
 		src/control/jsdialog/Widget.HTMLContent.ts \
 		src/control/jsdialog/Widget.MobileBorderSelector.js \
+		src/control/jsdialog/Widget.NewSlideLayoutEntry.ts \
 		src/control/jsdialog/Widget.RadioButton.ts \
 		src/control/jsdialog/Widget.SidebarContainers.ts \
 		src/control/jsdialog/Widget.TreeView.ts \

browser/css/toolbar.css

@@ -1934,3 +1934,24 @@ menu-entry-with-icon.padding-left + menu-entry-icon.width */
 	font-size: var(--default-font-size);
 	color: var(--color-main-text);
 }
+
+.slidelayout-button {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 8px;
+	cursor: pointer;
+	border-radius: 3px;
+	border: 1px solid transparent;
+	font-size: var(--default-font-size);
+	background-color: var(--color-background-lighter);
+}
+
+.slidelayout-button:hover {
+	background-color: var(--color-background-dark);
+}
+
+.slidelayout-button:focus {
+	outline: 2px solid var(--color-primary);
+	outline-offset: 2px;
+}

browser/src/control/Control.JSDialogBuilder.js

@@ -93,6 +93,7 @@ window.L.Control.JSDialogBuilder = window.L.Control.extend({
 		this._controlHandlers['radiobutton'] = JSDialog.RadioButton;
 		this._controlHandlers['progressbar'] = JSDialog.progressbar;
 		this._controlHandlers['pagemarginentry'] = JSDialog.pageMarginEntry;
+		this._controlHandlers['newslidelayoutentry'] = JSDialog.slideLayoutEntry;
 		this._controlHandlers['pagesizeentry'] = JSDialog.pageSizeEntry;
 		this._controlHandlers['checkbox'] = JSDialog.Checkbox;
 		this._controlHandlers['basespinfield'] = this.baseSpinField;

browser/src/control/Control.NotebookbarImpress.js

@@ -1304,6 +1304,7 @@ window.L.Control.NotebookbarImpress = window.L.Control.NotebookbarWriter.extend(
 	},
 
 	getFormatTab: function() {
+		const isODF = app.LOUtil.isFileODF(this.map);
 		var content = [
 			{
 				'type': 'overflowgroup',
@@ -1397,6 +1398,15 @@ window.L.Control.NotebookbarImpress = window.L.Control.NotebookbarWriter.extend(
 				],
 				'vertical': 'true'
 			},
+			{ type: 'separator', id: 'format-namedescription-break', orientation: 'vertical', 'visible': isODF && app.isExperimentalMode() },
+			{
+				'id': 'format-shuffle-pages',
+				'type': 'bigtoolitem',
+				'text': _UNO('.uno:ReshufflePages', 'presentation'),
+				'command': '.uno:ReshufflePages',
+				'visible': isODF && app.isExperimentalMode(),
+				'accessibility': { focusBack: true, combination: 'RP', de: null }
+			},
 		];
 
 		return this.getTabPage('Format', content);
@@ -1411,9 +1421,10 @@ window.L.Control.NotebookbarImpress = window.L.Control.NotebookbarWriter.extend(
 				'accessibility': { focusBack: true, combination: 'IP', de: null },
 				'children' : [
 					{
-						'id': 'insert-insert-slide',
-						'type': 'bigtoolitem',
-						'text': _UNO('.uno:InsertSlide', 'presentation'),
+						'id': 'home-create-slide:NewSlideLayoutMenu',
+						'type': 'menubutton',
+						'applyCallback': '.uno:InsertPage',
+						'text': _('New'),
 						'command': '.uno:InsertPage',
 						'accessibility': { focusBack: true, combination: 'IP', de: null }
 					},

browser/src/control/jsdialog/Definitions.Menu.ts

@@ -2265,7 +2265,13 @@ function generatePictureTransparencyMenu(
 menuDefinitions.set('NewSlideLayoutMenu', [
 	{
 		type: 'json',
-		content: generateLayoutPopupGrid('InsertPage'),
+		content: {
+			id: 'Layout-NewSlideLayoutMenu',
+			// _UNO('.uno:InsertCanvasSlide')
+			// Keep the above comment for unocommands.py
+			type: 'newslidelayoutentry',
+			gridContent: generateLayoutPopupGrid('InsertPage'),
+		},
 	},
 	{ type: 'separator' }, // required to show dropdown arrow
 ] as Array<MenuDefinition>);

browser/src/control/jsdialog/Widget.NewSlideLayoutEntry.ts

@@ -0,0 +1,57 @@
+/* -*- js-indent-level: 8 -*- */
+/*
+ * Copyright the Collabora Online contributors.
+ *
+ * SPDX-License-Identifier: MPL-2.0
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+/**
+ * Widget.NewSlideLayoutEntry.ts
+ *
+ * A JSDialog "json" widget for rendering the slide layout presets
+ * and the "New Slide Layout" link.
+ */
+declare var JSDialog: any;
+
+function createSlideLayoutEntryWidget(data: any, builder: any): HTMLElement {
+	const container = document.createElement('div');
+	container.className = 'slidelayout-popup-container';
+	// Build the grid first
+	const gridData = data.gridContent; // The grid from generateLayoutPopupGrid
+	const gridContainer = document.createElement('div');
+	builder.build(gridContainer, [gridData], false);
+	container.appendChild(gridContainer);
+	if (app.isExperimentalMode()) {
+		const hr = document.createElement('hr');
+		hr.className = 'jsdialog ui-separator horizontal';
+		container.appendChild(hr);
+
+		const button = document.createElement('div');
+		button.className = 'slidelayout-button';
+		button.id = 'newcanvasslide';
+		button.textContent = _('New Canvas Slide');
+		button.setAttribute('role', 'button');
+		button.setAttribute('tabindex', '0');
+		button.addEventListener('click', () => {
+			builder.map.sendUnoCommand('.uno:InsertCanvasSlide'); // or your command
+			builder.callback('dialog', 'close', { id: data.id }, null);
+		});
+
+		container.appendChild(button);
+	}
+	return container;
+}
+
+JSDialog.slideLayoutEntry = function (
+	parentContainer: Element,
+	data: any,
+	builder: any,
+) {
+	const widget = createSlideLayoutEntryWidget(data, builder);
+	parentContainer.appendChild(widget);
+	return false;
+};

browser/src/unocommands.js

@@ -373,6 +373,7 @@ var unoCommandsArray = {
 	'InsertAxisTitle':{global:{menu:_('Insert Axis Title'),},},
 	'InsertBookmark':{text:{context:_('Insert Bookmark'),menu:_('Bookmar~k...'),},},
 	'InsertBreak':{text:{menu:_('Manual ~Break...'),},},
+	'InsertCanvasSlide':{presentation:{menu:_('New Canvas Slide'),},},
 	'InsertCaptionDialog':{text:{context:_('Insert Caption...'),menu:_('Caption...'),},},
 	'InsertCell':{spreadsheet:{context:_('~Insert...'),menu:_('Insert ~Cells...'),},},
 	'InsertColumnBreak':{spreadsheet:{menu:_('~Column Break'),},text:{menu:_('Insert Column Break'),},},
@@ -531,6 +532,7 @@ var unoCommandsArray = {
 	'ResetAllDataPoints':{global:{menu:_('Reset all Data Points'),},},
 	'ResetAttributes':{global:{context:_('Clear Direct Formatting'),menu:_('~Clear Direct Formatting'),},spreadsheet:{context:_('Clear Direct Formatting'),menu:_('Clear ~Direct Formatting'),},text:{context:_('Clear Direct Formatting'),menu:_('Clear ~Direct Formatting'),},},
 	'ResetDataPoint':{global:{menu:_('Reset Data Point'),},},
+	'ReshufflePages':{presentation:{menu:_('Re-order pages'),},},
 	'RightPara':{global:{context:_('Align Right'),menu:_('Right'),},},
 	'RotateLeft':{text:{menu:_('Rotate 90° ~Left'),},},
 	'RotateMenu':{global:{menu:_('Rot~ate'),},},