mirror of
https://github.com/sudoxnym/habitica-self-host.git
synced 2026-08-01 03:30:25 +00:00
WIP: new 'Task Actions' UI (buttons, checkboxes, etc)
This commit is contained in:
Zachary Kain
parent
9d312ce184
commit
efe1c9267e
5 changed files with 225 additions and 40 deletions
32
styles/app/helpers.styl
Normal file
32
styles/app/helpers.styl
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
// Hide from both screenreaders and browsers: h5bp.com/u
|
||||
.hidden
|
||||
display: none !important
|
||||
visibility: hidden
|
||||
|
||||
|
||||
// Hide only visually, but have it available for screenreaders: h5bp.com/v
|
||||
.visuallyhidden
|
||||
border: 0
|
||||
clip: rect(0 0 0 0)
|
||||
height: 1px
|
||||
margin: -1px
|
||||
overflow: hidden
|
||||
padding: 0
|
||||
position: absolute
|
||||
width: 1px
|
||||
|
||||
|
||||
// Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p
|
||||
.visuallyhidden.focusable:active,
|
||||
.visuallyhidden.focusable:focus
|
||||
clip: auto
|
||||
height: auto
|
||||
margin: 0
|
||||
overflow: visible
|
||||
position: static
|
||||
width: auto
|
||||
|
||||
|
||||
// Hide visually and from screenreaders, but maintain layout
|
||||
.invisible
|
||||
visibility: hidden
|
||||
|
|
@ -7,6 +7,7 @@
|
|||
@import "./customizer.styl";
|
||||
@import "./items.styl";
|
||||
@import "./alerts.styl";
|
||||
@import "./helpers.styl";
|
||||
|
||||
@import "../../public/vendor/bootstrap-datepicker/css/datepicker.css";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,19 +1,73 @@
|
|||
// color variables
|
||||
$color-worst = rgb(230, 184, 175)
|
||||
$color-worse = rgb(244, 204, 204)
|
||||
$color-bad = rgb(252, 229, 205)
|
||||
$color-neutral = rgb(255, 242, 204)
|
||||
$color-good = rgb(217, 234, 211)
|
||||
$color-better = rgb(208, 224, 227)
|
||||
$color-best = rgb(201, 218, 248)
|
||||
$color-completed = rgb(217, 217, 217)
|
||||
|
||||
.color-worst
|
||||
background-color: rgb(230, 184, 175)
|
||||
background-color: $color-worst
|
||||
.task-checker label
|
||||
background-color: darken($color-worst, 30%)
|
||||
.action-plus
|
||||
background-color: darken($color-worst, 30%)
|
||||
.action-minus
|
||||
background-color: darken($color-worst, 30%)
|
||||
.color-worse
|
||||
background-color: rgb(244, 204, 204)
|
||||
background-color: $color-worse
|
||||
.task-checker label
|
||||
background-color: darken($color-worse, 30%)
|
||||
.action-plus
|
||||
background-color: darken($color-worse, 30%)
|
||||
.action-minus
|
||||
background-color: darken($color-worse, 30%)
|
||||
.color-bad
|
||||
background-color: rgb(252, 229, 205)
|
||||
background-color: $color-bad
|
||||
.task-checker label
|
||||
background-color: darken($color-bad, 30%)
|
||||
.action-plus
|
||||
background-color: darken($color-bad, 30%)
|
||||
.action-minus
|
||||
background-color: darken($color-bad, 30%)
|
||||
.color-neutral
|
||||
background-color: rgb(255, 242, 204)
|
||||
background-color: $color-neutral
|
||||
.task-checker label
|
||||
background-color: darken($color-neutral, 30%)
|
||||
.action-plus
|
||||
background-color: darken($color-neutral, 30%)
|
||||
.action-minus
|
||||
background-color: darken($color-neutral, 30%)
|
||||
.color-good
|
||||
background-color: rgb(217, 234, 211)
|
||||
background-color: $color-good
|
||||
.task-checker label
|
||||
background-color: darken($color-good, 30%)
|
||||
.action-plus
|
||||
background-color: darken($color-good, 30%)
|
||||
.action-minus
|
||||
background-color: darken($color-good, 30%)
|
||||
.color-better
|
||||
background-color: rgb(208, 224, 227)
|
||||
background-color: $color-better
|
||||
.task-checker label
|
||||
background-color: darken($color-better, 30%)
|
||||
.action-plus
|
||||
background-color: darken($color-better, 30%)
|
||||
.action-minus
|
||||
background-color: darken($color-better, 30%)
|
||||
.color-best
|
||||
background-color: rgb(201, 218, 248)
|
||||
background-color: $color-best
|
||||
.task-checker label
|
||||
background-color: darken($color-best, 30%)
|
||||
.action-plus
|
||||
background-color: darken($color-best, 30%)
|
||||
.action-minus
|
||||
background-color: darken($color-best, 30%)
|
||||
.completed
|
||||
background-color: rgb(217, 217, 217)
|
||||
background-color: $color-completed
|
||||
.task-checker label
|
||||
background-color: darken($color-completed, 30%)
|
||||
color: rgb(153, 153, 153)
|
||||
.reward
|
||||
background-color: white
|
||||
|
|
@ -60,26 +114,18 @@ li:hover .task-meta-controls .hover-show
|
|||
display: inline
|
||||
|
||||
.task
|
||||
list-style:none
|
||||
|
||||
pre
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
|
||||
font-size: 13px
|
||||
line-height: 18px
|
||||
color: black
|
||||
word-break: normal
|
||||
|
||||
.task-meta-controls
|
||||
float:right
|
||||
i
|
||||
margin-left:5px
|
||||
|
||||
.task-controls,.task-text
|
||||
display:inline
|
||||
margin: 0 10px 0 0
|
||||
// .task-controls,.task-text
|
||||
// // display:inline
|
||||
// // margin: 0 10px 0 0
|
||||
|
||||
input
|
||||
margin-top: 0
|
||||
// input
|
||||
// margin-top: 0
|
||||
|
||||
.task-meta-controls .hover-show
|
||||
display: none;
|
||||
|
|
@ -102,23 +148,127 @@ li:hover .task-meta-controls .hover-show
|
|||
h2
|
||||
margin: 0 0 0.5em
|
||||
padding: 0
|
||||
|
||||
.nav-tabs
|
||||
margin-top: 0.75em
|
||||
|
||||
.option-box
|
||||
.option-action
|
||||
margin-left: 0.25em
|
||||
|
||||
|
||||
.rewards
|
||||
margin-bottom: 0.75em
|
||||
|
||||
.task
|
||||
list-style: none
|
||||
clear: both
|
||||
padding: 0.5em
|
||||
padding: 0 0.5em 0 0
|
||||
min-height: 2.5em
|
||||
line-height: 2.5
|
||||
margin-bottom: 0.75em
|
||||
border: 1px solid rgba(0, 0, 0, 0.2)
|
||||
// border: 1px solid rgba(0,0,0,0.2)
|
||||
// -webkit-background-clip: padding-box
|
||||
border-radius: 0.25em
|
||||
overflow: hidden
|
||||
&:last-child
|
||||
margin-bottom: 0
|
||||
|
||||
.task-controls
|
||||
display: inline
|
||||
.task-text
|
||||
display: inline-block
|
||||
text-indent: 0.5em
|
||||
|
||||
.task-checker
|
||||
label
|
||||
display: inline-block
|
||||
width: 2.5em
|
||||
height: 2.5em
|
||||
padding: 0
|
||||
margin: 0
|
||||
vertical-align: top
|
||||
cursor: pointer
|
||||
// border-radius: 0.25em 0 0 0.25em
|
||||
&:after
|
||||
content: '¬'
|
||||
transform: rotate(135deg)
|
||||
display: block
|
||||
line-height: 1.1
|
||||
text-align: left
|
||||
opacity: 0.1
|
||||
color: black
|
||||
font-size: 3em
|
||||
&:hover:after,
|
||||
&:focus:after
|
||||
opacity: 0.5 !important
|
||||
&:active:after
|
||||
opacity: 0.75 !important
|
||||
|
||||
& input[type=checkbox]:checked + label:after
|
||||
opacity: 1
|
||||
|
||||
input[type=checkbox]
|
||||
margin: 0
|
||||
padding: 0
|
||||
visibility: hidden
|
||||
|
||||
.addtask-form
|
||||
margin-bottom: 0.75em
|
||||
border-radius: 0.25em
|
||||
overflow: hidden
|
||||
.addtask-field
|
||||
max-width: 70%
|
||||
display: inline-block
|
||||
width: 80% // fallback for Safari 5.1
|
||||
// width: calc(unquote('100% - 3em'))
|
||||
input
|
||||
font-family: 'Lato', sans-serif
|
||||
outline: 0
|
||||
border: 0
|
||||
box-shadow: none
|
||||
background-color: white
|
||||
border-radius 0 0.25em 0.25em 0
|
||||
height: 2.5em
|
||||
padding: 0 0 0 0.5em
|
||||
width: 100%
|
||||
&:focus
|
||||
box-shadow: inset 0 0 3px darken($color-best, 20%)
|
||||
.addtask-btn
|
||||
float: right
|
||||
font-family: 'Lato', sans-serif
|
||||
display: inline-block
|
||||
width: 1.51515em
|
||||
height: 1.51515em
|
||||
padding: 0
|
||||
font-size: 1.65em
|
||||
line-height: 1.55
|
||||
outline: 0
|
||||
border: 0
|
||||
background-color: darken($color-best, 20%)
|
||||
opacity: 0.5
|
||||
&:hover,
|
||||
&:focus
|
||||
opacity: 0.75
|
||||
background-color: darken($color-best, 20%)
|
||||
&:active
|
||||
background-color: darken($color-best, 30%)
|
||||
opacity: 1
|
||||
|
||||
.todo-status-toggler
|
||||
margin-top: 0.75em
|
||||
.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: black
|
||||
vertical-align: top
|
||||
border-right: 1px solid rgba(0,0,0,0.25)
|
||||
&:last-child
|
||||
border: 0
|
||||
&:hover,
|
||||
&:focus
|
||||
text-decoration: none
|
||||
// &.action-plus
|
||||
// background-color: darken($color-good, 20%)
|
||||
// &.action-minus
|
||||
// background-color: darken($color-worst, 20%)
|
||||
|
|
@ -38,7 +38,6 @@
|
|||
<item:>
|
||||
{#unless :item.hide}
|
||||
<li class="task reward item">
|
||||
<pre>
|
||||
<div class="task-meta-controls">
|
||||
<span rel="popover" data-trigger="hover" data-placement="left" data-content="{:item.notes}" data-original-title="{:item.text}" class='task-notes'><i class="icon-comment"></i></span>
|
||||
</div>
|
||||
|
|
@ -60,6 +59,5 @@
|
|||
{/}
|
||||
|
||||
</div>
|
||||
</pre>
|
||||
</li>
|
||||
{/}
|
||||
|
|
@ -13,11 +13,11 @@
|
|||
</div>
|
||||
|
||||
<div class="task-column span3 todos context-enabled context-uncompleted tabbable tabs-below" id="todo-well">
|
||||
<span class='pull-right'>
|
||||
<span class='option-box pull-right'>
|
||||
{#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>
|
||||
<a class="option-action" 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>
|
||||
{/}
|
||||
<a href="/v1/users/{{_user.id}}/calendar.ics?apiToken={{_user.apiToken}}" rel=tooltip title="iCal"><i class=icon-calendar></i></a>
|
||||
<a class="option-action" href="/v1/users/{{_user.id}}/calendar.ics?apiToken={{_user.apiToken}}" rel=tooltip title="iCal"><i class=icon-calendar></i></a>
|
||||
<!-- <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> -->
|
||||
</span>
|
||||
<h2>Todos</h2>
|
||||
|
|
@ -124,9 +124,10 @@
|
|||
|
||||
<newTask:>
|
||||
<form class="addtask-form form-inline new-task-form" id="new-{@type}" data-task-type="{@type}" x-bind="submit:addTask">
|
||||
<input class="addtask-field" value="{@inputValue}" type="text" name="new-task" placeholder="{@placeHolder}"/>
|
||||
<input class="btn addtask-btn" type="submit" value="Add">
|
||||
<input class="addtask-btn" type="submit" value="＋">
|
||||
<span class="addtask-field"><input value="{@inputValue}" type="text" name="new-task" placeholder="{@placeHolder}"/></span>
|
||||
</form>
|
||||
<hr>
|
||||
|
||||
<!-- all the parts of a single task -->
|
||||
<task:>
|
||||
|
|
@ -152,19 +153,22 @@
|
|||
<div class="task-controls">
|
||||
<!-- Habits -->
|
||||
{#if equal(:task.type, 'habit')}
|
||||
{#if :task.up}<a data-direction=up x-bind=click:score><img src="/img/add.png" /></a>{/}
|
||||
{#if :task.down}<a data-direction=down x-bind=click:score><img src="/img/remove.png" /></a>{/}
|
||||
{#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>{/}
|
||||
<!-- Rewards -->
|
||||
{else if equal(:task.type, 'reward')}
|
||||
<a x-bind=click:score class="buy-link" data-direction=down>{:task.value}<img src="/img/coin_single_gold.png"/></a>
|
||||
<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}
|
||||
<input type=checkbox checked="{:task.completed}">
|
||||
<span class="task-checker">
|
||||
<input type=checkbox id="box-{{:task.id}}" class="visuallyhidden focusable" checked="{:task.completed}">
|
||||
<label for="box-{{:task.id}}"></label>
|
||||
</span>
|
||||
{/}
|
||||
</div>
|
||||
|
||||
<!-- main content -->
|
||||
<div class="task-text">{:task.text}</div>
|
||||
<p class="task-text">{:task.text}</p>
|
||||
|
||||
<!-- edit/options dialog -->
|
||||
<app:taskMeta />
|
||||
|
|
|
|||
Loading…
Reference in a new issue