-
Notifications
You must be signed in to change notification settings - Fork 133
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature/788/toolbar #790
base: main
Are you sure you want to change the base?
Feature/788/toolbar #790
Conversation
I have a working prototype now. It contains two important parts:
There are todo's for both parts:
Sidemenu:
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 |
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 |
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 |
@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. |
Could you please explain in words what you are trying to do with that |
src/components/EditorEasyMDE.vue
Outdated
// the first "undo" is the editor beeing populated. Do not undo that! | ||
if(this.mde.codemirror.historySize().undo>1){ | ||
this.mde.codemirror.undo() | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
// the first "undo" is the editor beeing populated. Do not undo that! | |
if(this.mde.codemirror.historySize().undo>1){ | |
this.mde.codemirror.undo() | |
} | |
if (this.mde.codemirror.historySize().undo > 0) { | |
this.mde.codemirror.undo() | |
} |
This special case (undo>1
) is not needed anymore, since #825 fixes the original issue! Thanks for pointing me on this!
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! |
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 . |
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 |
@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? |
Could you please provide a screenshot? That would make it easier to understand the problem. |
I'm not sure if this is possible with |
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
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. |
@newhinton Just found and read this: nextcloud/server#32060 . So, we will need to switch to vue-material-design-icons for this PR. |
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 |
Looks good design wise. Maybe rename |
@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 If not, i will probably have to build my own system for singular |
I agree that it is a good approach to move that code into a generic |
nextcloud-libraries/nextcloud-vue/issues/2655 I opened such an issue, though i dont think i will have time to develop such a component. |
It's also much easier :) |
For easier design review, before/after screenshots would be nice. :) Thanks! |
@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.
|
Signed-off-by: Felix Nüsse <felix.nuesse@t-online.de>
Signed-off-by: Felix Nüsse <felix.nuesse@t-online.de>
Signed-off-by: Felix Nüsse <felix.nuesse@t-online.de>
Signed-off-by: Felix Nüsse <felix.nuesse@t-online.de>
Signed-off-by: Felix Nüsse <felix.nuesse@t-online.de>
Signed-off-by: Felix Nüsse <felix.nuesse@t-online.de>
Signed-off-by: Felix Nüsse <felix.nuesse@t-online.de>
add emoji picker Signed-off-by: Felix Nüsse <felix.nuesse@t-online.de>
Signed-off-by: Felix Nüsse <felix.nuesse@t-online.de>
Signed-off-by: Felix Nüsse <felix.nuesse@t-online.de>
Signed-off-by: Felix Nüsse <felix.nuesse@t-online.de>
Signed-off-by: Felix Nüsse <felix.nuesse@t-online.de>
Signed-off-by: Felix Nüsse <felix.nuesse@t-online.de>
877a853
to
36764f4
Compare
…content is empty Signed-off-by: Felix Nüsse <felix.nuesse@t-online.de>
Signed-off-by: Felix Nüsse <felix.nuesse@t-online.de>
Signed-off-by: Felix Nüsse <felix.nuesse@t-online.de>
nextcloud-libraries/nextcloud-vue#3060 might come in handy even though it's not a full menubar yet as it does not change the number of displayed items responsively. |
@newhinton Just wanted to check back if this is something you would still be interested to drive forward for the old editor, now that the text app integration with rich formatting and a toolbar is there? |
@juliushaertl Generally yes, but i am very busy at the moment so progress will be slow. Though it will probably not too much work to update this, i will take a look on the weekens. |
Hi all, I am a user of Nextcloud who left Google Keep. I. Do image attachments in notes md files display in the for: A. Nextcloud Files App Notes folder in Browser
B. Nextcloud Notes App in Browser
C. Nextcloud Android App? NO II. Can new images be attached/uploaded to a notes md file for: A. Nextcloud Files App Notes folder in Browser
B. Nextcloud Notes App in Browser
C. Nextcloud Android App? NO So as you see in my environment (i could share details) Does someone of you have other cases working? I ask because if that is the only working method yet I do not need to debug ;) |
fixes #788