Skip to content
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

Grouped buttons in the toolbar #1206

Open
anna-git opened this issue Sep 8, 2016 · 6 comments
Open

Grouped buttons in the toolbar #1206

anna-git opened this issue Sep 8, 2016 · 6 comments

Comments

@anna-git
Copy link
Contributor

anna-git commented Sep 8, 2016

That would be great if we could create buttons groups as such :

 var editor = new MediumEditor('.editable', {
                toolbar: {
                    buttons: ['bold', 'italic', 'underline'], [ 'h1', 'h2', 'h3']
                }
            });

Ideally we could style the separator or apply templates to get a specific presentation of the groups

@nmielnik
Copy link
Member

nmielnik commented Feb 9, 2017

@annayafi looks like #1244 is providing one way of accomplishing this, and #1281 is asking for another potential way of implementing this. Would your issue be resolved by either of those, or should we keep your issue open as a separate concept (and if so, could you provide some more specifics)?

@tkaravou
Copy link

tkaravou commented Feb 9, 2017

I like the group solution better than the one that I suggested (#1281) however, it would be nice if there's a way to add some sort of class to it. maybe something along the lines of

 var editor = new MediumEditor('.editable', {
                toolbar: {
                    buttons: ['bold', 'italic', 'underline'], [ 'h1', 'h2', 'h3'],
                    separatorClass:  'medium-editor__separator'
                }
            });

@nmielnik
Copy link
Member

nmielnik commented Feb 9, 2017

I wonder if there's a way to build off of what @noirbizarre did in #1244 s.t. we can choose different types of separators between groups of buttons. By default, each group of buttons would be separated by a newline in the toolbar, but this could be extended to use a separator element or class instead of newlines...

Maybe instead of a seperatorClass, there can just be a class set on the container for each group of buttons. By default, this button group container is a <div>, so you get each button group on a separate line, but you could change that class to be display: inline-block to allow all the groups to be on the same line, but give the button group a border-right or add an :after to act as a separator...what would you think about that?

@nmielnik
Copy link
Member

nmielnik commented Feb 9, 2017

I've created a branch toolbar-button-groups which contains the changes that @noirbizarre proposed in #1244 . This should allow others to branch off of that branch and try to incorporate some of these additional requirements before we merge the PR. Anyone should feel free to take a crack at it.

@noirbizarre
Copy link

I'll be so glad to see this merged !!!

@cosmin-novac
Copy link

This was never implemented or merged. We're just stuck with the multi-line solution instead.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants