mirror of
https://github.com/sudoxnym/habitica-self-host.git
synced 2026-08-01 03:30:25 +00:00
Adding a new functionality that allows the context (i.e. css classes)
of an element to be changed easily. Using this to implement the
'remaining todos' and 'complete todos' views. Reverting fix from
69e5778 that is now not needed anymore since task deletion works as
it used to.
This commit is contained in:
Tobias Leugger
parent
91e970a6dc
commit
c94563c8f3
3 changed files with 57 additions and 43 deletions
|
|
@ -11,6 +11,8 @@ module.exports.view = (view) ->
|
|||
# show as completed if completed (naturally) or not required for today
|
||||
if completed or (repeat and repeat[helpers.dayMapping[moment().day()]]==false)
|
||||
classes += " completed"
|
||||
else
|
||||
classes += " uncompleted"
|
||||
|
||||
switch
|
||||
when value<-8 then classes += ' color-worst'
|
||||
|
|
@ -65,15 +67,8 @@ module.exports.app = (appExports, model) ->
|
|||
|
||||
appExports.del = (e, el) ->
|
||||
# Derby extends model.at to support creation from DOM nodes
|
||||
#task = model.at(e.target)
|
||||
# FIXME normally that would work, and we'd later simply call `user.del task` (instead of that 4-liner down there)
|
||||
# however, see https://github.com/lefnire/habitrpg/pull/226#discussion_r2810391
|
||||
|
||||
id = $(e.target).parents('li.task').attr('data-id')
|
||||
return unless id?
|
||||
|
||||
task = user.at "tasks.#{id}"
|
||||
type = task.get('type')
|
||||
task = model.at(e.target)
|
||||
id = task.get('id')
|
||||
|
||||
history = task.get('history')
|
||||
if history and history.length>2
|
||||
|
|
@ -95,10 +90,8 @@ module.exports.app = (appExports, model) ->
|
|||
# fix when query subscriptions implemented properly
|
||||
$('[rel=tooltip]').tooltip('hide')
|
||||
|
||||
ids = user.get("#{type}Ids")
|
||||
ids.splice(ids.indexOf(id),1)
|
||||
user.del('tasks.'+id)
|
||||
user.set("#{type}Ids", ids)
|
||||
task.remove()
|
||||
|
||||
|
||||
appExports.clearCompleted = (e, el) ->
|
||||
|
|
@ -148,6 +141,29 @@ module.exports.app = (appExports, model) ->
|
|||
chart = new google.visualization.LineChart(document.getElementById( chartSelector ))
|
||||
chart.draw(data, options)
|
||||
|
||||
appExports.changeContext = (e, el) ->
|
||||
# Get the data from the element
|
||||
targetSelector = $(el).attr('data-target')
|
||||
newContext = $(el).attr('data-context')
|
||||
newActiveNav = $(el).parent('li')
|
||||
|
||||
# If the clicked nav is already active, do nothing
|
||||
if newActiveNav.hasClass('active')
|
||||
return
|
||||
|
||||
# Find the old active nav and context
|
||||
oldActiveNav = $(el).closest('ul').find('> .active')
|
||||
oldContext = oldActiveNav.find('a').attr('data-context')
|
||||
|
||||
# Set the new active nav
|
||||
oldActiveNav.removeClass('active')
|
||||
newActiveNav.addClass('active')
|
||||
|
||||
# Set the new context on the target
|
||||
target = $(targetSelector)
|
||||
target.removeClass(oldContext)
|
||||
target.addClass(newContext)
|
||||
|
||||
appExports.score = (e, el, next) ->
|
||||
direction = $(el).attr('data-direction')
|
||||
direction = 'up' if direction == 'true/'
|
||||
|
|
|
|||
|
|
@ -37,6 +37,19 @@ label.checkbox.inline{
|
|||
background-image: linear-gradient(to bottom, #eee, #aaa);
|
||||
background-repeat: repeat-x;
|
||||
|
||||
.context-enabled
|
||||
.display-context-dependant,
|
||||
.task-list li
|
||||
display: none
|
||||
|
||||
&.context-completed
|
||||
.show-for-completed, .completed
|
||||
display: block
|
||||
|
||||
&.context-uncompleted
|
||||
.show-for-uncompleted, .uncompleted
|
||||
display: block
|
||||
|
||||
.help-icon
|
||||
float:right;
|
||||
|
||||
|
|
|
|||
|
|
@ -279,37 +279,22 @@
|
|||
<app:newTask type=daily><input value={_newDaily} type="text" name=new-task placeholder="New Daily"/></app:newTask>
|
||||
</div>
|
||||
|
||||
<div class="span3 well todos">
|
||||
<div class="tabbable"> <!-- Only required for left/right tabs -->
|
||||
<div class="row-fluid">
|
||||
<h2 class="span6">Todos</h2>
|
||||
<ul class="span6 nav nav-pills">
|
||||
<li class="active"><a href="#" data-target="#tab1" data-toggle="tab">Remaining</a></li>
|
||||
<li><a href="#" data-target="#tab2" data-toggle="tab">Complete</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="tab1">
|
||||
<ul class='todos'>
|
||||
{#each _todoList as :task}
|
||||
{#if not(:task.completed)}
|
||||
<app:task />
|
||||
{/}
|
||||
{/}
|
||||
</ul>
|
||||
<app:newTask type=todo><input value={_newTodo} type="text" name=new-task placeholder="New Todo"/></app:newTask>
|
||||
</div>
|
||||
<div class="tab-pane" id="tab2">
|
||||
<ul class='completeds'>
|
||||
{#each _todoList as :task}
|
||||
{#if :task.completed}
|
||||
<app:task />
|
||||
{/}
|
||||
{/}
|
||||
</ul>
|
||||
<a x-bind=click:clearCompleted>Clear Completed</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span3 well todos context-enabled context-uncompleted" id="todo-well">
|
||||
<div class="row-fluid">
|
||||
<h2 class="span6">Todos</h2>
|
||||
<ul class="span6 nav nav-pills">
|
||||
<li class="active"><a x-bind=click:changeContext data-target="#todo-well" data-context="context-uncompleted">Remaining</a></li>
|
||||
<li><a x-bind=click:changeContext data-target="#todo-well" data-context="context-completed">Complete</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class='todos task-list'>
|
||||
{#each _todoList as :task}<app:task />{/}
|
||||
</ul>
|
||||
<div class="display-context-dependant show-for-uncompleted">
|
||||
<app:newTask type=todo><input value={_newTodo} type="text" name=new-task placeholder="New Todo"/></app:newTask>
|
||||
</div>
|
||||
<div class="display-context-dependant show-for-completed">
|
||||
<a x-bind=click:clearCompleted>Clear Completed</a>
|
||||
</div>
|
||||
{#if _user.history.todos}
|
||||
<a x-bind=click:toggleChart data-toggle-id="todos-chart" data-history-path="_user.history.todos" rel=tooltip title="Progress"><i class=icon-signal></i></a>
|
||||
|
|
|
|||
Loading…
Reference in a new issue