Task Modal Improvements (#9560)

* start adding advanced options

* new imput

* partial colors

* update deps

* misc adds

* fix text color

* add advanced options

* initial reordering of task modal labels

* start to fix colors in the modal

* wip colors

* update package-lock.json

* fix merge

* finish modal

* refactor colors

* fix quick add

* fix colors

* new icon colors

* add markdown formatting help

* fix habits colors

* fix rewards colors

* fixed remaining colors

* start to inline inputs

* fix typ

* fixes

* habits hover state

* wip new task modal inputs

* bootstrap: upgrade to v4-beta3

* finish reward edit modal

* fix attributes allocation, checklists and add help tooltips for attributes and difficulty

* lots of fixes

* update datepicker

* misc fixes

website/client/components/groups/group.vue

@@ -247,10 +247,6 @@
     }
   }
 
-  .toggle-up .svg-icon, .toggle-down .svg-icon {
-    width: 25px;
-  }
-
   span.action {
     font-size: 14px;
     line-height: 1.33;
@@ -286,10 +282,6 @@
     padding-bottom: 1em;
   }
 
-  .toggle-up, .toggle-down {
-    cursor: pointer;
-  }
-
   .hr {
     width: 100%;
     height: 20px;

website/client/components/groups/groupFormModal.vue

@@ -13,10 +13,9 @@
         label
           strong(v-once) {{$t('privacySettings')}} *
         br
-        label.custom-control.custom-checkbox
-          input.custom-control-input(type="checkbox", v-model="workingGroup.onlyLeaderCreatesChallenges")
-          span.custom-control-indicator
-          span.custom-control-description(v-once) {{ $t('onlyLeaderCreatesChallenges') }}
+        .custom-control.custom-checkbox
+          input.custom-control-input#onlyLeaderCreatesChallenges(type="checkbox", v-model="workingGroup.onlyLeaderCreatesChallenges")
+          label.custom-control-label(v-once, for="onlyLeaderCreatesChallenges") {{ $t('onlyLeaderCreatesChallenges') }}
           #groupPrivateDescription1.icon(:title="$t('privateDescription')")
             .svg-icon(v-html='icons.information')
           b-tooltip(
@@ -25,18 +24,16 @@
           )
 
         // br
-        // @TODO Implement in V2 label.custom-control.custom-checkbox
+        // @TODO Implement in V2 .custom-control.custom-checkbox
           input.custom-control-input(type="checkbox", v-model="workingGroup.guildLeaderCantBeMessaged")
-          span.custom-control-indicator
-          span.custom-control-description(v-once) {{ $t('guildLeaderCantBeMessaged') }}
+          label.custom-control-label(v-once) {{ $t('guildLeaderCantBeMessaged') }}
           // "guildLeaderCantBeMessaged": "Leader can not be messaged directly",
           // @TODO discuss the impact of this with moderators before implementing
 
         br
-        label.custom-control.custom-checkbox(v-if='!isParty && !this.workingGroup.id')
-          input.custom-control-input(type="checkbox", v-model="workingGroup.privateGuild")
-          span.custom-control-indicator
-          span.custom-control-description(v-once) {{ $t('privateGuild') }}
+        .custom-control.custom-checkbox(v-if='!isParty && !this.workingGroup.id')
+          input.custom-control-input#privateGuild(type="checkbox", v-model="workingGroup.privateGuild")
+          label.custom-control-label(v-once, for="privateGuild") {{ $t('privateGuild') }}
           #groupPrivateDescription2.icon(:title="$t('privateDescription')")
             .svg-icon(v-html='icons.information')
           b-tooltip(
@@ -45,10 +42,9 @@
           )
 
         // br
-        // @TODO: Implement in v2 label.custom-control.custom-checkbox(v-if='!creatingParty')
+        // @TODO: Implement in v2 .custom-control.custom-checkbox(v-if='!creatingParty')
           input.custom-control-input(type="checkbox", v-model="workingGroup.allowGuildInvitationsFromNonMembers")
-          span.custom-control-indicator
-          span.custom-control-description(v-once) {{ $t('allowGuildInvitationsFromNonMembers') }}
+          label.custom-control-label(v-once) {{ $t('allowGuildInvitationsFromNonMembers') }}
           // "allowGuildInvitationsFromNonMembers": "Allow Guild invitations from non-members",
 
       .form-group(v-if='!isParty')
@@ -80,10 +76,9 @@
             :key="group.key",
             v-if='group.key !== "habitica_official" || user.contributor.admin'
           )
-            label.custom-control.custom-checkbox
-              input.custom-control-input(type="checkbox", :value="group.key", v-model="workingGroup.categories")
-              span.custom-control-indicator
-              span.custom-control-description(v-once) {{ $t(group.label) }}
+            .custom-control.custom-checkbox
+              input.custom-control-input(:id="group.key", type="checkbox", :value="group.key", v-model="workingGroup.categories")
+              label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
           button.btn.btn-primary(@click.prevent="toggleCategorySelect") {{$t('close')}}
         // @TODO: need categories only for PUBLIC GUILDS, not for tavern, private guilds, or party
 

website/client/components/groups/sidebar.vue

@@ -11,30 +11,27 @@
         v-for="group in categoryOptions",
         :key="group.key",
       )
-        label.custom-control.custom-checkbox
-          input.custom-control-input(type="checkbox", :value='group.key' v-model="categoryFilters")
-          span.custom-control-indicator
-          span.custom-control-description(v-once) {{ $t(group.label) }}
+        .custom-control.custom-checkbox
+          input.custom-control-input(type="checkbox", :value='group.key' v-model="categoryFilters", :id="group.key")
+          label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
     .form-group
       h3 Role
       .form-check(
         v-for="group in roleOptions",
         :key="group.key",
       )
-        label.custom-control.custom-checkbox
-          input.custom-control-input(type="checkbox", :value='group.key' v-model="roleFilters")
-          span.custom-control-indicator
-          span.custom-control-description(v-once) {{ $t(group.label) }}
+        .custom-control.custom-checkbox
+          input.custom-control-input(type="checkbox", :value='group.key' v-model="roleFilters", :id="group.key")
+          label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
     .form-group
       h3 Guild Size
       .form-check(
         v-for="group in guildSizeOptions",
         :key="group.key",
       )
-        label.custom-control.custom-checkbox
-          input.custom-control-input(type="checkbox", :value='group.key' v-model="guildSizeFilters")
-          span.custom-control-indicator
-          span.custom-control-description(v-once) {{ $t(group.label) }}
+        .custom-control.custom-checkbox
+          input.custom-control-input(type="checkbox", :value='group.key' v-model="guildSizeFilters", :id="group.key")
+          label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
 </template>
 
 <script>

website/client/components/groups/tavern.vue

@@ -214,14 +214,6 @@
     }
   }
 
-  .toggle-up, .toggle-down {
-    width: 20px;
-  }
-
-  .toggle-up:hover, .toggle-down:hover {
-    cursor: pointer;
-  }
-
   .pause-button {
     background-color: #ffb445 !important;
     color: $white;