mirror of
https://github.com/sudoxnym/habitica-self-host.git
synced 2026-07-31 19:20:25 +00:00
gut & re-style Task Options, only Rewards tasks & options left to go through
This commit is contained in:
Zachary Kain
parent
84e07a0317
commit
456580e352
5 changed files with 226 additions and 108 deletions
|
|
@ -174,7 +174,7 @@ module.exports.app = (appExports, model) ->
|
|||
scoring.score(model, task.get('id'), direction)
|
||||
|
||||
appExports.tasksToggleAdvanced = (e, el) ->
|
||||
$(el).next('.advanced').toggle()
|
||||
$(el).next('.advanced-option').toggleClass('visuallyhidden')
|
||||
|
||||
appExports.tasksSaveAndClose = ->
|
||||
# When they update their notes, re-establish tooltip & popover
|
||||
|
|
|
|||
|
|
@ -10,15 +10,27 @@
|
|||
@import "./helpers.styl";
|
||||
@import "./responsive.styl";
|
||||
|
||||
// where's the actual bootstrap include?
|
||||
// @import "../bootstrap-responsive.styl";
|
||||
|
||||
@import "../../public/vendor/bootstrap-datepicker/css/datepicker.css";
|
||||
|
||||
// fix exploding to very wide for some reason
|
||||
.datepicker
|
||||
width: 210px
|
||||
|
||||
html,body,p,h1,ul,li,table,tr,th,td
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
*
|
||||
-webkit-box-sizing: border-box
|
||||
-moz-box-sizing: border-box
|
||||
box-sizing: border-box
|
||||
|
||||
hr
|
||||
border-top: 0
|
||||
border-bottom: 1px solid #ddd
|
||||
border-color: rgba(0,0,0,0.1)
|
||||
|
||||
|
||||
/* Header
|
||||
-------------------------------------------------- */
|
||||
|
||||
|
|
|
|||
|
|
@ -18,10 +18,11 @@ $stages = (worst $worst) (worse $worse) (bad $bad) (neutral $neutral) (good $goo
|
|||
for $stage in $stages
|
||||
.color-{$stage[0]}
|
||||
background-color: $stage[1]
|
||||
.task-checker label,
|
||||
.action-plus,
|
||||
.action-minus
|
||||
.action-yesno label,
|
||||
.task-action-btn
|
||||
background-color: darken($stage[1], 30%)
|
||||
&:hover, &:focus
|
||||
background-color: darken($stage[1], 40%)
|
||||
|
||||
// completed has to be outside the loop to override the color class
|
||||
.completed
|
||||
|
|
@ -29,6 +30,8 @@ for $stage in $stages
|
|||
color: #999
|
||||
.task-checker label
|
||||
background-color: darken($completed, 30%)
|
||||
.task-action-btn
|
||||
background-color: darken($completed, 30%)
|
||||
|
||||
.reward
|
||||
background-color: white
|
||||
|
|
@ -50,9 +53,6 @@ for $stage in $stages
|
|||
margin: 0 0 0.5em
|
||||
padding: 0
|
||||
|
||||
hr
|
||||
border: 0
|
||||
border-bottom: 1px solid #ddd
|
||||
|
||||
// add new task form
|
||||
// -----------------
|
||||
|
|
@ -65,7 +65,7 @@ for $stage in $stages
|
|||
.addtask-field
|
||||
display: inline-block
|
||||
width: 80% // fallback for Safari 5.1
|
||||
width: calc(unquote('100% - 3em'))
|
||||
width: calc(unquote('100% - 2.5em'))
|
||||
input
|
||||
font-family: 'Lato', sans-serif
|
||||
border: 0
|
||||
|
|
@ -109,7 +109,7 @@ for $stage in $stages
|
|||
padding: 0 0.5em 0 0.5em
|
||||
min-height: 2.5em
|
||||
line-height: 2.5
|
||||
margin-bottom: 0.75em
|
||||
margin-bottom: 1em
|
||||
outline: 1px solid rgba(0,0,0,0.1)
|
||||
outline-offset: -1px
|
||||
&:hover
|
||||
|
|
@ -129,61 +129,88 @@ for $stage in $stages
|
|||
margin-left: -0.5em
|
||||
margin-right: 0.5em
|
||||
|
||||
// plus/minus commands
|
||||
.task-action-btn
|
||||
display: inline-block
|
||||
// plus/minus commands
|
||||
.task-action-btn
|
||||
display: inline-block
|
||||
width: 1.773em
|
||||
height: 1.773em
|
||||
padding: 0
|
||||
font-size: 1.41em
|
||||
line-height: 1.773
|
||||
text-align: center
|
||||
color: #222
|
||||
vertical-align: top
|
||||
border-right: 1px solid rgba(0,0,0,0.25)
|
||||
&:last-child
|
||||
border: 0
|
||||
&:hover, &:focus
|
||||
color: #222
|
||||
text-decoration: none
|
||||
|
||||
// checkbox
|
||||
.task-checker input[type=checkbox]
|
||||
margin: 0
|
||||
padding: 0
|
||||
visibility: hidden
|
||||
|
||||
.task-checker label
|
||||
display: inline-block
|
||||
width: 2.5em
|
||||
height: 2.5em
|
||||
margin: 0
|
||||
vertical-align: top
|
||||
cursor: pointer
|
||||
|
||||
// plus/minus checkbox
|
||||
.action-plusminus
|
||||
label
|
||||
margin-right: 1.5em
|
||||
label:after
|
||||
font-size: 1.41em
|
||||
width: 1.773em
|
||||
height: 1.773em
|
||||
padding: 0
|
||||
font-size: 1.41em
|
||||
line-height: 1.773
|
||||
text-align: center
|
||||
color: black
|
||||
vertical-align: top
|
||||
border-right: 1px solid rgba(0,0,0,0.25)
|
||||
&:last-child
|
||||
border: 0
|
||||
&:hover, &:focus
|
||||
text-decoration: none
|
||||
|
||||
// checkbox
|
||||
.task-checker input[type=checkbox]
|
||||
margin: 0
|
||||
padding: 0
|
||||
visibility: hidden
|
||||
|
||||
.task-checker label
|
||||
display: inline-block
|
||||
width: 2.5em
|
||||
height: 2.5em
|
||||
margin: 0
|
||||
vertical-align: top
|
||||
cursor: pointer
|
||||
vertical-align top
|
||||
opacity: 0.3
|
||||
background-color: #ddd
|
||||
outline: 1px solid rgba(0,0,0,0.5)
|
||||
color: #222
|
||||
label[for$="plus"]:after
|
||||
content: '＋'
|
||||
label[for$="minus"]:after
|
||||
content: '−'
|
||||
|
||||
// uncompleted icon
|
||||
&:after
|
||||
content: '○'
|
||||
display: block
|
||||
font-size: 3em
|
||||
line-height: 0.76
|
||||
text-align: center
|
||||
color: black
|
||||
opacity: 0.2
|
||||
&.select-toggle input[type=checkbox]:checked + label:after
|
||||
opacity: 1
|
||||
|
||||
// hint at completed icon
|
||||
&:hover:after,
|
||||
&:focus:after
|
||||
content: '¬'
|
||||
font-size: 3em
|
||||
line-height: 1.1
|
||||
text-align: left
|
||||
transform: rotate(135deg)
|
||||
opacity: 0.5 !important
|
||||
&:active:after
|
||||
opacity: 0.75 !important
|
||||
// yes/no checkbox
|
||||
.action-yesno
|
||||
// uncompleted icon
|
||||
label:after
|
||||
content: '○'
|
||||
display: block
|
||||
font-size: 3em
|
||||
line-height: 0.76
|
||||
text-align: center
|
||||
color: black
|
||||
opacity: 0.2
|
||||
|
||||
// hint at completed icon
|
||||
label:hover:after,
|
||||
label:focus:after
|
||||
content: '¬'
|
||||
font-size: 3em
|
||||
line-height: 1.1
|
||||
text-align: left
|
||||
transform: rotate(135deg)
|
||||
opacity: 0.5 !important
|
||||
label:active:after
|
||||
opacity: 0.75 !important
|
||||
|
||||
// completed icon
|
||||
.task-checker input[type=checkbox]:checked + label:after
|
||||
input[type=checkbox]:checked + label:after
|
||||
content: '¬'
|
||||
transform: rotate(135deg)
|
||||
line-height: 1.1
|
||||
|
|
@ -206,6 +233,78 @@ for $stage in $stages
|
|||
opacity: 1
|
||||
|
||||
|
||||
// task editing
|
||||
// ------------
|
||||
.task-options
|
||||
padding: 0 0.5em
|
||||
margin-top: 1.25em
|
||||
color: #333
|
||||
|
||||
.option-group
|
||||
border-bottom: 1px solid rgba(0,0,0,0.1)
|
||||
padding: 0 0 1em
|
||||
margin-bottom: 1em
|
||||
|
||||
.option-title
|
||||
font-size: 1em
|
||||
margin: 0 0 0.5em
|
||||
line-height: 1.5
|
||||
border: 0
|
||||
padding: 0
|
||||
color: #333
|
||||
font-style: italic
|
||||
&:not(.mega):after
|
||||
content: ':'
|
||||
&.mega
|
||||
cursor: pointer
|
||||
font-style: normal
|
||||
font-weight: bold
|
||||
text-decoration: underline
|
||||
|
||||
|
||||
.option-content
|
||||
height: 2.5em
|
||||
width: 100%
|
||||
margin: 0 0 1em
|
||||
padding: 0 0 0 0.5em
|
||||
outline: 0
|
||||
border: 1px solid rgba(0,0,0,0.2)
|
||||
box-shadow: none
|
||||
border-radius: 0
|
||||
font-family: 'Lato', sans-serif //bootstrap override
|
||||
|
||||
textarea.option-content
|
||||
height: 5em
|
||||
padding-top: 0.25em
|
||||
resize: none
|
||||
margin-bottom: 0
|
||||
|
||||
// button-group
|
||||
.task-controls.tile-group
|
||||
display: block
|
||||
text-align: center
|
||||
margin: 0
|
||||
|
||||
.task-action-btn.tile
|
||||
border: 0
|
||||
font-size: 1.15em
|
||||
font-weight: 300
|
||||
outline: 1px solid rgba(0,0,0,0.2)
|
||||
outline-offset: -1px
|
||||
margin: 0 0 0 3px
|
||||
font-family: 'Lato', sans-serif
|
||||
text-align: inherit
|
||||
opacity: 0.5
|
||||
width: auto
|
||||
padding: 0 0.5em
|
||||
&.active
|
||||
opacity: 1
|
||||
&.spacious
|
||||
margin: 0.75em 0
|
||||
font-size: 1.5em
|
||||
opacity: 1
|
||||
|
||||
|
||||
// .context-enabled
|
||||
// .display-context-dependant,
|
||||
// .task-list li
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<!-- webfonts -->
|
||||
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic' rel='stylesheet' type='text/css'>
|
||||
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,700italic' rel='stylesheet' type='text/css'>
|
||||
|
||||
<Header:>
|
||||
<app:modals:modals />
|
||||
|
|
|
|||
|
|
@ -142,6 +142,7 @@
|
|||
<!-- all the parts of a single task -->
|
||||
<task:>
|
||||
<li data-id={{:task.id}} class="task {taskClasses(:task.type, :task.completed, :task.value, :task.repeat)}">
|
||||
|
||||
<!-- right-hand side control buttons -->
|
||||
<div class="task-meta-controls">
|
||||
<!-- edit -->
|
||||
|
|
@ -163,14 +164,14 @@
|
|||
<div class="task-controls">
|
||||
<!-- Habits -->
|
||||
{#if equal(:task.type, 'habit')}
|
||||
{#if :task.up}<a class="task-action-btn action-plus" data-direction=up x-bind=click:score>＋</a>{/}
|
||||
{#if :task.down}<a class="task-action-btn action-minus" data-direction=down x-bind=click:score>−</a>{/}
|
||||
{#if :task.up}<a class="task-action-btn btn-plus" data-direction=up x-bind=click:score>＋</a>{/}
|
||||
{#if :task.down}<a class="task-action-btn btn-minus" data-direction=down x-bind=click:score>−</a>{/}
|
||||
<!-- Rewards -->
|
||||
{else if equal(:task.type, 'reward')}
|
||||
<a class="task-action-btn action-buy" x-bind=click:score class="buy-link" data-direction=down>{:task.value}<img src="/img/coin_single_gold.png"/></a>
|
||||
<!-- Daily & Todos -->
|
||||
{else}
|
||||
<span class="task-checker">
|
||||
<span class="task-checker action-yesno">
|
||||
<input type=checkbox id="box-{{:task.id}}" class="visuallyhidden focusable" checked="{:task.completed}">
|
||||
<label for="box-{{:task.id}}"></label>
|
||||
</span>
|
||||
|
|
@ -187,67 +188,73 @@
|
|||
<!-- task edit/options -->
|
||||
<taskMeta:>
|
||||
<div id="{{:task.id}}-edit" class="task-options visuallyhidden">
|
||||
<hr>
|
||||
<form x-bind=submit:toggleTaskEdit data-toggle-id="{{:task.id}}-edit">
|
||||
<div class=control-group>
|
||||
<label>Text</label><input type=text value={:task.text} />
|
||||
<label>Notes</label><textarea rows=3>{:task.notes}</textarea>
|
||||
</div>
|
||||
<!-- text & notes -->
|
||||
<fieldset class="option-group">
|
||||
<label class="option-title">Text</label><input class="option-content" type=text value={:task.text}>
|
||||
<label class="option-title">Extra Notes</label><textarea class="option-content" rows=3>{:task.notes}</textarea>
|
||||
</fieldset>
|
||||
|
||||
<!-- if Habit, plus/minus command options -->
|
||||
{#if equal(:task.type, 'habit')}
|
||||
<hr/>
|
||||
<label>Direction</label>
|
||||
<div class="control-group">
|
||||
<label class="checkbox inline"><input type=checkbox checked={:task.up}>Up</label>
|
||||
<label class="checkbox inline"><input type=checkbox checked={:task.down}>Down</label>
|
||||
</div>
|
||||
<fieldset class="option-group">
|
||||
<legend class="option-title">Direction/Actions</legend>
|
||||
<span class="task-checker action-plusminus select-toggle">
|
||||
<input class="visuallyhidden focusable" type=checkbox id="{{:task.id}}-option-plus" checked={:task.up}>
|
||||
<label for="{{:task.id}}-option-plus"></label>
|
||||
</span>
|
||||
<span class="task-checker action-plusminus select-toggle">
|
||||
<input class="visuallyhidden focusable" type=checkbox id="{{:task.id}}-option-minus" checked={:task.down}>
|
||||
<label for="{{:task.id}}-option-minus"></label>
|
||||
</span>
|
||||
</fieldset>
|
||||
|
||||
<!-- if Daily, calendar -->
|
||||
{else if equal(:task.type, 'daily')}
|
||||
<hr/>
|
||||
<label>Repeat</label>
|
||||
<div class="control-group btn-group repeat-days">
|
||||
<!-- note, does not use data-toggle="buttons-checkbox" - it would interfere with our own click binding -->
|
||||
<button type="button" class="btn btn-info {#if :task.repeat.su}active{/}" data-day='su' x-bind=click:toggleDay>Su</button>
|
||||
<button type="button" class="btn btn-info {#if :task.repeat.m}active{/}" data-day='m' x-bind=click:toggleDay>M</button>
|
||||
<button type="button" class="btn btn-info {#if :task.repeat.t}active{/}" data-day='t' x-bind=click:toggleDay>T</button>
|
||||
<button type="button" class="btn btn-info {#if :task.repeat.w}active{/}" data-day='w' x-bind=click:toggleDay>W</button>
|
||||
<button type="button" class="btn btn-info {#if :task.repeat.th}active{/}" data-day='th' x-bind=click:toggleDay>Th</button>
|
||||
<button type="button" class="btn btn-info {#if :task.repeat.f}active{/}" data-day='f' x-bind=click:toggleDay>F</button>
|
||||
<button type="button" class="btn btn-info {#if :task.repeat.s}active{/}" data-day='s' x-bind=click:toggleDay>S</button>
|
||||
</div>
|
||||
<fieldset class="option-group">
|
||||
<legend class="option-title">Repeat</legend>
|
||||
<div class="task-controls tile-group repeat-days">
|
||||
<!-- note, does not use data-toggle="buttons-checkbox" - it would interfere with our own click binding -->
|
||||
<button type="button" class="task-action-btn tile {#if :task.repeat.su}active{/}" data-day='su' x-bind=click:toggleDay>Su</button>
|
||||
<button type="button" class="task-action-btn tile {#if :task.repeat.m}active{/}" data-day='m' x-bind=click:toggleDay>M</button>
|
||||
<button type="button" class="task-action-btn tile {#if :task.repeat.t}active{/}" data-day='t' x-bind=click:toggleDay>T</button>
|
||||
<button type="button" class="task-action-btn tile {#if :task.repeat.w}active{/}" data-day='w' x-bind=click:toggleDay>W</button>
|
||||
<button type="button" class="task-action-btn tile {#if :task.repeat.th}active{/}" data-day='th' x-bind=click:toggleDay>Th</button>
|
||||
<button type="button" class="task-action-btn tile {#if :task.repeat.f}active{/}" data-day='f' x-bind=click:toggleDay>F</button>
|
||||
<button type="button" class="task-action-btn tile {#if :task.repeat.s}active{/}" data-day='s' x-bind=click:toggleDay>S</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- if Reward, pricing -->
|
||||
{else if equal(:task.type, 'reward')}
|
||||
<hr/>
|
||||
<div class=control-group>
|
||||
<label>Price</label>
|
||||
<div class="input-append">
|
||||
<input class="span5" size="16" type="number" min="0" value={:task.value}><span class="add-on">Gold</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- if Todo, the due date -->
|
||||
{else if equal(:task.type, 'todo')}
|
||||
<hr/>
|
||||
<div class=control-group>
|
||||
<label>Due Date</label>
|
||||
<input type="text" value="{:task.date}" data-date-format="mm/dd/yyyy" class="datepicker" />
|
||||
<div><small>Enter as date, eg 02/19/2013 or 02-19-2013</small></div>
|
||||
</div>
|
||||
<fieldset class="option-group">
|
||||
<legend class="option-title">Due Date</legend>
|
||||
<input class="option-content datepicker" type="text" value="{:task.date}" data-date-format="mm/dd/yyyy">
|
||||
</fieldset>
|
||||
{/}
|
||||
|
||||
<hr/>
|
||||
|
||||
<!-- Advanced Options -->
|
||||
{#unless equal(:task.type, 'reward')}
|
||||
<div>
|
||||
<a x-bind="click:tasksToggleAdvanced">Advanced</a>
|
||||
<div class='advanced hide'>
|
||||
|
||||
<label>Difficulty <a class='priority-multiplier-help' href="https://trello.com/card/priority-multiplier/50e5d3684fe3a7266b0036d6/17" target="_blank"><i class='icon-question-sign'></i></a></label>
|
||||
<div class="control-group btn-group priority-multiplier" data-id="{{:task.id}}">
|
||||
<button type="button" class="btn btn-info {#if equal(:task.priority,'!')}active{/}{#unless :task.priority}active{/}" data-priority='!' x-bind=click:tasksSetPriority>Easy</button>
|
||||
<button type="button" class="btn btn-info {#if equal(:task.priority,'!!')}active{/}" data-priority='!!' x-bind=click:tasksSetPriority>Medium</button>
|
||||
<button type="button" class="btn btn-info {#if equal(:task.priority,'!!!')}active{/}" data-priority='!!!' x-bind=click:tasksSetPriority>Hard</button>
|
||||
</div>
|
||||
<p x-bind="click:tasksToggleAdvanced" class="option-title mega">Advanced Options</p>
|
||||
<fieldset class="option-group advanced-option visuallyhidden">
|
||||
<legend class="option-title"><a class='priority-multiplier-help' href="https://trello.com/card/priority-multiplier/50e5d3684fe3a7266b0036d6/17" target="_blank"><i class='icon-question-sign'></i></a> Difficulty</legend>
|
||||
<div class="task-controls tile-group priority-multiplier" data-id="{{:task.id}}">
|
||||
<button type="button" class="task-action-btn tile {#if equal(:task.priority,'!')}active{/}{#unless :task.priority}active{/}" data-priority='!' x-bind=click:tasksSetPriority>Easy</button>
|
||||
<button type="button" class="task-action-btn tile {#if equal(:task.priority,'!!')}active{/}" data-priority='!!' x-bind=click:tasksSetPriority>Medium</button>
|
||||
<button type="button" class="task-action-btn tile {#if equal(:task.priority,'!!!')}active{/}" data-priority='!!!' x-bind=click:tasksSetPriority>Hard</button>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
</fieldset>
|
||||
{/}
|
||||
<button type=submit class="btn" x-bind="click:tasksSaveAndClose">Save & Close</button>
|
||||
<button type=submit class="task-action-btn tile spacious" x-bind="click:tasksSaveAndClose">Save & Close</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue