Redesign of the edittemplate area: an unfinished prototype

[David Gifford]

In the main redesign thread, PMario, I think, mentioned improvements to the edittemplate area. This reminded me that last year I had experimented with this. So I refined it a bit more today.

https://giffmex.org/experiments/edittemplateexperiment2.html

Please give me feedback, or instructions on how to do the remaining three things I mention there. I think this would be a clean way to let users configure the edittemplate in various ways.

[Riz]

Hi David

a. Popups are unwieldy in mobile screens. Go for an accordion instead.
https://tiddlywiki.com/#RevealWidget

This will solve two of your issues - persistence of the checkboxes, as well as ensuring that the data stays within the confines of tiddler.

b. You can hide them with CSS display:none property.

[Mat]

This should get you started

#1 Did you try: https://tiddlywiki.com/prerelease/#PopupMechanism - i.e tc-popup-keep

#2 In $:/.giffmex/Buttons/more-tiddler-edit-actions , add a custom class to the div so you can target it.
#3 $:/core/ui/ControlPanel/Settings/EditorToolbar

<:-)

[David Gifford]

Riz: Accordion would be visually jarring inside the edittoolbar area. And popup is how the viewtemplate more button works.

Mat: Thanks for these! Fixed #2 and #3. #1 will have to wait until upgrading to the next version, whenever that is.

https://giffmex.org/experiments/edittemplateexperiment2.html

--
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/VTrgAfKe9WU/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/68643108-4a85-4bf2-b36e-2b31dbf07e98%40googlegroups.com.

[TonyM]

David,

You are very productive at present. Thanks for Stroll I am using it primarily for authoring content, and the two stories as I can brainstorm in one tiddler and display it along side the final draft.

• In my stroll I was just looking at something similar, to provide guidance to the editor. In someways your custom option would work for this. However I am keen to have conditional info eg in object-type[content] show the content guidelines.
• FYI one approach was to add content inside the Info button, and make it work on the edit template, not completed yet.
• I was also thinking that if you used $:/core/images/chevron-down rather than the current more button, it would be more distinctive.
• Also I like the idea for the checkboxes off a toolbar drop down, This would be a nice project to generalise, for example tag config tiddlers and auto generate the checkboxes to toggle, both page and view/edit templates. I currently set config-values in my config tiddlers which would allow the on and off state to be determined.

Let me know if you want to collaborate, OK if not.

Nice work

tony

On Wednesday, May 20, 2020 at 1:56:33 AM UTC+10, David Gifford wrote:

Riz: Accordion would be visually jarring inside the edittoolbar area. And popup is how the viewtemplate more button works.

Mat: Thanks for these! Fixed #2 and #3. #1 will have to wait until upgrading to the next version, whenever that is.

https://giffmex.org/experiments/edittemplateexperiment2.html

On Tue, May 19, 2020 at 9:55 AM Mat <matia...@gmail.com> wrote:

This should get you started

#1 Did you try: https://tiddlywiki.com/prerelease/#PopupMechanism - i.e tc-popup-keep

#2 In $:/.giffmex/Buttons/more-tiddler-edit-actions , add a custom class to the div so you can target it.
#3 $:/core/ui/ControlPanel/Settings/EditorToolbar

<:-)

--
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/VTrgAfKe9WU/unsubscribe.

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

[David Gifford]

Hi TonyM

I will change that to a chevron sometime this week. Great idea.

Hard to visualize the other things you mentioned. I would say, do a draft version of what you are saying, and I can look at it to suggest visual / functional improvements.

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/6874ca84-052a-4121-af89-dd7983c2dde7%40googlegroups.com.

[TonyM]

David,

Hard to visualize the other things you mentioned. I would say, do a draft version of what you are saying, and I can look at it to suggest visual / functional improvements.

Will do cant garentee a delivery date though

Regards

Tony 

[David Gifford]

Not in a hurry!

[Anders Jonsson]

Just wanted to chime in to say that this is an excellent addition to the editemplate, one I will most definitely use.

(And with regards to making the popup persist: adding the "tc-popup-keep" as a class in the reveal works perfectly for me already in 5.1.22...)

[David Gifford]

When I tried it, the words were there but no white background...

--
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/VTrgAfKe9WU/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/cd80046c-60f4-4291-b765-efaf882a9249%40googlegroups.com.

[Anders Jonsson]

Hmmm; with _only_ "tc-popup-keep" I also get that, but with _both_ classes it stays open and looks as it should (Win10, both Chrome and Firefox)...

This works for me:

<$reveal type="popup" state="$:/SamplePopupState" class="tc-popup-keep">

<div class="tc-drop-down">

...code...

</div>

</$reveal>

Or this:

<$reveal type="popup" state="$:/SamplePopupState" class="tc-popup-keep tc-drop-down">
...code...
</$reveal>

But, maybe there's some browser/OS strangeness...

[David Gifford]

Oh, I am such a dummy sometimes. I was putting the class in the wrong spot. Works great now. I am going to fold this into Stroll today. Thank you!

--
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/VTrgAfKe9WU/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/e5d077de-c6e1-4745-a0f6-efe7f14646d2%40googlegroups.com.

[Birthe C]

Anders,

Exactly it works very well indeed.

David,

That is something I will use in my wikies. Well done!

Birthe

[Birthe C]

Sorry I forgot, I am using Linux,chromium and Firefox.

Birthe

[David Gifford]

Okay, last solution needed:

go to https://giffmex.org/experiments/goodies.html, edit a tiddler, click the chevron down button. I tried inspecting the page, but there are so many combinations of classes and I don't have a clue what I'm doing.

Can anyone tell me the class(es) that cause the text to be so huge? And what to put in a stylesheet to make it look normal? Compare with clicking the same button in the text field in view mode of https://giffmex.org/experiments/goodies.html#%24%3A%2F.giffmex%2FButtons%2Fmore-tiddler-edit-actions. I want it to look like that.

Thanks in advance for any help. This is going to become part of Stroll.

[Birthe C]

Dave,

Obviously I don't know what I am doing really, but I tried the following in tiddler: $:/.giffmex/Buttons/more-tiddler-edit-actions

<$button class="tc-btn-invisible" popup="$:/SamplePopupState">{{$:/core/images/chevron-down}}</$button>

<$reveal type="popup" state="$:/SamplePopupState" class="tc-tiddler-body tc-drop-down tc-popup-keep">

<$checkbox tiddler="$:/core/ui/EditTemplate/title" tag="$:/tags/EditTemplate"> title</$checkbox><br>
<$checkbox tiddler="$:/core/ui/EditTemplate/tags" tag="$:/tags/EditTemplate"> tags</$checkbox><br>
<$checkbox tiddler="$:/core/ui/EditTemplate/type" tag="$:/tags/EditTemplate"> type</$checkbox><br>
<$checkbox tiddler="$:/core/ui/EditTemplate/fields" tag="$:/tags/EditTemplate"> fields</$checkbox><br>
<$checkbox tiddler="$:/config/TextEditor/EnableToolbar" field="text" checked="yes" unchecked="no" default="no"> toolbar</$checkbox><br>
<$checkbox tiddler="$:/.giffmex/EditTemplate/custom" tag="$:/tags/EditTemplate"> custom</$checkbox>

''Open / close the sidebar:'' <$list filter="[[$:/state/sidebar]get[text]] +[else[yes]!match[no]]" variable="ignore"><$button set="$:/state/sidebar" setTo="no" tooltip={{$:/language/Buttons/HideSideBar/Hint}} aria-label={{$:/language/Buttons/HideSideBar/Caption}} class="tc-btn-invisible">{{$:/core/images/chevron-right}}</$button>
</$list><$list filter="[[$:/state/sidebar]get[text]] +[else[yes]match[no]]" variable="ignore">
<$button set="$:/state/sidebar" setTo="yes" tooltip={{$:/language/Buttons/ShowSideBar/Hint}} aria-label={{$:/language/Buttons/ShowSideBar/Caption}} class="tc-btn-invisible">{{$:/core/images/chevron-left}}</$button>
</$list>

''Click the link below to edit the''<br> [[Custom area|$:/.giffmex/EditTemplate/custom]]

{{$:/core/ui/EditorToolbar/editor-height-dropdown}}

</$reveal>

It is a tricky one!

Birthe

[Mat]

OK, so where you put tc-popup-keep, add another class like so

class="tc-popup-keep xxx"

and then in a stylesheet tiddler put

.xxx * {font-size:14px;}

The * will enforce the size on all text even if there are nested divs or transclusions etc and using "px" sets it to a fixed size whereas "em" is a relative size and this can be problematic when you nest things.

<:-)

[David Gifford]

Hi Birthe and Mat, thank you for both of your options. I went with Birthe's option because it had the added advantage of using native TW classes, which allowed me to delete the stylesheet I created for this.

It is now on Stroll (https://giffmex.org/stroll/stroll.html). I mention it in the Advanced stuff tiddler, and I added a tag pill from which you can download just this feature in case you don't want Stroll but want this. See 'Adding Stroll to your TW' for the tag pill.

--

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/VTrgAfKe9WU/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/640d6ca8-1e9b-4ebd-8584-a7b9899f64b8%40googlegroups.com.