guzsarchives/ToToday.app
Archived
1
0
Fork 0
Code Issues Pull Requests Activity

feat(tasks): Created the base of the Task Component

Browse Source
This commit is contained in:
Guz
2022-01-28 11:15:07 -03:00
parent f78a89d81b
commit 191dcad134
7 changed files with 283 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "ToToday",
"version": "0.2.1",
"version": "0.3.0",
"private": true,
"scripts": {
"dev": "nuxt",

12
src/assets/styles/_mixins.scss
View File

@@ -31,3 +31,15 @@
justify-content: center;
text-align: center;
}
@mixin colorFadeAnim($fromColor, $toColor, $duration, $id) {
@keyframes colorFadeAnim-#{$id} {
from {
stroke: $fromColor;
}
to {
stroke: $toColor;
}
}
animation: colorFadeAnim-#{$id} $duration;
}

202
src/components/TaskComp.vue Normal file
View File

@@ -0,0 +1,202 @@
<template>
<li :id="id" class="task">
<label class="checkbox" :for="`checkboxInput${id}`">
<input :id="`checkboxInput${id}`" type="checkbox" />
<div class="icons animate">
<IconChecked class="checkedIcon" />
<IconUnchecked class="uncheckedIcon" />
</div>
</label>
<div class="info">
<h1>{{ title }}</h1>
<p>{{ description }}</p>
</div>
</li>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
name: 'TaskComp',
props: {
id: {
type: Number,
required: true,
},
title: {
type: String,
default: 'Task Title',
},
description: {
type: String,
default: 'Task short description',
},
},
});
</script>
<style lang="scss">
@import '~assets/styles/_variables.scss';
@import '~assets/styles/_mixins.scss';
$checked-color: $green0;
$unchecked-color: $begonia-red0;
.task {
.light-mode & {
background-color: $blue0;
color: $independence-gray0;
}
.dark-mode & {
background-color: $eerie-black0;
color: $dark-primary;
}
display: flex;
text-align: left;
align-items: center;
border-radius: 20px;
margin-top: 5%;
padding: 10px;
.checkbox {
padding: 1%;
padding-right: 2%;
input {
display: none;
}
input[type='checkbox']:checked + .icons {
animation: iconAnim 1s;
.checkedIcon {
display: inline-block;
}
.uncheckedIcon {
display: none;
}
.checkedIcon *,
.uncheckedIcon * {
.light-mode & {
@include colorFadeAnim(
$unchecked-color,
$checked-color,
1s,
'checkLight'
);
stroke: $checked-color;
}
.dark-mode & {
@include colorFadeAnim(
$unchecked-color,
$checked-color,
1s,
'checkDark'
);
stroke: $checked-color;
}
}
}
input[type='checkbox']:not(:checked) + .icons {
animation: iconAnimReverse 1s;
.checkedIcon {
display: none;
}
.uncheckedIcon {
display: inline-block;
}
.checkedIcon *,
.uncheckedIcon * {
.light-mode & {
@include colorFadeAnim(
$checked-color,
$unchecked-color,
1s,
'uncheckLight'
);
stroke: $unchecked-color;
}
.dark-mode & {
@include colorFadeAnim(
$checked-color,
$unchecked-color,
1s,
'uncheckDark'
);
stroke: $unchecked-color;
}
}
}
.icons {
@include center;
$bg-color: #00000080;
background-color: $bg-color;
margin: 2px;
padding: 2px;
border-radius: 50%;
.checkedIcon *,
.uncheckedIcon * {
.light-mode & {
stroke: $unchecked-color;
}
.dark-mode & {
stroke: $unchecked-color;
}
}
}
@keyframes iconAnim {
from {
transform: rotate(0) scale(1);
}
5% {
transform: rotate(0) scale(0.7);
}
50% {
transform: rotate(360deg) scale(1.2);
}
90% {
transform: scale(1.2);
}
to {
transform: scale(1);
}
}
@keyframes iconAnimReverse {
from {
transform: rotate(0) scale(1);
}
5% {
transform: rotate(0) scale(0.7);
}
50% {
transform: rotate(-360deg) scale(1);
}
to {
transform: rotate(-360deg) scale(1);
}
}
}
.info {
display: inline-block;
h1 {
font-size: 1.2em;
margin: 0;
}
p {
font-family: $secondary-font;
font-size: 0.8em;
margin: 0;
}
}
}
</style>

30
src/components/icon/Checked.vue Normal file
View File

@@ -0,0 +1,30 @@
<template>
<svg
width="24"
height="24"
stroke-width="1.5"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 12.5L10 15.5L17 8.5"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
name: 'IconChecked',
});
</script>

30
src/components/icon/Unchecked.vue Normal file
View File

@@ -0,0 +1,30 @@
<template>
<svg
width="24"
height="24"
stroke-width="1.5"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 12H16"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
name: 'IconUnchecked',
});
</script>

4
src/static/icons/completed-icon.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="24" height="24" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 12.5L10 15.5L17 8.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 421 B

4
src/static/icons/pending-icon.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="24" height="24" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 12H16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 407 B