How to create a viewtemplate to float the TheBrain (echarts) to the right of tiddler text field using Shiraz/flexgrid/autolayout-with-image

, ,
#41

@twMat currently the button is seen in all tiddlers, how to use filter to avoid this and where to put the filter code.

#42

hehe, you’re getting deeper into the rabbit hole

OK, so if you only want it on some tiddlers, then you must enclose all of the content in the viewtemplate in a “condition” like so:

<$list filter="""YOUR FILTER TO GET THE TIDDLERS YOU WANT""">

all the stuff
</$list>
1 Like
#43

4 posts were split to a new topic: Triggering reveal widget with action widgets

#44

@twMat One thing I noticed now is that, the reveal widget of all tiddler gets triggered when when I click on the reveal button of one tiddler. Is there any way to avoid this behavior ?

#45

instead of using state="SomeTiddler" use state=<<qualify "SomeTiddler">>
(see https://tiddlywiki.com/#qualify%20Macro)

The <<qualify>> macro automatically adds a unique “magic number” to the end of the state tiddler title. The number is based on the location in the “widget tree”, so it will be different for each tiddler in which the $reveal occurs.

-e

Triggering reveal widget with action widgets
Triggering reveal widget with action widgets
#46

Thank you @EricShulman for helping . I tried this.

Here is the code I used.

<$reveal type="nomatch" state=<<qualify "$:/state/SampleReveal2">> text="show">
<$button set=<<qualify "$:/state/SampleReveal2">> setTo="show" class="mybutton">
{{$:/core/images/fold-button}}</$button>
</$reveal>

<$reveal type="match" state=<<qualify "$:/state/SampleReveal2">> text="show">
<$button set=<<qualify "$:/state/SampleReveal2">> setTo="hide" class="mybutton">
{{$:/core/images/unfold-button}}
</$button>
<$list filter="[all[current]!is[system]!is[shadow]!tag[$:/tags/SideBar]!tag[Journal]!tag[$:/tags/ViewTemplate]!tag[$:/tags/Stylesheet]!tag[tweaks]!TheBrain[no]has[page-cover]]">
<div class="rightside">

{{||Bottom Tabs for viewtemplate - without folding}}
</div>

<style>
[data-tiddler-title='{{!!title}}'] .tc-tiddler-body {
  border:1px solid transparent;
  width:50%;
}
[data-tiddler-title='{{!!title}}'] .rightside {
  border:1px solid transparent;
  width:50%;
  position: absolute;
  right:0;
  margin-top: -35px;
}
</style>
</$list>
</$reveal>

<style>
.mybutton {float:right}
.mybutton {margin-top: -65px}
</style>

I had to use state=<<qualify "SomeTiddler">> and set=<<qualify "SomeTiddler">> for it to work. Now reveal widget of each tiddler behave independently.

But one problem is that the solution given by Saq to trigger reveal widget using keyboard shortcut here is not working now.

Triggering reveal widget with action widgets
#47

Edit: never mind the following.

You’re assigning the same state tiddlers. These tiddlers are intended to be “made up” by the user (i.e you) so you can use any tiddler to store the states. In other words, use two different tiddlers :slight_smile:

#48 
<$reveal type="nomatch" state=<<qualify "$:/state/SampleReveal1">> text="show">
<$button set=<<qualify "$:/state/SampleReveal1">> setTo="show" class="mybutton">
{{$:/core/images/fold-button}}</$button>
</$reveal>

<$reveal type="match" state=<<qualify "$:/state/SampleReveal2">> text="show">
<$button set=<<qualify "$:/state/SampleReveal2">> setTo="hide" class="mybutton">
{{$:/core/images/unfold-button}}
</$button>
<$list filter="[all[current]!is[system]!is[shadow]!tag[$:/tags/SideBar]!tag[Journal]!tag[$:/tags/ViewTemplate]!tag[$:/tags/Stylesheet]!tag[tweaks]!TheBrain[no]has[page-cover]]">
<div class="rightside">

{{||Bottom Tabs for viewtemplate - without folding}}
</div>

<style>
[data-tiddler-title='{{!!title}}'] .tc-tiddler-body {
  border:1px solid transparent;
  width:50%;
}
[data-tiddler-title='{{!!title}}'] .rightside {
  border:1px solid transparent;
  width:50%;
  position: absolute;
  right:0;
  margin-top: -35px;
}
</style>
</$list>
</$reveal>

<style>
.mybutton {float:right}
.mybutton {margin-top: -65px}
</style>

I made two separate state tiddlers, it’s not working. When I was using the same state tiddlers, it was working - only problem was that the keyboard shortcut wasn’t working

#49

Oh, wait, sorry, my previous claim was not correct. For one “reveal construct” the state should be the same for all parts. It is only if you want a second such construct that it has to be different state tiddlers. Sorry.

I’m afraid I can’t tell what’s wrong with the keyboard shortcut tho.

#50

This issue also got fixed based on this reply from @EricShulman in another thread. Thank you @EricShulman

Here is the current code I am using.


<$let stateID={{{ [[$:/temp/abc/]addsuffix{!!title}addsuffix<qualify>] }}}>
   <$reveal type="nomatch" state=<<stateID>> text="show">
      <$button set=<<stateID>> setTo="show" class="mybutton" >
         {{$:/core/images/info-button}}
      </$button>
   </$reveal>
   <$reveal type="match" state=<<stateID>> text="show">
      <$button set=<<stateID>> setTo="hide" class="mybutton" >
         {{$:/core/images/info-button}}
      </$button>
<$list filter="[all[current]!is[system]!is[shadow]!tag[$:/tags/SideBar]!tag[Journal]!tag[$:/tags/ViewTemplate]!tag[$:/tags/Stylesheet]!tag[tweaks]!TheBrain[no]!has[page-cover]]">
<div class="rightside">

{{||Bottom Tabs for viewtemplate - without folding}}
</div>

<style>
[data-tiddler-title='{{!!title}}'] .tc-tiddler-body {
  border:1px solid transparent;
  width:50%;
}
[data-tiddler-title='{{!!title}}'] .rightside {
  border:1px solid transparent;
  width:50%;
  position: relative;
  float:right;
  right:0;
	}

</style>
</$list>
</$reveal>

<style>
.mybutton {float:right}
.mybutton {margin-top: -25px}
</style>
Qualify widget, unique strings
Triggering reveal widget with action widgets
How to float the output of a ViewTemplate next to other body content?
How to create a field macro similar to the tag macro
#51

Seems cool. Can you share with us a screenshot of the final output of your floating Brain plugin implementation?

#52

I call it sidetabs now. Although I started it to float TheBrain to the right of tiddler body, now I rarely use TheBrain with it (partly becuase of some compatibility issues with multicolumn plug in and hotzone plug in).
I have added more tabs to the sidetabs like node-explorer from Shiraz, Tiddler renaming and fields from Saq’s UI experiments, and an Editor. You have to click on the Info button floating on the right side of the tiddler body to see the sidetabs.

Here is the current version- https://multicolumn-krystal.tiddlyhost.com/ - Click on the sidetabs link in the topbar to see the demo. TheBrain dosent work in this implentation - due to some compatibility issues with multicolumn plug in and hotzone plug in I guess. If you use it in a TW without multicolumn plug in, it might work (I will post a demo later if it works). Also it needs some CSS modifications for correct alignment of the sidetabs parallel to the tiddler body because in some cases, I have seen the sidetabs align below the level of the tiddler body.

This is a slightly older version which works well only with krystal horizontal layout plug in - https://krystal.tiddlyhost.com/#. (posted to show how TheBrain works in sidetabs)