Clone boards with stacks, labels

[jakobroehrl]

• Resolves: Clone / Copy boards [$150] #119

• Target version: vue

• Is there a good Icon I can use?

[juliusknorr]

Is there a good Icon I can use?

We could use this, but maybe that is a better fit for the move action instead of the clone.

But maybe we should just create a simple icon similar to this one:
https://thenounproject.com/search/?q=clone&i=2432924

cc @nextcloud/designers

[skjnldsv]

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M11.8 13.8H2.2V4.2h9.6m1.2 0c0-.67-.53-1.2-1.2-1.2H2.2C1.53 3 1 3.53 1 4.2v9.6c0 .67.53 1.2 1.2 1.2h9.6c.67 0 1.2-.53 1.2-1.2"/><path d="M4.2 1C3.53 1 3 1.54 3 2.2v1.26h1.2V2.2h9.6v9.6h-1.14V13h1.14c.67 0 1.2-.53 1.2-1.2V2.2c0-.67-.53-1.2-1.2-1.2H4.2z"/></svg>

here you go, using the same design as the external icon.

[jakobroehrl]

@juliushaertl
Added the Icon, but it is't shown. Can you have a look please?

[skjnldsv]

@jakobroehrl please push your work :)

[juliusknorr]

Looks good in general, do you have debug enabled in your config.php? Otherwise the scss cacher might not update if the underlying scss file has changes.

[jancborchardt]

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M11.8 13.8H2.2V4.2h9.6m1.2 0c0-.67-.53-1.2-1.2-1.2H2.2C1.53 3 1 3.53 1 4.2v9.6c0 .67.53 1.2 1.2 1.2h9.6c.67 0 1.2-.53 1.2-1.2"/><path d="M4.2 1C3.53 1 3 1.54 3 2.2v1.26h1.2V2.2h9.6v9.6h-1.14V13h1.14c.67 0 1.2-.53 1.2-1.2V2.2c0-.67-.53-1.2-1.2-1.2H4.2z"/></svg>

here you go, using the same design as the external icon.

Improving the icon a bit, the shapes could be separated to make clear it’s separate, even in small sizes:

<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M11.8 13.8H2.2V4.2h9.6m1.2 0c0-.67-.53-1.2-1.2-1.2H2.2C1.53 3 1 3.53 1 4.2v9.6c0 .67.53 1.2 1.2 1.2h9.6c.67 0 1.2-.53 1.2-1.2"/><path d="m4.2 1c-0.67 0-1.2 0.54-1.2 1.2h10.8v10.8c0.67 0 1.2-0.53 1.2-1.2v-9.6c0-0.67-0.53-1.2-1.2-1.2z"/></svg>

This is in line with how we do it with other icons like external, icon-menu-sidebar, icon-audio-off and all the -off / -disabled state icons, and similar to how the Material Design copy icon is made. :)

[jakobroehrl]

Now it should be fine

[skjnldsv]

Code looks good :)

[juliusknorr]

So some small UX issues:

• I think we should show a loading indicator until the clone has finished, since this might take some time
• Ideally the new board starts in editing mode in the sidebar, so you can change the title right away

[juliusknorr]

Besides that I'm fine with it 😉 Awesome work so far @jakobroehrl

[jakobroehrl]

@juliushaertl
Loading: done
How can I get the boardId of the just created board?
newBoard here is empty:

deck/src/components/navigation/AppNavigationBoard.vue

Line 137 in 31ae007

this.$store.dispatch('cloneBoard', this.board).then((newBoard) => {

[juliusknorr]

Loading: done
How can I get the boardId of the just created board?
newBoard here is empty:

Does your request return the data?

[jakobroehrl]

How can I get the boardId of the just created board?
newBoard here is empty:

Does your request return the data?

@juliushaertl
Yes, I have the data here:

deck/src/store/main.js

Line 119 in 31ae007

cloneBoard(state, board) {

But I need it here:

deck/src/components/navigation/AppNavigationBoard.vue

Line 137 in 31ae007

this.$store.dispatch('cloneBoard', this.board).then((newBoard) => {

[skjnldsv]

I'll let you fix what's left, once ready, please ping me again :)

[juliusknorr]

Some remaining minor comments, otherwise it looks good 👍

[skjnldsv]

See comments :)

[skjnldsv]

code looks good! 👍