Refactor task views

2015-06-04 21:05:41 -05:00
parent b132b3c4fa
commit 701fa2455f
22 changed files with 487 additions and 462 deletions
@@ -0,0 +1,10 @@
+form.task-add(name='new{{list.type}}form', ng-hide='obj._locked', ng-submit='addTask(obj[list.type+"s"],list)')
+  textarea(rows='6', task-focus='list.bulk && list.focus', ng-model='list.newTask', placeholder='{{list.placeHolderBulk}}', ng-if='list.bulk', ui-keydown='{"meta-enter ctrl-enter":"addTask(obj[list.type+\'s\'],list)"}', required)
+  input(type='text', task-focus='!list.bulk && list.focus', ng-model='list.newTask', placeholder='{{list.placeHolder}}', ng-if='!list.bulk', required)
+  button(type='submit', ng-disabled='new{{list.type}}form.$invalid')
+   div.empty-task-notification( ng-show='new{{list.type}}form.$invalid', tooltip=env.t("emptyTask") )
+     span.glyphicon.glyphicon-plus
+   span.glyphicon.glyphicon-plus(ng-show='!new{{list.type}}form.$invalid')
+  small.help-block.btn-link.pull-right(ng-click='toggleBulk(list)')
+    span(ng-if='!list.bulk')=env.t('addmultiple')
+    span(ng-if='list.bulk')=env.t('addsingle')
@@ -0,0 +1,9 @@
+span.option-box.pull-right(ng-if='::main')
+  a.option-action(ng-if='list.type=="todo"', ng-show='obj.history.todos', ng-click='toggleChart("todos")', tooltip=env.t('progress'), style='margin-right:5px;')
+    span.glyphicon.glyphicon-signal
+  //a.option-action(ng-href='/v1/users/{{user.id}}/calendar.ics?apiToken={{user.apiToken}}', tooltip='iCal')
+  //-a.option-action(ng-if='list.type=="todo"', ng-click='notPorted()', tooltip='iCal', ng-show='false')
+    span.glyphicon.glyphicon-calendar
+  // <a href="https://www.google.com/calendar/render?cid={{encodeiCalLink(_user.id, _user.apiToken)}}" rel=tooltip title="Google Calendar"><i class=icon-calendar></i></a>
+  a.option-action(ng-click='list.help=!list.help', tooltip='Click for help')
+    span.glyphicon.glyphicon-question-sign(style={'zoom':1.5,'vertical-align':'-webkit-baseline-middle'})
@@ -0,0 +1,25 @@
+div(ng-if='list.help', ng-switch='::list.type')
+  ul(ng-switch-when='habit')
+    li!=env.t('habitHelp1', {plusIcon:"<span class='glyphicon glyphicon-plus'></span>"})
+    li!=env.t('habitHelp2', {minusIcon:"<span class='glyphicon glyphicon-minus'></span>"})
+    li!=env.t('habitHelp3')
+    li!=env.t('newbieGuild', {linkStart:"<a href='https://habitrpg.com/#/options/groups/guilds/5481ccf3-5d2d-48a9-a871-70a7380cee5a' target='_blank'>", linkEnd: "</a>"})
+  ul(ng-switch-when='daily')
+    li!=env.t('dailyHelp1', {emphasisStart:"<strong>", emphasisEnd:"</strong>", pencilIcon:"<span class='glyphicon glyphicon-pencil'></span>"})
+    li!=env.t('dailyHelp2')
+    li!=env.t('dailyHelp3', {emphasisStart:"<strong>", emphasisEnd:"</strong>"})
+    li!=env.t('dailyHelp4', {linkStart:"<a href='/#/options/settings/settings' target='_blank'>", linkEnd:"</a>"})
+    li!=env.t('dailyHelp5')
+    li!=env.t('newbieGuild', {linkStart:"<a href='https://habitrpg.com/#/options/groups/guilds/5481ccf3-5d2d-48a9-a871-70a7380cee5a' target='_blank'>", linkEnd: "</a>"})
+  ul(ng-switch-when='todo')
+    li!=env.t('toDoHelp1')
+    li!=env.t('toDoHelp2')
+    li!=env.t('toDoHelp3')
+    li!=env.t('toDoHelp4')
+    li!=env.t('newbieGuild', {linkStart:"<a href='https://habitrpg.com/#/options/groups/guilds/5481ccf3-5d2d-48a9-a871-70a7380cee5a' target='_blank'>", linkEnd: "</a>"})
+  ul(ng-switch-when='reward')
+    li!=env.t('rewardHelp1', {linkStart:"<a href='/#/options/inventory/equipment' target='_blank'>", linkEnd: "</a>"})
+    li!=env.t('rewardHelp2', {linkStart:"<a href='/#/options/profile/stats' target='_blank'>", linkEnd: "</a>"})
+    li!=env.t('rewardHelp3')
+    li!=env.t('rewardHelp4')
+    li!=env.t('newbieGuild', {linkStart:"<a href='https://habitrpg.com/#/options/groups/guilds/5481ccf3-5d2d-48a9-a871-70a7380cee5a' target='_blank'>", linkEnd: "</a>"})
@@ -0,0 +1,35 @@
+// left-hand side checkbox
+.task-controls.task-primary(ng-if='!task._editing')
+
+  // Habits
+  .task-actions(ng-if='::task.type=="habit"')
+    // score() is overridden in challengesCtrl to do nothing
+    a(ng-if='task.up', ng-click='applyingAction || score(task,"up")')
+      span.glyphicon.glyphicon-plus
+    a(ng-if='task.down', ng-click='applyingAction || score(task,"down")')
+      span.glyphicon.glyphicon-minus
+
+  // Rewards
+  span(ng-if='::task.type=="reward"')
+    a.money.btn-buy(ng-class='{highValue: task.value >= 1000}', ng-click='score(task, "down")')
+      span.shop_gold
+      span.reward-cost {{task.value}}
+
+  // Daily & Todos
+  span.task-checker.action-yesno(ng-if='::task.type=="daily" || task.type=="todo"')
+    input.visuallyhidden.focusable(id='box-{{::obj._id}}_{{::task.id}}', type='checkbox', 
+      ng-model='task.completed', ng-if='$state.includes("tasks")', 
+      ng-change='task.type=="todo" && pushTask(task,$index,"bottom"); changeCheck(task)')
+    input.visuallyhidden.focusable(id='box-{{::obj._id}}_{{::task.id}}', type='checkbox', 
+      ng-if='!$state.includes("tasks")')
+    label(for='box-{{::obj._id}}_{{::task.id}}')
+
+// main content
+.task-text(ng-dblclick='task._editing ? saveTask(task) : editTask(task)')
+  markdown(text='task.text',target='_blank')
+
+  div(ng-if='task.checklist && !$state.includes("options.social.challenges") && !task.collapseChecklist && !task._editing')
+    fieldset.option-group.task-checklist
+      label.checkbox(ng-repeat='item in task.checklist')
+        input(type='checkbox', ng-model='item.completed', ng-change='saveTask(task,true)')
+        markdown(text='item.text', target='_blank')
@@ -0,0 +1,60 @@
+mixin taskColumnTabs(position)
+  // Habits Tabs
+  div(ng-if='::main && list.type=="habit"', class='tabbable tabs-below')
+    ul.task-filter
+      li(ng-class='{active: list.view == "all"}')
+        a(ng-click='list.view = "all"')=env.t('all')
+      li(ng-class='{active: list.view == "yellowred"}')
+        a(ng-click='list.view = "yellowred"')=env.t('yellowred')
+      li(ng-class='{active: list.view == "greenblue"}')
+        a(ng-click='list.view = "greenblue"')=env.t('greenblue')
+  // Daily Tabs
+  div(ng-if='::main && list.type=="daily"', class='tabbable tabs-below')
+    // remaining/completed tabs
+    ul.task-filter
+      li(ng-class='{active: list.view == "all"}')
+        a(ng-click='list.view = "all"')=env.t('all')
+      li(ng-class='{active: list.view == "remaining"}')
+        a(ng-click='list.view = "remaining"')=env.t('due')
+      li(ng-class='{active: list.view == "complete"}')
+        a(ng-click='list.view = "complete"')=env.t('grey')
+  // Todo Tabs
+  div(ng-if='::main && list.type=="todo"', ng-class='::{"tabbable tabs-below": list.type=="todo"}')
+    if position=="bottom"
+      div(ng-show='list.view == "complete"')
+        .alert
+          =env.t('lotOfToDos')
+        button.task-action-btn.tile.spacious.bright(ng-click='user.ops.clearCompleted({})',popover=env.t('deleteToDosExplanation'),popover-trigger='mouseenter')=env.t('clearCompleted')
+        p!=env.t('beeminderDeleteWarning')
+    // remaining/completed tabs
+    ul.task-filter
+      li(ng-class='{active: list.view == "remaining"}')
+        a(ng-click='list.view = "remaining"')=env.t('remaining')
+      li(ng-class='{active: list.view == "dated"}')
+        a(ng-click='list.view = "dated"')=env.t('dated')
+      li(ng-class='{active: list.view == "complete"}')
+        a(ng-click='list.view = "complete"')=env.t('complete')
+  // Rewards Tabs
+  div(ng-if='::main && list.type=="reward"', class='tabbable tabs-below')
+    ul.task-filter
+      li(ng-class='{active: list.view == "all"}')
+        a(ng-click='list.view = "all"')=env.t('all')
+      li(ng-class='{active: list.view == "ingamerewards"}')
+        a(ng-click='list.view = "ingamerewards"')=env.t('ingamerewards')
+
+mixin specialSpell(k,canceler)
+  li.task.reward-item(ng-if='#{canceler ? "user.stats.buffs."+canceler : "user.items.special."+k+">0"}',popover-trigger='mouseenter', popover-placement='top', popover='{{Content.spells.special.#{k}.notes()}}')
+    .task-meta-controls
+      span.task-notes
+        span.glyphicon.glyphicon-comment
+    //left-hand size commands
+    .task-controls.task-primary
+      a.money.btn-buy.item-btn(ng-click='castStart(Content.spells.special.#{k})', ng-class='{active: Content.spells.special.#{k}.key == spell.key}')
+        if canceler
+          span.shop_gold
+          span.reward-cost {{Content.spells.special.#{k}.value}}
+        else
+          span.shop_spell(class='shop_#{k}')
+          span.reward-cost {{user.items.special.#{k}}}
+    // main content
+    p.task-text {{Content.spells.special.#{k}.text()}}
@@ -0,0 +1,25 @@
+// Events
+ul.items.rewards(ng-if='main && list.type=="reward" && (user.items.special.snowball>0 || user.stats.buffs.snowball || user.items.special.spookDust>0 || user.stats.buffs.spookDust || user.items.special.shinySeed>0 || user.stats.buffs.shinySeed)')
+
+  +specialSpell('snowball')
+  +specialSpell('spookDust')
+  +specialSpell('shinySeed')
+  +specialSpell('salt','snowball')
+  +specialSpell('opaquePotion','spookDust')
+  +specialSpell('petalFreePotion','shinySeed')
+
+// Spells
+ul.items(ng-if='main && list.type=="reward" && user.stats.class && !user.preferences.disableClasses')
+  li.task.reward-item(ng-repeat='(k,skill) in Content.spells[user.stats.class]', ng-if='user.stats.lvl >= skill.lvl',popover-trigger='mouseenter', popover-placement='top', popover='{{skill.notes()}}')
+    .task-meta-controls
+      span.task-notes
+        span.glyphicon.glyphicon-comment
+    //left-hand size commands
+    .task-controls.task-primary
+      a.money.btn-buy.item-btn(ng-click='castStart(skill)', ng-class='{active: skill.key == spell.key}')
+        span.reward-cost
+          strong {{skill.mana}}
+          =env.t('mp')
+    // main content
+    span(ng-class='{"shop_{{skill.key}} shop-sprite item-img": true}')
+    p.task-text {{skill.text()}}
@@ -0,0 +1,14 @@
+ul.items.rewards(ng-if='main && list.type=="reward"')
+  li.task.reward-item(ng-repeat='item in itemStore',popover-trigger='mouseenter', popover-placement='top', popover='{{item.notes()}}')
+    // right-hand side control buttons
+    .task-meta-controls
+      span.task-notes
+        span.glyphicon.glyphicon-comment
+    //left-hand size commands
+    .task-controls.task-primary
+      a.money.btn-buy.item-btn(ng-class='{highValue: item.value >= 1000}', ng-click='buy(item)')
+        span.shop_gold
+        span.reward-cost {{item.value}}
+    // main content
+    span(ng-class='::{"shop_{{item.key}} shop-sprite item-img": true}').reward-img
+    p.task-text {{item.text()}}