From 77afe3d5d07c084a5ded3b4f80e7c607847c8983 Mon Sep 17 00:00:00 2001 From: csouriss Date: Sun, 5 Apr 2020 10:40:37 +0200 Subject: [PATCH] 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). --- assets/javascripts/issue_dynamic_edit.js | 56 +++++++++++++---------- assets/stylesheets/issue_dynamic_edit.css | 18 ++++++-- lib/details_issue_hooks.rb | 9 ++++ 3 files changed, 54 insertions(+), 29 deletions(-) diff --git a/assets/javascripts/issue_dynamic_edit.js b/assets/javascripts/issue_dynamic_edit.js index 0268381..39492e5 100644 --- 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 + '' + $('.details .attributes .status.attribute .value').html() + - ' ' + - htmlCopy + ' ' ); } @@ -78,10 +78,10 @@ function initEditFields() { var htmlCopy = $('#prioritiesListDropdown').get(0).outerHTML; $('#prioritiesListDropdown').remove(); $('.details .attributes .priority.attribute .value').html( + htmlCopy + '' + $('.details .attributes .priority.attribute .value').html() + - ' ' + - htmlCopy + ' ' ); } @@ -89,29 +89,31 @@ function initEditFields() { var htmlCopy = $('#categoriesListDropdown').get(0).outerHTML; $('#categoriesListDropdown').remove(); $('.details .attributes .category.attribute .value').html( + htmlCopy + '' + $('.details .attributes .category.attribute .value').html() + - ' ' + - htmlCopy + ' ' ); } if ($('#doneRatioListDropdown').length > 0 && !isExcluded('doneRatioListDropdown')) { var htmlCopy = $('#doneRatioListDropdown').get(0).outerHTML; $('#doneRatioListDropdown').remove(); - $('.details .attributes .progress.attribute .value').html('' + - $('.details .attributes .progress.attribute .value').html() + ' ' + - htmlCopy); + $('.details .attributes .progress.attribute .value').html( + htmlCopy + + '' + + $('.details .attributes .progress.attribute .value').html() + ' ' + ); } if ($('#EstimatedTimeInput').length > 0 && !isExcluded('EstimatedTimeInput')) { var htmlCopy = $('#EstimatedTimeInput').get(0).outerHTML; $('#EstimatedTimeInput').remove(); $('.details .attributes .estimated-hours.attribute .value').html( + htmlCopy + '' + $('.details .attributes .estimated-hours.attribute .value').html() + - ' ' + - htmlCopy + ' ' ); } @@ -119,10 +121,10 @@ function initEditFields() { var htmlCopy = $('#StartDateInput').get(0).outerHTML; $('#StartDateInput').remove(); $('.details .attributes .start-date.attribute .value').html( + htmlCopy + '' + $('.details .attributes .start-date.attribute .value').html() + - ' ' + - htmlCopy + ' ' ); } @@ -130,27 +132,31 @@ function initEditFields() { var htmlCopy = $('#DueDateInput').get(0).outerHTML; $('#DueDateInput').remove(); $('.details .attributes .due-date.attribute .value').html( + htmlCopy + '' + $('.details .attributes .due-date.attribute .value').html() + - ' ' + - htmlCopy + ' ' ); } if ($('#TitleInput').length > 0 && !isExcluded('TitleInput')) { var htmlCopy = $('#TitleInput').get(0).outerHTML; $('#TitleInput').remove(); - $('.subject h3').html('' + $('.subject h3').html() + ' ' + - htmlCopy).addClass('value'); + $('.subject h3').html( + htmlCopy + + '' + + $('.subject h3').html() + + ' ' + ).addClass('value'); } if ($('#DescriptionInput').length > 0 && !isExcluded('DescriptionInput')) { var htmlCopy = $('#DescriptionInput').get(0).outerHTML; $('#DescriptionInput').remove(); $('div.description .wiki').html( + htmlCopy + ' ' + - $('div.description .wiki').html() + '' + - htmlCopy + $('div.description .wiki').html() + '' ).addClass('value'); } @@ -165,10 +171,10 @@ function initEditFields() { editHTML += ""; $('.details .attributes .assigned-to.attribute .value').html( + editHTML + '' + $('.details .attributes .assigned-to.attribute .value').html() + - ' ' + - editHTML + ' ' ); } @@ -183,10 +189,10 @@ function initEditFields() { editHTML += ""; $('.details .attributes .fixed-version.attribute .value').html( + editHTML + '' + $('.details .attributes .fixed-version.attribute .value').html() + - ' ' + - editHTML + ' ' ); } @@ -221,10 +227,10 @@ function initEditFields() { editHTML += ""; $('.details .attributes .cf_' + info.id + '.attribute .value').html( + editHTML + '' + $('.details .attributes .cf_' + info.id + '.attribute .value').html() + - ' ' + - editHTML + ' ' ); if (info.field_format == "date") { diff --git a/assets/stylesheets/issue_dynamic_edit.css b/assets/stylesheets/issue_dynamic_edit.css index 00e536b..34119c2 100644 --- 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; -} \ No newline at end of file +} diff --git a/lib/details_issue_hooks.rb b/lib/details_issue_hooks.rb index 76c664b..000fe75 100644 --- a/lib/details_issue_hooks.rb +++ b/lib/details_issue_hooks.rb @@ -190,6 +190,15 @@ class DetailsIssueHooks < Redmine::Hook::ViewListener o << " " o << " " o << " " + o << "" o << "" # Description