Use the same task form layout everywhere

This commit is contained in:
Frederic Guillot 2016-06-24 17:57:26 -04:00
parent 18cb7ad0a4
commit 17213da5ce
No known key found for this signature in database
GPG Key ID: 92D77191BA7FBC99
18 changed files with 196 additions and 164 deletions

View File

@ -3,6 +3,7 @@ Version 1.0.31 (unreleased)
Improvements:
* Use the same task form layout everywhere
* Make embedded documentation available in multiple languages
Bug fixes:

View File

@ -41,7 +41,6 @@ class TaskCreationController extends BaseController
'values' => $values + array('project_id' => $project['id']),
'columns_list' => $this->columnModel->getList($project['id']),
'users_list' => $this->projectUserRoleModel->getAssignableUsersList($project['id'], true, false, true),
'colors_list' => $this->colorModel->getList(),
'categories_list' => $this->categoryModel->getList($project['id']),
'swimlanes_list' => $swimlanes_list,
'title' => $project['name'].' > '.t('New task')

View File

@ -36,7 +36,6 @@ class TaskGanttCreationController extends BaseController
'errors' => $errors,
'values' => $values,
'users_list' => $this->projectUserRoleModel->getAssignableUsersList($project['id'], true, false, true),
'colors_list' => $this->colorModel->getList(),
'categories_list' => $this->categoryModel->getList($project['id']),
'swimlanes_list' => $this->swimlaneModel->getList($project['id'], false, true),
'title' => $project['name'].' > '.t('New task')

View File

@ -100,7 +100,6 @@ class TaskModificationController extends BaseController
'task' => $task,
'tags' => $this->taskTagModel->getList($task['id']),
'users_list' => $this->projectUserRoleModel->getAssignableUsersList($task['project_id']),
'colors_list' => $this->colorModel->getList(),
'categories_list' => $this->categoryModel->getList($task['project_id']),
)));
}

View File

@ -47,6 +47,24 @@ class TaskHelper extends Base
return $html;
}
public function selectDescription(array $values, array $errors)
{
$html = $this->helper->form->label(t('Description'), 'description');
$html .= $this->helper->form->textarea(
'description',
$values,
$errors,
array(
'placeholder="'.t('Leave a description').'"',
'tabindex="2"',
'data-mention-search-url="'.$this->helper->url->href('UserAjaxController', 'mention', array('project_id' => $values['project_id'])).'"'
),
'markdown-editor'
);
return $html;
}
public function selectTags(array $project, array $tags = array())
{
$options = $this->tagModel->getAssignableList($project['id']);
@ -68,6 +86,14 @@ class TaskHelper extends Base
return $html;
}
public function selectColor(array $values)
{
$colors = $this->colorModel->getList();
$html = $this->helper->form->label(t('Color'), 'color_id');
$html .= $this->helper->form->select('color_id', $colors, $values, array(), array(), 'color-picker');
return $html;
}
public function selectAssignee(array $users, array $values, array $errors = array(), array $attributes = array())
{
$attributes = array_merge(array('tabindex="3"'), $attributes);

View File

@ -1,11 +0,0 @@
<div class="color-picker">
<?php foreach ($colors_list as $color_id => $color_name): ?>
<div
data-color-id="<?= $color_id ?>"
class="color-square color-<?= $color_id ?> <?= isset($values['color_id']) && $values['color_id'] === $color_id ? 'color-square-selected' : '' ?>"
title="<?= $this->text->e($color_name) ?>">
</div>
<?php endforeach ?>
</div>
<?= $this->form->hidden('color_id', $values) ?>

View File

@ -8,6 +8,7 @@
<?= $this->form->hidden('swimlane_id', $values) ?>
<?= $this->form->hidden('project_id', $values) ?>
<?= $this->task->selectColor($values) ?>
<?= $this->task->selectAssignee($users_list, $values, $errors) ?>
<?= $this->task->selectCategory($categories_list, $values, $errors) ?>
@ -15,8 +16,6 @@
<?= $this->form->textarea('tasks', $values, $errors, array('placeholder="'.t('My task title').'"')) ?>
<p class="form-help"><?= t('Enter one task by line.') ?></p>
<?= $this->render('task/color_picker', array('colors_list' => $colors_list, 'values' => $values)) ?>
<div class="form-actions">
<button type="submit" class="btn btn-blue"><?= t('Save') ?></button>
<?= t('or') ?> <?= $this->url->link(t('cancel'), 'BoardViewController', 'show', array('project_id' => $project['id']), false, 'close-popover') ?>

View File

@ -3,47 +3,42 @@
</div>
<form class="popover-form" method="post" action="<?= $this->url->href('TaskCreationController', 'save', array('project_id' => $values['project_id'])) ?>" autocomplete="off">
<?= $this->form->csrf() ?>
<div class="form-column">
<?= $this->task->selectTitle($values, $errors) ?>
<div class="form-columns">
<div class="form-column">
<?= $this->task->selectTitle($values, $errors) ?>
<?= $this->task->selectDescription($values, $errors) ?>
<?= $this->task->selectTags($project) ?>
<?= $this->form->label(t('Description'), 'description') ?>
<?= $this->form->textarea(
'description',
$values,
$errors,
array(
'placeholder="'.t('Leave a description').'"',
'tabindex="2"',
'data-mention-search-url="'.$this->url->href('UserAjaxController', 'mention', array('project_id' => $values['project_id'])).'"'
),
'markdown-editor'
) ?>
<?php if (! isset($duplicate)): ?>
<?= $this->form->checkbox('another_task', t('Create another task'), 1, isset($values['another_task']) && $values['another_task'] == 1) ?>
<?php endif ?>
<?= $this->task->selectTags($project) ?>
<?= $this->render('task/color_picker', array('colors_list' => $colors_list, 'values' => $values)) ?>
<?= $this->hook->render('template:task:form:first-column', array('values' => $values, 'errors' => $errors)) ?>
</div>
<?php if (! isset($duplicate)): ?>
<?= $this->form->checkbox('another_task', t('Create another task'), 1, isset($values['another_task']) && $values['another_task'] == 1) ?>
<?php endif ?>
<div class="form-column">
<?= $this->form->hidden('project_id', $values) ?>
<?= $this->task->selectColor($values) ?>
<?= $this->task->selectAssignee($users_list, $values, $errors) ?>
<?= $this->task->selectCategory($categories_list, $values, $errors) ?>
<?= $this->task->selectSwimlane($swimlanes_list, $values, $errors) ?>
<?= $this->task->selectColumn($columns_list, $values, $errors) ?>
<?= $this->task->selectPriority($project, $values) ?>
<?= $this->task->selectScore($values, $errors) ?>
<?= $this->hook->render('template:task:form:left-column', array('values' => $values, 'errors' => $errors)) ?>
</div>
<?= $this->hook->render('template:task:form:second-column', array('values' => $values, 'errors' => $errors)) ?>
</div>
<div class="form-column">
<?= $this->form->hidden('project_id', $values) ?>
<?= $this->task->selectAssignee($users_list, $values, $errors) ?>
<?= $this->task->selectCategory($categories_list, $values, $errors) ?>
<?= $this->task->selectSwimlane($swimlanes_list, $values, $errors) ?>
<?= $this->task->selectColumn($columns_list, $values, $errors) ?>
<?= $this->task->selectPriority($project, $values) ?>
<?= $this->task->selectScore($values, $errors) ?>
<?= $this->task->selectTimeEstimated($values, $errors) ?>
<?= $this->task->selectDueDate($values, $errors) ?>
<div class="form-column">
<?= $this->task->selectTimeEstimated($values, $errors) ?>
<?= $this->task->selectTimeSpent($values, $errors) ?>
<?= $this->task->selectStartDate($values, $errors) ?>
<?= $this->task->selectDueDate($values, $errors) ?>
<?= $this->hook->render('template:task:form:right-column', array('values' => $values, 'errors' => $errors)) ?>
<?= $this->hook->render('template:task:form:third-column', array('values' => $values, 'errors' => $errors)) ?>
</div>
</div>
<div class="form-actions">

View File

@ -7,23 +7,34 @@
<?= $this->form->hidden('column_id', $values) ?>
<?= $this->form->hidden('position', $values) ?>
<div class="form-column">
<?= $this->task->selectTitle($values, $errors) ?>
<div class="form-columns">
<div class="form-column">
<?= $this->task->selectTitle($values, $errors) ?>
<?= $this->task->selectDescription($values, $errors) ?>
<?= $this->task->selectTags($project) ?>
<?= $this->form->label(t('Description'), 'description') ?>
<?= $this->form->textarea('description', $values, $errors, array('placeholder="'.t('Leave a description').'"', 'tabindex="2"'), 'markdown-editor') ?>
<?= $this->task->selectTags($project) ?>
<?= $this->render('task/color_picker', array('colors_list' => $colors_list, 'values' => $values)) ?>
</div>
<?= $this->hook->render('template:task:form:first-column', array('values' => $values, 'errors' => $errors)) ?>
</div>
<div class="form-column">
<?= $this->task->selectAssignee($users_list, $values, $errors) ?>
<?= $this->task->selectCategory($categories_list, $values, $errors) ?>
<?= $this->task->selectSwimlane($swimlanes_list, $values, $errors) ?>
<?= $this->task->selectPriority($project, $values) ?>
<?= $this->task->selectScore($values, $errors) ?>
<?= $this->task->selectStartDate($values, $errors) ?>
<?= $this->task->selectDueDate($values, $errors) ?>
<div class="form-column">
<?= $this->task->selectColor($values) ?>
<?= $this->task->selectAssignee($users_list, $values, $errors) ?>
<?= $this->task->selectCategory($categories_list, $values, $errors) ?>
<?= $this->task->selectSwimlane($swimlanes_list, $values, $errors) ?>
<?= $this->task->selectPriority($project, $values) ?>
<?= $this->task->selectScore($values, $errors) ?>
<?= $this->hook->render('template:task:form:second-column', array('values' => $values, 'errors' => $errors)) ?>
</div>
<div class="form-column">
<?= $this->task->selectTimeEstimated($values, $errors) ?>
<?= $this->task->selectTimeSpent($values, $errors) ?>
<?= $this->task->selectStartDate($values, $errors) ?>
<?= $this->task->selectDueDate($values, $errors) ?>
<?= $this->hook->render('template:task:form:third-column', array('values' => $values, 'errors' => $errors)) ?>
</div>
</div>
<div class="form-actions">

View File

@ -6,28 +6,33 @@
<?= $this->form->hidden('id', $values) ?>
<?= $this->form->hidden('project_id', $values) ?>
<div class="form-column">
<?= $this->task->selectTitle($values, $errors) ?>
<?= $this->task->selectTags($project, $tags) ?>
<?= $this->task->selectAssignee($users_list, $values, $errors) ?>
<?= $this->task->selectCategory($categories_list, $values, $errors) ?>
<?= $this->task->selectPriority($project, $values) ?>
<?= $this->task->selectScore($values, $errors) ?>
<div class="form-columns">
<div class="form-column">
<?= $this->task->selectTitle($values, $errors) ?>
<?= $this->task->selectDescription($values, $errors) ?>
<?= $this->task->selectTags($project, $tags) ?>
<?= $this->hook->render('template:task:form:left-column', array('values' => $values, 'errors' => $errors)) ?>
</div>
<?= $this->hook->render('template:task:form:first-column', array('values' => $values, 'errors' => $errors)) ?>
</div>
<div class="form-column">
<?= $this->task->selectTimeEstimated($values, $errors) ?>
<?= $this->task->selectTimeSpent($values, $errors) ?>
<?= $this->task->selectStartDate($values, $errors) ?>
<?= $this->task->selectDueDate($values, $errors) ?>
<div class="form-column">
<?= $this->task->selectColor($values) ?>
<?= $this->task->selectAssignee($users_list, $values, $errors) ?>
<?= $this->task->selectCategory($categories_list, $values, $errors) ?>
<?= $this->task->selectPriority($project, $values) ?>
<?= $this->task->selectScore($values, $errors) ?>
<?= $this->hook->render('template:task:form:right-column', array('values' => $values, 'errors' => $errors)) ?>
</div>
<?= $this->hook->render('template:task:form:second-column', array('values' => $values, 'errors' => $errors)) ?>
</div>
<div class="form-clear">
<?= $this->render('task/color_picker', array('colors_list' => $colors_list, 'values' => $values)) ?>
<div class="form-column">
<?= $this->task->selectTimeEstimated($values, $errors) ?>
<?= $this->task->selectTimeSpent($values, $errors) ?>
<?= $this->task->selectStartDate($values, $errors) ?>
<?= $this->task->selectDueDate($values, $errors) ?>
<?= $this->hook->render('template:task:form:third-column', array('values' => $values, 'errors' => $errors)) ?>
</div>
</div>
<div class="form-actions">

View File

@ -4,37 +4,39 @@
<form class="popover-form" method="post" action="<?= $this->url->href('UserCreationController', 'save') ?>" autocomplete="off">
<?= $this->form->csrf() ?>
<div class="form-column">
<?= $this->form->label(t('Username'), 'username') ?>
<?= $this->form->text('username', $values, $errors, array('autofocus', 'required', 'maxlength="50"')) ?>
<div class="form-columns">
<div class="form-column">
<?= $this->form->label(t('Username'), 'username') ?>
<?= $this->form->text('username', $values, $errors, array('autofocus', 'required', 'maxlength="50"')) ?>
<?= $this->form->label(t('Name'), 'name') ?>
<?= $this->form->text('name', $values, $errors) ?>
<?= $this->form->label(t('Name'), 'name') ?>
<?= $this->form->text('name', $values, $errors) ?>
<?= $this->form->label(t('Email'), 'email') ?>
<?= $this->form->email('email', $values, $errors) ?>
<?= $this->form->label(t('Email'), 'email') ?>
<?= $this->form->email('email', $values, $errors) ?>
<?= $this->form->label(t('Password'), 'password') ?>
<?= $this->form->password('password', $values, $errors, array('required')) ?>
<?= $this->form->label(t('Password'), 'password') ?>
<?= $this->form->password('password', $values, $errors, array('required')) ?>
<?= $this->form->label(t('Confirmation'), 'confirmation') ?>
<?= $this->form->password('confirmation', $values, $errors, array('required')) ?>
</div>
<?= $this->form->label(t('Confirmation'), 'confirmation') ?>
<?= $this->form->password('confirmation', $values, $errors, array('required')) ?>
</div>
<div class="form-column">
<?= $this->form->label(t('Add project member'), 'project_id') ?>
<?= $this->form->select('project_id', $projects, $values, $errors) ?>
<div class="form-column">
<?= $this->form->label(t('Add project member'), 'project_id') ?>
<?= $this->form->select('project_id', $projects, $values, $errors) ?>
<?= $this->form->label(t('Timezone'), 'timezone') ?>
<?= $this->form->select('timezone', $timezones, $values, $errors) ?>
<?= $this->form->label(t('Timezone'), 'timezone') ?>
<?= $this->form->select('timezone', $timezones, $values, $errors) ?>
<?= $this->form->label(t('Language'), 'language') ?>
<?= $this->form->select('language', $languages, $values, $errors) ?>
<?= $this->form->label(t('Language'), 'language') ?>
<?= $this->form->select('language', $languages, $values, $errors) ?>
<?= $this->form->label(t('Role'), 'role') ?>
<?= $this->form->select('role', $roles, $values, $errors) ?>
<?= $this->form->label(t('Role'), 'role') ?>
<?= $this->form->select('role', $roles, $values, $errors) ?>
<?= $this->form->checkbox('notifications_enabled', t('Enable email notifications'), 1, isset($values['notifications_enabled']) && $values['notifications_enabled'] == 1 ? true : false) ?>
<?= $this->form->checkbox('notifications_enabled', t('Enable email notifications'), 1, isset($values['notifications_enabled']) && $values['notifications_enabled'] == 1 ? true : false) ?>
</div>
</div>
<div class="form-actions">

View File

@ -2,38 +2,39 @@
<h2><?= t('New remote user') ?></h2>
</div>
<form class="popover-form" method="post" action="<?= $this->url->href('UserCreationController', 'save') ?>" autocomplete="off">
<?= $this->form->csrf() ?>
<?= $this->form->hidden('is_ldap_user', array('is_ldap_user' => 1)) ?>
<div class="form-column">
<?= $this->form->label(t('Username'), 'username') ?>
<?= $this->form->text('username', $values, $errors, array('autofocus', 'required', 'maxlength="50"')) ?>
<div class="form-columns">
<div class="form-column">
<?= $this->form->label(t('Username'), 'username') ?>
<?= $this->form->text('username', $values, $errors, array('autofocus', 'required', 'maxlength="50"')) ?>
<?= $this->form->label(t('Name'), 'name') ?>
<?= $this->form->text('name', $values, $errors) ?>
<?= $this->form->label(t('Name'), 'name') ?>
<?= $this->form->text('name', $values, $errors) ?>
<?= $this->form->label(t('Email'), 'email') ?>
<?= $this->form->email('email', $values, $errors) ?>
<?= $this->form->label(t('Email'), 'email') ?>
<?= $this->form->email('email', $values, $errors) ?>
<?= $this->hook->render('template:user:create-remote:form', array('values' => $values, 'errors' => $errors)) ?>
</div>
<?= $this->hook->render('template:user:create-remote:form', array('values' => $values, 'errors' => $errors)) ?>
</div>
<div class="form-column">
<?= $this->form->label(t('Add project member'), 'project_id') ?>
<?= $this->form->select('project_id', $projects, $values, $errors) ?>
<div class="form-column">
<?= $this->form->label(t('Add project member'), 'project_id') ?>
<?= $this->form->select('project_id', $projects, $values, $errors) ?>
<?= $this->form->label(t('Timezone'), 'timezone') ?>
<?= $this->form->select('timezone', $timezones, $values, $errors) ?>
<?= $this->form->label(t('Timezone'), 'timezone') ?>
<?= $this->form->select('timezone', $timezones, $values, $errors) ?>
<?= $this->form->label(t('Language'), 'language') ?>
<?= $this->form->select('language', $languages, $values, $errors) ?>
<?= $this->form->label(t('Language'), 'language') ?>
<?= $this->form->select('language', $languages, $values, $errors) ?>
<?= $this->form->label(t('Role'), 'role') ?>
<?= $this->form->select('role', $roles, $values, $errors) ?>
<?= $this->form->label(t('Role'), 'role') ?>
<?= $this->form->select('role', $roles, $values, $errors) ?>
<?= $this->form->checkbox('notifications_enabled', t('Enable email notifications'), 1, isset($values['notifications_enabled']) && $values['notifications_enabled'] == 1 ? true : false) ?>
<?= $this->form->checkbox('disable_login_form', t('Disallow login form'), 1, isset($values['disable_login_form']) && $values['disable_login_form'] == 1) ?>
<?= $this->form->checkbox('notifications_enabled', t('Enable email notifications'), 1, isset($values['notifications_enabled']) && $values['notifications_enabled'] == 1 ? true : false) ?>
<?= $this->form->checkbox('disable_login_form', t('Disallow login form'), 1, isset($values['disable_login_form']) && $values['disable_login_form'] == 1) ?>
</div>
</div>
<div class="form-actions">

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -66,8 +66,7 @@ select:focus {
}
span.select2-container {
margin-top: 3px;
margin-bottom: 10px;
margin-top: 2px;
}
::-webkit-input-placeholder {
@ -155,21 +154,15 @@ input.form-input-large {
width: 400px;
}
.form-columns {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
.form-column {
float: left;
margin-right: 3%;
max-width: 50%;
min-width: 40%;
}
.form-column ul {
margin-top: 15px;
}
.form-clear {
clear: both;
padding-top: 20px;
padding-bottom: 10px;
margin-right: 25px;
}
.form-login {

View File

@ -256,28 +256,29 @@ span.task-board-age-column {
/* color picker */
.color-picker {
min-height: 35px;
width: 180px;
}
.color-square {
.color-picker-option {
height: 25px;
}
.color-picker-square {
display: inline-block;
width: 30px;
height: 30px;
width: 18px;
height: 18px;
margin-right: 5px;
margin-bottom: 5px;
border: 1px solid #000;
cursor: pointer;
}
.color-square:hover {
border-style: dotted;
.color-picker-label {
display: inline-block;
vertical-align: bottom;
padding-bottom: 3px;
}
div.color-square-selected {
border-width: 2px;
width: 28px;
height: 28px;
box-shadow: 3px 2px 10px 0 rgba(180,180,180,0.9);
#select2-form-color_id-results li.select2-results__option {
padding: 3px;
}
/* Assign to me */

File diff suppressed because one or more lines are too long

View File

@ -33,12 +33,7 @@ Kanboard.Task.prototype.onPopoverOpened = function() {
var self = this;
var reloadingProjectId = 0;
// Change color
$(document).on("click", ".color-square", function() {
$(".color-square-selected").removeClass("color-square-selected");
$(this).addClass("color-square-selected");
$("#form-color_id").val($(this).data("color-id"));
});
self.renderColorPicker();
// Assign to me
$(document).on("click", ".assign-me", function(e) {
@ -75,3 +70,20 @@ Kanboard.Task.prototype.onPopoverOpened = function() {
}
});
};
Kanboard.Task.prototype.renderColorPicker = function() {
function renderColorOption(color) {
return $(
'<div class="color-picker-option">' +
'<div class="color-picker-square color-' + color.id + '"></div>' +
'<div class="color-picker-label">' + color.text + '</div>' +
'</div>'
);
}
$(".color-picker").select2({
minimumResultsForSearch: Infinity,
templateResult: renderColorOption,
templateSelection: renderColorOption
});
};