Cleaned up task.jade file:

- moved ugly html newlines into the stylesheet
- renamed temporary var for datePicker’s ngmodel from _dateString to _tempDateForPicker
- renamed open -> openDatePicker, and have the function track datePicker’s open/closed state on a per task instead of global basis

common/locales/en/tasks.json

@@ -60,6 +60,7 @@
     "clearTags": "Clear",
     "hideTags": "Hide",
     "showTags": "Show",
+    "startDate": "Start Date",
     "streakName": "Streak Achievements",
     "streakText": "Has performed <%= streaks %> 21-day streaks on Dailies",
     "streakSingular": "Streaker",

website/public/css/tasks.styl

@@ -12,7 +12,7 @@ for $stage in $stages
     .color-{$stage[0]}:not(.completed)
       background-color: $stage[1]
       border: 1px solid shade($stage[1],10%)
-      .priority-multiplier, .task-attributes, .repeat-days
+      .priority-multiplier, .task-attributes, .repeat-days, .repeat-frequency
         li
           hrpg-button-color-mixin($stage[1])
           button
@@ -63,7 +63,7 @@ for $stage in $stages
   color: darken($completed,30%)
   background-color: $completed
   border: 1px solid shade($completed,10%)
-  .priority-multiplier, .task-attributes, .repeat-days
+  .priority-multiplier, .task-attributes, .repeat-days, .repeat-frequency
     li
       hrpg-button-color-mixin($completed)
       button
@@ -507,7 +507,7 @@ form
 
   form
     padding-bottom: 1em
-  .priority-multiplier, .task-attributes, .repeat-days
+  .priority-multiplier, .task-attributes, .repeat-days, .repeat-frequency
     text-align: center
     li
       @extend $hrpg-button
@@ -517,6 +517,7 @@ form
       &:last-of-type
         margin-right: 0
   .repeat-days
+    padding-bottom: 1em
     li
       button
         min-width: 2.5em
@@ -524,6 +525,11 @@ form
     text-align: center
     @extend $hrpg-button
 
+// Dailies
+.dailies
+  .repeat-weekly
+    padding-bottom: 1em
+
 // Habits – task button styles (+ -)
 .habits
   .task-actions

website/public/js/controllers/tasksCtrl.js

@@ -4,10 +4,6 @@ habitrpg.controller("TasksCtrl", ['$scope', '$rootScope', '$location', 'User','N
   function($scope, $rootScope, $location, User, Notification, $http, ApiUrl, $timeout, Shared, Guide) {
     $scope.obj = User.user; // used for task-lists
     $scope.user = User.user;
-    // HACK: flagDict is for storing whether the datePicker popup is open or not. This should just be a boolean flag,
-    // but apparently due to angular bug need to put the bool in intermediate dict...
-    $scope.flagDict = {};
-
     $scope.score = function(task, direction) {
       switch (task.type) {
           case 'reward':
@@ -136,15 +132,18 @@ habitrpg.controller("TasksCtrl", ['$scope', '$rootScope', '$location', 'User','N
      ------------------------
      */
     $scope.updateTaskStartDate = function(task) {
-      // TODO: Weirdness here...startDate should be a Date and _dateString
-      // should be a string, but the datePicker input fields sets _dateString
-      // to a Date even though input type="text"...
-      task.startDate = task._dateString;
+      /*
+       Keep startDate and _tempDateForPicker in sync. The reason for having both instead
+       of having startDate be the ngmodel for datePicker is that datePicker initializes with
+       an incorrect format when given a Date for an ngmodel; instead we initialize _tempDate
+       to be a string that datePicker then converts to a Date, which lets us control the format.
+       */
+      task.startDate = task._tempDateForPicker;
     };
 
-    $scope.open = function($event) {
+    $scope.openDatePicker = function($event, task) {
       $event.stopPropagation();
-      $scope.flagDict['opened'] = !$scope.flagDict['opened'];
+      task._isDatePickerOpen = !task._isDatePickerOpen;
     }
 
 

website/public/js/directives/directives.js

@@ -45,7 +45,7 @@ habitrpg
           task._editing = !task._editing;
           task._tags = User.user.preferences.tagsCollapsed;
           task._advanced = User.user.preferences.advancedCollapsed;
-          task._dateString = moment(task.startDate).format('YYYY-MM-DD');
+          task._tempDateForPicker = moment(task.startDate).format('YYYY-MM-DD');
           if($rootScope.charts[task.id]) $rootScope.charts[task.id] = false;
         };
       }],

website/views/shared/tasks/task.jade

@@ -164,34 +164,33 @@ li(bindonce='list', id='task-{{::task.id}}', ng-repeat='task in obj[list.type+"s
             label(for='{{obj._id}}_{{task.id}}-option-minus')
 
         // if Daily, calendar
-        fieldset(ng-if='::task.type=="daily"', class="option-group")
+        fieldset.option-group.calendar(ng-if='::task.type=="daily"', class="option-group")
+          .dailies
             legend.option-title=env.t('repeat')
 
             // Choose the frequency
-          ul.priority-multiplier
+            ul.repeat-frequency
               li
                 button(ng-class='{active: task.frequency=="daily"}', type='button', ng-click='task.frequency="daily"')='Daily'
               li
                 button(ng-class='{active: task.frequency=="weekly"}', type='button', ng-click='task.frequency="weekly"')='Weekly'
 
             // If frequency is daily
-          fieldset(ng-show='task.frequency=="daily"')
+            div.repeat-frequency(ng-show='task.frequency=="daily"')
+              div.repeat-daily
                 | Once every  
                 select(ng-model='task.everyX')
                   option(ng-repeat='x in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]') {{x}}
-            |   days<br><br>
-            | Start date:&nbsp;
-            p(class='input-group')
-              input(type='text' class='form-control' datepicker-popup ng-model='task._dateString' ng-change='updateTaskStartDate(task)' is-open='flagDict.opened')
-              span(class='input-group-btn')
-                button(type="button" ng-click="open($event)")
-                  span.input-group-addon.glyphicon.glyphicon-calendar
+                |   days
+
             // If frequency is weekly
-          fieldset(ng-show='task.frequency=="weekly"')
+            div.repeat-frequency(ng-show='task.frequency=="weekly"')
+              div.repeat-weekly
                 | Once every&nbsp;
                 select(ng-model='task.everyX')
                   option(ng-repeat='x in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]') {{x}}
-            |  weeks on these days: <br><br>
+                |  weeks on these days:
+
               ul.repeat-days(bindonce)
                 // note, does not use data-toggle="buttons-checkbox" - it would interfere with our own click binding
                 li
@@ -208,12 +207,12 @@ li(bindonce='list', id='task-{{::task.id}}', ng-repeat='task in obj[list.type+"s
                   button(ng-class='{active: task.repeat.f}', type='button', ng-click='task.challenge.id || (task.repeat.f= !task.repeat.f)') {{::moment.weekdaysMin(5)}}
                 li
                   button(ng-class='{active: task.repeat.s}', type='button', ng-click='task.challenge.id || (task.repeat.s = !task.repeat.s)') {{::moment.weekdaysMin(6)}}
-              | <br><br>
-              | Start date:&nbsp;
+
+            label.option-title=env.t('startDate')
             p(class='input-group')
-                input(type='text' class='form-control' datepicker-popup ng-model='task._dateString' ng-change='updateTaskStartDate(task)' is-open='flagDict.opened')
+              input(type='text' class='form-control' datepicker-popup ng-model='task._tempDateForPicker' ng-change='updateTaskStartDate(task)' is-open='task._isDatePickerOpen')
               span(class='input-group-btn')
-                  button(type="button" ng-click="open($event)")
+                button(type="button" ng-click="openDatePicker($event, task)")
                   span.input-group-addon.glyphicon.glyphicon-calendar