Possible simple modification for editing full screen?

[amreus]

With recent discussions about editing full-screen, would it be a simple solution to modify the "Edit this tiddler" button trigger the "Hide sidebar" button, and then toggle back the sidebar on either save tiddler or discard buttons?

[amreus]

So I've discovered toggling the values of the tiddler `$:/state/sidebar` between no and yes controls the sidebar.

Now to track down the Edit button... or learn how to make a new button.

[amreus]

So I have something that is working. The hardest part is finding the right tiddlers and where they are located.

I've learned to create a button, create an icon, add the button to the toolbar via tagging, set the text of a tiddler via an action.

If I can figure out how to make it restore the state instead of set it, and how to make an actual plugin, then I can put it online somewhere if anyone is interested.

On Sunday, August 2, 2020 at 11:45:58 AM UTC-4, amreus wrote:

[JD]

Hi! I deleted my previous reply to correct some things:

You can clone these tiddlers (they are tagged $:/tags/EditToolbar or $:/tags/ViewToolbar) and inject the show/hide-sidebar-action right before the closing </$button> tag

add show sidebar action:

$:/core/ui/Buttons/cancel

$:/core/ui/Buttons/delete    <= this with a conditional whether you're in edit or view mode

$:/core/ui/Buttons/save

add hide sidebar action:

$:/core/ui/Buttons/edit

$:/core/ui/Buttons/clone

$:/core/ui/Buttons/new-here

$:/core/ui/Buttons/new-journal-here

$:/core/ui/Buttons/new-journal

Then create these, with all of them having text: hide (so no core button gets overwritten):

$:/config/ViewToolbarButtons/Visibility/$:/core/ui/Buttons/edit

$:/config/ViewToolbarButtons/Visibility/$:/core/ui/Buttons/clone

$:/config/ViewToolbarButtons/Visibility/$:/core/ui/Buttons/new-here

$:/config/ViewToolbarButtons/Visibility/$:/core/ui/Buttons/new-journal-here

$:/config/ViewToolbarButtons/Visibility/$:/core/ui/Buttons/new-journal

$:/config/EditToolbarButtons/$:/core/ui/Buttons/cancel

$:/config/EditToolbarButtons/$:/core/ui/Buttons/delete

$:/config/EditToolbarButtons/$:/core/ui/Buttons/save

Then all of the above buttons you can package as you wish! 

In effect it's like you've replaced the core buttons with your own. I might go this direction with FS plugin but I'm not sure.. I don't want to interfere much with the Toolbar buttons hehe and I'm looking for a different experience altogether (single-tiddler editting without using zoomin view and with sticky editor toolbar and general cleaner interface)

- jd

[amreus]

Hi JD,

Thanks so much for the help.

I also would prefer not to touch the core buttons but instead create alternative buttons which the user could choose to add to the toolbars. I don't know if that's possible yet.

On Sunday, August 2, 2020 at 3:03:12 PM UTC-4, JD wrote:

Hi! I deleted my previous reply to correct some things:

You can clone these tiddlers (they are tagged $:/tags/EditToolbar or $:/tags/ViewToolbar) and inject the hide-sidebar-action right before the closing </$button> tag

add show sidebar action:

$:/core/ui/Buttons/cancel

$:/core/ui/Buttons/delete

$:/core/ui/Buttons/save

add hide sidebar action:

$:/core/ui/Buttons/edit

$:/core/ui/Buttons/clone

$:/core/ui/Buttons/new-here

$:/core/ui/Buttons/new-here

$:/core/ui/Buttons/new-journal

Then create these, with all of them having text: hide (so no core button gets overwritten):

$:/config/ViewToolbarButtons/Visibility/$:/core/ui/Buttons/edit

$:/config/ViewToolbarButtons/Visibility/$:/core/ui/Buttons/clone

$:/config/ViewToolbarButtons/Visibility/$:/core/ui/Buttons/new-here

$:/config/ViewToolbarButtons/Visibility/$:/core/ui/Buttons/new-here

$:/config/ViewToolbarButtons/Visibility/$:/core/ui/Buttons/new-journal

$:/config/EditToolbarButtons/$:/core/ui/Buttons/cancel

$:/config/EditToolbarButtons/$:/core/ui/Buttons/delete

$:/config/EditToolbarButtons/$:/core/ui/Buttons/save

Then all of the above buttons you can package as you wish! 

In effect it's like you've replaced the core buttons with your own. I might go this direction with FS plugin but I'm not sure.. I don't want to interfere much with the Toolbar buttons hehe and I'm looking for a different experience (single-tiddler editting without using zoomin view and with sticky editor toolbar and general cleaner interface)

- jd

[E Browns]

That's possible, yeah! It's what I've outlined above.. For example the core edit button is this: $:/core/ui/Buttons/edit

You can go search for that tiddler at $:/AdvancedSearch —> Shadows tab, navigate to it, and at the dropdown menu, choose to clone it. That'll make a /copy/ of it which you can inject the hide-sidebar-action into. 

This /copy/, change the caption text a bit so you can differentiate it from the core edit button, then rename it to something else (up to you). 

Then, you can go to: 

$:/ControlPanel —> Appearance —> Toolbars —> View Toolbar

And from there, uncheck the core edit button, and make sure that your /copy/ is checked (you'd be able to tell which is yours if you changed the caption text of your /copy/). 

Please let me know if this is unclear hehe I wish to help you with this. Button editting was my first forage into tiddlywiki ui design and i'm getting nostalgic. 

-jd

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/OzlHFYjLPhk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/8cac3f0d-b56b-477d-b42e-adf1e6d75124o%40googlegroups.com.

[amreus]

JD, Thanks again for your insight.

You can see the prototype here: http://amreus.tiddlyspot.com

-477d-b42e-adf1e6d75124o%40googlegroups.com.

[E Browns]

Cool! But it should be a core feature to be able to go back to the previously selected state of the sidebar on save or cancel, atleast! 

Just add this action before the hide-action on the edit button: 

<$action-setfield $tiddler="$:/state/sidebar/save" text={{{ [[$:/state/sidebar]is[tiddler]!text[]then{$:/state/sidebar!!text}else[yes]] }}}/>

Then on your cancel and save buttons, instead of always showing it, get the value of the previous state/save: 

<$action-setfield $tiddler="$:/state/sidebar" text={{$:/state/sidebar/save}}/>

Also, forgive me i'm just wondering, why the new svg's? Wouldn't it make for a smaller plugin to just add a single css tiddler targetting your buttons, then on  your buttons add a class that's unique you? 

Sample, add a stylesheet to your plugin with text: 

.am-green svg { fill: green !important; }

And to your edit button, for example, return the core edit button image and just replace the class: 

\whitespace trim

<$button 

  message="tm-edit-tiddler"

  tooltip={{$:/language/Buttons/Edit/Hint}}

  aria-label="Am Edit" 

  class={{{ [<tv-config-toolbar-class>addsuffix[ am-green]] }}}

>

<$list filter="[<tv-config-toolbar-icons>match[yes]]">

{{$:/core/images/edit-button}}

</$list>

<$list filter="[<tv-config-toolbar-text>match[yes]]">

<span class="tc-btn-text">

<$text text=" "/>

<$text text="am edit"}/>

</span>

</$list>

<$action-setfield $tiddler="$:/state/sidebar/save" text={{{ [[$:/state/sidebar]is[tiddler]!text[]then{$:/state/sidebar!!text}else[yes]] }}}/>

<$action-setfield $tiddler="$:/state/sidebar" text="no"/>

</$button>

So there would be no need for identical images with just the color difference? 

Just a thought of course ^^,

-jd

--

You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/OzlHFYjLPhk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/196c22a3-5645-46d7-8507-c3216eb100f3o%40googlegroups.com.

[E Browns]

Oh! I just noticed the stray closing curly bracket inside the <$text> widget! 

[TW Tones]

JD,

That is a nice idea,  But I think it complements the other approaches

• Change color on the fly (your suggestion)
• Helps reduce size of code
• Embed the actual SVG in your code with a fill=color
• Reduces number of tiddlers and helps perhaps make a single tiddler solution
• Allows other variations
• Clone an existing and set the fill=color and other settings
• Allows whole tiddler to be replaced with another icon without touching the code.

Regards

TW Tones

To unsubscribe from this group and all its topics, send an email to tiddl...@googlegroups.com.

[E Browns]

Hi Tony! Yeah I think it boils down to a preference on which method to use? 

For the third bullet, cloning the svg, I think it's unnecessary when the intent is /just/ to change a color (of course when there are other changes I don't see why not ^^, ). So as to make the plugin more compact, why not just add a class to the custom button and retain the use of the core svg?

The second bullet is a nice approach but will kinda break compatibility in a very miniscule way I think. When the intent is to always mimic the look of the core edit button with just the color change, it won't update when for some reason down the line, the core edit svg is updated

So again I think it comes down to personal preference because they're all correct approaches! As you can tell I prefer fewer tids, which isn't a bad thing but is somewhat(?) against the principle of tiddlers: even the smallest should be ready to be reusable hehe. 

Thanks for outlining the different approaches! 

- jd

To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/f9ff984e-169a-4750-9df2-0e0b0a789a34o%40googlegroups.com.

[TW Tones]

JD,

I suppose its also what the icon is. I have hacked a few core svg's to make totally new images for buttons.

But the truth is wther my own or a core tiddler, if I use colour for an indicator and that is the only change, your method will often be the best.

Hey, You know in the online forum you can edit the post and remove the "}"?

https://groups.google.com/d/msg/tiddlywiki/OzlHFYjLPhk/g_LcnEoUAQAJ

Regards

TW Tones

On Monday, August 3, 2020 at 12:29:59 PM UTC+10, JD wrote:

Hi Tony! Yeah I think it boils down to a preference on which method to use? 

For the third bullet, cloning the svg, I think it's unnecessary when the intent is /just/ to change a color (of course when there are other changes I don't see why not ^^, ). So as to make the plugin more compact, why not just add a class to the custom button and retain the use of the core svg?

The second bullet is a nice approach but will kinda break compatibility in a very miniscule way I think. When the intent is to always mimic the look of the core edit button with just the color change, it won't update when for some reason down the line, the core edit svg is updated

So again I think it comes down to personal preference because they're all correct approaches! As you can tell I prefer fewer tids, which isn't a bad thing but is somewhat(?) against the principle of tiddlers: even the smallest should be ready to be reusable hehe. 

Thanks for outlining the different approaches! 

- jd

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/f9ff984e-169a-4750-9df2-0e0b0a789a34o%40googlegroups.com.

[amreus]

On Sunday, August 2, 2020 at 9:57:00 PM UTC-4 JD wrote:

Cool! But it should be a core feature to be able to go back to the previously selected state of the sidebar on save or cancel, atleast! 

I agree, I just don't/didn't know how yet.

 

Just add this action before the hide-action on the edit button: 

<$action-setfield $tiddler="$:/state/sidebar/save" text={{{ [[$:/state/sidebar]is[tiddler]!text[]then{$:/state/sidebar!!text}else[yes]] }}}/>

Then on your cancel and save buttons, instead of always showing it, get the value of the previous state/save: 

<$action-setfield $tiddler="$:/state/sidebar" text={{$:/state/sidebar/save}}/>

Also, forgive me i'm just wondering, why the new svg's? Wouldn't it make for a smaller plugin to just add a single css tiddler targetting your buttons, then on  your buttons add a class that's unique you? 

I also didn't know CSS applied to svg's. But also I probably should create unique icons which don't use color as the sole way to differentiate them so as not to break people's theme's.

 

Sample, add a stylesheet to your plugin with text: 

.am-green svg { fill: green !important; }

And to your edit button, for example, return the core edit button image and just replace the class: 

\whitespace trim

<$button 

  message="tm-edit-tiddler"

  tooltip={{$:/language/Buttons/Edit/Hint}}

  aria-label="Am Edit" 

  class={{{ [<tv-config-toolbar-class>addsuffix[ am-green]] }}}

>

<$list filter="[<tv-config-toolbar-icons>match[yes]]">

{{$:/core/images/edit-button}}

</$list>

<$list filter="[<tv-config-toolbar-text>match[yes]]">

<span class="tc-btn-text">

<$text text=" "/>

<$text text="am edit"}/>

</span>

</$list>

<$action-setfield $tiddler="$:/state/sidebar/save" text={{{ [[$:/state/sidebar]is[tiddler]!text[]then{$:/state/sidebar!!text}else[yes]] }}}/>

<$action-setfield $tiddler="$:/state/sidebar" text="no"/>

</$button>

Thanks for this - I wasn't sure if "if/then/else" was even a thing. I see it is.

 

So there would be no need for identical images with just the color difference? 

Just a thought of course ^^,

-jd