Notebookbar: Add in-app Settings dialog to File tab

Signed-off-by: Mohit Marathe <mohit.marathe@collabora.com>
Change-Id: I192fa7292248b8f552226c44cf110efb010aff81

Author: mohit-marathe

browser/Makefile.am

@@ -192,7 +192,8 @@ COOL_CSS_LST =\
 	$(srcdir)/css/jquery-ui-lightness.css \
 	$(srcdir)/css/infobar.css \
 	$(srcdir)/css/tooltip.css \
-	$(srcdir)/css/progressbar.css
+	$(srcdir)/css/progressbar.css \
+	$(srcdir)/css/settings.css
 
 COOL_CSS = $(filter %,$(COOL_CSS_LST))
 
@@ -389,6 +390,7 @@ COOL_JS_LST =\
 	src/map/handler/Map.KeyboardShortcuts.ts \
 	src/map/handler/Map.Welcome.js \
 	src/map/handler/Map.Feedback.js \
+	src/map/handler/Map.Settings.ts \
 	src/map/handler/Map.VersionBar.js \
 	src/dom/DomEvent.MultiClick.js \
 	src/map/handler/Map.Mouse.js \
@@ -1120,6 +1122,7 @@ pot:
 		src/map/handler/Map.VersionBar.js \
 		src/map/handler/Map.WOPI.js \
 		src/map/handler/Map.Welcome.js \
+		src/map/handler/Map.Settings.ts \
 		src/slideshow/PauseTimer.ts \
 		src/slideshow/PresenterConsole.js \
 		src/slideshow/SlideShowPresenter.ts

browser/admin/src/integrator/AdminIntegratorSettings.ts

@@ -66,6 +66,35 @@ const initTranslationStr = () => {
 		document.documentElement.getAttribute('lang') || String.defaultLocale;
 };
 
+const onLoaded = () => {
+	window.addEventListener('message', onMessage, false);
+	window.parent.postMessage('{"MessageId":"settings-ready"}', '*');
+};
+
+const onMessage = (e) => {
+	try {
+		const data = JSON.parse(e.data);
+		if (e.origin === window.origin && window.parent !== window.self) {
+			if (data.MessageId === 'settings-ready')
+				window.parent.postMessage('{"MessageId":"settings-show"}', '*');
+			else if (data.MessageId === 'settings-save-all') {
+				const saveButtons = [
+					'xcu-save-button',
+					'browser-settings-save-button',
+					'document-settings-save-button',
+				];
+				for (const i in saveButtons) {
+					const button = document.getElementById(saveButtons[i]);
+					button?.click();
+				}
+			}
+		}
+	} catch (err) {
+		console.error('Could not process postmessage:', err);
+		return;
+	}
+};
+
 const defaultBrowserSetting: Record<string, any> = {
 	compactMode: {
 		value: false,
@@ -347,7 +376,7 @@ class SettingIframe {
 
 			if (!response.ok) {
 				console.error(
-					'something wend wrong shared config response',
+					'something went wrong shared config response',
 					response.text(),
 				);
 				throw new Error(
@@ -1609,3 +1638,4 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 
 (window as any)._ = _;
+(window as any).onload = onLoaded;

browser/admin/src/integrator/Xcu.ts

@@ -397,7 +397,7 @@ class Xcu {
 
 		const resetButton = document.createElement('button');
 		resetButton.type = 'button';
-		resetButton.id = 'xcu-reset-button';
+		resetButton.id = 'document-settings-reset-button';
 		resetButton.classList.add('button', 'button--vue-secondary');
 		resetButton.title = _('Reset to default Document settings');
 		resetButton.innerHTML = `
@@ -426,7 +426,7 @@ class Xcu {
 
 		const saveButton = document.createElement('button');
 		saveButton.type = 'button';
-		saveButton.id = 'xcu-save-button';
+		saveButton.id = 'document-settings-save-button';
 		saveButton.classList.add('button', 'button-primary');
 		saveButton.title = _('Save Document settings');
 		saveButton.innerHTML = `

browser/css/settings.css

@@ -0,0 +1,46 @@
+.iframe-settings-wrap {
+	position: fixed;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+}
+
+.iframe-settings-content {
+	position: relative;
+	z-index: 1106;
+	display: flex;
+	flex-direction: column;
+	width: 700px;
+	height: 512px;
+	justify-content: center;
+}
+
+.iframe-settings-modal {
+	display: flex;
+	max-width: 700px;
+	min-height: 460px;
+	justify-content: center;
+	align-items: center;
+	border: 0;
+}
+
+#iframe-settings-save {
+	color: var(--color-primary-text);
+	background-color: var(--color-primary);
+}
+
+#allConfigSection {
+	padding-left: 5px;
+}
+
+.jsdialog.ui-button-box-right {
+	margin-inline-end: 0px
+}
+
+#xcu-save-button, #xcu-reset-button, #browser-settings-reset-button, #browser-settings-save-button, #document-settings-reset-button, #document-settings-save-button {
+	display: none;
+}
+
+.section {
+	padding-top: 0px;
+}

browser/html/cool.html.m4

@@ -293,6 +293,7 @@ m4_ifelse(MOBILEAPP, [true],
       data-indirection-url = "%INDIRECTION_URL%"
       data-geolocation-setup = "%GEOLOCATION_SETUP%"
       data-canvas-slideshow-enabled = "%CANVAS_SLIDESHOW_ENABLED%"
+      data-wopi-setting-base-url = "%WOPI_SETTING_BASE_URL%"
       />
     ])
 

browser/images/lc_settings.svg

@@ -267,6 +267,7 @@ class InitializerBase {
 		window.indirectionUrl = "";
 		window.geolocationSetup = false;
 		window.canvasSlideshowEnabled = false;
+		window.wopiSettingBaseUrl = element.dataset.wopiSettingBaseUrl;
 
 		window.tileSize = 256;
 
@@ -411,6 +412,7 @@ class BrowserInitializer extends InitializerBase {
 		window.indirectionUrl = element.dataset.indirectionUrl;
 		window.geolocationSetup = element.dataset.geolocationSetup.toLowerCase().trim() === "true";
 		window.canvasSlideshowEnabled = element.dataset.canvasSlideshowEnabled.toLowerCase().trim() === "true";
+		window.wopiSettingBaseUrl = element.dataset.wopiSettingBaseUrl;
 	}
 
 	postMessageHandler(e) {

browser/js/global.js

@@ -2183,6 +2183,8 @@ class Menubar extends L.Control {
 			|| id === 'print-all-sheets'
 			|| id === 'serveraudit') {
 			app.dispatcher.dispatch(id);
+		} else if (id === ('settings-dialog')) {
+			this._map.settings.showSettingsDialog();
 		} else if (id === 'insertcomment') {
 			this._map.insertComment();
 		} else if (id === 'insert-signatureline') {

browser/src/control/Control.Menubar.ts

@@ -44,6 +44,7 @@ L.Control.NotebookbarBuilder = L.Control.JSDialogBuilder.extend({
 		this._toolitemHandlers['.uno:Save'] = this._saveControl;
 		this._toolitemHandlers['.uno:SaveAs'] = this._saveAsControl;
 		this._toolitemHandlers['.uno:Print'] = this._printControl;
+		this._toolitemHandlers['.uno:Settings'] = this._onlineHelpControl;
 		this._toolitemHandlers['.uno:InsertPageHeader'] = this._headerFooterControl;
 		this._toolitemHandlers['.uno:InsertPageFooter'] = this._headerFooterControl;
 		this._toolitemHandlers['.uno:Text'] = this._insertTextBoxControl;

browser/src/control/Control.NotebookbarBuilder.js

@@ -362,6 +362,22 @@ L.Control.NotebookbarCalc = L.Control.NotebookbarWriter.extend({
 			);
 		}
 
+		if (window.wopiSettingBaseUrl) {
+			content.push({
+				'type': 'separator',
+				'id': 'file-properties-break',
+				'orientation': 'vertical'
+			});
+
+			content.push({
+				'id': 'settings-dialog',
+				'type': 'bigtoolitem',
+				'text': _('Options'),
+				'command': '.uno:Settings',
+				'accessibility': { focusBack: false, combination: 'T', de: null }
+			});
+		}
+
 		return this.getTabPage('File', content);
 	},