Style modifications and README update

README.md

@@ -1,4 +1,19 @@
 # redmine_issue_dynamic_edit
 
 Add new dropdowns elements on detailed issue page to dynamically update issue's status, assignee and priority directly in the details block of the issue
-You have to enable Redmine REST API
+**You have to enable Redmine REST API** (`Administration` > `Settings` > `API` > check **Enable REST web service**)
+
+### Example
+
+![Gif that represents dynamic edition of field from the detailled issue's view](/doc/edit.gif)
+
+### Installation
+
+* Enable REST API
+* Clone repo into plugins directory : `git clone https://github.com/Ilogeek/redmine_issue_dynamic_edit.git`
+* Restart your Redmine instance
+
+### Customization
+
+Feel free to edit `assets/stylesheets/issue_dynamic_edit.css` to update the look of your fields depending on your current Redmine Theme
+This plugin uses [FontAwesome icons](http://fontawesome.io/)

assets/javascripts/issue_dynamic_edit.js

@@ -48,6 +48,9 @@ function updateDataIssue(field_name, field_value, cssClass) {
 	    },
 	    success: function(msg) {
 			setTimeout(function(){
+				$('.details .attributes .' + cssClass + '.attribute .value .selectedValue span').html(
+					$('.details .attributes .' + cssClass + '.attribute .value select option:selected').html()
+				);
 				$('.details .attributes .' + cssClass + '.attribute .value i.fa-spin').remove();
 				$('.details .attributes .' + cssClass + '.attribute .value').append(' <i class="fa fa-check"></i>');
 				setTimeout(function(){
@@ -73,12 +76,3 @@ function updateDataIssue(field_name, field_value, cssClass) {
  domSelectUsers.on('change', function(e){
  	updateDataIssue('assigned_to_id', domSelectUsers.val(), 'assigned-to');
  }); /* end on change domSelectUsers */
-	  
- $('.details .attributes .attribute .value').on({
-	mouseenter: function () {
-	  $(this).find('.fa-pencil').removeClass('fa-pencil').addClass('fa-angle-down');
-	},
-	mouseleave: function () {
-	  $(this).find('.fa-angle-down').removeClass('fa-angle-down').addClass('fa-pencil');
-	}
- });

assets/stylesheets/issue_dynamic_edit.css

@@ -1,3 +1,7 @@
+div.issue .attribute .value {
+	overflow: visible;
+}
+
 .value .dynamicEditSelect select {
 	border-color: transparent;
 	border: 0;
@@ -10,22 +14,54 @@
 	font-size: inherit;
 	color: inherit;
 	font-family: inherit;
-	padding-left: 0;
-	padding-right: 0; 
+	background: transparent;
+	padding-left:0;
 }
 
-.value:hover .dynamicEditSelect select {
-	border-color: inherit;
+.value .dynamicEditSelect {
+	padding-left: 5px;
+	margin-left: -6px; /* padding + border */
+	display: inline-block;
+	border: 1px solid transparent;
+	border-radius: 3px;
+}
+  
+.value:hover .dynamicEditSelect {
+	border-color: #e0e2e3;
 }
 
 .value .dynamicEditSelect {
 	position:relative;
 }
 
+.value .dynamicEditSelect .selectedValue {
+	position: absolute;
+	top: 2px;
+	right: 0;
+	left: 5px;
+	background: white;
+	pointer-events: none;
+	opacity: 1;
+}
+
+.value:hover .dynamicEditSelect .selectedValue {
+	opacity: 0;
+}
+	  
 .value .dynamicEditSelect i.dropdown {
 	position:absolute;
 	right: 5px;
 	top: 50%;
 	transform: translateY(-50%);
 	pointer-events: none;
+	opacity: 0;
+}
+
+.value:hover .dynamicEditSelect i.dropdown {
+	opacity: 1;
+}
+
+.value:hover .dynamicEditSelect select option[disabled="disabled"]
+{ 
+    display:none;
 }

lib/details_issue_hooks.rb

@@ -25,7 +25,9 @@ class DetailsIssueHooks < Redmine::Hook::ViewListener
 		  o = ''
           statuses = issue.new_statuses_allowed_to(User.current)
           if (!statuses.empty?)
-		    o << "<span class='dynamicEditSelect' id='statusListDropdown'><select data-issue='#{issue_id}'>"
+		    o << "<span class='dynamicEditSelect' id='statusListDropdown'>"
+			o << "<div class='selectedValue'><span>#{issue.status}</span> <i class=\"fa fa-pencil fa-fw\" aria-hidden=\"true\"></i></div> "
+			o << "<select data-issue='#{issue_id}'><option disabled='disabled' selected> </option>"
 			statuses.each do |s|
 				if (s != issue.status)
 					o << "<option value='#{s.id}'>#{s.name}</option>"
@@ -33,11 +35,13 @@ class DetailsIssueHooks < Redmine::Hook::ViewListener
 					o << "<option value='#{s.id}' selected>#{s.name}</option>"
 				end
 			end
-			o << "</select><i class=\"fa fa-pencil fa-fw dropdown\" aria-hidden=\"true\"></i></span>"
+			o << "</select><i class=\"fa fa-angle-down fa-fw dropdown\" aria-hidden=\"true\"></i></span>"
           end
 		  assignables = project.assignable_users
 		  if (!assignables.empty?)
-			o << "<span class='dynamicEditSelect' id='usersListDropdown'><select data-issue='#{issue_id}'>"
+			o << "<span class='dynamicEditSelect' id='usersListDropdown'>"
+			o << "<div class='selectedValue'><span>#{issue.assigned_to}</span> <i class=\"fa fa-pencil fa-fw\" aria-hidden=\"true\"></i></div> "
+			o << "<select data-issue='#{issue_id}'><option disabled='disabled' selected> </option>"
 			assignables.each do |u|
 				if (u != issue.assigned_to)
 					o << "<option value='#{u.id}'>#{u.name}</option>"
@@ -45,12 +49,14 @@ class DetailsIssueHooks < Redmine::Hook::ViewListener
 					o << "<option value='#{u.id}' selected>#{u.name}</option>"
 				end
 			end
-			o << "</select><i class=\"fa fa-pencil fa-fw dropdown\" aria-hidden=\"true\"></i></span>"
+			o << "</select><i class=\"fa fa-angle-down fa-fw dropdown\" aria-hidden=\"true\"></i></span>"
           end
 		  
 		  priorities = IssuePriority.all
 		  if(!priorities.empty?)
-			o << "<span class='dynamicEditSelect' id='prioritiesListDropdown'><select data-issue='#{issue_id}'>"
+			o << "<span class='dynamicEditSelect' id='prioritiesListDropdown'>"
+			o << "<div class='selectedValue'><span>#{issue.priority}</span> <i class=\"fa fa-pencil fa-fw\" aria-hidden=\"true\"></i></div> "
+			o << "<select data-issue='#{issue_id}'><option disabled='disabled' selected> </option>"
 			priorities.each do |p|
 				if (p != issue.priority)
 					o << "<option value='#{p.id}'>#{p.name}</option>"
@@ -58,7 +64,7 @@ class DetailsIssueHooks < Redmine::Hook::ViewListener
 					o << "<option value='#{p.id}' selected>#{p.name}</option>"
 				end
 			end
-			o << "</select><i class=\"fa fa-pencil fa-fw dropdown\" aria-hidden=\"true\"></i></span>"
+			o << "</select><i class=\"fa fa-angle-down fa-fw dropdown\" aria-hidden=\"true\"></i></span>"
 		  end
 		end
 	  end