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

Pedro Pinto Silva (via logerrit) logerrit at kemper.freedesktop.org
Mon Jul 20 07:35:44 UTC 2020


 loleaflet/css/device-mobile.css              |    4 
 loleaflet/css/jquery-ui-lightness.css        |   35 +++++---
 loleaflet/css/loleaflet.css                  |   31 ++++++-
 loleaflet/css/menubar.css                    |    7 +
 loleaflet/css/mobilewizard.css               |    2 
 loleaflet/css/notebookbar.css                |   43 +++++++---
 loleaflet/css/spreadsheet.css                |    8 -
 loleaflet/css/toolbar.css                    |   17 ++-
 loleaflet/docs/css/main.css                  |    5 -
 loleaflet/images/lc_keyboard-shortcuts.svg   |  116 +++++++++++++++++++++++++++
 loleaflet/images/lc_online-help.svg          |    1 
 loleaflet/images/lc_report-an-issue.svg      |    1 
 loleaflet/src/control/Control.Notebookbar.js |   11 ++
 13 files changed, 235 insertions(+), 46 deletions(-)

New commits:
commit 515fee128b1146238b40f87ddb172b7aff9ad2f5
Author:     Pedro Pinto Silva <pedro.silva at collabora.com>
AuthorDate: Tue Jul 14 14:09:06 2020 +0200
Commit:     Pedro Silva <pedro.silva at collabora.com>
CommitDate: Mon Jul 20 09:35:25 2020 +0200

    Notebookbar: styling
    
    - Overall styling
    - Fix tab’ alignment and paddings
    - Fix tabs’ states
    - Make use of text-shadow to emphasize instead of changing font-weight in order to avoid changes in size
    - Add document-type class in notebookbar (similar to what I did for menubar)
    - Style jquery-ui tooltips
    - Style .unolabel
    - Start to use css --var for font and colors (still no changes in the code per sea [like reducing the values etc] just start using it)
    -- add comments
    -- Use it depending on doc-type for notebookbar tab unolabel
    - Add missing icons
    - Fix extra border (toolbar-wrapper)
    - Add document-header
    
    Change-Id: I24552b118657d8ead47a74a6d189bd2448aac808
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/98721
    Tested-by: Jenkins
    Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice at gmail.com>
    Reviewed-by: Pedro Silva <pedro.silva at collabora.com>

diff --git a/loleaflet/css/device-mobile.css b/loleaflet/css/device-mobile.css
index 2207215ac..d84beba63 100644
--- a/loleaflet/css/device-mobile.css
+++ b/loleaflet/css/device-mobile.css
@@ -324,7 +324,7 @@ div#w2ui-overlay-actionbar.w2ui-overlay{
 }
 .vex-dialog-message {
 	text-align: center;
-	font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif !important;
+	font-family: var(--vex-font) !important;
 	font-size: 1em !important;
 	font-weight: 600 !important;
 }
@@ -347,7 +347,7 @@ div#w2ui-overlay-actionbar.w2ui-overlay{
 	color: #000 !important;
 }
 .vex-dialog-input {
-	font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif !important;
+	font-family: var(--vex-font) !important;
 	font-size: 0.8em;
 }
 .vex.vex-theme-plain .vex-content {
diff --git a/loleaflet/css/jquery-ui-lightness.css b/loleaflet/css/jquery-ui-lightness.css
index 6b7ec6aaf..24085cf9d 100644
--- a/loleaflet/css/jquery-ui-lightness.css
+++ b/loleaflet/css/jquery-ui-lightness.css
@@ -871,19 +871,10 @@ button.ui-button::-moz-focus-inner {
 	padding: 1em 1.4em;
 	background: none;
 }
-.ui-tooltip {
-	padding: 8px;
-	position: absolute;
-	z-index: 9999;
-	max-width: 300px;
-}
-body .ui-tooltip {
-	border-width: 2px;
-}
 /* Component containers
 ----------------------------------*/
 .ui-widget {
-	font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
+	font-family: var(--jquery-ui-font);
 	font-size: 1.1em;
 }
 .ui-widget .ui-widget {
@@ -893,7 +884,7 @@ body .ui-tooltip {
 .ui-widget select,
 .ui-widget textarea,
 .ui-widget button {
-	font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
+	font-family: var(--jquery-ui-font);
 	font-size: 1em;
 }
 .ui-widget.ui-widget-content {
@@ -917,6 +908,24 @@ body .ui-tooltip {
 	color: #ffffff;
 }
 
+/*Tooltips
+----------------------------------*/
+.ui-tooltip {
+	padding: 7px 9px;
+	position: absolute;
+	z-index: 9999;
+	max-width: 300px;
+	background: #2a2a2a;
+}
+body .ui-tooltip {
+	border-width: 2px;
+}
+.ui-tooltip-content {
+	font-size: 0.8em;
+	color: #fff;
+	background: #2a2a2a;
+}
+
 /* Interaction states
 ----------------------------------*/
 .ui-state-default,
@@ -1306,6 +1315,6 @@ a.ui-button:active,
 	filter: Alpha(Opacity=50); /* support: IE8 */
 }
 .ui-widget-shadow {
-	-webkit-box-shadow: -5px -5px 5px #000000;
-	box-shadow: -5px -5px 5px #000000;
+	-webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.15);
+	box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.15);
 }
diff --git a/loleaflet/css/loleaflet.css b/loleaflet/css/loleaflet.css
index 97c47ab97..c48eaca1b 100644
--- a/loleaflet/css/loleaflet.css
+++ b/loleaflet/css/loleaflet.css
@@ -1,3 +1,24 @@
+:root {
+	/*All used fonts (except w2ui)
+	----------------------------------*/
+	--loleaflet-font: 'Segoe UI', Tahoma, Arial, Helvetica, sans-serif;
+	/*investigate what are the drawback in consisntly use --loleaflet-fonts
+	for vex, jquery-ui and perhaps mobile*/
+	--mobile-font: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
+	--vex-font: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
+	--jquery-ui-font: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
+
+	--docs-font: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	--docs--pre-font: 'Consolas', 'Menlo', 'Lucida Console', 'Courier New', monospace;
+
+	/*LibreOffice Colors: https://wiki.documentfoundation.org/Marketing/Branding#Colors
+	----------------------------------[to do]*/
+	--blue1-txt-primary-color: #0369A3;
+	--green0-txt-primary-color: #106802; /*green1 lacks contrast against white*/
+	--orange1-txt-primary-color: #A33E03;
+	
+	--gray-light-txt--color: #696969;
+}
 #document-container {
 	border-top: 1px solid #B6B6B6;
 	background: #DFDFDF;
@@ -171,7 +192,7 @@ body {
 	table-layout: fixed;
 	border-collapse: collapse;
 	width: 100%;
-	border-top: 1px solid #bbbbbb;
+	border-top: none;
 }
 
 #toolbar-logo {
@@ -219,7 +240,7 @@ body {
 }
 
 .loleaflet-font {
-	font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif !important;
+	font-family: var(--loleaflet-font) !important;
 	font-size: 12px !important;
 	font-weight: normal !important;
 }
@@ -274,7 +295,7 @@ body {
 /* Important to override context-menu-icon's font-family here otherwise, jquery-contextmenu.css
  * will try to load its own font file which is not available in dist/ */
 .context-menu-icon::before {
-	font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif !important;
+	font-family: var(--loleaflet-font) !important;
 	content: '\2713';
 	color: #000 !important;
 }
@@ -299,7 +320,7 @@ body {
 
 .loleaflet-annotation-content-wrapper, .loleaflet-annotation-redline-content-wrapper {
 	padding: 8px;
-	font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif !important;
+	font-family: var(--loleaflet-font) !important;
 	font-size: 13px;
 	text-align: left;
 	background-color: #efefef;
@@ -346,7 +367,7 @@ body {
 }
 
 .loleaflet-annotation-textarea {
-	font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif !important;
+	font-family: var(--loleaflet-font) !important;
 	font-size: 13px;
 	border: 1px solid #c8c8c8;
 	background-color: white;
diff --git a/loleaflet/css/menubar.css b/loleaflet/css/menubar.css
index cab048379..07ca96221 100644
--- a/loleaflet/css/menubar.css
+++ b/loleaflet/css/menubar.css
@@ -50,6 +50,11 @@
     white-space: nowrap;
 }
 
+.main-nav.hasnotebookbar{
+	background: #efefef;
+	margin-top: 0px;
+}
+
 /* Customizations to sm-simple theme to make it look like LO menu, lo-menu class */
 .lo-menu {
     border: none;
@@ -59,7 +64,7 @@
 }
 
 .lo-menu a, .lo-menu a:hover, .lo-menu a:focus, .lo-menu a:active {
-    font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
+    font-family: var(--loleaflet-font);
     font-size: 12px;
     line-height: 15px;
 }
diff --git a/loleaflet/css/mobilewizard.css b/loleaflet/css/mobilewizard.css
index 5442e96c3..549e7b40b 100644
--- a/loleaflet/css/mobilewizard.css
+++ b/loleaflet/css/mobilewizard.css
@@ -269,7 +269,7 @@ p.mobile-wizard.ui-combobox-text.selected {
 }
 
 #mobile-wizard-content *{
-	font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
+	font-family: var(--mobile-font);
 	color: #212121;
 }
 
diff --git a/loleaflet/css/notebookbar.css b/loleaflet/css/notebookbar.css
index a7fcfc57f..d46b2f1dd 100644
--- a/loleaflet/css/notebookbar.css
+++ b/loleaflet/css/notebookbar.css
@@ -4,27 +4,49 @@
 .ui-tabs.notebookbar {
 	display: inline-block;
 	z-index: 1000;
+	padding: 0px;
+	height: 100%;
 }
 
 .ui-tab.notebookbar {
 	float: left;
-	margin-right: 10px;
 	font-size: 12pt;
+	font-family: var(--loleaflet-font);
+	line-height: 20px;
+	color: dimgray;
+	height: 24px;
+	padding: 0px 1em;
+	background: #efefef;
+	padding-top: 7px;
 }
 
 .ui-tab.selected.notebookbar {
 	border: none;
-	color: #0b87e7;
 	border-radius: 0px;
-	border-bottom: solid 1px #0b87e7;
-	font-weight: bold;
+	background: #fff;
+	box-shadow: 0 6px 0px 0px white, 0px 0 8px -4px rgba(105, 105, 105, 0.4), -2px 0 15px -4px rgba(77, 130, 184, 0.1);
 }
-
-.ui-tab.notebookbar:hover {
-	box-shadow: 0 0 0px 4px #e6e6e6b0;
+.main-nav.hasnotebookbar.text-color-indicator .ui-tab.selected.notebookbar{
+	color: var(--blue1-txt-primary-color);
+	text-shadow: 0px 0px 0.2px var(--blue1-txt-primary-color);
+}
+.main-nav.hasnotebookbar.spreadsheet-color-indicator .ui-tab.selected.notebookbar{
+	color: var(--green0-txt-primary-color);
+	text-shadow: 0px 0px 0.2px var(--green0-txt-primary-color);
+}
+.main-nav.hasnotebookbar.presentation-color-indicator .ui-tab.selected.notebookbar{
+	color: var(--orange1-txt-primary-color);
+	text-shadow: 0px 0px 0.2px var(--orange1-txt-primary-color);
+}
+.ui-tab.notebookbar:hover:not(.selected) {
 	border-radius: 0.1px;
-	background-color: #e6e6e6b0;
+	background-color: #f9f9f9;
 	cursor: pointer;
+	color: #555;
+}
+/* Document Logo */
+.main-nav.hasnotebookbar #document-header {
+	float: left;
 }
 
 /* shortcuts bar */
@@ -43,6 +65,7 @@
 	width: 16px !important;
 	height: 16px !important;
 	margin-right: 0px;
+	margin-bottom: 3px;
 }
 
 /* root container */
@@ -86,6 +109,8 @@ div[id*='Row'].notebookbar, div[id*='Column'].notebookbar, #SendToBack.notebookb
 }
 
 .unotoolbutton.notebookbar .unolabel {
+	font-family:  var(--loleaflet-font);
+	color: var(--gray-light-txt--color);
 	padding-left: 5px !important;
 }
 
@@ -527,4 +552,4 @@ div[id*='Row'].notebookbar, div[id*='Column'].notebookbar, #SendToBack.notebookb
 @keyframes spin {
 	0% { transform: rotate(0deg); }
 	100% { transform: rotate(360deg); }
-}
\ No newline at end of file
+}
diff --git a/loleaflet/css/spreadsheet.css b/loleaflet/css/spreadsheet.css
index 3090872fb..84768bb4b 100644
--- a/loleaflet/css/spreadsheet.css
+++ b/loleaflet/css/spreadsheet.css
@@ -48,7 +48,7 @@
 	padding-top: 8px;
 	padding-bottom: 5px;
 
-	font: 12px/1.5 "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
+	font: 12px/1.5 var(--loleaflet-font);
 	display: inline-block;
 	border: 1px solid darkgrey;
 	background-color: lightgrey;
@@ -110,7 +110,7 @@
 
 .spreadsheet-header-corner-styles {
 	border: 1px solid darkgray;
-	font: 12px/1.5 "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
+	font: 12px/1.5 var(--loleaflet-font);
 	color: black;
 	background-color: #f1f4f7;
 	cursor: pointer;
@@ -142,7 +142,7 @@
 
 .spreadsheet-header-column {
 	border: 1px solid darkgray;
-	font: 12px/1.5 "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
+	font: 12px/1.5 var(--loleaflet-font);
 	color: black;
 	background-color: #f1f4f7;
 	cursor: pointer;
@@ -183,7 +183,7 @@
 
 .spreadsheet-header-row {
 	border: 1px solid darkgray;
-	font: 12px/1.5 "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
+	font: 12px/1.5 var(--loleaflet-font);
 	color: black;
 	background-color: #f1f4f7;
 	cursor: pointer;
diff --git a/loleaflet/css/toolbar.css b/loleaflet/css/toolbar.css
index 68528914e..880f48053 100644
--- a/loleaflet/css/toolbar.css
+++ b/loleaflet/css/toolbar.css
@@ -70,7 +70,7 @@ w2ui-toolbar {
 		overflow: visible !important;
 }
 #toolbar-down .ToolbarStatusInactive {
-	color: #696969;
+	color: var(--gray-light-txt--color);
 	box-shadow: inset 0px 0px 0px 10px #f2f2f2, 0px 0px 0px 2px #f2f2f2, 4px 0px 0px 1px #fff, -4px 0px 0px 1px #fff, 0px 0px 0px 5px #fff;
 }
 #spreadsheet-toolbar {
@@ -167,9 +167,9 @@ w2ui-toolbar {
 }
 
 #document-name-input {
-		font-size: 16px;
-		border: 1px solid transparent;
-		background-color: transparent;
+	font-size: 16px;
+	border: 1px solid transparent;
+	background-color: transparent;
 }
 
 #document-name-input.editable {
@@ -182,6 +182,11 @@ w2ui-toolbar {
 	height: 18px;
 }
 
+.hasnotebookbar #document-name-input.editable{
+	background: #f9f9f9;
+	box-shadow: 0 0 0.1px 1px #dfdfdf, 0 0 2px 1px #f0f0f0;
+}
+
 #document-name-input.editable:focus {
 		border: none;
 		box-shadow: inset 0 0 2px 1px #f0f0f0, 0 0 0.1px 1px #bbb;
@@ -340,13 +345,13 @@ button.leaflet-control-search-next
 /* select box */
 .select2-results__option {
 		padding: 5px;
-		font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
+		font-family: var(--loleaflet-font);
 		font-size: 12px;
 		overflow: hidden;
 		text-overflow: ellipsis;
 }
 .select2-selection__rendered {
-		font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
+		font-family: var(--loleaflet-font);
 		font-size: 12px;
 }
 .styles-select {
diff --git a/loleaflet/docs/css/main.css b/loleaflet/docs/css/main.css
index 2b6aeb0f0..6a2922535 100644
--- a/loleaflet/docs/css/main.css
+++ b/loleaflet/docs/css/main.css
@@ -3,7 +3,7 @@
 
 html, body, input, select, button, textarea, table {
 	font-size: 100%;
-	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	font-family: var(--docs-font);
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 	text-rendering: optimizeLegibility;
@@ -230,7 +230,7 @@ h3.tagline {
 /* content */
 
 .container code, .container pre code {
-	font-family: "Consolas", "Menlo", "Lucida Console", "Courier New", monospace;
+	font-family: var(--docs--pre-font);
 	-webkit-font-smoothing: subpixel-antialiased;
 }
 .container pre code {
@@ -1074,4 +1074,3 @@ iframe[src*='youtube.com'] {
 #disqus_thread {
 	margin-top: 3em;
 }
-
diff --git a/loleaflet/images/lc_keyboard-shortcuts.svg b/loleaflet/images/lc_keyboard-shortcuts.svg
new file mode 100644
index 000000000..1e16fd36d
--- /dev/null
+++ b/loleaflet/images/lc_keyboard-shortcuts.svg
@@ -0,0 +1,116 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   viewBox="0 0 24 24"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="lc_keyboard-shortcuts.svg"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
+  <metadata
+     id="metadata14">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs12" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1349"
+     inkscape:window-height="1020"
+     id="namedview10"
+     showgrid="false"
+     inkscape:snap-bbox="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-midpoints="false"
+     inkscape:object-paths="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:zoom="22.131877"
+     inkscape:cx="10.147815"
+     inkscape:cy="11.107856"
+     inkscape:window-x="0"
+     inkscape:window-y="30"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="g6" />
+  <g
+     id="g6"
+     style="fill:none;stroke:#4d82b8;stroke-linecap:round;stroke-linejoin:round">
+    <rect
+       height="15"
+       ry="2.5"
+       width="19"
+       x="2.5"
+       y="4.5"
+       id="rect2" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#4d82b8;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;
 stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 8.5056764,14.99995 c -0.674235,-0.0096 -0.674235,1.009563 0,1 h 6.9886476 c 0.674235,0.0096 0.674235,-1.009563 0,-1 z"
+       id="path823"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#4d82b8;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;
 stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 5.5058594,12 c -0.1799926,-0.0083 -0.3651247,0.08558 -0.4458731,0.250152 -0.1197868,0.225654 -0.057875,0.545988 0.1684986,0.680572 0.1201307,0.07746 0.2657749,0.06993 0.4025736,0.06928 0.3031185,-6.27e-4 0.606287,0.0013 0.9093729,-9.94e-4 0.18139,-0.0047 0.3546402,-0.120887 0.419333,-0.291766 C 7.0539434,12.48267 6.9808404,12.185017 6.7607757,12.063006 6.622923,11.980715 6.4593425,12.003357 6.3063419,12 6.0395144,12 5.7726869,12 5.5058594,12 Z"
+       id="path863"
+       inkscape:connector-curvature="0" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path891"
+       d="m 17.505863,12 c -0.179992,-0.0083 -0.365124,0.08558 -0.445873,0.250152 -0.119787,0.225654 -0.05787,0.545988 0.168499,0.680572 0.12013,0.07746 0.265775,0.06993 0.402573,0.06928 0.303119,-6.27e-4 0.606287,0.0013 0.909373,-9.94e-4 0.18139,-0.0047 0.35464,-0.120887 0.419333,-0.291766 0.09418,-0.224574 0.02108,-0.522227 -0.198988,-0.644238 -0.137853,-0.08229 -0.301434,-0.05965 -0.454434,-0.06301 -0.266828,0 -0.533655,0 -0.800483,0 z"
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#4d82b8;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;
 stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path893"
+       d="m 13.505862,12 c -0.179992,-0.0083 -0.365124,0.08558 -0.445873,0.250152 -0.119787,0.225654 -0.05787,0.545988 0.168499,0.680572 0.12013,0.07746 0.265775,0.06993 0.402573,0.06928 0.303119,-6.27e-4 0.606287,0.0013 0.909373,-9.94e-4 0.18139,-0.0047 0.35464,-0.120887 0.419333,-0.291766 0.09418,-0.224574 0.02108,-0.522227 -0.198988,-0.644238 -0.137853,-0.08229 -0.301434,-0.05965 -0.454434,-0.06301 -0.266828,0 -0.533655,0 -0.800483,0 z"
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#4d82b8;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;
 stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#4d82b8;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;
 stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 9.5058598,12 c -0.179992,-0.0083 -0.365124,0.08558 -0.445873,0.250152 -0.119787,0.225654 -0.05787,0.545988 0.168499,0.680572 0.12013,0.07746 0.265775,0.06993 0.402573,0.06928 0.303119,-6.27e-4 0.6062872,0.0013 0.9093732,-9.94e-4 0.18139,-0.0047 0.35464,-0.120887 0.419333,-0.291766 0.09418,-0.224574 0.02108,-0.522227 -0.198988,-0.644238 -0.137853,-0.08229 -0.301434,-0.05965 -0.454434,-0.06301 -0.266828,0 -0.5336552,0 -0.8004832,0 z"
+       id="path895"
+       inkscape:connector-curvature="0" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path905"
+       d="m 5.5058594,9.0004078 c -0.1799926,-0.0083 -0.3651247,0.08558 -0.4458731,0.250152 -0.1197868,0.225654 -0.057875,0.545988 0.1684986,0.680572 0.1201307,0.07746 0.2657749,0.06993 0.4025736,0.06928 0.3031185,-6.28e-4 0.606287,0.0013 0.9093729,-9.95e-4 0.18139,-0.0047 0.3546402,-0.120887 0.419333,-0.291766 C 7.0539434,9.483077 6.9808404,9.185424 6.7607757,9.063413 6.622923,8.981123 6.4593425,9.003763 6.3063419,9.000403 c -0.2668275,0 -0.533655,0 -0.8004825,0 z"
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#4d82b8;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;
 stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#4d82b8;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;
 stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 17.505863,9.0004078 c -0.179992,-0.0083 -0.365124,0.08558 -0.445873,0.250152 -0.119787,0.225654 -0.05787,0.545988 0.168499,0.680572 0.12013,0.07746 0.265775,0.06993 0.402573,0.06928 0.303119,-6.28e-4 0.606287,0.0013 0.909373,-9.95e-4 0.18139,-0.0047 0.35464,-0.120887 0.419333,-0.291766 0.09418,-0.224574 0.02108,-0.522227 -0.198988,-0.644238 -0.137853,-0.08229 -0.301434,-0.05965 -0.454434,-0.06301 -0.266828,0 -0.533655,0 -0.800483,0 z"
+       id="path907"
+       inkscape:connector-curvature="0" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path911"
+       d="m 9.5058598,9.0004078 c -0.179992,-0.0083 -0.365124,0.08558 -0.445873,0.250152 -0.119787,0.225654 -0.05787,0.545988 0.168499,0.680572 0.12013,0.07746 0.265775,0.06993 0.402573,0.06928 0.303119,-6.282e-4 0.6062872,0.0013 0.9093732,-9.952e-4 0.18139,-0.0047 0.35464,-0.120887 0.419333,-0.291766 0.09418,-0.224574 0.02108,-0.522227 -0.198988,-0.644238 -0.137853,-0.08229 -0.301434,-0.05965 -0.454434,-0.06301 -0.266828,0 -0.5336552,0 -0.8004832,0 z"
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#4d82b8;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;
 stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path913"
+       d="m 13.505862,9.0004078 c -0.179992,-0.0083 -0.365124,0.08558 -0.445873,0.250152 -0.119787,0.225654 -0.05787,0.545988 0.168499,0.680572 0.12013,0.07746 0.265775,0.06993 0.402573,0.06928 0.303119,-6.282e-4 0.606287,0.0013 0.909373,-9.952e-4 0.18139,-0.0047 0.35464,-0.120887 0.419333,-0.291766 0.09418,-0.224574 0.02108,-0.522227 -0.198988,-0.644238 -0.137853,-0.08229 -0.301434,-0.05965 -0.454434,-0.06301 -0.266828,0 -0.533655,0 -0.800483,0 z"
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#4d82b8;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;
 stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+  </g>
+</svg>
diff --git a/loleaflet/images/lc_online-help.svg b/loleaflet/images/lc_online-help.svg
new file mode 100644
index 000000000..766246f68
--- /dev/null
+++ b/loleaflet/images/lc_online-help.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" fill="#4d82b8" r="10"/><path d="m12 4.9999998c-2.2100002 0-4.0000002 1.79-4.0000002 4h2c0-1.1.9000002-2 2.0000002-2s2 .9 2 2c0 .55-.219844 1.0501562-.589844 1.4101562l-1.240234 1.259766c-.72.73-1.169922 1.730078-1.169922 2.830078v.5h2c0-1.5.449922-2.100078 1.169922-2.830078l.90039-.919922c.57-.57.929688-1.3700002.929688-2.2500002 0-2.21-1.79-4-4-4zm-1 13.0000002v2h2v-2z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/loleaflet/images/lc_report-an-issue.svg b/loleaflet/images/lc_report-an-issue.svg
new file mode 100644
index 000000000..da198b663
--- /dev/null
+++ b/loleaflet/images/lc_report-an-issue.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m5 3v18h10v-2h-3c-1.090703 0-2-.909297-2-2s.909297-2 2-2h3v-3c0-1.090703.909297-2 2-2s2 .909297 2 2v-9z" fill="#fff"/><path d="m5 2c-.554 0-1 .446-1 1v18c0 .554.446 1 1 1h10v-1h-10v-18h14v9 3h1v-12c0-.554-.446-1-1-1zm1 3v4h4v-4zm6 0v1h6v-1zm0 3v1h6v-1zm-6 3v1h9c0-.363969.107739-.703481.283203-1zm0 3v1h6 3v-1zm0 3v1h4.283203c-.175464-.296519-.283203-.636031-.283203-1zm13 2v2 1c.554 0 1-.446 1-1v-2z" fill="#808080"/><path d="m17 11c-.554 0-1 .446-1 1v4h-4c-.554 0-1 .446-1 1s.446 1 1 1h4v4c0 .554.446 1 1 1s1-.446 1-1v-4h4c.554 0 1-.446 1-1s-.446-1-1-1h-4v-4c0-.554-.446-1-1-1z" fill="#4d82b8"/></svg>
\ No newline at end of file
diff --git a/loleaflet/src/control/Control.Notebookbar.js b/loleaflet/src/control/Control.Notebookbar.js
index 9c83331da..146888230 100644
--- a/loleaflet/src/control/Control.Notebookbar.js
+++ b/loleaflet/src/control/Control.Notebookbar.js
@@ -23,6 +23,14 @@ L.Control.Notebookbar = L.Control.extend({
 		this.map.on('updatepermission', this.onUpdatePermission, this);
 
 		$('.main-nav').addClass('hasnotebookbar');
+		$('.main-nav').addClass(this._map.getDocType() + '-color-indicator');
+
+		var docLogoHeader = L.DomUtil.create('div', '');
+		docLogoHeader.id = 'document-header';
+		var docLogo = L.DomUtil.create('div', 'document-logo', docLogoHeader);
+		$(docLogo).data('id', 'document-logo');
+		$(docLogo).data('type', 'action');
+		$('.main-nav').prepend(docLogoHeader);
 	},
 
 	onRemove: function() {
@@ -82,7 +90,7 @@ L.Control.Notebookbar = L.Control.extend({
 	selectedTab: function() {
 		// implement in child classes
 	},
-	
+
 	getTabs: function() {
 		// implement in child classes
 		return [];
@@ -117,7 +125,6 @@ L.Control.Notebookbar = L.Control.extend({
 	createShortcutsBar: function() {
 		var shortcutsBar = L.DomUtil.create('div', 'notebookbar-shortcuts-bar');
 		$('nav').prepend(shortcutsBar);
-
 		var builder = new L.control.notebookbarBuilder({mobileWizard: this, map: this.map, cssClass: 'notebookbar'});
 		builder.build(shortcutsBar, this.getShortcutsBarData());
 	},


More information about the Libreoffice-commits mailing list