vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

feat: implement modals with vue router 4 #816

Merged
konrad merged 62 commits from dpschen/frontend:feature/vue3-modals-with-router-4 into main 2022-02-05 16:49:04 +00:00
Conversation 39 Commits 62 Files Changed 62 +35 -14
12 changed files with 35 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 16b0d03601 - Show all commits

2
src/components/home/contentAuth.vue
View File

@ -248,4 +248,6 @@ store.dispatch('labels/loadAllLabels')
display: none;
}
}
@include modal-transition();
</style>

15
src/components/modal/modal.vue
View File

@ -1,4 +1,5 @@
<template>
<!-- FIXME: transition should not be included in the modal -->
dpschen marked this conversation as resolved
konrad commented 2022-01-08 12:04:39 +00:00
Review
Copy Link

Where should it be included instead?

Where should it be included instead?
dpschen commented 2022-01-09 10:12:24 +00:00
Review
Copy Link

Around the modal. So where it will get mounted.

Around the modal. So where it will get mounted.
👍 1
konrad commented 2022-01-09 10:18:38 +00:00
Review
Copy Link

Ah okay, makes sense.

Ah okay, makes sense.
<transition name="modal">
<section
v-if="enabled"
@ -196,18 +197,4 @@ export default {
}
}
}
/* Transitions */
.modal-enter,
.modal-leave-active {
opacity: 0;
}
.modal-enter .modal-container,
.modal-leave-active .modal-container {
transform: scale(0.9);
}
</style>

2
src/components/sharing/linkSharing.vue
View File

@ -264,4 +264,6 @@ export default {
.sharables-list:not(.card-content) {
overflow-y: auto
}
@include modal-transition();
dpschen marked this conversation as resolved Outdated
konrad commented 2021-12-04 15:09:15 +00:00
Outdated
Review
Copy Link

Doesn't repeating this create duplicate css everywhere? (even if very little)

Doesn't repeating this create duplicate css everywhere? (even if very little)
dpschen commented 2021-12-04 15:28:44 +00:00
Outdated
Review
Copy Link

Yes it does for now. But it shouldn't stay:

By using a mixin I create a direct dependency. The reason for me doing this is, that I want to change this later when working on the Modal / Dialog feature.

Perceive it as a reminder =)

Yes it does for now. But it shouldn't stay: By using a mixin I create a direct dependency. The reason for me doing this is, that I want to change this later when working on the Modal / Dialog feature. Perceive it as a reminder =)
👍 1
</style>

4
src/components/sharing/userTeam.vue
View File

@ -365,3 +365,7 @@ export default {
},
}
</script>
<style lang="scss" scoped>
@include modal-transition();
</style>

2
src/components/tasks/partials/attachments.vue
View File

@ -382,4 +382,6 @@ export default {
transform: translate3d(0, -4px, 0);
}
}
@include modal-transition();
</style>

2
src/components/tasks/partials/comments.vue
View File

@ -339,4 +339,6 @@ export default {
.media-content {
width: calc(100% - 48px - 2rem);
}
@include modal-transition();
dpschen marked this conversation as resolved
konrad commented 2022-01-08 12:05:43 +00:00
Review
Copy Link

Why does this component need the modal-transition css if it is never opened as a modal?

Why does this component need the modal-transition css if it is never opened as a modal?
dpschen commented 2022-01-19 22:22:03 +00:00
Review
Copy Link

It does have a modal inside! See line 135.
By importing it here we remove the indirect dependency.

It does have a modal inside! See line 135. By importing it here we remove the indirect dependency.
👍 1
</style>

2
src/components/tasks/partials/relatedTasks.vue
View File

@ -364,4 +364,6 @@ export default {
:deep(.multiselect .search-results button) {
padding: 0.5rem;
}
@include modal-transition();
</style>

2
src/styles/common-imports.scss
View File

@ -16,6 +16,8 @@
// since $tablet is defined by bulma we can just define it after importing the utilities
$mobile: math.div($tablet, 2);
@import "mixins";
$family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
$vikunja-font: 'Quicksand', sans-serif;

12
src/styles/mixins.scss Normal file
View File

@ -0,0 +1,12 @@
/* Transitions */
@mixin modal-transition() {
.modal-enter,
.modal-leave-active {
opacity: 0;
}
.modal-enter .modal-container,
.modal-leave-active .modal-container {
transform: scale(0.9);
}
}

2
src/views/list/views/Kanban.vue
View File

@ -740,4 +740,6 @@ $filter-container-height: '1rem - #{$switch-view-height}';
.move-card-leave-active {
display: none;
}
@include modal-transition();
</style>

2
src/views/tasks/TaskDetailView.vue
View File

@ -932,4 +932,6 @@ $flash-background-duration: 750ms;
background: transparent;
}
}
@include modal-transition();
</style>

2
src/views/teams/EditTeam.vue
View File

@ -308,4 +308,6 @@ export default {
padding: 0;
}
}
@include modal-transition();
</style>