diff --git a/core/ui/Palettes/Preview/Helpers.tid b/core/ui/Palettes/Preview/Helpers.tid new file mode 100644 index 000000000..428857af1 --- /dev/null +++ b/core/ui/Palettes/Preview/Helpers.tid @@ -0,0 +1,49 @@ +title: $:/core/ui/Palettes/Preview/Helpers +tags: $:/tags/Preview/Helpers + +\whitespace trim + +\procedure palette-preview-component-list(tag) +<$list filter="[all[shadows+tiddlers]tag!has[draft.of]]" variable="componentTitle"> + <$transclude $tiddler=<> title=<>/> +</$list> +\end palette-preview-component-list + +\procedure tab-set(tabTitles,colourPrefix:"") + <div class="tc-palette-preview-thumbnail-tab-set"> + <div class="tc-palette-preview-thumbnail-tab-buttons"> + <$list filter="[enlist<tabTitles>]" variable="tabTitle" counter="tabIndex"> + <%if [<tabIndex>match[1]] %> + <span + class="tc-palette-preview-thumbnail-tab-button" + style.border-color={{{ [<colourPrefix>addsuffix[tab-border-selected]] :map[function[colour],<currentTiddler>] }}} + style.color={{{ [<colourPrefix>addsuffix[tab-foreground-selected]] :map[function[colour],<currentTiddler>] }}} + style.background-color={{{ [<colourPrefix>addsuffix[tab-background-selected]] :map[function[colour],<currentTiddler>] }}} + > + <$text text=<<tabTitle>>/> + </span> + <%else%> + <span + class="tc-palette-preview-thumbnail-tab-button" + style.border-color={{{ [<colourPrefix>addsuffix[tab-border]] :map[function[colour],<currentTiddler>] }}} + style.color={{{ [<colourPrefix>addsuffix[tab-foreground]] :map[function[colour],<currentTiddler>] }}} + style.background-color={{{ [<colourPrefix>addsuffix[tab-background]] :map[function[colour],<currentTiddler>] }}} + > + <$text text=<<tabTitle>>/> + </span> + <%endif%> + </$list> + </div> + <div + class="tc-palette-preview-thumbnail-tab-divider" + style.border-color={{{ [<colourPrefix>addsuffix[tab-divider]] :map[function[colour],<currentTiddler>] }}} + > + </div> + </div> +\end tab-set + +\procedure link(text) +<span class="tc-palette-preview-thumbnail-tiddler-link" style.color=<<colour primary>>> + <$text text=<<text>>/> +</span> +\end link diff --git a/core/ui/Palettes/Preview/SideBar/Tabs.tid b/core/ui/Palettes/Preview/SideBar/Tabs.tid new file mode 100644 index 000000000..8ce79471b --- /dev/null +++ b/core/ui/Palettes/Preview/SideBar/Tabs.tid @@ -0,0 +1,18 @@ +title: $:/core/ui/Palettes/Preview/Sidebar/Tabs +tags: $:/tags/Preview/SideBar + +\whitespace trim + +\procedure recent-links() +HelloThere Community Portal GettingStarted Development Download Filters Palettes Plugins Macros Templates Themes Stylesheets SystemTiddlers +\end recent-links + +<<tab-set "Magna Placerat Ligula Imperdiet" "sidebar-">> + +<div class="tc-palette-preview-thumbnail-sidebar-list"> + <$list filter="[enlist<recent-links>]"> + <div> + <$transclude $variable="link" text=<<currentTiddler>>/> + </div> + </$list> +</div> \ No newline at end of file diff --git a/core/ui/Palettes/Preview/Tiddler/Body.tid b/core/ui/Palettes/Preview/Tiddler/Body.tid index 5b7b72cf3..a1fbbfee1 100644 --- a/core/ui/Palettes/Preview/Tiddler/Body.tid +++ b/core/ui/Palettes/Preview/Tiddler/Body.tid @@ -3,40 +3,13 @@ tags: $:/tags/Preview/Tiddler \whitespace trim -\procedure link(text) -<span class="tc-palette-preview-thumbnail-tiddler-body" style.color=<<colour primary>>> - <$text text=<<text>>/> -</span> -\end link - -\procedure tab-button(text) -<span class="tc-palette-preview-thumbnail-tab-button" style.border-color=<<colour tab-border>> style.color=<<colour tab-foreground>> style.background-color=<<colour tab-background>>> - <$text text=<<text>>/> -</span> -\end tab-button - <div class="tc-palette-preview-thumbnail-tiddler-body" style.color=<<colour foreground>>> <%if [<title>match[HelloThere]] %> Lorem ipsum dolor sit amet, <<link "consectetur adipiscing elit">>. Cras non arcu ultricies, egestas odio tempus, vestibulum ipsum. Praesent diam lorem, elementum in venenatis eget, tincidunt quis lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam efficitur velit tortor, sit amet tristique felis viverra sit amet. <<link "Nullam posuere facilisis purus sed">> consectetur. Integer vel elit euismod, posuere ligula et, dictum tellus. Donec in odio diam. Sed metus magna, placerat at ligula et, imperdiet sagittis ex. <%else%> Lorem ipsum dolor sit amet, consectetur adipiscing elit. - <div class="tc-palette-preview-thumbnail-tab-set"> - <div class="tc-palette-preview-thumbnail-tab-buttons"> - <span class="tc-palette-preview-thumbnail-tab-button" style.border-color=<<colour tab-border-selected>> style.color=<<colour tab-foreground-selected>> style.background-color=<<colour tab-background-selected>>> - Sed - </span> - <<tab-button Metus>> - <<tab-button Magna>> - <<tab-button Placerat>> - <<tab-button Ligula>> - <<tab-button Imperdiet>> - </div> - <div class="tc-palette-preview-thumbnail-tab-divider" style.border-color=<<colour tab-divider>>> - </div> - <div class="tc-palette-preview-thumbnail-tab-content"> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non arcu ultricies, egestas odio tempus, vestibulum ipsum. Praesent diam lorem, elementum in venenatis eget, tincidunt quis lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. - </div> - </div> + <<tab-set "Sed Metus Magna Placerat Ligula Imperdiet">> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non arcu ultricies, egestas odio tempus, vestibulum ipsum. Praesent diam lorem, elementum in venenatis eget, tincidunt quis lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. <%endif%> </div> diff --git a/core/wiki/currpalettepreview.tid b/core/wiki/currpalettepreview.tid index a81426e1b..6fb3c071c 100644 --- a/core/wiki/currpalettepreview.tid +++ b/core/wiki/currpalettepreview.tid @@ -2,11 +2,7 @@ title: $:/snippets/currpalettepreview \whitespace trim -\procedure palette-preview-component-list(tag) -<$list filter="[all[shadows+tiddlers]tag<tag>!has[draft.of]]" variable="componentTitle"> - <$transclude $tiddler=<<componentTitle>> title=<<title>>/> -</$list> -\end palette-preview-component-list +\import [all[shadows+tiddlers]tag[$:/tags/Preview/Helpers]!is[draft]sort[title]] <!-- currentTiddler is the palette to use --> <$palette.preview paletteTitle=<<currentTiddler>>> diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid index 1abf1e91f..7753c61cd 100644 --- a/themes/tiddlywiki/vanilla/base.tid +++ b/themes/tiddlywiki/vanilla/base.tid @@ -2944,10 +2944,15 @@ input.tc-palette-manager-colour-input { } .tc-palette-preview-thumbnail-tab-buttons { - font-size: 0.85em; + font-size: 0.55em; padding-top: 2em; } +.tc-palette-preview-thumbnail-sidebar .tc-palette-preview-thumbnail-tab-buttons { + font-size: 0.07em; +} + + .tc-palette-preview-thumbnail-tab-button { display: inline-block; padding: 1px 1px 1px 1px; @@ -2970,10 +2975,12 @@ input.tc-palette-manager-colour-input { .tc-palette-preview-thumbnail-tab-divider { border-top-width: 0.5px; border-top-style: solid; + margin-bottom: 3px; } -.tc-palette-preview-thumbnail-tab-content { - margin-top: 3px; +.tc-palette-preview-thumbnail-sidebar-list { + font-size: 0.10em; + line-height: 1.5; } .tc-palette-preview-thumbnail-alert {