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 <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;
>>>> }
>>>> 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
>>>>>> <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;
>>>>>> }
>>>>>> 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/3b23eeda-f1ca-461c-a021-381af04ae8b9n%40googlegroups.com.
indicator-element.json
Description: application/json
