[tw5] Re: Help please for indicators in SideBar
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
On Saturday, 14 August 2021 at 18:39:08 UTC+10 TW Tones wrote:
> 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
>
> On Friday, 13 August 2021 at 04:16:44 UTC+10 Télumire wrote:
>
>> 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;
>>>
>> left:0;
>>> top:0;
>>> }
>>>
>>> Le jeudi 12 août 2021 à 20:00:09 UTC+2, Télumire a écrit :
>>>
Ok now I understand what you mean … This is because tiddly wiki wrap
the content in a 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
{{$:/core/ui/Buttons/edit}}
..etc..
{{$:/core/ui/Buttons/cancel}}
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;
}
Le jeudi 12 août 2021 à 08:22:19 UTC+2, TW Tones a écrit :
> 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
>
> [image: Snag_1f281978.png]
>
> Is there some way to remove or reduce this space top and bottom?
>
> Regards
> Tones
>
>
> On Thursday, 12 August 2021 at 12:07:40 UTC+10 Télumire wrote:
>
>> 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
>>
>> {{button 1}}
>>
>> ..etc..
>>
>> {{button n}}
>>
>>
>> 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;
[tw5] Re: Help please for indicators in SideBar
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
On Friday, 13 August 2021 at 04:16:44 UTC+10 Télumire wrote:
> 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;
>>
> left:0;
>> top:0;
>> }
>>
>> Le jeudi 12 août 2021 à 20:00:09 UTC+2, Télumire a écrit :
>>
>>> Ok now I understand what you mean … This is because tiddly wiki wrap the
>>> content in a 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
>>>
>>>
>>> {{$:/core/ui/Buttons/edit}}
>>>
>>> ..etc..
>>>
>>> {{$:/core/ui/Buttons/cancel}}
>>>
>>>
>>>
>>> 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;
>>> }
>>> Le jeudi 12 août 2021 à 08:22:19 UTC+2, TW Tones a écrit :
>>>
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
[image: Snag_1f281978.png]
Is there some way to remove or reduce this space top and bottom?
Regards
Tones
On Thursday, 12 August 2021 at 12:07:40 UTC+10 Télumire wrote:
> 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
>
> {{button 1}}
>
> ..etc..
>
> {{button n}}
>
>
> 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;
> }
> Le jeudi 12 août 2021 à 02:42:42 UTC+2, TW Tones a écrit :
>
>> 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
[tw5] Re: Help please for indicators in SideBar
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;
> left:0;
> top:0;
> }
>
> Le jeudi 12 août 2021 à 20:00:09 UTC+2, Télumire a écrit :
>
>> Ok now I understand what you mean … This is because tiddly wiki wrap the
>> content in a 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
>>
>>
>> {{$:/core/ui/Buttons/edit}}
>>
>> ..etc..
>>
>> {{$:/core/ui/Buttons/cancel}}
>>
>>
>>
>> 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;
>> }
>> Le jeudi 12 août 2021 à 08:22:19 UTC+2, TW Tones a écrit :
>>
>>> 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
>>>
>>> [image: Snag_1f281978.png]
>>>
>>> Is there some way to remove or reduce this space top and bottom?
>>>
>>> Regards
>>> Tones
>>>
>>>
>>> On Thursday, 12 August 2021 at 12:07:40 UTC+10 Télumire wrote:
>>>
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
{{button 1}}
..etc..
{{button n}}
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;
}
Le jeudi 12 août 2021 à 02:42:42 UTC+2, TW Tones a écrit :
> 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
>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this
[tw5] Re: Help please for indicators in SideBar
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;
left:0;
top:0;
}
Le jeudi 12 août 2021 à 20:00:09 UTC+2, Télumire a écrit :
> Ok now I understand what you mean … This is because tiddly wiki wrap the
> content in a 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
>
>
> {{$:/core/ui/Buttons/edit}}
>
> ..etc..
>
> {{$:/core/ui/Buttons/cancel}}
>
>
>
> 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;
> }
> Le jeudi 12 août 2021 à 08:22:19 UTC+2, TW Tones a écrit :
>
>> 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
>>
>> [image: Snag_1f281978.png]
>>
>> Is there some way to remove or reduce this space top and bottom?
>>
>> Regards
>> Tones
>>
>>
>> On Thursday, 12 August 2021 at 12:07:40 UTC+10 Télumire wrote:
>>
>>> 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
>>>
>>> {{button 1}}
>>>
>>> ..etc..
>>>
>>> {{button n}}
>>>
>>>
>>> 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;
>>> }
>>> Le jeudi 12 août 2021 à 02:42:42 UTC+2, TW Tones a écrit :
>>>
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
>>>
--
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 view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/89287f64-cc45-42f1-940d-ff3399e0d7e5n%40googlegroups.com.
[tw5] Re: Help please for indicators in SideBar
Ok now I understand what you mean … This is because tiddly wiki wrap the
content in a 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
{{$:/core/ui/Buttons/edit}}
..etc..
{{$:/core/ui/Buttons/cancel}}
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;
}
Le jeudi 12 août 2021 à 08:22:19 UTC+2, TW Tones a écrit :
> 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
>
> [image: Snag_1f281978.png]
>
> Is there some way to remove or reduce this space top and bottom?
>
> Regards
> Tones
>
>
> On Thursday, 12 August 2021 at 12:07:40 UTC+10 Télumire wrote:
>
>> 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
>>
>> {{button 1}}
>>
>> ..etc..
>>
>> {{button n}}
>>
>>
>> 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;
>> }
>> Le jeudi 12 août 2021 à 02:42:42 UTC+2, TW Tones a écrit :
>>
>>> 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
>>>
>>
--
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 view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/7cffd46e-0ec6-41f3-9c27-8da7a3b8db48n%40googlegroups.com.
[tw5] Re: Help please for indicators in SideBar
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
[image: Snag_1f281978.png]
Is there some way to remove or reduce this space top and bottom?
Regards
Tones
On Thursday, 12 August 2021 at 12:07:40 UTC+10 Télumire wrote:
> 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
>
> {{button 1}}
>
> ..etc..
>
> {{button n}}
>
>
> 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;
> }
> Le jeudi 12 août 2021 à 02:42:42 UTC+2, TW Tones a écrit :
>
>> 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
>>
>
--
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 view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/7e172fe9-7af7-4e6e-a92f-3db619b1a28an%40googlegroups.com.
[tw5] Re: Help please for indicators in SideBar
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
{{button 1}}
..etc..
{{button n}}
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;
}
Le jeudi 12 août 2021 à 02:42:42 UTC+2, TW Tones a écrit :
> 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
>
--
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 view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/37929c2b-0acb-456a-8dfb-5d926937ca3fn%40googlegroups.com.
[tw5] Re: Help please for indicators in SideBar
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
{{button 1}}
..etc..
{{button n}}
In a stylesheet tiddler :
.indicator{ height:50px; width:50px; display:inline-block; }
.indicator button, .indicator button * { width:100%!important;
height:100%!important; }
Le jeudi 12 août 2021 à 02:42:42 UTC+2, TW Tones a écrit :
> 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
>
--
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 view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/ebee9970-24bc-4916-83a9-cf24630e72ean%40googlegroups.com.
