Replace color dropdown by color picker in task forms

4 files changed, 18 insertions, 15 deletions

diff --git a/app/Template/gantt/task_creation.php b/app/Template/gantt/task_creation.php
index d0d14c1e..7997e231 100644
--- a/app/Template/gantt/task_creation.php
+++ b/app/Template/gantt/task_creation.php
@@ -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>
 
diff --git a/app/Template/task/color_picker.php b/app/Template/task/color_picker.php
new file mode 100644
index 00000000..a849b9ce
--- /dev/null
+++ b/app/Template/task/color_picker.php
@@ -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) ?>
\ No newline at end of file
diff --git a/app/Template/task_creation/form.php b/app/Template/task_creation/form.php
index 747c843d..325ca1c8 100644
--- a/app/Template/task_creation/form.php
+++ b/app/Template/task_creation/form.php
@@ -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/>
 
diff --git a/app/Template/task_modification/edit_task.php b/app/Template/task_modification/edit_task.php
index 0cabc6e8..f4d7449a 100644
--- a/app/Template/task_modification/edit_task.php
+++ b/app/Template/task_modification/edit_task.php
@@ -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/>