[Libreoffice-commits] online.git: Branch 'distro/collabora/co-4-2' - loleaflet/css loleaflet/html loleaflet/src

[Pedro Pinto Silva (via logerrit)]

 loleaflet/css/menubar.css                          |   16 ++++++++++++----
 loleaflet/css/toolbar.css                          |   17 ++++++++++-------
 loleaflet/html/loleaflet.html.m4                   |    2 +-
 loleaflet/src/control/Control.DocumentNameInput.js |    2 +-
 4 files changed, 24 insertions(+), 13 deletions(-)

New commits:
commit 65bef93e5e0ff4274a97fa42931d7443fa2e5d65
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 Sep 1 16:00:12 2020 +0200

    Document Name Input: make it flexible (dynamic width)
    
    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>
    (cherry picked from commit 1c4dcc1f587876b6c3880d3b0e8e7b593eeb26b6)
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/101451

diff --git a/loleaflet/css/menubar.css b/loleaflet/css/menubar.css
index cab048379..0b3f90eac 100644
--- a/loleaflet/css/menubar.css
+++ b/loleaflet/css/menubar.css
@@ -27,19 +27,27 @@
 }
 
 .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 {
diff --git a/loleaflet/css/toolbar.css b/loleaflet/css/toolbar.css
index b6619f968..d1c11613b 100644
--- a/loleaflet/css/toolbar.css
+++ b/loleaflet/css/toolbar.css
@@ -153,10 +153,9 @@ w2ui-toolbar {
 	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;
@@ -167,9 +166,12 @@ 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;
+	border-radius: 1px;
+	padding: 0px 2px;
+	transition: 0.5s;
 }
 
 #document-name-input.editable {
@@ -181,12 +183,13 @@ w2ui-toolbar {
 	text-overflow:ellipsis;
 	height: 18px;
 }
-
 #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 8724b4394..9f42ed9f9 100644
--- a/loleaflet/html/loleaflet.html.m4
+++ b/loleaflet/html/loleaflet.html.m4
@@ -145,8 +145,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 16dd68dbd..0a79ff736 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);