Sorry for the long hiatus, but I've had to be out of town for a few days
(and AFK), plus I didn't want to show my face around these parts again
until I'd made some substantial progress on this 'project.'
So here we go!
I worked, cussed, fooled, thought, prayed and finagled until I *FINALLY*
figured out one *(hacky, cludgy, inelegant)* way to do what I wanted to...
I copied the
$:/core/ui/TopBar/menu
Shadow Tiddler and made the following additions:
*Original:*
<$reveal state="$:/state/sidebar" type="nomatch" text="no">
<$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}}
*Inserted:*
<$transclude tiddler="$:/_SBBG1"/>
*Original:*
</$button>
</$reveal>
<$reveal state="$:/state/sidebar" type="match" text="no">
<$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}}
*Inserted:*
<$transclude tiddler="$:/_SBBG2"/>
*Original:*
</$button>
</$reveal>
What this does is call in
*$:/_SBBG1*
<style>.tc-sidebar-scrollable { background-color: rgba(0,0,0,0.5); }</style>
(which contains the above style for the 'Black' background (@ 50% opacity)
that you'll see when the TW is first loaded) whenever the SideBar is
displayed, and;
*$:/_SBBG2*
<style>.tc-sidebar-scrollable { background-color: rgba(0,0,0,0.0); }</style>
(a 'White' background, but with its Alpha Channel *(the last number in the
rgba)* also set to zero, essentially making it transparent) whenever the
SideBar is hidden.
Success! :)
====================
Now of course, me being me, I couldn't be satisfied with that - I had to
carry it further and come up with yet another idea that I wasn't capable of
bringing to fruition :Þ
Until now.
*well, almost, anyway…*
*Let's have Multiple Colors for the SideBar Shade*!*
(*with a nod to the 'Notification Shade' on Android devices :Þ)
Knowing that my users will probably want to change things up from time to
time (heck, I will, too!), I started thinking about how I could make it
possible for them to change the color of the SideBar Shade.
I attempted several different methods, but none of them worked, and then I
stumbled upon some code for a totally unrelated project authored by
*Matabele* (if I remember correctly), which used $radio buttons to make a
choice and send the value of that choice to a macro or tiddler, etc.
Well, after another two days of tinkering I figured out how to do this:
<http://i.imgur.com/9dI5amC.jpg>
You can see it in action on this page at TiddlySpot
<http://zaphod2016.tiddlyspot.com/>.
The HTML for the above is terribly long (if I actually use it, I'll create
and use CSS classes which will greatly shorten the code), so I'll just
extract one of the cells for exhibit here:
<div style=" flex-grow: 1; background-color: silver;">
<div style="background-color: red; color: white; text-align: center; font-
weight: bold;">Opacity : 50%</div>
<$radio tiddler="$:/_SBBG1" field="text" value="<style>.tc-sidebar-scrollable
{ background-color: rgba(0,0,0,0.5); }</style>">''@@color:black;Black
(default)@@''</$radio><br/>
<$radio tiddler="$:/_SBBG1" field="text" value="<style>.tc-sidebar-scrollable
{ background-color: rgba(255,0,0,0.5); }</style>
">''@@color:red;Red@@''</$radio><br/>
<$radio tiddler="$:/_SBBG1" field="text" value="<style>.tc-sidebar-scrollable
{ background-color: rgba(255,255,255,0.5); }</style>
">''@@color:white;White@@''</$radio><br/>
<$radio tiddler="$:/_SBBG1" field="text" value="<style>.tc-sidebar-scrollable
{ background-color: rgba(0,255,0,0.5); }</style>
">''@@color:green;Green@@''</$radio><br/>
<$radio tiddler="$:/_SBBG1" field="text" value="<style>.tc-sidebar-scrollable
{ background-color: rgba(0,0,255,0.5); }</style>
">''@@color:blue;Blue@@''</$radio><br/>
<$radio tiddler="$:/_SBBG1" field="text" value="<style>.tc-sidebar-scrollable
{ background-color: rgba(255,120,0,0.5); }</style>
">''@@color:orange;Orange@@''</$radio><br/>
<$radio tiddler="$:/_SBBG1" field="text" value="<style>.tc-sidebar-scrollable
{ background-color: rgba(255,255,0,0.5); }</style>
">''@@color:yellow;Yellow@@''</$radio><br/>
<$radio tiddler="$:/_SBBG1" field="text" value="<style>.tc-sidebar-scrollable
{ background-color: rgba(138,43,236,0.5); }</style>
">''@@color:purple;Purple@@''</$radio><br/>
</div>
Basically, I'm using one $radio button for each color, and immediately
sending that to the *$:/_SBBG1* tiddler.
I'm sure some of you know how to concatenate strings and could clean up the
above mess to where it would be just one set of $radio checkboxes for the
color, and then one for the opacity, with the result then sent to our
*$:/_SBBG1*.
I couldn't figure out which mechanism to use, nor the syntax to do it. I
know it would be something like this:
"<style>.tc-sidebar-scrollable { background-color: rgba(" + *valueof$radio1*
+ *valueof$radio2* + "); }</style>"
I'd really like to create a tab within the ControlPanel to house this (like
some do with Theme Tweaks) and either
- use a set of $radio buttons (better than the above, hopefully :P)
- or (optimally) if there were a color-picker that could configure and
output *rgba* instead of just standard colors...
Any ideas?
--Zaphod
--
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@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/64e9f056-a1bd-4189-a1cf-fea4b93960e8%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
