[WIP] Rewrite UI in Vue.js #510

julien-nc · 2020-12-07T17:09:27Z

Hey there!

Why not fully rewriting Maps UI 😁?

Sorry in advance for the size of this text. It's also a memo.

How to try it

There isn't any DB migration steps involved. It's safe to switch to this branch and then get back to master. Just run make dev to build.

Immediate goals:

get rid of JQuery
make the interface more stable/solid
make it easier to understand/improve the interface
simplify tile layers management => implement custom tile layers management in settings

Long term goals:

reuse some components in other apps like Photos
produce independent components able to access Maps data from outside Nextcloud

Downsides:

While this banch is incompatible with some of the pending PRs, I think it won't be too hard to adapt them and benefit from using Vue.

Todo

Choices

Map library

Vue2Leaflet has been chosen over mapbox-gl-vue and vuelayers (OpenLayers) for various reasons.

It's quite hard to make Mapbox vector tiles work in OpenLayers
Avoid loosing Leaflet routing machine which only works with Leaflet and is compatible with many routing engines.
Avoid loosing all the other Leaflet plugins we use (easybutton, markercluster, elevation chart, context menu...)

Overall structure

The code structure is quite different than before. It used to be grouped by topic (photos, favorites...) and each controller took care of everything (display stuff on the map, manipulate the data, make network requests etc...). Communication between controllers was mostly done by method calls.
All the data is now managed by the App top component and then passed down to navigation menu and Map stuff. UI Entities are now more independent from each other. Almost all communication is now done via events.

News

Action history

Photo and favorite actions are now stored and it's possible to cancel and redo them. There's a new map control (top right) with cancel and redo buttons.

SearchField

The new SearchField component is used in the search bar and in each routing step. Routing steps used to be "augmented" with JQuery autocompletion. Multiselect (from nextcloud-vue) is now used everywhere. As it was not possible to inject a Vue component in the leaflet-routing-machine control, things have changed there. Integrated step management is now hidden and replaced by a RoutingSteps component which works in parallel of the routing machine. The routing machine itself has been abstracted in a RoutingMachine component.

Moving favorites and photos

Before: Context menu -> click move -> the move cursor changes to a crosshair -> click on target location to move the favorite/photo
After: Enable dragging in navigation menu -> drag'n'drop favorites/photos

tacruc

Nicely Done 👍

src/components/AppNavigationFavoritesItem.vue

src/components/Sidebar.vue

paulschwoerer

Good job! That looks like it has been a ton of work. I left a few comments, but couldn't dive deeper, yet. Maybe it would make sense to leverage the vuex store for data loading as has been done for the public favorites?

paulschwoerer · 2020-12-16T21:12:58Z

src/components/AppNavigationFavoritesItem.vue

+::v-deep .icon-hand {
+	opacity: 1;
+	background-color: var(--color-main-text);
+	padding: 0 !important;
+	mask: url('../../img/hand.svg') no-repeat;
+	mask-size: 16px auto;
+	mask-position: center;
+	-webkit-mask: url('../../img/hand.svg') no-repeat;
+	-webkit-mask-size: 16px auto;
+	-webkit-mask-position: center;
+	min-width: 38px !important;
+	min-height: 36px !important;
+}
+
+::v-deep .icon-hand-slash {
+	opacity: 1;
+	background-color: var(--color-main-text);
+	padding: 0 !important;
+	mask: url('../../img/hand-slash.svg') no-repeat;
+	mask-size: 16px auto;
+	mask-position: center;
+	-webkit-mask: url('../../img/hand-slash.svg') no-repeat;
+	-webkit-mask-size: 16px auto;
+	-webkit-mask-position: center;
+	min-width: 38px !important;
+	min-height: 36px !important;
+}
+
+::v-deep .icon-save {
+	background-color: var(--color-main-text);
+	mask: url('../../img/save.svg') no-repeat;
+	mask-size: 16px auto;
+	mask-position: center;
+	-webkit-mask: url('../../img/save.svg') no-repeat;
+	-webkit-mask-size: 16px auto;
+	-webkit-mask-position: center;
+}


There's a lot of repeated rules here, wouldn't it be nice to only set the values once for all icons?

Yes indeed. I just struggled a bit with style rules range and stopped touching them when it worked 😁. There sure is a lot of room for factorization.

paulschwoerer · 2020-12-16T21:38:52Z

src/components/map/PhotosLayer.vue

+		map: {
+			type: Object,
+			required: true,
+		},


It's been a while since I've worked with Vue, so please correct me if I'm mistaken here. My understanding is, that Vue will set up watchers for all fields of a prop. A change on one of the fields would then trigger a rerender of the component. Do you think this could get quite costly when passing in the whole Leaflet Map instance?

I don't think it re-renders PhotoLayers when a map attribute changes. The mechanism operates at a finer level. It will only re-render what is affected, what uses the changed values.

paulschwoerer · 2020-12-16T21:41:40Z

src/components/map/routing/RoutingMachine.vue

+export default {
+	name: 'RoutingMachine',
+


Is there a reason why you implemented the RoutingMachine as a Vue component, even though it has no associated template?

Yes, the reason is it's now easy to plug it in a Leaflet-Vue based map application. Also it can now be treated as a classic component. It has a reactive visible prop. Stuff like that.

julien-nc · 2020-12-16T22:38:43Z

@paulschwoerer Thanks for the review.

I never got interested in Vuex. If you convince me I'll probably see how it can be done with Vuex.

But then before this the color was random. Now I had 3 categories with the same color.

The color generation is supposed to be the same as before. The 2 first category name letters are used to determine the color. Anyway we need to improve this. What stops us to make a move here is that categories are not really stored in the DB, they are just a string field of the favorite table. It would be way better to have a category table and to use its ID as a foreign key in favorites table. I'm going to first implement everything like it was before. That's one of the first things to do after that.

paulschwoerer · 2021-01-17T11:16:45Z

Sorry for not getting back to this, I'll try to do a more in-depth review today or tomorrow, if desired.

paulschwoerer · 2021-01-18T13:58:07Z

So, just had a look at it. A few things:

It seems that favourite sharing is broken, at least for me. When adding a favourite location and then clicking on "Create share link", I'm getting a 400 error, which seems to originate from here. Can you think of a reason, why countFavorites() returns 0 here?
The Map component is far too large for my personal taste. In think it would be nice to break it up somewhat
The icon in the top right corner should maybe be a lighter colour or use a background, as it's hard to see, especially on the satellite view.
I also think it would be nice to have cleaner styling on the place popups.

Other than that LGTM!

julien-nc · 2021-01-18T14:03:06Z

@paulschwoerer Thanks a lot for the review! I agree and acknowledge everything you said 😁. I'll get back to Maps development once I manage to get less busy...

szaimen · 2021-05-05T11:12:21Z

@eneiluj any update on this? :)

jmporchet · 2021-05-12T21:09:40Z

Please make this PR a reality 😄
Thanks for your work!!

…ain component, all configs ok (webpack, eslint, stylelint etc...) Signed-off-by: Julien Veyssier <[email protected]>

Signed-off-by: Julien Veyssier <[email protected]>

tacruc · 2022-04-01T15:31:14Z

With all this changes you refer to the commits within thin branch?
Or #701 and #700, too?

julien-nc · 2022-04-01T16:01:17Z

@tacruc In this branch. I'll check the others later.

tacruc · 2022-04-01T16:29:09Z

So I would suggest merging #700 and #701 as they merge into here and then merging this into master.

Signed-off-by: Arne Hamann <[email protected]>

Don't open sidebar, when opening the viewer Signed-off-by: Arne Hamann <[email protected]>

Signed-off-by: Arne Hamann <[email protected]>

Clear sidebar if sidebar is closed (onSidebarClose; big X button top right of sidebar) Signed-off-by: Arne Hamann <[email protected]>

Signed-off-by: Arne Hamann <[email protected]>

Enh/vue image sidebar

Signed-off-by: Arne Hamann <[email protected]>

szaimen · 2022-04-14T10:27:15Z

🎉🎉🎉🎉🎉

julien-nc added enhancement technical debt labels Dec 7, 2020

julien-nc added this to the 0.2 🧭 polishing & onboarding milestone Dec 7, 2020

julien-nc requested review from jancborchardt, paulschwoerer and tacruc December 7, 2020 17:09

tacruc reviewed Dec 15, 2020

View reviewed changes

src/components/AppNavigationFavoritesItem.vue Show resolved Hide resolved

src/components/Sidebar.vue Outdated Show resolved Hide resolved

src/components/Sidebar.vue Outdated Show resolved Hide resolved

paulschwoerer reviewed Dec 16, 2020

View reviewed changes

tacruc mentioned this pull request Dec 20, 2020

Failed to load contacts #434

Open

julien-nc force-pushed the enh/vue-rewrite branch from d5f8801 to ca9d4e4 Compare June 29, 2021 15:42

Julien Veyssier added 14 commits July 6, 2021 12:43

beginning to rewrite, only getting option values and building empty m…

0009825

…ain component, all configs ok (webpack, eslint, stylelint etc...) Signed-off-by: Julien Veyssier <[email protected]>

begin to implement main component

3d52e3c

Signed-off-by: Julien Veyssier <[email protected]>

tile layers management ok, mapboxgl ok

e204029

Signed-off-by: Julien Veyssier <[email protected]>

routing almost ok

322576a

Signed-off-by: Julien Veyssier <[email protected]>

add routers, allow changing, allow closing, export missing

75eead1

Signed-off-by: Julien Veyssier <[email protected]>

bring back layer selection style the way it was

6046bea

Signed-off-by: Julien Veyssier <[email protected]>

add navigation with settings only

dbb4290

Signed-off-by: Julien Veyssier <[email protected]>

fix layer button visibility

c3d44f8

Signed-off-by: Julien Veyssier <[email protected]>

beginning to implement contacts, only dummy navigation

094cff4

Signed-off-by: Julien Veyssier <[email protected]>

contacts in progress

cc2fcc6

Signed-off-by: Julien Veyssier <[email protected]>

contact marker and cluster icons OK

512cf92

Signed-off-by: Julien Veyssier <[email protected]>

contacts almost ok

0dfbe29

Signed-off-by: Julien Veyssier <[email protected]>

remove contact group actions when disabled

d4b729c

Signed-off-by: Julien Veyssier <[email protected]>

fix tile layers names/ids

b2a4eb4

Signed-off-by: Julien Veyssier <[email protected]>

tacruc added 12 commits April 1, 2022 18:50

Included @nextcloud/event-bus": "^2.1.1

004c6ec

Signed-off-by: Arne Hamann <[email protected]>

Disabled Files Sidebar Tab, Notworking anyways

7d491c6

Signed-off-by: Arne Hamann <[email protected]>

Make the Viewer aware of maps sidebar

2e23a2b

Signed-off-by: Arne Hamann <[email protected]>

Make sidebar fullscreen, when viewer is opened

df9d7ba

Signed-off-by: Arne Hamann <[email protected]>

Dummy PhotoSidebarTab

f31d345

Signed-off-by: Arne Hamann <[email protected]>

Nicer photo sidebar

6c0d881

Signed-off-by: Arne Hamann <[email protected]>

Improve default Sidebar

33cc2a1

Signed-off-by: Arne Hamann <[email protected]>

Show favorits sidebar Icon in compact

3074586

Signed-off-by: Arne Hamann <[email protected]>

Add image menu element open sidebar

c55b6dd

Don't open sidebar, when opening the viewer Signed-off-by: Arne Hamann <[email protected]>

Don't open sidebar if clicked on cluster

e8051d7

Signed-off-by: Arne Hamann <[email protected]>

Keep sidebar content if sidebar is toggled (onMainDetailClicked)

27b4e4c

Clear sidebar if sidebar is closed (onSidebarClose; big X button top right of sidebar) Signed-off-by: Arne Hamann <[email protected]>

Fix viewer assumes sidebar is opened on pageload

e25e6b3

Signed-off-by: Arne Hamann <[email protected]>

This was referenced Apr 13, 2022

added move and remove for photo cluster at max zoom level #365

Closed

Share favorite locations #70

Open

Merge pull request #700 from nextcloud/enh/vue-image-sidebar

4b8aff2

Enh/vue image sidebar

tacruc approved these changes Apr 14, 2022

View reviewed changes

Merge branch 'master' into enh/vue-rewrite

1fd6e93

Signed-off-by: Arne Hamann <[email protected]>

tacruc merged commit 9e04e71 into master Apr 14, 2022

tacruc deleted the enh/vue-rewrite branch April 14, 2022 10:02

Uh oh!

[WIP] Rewrite UI in Vue.js #510

[WIP] Rewrite UI in Vue.js #510

Uh oh!

Conversation

julien-nc commented Dec 7, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How to try it

Immediate goals:

Long term goals:

Downsides:

Todo

Choices

Map library

Overall structure

News

Action history

SearchField

Moving favorites and photos

Uh oh!

tacruc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

paulschwoerer left a comment

Choose a reason for hiding this comment

Uh oh!

paulschwoerer Dec 16, 2020

Choose a reason for hiding this comment

Uh oh!

julien-nc Dec 16, 2020

Choose a reason for hiding this comment

Uh oh!

paulschwoerer Dec 16, 2020

Choose a reason for hiding this comment

Uh oh!

julien-nc Dec 16, 2020

Choose a reason for hiding this comment

Uh oh!

paulschwoerer Dec 16, 2020

Choose a reason for hiding this comment

Uh oh!

julien-nc Dec 16, 2020

Choose a reason for hiding this comment

Uh oh!

julien-nc commented Dec 16, 2020

Uh oh!

paulschwoerer commented Jan 17, 2021

Uh oh!

paulschwoerer commented Jan 18, 2021

Uh oh!

julien-nc commented Jan 18, 2021

Uh oh!

szaimen commented May 5, 2021

Uh oh!

jmporchet commented May 12, 2021

Uh oh!

tacruc commented Apr 1, 2022

Uh oh!

julien-nc commented Apr 1, 2022

Uh oh!

tacruc commented Apr 1, 2022

Uh oh!

szaimen commented Apr 14, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

julien-nc commented Dec 7, 2020 •

edited

Loading