AS1024
/
Kanboard-Prod
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Replace color dropdown by color picker in task forms

This commit is contained in:
Frederic Guillot 2015-09-05 18:24:46 -04:00
parent 70d3340cd0
commit c62e14f1cc
14 changed files with 66 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ChangeLog
View File

@ -7,6 +7,7 @@ New features:
Improvements:
* Replace color dropdown by color picker in task forms
* Creating another task stay in the popover (no full page refresh anymore)
Bug fixes:

2
Makefile
View File

@ -4,7 +4,7 @@ CSS_APP = $(addprefix assets/css/src/, $(addsuffix .css, base links title table
CSS_PRINT = $(addprefix assets/css/src/, $(addsuffix .css, print links table board task comment subtask markdown))
CSS_VENDOR = $(addprefix assets/css/vendor/, $(addsuffix .css, jquery-ui.min jquery-ui-timepicker-addon.min chosen.min fullcalendar.min font-awesome.min c3.min))
JS_APP = $(addprefix assets/js/src/, $(addsuffix .js, Popover Dropdown Tooltip Markdown Sidebar Search App Screenshot Calendar Board Swimlane Gantt TaskRepartitionChart UserRepartitionChart CumulativeFlowDiagram BurndownChart BudgetChart AvgTimeColumnChart TaskTimeColumnChart LeadCycleTimeChart Router))
JS_APP = $(addprefix assets/js/src/, $(addsuffix .js, Popover Dropdown Tooltip Markdown Sidebar Search App Screenshot Calendar Board Swimlane Gantt Task TaskRepartitionChart UserRepartitionChart CumulativeFlowDiagram BurndownChart BudgetChart AvgTimeColumnChart TaskTimeColumnChart LeadCycleTimeChart Router))
JS_VENDOR = $(addprefix assets/js/vendor/, $(addsuffix .js, jquery-1.11.1.min jquery-ui.min jquery-ui-timepicker-addon.min jquery.ui.touch-punch.min chosen.jquery.min moment.min fullcalendar.min mousetrap.min mousetrap-global-bind.min))
JS_LANG = $(addprefix assets/js/vendor/lang/, $(addsuffix .js, da de es fi fr hu it ja nl nb pl pt pt-br ru sv sr th tr zh-cn))

12
app/Template/gantt/task_creation.php
View File

@ -12,7 +12,6 @@
<?= $this->form->text('title', $values, $errors, array('autofocus', 'required', 'maxlength="200"', 'tabindex="1"'), 'form-input-large') ?>
<?= $this->form->label(t('Description'), 'description') ?>
<div class="form-tabs">
<div class="write-area">
<?= $this->form->textarea('description', $values, $errors, array('placeholder="'.t('Leave a description').'"', 'tabindex="2"')) ?>
@ -29,6 +28,8 @@
</li>
</ul>
</div>
<?= $this->render('task/color_picker', array('colors_list' => $colors_list, 'values' => $values)) ?>
</div>
<div class="form-column">
@ -43,17 +44,14 @@
<?= $this->form->select('swimlane_id', $swimlanes_list, $values, $errors, array('tabindex="5"')) ?><br/>
<?php endif ?>
<?= $this->form->label(t('Color'), 'color_id') ?>
<?= $this->form->select('color_id', $colors_list, $values, $errors, array('tabindex="7"')) ?><br/>
<?= $this->form->label(t('Complexity'), 'score') ?>
<?= $this->form->number('score', $values, $errors, array('tabindex="8"')) ?><br/>
<?= $this->form->number('score', $values, $errors, array('tabindex="6"')) ?><br/>
<?= $this->form->label(t('Start Date'), 'date_started') ?>
<?= $this->form->text('date_started', $values, $errors, array('placeholder="'.$this->text->in($date_format, $date_formats).'"', 'tabindex="9"'), 'form-date') ?>
<?= $this->form->text('date_started', $values, $errors, array('placeholder="'.$this->text->in($date_format, $date_formats).'"', 'tabindex="7"'), 'form-date') ?>
<?= $this->form->label(t('Due Date'), 'date_due') ?>
<?= $this->form->text('date_due', $values, $errors, array('placeholder="'.$this->text->in($date_format, $date_formats).'"', 'tabindex="10"'), 'form-date') ?><br/>
<?= $this->form->text('date_due', $values, $errors, array('placeholder="'.$this->text->in($date_format, $date_formats).'"', 'tabindex="8"'), 'form-date') ?><br/>
<div class="form-help"><?= t('Others formats accepted: %s and %s', date('Y-m-d'), date('Y_m_d')) ?></div>
</div>

11
app/Template/task/color_picker.php Normal file
View File

@ -0,0 +1,11 @@
<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->e($color_name) ?>">
</div>
<?php endforeach ?>
</div>
<?= $this->form->hidden('color_id', $values) ?>

5
app/Template/task_creation/form.php
View File

@ -37,7 +37,7 @@
</ul>
</div>
<div class="form-help"><?= $this->url->doc(t('Write your text in Markdown'), 'syntax-guide') ?></div>
<?= $this->render('task/color_picker', array('colors_list' => $colors_list, 'values' => $values)) ?>
<?php if (! isset($duplicate)): ?>
<?= $this->form->checkbox('another_task', t('Create another task'), 1, isset($values['another_task']) && $values['another_task'] == 1) ?>
@ -61,9 +61,6 @@
<?= $this->form->label(t('Column'), 'column_id') ?>
<?= $this->form->select('column_id', $columns_list, $values, $errors, array('tabindex="6"')) ?><br/>
<?= $this->form->label(t('Color'), 'color_id') ?>
<?= $this->form->select('color_id', $colors_list, $values, $errors, array('tabindex="7"')) ?><br/>
<?= $this->form->label(t('Complexity'), 'score') ?>
<?= $this->form->number('score', $values, $errors, array('tabindex="8"')) ?><br/>

5
app/Template/task_modification/edit_task.php
View File

@ -11,7 +11,6 @@
<?= $this->form->text('title', $values, $errors, array('autofocus', 'required', 'maxlength="200"', 'tabindex="1"')) ?><br/>
<?= $this->form->label(t('Description'), 'description') ?>
<div class="form-tabs">
<div class="write-area">
<?= $this->form->textarea('description', $values, $errors, array('placeholder="'.t('Leave a description').'"', 'tabindex="2"')) ?>
@ -29,6 +28,7 @@
</ul>
</div>
<?= $this->render('task/color_picker', array('colors_list' => $colors_list, 'values' => $values)) ?>
</div>
<div class="form-column">
@ -41,9 +41,6 @@
<?= $this->form->label(t('Category'), 'category_id') ?>
<?= $this->form->select('category_id', $categories_list, $values, $errors, array('tabindex="4"')) ?><br/>
<?= $this->form->label(t('Color'), 'color_id') ?>
<?= $this->form->select('color_id', $colors_list, $values, $errors, array('tabindex="5"')) ?><br/>
<?= $this->form->label(t('Complexity'), 'score') ?>
<?= $this->form->number('score', $values, $errors, array('tabindex="6"')) ?><br/>

2
assets/css/app.css
View File

File diff suppressed because one or more lines are too long

2
assets/css/print.css
View File

File diff suppressed because one or more lines are too long

4
assets/css/src/form.css
View File

@ -154,6 +154,7 @@ input.form-input-large {
.form-column {
float: left;
padding-right: 50px;
max-width: 50%;
}
.form-column:first-child {
@ -190,8 +191,9 @@ label + .form-tabs {
max-width: 800px;
}
.form-tabs-nav {
ul.form-tabs-nav {
margin-bottom: 8px;
margin-top: 0;
}
.form-tabs-nav li {

4
assets/css/src/popover.css
View File

@ -15,9 +15,9 @@
width: 70%;
margin: 0 0 0 -35%;
left: 50%;
top: 5%;
top: 1%;
padding: 15px;
background: #fff;
overflow: scroll;
max-height: 83%;
max-height: 85%;
}

26
assets/css/src/task.css
View File

@ -305,3 +305,29 @@ span.task-board-date-overdue {
.flag-milestone {
color: green;
}
/* color picker */
.color-picker {
min-height: 35px;
}
.color-square {
display: inline-block;
width: 30px;
height: 30px;
margin-right: 5px;
margin-bottom: 5px;
border: 1px solid #000;
cursor: pointer;
}
.color-square:hover {
border-style: dotted;
}
div.color-square-selected {
border-width: 2px;
width: 28px;
height: 28px;
box-shadow: 3px 2px 10px 0 rgba(180,180,180,0.9);
}

2
assets/js/app.js
View File

File diff suppressed because one or more lines are too long

2
assets/js/src/App.js
View File

@ -7,6 +7,7 @@ function App() {
this.dropdown = new Dropdown();
this.tooltip = new Tooltip(this);
this.popover = new Popover(this);
this.task = new Task();
this.keyboardShortcuts();
this.chosen();
this.poll();
@ -34,6 +35,7 @@ App.prototype.listen = function() {
this.tooltip.listen();
this.dropdown.listen();
this.search.listen();
this.task.listen();
this.search.focus();
this.taskAutoComplete();
this.datePicker();

10
assets/js/src/Task.js Normal file
View File

@ -0,0 +1,10 @@
function Task() {
}
Task.prototype.listen = function() {
$(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"));
});
};