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.si...@collabora.com> AuthorDate: Tue Jul 14 14:09:06 2020 +0200 Commit: Pedro Silva <pedro.si...@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 <jenkinscollaboraoff...@gmail.com> Reviewed-by: Pedro Silva <pedro.si...@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()); }, _______________________________________________ Libreoffice-commits mailing list libreoffice-comm...@lists.freedesktop.org https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits