[TW5] Hiding/Showing Background in SideBar

[Zaphod Beeblebrox]

Having 90% solved my background image problem (I abandoned the idea of having the background change when a tiddler is opened...), I'm back with another small dilemma (this one much more minor, though :-) )

As can be guessed, I have begun using background images in my TW.

With them, however, comes a slight problem; the solid color background of the tiddler-frame in the Story River covers up the page background completely, so the text, etc. of the tiddler remains readable, but the transparency of the Sidebar causes its links to be unreadable with some lighter-colored backgrounds.  I (after much tinkering and searching) found .tc-sidebar-scrollable and added a 70% opaque solid-color background image to it:

.tc-sidebar-scrollable { background-image: url("https://s5.postimg.org/lyaazi9tj/Side_Bar_BGBlue070.png"); } /* SideBar BG Blue 70% */

It looked beautiful, and created the exact effect I was looking for, making the links visible yet still allowing the page background to remain visible enough.  (I made several of them, in different colors.)

Edit (already!): Discarded the use of external graphics in favor of a simple rgba background-color applied to either .tc-sidebar-scrollable

.tc-sidebar-scrollable { background-color: rgba(0,0,255,0.6); } /* SideBar BG Blue 60% */

or .tc-sidebar-header

.tc-sidebar-header { background-color: rgba(0,0,255,0.6); } /* SideBar BG Blue 60% */

(Thank You to Eric Shulman for providing the idea and syntax in This Thread :-) )

The problem: This (external image or background-color) has a caveat of its own: whenever I hide the SideBar, the background image remains and looks pretty bad...

How would I address this in the code?

I'm pretty sure it would take a conditional statement - I know there is a "yes" or "no" value attached to the SideBar, so I'd need to only have the background show when the value was "yes" (I see from watching it in the Dev Tools in Firefox that there's also a hidden="true" applied to tc-tiddler-header whenever the SideBar is collapsed).

I don't know the syntax, but it would be something like

.tc-sidebar-header >(when the value is "yes" or "visible") { background-color: rgba(0,0,255,0.6); }


Help, somebody :-)

--Zaphod

[Mark S.]

Do you have an example site that we could look at?

When I try your sidebar style, and then hide the sidebar, the background color goes away. So .... that's all right?

Good luck!
Mark

[Zaphod Beeblebrox]

On Friday, July 29, 2016 at 12:46:19 PM UTC-4, Mark S. wrote:

Do you have an example site that we could look at?

 

No sir, I don't have anything publicly available - Here is a .rar file with stock TW's (last three versions) with only my current Stylesheet added, that you can look at to see the broken functioning: http://www115.zippyshare.com/v/vSyBbM8A/file.html

 

When I try your sidebar style, and then hide the sidebar, the background color goes away. So .... that's all right?

Well, I just tried it with an unmodified copy of 5.1.13, and it does disappear when using the .tc-sidebar-header, but still not with the .tc-sidebar-scrollable.

I'd really rather use scrollable, though, as it looks better to me aesthetically, bumping up against the edge of the tiddlers.

But, this at least tells me that something else I have in the Stylesheet might be interfering with it...

I'll go do some more experimenting - Sorry to take up your time :blush:

--Zaphod

[Zaphod Beeblebrox]

Hmm...  I've just had a revelation (or would that be an epiphany? :-P ) - The .tc-sidebar-scrollable is never going to disappear - It's the base on which the rest of the SideBar sits, correct?

Duhhh!

Okay, so (after I figure out what in the Stylesheet is causing the .tc-sidebar-header not to disappear) I wonder if there's any way to make my background extend all the way to the top of the viewport and also the right-hand edge of the tiddlers (the same as the scrollable area)?

Whew!

--Zaphod

[Zaphod Beeblebrox]

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:

You can see it in action on this page at TiddlySpot.

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