redmine_plugins/redmine_issue_dynamic_edit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New settings in config file, new event 'none' for listener, css fix

Browse Source
This commit is contained in:
Hugo 2020-05-09 12:28:39 +02:00
parent e2cea8e961
commit e968ee7499
5 changed files with 60 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
README.md
View File

@ -16,17 +16,19 @@ Add new elements on detailed issue page to **dynamically update issue's attribut
### 📦 Installation
* If you update the plugin, be sure to save your configuration modification (`assets/javascripts/issue_dynamic_edit_configuration_file.js`) in a safe place to set them back after the update
* Clone repo into plugins directory : `git clone https://github.com/Ilogeek/redmine_issue_dynamic_edit.git` (be sure that the parent folder is called `redmine_issue_dynamic_edit`)
* Restart your Redmine instance
### ⚙ Configuration (new since v 0.6.6)
You can set some settings by editing the file `assets/javascripts/issue_dynamic_edit_configuration_file.js`. Inside this file you'll find different variable :
* **\_CONF\_FORCE\_HTTPS** : Will force AJAX call performed by the plugin to be done with https protocol. Use this value if you encounter some difficulties with "Mixed content" issues
* **\_CONF\_LISTENER\_TYPE\_VALUE** : Choose which action will trigger the apparition of the edition block
* **\_CONF\_LISTENER\_TYPE\_ICON** : Choose which action will trigger the apparition of the edition block when fired from the pencil icon (by default: same as **\_CONF\_LISTENER\_TYPE\_VALUE**)
* **\_CONF\_FORCE\_HTTPS** : Will force AJAX call performed by the plugin to be done with https protocol. Use this value if you encounter some difficulties with "Mixed content" issues
* **\_CONF\_DISPLAY\_EDIT\_ICON** : Choose if hovering the details block will display all the pencil icons next to editable values or if the user has to hover every value to check if (s)he can edit it. Allowed value : `single`, `block`
* **\_CONF\_LISTENER\_TYPE\_VALUE** : Choose which action will trigger the apparition of the edition block when fired from the current value. Allowed value : `none`, `click`, `dblclick`
* **\_CONF\_LISTENER\_TYPE\_ICON** : Choose which action will trigger the apparition of the edition block when fired from the pencil icon (by default: same as **\_CONF\_LISTENER\_TYPE\_VALUE**). Allowed value : `none`, `click`, `dblclick`
* **\_CONF\_LISTENER\_TARGET** : Choose which area will trigger the apparition of the edition block
* **\_CONF\_EXCLUDED\_FIELD\_ID** : Choose which fields to exclude. They won't have the edit block and pencil
* **\_CONF\_EXCLUDED\_FIELD\_ID** : Choose which fields to exclude. They won't have the edit block and pencil. Eg: `TitleInput`, `DescriptionInput`, `statusListDropdown` ...
### 🎨 Customization
@ -36,6 +38,7 @@ This plugin uses [FontAwesome icons 4.7](https://fontawesome.com/v4.7.0/)
### 🆕 Changelog
* **v 0.7.2** : New settings added into config file (`\_CONF\_DISPLAY\_EDIT\_ICON` and `\_CONF\_LISTENER\_TYPE\_ICON`) see Configuration part for more info ; new event `none` for `\_CONF\_LISTENER\_TYPE\_VALUE` disabling listener on value ; css fix
* **v 0.7.1** : Fixed incorrect DOM structure if user has read only access to the issue (#61 #64)
* **v 0.7.0** : Category filter by project added (#55) and prevent dialog closing when using fa-pencil selector (#59)
* **v 0.6.9** : Category field support (Github request #54)

47
assets/javascripts/issue_dynamic_edit.js
View File

@ -2,6 +2,7 @@
* OPTIONS DEFINED FROM CONFIGURATION FILE
*/
var _CONF_FORCE_HTTPS = _CONF_FORCE_HTTPS || false;
var _CONF_DISPLAY_EDIT_ICON = _CONF_DISPLAY_EDIT_ICON || "single";
var _CONF_LISTENER_TYPE_VALUE = _CONF_LISTENER_TYPE_VALUE || "click";
var _CONF_LISTENER_TYPE_ICON = _CONF_LISTENER_TYPE_ICON || "click";
var _CONF_LISTENER_TARGET = _CONF_LISTENER_TARGET || "value";
@ -17,6 +18,14 @@ if (_CONF_FORCE_HTTPS) {
LOCATION_HREF = LOCATION_HREF.replace(/^http:\/\//i, 'https://');
}
/* Check if admin want to display all editable fields when hovering the whole details block
* or if user has to hover every element to discover if (s)he can edit it
*/
if (_CONF_DISPLAY_EDIT_ICON === "block"){
$('body.controller-issues.action-show .issue.details').addClass('showDynamicEdit');
}
/* FontAwesome inclusion */
var cssId = 'fontAwesome';
@ -59,16 +68,16 @@ function editActionHandler(e) {
}
// Listen on events on a whole line for any field
$(document).on(_CONF_LISTENER_TYPE_VALUE, editActionHandler);
if(_CONF_LISTENER_TYPE_VALUE !== "none") {
$(document).on(_CONF_LISTENER_TYPE_VALUE, editActionHandler);
} else {
$('body.controller-issues.action-show .issue.details').addClass('no-cursor');
}
// If a supplementary type of event is set specifically for the dynamic edit icon,
// add another listener for it
if (_CONF_LISTENER_TYPE_VALUE !== _CONF_LISTENER_TYPE_ICON) {
$(document).on(_CONF_LISTENER_TYPE_ICON, function (e) {
if (!$(e.target).closest('.fa-pencil').length ||
!$(e.target).closest('.value').length) {
return;
}
if (_CONF_LISTENER_TYPE_VALUE !== _CONF_LISTENER_TYPE_ICON && _CONF_LISTENER_TYPE_ICON !== "none") {
$(document).on(_CONF_LISTENER_TYPE_ICON, '.fa-pencil.dynamicEditIcon' , function (e) {
editActionHandler(e);
});
}
@ -86,7 +95,7 @@ function initEditFields() {
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 dynamicEditIcon fa-fw" aria-hidden="true"></i>'
);
}
@ -97,7 +106,7 @@ function initEditFields() {
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 dynamicEditIcon fa-fw" aria-hidden="true"></i>'
);
}
@ -108,7 +117,7 @@ function initEditFields() {
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 dynamicEditIcon fa-fw" aria-hidden="true"></i>'
);
}
@ -118,7 +127,7 @@ function initEditFields() {
$('.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>'
$('.details .attributes .progress.attribute .value').html() + '</span> <i class="fa fa-pencil dynamicEditIcon fa-fw" aria-hidden="true"></i>'
);
}
@ -129,7 +138,7 @@ function initEditFields() {
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 dynamicEditIcon fa-fw" aria-hidden="true"></i>'
);
}
@ -140,7 +149,7 @@ function initEditFields() {
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 dynamicEditIcon fa-fw" aria-hidden="true"></i>'
);
}
@ -151,7 +160,7 @@ function initEditFields() {
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 dynamicEditIcon fa-fw" aria-hidden="true"></i>'
);
}
@ -162,7 +171,7 @@ function initEditFields() {
htmlCopy +
'<span class="showValue">' +
$('.subject h3').html() +
'</span> <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>'
'</span> <i class="fa fa-pencil dynamicEditIcon fa-fw" aria-hidden="true"></i>'
).addClass('value');
}
@ -171,7 +180,7 @@ function initEditFields() {
$('#DescriptionInput').remove();
$('div.description .wiki').html(
htmlCopy +
' <i class="fa fa-pencil fa-fw" aria-hidden="true" style="float:right;"></i><span class="showValue">' +
' <i class="fa fa-pencil dynamicEditIcon fa-fw" aria-hidden="true" style="float:right;"></i><span class="showValue">' +
$('div.description .wiki').html() + '</span>'
).addClass('value');
}
@ -190,7 +199,7 @@ function initEditFields() {
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 dynamicEditIcon fa-fw" aria-hidden="true"></i>'
);
}
@ -208,7 +217,7 @@ function initEditFields() {
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 dynamicEditIcon fa-fw" aria-hidden="true"></i>'
);
}
@ -246,7 +255,7 @@ function initEditFields() {
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 dynamicEditIcon fa-fw" aria-hidden="true"></i>'
);
if (info.field_format == "date") {

13
assets/javascripts/issue_dynamic_edit_configuration_file.js
View File

@ -11,10 +11,17 @@
*/
var _CONF_FORCE_HTTPS = false;
/*
* _CONF_DISPLAY_EDIT_ICON (string)
* Choose if hovering the details block will display all the pencil icons next to editable values or if the user has to hover every value to check if (s)he can edit it
* Allowed values : single (default), block
*/
var _CONF_DISPLAY_EDIT_ICON = "single";
/*
* _CONF_LISTENER_TYPE_VALUE (string)
* Choose which action will trigger the apparition of the edition block
* Allowed values : click (default), dblclick
* Allowed values : click (default), dblclick, none
*/
var _CONF_LISTENER_TYPE_VALUE = "click";
@ -22,9 +29,9 @@ var _CONF_LISTENER_TYPE_VALUE = "click";
* _CONF_LISTENER_TYPE_ICON (string)
* If different from _CONF_LISTENER_TYPE_VALUE, the action set below will trigger
* the apparition of the edition block if it comes from the pencil icon.
* Allowed values : click (default), dblclick
* Allowed values : click (default), dblclick, none
*/
var _CONF_LISTENER_TYPE_ICON = _CONF_LISTENER_TYPE_VALUE;
var _CONF_LISTENER_TYPE_ICON = "click";
/*
* _CONF_LISTENER_TARGET (string)

16
assets/stylesheets/issue_dynamic_edit.css
View File

@ -27,7 +27,12 @@ body.controller-issues.action-show .issue.details .showValue {
cursor: pointer;
}
body.controller-issues.action-show .issue.details .value:hover .fa-pencil {
body.controller-issues.action-show .issue.details.no-cursor .showValue {
cursor: initial;
}
body.controller-issues.action-show .issue.details .value:hover .fa-pencil,
body.controller-issues.action-show .issue.details.showDynamicEdit:hover .value .fa-pencil {
opacity: 1;
cursor: pointer;
}
@ -45,7 +50,8 @@ body.controller-issues.action-show .dynamicEdit {
background: white;
pointer-events: none;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
width: max-content;
width: auto;
white-space: nowrap; /* force icons to stay on the same line */
}
body.controller-issues.action-show #TitleInput.dynamicEdit {
@ -116,6 +122,12 @@ body.controller-issues.action-show .dynamicEdit input[type="text"] {
width: auto !important;
}
body.controller-issues.action-show .dynamicEdit textarea {
width: 100%;
display: block;
margin-bottom: 10px;
}
body.controller-issues.action-show .dynamicEdit input,
body.controller-issues.action-show .dynamicEdit select {
vertical-align: middle;

2
init.rb
View File

@ -6,7 +6,7 @@ Redmine::Plugin.register :redmine_issue_dynamic_edit do
name 'Redmine Dynamic edit Issue plugin'
author 'Hugo Zilliox'
description 'Allows users to dynamically update issue attributes in detailed view without refreshing the page (JIRA style)'
version '0.7.1'
version '0.7.2'
url 'https://github.com/ilogeek/redmine_issue_dynamic_edit'
author_url 'https://hzilliox.fr'
end