Feature/788/toolbar

[newhinton]

fixes #788

[newhinton]

I have a working prototype now. It contains two important parts:

1. The actual toolbar in the editor
2. A new Sidemenu-Component

There are todo's for both parts: Toolbar:

• [ ] Decide what should be in the toolbar
• [ ] Decide what should not be in the toolbar, but in the sidemenu
• [ ] mobile styles

Sidemenu:

• [ ] Naming
• [ ] Interfacing from subcomponents. Currently they have to go through the note
• [ ] Technical Review
• [ ] properly set the toolbar up in mounted()

I have moved the three-dot menu to it's own component. This way we can add items to it dynamically, so that we can have different sets for the preview and the editor. While it works, i am not quite happy with how i implemented it. What i would like to do is to make this component "global", so that each subcomponent can manage its own entries instead of "abusing" the note-component.

Also i still need to add icons

[korelstar]

Sorry, I don't get what you are trying to do with the three-dot menu. The code is not working (JavaScript errors and linting errors (please check make lint)). Could you provide a screenshot or sketch that shows how it should look like?

[newhinton]

Ahh yes, it is currently not working, but i know why and will fix it.

Actually, there are no visible changes to the three-dot menu. Basically i want to extract the currently fixed size menu from the note.vue component, to it's own component. This allows other components, such as the editor to add its own entries. As an example: If we add both local image selection, and image uploading in the attachment-PR, both need buttons to trigger each action. However, some items should not be in the "primary" toolbar, but in an overflow menu.

Beeing in it's own subcomponent, we can archieve this. I am open to other suggestions though

[newhinton]

@korelstar can you try again? It should hopefully "work" now, albeit there are still a lot of lint and js errors. I will fix them as soon as i know that this implementation of a sidemenu is actually a good idea. Also no icons as of yet.

Uploading works, though we may need to adjust the api to return the proper filename. I know why it fails, and i will open a seperate pr for it so that we can fast track and discuss it seperately.

[korelstar]

Could you please explain in words what you are trying to do with that TheSidemenu component? I still don't get it. Do we really need this? It looks like this makes the whole thing very complicated. Can't we just leave the three-dot menu as it is and add all formatting options to the new toolbar?

[newhinton]

Could you please explain in words what you are trying to do with that TheSidemenu component? I still don't get it. Do we really need this? It looks like this makes the whole thing very complicated. Can't we just leave the three-dot menu as it is and add all formatting options to the new toolbar?

The idea is to allow the editor to move items there. My reasoning is that if we put everything that is possible in the toolbar, we get quite a lot of icons that are not really necessary to be there. Basically an overflow menu. We also cant just put them, because the entries would be useless in the preview. Thats why i tried to make this menu dynamic.

Another idea i had was to add a secondary overflow menu to the toolbar, but then we would have two threedot menu's which i tried to avoid. I'm open to suggestions though!

[korelstar]

To be honest, I don't think it's a good idea to put formatting actions into the existing three-dot menu. Which items do you want to put there exactly? Maybe we can group them into other "sub" menus, like the image actions in #823 .

[newhinton]

You are right, i also was thinking about ditching that idea. I want to try to use the action-buttons but i have not gotten around to rebase this pr, but i will probably ditch the variable menu

[newhinton]

@korelstar I have removed the sidemenu and switched to Actions. (I have not yet rebased this pr)

However, the Nextcloud Vue Style Guide is not quite clear on how i would force all the actions to be shown, currently i only have the threedot menu. Do you know how i would force X elements to be shown outside the popover?

[korelstar]

Could you please provide a screenshot? That would make it easier to understand the problem.

[newhinton]

Sure!

As you can see, all the actions are stuck behind the group. Do you know if it is possible to only group them if there is no space? (or force x elements out?) The documentation is not really clear about it or i overlooked it.

[korelstar]

As you can see, all the actions are stuck behind the group. Do you know if it is possible to only group them if there is no space? (or force x elements out?) The documentation is not really clear about it or i overlooked it.

I'm not sure if this is possible with nextcloud-vue. You may have to add multiple actions components. However, the Text app has realized this feature. Did you looked in the code from there?

[newhinton]

I haven't found anything as of yet, i will have to dig deeper. But generally: Is this the way to go? What do you think of the general idea, do i need to change anything?

[korelstar]

I haven't found anything as of yet, i will have to dig deeper.

I think here is what you need: https://github.com/nextcloud/text/blob/master/src/components/MenuBar.vue

But generally: Is this the way to go? What do you think of the general idea, do i need to change anything?

For me, it looks good. But I would like to hear also some feedback from @nextcloud/notes (especially @stefan-niedermann ) and @nextcloud/designers (especially @jancborchardt ). What do you think?

One thing should also be improved: currently clicking a button adds more markdown even if the text is already formatted the same intended way. In this case, the existing formatting should be removed instead.

[korelstar]

@newhinton Just found and read this: https://github.com/nextcloud/server/issues/32060 . So, we will need to switch to vue-material-design-icons for this PR.

[newhinton]

i glanced over that already, but yeah you are right.

We need to check if that is going to be compatible with nc22-24, otherwise we may need to provide two versions. But it's still WIP, so i will concentrate on getting the toolbar working in the way i'd like, and do that switch later

[stefan-niedermann]

Looks good design wise. Maybe rename Monospace to the less technical term Code? I would also strip the "Insert" from the checkbox, just call it "Checkbox" like for bold, title etc.

[newhinton]

@korelstar Your link to the menubar is what i want to achieve. Though, as far as i see it, i probably have to copy a lot of code or rewrite large parts of that menubar to make it work here.

I think it would be better if we could make the Actions component behave the same way in the nextcloud-vue component. This way others can use it aswell and we dont have to maintain it in this app.

If not, i will probably have to build my own system for singular ActionButton so that we get reusable code.

[korelstar]

@korelstar Your link to the menubar is what i want to achieve. Though, as far as i see it, i probably have to copy a lot of code or rewrite large parts of that menubar to make it work here.

I think it would be better if we could make the Actions component behave the same way in the nextcloud-vue component. This way others can use it aswell and we dont have to maintain it in this app.

I agree that it is a good approach to move that code into a generic nextcloud-vue component. But I'm not sure if this should be in the Actions component or if it's better to create a new component (e.g. ActionsBar) - personally, I prefer the last. This should be discussed in the nextcloud-vue repository. Contributions are very welcome over there.

[newhinton]

nextcloud/nextcloud-vue/issues/2655

I opened such an issue, though i dont think i will have time to develop such a component.

[skjnldsv]

@newhinton Just found and read this: nextcloud/server#32060 . So, we will need to switch to vue-material-design-icons for this PR.

It's also much easier :)

[jancborchardt]

For easier design review, before/after screenshots would be nice. :) Thanks!

[newhinton]

@korelstar I have removed the ActionButtons for now. I guess it will take a while to create an ActionGroup component in the vue repository, until then i switched back to normal buttons.

i also added a small convenience function where enter inserts an additional checkbox if the current line is a checkbox. (the same for dashes, eg. bulletlists.) It behaves the same way the android app does.

So, from a functionality standpoint this PR is done. It may need additional work, especially with tooltips for the buttons, and i think we could generally update the css a bit, but i think besides that i am done with the toolbar.

Before	After

[jancborchardt]

At this stage Nextcloud Text is being reimplemented, no? If we want to make the step towards note-taking like iOS/Apple Notes anyway, then we might as well use Nextcloud Text directly?

cc @juliushaertl @max-nextcloud @mejo-

[newhinton]

Nextcloud Text heavily breaks markdown conventions. As long as NC Text destroys formatting of .md-files we should make a big circle around that app.

Also there is the whole api that would be missing.

But ui-wise, you are right. That's where i got the idea ;)

[max-nextcloud]

I agree that text does not provide a way to keep the original markdown formatting - which notes does.

There are some related issues that might be solved but the underlying problem stems from how text imports and serializes the markdown so we can provide collaborative editing etc. I hope we'll be able to fix this in text one day (https://github.com/nextcloud/text/issues/593#issuecomment-1066732725) - but i don't see this coming any time soon.

So I don't see a way to use text in notes any time soon. In fact the preserve markdown vs. collaborative editing is the main difference between notes and collectives from my point of view.

I think UI consistency is actually a plus for using the toolbar in notes.

[newhinton]

@max-nextcloud I have already created a PR in nextcloud vue so that the menu-bar is usable also as a component.

https://github.com/nextcloud/nextcloud-vue/issues/2655

[max-nextcloud]

@newhinton I did not see a PR and you are linking to an issue... so i assume that's what you are talking about, right?

I was thinking about reworking the text toolbar at some point as well - but i did not want to refactor it before we actually work on it anyway. We're thinking about restructuring the text toolbar because it's quite overloaded these days. I'm not sure if it's worthwhile an addition to nextcloud-vue - but if both notes and text are using it that might actually be reason enough to share it.

[newhinton]

Oh yeah, you are right, sorry. I meant issue.

[jancborchardt]

@max-nextcloud @newhinton just for reference, the formatting toolbar as component might also be useful for the Mail app for HTML mails. cc @miaulalala

So good point: Full usage of Text is probably too much, but making the toolbar a component could be a great step. :)