Modal component init

[skjnldsv]

Closes #210

Okay, so I did not wanted to implement anything more because I felt that it was the app's problem to handle this:

• transitions: the modal can be use without pagination
• closing: the app should manage if the component exists or not and if it's visible

Details:

• I emit an event for each action possible (next, prev and close) and forward the event data to the parent. Do whatever you want with it :)
• Just put whatever html/component you want inside this one, the slot will manage the rest.

Questions / issues:

1. Should we rely on the modal component for the show/hide zoom animation? We could do that with the beforeMount/beforeDestroy stuff as well :)
2. We NEED to find a solution for the translation
3. the app-content have a z-index of 1000 so it means that the modal cannot be above the header (because zindex gets blocked by any lower parent) We need to fix it (yeaaah, let's touch zindexes again!! :O )
   SOLUTION: you cannot have the modal inside the #app-content element
4. The animation doesn't work?
   SOLUTION: use v-if and not v-show for the modal

<Modal :has-previous="true" :has-next="false" :out-transition="true" @close="close"
	@previous="previous" @next="next">
	<span>YOUR MODAL CONTENT</span>
</Modal>

[ChristophWurst]

1. show/hide zoom animation?

What's that?

2\. We NEED to find a solution for the translation

Yes.

[skjnldsv]

What's that?

Small animation with a fadein+zoomin on show and the reverse on out :)

[ChristophWurst]

Do it!

[skjnldsv]

@ChristophWurst @juliushaertl thoughts? :)
@jancborchardt

[jancborchardt]

Regarding the animation, the question is what the context is:

• If the context is "coming from outside", like the "About" window of firstrunwizard, the animation @juliushaertl chose for that is perfect. That is, a very quick centered fade collapse from outside.
• If there’s no real context, the animation should be a centered fade zoom in from inside. Kind of like now, but it needs to be way faster and in the gif it looks like it moves up a bit first which is strange.
• If the context is opening an image, the thumbnail of that file in the list/grid should morph to being the preview.

[skjnldsv]

• the thumbnail of that file in the list/grid should morph to being the preview.

I have absolutely no idea if I can do that 🤔

👍 for the rest! ;)

[skjnldsv]

Done!
@juliushaertl @ChristophWurst @nextcloud/vue please review! :)

Out	In

(Ignore the arrow staying, this is a quick vue example I did :p )

[jancborchardt]

Good stuff design-wise! 👍

[juliushaertl]

If the context is opening an image, the thumbnail of that file in the list/grid should morph to being the preview.

I doubt that the effort for such a implementation is worth it as the animation should be smooth and fast so a quick fade in + zoom is fine imo.