Help please for indicators in SideBar

[TW Tones]

Folks,

I have a number of projects that could use icons placed in the sidebar, top menu and other places. They would indicate some status such as a green storage icon when the local storage is on and much more. I call these indicators, They may have tooltips or actions on click, with or without modifier keys. 

I have attempted to build a new element tagged $:/tags/SideBarSegment and list-before $:/core/ui/SideBarSegments/tabs

The problem I have for for which I seek help is I am finding it difficult to reduce icons and buttons to a half height and not have unnecessary white space above and below the indicators. Margins, padding tweeks etc... have not succeeded. We may use existing buttons and create new ones, the idea is it provides additional place(s) for which we can display content via a tag, so if I publish an indicator and you do the same they can coexist.

I would hope to publish this to set a de facto standard, say using the tag $:/tags/indicator so we can all add additional and conditional iconised information in the sideBar and elsewhere as desired. 

Can anyone help me build this with custom css to minimise its use of space? Ideally customisable.

Regards

Tones

[Télumire]

So if I understand correctly, you want to be able to give a custom size to your icons/buttons and be able to have them next to each other ?

Try this and tell me if that works :

In the tiddler tagged with $:/tags/SideBarSegment :

\whitespace trim
<span class="indicator">
{{button 1}}
</span>
..etc..
<span class="indicator">
{{button n}}
</span>

In a stylesheet tiddler :

.indicator{

height:20px;

width:20px;

display:inline-block;

position:relative;

}

.indicator button, .indicator button * {

width:100%!important;

height:100%!important;

padding:unset;

margin:unset;

display:inline-block;

position:absolute;

left:0;

top:0;

}

[TW Tones]

Télumire

I just tried this on tiddlywiki.com;

Thanks, we are almost there.

I set the width and height to 15px, look like I wanted then added list-before = $:/core/ui/SideBarSegments/tabs

Once it moves above the tabs there is too much white space above and below

Is there some way to remove or reduce this space top and bottom?

Regards

Tones

[Télumire]

Ok now I understand what you mean … This is because tiddly wiki wrap the content in a <p> tag, which has a margin of 14px. So to fix that, since we can't style an element based on it's content (at least not until the pseudo-class :has is supported) nor give it a class (as far as I know), we need to wrap the indicators in a container and use it to compensate with negative margin.

The code becomes :

\whitespace trim
<div class="indicator-container">
<span class="indicator-item">
{{$:/core/ui/Buttons/edit}}
</span>
..etc..
<span class="indicator-item">
{{$:/core/ui/Buttons/cancel}}
</span>
</div>

And the css becomes

.indicator-container {
display:block;
margin-top: -14px;
margin-bottom: -26px;
line-height:unset;
}

.indicator-item{
height:40px;
width:40px;
display:inline-block;
position:relative;
}

.indicator-item button, .indicator-item button * {

width:100%!important;
height:100%!important;
padding:unset;
margin:unset;
display:inline-block;

left:0;
top:0;
}

[Télumire]

Erratum bis (sorry..) :

.indicator-container {
display: flex;
flex-wrap:wrap;
margin-top: -14px;
margin-bottom: -26px;
--indicator-size:10px;
}

.indicator-item{
height:var(--indicator-size);
width:var(--indicator-size);

display:inline-block;
position:relative;
}

.indicator-item button, .indicator-item button * {

position:absolute;

width:100%!important;
height:100%!important;
padding:unset;
margin:unset;

left:0;
top:0;
}

Should I send further replies by private message to avoid spam ?

Le jeudi 12 août 2021 à 20:02:22 UTC+2, Télumire a écrit :

Erratum : no need for the line-height:unset nor the inline-block for the button and its content :

.indicator-container {
display:block;
margin-top: -14px;
margin-bottom: -26px;
}

.indicator-item{
height:40px;
width:40px;
display:inline-block;
position:relative;
}

.indicator-item button, .indicator-item button * {
width:100%!important;
height:100%!important;
padding:unset;
margin:unset;

[TW Tones]

Télumire,

Hey thanks soo much, that is exactly what I needed.

I have adopted the final css as follows to get smaller icons that the PageControls.

.indicator-container { display:block; margin-top: -15px; margin-bottom: -22px; line-height:unset; } .indicator-item{ height:15px; width:15px; display:inline-block; position:relative; } .indicator-item button, .indicator-item button * { width:100%!important; height:100%!important; padding:unset; margin:unset; display:inline-block; left:0; top:0; }

I will shareback my indicators "bar" macro shortly

Regards

Tones

[TW Tones]

Folks,

I said I would share the result back, and it is attached so far. 

It is largely working very nicely, later I will package a range of indicators with it as I develop them.

However it still has a problem.

• The attached JSON has a few tiddlers, which displays indicators (icons/buttons tagged $:/tags/indicator) just above the sideBar tabs
• It currently only comes with one indicator, an info icon with a tooltip about itself.

Unfortunately there is an artifact, no doubt a clash with the CSS I am using.

eg class="tc-btn-invisible" on the button.

Regards

Tones