[TW5] Page-control-button initiating dropdown menu

[The Bo]

Hey,

I was thinking about a page-control-button which is acting like the new editor-toolbar-buttons with a dropdown menu. (e.g. $:/core/ui/EditorToolbar/stamp).
My idea was to have a select field in the dropdown menu to change the resolution of the wiki.

My first attempts showed that the page-control-buttons work different than the editor-toolbar-buttons.
Is it possible to build such a "dropdown button"?

Regards,
The BO

[Jeremy Ruston]

Hi The BO

The “storyview” dropdown is a good example of a page control button with a dropdown that you can use to start from:

https://github.com/Jermolene/TiddlyWiki5/blob/master/core/ui/PageControls/storyview.tid

Best wishes

Jeremy.

Regards,
The BO

--
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 post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/233d85af-b9c4-4e84-847f-cc9667ee3229%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[The Bo]

Hi Jeremy,

very good hint. Thank you very much!

Regards,
The Bo

[The Bo]

My result so far for a resolution-button in the page-controls.
The stylesheet includes  a "low" "normal" and "high" resolution-template.

The Button: (tagged $:/tags/PageControls)

<span class="tc-popup-keep">
<$button popup=<<qualify "$:/state/auflösung/popup">> tooltip={{$:/language/Buttons/Resolution/Hint}} aria-label={{$:/language/Buttons/Resolution/Caption}} class=<<tv-config-toolbar-class>> selectedClass="tc-selected">
{{$:/thebo/buttons/Resolution}}
</$button>
</span>
<$reveal state=<<qualify "$:/state/auflösung/popup">> type="popup" position="below" animate="yes">
<div class="tc-drop-down">
''Auflösung:''
<$linkcatcher to="$:/state/auflösung">
<$list filter="[source[res]sortby[niedrig normal hoch]]" variable="res">
<$link to=<<res>>>
<span class="tc-drop-down-bullet">
<$reveal type="match" state="$:/state/auflösung" text=<<res>>>
&bull;
</$reveal>
<$reveal type="nomatch" state="$:/state/auflösung" text=<<res>>>
&nbsp;
</$reveal>
</span>
<$text text=<<res>>/></$link>
</$list>
</$linkcatcher>
</div>
</$reveal>

The Stylesheet: (tagged $:/tags/Stylesheet)

\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline html

<$reveal type="match" state="$:/state/auflösung" text="niedrig">
body.tc-body {
    font-size: 13px;
    line-height: 20px;
}
.tc-tiddler-frame .tc-tiddler-body {
        font-size: 12px;
}
.tc-tiddler-frame {
        width: 530px;
}
.tc-story-river {
        width: 530px;
}
.tc-sidebar-scrollable {
       left: 590px;
}

</$reveal>

<$reveal type="match" state="$:/state/auflösung" text="normal">
</$reveal>

<$reveal type="match" state="$:/state/auflösung" text="hoch">
body.tc-body {
    font-size: 20px;
    line-height: 35px;
}
.tc-tiddler-frame .tc-tiddler-body {
        font-size: 18px;
}
.tc-tiddler-frame {
        width: 800px;
}
.tc-story-river {
        width: 880px;
}
.tc-sidebar-scrollable {
       left: 880px;
}
</$reveal>