WIP: feat: route modals everywhere #2735
No reviewers
Labels
No Label
area/internal-code
changes requested
confirmed
dependencies
duplicate
good first issue
help wanted
hosting
invalid
kind/bug
kind/feature
question
wontfix
No Milestone
No project
No Assignees
3 Participants
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: vikunja/frontend#2735
Loading…
Reference in New Issue
No description provided.
Delete Branch "dpschen/frontend:feature/route-modals-everywhere"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
This enables route modals everywhere, where possible.
This is a major usability improvement, because you can go back to the route where you came from much faster.
@ -0,0 +1,21 @@
<!-- https://github.com/vuejs/rfcs/pull/449 -->
This component makes it possible to optionally wrap around another component. If the
is
prop defines a component it will be rendered as a wrapper around the slot content. If theis
prop is undefined there won't be any wrapper.@ -0,0 +10,4 @@
defineProps<{ is: any }>()
const attrs = useAttrs()
console.log(JSON.parse(JSON.stringify(attrs)))
Remove this
@ -40,3 +40,2 @@
<modal
:enabled="Boolean(currentModal)"
<component
Every modal component now has to provide it's own modal.
This makes it possible for us to have different modal implementations. Currently we do this by changing the
type
prop of the modal. It might be easier for us if we create something like aBaseModal
to abstract the general modal functionality and then use that to create styled Modals with specific functionality. For example we coudl create a dedicatedDialog
modal (this might actually be the same as the currentcreate-edit
, I'm not sure here if that was the intended use @konrad).That sounds like it could be a good idea.
IIRC my main goal with the
create-edit
component was to be able to easily re-use a shell for creating or editing.@ -1,38 +1,38 @@
<template>
<modal @close="$router.back()" :overflow="true" :wide="wide">
<modal :overflow="true" :wide="wide" #default="{ onClose }">
I removed the
@close
event definitions on all internal modals because what happens when that event get's fired should instead be defined by the parent. By removing this the parentsonClose
/@close
should automatically be passed to the<modal>
.By passing the
onClose
then to the slot content, the slot is still able to use the method.@ -88,3 +89,1 @@
function primary() {
emit('create')
emit('primary')
function primary(onClose: () => void) {
We pass
onClose
as a callback parameter to theprimary
emit so that it can reuse theonClose
after the primary action finished (unsure if that makes sense).@ -2,3 +2,3 @@
<Teleport to="body">
<!-- FIXME: transition should not be included in the modal -->
<CustomTransition :name="transitionName" appear>
<CustomTransition :name="transitionName" appear :appear-class="transitionName">
The appear transition is currently broken. Fix this.
@ -98,2 +97,4 @@
scrollLock.value = props.enabled
})
function onClose() {
FIXME: either we use an implicit
attrs.onClose
or we explicit define aclose
emit. Both should not be mixed.@ -45,3 +45,3 @@
const historyState = computed(() => route.fullPath && window.history.state)
if (historyState.value) {
if (historyState.value === undefined) {
Something was broken here: since we checked for
historyState.value
in theif
condition it could never have a value in theelse
cause.@ -80,3 +80,3 @@
variant="tertiary"
class="is-danger"
@click.prevent.stop="removeBackground"
@click="removeBackground(onClose)"
We should not need to use
.prevent
and.stop
with the vueuseonClickOutside
.@ -1,4 +1,5 @@
<template>
<OptionalWrapper :is="isModal && Modal" variant="scrolling">
By using the OptionalWrapper we can use components that can be used with or without Modal
@ -510,2 +515,3 @@
defineEmits(['close'])
const attrs = useAttrs()
console.log(JSON.parse(JSON.stringify(attrs)))
Remove log
eb6d239213
to130620b077
Hi dpschen!
Thank you for creating a PR!
I've deployed the changes of this PR on a preview environment under this URL: https://2735-feature-route-modals-everywhere--vikunja-frontend-preview.netlify.app
You can use this url to view the changes live and test them out.
You will need to manually connect this to an api running somehwere. The easiest to use is https://try.vikunja.io/.
Have a nice day!
130620b077
toa6765638c1
87f8e66e34
tocd72db7287
cd72db7287
tode7d004c6e
Does it make sense to rebase this?
Closing this due to inactivity. Please ping if you want to pick it up again.