[Libreoffice-commits] online.git: loleaflet/css loleaflet/images loleaflet/src

[Szymon KÅ‚os (via logerrit)]

 loleaflet/css/notebookbar.css                |    5 ++
 loleaflet/images/lc_sidebar.svg              |    1 
 loleaflet/src/control/Control.Notebookbar.js |   55 ++++++++++++++++++++++++++-
 3 files changed, 59 insertions(+), 2 deletions(-)

New commits:
commit 0d57bb2872326daf1f23b6998699f89a111baa50
Author:     Szymon Kłos <szymon.klos at collabora.com>
AuthorDate: Tue Jul 21 09:30:04 2020 +0200
Commit:     Szymon Kłos <szymon.klos at collabora.com>
CommitDate: Tue Jul 21 10:23:55 2020 +0200

    notebookbar: add sidebar switch
    
    Change-Id: Ib64f0d99d428896680eae8ce5ae9109563ec5b76
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/99121
    Tested-by: Jenkins
    Reviewed-by: Szymon Kłos <szymon.klos at collabora.com>

diff --git a/loleaflet/css/notebookbar.css b/loleaflet/css/notebookbar.css
index d46b2f1dd..88c889986 100644
--- a/loleaflet/css/notebookbar.css
+++ b/loleaflet/css/notebookbar.css
@@ -68,6 +68,11 @@
 	margin-bottom: 3px;
 }
 
+/* options section */
+.notebookbar-options-section {
+	margin-left: 10px;
+}
+
 /* root container */
 
 .notebookbar-scroll-wrapper {
diff --git a/loleaflet/images/lc_sidebar.svg b/loleaflet/images/lc_sidebar.svg
new file mode 100644
index 000000000..75c2b7b52
--- /dev/null
+++ b/loleaflet/images/lc_sidebar.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m3 6h18v15h-18z" fill="#fff"/><path d="m3 2c-.554 0-1 .446-1 1v18c0 .554.446 1 1 1h18c.554 0 1-.446 1-1v-18c0-.554-.446-1-1-1zm0 4h18v15h-18z" fill="#808080"/><rect fill="#808080" height="1" ry=".5" width="12" x="6" y="11"/><rect fill="#4d82b8" height="1" ry=".5" width="4" x="6" y="15"/><path d="m10.5 14a1.5 1.5 0 0 0 -1.5 1.5 1.5 1.5 0 0 0 1.5 1.5 1.5 1.5 0 0 0 1.5-1.5 1.5 1.5 0 0 0 -1.5-1.5zm0 1a.5.5 0 0 1 .5.5.5.5 0 0 1 -.5.5.5.5 0 0 1 -.5-.5.5.5 0 0 1 .5-.5z" fill="#4d82b8"/><path d="m13.5 10c-.828427 0-1.5.671573-1.5 1.5s.671573 1.5 1.5 1.5 1.5-.671573 1.5-1.5-.671573-1.5-1.5-1.5z" fill="#808080"/><rect fill="#4d82b8" height="1" ry=".491011" width="7" x="11" y="15"/><g fill="#808080"><rect height="1" ry=".5" width="4" x="6" y="15"/><path d="m10.5 14a1.5 1.5 0 0 0 -1.5 1.5 1.5 1.5 0 0 0 1.5 1.5 1.5 1.5 0 0 0 1.5-1.5 1.5 1.5 0 0 0 -1.5-1.5zm0 1a.5.5 0 0 1 .5.5.5.5 0 0 1 -.5.5.5.5 0 0 1 -.5-.5.5.5 0 0 1 .5-.5z"/>
 <rect height="1" ry=".491011" width="7" x="11" y="15"/></g></svg>
\ No newline at end of file
diff --git a/loleaflet/src/control/Control.Notebookbar.js b/loleaflet/src/control/Control.Notebookbar.js
index 146888230..b1612cb06 100644
--- a/loleaflet/src/control/Control.Notebookbar.js
+++ b/loleaflet/src/control/Control.Notebookbar.js
@@ -3,9 +3,10 @@
  * L.Control.Notebookbar
  */
 
-/* global $ _ */
+/* global $ _ _UNO */
 L.Control.Notebookbar = L.Control.extend({
 
+	_optionsSectionWidth: 50,
 	_currentScrollPosition: 0,
 	_showNotebookbar: false,
 
@@ -79,6 +80,9 @@ L.Control.Notebookbar = L.Control.extend({
 		if (this._showNotebookbar === false)
 			this.hideTabs();
 
+		if (window.mode.isDesktop())
+			this.createOptionsSection();
+
 		this.scrollToLastPositionIfNeeded();
 	},
 
@@ -151,6 +155,8 @@ L.Control.Notebookbar = L.Control.extend({
 
 		$(left).css({'height': '80px'});
 		$(right).css({'height': '80px'});
+		if (window.mode.isDesktop())
+			$(right).css({'right':  this._optionsSectionWidth + 'px'});
 
 		$(left).click(function () {
 			var scroll = $('.notebookbar-scroll-wrapper').scrollLeft() - 300;
@@ -203,5 +209,50 @@ L.Control.Notebookbar = L.Control.extend({
 				}
 			}
 		}
-	}
+	},
+
+	getOptionsSectionData: function() {
+		return [
+			{
+				'id': 'optionscontainer',
+				'type': 'container',
+				'vertical': 'true',
+				'children': [
+					{
+						'id': 'optionstoolboxdown',
+						'type': 'toolbox',
+						'children': [
+							{
+								'type': 'toolitem',
+								'text': _UNO('.uno:Sidebar', '', true),
+								'command': '.uno:Sidebar'
+							},
+							{
+								'type': 'toolitem',
+								// dummy node to avoid creating labels
+							}
+						]
+					}
+				]
+			}
+		];
+	},
+
+	createOptionsSection: function() {
+		$('.notebookbar-options-td').remove();
+		var optionsTd = L.DomUtil.create('td', 'notebookbar-options-td');
+		$(optionsTd).css('width', this._optionsSectionWidth + 'px');
+
+		var optionsSection = L.DomUtil.create('div', 'notebookbar-options-section', optionsTd);
+		$('#toolbar-up').parent().append(optionsTd);
+
+		var builderOptions = {
+			mobileWizard: this,
+			map: this.map,
+			cssClass: 'notebookbar',
+		};
+
+		var builder = new L.control.notebookbarBuilder(builderOptions);
+		builder.build(optionsSection, this.getOptionsSectionData());
+	},
 });