local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Add better looking checkboxes (#6)

Browse source
This commit is contained in:
konrad 2018-11-25 22:20:35 +00:00 committed by Gitea
parent 409aff07a7
commit f4e84d4497
3 changed files with 87 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/Home.vue
View file

@ -7,9 +7,19 @@
<div class="box tasks" v-if="tasks && tasks.length > 0">
<div @click="gotoList(l.listID)" class="task" v-for="l in tasks" v-bind:key="l.id" v-if="!l.done">
<label v-bind:for="l.id">
<input type="checkbox" v-bind:id="l.id" disabled>
{{l.text}}
<i v-if="l.dueDate > 0"> - Due on {{formatUnixDate(l.dueDate)}}</i>
<div class="fancycheckbox">
<input @change="markAsDone" type="checkbox" v-bind:id="l.id" v-bind:checked="l.done" style="display: none;" disabled>
<label v-bind:for="l.id" class="check">
<svg width="18px" height="18px" viewBox="0 0 18 18">
<path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
<polyline points="1 9 7 14 15 4"></polyline>
</svg>
</label>
</div>
<span class="tasktext">
{{l.text}}
<i v-if="l.dueDate > 0"> - Due on {{formatUnixDate(l.dueDate)}}</i>
</span>
</label>
</div>
</div>

14
src/components/lists/ShowList.vue
View file

@ -30,8 +30,18 @@
<div class="box tasks" v-if="this.list.tasks && this.list.tasks.length > 0">
<div class="task" v-for="l in list.tasks" v-bind:key="l.id">
<label v-bind:for="l.id">
<input @change="markAsDone" type="checkbox" v-bind:id="l.id" v-bind:checked="l.done">
{{l.text}}
<div class="fancycheckbox">
<input @change="markAsDone" type="checkbox" v-bind:id="l.id" v-bind:checked="l.done" style="display: none;">
<label v-bind:for="l.id" class="check">
<svg width="18px" height="18px" viewBox="0 0 18 18">
<path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
<polyline points="1 9 7 14 15 4"></polyline>
</svg>
</label>
</div>
<span class="tasktext">
{{l.text}}
</span>
</label>
<div @click="editTask(l.id)" class="icon settings">
<icon icon="cog"/>

62
src/vikunja.scss
View file

@ -98,6 +98,10 @@ h1,h2,h3,h4,h5,h6{
width: 96%;
display: inline-block;
cursor: pointer;
.tasktext {
vertical-align: top;
}
}
input[type="checkbox"] {
@ -176,4 +180,62 @@ h1,h2,h3,h4,h5,h6{
border-width: 0.25em;
}
}
}
// Fancy Checkboxes
.fancycheckbox {
display: inline-block;
padding-right: 5px;
padding-top: 3px;
.check {
cursor: pointer;
position: relative;
margin: auto;
width: 18px;
height: 18px;
-webkit-tap-highlight-color: transparent;
transform: translate3d(0, 0, 0);
&:hover svg {
stroke: $primary;
}
svg {
position: relative;
z-index: 1;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
stroke: #c8ccd4;
stroke-width: 1.5;
transform: translate3d(0, 0, 0);
transition: all 0.2s ease;
path {
stroke-dasharray: 60;
stroke-dashoffset: 0;
}
polyline {
stroke-dasharray: 22;
stroke-dashoffset: 66;
}
}
}
input[type=checkbox]:checked + .check svg {
stroke: $primary;
}
input[type=checkbox]:checked + .check svg path {
stroke-dashoffset: 60;
transition: all 0.3s linear;
}
input[type=checkbox]:checked + .check svg polyline {
stroke-dashoffset: 42;
transition: all 0.2s linear;
transition-delay: 0.15s;
}
}