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.si...@collabora.com>
AuthorDate: Thu Aug 20 12:35:10 2020 +0200
Commit: Pedro Silva <pedro.si...@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 <jenkinscollaboraoff...@gmail.com>
Reviewed-by: Pedro Silva <pedro.si...@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);
_______________________________________________
Libreoffice-commits mailing list
libreoffice-comm...@lists.freedesktop.org
https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
