[PLUGIN] Presenting "Grouped Buttons", a button-folder creation tool

[JD]

Hello everyone, JD here.

My current projects have produced a want in me for something like this, and so I packaged it into a plugin for people who might have the same needs ^^, 

This is a button-group creation tool, simply put. The button on the left is the default, and the small one on its right will reveal buttons that the user had preset it to contain. 

Creation is as easy as 1 2 3 .. 4.. .5 ~ 8 steps -- alright, still a lot, but it's like a simple form, you'll see!

Demo and plugin page here: http://j.d.groupedbuttons.tiddlyspot.com/

Might also be useful to others ^^,

-jd

[PMario]

Hi JD,

Nice plugin!

I did find a small issue. In the control panel. If the green "prefill xx" buttons are clicked, there are 4 elements defined, that can't be disabled. I think there should be a possibility to disable preselected elements.

-mario

[Atronoush Parsi]

Lovely, Thank you JD.

A minor comment: is it possible to adjust the width of the drop down window?

Atro

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/dcef015b-2ae5-48e4-9924-4113da49e761o%40googlegroups.com.

[TW Tones]

JD,

This is great. One of those little low impact high value improvements we can apply to the UI to extend and or simplify tiddlywiki use. 

Some quick feeback items

• There is a stray button appearing in page controls without caption/description. I expect its your tool
• If you could allow the customisation of options "where the button will appear" would be great for example I would add options to add from other tags for toolbars I created, or the menu bar plugin etc.. 

I will research you method because its an elegant and space saving mechanism, I want to create some drop downs on some special buttons. This looks a lot nicer.

• Is there any chance you can generalise this for making buttons with drop-downs?

Thanks for your contributions

Tones

[Mat]

Very interesting idea. It is worth noting that the edittemplate "preview tool" has something similar. 

Out of curiosity, did you make it like so: Basically it's a "more tool button" but styled differently and with a list-after field?

<:-)

[JD]

Hi Mat! Thanks! 

Yes! Basically it's like a filtered "more" button, with a main button shown outside, where the main button can be easily interchanged with the others inside the dropdown.

Sample: I have save buttons, one for the wiki, and one for timimi snapshot. I don't want both buttons in the PageControls because I almost always just save normally. But when I do want to save via timimi snapshot, I don't want to have to go to tools sidebar and scroll to find the button. Same for the add buttons. I mentally group New with New Journal and New Drawing buttons. But I don't want them all visible because there are only occasions when I use each. Still, I don't want them lumped together will the other PageControls in More button. So, sometimes, Journal Button is outside, and the normal New Tiddler button is inside the dropdown (the checkbox will indicate what is shown outside the dropdown)

This is actually a feature on Nova Launcher for Android that I love. On my home screen, I have an icon for Phone. Tapping this will lead to the dialer. Swiping up will reveal a popup containing shortcuts to dial my fav contacts.

Very interesting idea. It is worth noting that the edittemplate "preview tool" has something similar. 

This is where I got the idea! The thing I need/want is when clicking the item on the dropdown, the action is instantly executed (i.e., clicking one of the options will not change the behavior of the Eye, but will instantly open the preview to it, while still letting the Eye be Output Preview, unless otherwise configured, hence the checkboxes in my design)

Out of curiosity, did you make it like so: Basically it's a "more tool button" but styled differently and with a list-after field?

Not really with the list-after field. The checkboxes inside the dropdown will set a default/config tiddler for that group which will indicate what the shortcut is outside. If the default/config tiddler is not set, i.e. at button initialization, it shows the user-specified "default".

Thanks ^^,

-jd

[JD]

Hi Tony! Thanks for the compliments! This is an android app feature I also wanted on Tiddlywiki

• There is a stray button appearing in page controls without caption/description. I expect its your tool

Hey, thanks! I'll check this out.

• If you could allow the customisation of options "where the button will appear" would be great for example I would add options to add from other tags for toolbars I created, or the menu bar plugin etc.. 

• Is there any chance you can generalise this for making buttons with drop-downs?

 That's a good idea! While not implemented yet, you can do this by manually creating the grouped button. Sample:

Text of your grouped button tiddler:

\import $:/plugins/jd/groupedbuttons/template

\whitespace trim

<$macrocall $name='grouped-btns'

  groupname='your-group-name' ← to make the config tiddler for the default button unique

  filter='filter expression of your buttons inside the dropdown'

  default='the shortcut outside. preferably belongs to the filter above as when not set as default, you can still access it in the dropdown'

  thisbutton='title of this tiddler so it will automatically be excluded from your dropdown' ← i should probably remove this from the macro

  tooltip='tooltip for the small button'

  buttonclass='css class for the small button'

  buttonimage='svg tiddler for the small button'

  background='palette index name of the background for the small button, e.g. page-background'

/>

Thanks again!

-jd

[JD]

Thanks Atro!

While not yet customizable,  you can edit the tiddler $:/plugins/jd/groupedbuttons/styles and change the following:

.jd-gb-dd {

    font-weight: 400;

    font-size: .75em;

    min-width: 180px !important; ← change 180px to your desired minimum width

    max-width: 180px !important; ← change 180px to your desired maximum width

    white-space: normal;

    padding: .25em 0 .5em .5em !important;

}

I should probably use a different max value hehe.

- jd

On Friday, August 14, 2020 at 11:15:59 PM UTC+9, Atronoush wrote:

Lovely, Thank you JD.

A minor comment: is it possible to adjust the width of the drop down window?

Atro

On Fri, Aug 14, 2020 at 3:22 PM JD <jologsd...@gmail.com> wrote:

Hello everyone, JD here.

My current projects have produced a want in me for something like this, and so I packaged it into a plugin for people who might have the same needs ^^, 

This is a button-group creation tool, simply put. The button on the left is the default, and the small one on its right will reveal buttons that the user had preset it to contain. 

Creation is as easy as 1 2 3 .. 4.. .5 ~ 8 steps -- alright, still a lot, but it's like a simple form, you'll see!

Demo and plugin page here: http://j.d.groupedbuttons.tiddlyspot.com/

Might also be useful to others ^^,

-jd

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.

To unsubscribe from this group and stop receiving emails from it, send an email to tiddl...@googlegroups.com.

[JD]

Aww thanks Mario!

Oh, right! I should probably not let those prefill buttons overwrite what has already been set! Thanks for the feedback!

-jd

[TW Tones]

JD,

Thanks JD for you response. Yes, I love it.

I may yet make a button that I want to be able to change the preset for, although it is less likely when grouping under an existing button, it should perhaps always behave as the original button. So please make it an option if possible.

Tony