[Libreoffice-commits] online.git: loleaflet/css loleaflet/html loleaflet/src
Pedro Pinto Silva (via logerrit)
logerrit at kemper.freedesktop.org
Tue Aug 25 10:56:09 UTC 2020
loleaflet/css/loleaflet.css | 8 +--
loleaflet/css/menubar.css | 50 +++++++++++--------
loleaflet/css/mobilewizard.css | 2
loleaflet/css/notebookbar.css | 18 +++----
loleaflet/css/toolbar.css | 53 +++++++++++++++++++--
loleaflet/html/loleaflet.html.m4 | 2
loleaflet/src/control/Control.DocumentNameInput.js | 2
7 files changed, 94 insertions(+), 41 deletions(-)
New commits:
commit 1c4dcc1f587876b6c3880d3b0e8e7b593eeb26b6
Author: Pedro Pinto Silva <pedro.silva at collabora.com>
AuthorDate: Thu Aug 20 12:35:10 2020 +0200
Commit: Pedro Silva <pedro.silva at collabora.com>
CommitDate: Tue Aug 25 12:55:50 2020 +0200
Document Name Input: make it flexible (dynamic width) and
* convert var colors to rgb
* use the var colors for shadow + alpha (rgba)
* .document-title container: remove table display and add min width
Change-Id: Id4289af91562790edd23c83d4e70a16688e44fe3
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/101048
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/loleaflet.css b/loleaflet/css/loleaflet.css
index 1b84d1091..28161c6c4 100644
--- a/loleaflet/css/loleaflet.css
+++ b/loleaflet/css/loleaflet.css
@@ -13,9 +13,9 @@
/*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;
+ --blue1-txt-primary-color: 3, 105, 163;
+ --green0-txt-primary-color: 16, 104, 2; /*green1 lacks contrast against white*/
+ --orange1-txt-primary-color: 163, 62, 3;
--gray-light-txt--color: #696969;
--gray-bg-color: #EFEFEF;
@@ -631,4 +631,4 @@ body {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-}
\ No newline at end of file
+}
diff --git a/loleaflet/css/menubar.css b/loleaflet/css/menubar.css
index 84e07849b..ad09ffa61 100644
--- a/loleaflet/css/menubar.css
+++ b/loleaflet/css/menubar.css
@@ -21,25 +21,33 @@
}
.document-logo {
- position: relative;
- width: 22px;
- height: 30px;
+ position: relative;
+ width: 22px;
+ height: 30px;
}
.document-title {
- display: table-cell;
- vertical-align: middle;
height: 30px;
+ min-width: 84px;
white-space: nowrap;
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
}
#document-titlebar {
position: relative;
- display: inline-block;
+ display: inline-table; /*new*/
table-layout: fixed;
- border-spacing: 5px 0px;
+ border-spacing: 5px 0;
max-height: 39px;
z-index: 1000;
+ width: calc(100% - 890px);
+ right: 0px;
+}
+
+.main-nav.hasnotebookbar #document-titlebar {
+ top: -10px;
}
.main-nav {
@@ -51,8 +59,8 @@
}
.main-nav.hasnotebookbar{
- background: var(--gray-bg-color);
- margin-top: 0px;
+ background: var(--gray-bg-color);
+ margin-top: 0px;
}
/* Customizations to sm-simple theme to make it look like LO menu, lo-menu class */
@@ -241,24 +249,24 @@
}
.writer-icon-img {
- background-image: url('images/x-office-document.svg');
- background-size: 30px 30px;
- background-repeat: no-repeat;
- background-position: bottom;
+ background-image: url('images/x-office-document.svg');
+ background-size: 30px 30px;
+ background-repeat: no-repeat;
+ background-position: bottom;
}
.calc-icon-img {
- background-image: url('images/x-office-spreadsheet.svg');
- background-size: 30px 30px;
- background-repeat: no-repeat;
- background-position: bottom;
+ background-image: url('images/x-office-spreadsheet.svg');
+ background-size: 30px 30px;
+ background-repeat: no-repeat;
+ background-position: bottom;
}
.impress-icon-img {
- background-image: url('images/x-office-presentation.svg');
- background-size: 30px 30px;
- background-repeat: no-repeat;
- background-position: bottom;
+ background-image: url('images/x-office-presentation.svg');
+ background-size: 30px 30px;
+ background-repeat: no-repeat;
+ background-position: bottom;
}
#menu-last-mod a {
diff --git a/loleaflet/css/mobilewizard.css b/loleaflet/css/mobilewizard.css
index 0cc9e768c..ae530a7f3 100644
--- a/loleaflet/css/mobilewizard.css
+++ b/loleaflet/css/mobilewizard.css
@@ -666,7 +666,7 @@ a.leaflet-control-zoom-in {
float:left;
}
#MergeCells > span{
- color: var(--blue1-txt-primary-color);
+ color: var(rgb(--blue1-txt-primary-color));
text-align: end;
vertical-align: bottom;
}
diff --git a/loleaflet/css/notebookbar.css b/loleaflet/css/notebookbar.css
index 77dc94881..7d831bcdc 100644
--- a/loleaflet/css/notebookbar.css
+++ b/loleaflet/css/notebookbar.css
@@ -31,16 +31,16 @@
box-shadow: 0 3px 0px 0px #fff, 0px -1px 8px -4px rgba(105, 105, 105, 0.4), -1px -15px 15px -4px rgb(77, 130, 184, 0.1);
}
.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);
+ color: var(rgb(--blue1-txt-primary-color));
+ text-shadow: 0px 0px 0.2px var(rgb(--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);
+ color: var(rgb(--green0-txt-primary-color));
+ text-shadow: 0px 0px 0.2px var(rgb(--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);
+ color: var(rgb(--orange1-txt-primary-color));
+ text-shadow: 0px 0px 0.2px var(rgb(--orange1-txt-primary-color));
}
.ui-tab.notebookbar:hover:not(.selected) {
border-radius: 0.1px;
@@ -81,17 +81,17 @@
.hasnotebookbar.text-color-indicator #shortcuts-menubar-icon,
.hasnotebookbar.text-color-indicator #shortcuts-menubar-icon:before,
.hasnotebookbar.text-color-indicator #shortcuts-menubar-icon:after {
- background: var(--blue1-txt-primary-color);
+ background: var(rgb(--blue1-txt-primary-color));
}
.hasnotebookbar.presentation-color-indicator #shortcuts-menubar-icon,
.hasnotebookbar.presentation-color-indicator #shortcuts-menubar-icon:before,
.hasnotebookbar.presentation-color-indicator #shortcuts-menubar-icon:after {
- background: var(--orange1-txt-primary-color);
+ background: var(rgb(--orange1-txt-primary-color));
}
.hasnotebookbar.spreadsheet-color-indicator #shortcuts-menubar-icon,
.hasnotebookbar.spreadsheet-color-indicator #shortcuts-menubar-icon:before,
.hasnotebookbar.spreadsheet-color-indicator #shortcuts-menubar-icon:after {
- background: var(--green0-txt-primary-color);
+ background: var(rgb(--green0-txt-primary-color));
}
.hasnotebookbar .notebookbar-shortcuts-bar #Menubar > li > a {
diff --git a/loleaflet/css/toolbar.css b/loleaflet/css/toolbar.css
index 9b1b579af..7d51d6910 100644
--- a/loleaflet/css/toolbar.css
+++ b/loleaflet/css/toolbar.css
@@ -149,14 +149,56 @@ w2ui-toolbar {
#tb_formulabar_item_formula div table {
width: 100%;
}
+
+ at keyframes textPulse {
+ 0% {
+ box-shadow: inset 0 0 2px 1px #f0f0f0, 0 0 0.1px 1px #bbb, 0 0 4px rgba(var(--blue1-txt-primary-color), 0.1);
+ }
+ 50% {
+ box-shadow: inset 0 0 2px 1px #f0f0f0, 0 0 0.1px 1px #bbb, 0 0 4px rgba(var(--blue1-txt-primary-color), 0.2);
+ }
+ 100% {
+ box-shadow: inset 0 0 2px 1px #f0f0f0, 0 0 0.1px 1px #bbb, 0 0 4px rgba(var(--blue1-txt-primary-color), 0.1);
+ }
+}
+ at keyframes presentationPulse {
+ 0% {
+ box-shadow: inset 0 0 2px 1px #f0f0f0, 0 0 0.1px 1px #bbb, 0 0 4px rgba(var(--orange1-txt-primary-color), 0.1);
+ }
+ 50% {
+ box-shadow: inset 0 0 2px 1px #f0f0f0, 0 0 0.1px 1px #bbb, 0 0 4px rgba(var(--orange1-txt-primary-color), 0.2);
+ }
+ 100% {
+ box-shadow: inset 0 0 2px 1px #f0f0f0, 0 0 0.1px 1px #bbb, 0 0 4px rgba(var(--orange1-txt-primary-color), 0.1);
+ }
+}
+ at keyframes spreadsheetPulse {
+ 0% {
+ box-shadow: inset 0 0 2px 1px #f0f0f0, 0 0 0.1px 1px #bbb, 0 0 4px rgba(var(--green0-txt-primary-color), 0.1);
+ }
+ 50% {
+ box-shadow: inset 0 0 2px 1px #f0f0f0, 0 0 0.1px 1px #bbb, 0 0 4px rgba(var(--green0-txt-primary-color), 0.2);
+ }
+ 100% {
+ box-shadow: inset 0 0 2px 1px #f0f0f0, 0 0 0.1px 1px #bbb, 0 0 4px rgba(var(--green0-txt-primary-color), 0.1);
+ }
+}
+.text-color-indicator #document-name-input.editable:focus{
+ animation: textPulse 1.5s infinite ease-in-out;
+}
+.presentation-color-indicator #document-name-input.editable:focus{
+ animation: presentationPulse 1.5s infinite ease-in-out;
+}
+.spreadsheet-color-indicator #document-name-input.editable:focus{
+ animation: spreadsheetPulse 1.5s infinite ease-in-out;
+}
#document-title-pencil.editable {
visibility: visible;
width: 24px;
height: 18px;
- position: absolute;
- right: 10px;
+ position: relative;
+ right: 24px;
background: url('images/baseline-edit.svg') right center no-repeat, radial-gradient(circle, #fff 20%, #fff0 100%);
- top: 5px;
padding: 1px 0px;
margin: 0px;
border: none;
@@ -170,6 +212,9 @@ w2ui-toolbar {
font-size: 16px;
border: 1px solid transparent;
background-color: transparent;
+ border-radius: 1px;
+ padding: 0px 2px;
+ transition: 0.5s;
}
#document-name-input.editable {
@@ -186,13 +231,13 @@ w2ui-toolbar {
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;
background-color: white;
background-image: none;
outline: none;
+ flex: 2;
}
#document-name-input.editable:hover:not(:focus) {
diff --git a/loleaflet/html/loleaflet.html.m4 b/loleaflet/html/loleaflet.html.m4
index 1b55d0b9d..8ec343996 100644
--- a/loleaflet/html/loleaflet.html.m4
+++ b/loleaflet/html/loleaflet.html.m4
@@ -146,8 +146,8 @@ m4_ifelse(MOBILEAPP,[true],
<ul id="main-menu" class="sm sm-simple lo-menu readonly"></ul>
<div id="document-titlebar">
<div class="document-title">
- <div id="document-title-pencil"></div>
<input id="document-name-input" type="text" disabled="true" style="display: none"/>
+ <div id="document-title-pencil"></div>
</div>
</div>
</nav>
diff --git a/loleaflet/src/control/Control.DocumentNameInput.js b/loleaflet/src/control/Control.DocumentNameInput.js
index 730dd0383..4683dd35f 100644
--- a/loleaflet/src/control/Control.DocumentNameInput.js
+++ b/loleaflet/src/control/Control.DocumentNameInput.js
@@ -129,7 +129,7 @@ L.Control.DocumentNameInput = L.Control.extend({
var documentNameInput = $('#document-name-input');
var content = (typeof tail === 'string') ? documentNameInput.val() + tail : documentNameInput.val();
var font = documentNameInput.css('font');
- var textWidth = L.getTextWidth(content, font) + 10;
+ var textWidth = L.getTextWidth(content, font) + 24;
var maxWidth = this._getMaxAvailableWidth();
//console.log('_setNameInputWidth: textWidth: ' + textWidth + ', maxWidth: ' + maxWidth);
textWidth = Math.min(textWidth, maxWidth);
More information about the Libreoffice-commits
mailing list