anatolykopyl/worktime
1
0
Fork 0
Code Pull Requests Releases Activity

Reworked modals

Browse Source
This commit is contained in:
Anatoly Kopyl
2021-11-05 23:15:04 +03:00
parent eed9223b77
commit 92f73084e8
8 changed files with 91 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@@ -0,0 +1,5 @@
# Worktime
An app to track your time
Works offline ✈

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 KiB

1
public/favicon.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⏲</text></svg>
Side by Side

After

Width:  |  Height:  |  Size: 124 B

2
public/index.html
View File

@@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="icon" href="<%= BASE_URL %>favicon.svg">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>

1
src/App.vue
View File

@@ -1,6 +1,7 @@
<template>
<div class="app-backdrop"></div>
<router-view/>
<div id="modalSpot" />
</template>
<style lang="scss">

2
src/components/Modal.vue
View File

@@ -1,4 +1,5 @@
<template>
<teleport to="#modalSpot">
<div
class="modal"
:class="{hidden: !active}"
@@ -9,6 +10,7 @@
<slot />
</div>
</div>
</teleport>
</template>
<script>

66
src/views/Home/CategoryModal.vue Normal file
View File

@@ -0,0 +1,66 @@
<template>
<Modal ref="modal">
<div class="title">Assign Category</div>
<div
v-for="category in categories"
:key="category"
class="category"
:style="{ background: stringToColor(category) }"
@click="assignCategory(category)"
>
{{ category }}
</div>
</Modal>
</template>
<script>
import { ref, computed } from 'vue';
import { useStore } from 'vuex';
import Modal from '@/components/Modal.vue';
import toColor from '@/stringToColor';
export default {
components: { Modal },
props: {
name: {
type: String,
required: true,
},
},
setup(props) {
const store = useStore();
const modal = ref(null);
const open = () => {
modal.value.open();
};
const close = () => {
modal.value.close();
};
const stringToColor = (str) => toColor(str);
const assignCategory = (category) => {
store.commit('assignCategory', { name: props.name, category });
modal.value.close();
};
return {
modal,
open,
close,
assignCategory,
stringToColor,
categories: computed(() => store.state.categories),
};
},
};
</script>
<style lang="scss" scoped>
.category {
margin-top: 12px;
border-radius: 24px !important;
padding: 12px 24px !important;
}
</style>

38
src/views/Home/Task.vue
View File

@@ -34,18 +34,10 @@
</div>
</div>
<Modal ref="categorySelect" class="modal">
<div class="title">Assign Category</div>
<div
v-for="category in categories"
:key="category"
class="category"
:style="{ background: stringToColor(category) }"
@click="assignCategory(category)"
>
{{ category }}
</div>
</Modal>
<CategoryModal
ref="categorySelect"
:name="task.name"
/>
<div class="delete" @click="removeTask">
<img src="@/assets/trash.svg" />
@@ -54,16 +46,13 @@
</template>
<script>
import { mapState } from 'vuex';
import toColor from '@/stringToColor';
// import CategoryDropdown from './CategoryDropdown.vue';
import Modal from '@/components/Modal.vue';
import CategoryModal from './CategoryModal.vue';
export default {
components: {
// CategoryDropdown,
Modal,
CategoryModal,
},
props: {
task: Object,
@@ -81,10 +70,6 @@ export default {
stopTask() {
this.$store.commit('stopTask', this.task.name);
},
assignCategory(category) {
this.$store.commit('assignCategory', { name: this.task.name, category });
this.$refs.categorySelect.close();
},
removeCategory() {
this.$store.commit('assignCategory', {
name: this.task.name,
@@ -120,9 +105,6 @@ export default {
return `${days}d ${hours}h ${mins}m`;
},
...mapState({
categories: (state) => state.categories,
}),
},
mounted() {
setInterval(() => {
@@ -194,14 +176,6 @@ export default {
margin-left: 16px;
cursor: pointer;
}
.modal {
.category {
margin-top: 12px;
border-radius: 24px !important;
padding: 12px 24px !important;
}
}
}
@keyframes pulse {