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 charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <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> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
<body> <body>

1
src/App.vue
View File

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

20
src/components/Modal.vue
View File

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