refactor(tasks) improve UI consistency
* Round corners for UI elements / “8-bit” outlines for RPG elements. * Tag bar – Make it clearer that “Tags” is a heading, not an option * Task filters – restyle in line with tag bar + nav menu
This commit is contained in:
benmanley
@@ -1,4 +1,4 @@
|
||||
li(bindonce='list', bo-id='"task-"+task.id', ng-repeat='task in obj[list.type+"s"]', class='task {{Shared.taskClasses(task, user.filters, user.preferences.dayStart, user.lastCron, list.showCompleted, main)}}', ng-click='spell && (list.type != "reward") && castEnd(task, "task", $event)', ng-class='{"cast-target":spell && (list.type != "reward")}', popover-trigger='mouseenter', data-popover-html="{{task.notes | markdown}}", data-popover-placement="top", ng-show='shouldShow(task, list, user.preferences)')
|
||||
li(bindonce='list', id='task-{{::task.id}}', ng-repeat='task in obj[list.type+"s"]', class='task {{Shared.taskClasses(task, user.filters, user.preferences.dayStart, user.lastCron, list.showCompleted, main)}}', ng-click='spell && (list.type != "reward") && castEnd(task, "task", $event)', ng-class='{"cast-target":spell && (list.type != "reward")}', popover-trigger='mouseenter', data-popover-html="{{task.notes | markdown}}", data-popover-placement="top", ng-show='shouldShow(task, list, user.preferences)')
|
||||
// right-hand side control buttons
|
||||
.task-meta-controls
|
||||
|
||||
@@ -60,7 +60,7 @@ li(bindonce='list', bo-id='"task-"+task.id', ng-repeat='task in obj[list.type+"s
|
||||
.task-controls.task-primary(ng-if='!task._editing')
|
||||
|
||||
// Habits
|
||||
span(bo-if='task.type=="habit"')
|
||||
span(ng-if='::task.type=="habit"')
|
||||
// score() is overridden in challengesCtrl to do nothing
|
||||
a.task-action-btn(ng-if='task.up', ng-click='score(task,"up")') +
|
||||
a.task-action-btn(ng-if='task.down', ng-click='score(task,"down")') -
|
||||
@@ -72,7 +72,7 @@ li(bindonce='list', bo-id='"task-"+task.id', ng-repeat='task in obj[list.type+"s
|
||||
span.shop_gold
|
||||
|
||||
// Daily & Todos
|
||||
span.task-checker.action-yesno(bo-if='task.type=="daily" || task.type=="todo"')
|
||||
span.task-checker.action-yesno(ng-if='::task.type=="daily" || task.type=="todo"')
|
||||
input.visuallyhidden.focusable(ng-if='$state.includes("tasks")', id='box-{{obj._id}}_{{task.id}}', type='checkbox', ng-model='task.completed', ng-change='task.type=="todo" && pushTask(task,$index,"bottom"); changeCheck(task)')
|
||||
input.visuallyhidden.focusable(ng-if='!$state.includes("tasks")', id='box-{{obj._id}}_{{task.id}}', type='checkbox')
|
||||
label(for='box-{{obj._id}}_{{task.id}}')
|
||||
@@ -163,17 +163,17 @@ li(bindonce='list', bo-id='"task-"+task.id', ng-repeat='task in obj[list.type+"s
|
||||
label(for='{{obj._id}}_{{task.id}}-option-minus')
|
||||
|
||||
// if Daily, calendar
|
||||
fieldset(bo-if='task.type=="daily"', class="option-group")
|
||||
fieldset(ng-if='::task.type=="daily"', class="option-group")
|
||||
legend.option-title=env.t('repeat')
|
||||
.task-controls.tile-group.repeat-days(bindonce)
|
||||
// note, does not use data-toggle="buttons-checkbox" - it would interfere with our own click binding
|
||||
button.task-action-btn.tile(ng-class='{active: task.repeat.su}', type='button', ng-click='task.challenge.id || (task.repeat.su = !task.repeat.su)', bo-text='moment.weekdaysMin(0)')
|
||||
button.task-action-btn.tile(ng-class='{active: task.repeat.m}', type='button', ng-click='task.challenge.id || (task.repeat.m = !task.repeat.m)', bo-text='moment.weekdaysMin(1)')
|
||||
button.task-action-btn.tile(ng-class='{active: task.repeat.t}', type='button', ng-click='task.challenge.id || (task.repeat.t = !task.repeat.t)', bo-text='moment.weekdaysMin(2)')
|
||||
button.task-action-btn.tile(ng-class='{active: task.repeat.w}', type='button', ng-click='task.challenge.id || (task.repeat.w = !task.repeat.w)', bo-text='moment.weekdaysMin(3)')
|
||||
button.task-action-btn.tile(ng-class='{active: task.repeat.th}', type='button', ng-click='task.challenge.id || (task.repeat.th = !task.repeat.th)', bo-text='moment.weekdaysMin(4)')
|
||||
button.task-action-btn.tile(ng-class='{active: task.repeat.f}', type='button', ng-click='task.challenge.id || (task.repeat.f= !task.repeat.f)', bo-text='moment.weekdaysMin(5)')
|
||||
button.task-action-btn.tile(ng-class='{active: task.repeat.s}', type='button', ng-click='task.challenge.id || (task.repeat.s = !task.repeat.s)', bo-text='moment.weekdaysMin(6)')
|
||||
button.task-action-btn.tile(ng-class='{active: task.repeat.su}', type='button', ng-click='task.challenge.id || (task.repeat.su = !task.repeat.su)') {{::moment.weekdaysMin(0)}}
|
||||
button.task-action-btn.tile(ng-class='{active: task.repeat.m}', type='button', ng-click='task.challenge.id || (task.repeat.m = !task.repeat.m)') {{::moment.weekdaysMin(1)}}
|
||||
button.task-action-btn.tile(ng-class='{active: task.repeat.t}', type='button', ng-click='task.challenge.id || (task.repeat.t = !task.repeat.t)') {{::moment.weekdaysMin(2)}}
|
||||
button.task-action-btn.tile(ng-class='{active: task.repeat.w}', type='button', ng-click='task.challenge.id || (task.repeat.w = !task.repeat.w)') {{::moment.weekdaysMin(3)}}
|
||||
button.task-action-btn.tile(ng-class='{active: task.repeat.th}', type='button', ng-click='task.challenge.id || (task.repeat.th = !task.repeat.th)') {{::moment.weekdaysMin(4)}}
|
||||
button.task-action-btn.tile(ng-class='{active: task.repeat.f}', type='button', ng-click='task.challenge.id || (task.repeat.f= !task.repeat.f)') {{::moment.weekdaysMin(5)}}
|
||||
button.task-action-btn.tile(ng-class='{active: task.repeat.s}', type='button', ng-click='task.challenge.id || (task.repeat.s = !task.repeat.s)') {{::moment.weekdaysMin(6)}}
|
||||
|
||||
// if Reward, pricing
|
||||
fieldset.option-group.option-short(ng-if='task.type=="reward" && !task.challenge.id')
|
||||
@@ -185,7 +185,7 @@ li(bindonce='list', bo-id='"task-"+task.id', ng-repeat='task in obj[list.type+"s
|
||||
// if Todos, the due date
|
||||
fieldset.option-group(ng-if='task.type=="todo" && !task.challenge.id')
|
||||
legend.option-title=env.t('dueDate')
|
||||
input.option-content.datepicker(type='text', datepicker-popup='MM/dd/yyyy', ng-model='task.date')
|
||||
input.option-content.datepicker(type='text', datepicker-popup='MM/dd/yyyy', ng-model='task.date', is-open='datepickerOpened', ng-click='datepickerOpened = true')
|
||||
|
||||
// Tags
|
||||
fieldset.option-group(ng-if='!$state.includes("options.social.challenges")')
|
||||
@@ -195,7 +195,7 @@ li(bindonce='list', bo-id='"task-"+task.id', ng-repeat='task in obj[list.type+"s
|
||||
markdown(ng-model='tag.name')
|
||||
|
||||
// Advanced Options
|
||||
span(bo-if='task.type!="reward"')
|
||||
span(ng-if='::task.type!="reward"')
|
||||
p.option-title.mega(ng-click='task._advanced = !task._advanced', tooltip=env.t('expandCollapse'))=env.t('advancedOptions')
|
||||
fieldset.option-group.advanced-option(ng-class="{visuallyhidden: task._advanced}")
|
||||
legend.option-title
|
||||
|
||||
Reference in New Issue
Block a user