difficulty options colors and active label fixes

HabitRPG · Aug 8, 2017 · d5f4ecb · d5f4ecb
1 parent cc2721a
commit d5f4ecb
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 6 deletions.
diff --git a/website/client/assets/scss/task.scss b/website/client/assets/scss/task.scss
@@ -20,6 +20,10 @@
   &-purple {
     background: $purple-300;
 
+    &-color {
+      color: $purple-300;
+    }
+
     &-control-habit {
       background: $purple-300;
     }
@@ -31,6 +35,11 @@
 
   &-worst {
     background: $maroon-100;
+
+    &-color {
+      color: darken($maroon-100, 12%);
+    }
+
     &-control-habit {
       background: darken($maroon-100, 12%);
     }
@@ -47,6 +56,11 @@
 
   &-worse {
     background: $red-100;
+
+    &-color {
+      color: darken($red-100, 12%);
+    }
+
     &-control-habit {
       background: darken($red-100, 12%);
     }
@@ -63,6 +77,11 @@
 
   &-bad {
     background: $orange-100;
+
+    &-color {
+      color: darken($orange-100, 12%);
+    }
+
     &-control-habit {
       background: darken($orange-100, 12%);
     }
@@ -79,6 +98,11 @@
 
   &-neutral {
     background: $yellow-100;
+
+    &-color {
+      color: darken($yellow-100, 12%);
+    }
+
     &-control-habit {
       background: darken($yellow-100, 12%);
     }
@@ -95,6 +119,11 @@
 
   &-good {
     background: $green-10;
+
+    &-color {
+      color: darken($green-10, 12%);
+    }
+
     &-control-habit {
       background: darken($green-10, 12%);
     }
@@ -111,6 +140,11 @@
 
   &-better {
     background: $blue-50;
+
+    &-color {
+      color: darken($blue-50, 12%);
+    }
+
     &-control-habit {
       background: darken($blue-50, 12%);
     }
@@ -127,6 +161,11 @@
 
   &-best {
     background: $teal-50;
+
+    &-color {
+      color: darken($teal-50, 12%);
+    }
+
     &-control-habit {
       background: darken($teal-50, 12%);
     }

diff --git a/website/client/components/tasks/taskModal.vue b/website/client/components/tasks/taskModal.vue
@@ -31,12 +31,12 @@ form(
             .svg-icon.destroy-icon(v-html="icons.destroy")
         input.inline-edit-input.checklist-item.form-control(type="text", :placeholder="$t('newChecklistItem')", @keydown.enter="addChecklistItem($event)", v-model="newChecklistItem")
       .d-flex.justify-content-center(v-if="task.type === 'habit'")
-        .option-item(:class="{'option-item-selected': task.up === true}", @click="task.up = !task.up")
+        .option-item(:class="optionClass(task.up === true)", @click="task.up = !task.up")
           .option-item-box
             .task-control.habit-control(:class="controlClass.up + '-control-habit'")
               .svg-icon.positive(v-html="icons.positive")
           .option-item-label(v-once) {{ $t('positive') }}
-        .option-item(:class="{'option-item-selected': task.down === true}", @click="task.down = !task.down")
+        .option-item(:class="optionClass(task.down === true)", @click="task.down = !task.down")
           .option-item-box
             .task-control.habit-control(:class="controlClass.down + '-control-habit'")
               .svg-icon.negative(v-html="icons.negative")
@@ -46,19 +46,19 @@ form(
           span.float-left {{ $t('difficulty') }}
           .svg-icon.info-icon(v-html="icons.information")
         .d-flex.justify-content-center
-          .option-item(:class="{'option-item-selected': task.priority === 0.1}", @click="task.priority = 0.1")
+          .option-item(:class="optionClass(task.priority === 0.1)", @click="task.priority = 0.1")
             .option-item-box
               .svg-icon.difficulty-trivial-icon(v-html="icons.difficultyTrivial")
             .option-item-label(v-once) {{ $t('trivial') }}
-          .option-item(:class="{'option-item-selected': task.priority === 1}", @click="task.priority = 1")
+          .option-item(:class="optionClass(task.priority === 1)", @click="task.priority = 1")
             .option-item-box
               .svg-icon.difficulty-normal-icon(v-html="icons.difficultyNormal")
             .option-item-label(v-once) {{ $t('easy') }}
-          .option-item(:class="{'option-item-selected': task.priority === 1.5}", @click="task.priority = 1.5")
+          .option-item(:class="optionClass(task.priority === 1.5)", @click="task.priority = 1.5")
             .option-item-box
               .svg-icon.difficulty-medium-icon(v-html="icons.difficultyMedium")
             .option-item-label(v-once) {{ $t('medium') }}
-          .option-item(:class="{'option-item-selected': task.priority === 2}", @click="task.priority = 2")
+          .option-item(:class="optionClass(task.priority === 2)", @click="task.priority = 2")
             .option-item-box
               .svg-icon.difficulty-hard-icon(v-html="icons.difficultyHard")
             .option-item-label(v-once) {{ $t('hard') }}
@@ -227,6 +227,12 @@ form(
         margin-right: 0px;
       }
 
+      &-selected {
+        .option-item-label {
+          color: inherit !important;
+        }
+      }
+
       &-box {
         width: 64px;
         height: 64px;
@@ -415,6 +421,13 @@ export default {
   },
   methods: {
     ...mapActions({saveTask: 'tasks:save', destroyTask: 'tasks:destroy', createTask: 'tasks:create'}),
+    optionClass (activeCondition) {
+      if (activeCondition) {
+        return [`${this.cssClass}-color`, 'option-item-selected'];
+      } else {
+        return [];
+      }
+    },
     addChecklistItem (e) {
       this.task.checklist.push({
         id: uuid.v4(),