AppNavigationItem improved editing mode and AppNavigationNewItem component

[JonathanTreffler]

@jancborchardt and I decided to create a new mode for the AppNavigationItem, to add something similar to the editable mode, but without the editing part, just a inline input box that apperas when the logo is clicked and a event when the new input gets acccepted.
We will need this for the News App Vue Rewrite.
I think @jancborchardt can explain this much better than me.

• implement behaviour
• make variable names more useful
• update docs
• code cleanup
• move into dedicated component (Work in progress)
• variable name cleanup
• Copyright header
• re-implement automatic focus of the input
• final testing
• Screenshot

Screenshots

when clicked:

[jancborchardt]

Context: This is for the "New folder" functionality. There the entry should inline switch to become an autofocused input field where you can put in the folder name.

We also need the same for Mail for the action menu where we currently directly show an input field for folder creation, which could be more elegant. cc @ChristophWurst @GretaD

[dartcafe]

I'm just curious.. Do you mean something like this:
https://github.com/nextcloud/polls/blob/master/screenshots/overview.png

[JonathanTreffler]

Not really. There are no options like checkboxes. Its not expanding and just one text input

[JonathanTreffler]

The behaviour we want works now. I will rename some variables to make the code more understandable, but then its done.

[JonathanTreffler]

@jancborchardt Should we force the icon to be a "+" in new Item mode or should the developer choose that ?

[JonathanTreffler]

@jancborchardt You said in the Talk group the text should never move (in editing or add item mode). I have implemented that in add item mode and will also implement that in the editing mode.
https://5f3d0ff2e9046d0008918800--nextcloud-vue-components.netlify.app/#!/Components/App%20containers/AppNavigationItem/11

[JonathanTreffler]

(editing mode is currently broken here, but i will fix that)

[JonathanTreffler]

@jancborchardt You said in the Talk group the text should never move (in editing or add item mode). I have implemented that in add item mode and will also implement that in the editing mode.

done

editing mode is currently broken here, but i will fix that

done

[JonathanTreffler]

@jancborchardt Should we force the icon to be a "+" in new Item mode or should the developer choose that ?

@jancborchardt Have you decided yet ?

[skjnldsv]

@jancborchardt Have you decided yet ?

Hey! Sorry, Jan is in (well deserved) vacations now :(

[JonathanTreffler]

Changes i made to the editing mode:

(I will probably get rid of the empty space at the end)

[JonathanTreffler]

I will probably get rid of the empty space at the end

done

[skjnldsv]

@JonathanTreffler could you rebase and swuash the commits please? 45 is quite a lot!

[skjnldsv]

Let's try to get this in everyone. Or else it'll stay idle for too long

[skjnldsv]

Looks good, docs are 👌
The only thing missing (please do a followup) is being able to open the AppNavigationNewItem with keyboard navigation

[skjnldsv]

could you rebase and swuash the commits please? 45 is quite a lot!

Ah, I thought you did already.
Too late 😕

[powerpaul17]

Sorry if this is the wrong place to post this, but I cannot import the AppNavigationNewItem component. Seems it was forgotten to add it to the build.

[skjnldsv]

@powerpaul17 what components version are you using?

[skjnldsv]

AH, it was forgotten in the exports

[JonathanTreffler]

Ah, I thought you did already.

Sorry. I was pretty busy lately.

[powerpaul17]

@powerpaul17 what components version are you using?

The latest release: 3.3.1

AH, it was forgotten in the exports

That's what I thought. I would have created a fix myself but I'm not familiar with the repo structure.