loleaflet/css/toolbar.css                          |   19 ++++++++++++++++---
 loleaflet/html/loleaflet.html.m4                   |    1 +
 loleaflet/src/control/Control.DocumentNameInput.js |   11 ++++++++++-
 3 files changed, 27 insertions(+), 4 deletions(-)

New commits:
commit 40110f2ba7a53621a0f6c360e7c3bd4803fd6eeb
Author:     Pedro Pinto Silva <pedro.si...@collabora.com>
AuthorDate: Wed Jun 10 15:56:34 2020 +0200
Commit:     Andras Timar <andras.ti...@collabora.com>
CommitDate: Thu Jun 11 12:54:38 2020 +0200

    Desktop: Set max size for document name's width
    
    Change-Id: Ic35990efd9e240ed29ae9da1e72dcd6b58a4e933
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/96053
    Tested-by: Jenkins
    Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoff...@gmail.com>
    Reviewed-by: Andras Timar <andras.ti...@collabora.com>

diff --git a/loleaflet/css/toolbar.css b/loleaflet/css/toolbar.css
index 13eb379d5..20fb595a0 100644
--- a/loleaflet/css/toolbar.css
+++ b/loleaflet/css/toolbar.css
@@ -149,6 +149,19 @@ w2ui-toolbar {
 #tb_formulabar_item_formula div table {
                width: 100%;
 }
+#document-title-pencil.editable {
+       visibility: visible;
+       width: 24px;
+       height: 22px;
+       position: absolute;
+       left: 87%;
+       background: url('images/baseline-edit.svg') right center no-repeat, 
radial-gradient(circle, #fff 20%, #fff0 100%);
+       border-top: solid 3px white;
+}
+
+#document-title-pencil:not(.editable){
+       visibility: hidden;
+}
 
 #document-name-input {
                font-size: 16px;
@@ -159,25 +172,25 @@ w2ui-toolbar {
 #document-name-input.editable {
        border: none;
        box-shadow: 0 0 0.1px 1px #ebebeb, 0 0 2px 1px #f0f0f0;
-       background-image: url('images/baseline-edit.svg');
        background-position: right;
        background-repeat: no-repeat;
+       padding-right: 24px;
+       max-width: 100%;
 }
 
 #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;
 }
 
 #document-name-input.editable:hover:not(:focus) {
                border: none;
                box-shadow: 0 0 0.1px 1px #d7d7d7, 0 0 3px 2px #f0f0f0;
                background-color: white;
-               background-image: url('images/baseline-edit.svg');
                background-position: right;
                background-repeat: no-repeat;
-               padding-right: 2px;
 }
 #tb_editbar_item_fold table.w2ui-button {
        margin: 0px 14px 0px 4px !important;
diff --git a/loleaflet/html/loleaflet.html.m4 b/loleaflet/html/loleaflet.html.m4
index d3c3e21de..f84271e62 100644
--- a/loleaflet/html/loleaflet.html.m4
+++ b/loleaflet/html/loleaflet.html.m4
@@ -145,6 +145,7 @@ 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>
        </div>
diff --git a/loleaflet/src/control/Control.DocumentNameInput.js 
b/loleaflet/src/control/Control.DocumentNameInput.js
index 090cc25f9..28db57f41 100644
--- a/loleaflet/src/control/Control.DocumentNameInput.js
+++ b/loleaflet/src/control/Control.DocumentNameInput.js
@@ -65,7 +65,13 @@ L.Control.DocumentNameInput = L.Control.extend({
        },
 
        onDocLayerInit: function() {
-               $('#document-name-input').attr('size', 
$('#document-name-input').val().length);
+               var value = $('#document-name-input').val();
+               if (value.length < 27) {
+                       $('#document-name-input').attr('size', value.length);
+               }
+               else {
+                       $('#document-name-input').attr('size', '25');
+               }
 
                // FIXME: Android app would display a temporary filename, not 
the actual filename
                if (window.ThisIsTheAndroidApp) {
@@ -78,6 +84,7 @@ L.Control.DocumentNameInput = L.Control.extend({
                        // We can now set the document name in the menu bar
                        $('#document-name-input').prop('disabled', false);
                        $('#document-name-input').removeClass('editable');
+                       $('#document-title-pencil').removeClass('editable');
                        $('#document-name-input').focus(function() { 
$(this).blur(); });
                        // Call decodecodeURIComponent twice: Reverse both our 
encoding and the encoding of
                        // the name in the file system.
@@ -99,12 +106,14 @@ L.Control.DocumentNameInput = L.Control.extend({
                        // Save As allowed
                        $('#document-name-input').prop('disabled', false);
                        $('#document-name-input').addClass('editable');
+                       $('#document-title-pencil').addClass('editable');
                        $('#document-name-input').off('keypress', 
this.onDocumentNameKeyPress).on('keypress', 
this.onDocumentNameKeyPress.bind(this));
                        $('#document-name-input').off('focus', 
this.onDocumentNameFocus).on('focus', this.onDocumentNameFocus.bind(this));
                        $('#document-name-input').off('blur', 
this.documentNameCancel).on('blur', this.documentNameCancel.bind(this));
                } else {
                        $('#document-name-input').prop('disabled', true);
                        $('#document-name-input').removeClass('editable');
+                       $('#document-title-pencil').removeClass('editable');
                        $('#document-name-input').off('keypress', 
this.onDocumentNameKeyPress);
                }
        }
_______________________________________________
Libreoffice-commits mailing list
libreoffice-comm...@lists.freedesktop.org
https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits

Reply via email to