Nextcloud-vue: Summary of essential components

[juliushaertl]

This is just a collection of what might be a good starting point for components.

• [x] AppNavigation Implemented
• [x] PopoverMenu Implemented
• [x] Sidebar #340
• [x] Action https://github.com/nextcloud/vue-components/issues/12
• [ ] ContentList https://docs.nextcloud.com/server/14/developer_manual/design/list.html
• [x] Avatar Implemented
• [x] Dialog #212
• [x] Tooltip https://github.com/Akryum/v-tooltip
• [x] Datepicker Implemented
• [x] Timepicker Implemented
• [ ] Relative timestamp (like moment.js) https://github.com/nextcloud/vue-components/issues/13

@skjnldsv @ChristophWurst

[ChristophWurst]

Suggestion: KeyboardShortcuts, FilePicker, buttons, checkboxes

[ChristophWurst]

ContentList https://docs.nextcloud.com/server/14/developer_manual/design/list.html

In this context we should think about a refresh/reload mechanism that might be used by some apps (e.g. load new messages in Mail, pull in synced contacts in Contacts).

[skjnldsv]

ContentList: https://github.com/nextcloud/contacts/blob/6713a73479c9cb054034e3466ffa2167a9f74055/src/components/ContentList.vue
https://github.com/nextcloud/contacts/blob/6713a73479c9cb054034e3466ffa2167a9f74055/src/components/ContentList/ContentListItem.vue

Needs to be adapted for more standardised variables name (no contacts), but works fine :)
I still need to add custom options and such. I'll probably work on it Thursday of something :)

[dartcafe]

I would add a date and a time picker to get rid of using jQuery with vue.

[ChristophWurst]

Something that came up in Mail: a moment-js-like timestamp, like x seconds ago.

[juliushaertl]

Something that came up in Mail: a moment-js-like timestamp, like x seconds ago.

~https://github.com/brockpetrie/vue-moment~ https://github.com/egoist/vue-timeago looks good for that. Should we just keep a list of recommended vue libs for small stuff like that? I don't think it is worth to add a wrapper for it to the nextcloud vue components.

[georgehrke]

Will Dialog also cover in-dialog input fields like here?

[skjnldsv]

@georgehrke the idea is to support the same features as the designer guide :)

[ChristophWurst]

https://github.com/egoist/vue-timeago looks good for that.

Works :+1:, but l10n is pain to use as it requires you to load the translations from another package: https://github.com/egoist/vue-timeago#usage.

[skjnldsv]

Any good datepicker? :)

[georgehrke]

An autocomplete component would be highly appreciated :)
with label, value, and avatar / icon / plain color.

[skjnldsv]

@georgehrke with dropdown?
vue-multiselect is already here for that :)

[dartcafe]

What about vuetify? OK, it could start a new discussion about using material design, but it has many useful components.

[skjnldsv]

@dartcafe the idea is not to port other components into nextcloud. Let's keep our simplified and unified design. :)
If you find any other reusable components we use on nc or associated apps then let's add them on this list ;)

[skjnldsv]

Date-time picker? https://mengxiong10.github.io/vue2-datepicker/demo/index.html
That's the only one I found that seems to fit our need :/

Material: https://github.com/mariomka/vue-datetime
Findings: https://vuejsexamples.com/tag/picker/

[jancborchardt]

There should also be components for list elements, and grid view elements, right?

We already use the list view in lots of places. And the grid view is being experimented with in Bookmarks: http://github.com/nextcloud/bookmarks/ and Files: https://github.com/nextcloud/server/pull/11050

[jancborchardt]

And let’s make sure that these components use HTML standard elements as much as possible. Buttons/links instead of divs etc – so we get a lot of the accessibility parts for free.

[skjnldsv]

@jancborchardt I'm not sure. The idea is small individuals components that are simple and reusable everywhere. Big lists or stuff like that can be standardised for the html/css but will be far too complicated for a vue component.

[jancborchardt]

Hm – I would say it’s very comparable to the ContentList component though? https://docs.nextcloud.com/server/14/developer_manual/design/list.html

And of course "grid view" is a bit of a big part. But a component would be a "tiled element", or "preview component with a title component below and action menu right next to it".

[skjnldsv]

Content list is very simple, you have like 5 différents options, tops.
The file list is crazy complicated. And having everything in a single component would greatly lower down the possibilities of working with all the vue features.

Remember, that for those components, you cannot edit the inner data or structure. You just give it an object ant vue does the rest. This exclude all custom ideas you might want to add into your app or other complex methods.

And as a developer, I really like the idea of having small snippets/components to speed up the development of my app, but I would totally hate having an entire structured component preventing me from doing whatever I want to do.

[skjnldsv]

And of course "grid view" is a bit of a big part. But a component would be a "tiled element", or "preview component with a title component below and action menu right next to it".

But small stuff like that, yes definitely :grimacing: :+1: :100:

[dartcafe]

Did we mention a sharing component?

[splitt3r]

Sidebar with SidebarTab would be nice too.

[skjnldsv]

@splitt3r again, complicated components. :)
Let's only focus on simple and reusable ones.

@dartcafe what do you mean?

[splitt3r]

Ok :+1:

[skjnldsv]

@splitt3r though, we have a pending discussion to standardise the sidebar ;)
https://github.com/nextcloud/server/issues/10289

[dartcafe]

This one:

I think it would be helpful to have this componement to select users from a list.

[ChristophWurst]

Also, we can just have separate tickets for these kinds of components that would be nice to have, but are not essential right now? I mean we're happy for all feedback and I'm sure the number of components will grow over time, so there's nothing wrong with proposing (exotic) ones right now :wink:

[skjnldsv]

@ChristophWurst Yes! If the component is not something that is used by almost all of the apps, then please create a new issue :)

[juliushaertl]

I think we could still provide a basic tab component with slots for the content. So devs at least don't need to mess with the tab switching for example.

[skjnldsv]

@juliushaertl yes for the tabs, seems simple enough :)

[skjnldsv]

About some external components, like the date-time picker for example : https://github.com/mengxiong10/vue2-datepicker

How should we handle theming?
Should we create a component that just forward everything to this component? Should we fork it?
I like the idea of just creating a "fake" component that provide all the data from the datepicker and we just add our css on top and ship it like it is our component. We'd still have to update the datepicker from the origin repo once in a while, but dependabot sure can manage that? :)

[ChristophWurst]

I like the idea of just creating a "fake" component that provide all the data from the datepicker and we just add our css on top and ship it like it is our component. We'd still have to update the datepicker from the origin repo once in a while, but dependabot sure can manage that

:+1: on that. Let's try to reuse as much as possible without forking/duplicating.

[skjnldsv]

Implemented :)

[jancborchardt]

@skjnldsv the datepicker look different from the one in core, like top bar arrows are different, week day names are too present? The design should at least start out with the way it currently is. :slightly_smiling_face:

[skjnldsv]

@jancborchardt I used most of the design we had on the one we added on server, but there was a lot of part missing (year pick, month pick)!
But I really feel like it fit our current design and it's a nice improvement. I find this one far cleaner and easy to use compare to the jQuery one ;)
Could you do a review of it and create a new issue here to follow what we can do to improve it? :)
You can try this datepicker in the new contacts alpha if you want :)

[skjnldsv]

Closing now, most of them have their own issue or already exists :)