Skip to first unread message
barro...@gmail.com
Mar 10, 2019, 1:40:51 AM3/10/19
to TiddlyWiki
Created for a kids interactive (novel) adventure story so bear with the silliness :)
A tiddler for a "graphical" ToC, tagged to display in the right sidebar.
This is done with div's, borders, reveals and list filter/display. I couldn't use anything fancy like border/background colors, images, transparencies or gradients since my system/browser theme negates such things. Screenshots of just the right side bar/tabs window.
The first image shows the ToC default appearance-- closed till clicked on. Both "plaques" and the "handle" are clickable and have mouse hover over tooltips identifying what they do. The mouse pointer isn't showing in the screenshot but you can see the tooltip for the mouse hover over right under the "handle".
The second image is the ToC opened, showing the actual ToC. It's 2 images joined into one since the graphic part of the ToC scrolls off the page and can't be shown in a single screenshot.
Another mouse click on a "plaque" or the "handle" makes the ToC collaspe/close back to the first screenshot image.
Feel free to use, I will be posting the code and the tiddler with the code in a followup post-- going to see if I can make the CSS embedded into the tiddler with a <style> section. This would be for users who don't wish to or haven't learned how to add custom stylesheets yet.
A tiddler for a "graphical" ToC, tagged to display in the right sidebar.
This is done with div's, borders, reveals and list filter/display. I couldn't use anything fancy like border/background colors, images, transparencies or gradients since my system/browser theme negates such things. Screenshots of just the right side bar/tabs window.
The first image shows the ToC default appearance-- closed till clicked on. Both "plaques" and the "handle" are clickable and have mouse hover over tooltips identifying what they do. The mouse pointer isn't showing in the screenshot but you can see the tooltip for the mouse hover over right under the "handle".
Feel free to use, I will be posting the code and the tiddler with the code in a followup post-- going to see if I can make the CSS embedded into the tiddler with a <style> section. This would be for users who don't wish to or haven't learned how to add custom stylesheets yet.
Joshua Fontany
Mar 10, 2019, 3:08:33 AM3/10/19
to TiddlyWiki
That is awesome. Really well executed.
Best,
Joshua F
Best,
Joshua F
Mohammad
Mar 10, 2019, 5:35:13 AM3/10/19
to TiddlyWiki
Wonderful barro!
Yes, please share the code with community!
--Mohammad
--Mohammad
barro...@gmail.com
Mar 11, 2019, 4:03:20 AM3/11/19
to TiddlyWiki
My apologies for the delay, but I incorporated the css into an in-tiddler style section so everything can be in one tiddler (or you can separate and put the style section into your stylesheets). Code below as well as an attached .tid. PLEASE NOTE: I work with an inversed system theme (white text, black background) and 150% screen dpi, cannot work with most of TW\s themes, so I do not know how this will look on everyone else's TW's.
<style>
/* file folder top borders*/
/* centered header */
.filefolderheader {
display:inline-block;
font-family: "Courier New", "Lucida Console", Monaco, "DejaVu Sans Mono", monospace;
font-variant:small-caps;
font-size:150%;
text-align:center;
margin: 0px auto;
padding:10px;
line-height:initial;
border: double 8px;
border-radius:2px;
}
/* filefolder non idented line */
.filefolderline {
text-align:left;
margin: 0px 0px 0px;
padding: 4px 12px 4px 18px;
border-top:solid 3px;
border-left:solid 1px;
border-right:solid 1px;
border-radius: 10px 10px 0px 0px;}
/* filefolder idented line */
.filefolderindented {
text-align:left;
margin:0px 0px 0px 10px;
padding: 4px 12px 4px 18px;
border-top:solid 2px;
border-left:solid 1px;
border-right:solid 1px;
border-radius: 10px 10px 0px 0px;}
</style>
<$reveal type="match" state="$:/state/uiufilecab" text="show">
<!-- TOP hidden--><div style="margin:0px; padding:10px; border-style: none outset none inset; border-color:; border-width:3px; text-align:center;"></div></$reveal>
<!--FRONT upper visible --><div style="margin:0px; padding:10px; border-style: solid; border-width:2px 3px; text-align:center;"><$button tooltip="click to close drawer" set="$:/state/uiufilecab" setTo="hide" class='tc-btn-invisible tc-tiddlylink'><p class="filefolderheader">File Cabinet ToC</p></$button></div>
<$reveal type="nomatch" state="$:/state/uiufilecab" text="show">
<!--FRONT lower 1 visible --><div style="margin:1px 0px 0px; padding: 25px 10px 10px; border-style: double solid none; border-width:3px; border-radius:3px 3px 0px 0px; text-align:center;"><$button tooltip="click to open drawer" set="$:/state/uiufilecab" setTo="show" class='tc-btn-invisible tc-tiddlylink'><p class="filefolderheader">Drawer 1</p></$button></div>
<!--FRONT lower 2 visible --><div style="margin:0px; padding:3em 0 4em 0; border-style: dotted solid solid; border-width:0px 3px 1px; border-radius:0px 0px 3px 3px; text-align:center;">
<!--HANDLE visble--><div style="margin:0px; padding:0px;">
<$button tooltip="click to open drawer" set="$:/state/uiufilecab" setTo="show" class='tc-btn-invisible tc-tiddlylink'><p style="width:8em; margin:0px; padding:0px; border-style:outset solid; border-width:1px 3px; border-radius:3px;"> </p></$button></div></div>
</$reveal>
<$reveal type="match" state="$:/state/uiufilecab" text="show">
<!--INTERIOR hidden--><div style="margin:0px; padding:10px 8px 0px; border-style: none double none; border-width:8px;">
<div style="margin:0px 0px 0px; padding:10px; border-style: none ridge none; border-width:6px;">
<$list filter="[tag[*your tagname]]">
<div class="filefolderline">
<$link><$view field="title"/></$link><$view field="caption"/>
<$list filter="[all[current]tagging[]]">
<div class="filefolderindented">
<$link to={{!!title}}><$view field="title"/></$link><$view field="caption"/>
</div>
</$list>
</div>
</$list>
</div></div>
<!--FRONT lower 1 hidden --><div style="margin:1px 0px 0px; padding: 25px 10px 10px; border-style: double solid none; border-width:3px; border-radius:3px 3px 0px 0px; text-align:center;"><$button tooltip="click to close drawer" set="$:/state/uiufilecab" setTo="hide" class='tc-btn-invisible tc-tiddlylink'><p class="filefolderheader">Drawer 1</p></$button></div>
<!--FRONT lower 2 hidden --><div style="margin:0px; padding:3em 0em 4em 0em; border-style: dotted solid solid; border-width:0px 3px 1px; border-radius:0px 0px 3px 3px; text-align:center;">
<!--HANDLE hidden --><div style="display: table; width:10em; margin:0 auto; padding:0px; border:dashed 0px;">
<div style="display: table-row; height:.5em;">
<div style="display: table-cell; width:20%; margin:0px; padding:0px; border-style: dotted outset none inset; border-width: 1px 2px 0px 3px;"></div>
<div style="display: table-cell; width:50%; margin:0px; padding:0px; border-style: none none outset; border-width: 0px 0px 2px 0px"></div>
<div style="display: table-cell; width:20%; margin:0px; padding:0px; border-style: dotted outset none inset; border-width: 1px 3px 0px 2px;"></div>
</div></div>
<div style="margin:0px; padding:0px;">
<$button tooltip="click to close drawer" set="$:/state/uiufilecab" setTo="hide" class='tc-btn-invisible tc-tiddlylink'><p style="width:10em; margin:0px; padding:0px; border-style:outset solid; border-width:1px 3px; border-radius:0px 0px 3px 3px;"> </p></$button></div>
</div>
</$reveal>
/* file folder top borders*/
/* centered header */
.filefolderheader {
display:inline-block;
font-family: "Courier New", "Lucida Console", Monaco, "DejaVu Sans Mono", monospace;
font-variant:small-caps;
font-size:150%;
text-align:center;
margin: 0px auto;
padding:10px;
line-height:initial;
border: double 8px;
border-radius:2px;
}
/* filefolder non idented line */
.filefolderline {
text-align:left;
margin: 0px 0px 0px;
padding: 4px 12px 4px 18px;
border-top:solid 3px;
border-left:solid 1px;
border-right:solid 1px;
border-radius: 10px 10px 0px 0px;}
/* filefolder idented line */
.filefolderindented {
text-align:left;
margin:0px 0px 0px 10px;
padding: 4px 12px 4px 18px;
border-top:solid 2px;
border-left:solid 1px;
border-right:solid 1px;
border-radius: 10px 10px 0px 0px;}
</style>
<$reveal type="match" state="$:/state/uiufilecab" text="show">
<!-- TOP hidden--><div style="margin:0px; padding:10px; border-style: none outset none inset; border-color:; border-width:3px; text-align:center;"></div></$reveal>
<!--FRONT upper visible --><div style="margin:0px; padding:10px; border-style: solid; border-width:2px 3px; text-align:center;"><$button tooltip="click to close drawer" set="$:/state/uiufilecab" setTo="hide" class='tc-btn-invisible tc-tiddlylink'><p class="filefolderheader">File Cabinet ToC</p></$button></div>
<$reveal type="nomatch" state="$:/state/uiufilecab" text="show">
<!--FRONT lower 1 visible --><div style="margin:1px 0px 0px; padding: 25px 10px 10px; border-style: double solid none; border-width:3px; border-radius:3px 3px 0px 0px; text-align:center;"><$button tooltip="click to open drawer" set="$:/state/uiufilecab" setTo="show" class='tc-btn-invisible tc-tiddlylink'><p class="filefolderheader">Drawer 1</p></$button></div>
<!--FRONT lower 2 visible --><div style="margin:0px; padding:3em 0 4em 0; border-style: dotted solid solid; border-width:0px 3px 1px; border-radius:0px 0px 3px 3px; text-align:center;">
<!--HANDLE visble--><div style="margin:0px; padding:0px;">
<$button tooltip="click to open drawer" set="$:/state/uiufilecab" setTo="show" class='tc-btn-invisible tc-tiddlylink'><p style="width:8em; margin:0px; padding:0px; border-style:outset solid; border-width:1px 3px; border-radius:3px;"> </p></$button></div></div>
</$reveal>
<$reveal type="match" state="$:/state/uiufilecab" text="show">
<!--INTERIOR hidden--><div style="margin:0px; padding:10px 8px 0px; border-style: none double none; border-width:8px;">
<div style="margin:0px 0px 0px; padding:10px; border-style: none ridge none; border-width:6px;">
<$list filter="[tag[*your tagname]]">
<div class="filefolderline">
<$link><$view field="title"/></$link><$view field="caption"/>
<$list filter="[all[current]tagging[]]">
<div class="filefolderindented">
<$link to={{!!title}}><$view field="title"/></$link><$view field="caption"/>
</div>
</$list>
</div>
</$list>
</div></div>
<!--FRONT lower 1 hidden --><div style="margin:1px 0px 0px; padding: 25px 10px 10px; border-style: double solid none; border-width:3px; border-radius:3px 3px 0px 0px; text-align:center;"><$button tooltip="click to close drawer" set="$:/state/uiufilecab" setTo="hide" class='tc-btn-invisible tc-tiddlylink'><p class="filefolderheader">Drawer 1</p></$button></div>
<!--FRONT lower 2 hidden --><div style="margin:0px; padding:3em 0em 4em 0em; border-style: dotted solid solid; border-width:0px 3px 1px; border-radius:0px 0px 3px 3px; text-align:center;">
<!--HANDLE hidden --><div style="display: table; width:10em; margin:0 auto; padding:0px; border:dashed 0px;">
<div style="display: table-row; height:.5em;">
<div style="display: table-cell; width:20%; margin:0px; padding:0px; border-style: dotted outset none inset; border-width: 1px 2px 0px 3px;"></div>
<div style="display: table-cell; width:50%; margin:0px; padding:0px; border-style: none none outset; border-width: 0px 0px 2px 0px"></div>
<div style="display: table-cell; width:20%; margin:0px; padding:0px; border-style: dotted outset none inset; border-width: 1px 3px 0px 2px;"></div>
</div></div>
<div style="margin:0px; padding:0px;">
<$button tooltip="click to close drawer" set="$:/state/uiufilecab" setTo="hide" class='tc-btn-invisible tc-tiddlylink'><p style="width:10em; margin:0px; padding:0px; border-style:outset solid; border-width:1px 3px; border-radius:0px 0px 3px 3px;"> </p></$button></div>
</div>
</$reveal>
Reply all
Reply to author
Forward
0 new messages