Merge pull request #63 from dosyfier/style-enhancements

Some CSS style enhancement proposals

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>' +
+			'</span> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>'
-			htmlCopy
 		);
 	}
 
@@ -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>' +
+			'</span> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>'
-			htmlCopy
 		);
 	}
 
@@ -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>' +
+			'</span> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>'
-			htmlCopy
 		);
 	}
 
 	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(
-			$('.details .attributes .progress.attribute .value').html() + '</span> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>' +
+			htmlCopy +
-			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>' +
+			'</span> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>'
-			htmlCopy
 		);
 	}
 
@@ -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>' +
+			'</span> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>'
-			htmlCopy
 		);
 	}
 
@@ -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>' +
+			'</span> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>'
-			htmlCopy
 		);
 	}
 
 	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>' +
+		$('.subject h3').html(
-			htmlCopy).addClass('value');
+			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>' +
+			$('div.description .wiki').html() + '</span>'
-			htmlCopy
 		).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>' +
+			'</span> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>'
-			editHTML
 		);
 	}
 
@@ -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>' +
+			'</span> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>'
-			editHTML
 		);
 	}
 
@@ -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>' +
+					'</span> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>'
-					editHTML
 				);
 
 				if (info.field_format == "date") {

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%;
 }
@@ -61,10 +66,10 @@ body.controller-issues.action-show div.issue.details .value.edited .dynamicEdit
 }
 
 body.controller-issues.action-show div.issue.details .btn-primary {
-	padding: 4px;
 	color: white !important;
 	border-radius: 3px;
 	padding: 3px;
+	vertical-align: middle;
 }
 
 body.controller-issues.action-show div.issue.details .btn-primary.close {
@@ -111,6 +116,11 @@ 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;

lib/details_issue_hooks.rb

@@ -210,6 +210,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