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 <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Andras Timar <andras.timar@collabora.com>

3 files changed, 27 insertions, 4 deletions

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 547c603c5..41f3458d8 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);
 		}
 	}