Some CSS style enhancements

* Move the "dynamicEdit" span at the beginning of the "value" div to let it appear at the top left corner of the field to edit. Otherwise, the edition block may appear outside the page, e.g. if we want to edit the title of an issue and if this title ends at the extreme right of the page. * Display the pencil icon on a field only when this field is hovered (not simply if the mouse hovers any part of the "content" div). * Vertically align validate and cancel buttons of the edition block with the edition field nearby. * Auto resize the issue title edition input field based on the window size (to leave as much space as possible to rewrite the title).
2020-04-05 10:40:37 +02:00 · 2020-04-05 10:40:37 +02:00 · 77afe3d5d0
commit 77afe3d5d0
parent dd3ed349ce
3 changed files with 54 additions and 29 deletions
--- a/assets/javascripts/issue_dynamic_edit.js
+++ b/assets/javascripts/issue_dynamic_edit.js
@ -67,10 +67,10 @@ function initEditFields() {
 		var htmlCopy = $('#statusListDropdown').get(0).outerHTML;
 		$('#statusListDropdown').remove();
 		$('.details .attributes .status.attribute .value').html(
+			htmlCopy +
 			'<span class="showValue">' +
 			$('.details .attributes .status.attribute .value').html() +
-			'</span> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>' +
-			htmlCopy
+			'</span> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>'
 		);
 	}

@ -78,10 +78,10 @@ function initEditFields() {
 		var htmlCopy = $('#prioritiesListDropdown').get(0).outerHTML;
 		$('#prioritiesListDropdown').remove();
 		$('.details .attributes .priority.attribute .value').html(
+			htmlCopy +
 			'<span class="showValue">' +
 			$('.details .attributes .priority.attribute .value').html() +
-			'</span> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>' +
-			htmlCopy
+			'</span> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>'
 		);
 	}

@ -89,29 +89,31 @@ function initEditFields() {
 		var htmlCopy = $('#categoriesListDropdown').get(0).outerHTML;
 		$('#categoriesListDropdown').remove();
 		$('.details .attributes .category.attribute .value').html(
+			htmlCopy +
 			'<span class="showValue">' +
 			$('.details .attributes .category.attribute .value').html() +
-			'</span> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>' +
-			htmlCopy
+			'</span> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>'
 		);
 	}

 	if ($('#doneRatioListDropdown').length > 0 && !isExcluded('doneRatioListDropdown')) {
 		var htmlCopy = $('#doneRatioListDropdown').get(0).outerHTML;
 		$('#doneRatioListDropdown').remove();
-		$('.details .attributes .progress.attribute .value').html('<span class="showValue">' +
-			$('.details .attributes .progress.attribute .value').html() + '</span> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>' +
-			htmlCopy);
+		$('.details .attributes .progress.attribute .value').html(
+			htmlCopy +
+			'<span class="showValue">' +
+			$('.details .attributes .progress.attribute .value').html() + '</span> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>'
+		);
 	}

 	if ($('#EstimatedTimeInput').length > 0 && !isExcluded('EstimatedTimeInput')) {
 		var htmlCopy = $('#EstimatedTimeInput').get(0).outerHTML;
 		$('#EstimatedTimeInput').remove();
 		$('.details .attributes .estimated-hours.attribute .value').html(
+			htmlCopy +
 			'<span class="showValue">' +
 			$('.details .attributes .estimated-hours.attribute .value').html() +
-			'</span> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>' +
-			htmlCopy
+			'</span> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>'
 		);
 	}

@ -119,10 +121,10 @@ function initEditFields() {
 		var htmlCopy = $('#StartDateInput').get(0).outerHTML;
 		$('#StartDateInput').remove();
 		$('.details .attributes .start-date.attribute .value').html(
+			htmlCopy +
 			'<span class="showValue">' +
 			$('.details .attributes .start-date.attribute .value').html() +
-			'</span> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>' +
-			htmlCopy
+			'</span> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>'
 		);
 	}

@ -130,27 +132,31 @@ function initEditFields() {
 		var htmlCopy = $('#DueDateInput').get(0).outerHTML;
 		$('#DueDateInput').remove();
 		$('.details .attributes .due-date.attribute .value').html(
+			htmlCopy +
 			'<span class="showValue">' +
 			$('.details .attributes .due-date.attribute .value').html() +
-			'</span> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>' +
-			htmlCopy
+			'</span> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>'
 		);
 	}

 	if ($('#TitleInput').length > 0 && !isExcluded('TitleInput')) {
 		var htmlCopy = $('#TitleInput').get(0).outerHTML;
 		$('#TitleInput').remove();
-		$('.subject h3').html('<span class="showValue">' + $('.subject h3').html() + '</span> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>' +
-			htmlCopy).addClass('value');
+		$('.subject h3').html(
+			htmlCopy +
+			'<span class="showValue">' +
+			$('.subject h3').html() +
+			'</span> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>'
+		).addClass('value');
 	}

 	if ($('#DescriptionInput').length > 0 && !isExcluded('DescriptionInput')) {
 		var htmlCopy = $('#DescriptionInput').get(0).outerHTML;
 		$('#DescriptionInput').remove();
 		$('div.description .wiki').html(
+			htmlCopy +
 			' <i class="fa fa-pencil fa-fw" aria-hidden="true" style="float:right;"></i><span class="showValue">' +
-			$('div.description .wiki').html() + '</span>' +
-			htmlCopy
+			$('div.description .wiki').html() + '</span>'
 		).addClass('value');
 	}

@ -165,10 +171,10 @@ function initEditFields() {
 		editHTML += "</span>";

 		$('.details .attributes .assigned-to.attribute .value').html(
+			editHTML +
 			'<span class="showValue">' +
 			$('.details .attributes .assigned-to.attribute .value').html() +
-			'</span> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>' +
-			editHTML
+			'</span> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>'
 		);
 	}

@ -183,10 +189,10 @@ function initEditFields() {
 		editHTML += "</span>";

 		$('.details .attributes .fixed-version.attribute .value').html(
+			editHTML +
 			'<span class="showValue">' +
 			$('.details .attributes .fixed-version.attribute .value').html() +
-			'</span> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>' +
-			editHTML
+			'</span> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>'
 		);
 	}

@ -221,10 +227,10 @@ function initEditFields() {
 				editHTML += "</span>";

 				$('.details .attributes .cf_' + info.id + '.attribute .value').html(
+					editHTML +
 					'<span class="showValue">' +
 					$('.details .attributes .cf_' + info.id + '.attribute .value').html() +
-					'</span> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>' +
-					editHTML
+					'</span> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>'
 				);

 				if (info.field_format == "date") {
--- a/assets/stylesheets/issue_dynamic_edit.css
+++ b/assets/stylesheets/issue_dynamic_edit.css
@ -27,8 +27,9 @@ body.controller-issues.action-show .issue.details .showValue {
 	cursor: pointer;
 }

-body.controller-issues.action-show .issue.details:hover .fa-pencil {
+body.controller-issues.action-show .issue.details .value:hover .fa-pencil {
 	opacity: 1;
+	cursor: pointer;
 }

 body.controller-issues.action-show .dynamicEdit {
@ -47,6 +48,10 @@ body.controller-issues.action-show .dynamicEdit {
 	width: max-content;
 }

+body.controller-issues.action-show #TitleInput.dynamicEdit {
+	font-size: 0.57em;
+}
+
 body.controller-issues.action-show .dynamicEdit.version {
 	max-width: 100%;
 }
@ -60,11 +65,11 @@ body.controller-issues.action-show div.issue.details .value.edited .dynamicEdit
 	z-index: 999;
 }

-body.controller-issues.action-show div.issue.details  .btn-primary {
-	padding: 4px;
+body.controller-issues.action-show div.issue.details .btn-primary {
 	color: white !important;
 	border-radius: 3px;
 	padding: 3px;
+	vertical-align: middle;
 }

 body.controller-issues.action-show div.issue.details .btn-primary.close {
@ -111,7 +116,12 @@ body.controller-issues.action-show .dynamicEdit input[type="text"] {
 	width: auto !important;
 }

+body.controller-issues.action-show .dynamicEdit input,
+body.controller-issues.action-show .dynamicEdit select {
+	vertical-align: middle;
+}
+
 body.controller-issues.action-show .dynamicEdit .check_box_group {
 	border: 0px !important;
 	margin-bottom: 10px;
-}
+}
--- a/lib/details_issue_hooks.rb
+++ b/lib/details_issue_hooks.rb
@ -190,6 +190,15 @@ class DetailsIssueHooks < Redmine::Hook::ViewListener
          o << "	<input size=\"50\" value=\"#{clonesubject}\" type=\"text\">"
          o << " <a href='#' class='btn btn-primary validate' aria-label='" + l(:ide_txt_validation_btn) + "'><i class='fa fa-check fa-fw' aria-hidden='true'></i></a>"
          o << " <a href='#' class='btn btn-primary close' aria-label='" + l(:ide_txt_cancel_btn) + "'><i class='fa fa-times fa-fw' aria-hidden='true'></i></a>"
+          o << "<script>"
+          o << "//<![CDATA[\n"
+          o << "  function resizeTitleInput() {\n"
+          o << "    $('#TitleInput input')[0].size = Math.max(50, Math.trunc(window.innerWidth / 11));\n"
+          o << "  }\n"
+          o << "  resizeTitleInput();\n"
+          o << "  window.addEventListener('resize', resizeTitleInput);\n"
+          o << "//]]>\n"
+          o << "</script>"
          o << "</span>"

          # Description