Resizable columns

[brueckner]

Hi! So this is the new counterpart to a Pull Request originally made in nextcloud/mail#4123.

It was suggested to move the implemention into the global component, so that other apps are able to use this as well. Here are some details about the implementation:

This is (still) using the splitpanes package to do the heavy lifting. We've got two columns: main and aside. These two columns have min, max and default size widths defined here.

splitpanes fires an event called resized after a resize has occurred, which triggers a save to localStorage with the size values for main and aside in onPaneResize(). The pane sizes are scoped to the parent component, which means that each app implementing this will store their own sizes automatically. To do that, I am pulling the parent component's name (this.$parent.$options.name) to construct a paneIdentifier which is then used to store and read from localStorage.

So for example, the Mail app implements this insde of the MailboxThread component. Thus the record in localStorage will look something like this:

pane-sizes.MailboxThread: {"aside":"23.60","main":"76.40"}

As for the DOM structure: the <slot> inside <main id="app-content-vue"> has now been wrapped inside <div id="app-content-wrapper">, which had to be moved up from within the component of the Mail app. This is something that needs to be checked I guess. Does any other app use that #app-content-wrapper div?

Apps that implement this component and just use the default slot should not be affected by this change, other than the new wrapping div. Maybe we could even move the default <slot> out of div#app-content-wrapper again... 🤔 That way there wouldn't be any change at all to a component that is not using the named slots. I'd love some feedback on that!

Oh and also: can someone please check why there are so many changes/additions to the package-lock.json file? Just adding the splitpanes-package shouldn't create that big of a difference I believe. 🤷‍♂️

[st3iny]

First of all, I'm really looking forward to getting this one merged :)

Oh and also: can someone please check why there are so many changes/additions to the package-lock.json file? Just adding the splitpanes-package shouldn't create that big of a difference I believe. man_shrugging

Seems like you accidentally upgraded the lock file to version 2. There are 2 options for fixing:

1. Use npm <= v6 (lock file version 2 is used in >= v7), recreate and push the lock again.
2. We upgrade the lock file of the repository to v2 (similar to what we did in mail not long ago).

[brueckner]

Ha - that was it, thanks man! :) My npm was on version v7.5.4. Switching to 6xhas solved it. 👌

[ChristophWurst]

Tested, works well and the changes make sense

[skjnldsv]

Thanks a lot for addressing this :)
I added some important comments 🚀

[brueckner]

Thanks a lot for addressing this :)
I added some important comments 🚀

Thanks for the review & feedback John @skjnldsv, I'll get on it tomorrow! :)

[brueckner]

A little later than expected, but today I was able to implement your suggestions @skjnldsv.
Could you please have another look at it?

Cheers!

[skjnldsv]

Getting close @brueckner ! Thank you so much! It looks great! 🤗

[brueckner]

Alright - the new update changes a few things:

Slots

There's a default slot and a list slot. If the list slot is not used, the component will behave just like before. If the list slot is used, the component will initialize the resizable columns feature.

Overriding defaults

I refactored the default settings used by the resizable columns. They can now be overriden by the parent component with 3 simple props:

<AppContent
    list-size="35"          # default: 25
    list-min-width="20"     # default: 15
    list-max-width="45"     # default: 40
>...</AppContent>

The inverse defaults for the details column are calculated automatically.

Documentation

Has been added with two examples and a section about overriding defaults.

---

Thanks a ton @skjnldsv, this is now much nicer to use because of your input!

If there's anything else, just let me know!

[raimund-schluessler]

See #1759 (comment)

[raimund-schluessler]

Will this also allow to resize the AppSidebar? This would be very neat as well and even more apps would benefit from this. 🙂

[skjnldsv]

Will this also allow to resize the AppSidebar? This would be very neat as well and even more apps would benefit from this.

Nope. Might come later™ ?

[skjnldsv]

Hey @brueckner! Did you have a bit of time to look at the other comments? :)

[brueckner]

Hey @brueckner! Did you have a bit of time to look at the other comments? :)

Oh, damn - yes and no. I have seen it, but have been distracted by other things and then forgot about it. I'll reply in the thread of @raimund-schluessler's comment. Thanks for the heads-up!

[brueckner]

I made a little update (see #1759 (comment)) which should not break the docs on netlify anymore. I also made a reabase on master with no conflicts to solve. 👌

[skjnldsv]

I'm gonna get back on it this week

I'm on it, this has become quite urgent :)

[skjnldsv]

Done! I fixed some of the vue logic and implemented a very important toggle between list and details for mobile view.

	<AppContent :show-details="showDetails" @update:showDetails="hideDetails">
		<!-- contacts list -->
		<template #list>
			<ContactsList
				:list="contactsList"
				:contacts="contacts"
				:search-query="searchQuery" />
		</template>

		<!-- main contacts details -->
		<ContactDetails :contact-key="selectedContact" />
	</AppContent>

Here showDetails is a computed that is true when an item of the list is selected
hideDetails just unselect the item of the list (e.g. a contact)

[skjnldsv]

Updated

[skjnldsv]

@raimund-schluessler tasks seems ok now

[raimund-schluessler]

@skjnldsv Seems to work well for Tasks now (I just checked that it doesn't break the app, I didn't check the functionality of the resizable columns, though).