[tw5] Re: How to do I make some specific changes in the UI?

2018-09-17 Thread TonyM 
Talha,

I am sure you found it tricky this first time, but it gets easier as you 
learn about the specifics of TiddlyWiki, however since it is largely based 
on html CSS and other web Standards I think it would be safe to say 
TiddlyWiki is one of the most extensible, customisable and  configurable 
environments you are likely to ever come across. As time passes people put 
together alternative views and share them so it is possible to draw from a 
menu of solutions rather than build your own. One of the things I like 
about tiddlywiki is learning the html and css along with tiddlywiki is I am 
spending time on broad industry standard technology which will be 
applicable time and again. Whilst I value greatly our colleges who build 
powerful addons I can now see that more often that not a wikitext based 
hack with some html or css can achieve almost anything with tiddlywiki's 
existing functions.

When I referred to the new release I was thinking of the feature to simply 
use a tag to introduce items to the sidebar (not tabs) allowing us to avoid 
overwriting the core tiddlers. this will help people building shareable 
solutions but for your own customised uses it is largely irrelevant, now 
you have progressed as you have.

Some small tips

   - Try wrapping a transclusion of an svg in another http://127.0.0.1:8088/Instances/PSaTSuitnew.html#%24%3A%2Ftags%2FPageTemplate>

 
 
  $:/core/ui/PageTemplate/topleftbar 

 
 
  $:/core/ui/PageTemplate/toprightbar 

 
 
  $:/core/ui/PageTemplate/sidebar 

 
 
  $:/core/ui/PageTemplate/story 

 
 
  $:/core/ui/PageTemplate/alerts 


With  large part of the work done in the  $:/core/ui/PageTemplate/story  

 

Regards
Tony

On Tuesday, September 18, 2018 at 8:54:48 AM UTC+10, talha131 wrote:
>
> Thank you everyone for their input. It indeed is tricky to customize the 
> layout. I am going to pause further customization till I get my hand on the 
> next release which Tony and Mat have mentioned is going to easier to 
> customize. For now I have made following changes to get this result
>
> It’s not perfect and not exactly what I had in mind, but it will do for 
> now.
>
> I created a tiddler, title $:/talha131/Template/Header, and tag 
> $:/tags/AboveStory
>
> 
> {{||$:/core/ui/PageTemplate/pagecontrols}}
>
> <$set name="searchTiddler" value="$:/temp/search"> class="tc-search"><$edit-text tiddler="$:/temp/search" type="search" 
> tag="input" focus={{$:/config/Search/AutoFocus}} focusPopup=< "$:/state/popup/search-dropdown">> class="tc-popup-handle"/><$reveal 
> state="$:/temp/search" type="nomatch" text=""><$button 
> tooltip={{$:/language/Buttons/AdvancedSearch/Hint}} 
> aria-label={{$:/language/Buttons/AdvancedSearch/Caption}} 
> class="tc-btn-invisible"><$action-setfield $tiddler="$:/temp/advancedsearch" 
> text={{$:/temp/search}}/><$action-setfield $tiddler="$:/temp/search" 
> text=""/><$action-navigate $to="$:/AdvancedSearch"/>
> {{$:/core/images/advanced-search-button}}<$button 
> class="tc-btn-invisible"><$action-setfield $tiddler="$:/temp/search" text="" 
> />
> {{$:/core/images/close-button}}<$button popup=< "$:/state/popup/search-dropdown">> class="tc-btn-invisible">
> {{$:/core/images/down-arrow}}<$list 
> filter="[{$:/temp/search}minlength{$:/config/Search/MinLength}limit[1]]" 
> variable="listItem"><$set name="resultCount" value="""<$count 
> filter="[!is[system]search{$(searchTiddler)$}]"/>""">
> {{$:/language/Search/Matches}}<$reveal 
> state="$:/temp/search" type="match" text=""><$button to="$:/AdvancedSearch" 
> tooltip={{$:/language/Buttons/AdvancedSearch/Hint}} 
> aria-label={{$:/language/Buttons/AdvancedSearch/Caption}} 
> class="tc-btn-invisible">
> {{$:/core/images/advanced-search-button}}
> <$reveal tag="div" class="tc-block-dropdown-wrapper" state="$:/temp/search" 
> type="nomatch" text="">
> <$reveal tag="div" class="tc-block-dropdown tc-search-drop-down 
> tc-popup-handle" state=<> 
> type="nomatch" text="" default="">
> <$list 
> filter="[{$:/temp/search}minlength{$:/config/Search/MinLength}limit[1]]" 
> emptyMessage=""" class="tc-search-results">{{$:/language/Search/Search/TooShort}}""" 
> variable="listItem">
>
> {{$:/core/ui/SearchResults}}
> 
> 
> 
> 
> 
>
> The {{||$:/core/ui/PageTemplate/pagecontrols}} and rest of the code is 
> extracted from the shadow tiddlers. I just wrapped them in  class="talha131-header">. 
>
> I created another tiddler, $:/talha131/CSS/Header with tag 
>

[tw5] Re: How to do I make some specific changes in the UI?

2018-09-17 Thread talha131 


Thank you everyone for their input. It indeed is tricky to customize the 
layout. I am going to pause further customization till I get my hand on the 
next release which Tony and Mat have mentioned is going to easier to 
customize. For now I have made following changes to get this result

It’s not perfect and not exactly what I had in mind, but it will do for now.

I created a tiddler, title $:/talha131/Template/Header, and tag 
$:/tags/AboveStory


{{||$:/core/ui/PageTemplate/pagecontrols}}

<$set name="searchTiddler" value="$:/temp/search"><$edit-text tiddler="$:/temp/search" type="search" 
tag="input" focus={{$:/config/Search/AutoFocus}} focusPopup=<> class="tc-popup-handle"/><$reveal 
state="$:/temp/search" type="nomatch" text=""><$button 
tooltip={{$:/language/Buttons/AdvancedSearch/Hint}} 
aria-label={{$:/language/Buttons/AdvancedSearch/Caption}} 
class="tc-btn-invisible"><$action-setfield $tiddler="$:/temp/advancedsearch" 
text={{$:/temp/search}}/><$action-setfield $tiddler="$:/temp/search" 
text=""/><$action-navigate $to="$:/AdvancedSearch"/>
{{$:/core/images/advanced-search-button}}<$button 
class="tc-btn-invisible"><$action-setfield $tiddler="$:/temp/search" text="" />
{{$:/core/images/close-button}}<$button popup=<> class="tc-btn-invisible">
{{$:/core/images/down-arrow}}<$list 
filter="[{$:/temp/search}minlength{$:/config/Search/MinLength}limit[1]]" 
variable="listItem"><$set name="resultCount" value="""<$count 
filter="[!is[system]search{$(searchTiddler)$}]"/>""">
{{$:/language/Search/Matches}}<$reveal 
state="$:/temp/search" type="match" text=""><$button to="$:/AdvancedSearch" 
tooltip={{$:/language/Buttons/AdvancedSearch/Hint}} 
aria-label={{$:/language/Buttons/AdvancedSearch/Caption}} 
class="tc-btn-invisible">
{{$:/core/images/advanced-search-button}}
<$reveal tag="div" class="tc-block-dropdown-wrapper" state="$:/temp/search" 
type="nomatch" text="">
<$reveal tag="div" class="tc-block-dropdown tc-search-drop-down 
tc-popup-handle" state=<> 
type="nomatch" text="" default="">
<$list filter="[{$:/temp/search}minlength{$:/config/Search/MinLength}limit[1]]" 
emptyMessage="""{{$:/language/Search/Search/TooShort}}""" 
variable="listItem">

{{$:/core/ui/SearchResults}}






The {{||$:/core/ui/PageTemplate/pagecontrols}} and rest of the code is 
extracted from the shadow tiddlers. I just wrapped them in . 

I created another tiddler, $:/talha131/CSS/Header with tag 
$:/tags/Stylesheet.

div.talha131-header { background: #f0851d; border-radius: 5px; 
display: flex; left: 29px; padding: 5px; position: fixed; top: 
5px; z-index: 1200; }  div.talha131-header div.tc-page-controls { 
margin-top: 0px; }  .tc-page-controls svg { fill: white; }

This gave me the result I shared above.
Known issues 

I shouldn’t probably customize the page controls svg fill color using 
.tc-page-controls 
svg. It’d be better to modify them using color palettes, I suppose.

Also, the page controls come on top of the tiddler title. 
​

-- 
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 post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/d9c666ea-65b2-4153-8478-974228217187%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw5] Re: How to do I make some specific changes in the UI?

2018-09-16 Thread Mat 
Like Tony says, wait until next release and it will be MUCH easier. If it 
wasn't for Birthes solution above, which I didn't try out so I'm only 
assuming it works, if it wasn't for this solution I would advice against 
doing this right now.
>
>
As you've noted it is tricky to identify which tiddlers do what in the 
core. But you're pointint to the SiteTitle and to things that are 
(currently) deeply integrated intot he sidebar so those two terms are a 
good starting point when using advanced search to search for shadow 
tiddlers. Note that you can more or less freely edit shadow tiddlers - 
because you can reset by merely deleting your modified shadow tid.

<:-)

-- 
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 post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/10ea51fc-e2a0-4d65-bebb-f78fe576c821%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw5] Re: How to do I make some specific changes in the UI?

2018-09-16 Thread Birthe C 
I have a tiddler named $:/_topsearch

<$set name="searchTiddler" value="$:/temp/search">
<$edit-text tiddler="$:/temp/search" type="search" tag="input" 
focus={{$:/config/Search/AutoFocus}} focusPopup=<> class="tc-popup-handle"/>
<$reveal state="$:/temp/search" type="nomatch" text="">
<$button tooltip={{$:/language/Buttons/AdvancedSearch/Hint}} 
aria-label={{$:/language/Buttons/AdvancedSearch/Caption}} 
class="tc-btn-invisible">
<$action-setfield $tiddler="$:/temp/advancedsearch" 
text={{$:/temp/search}}/>
<$action-setfield $tiddler="$:/temp/search" text=""/>
<$action-navigate $to="$:/AdvancedSearch"/>
{{$:/core/images/advanced-search-button}}

<$button class="tc-btn-invisible">
<$action-setfield $tiddler="$:/temp/search" text="" />
{{$:/core/images/close-button}}

<$button popup=<> 
class="tc-btn-invisible">
{{$:/core/images/down-arrow}}
<$list 
filter="[{$:/temp/search}minlength{$:/config/Search/MinLength}limit[1]]" 
variable="listItem">
<$set name="resultCount" value="""<$count 
filter="[!is[system]search{$(searchTiddler)$}]"/>""">
{{$:/language/Search/Matches}}




<$reveal state="$:/temp/search" type="match" text="">
<$button to="$:/AdvancedSearch" 
tooltip={{$:/language/Buttons/AdvancedSearch/Hint}} 
aria-label={{$:/language/Buttons/AdvancedSearch/Caption}} 
class="tc-btn-invisible">
{{$:/core/images/advanced-search-button}}






<$reveal tag="div" class="tc-block-dropdown-wrapper" state="$:/temp/search" 
type="nomatch" text="">


<$reveal tag="div" class="tc-block-dropdown tc-search-drop-down 
tc-popup-handle" state=<> 
type="nomatch" text="" default="">


<$list 
filter="[{$:/temp/search}minlength{$:/config/Search/MinLength}limit[1]]" 
emptyMessage="""
{{$:/language/Search/Search/TooShort}}""" variable="listItem">


{{$:/core/ui/SearchResults}}













A tiddler called $:/_topbar tagged $:/tags/TopLeftBar
\define config-title()
$:/config/PageControlButtons/Visibility/$(listItem)$
\end


<$list filter=
"[all[shadows+tiddlers]tag[$:/tags/PageControls]!has[draft.of]]" variable=
"listItem">
<$reveal type="nomatch" state=<> text="hide">
<$set name="tv-config-toolbar-class" filter="[] 
[encodeuricomponent[]addprefix[tc-btn-]]">
<$transclude tiddler=<> mode="inline"/>



@@float:right;padding-left:200px; {{$:/_topsearch}}@@
 
And a style tiddler $:/_stylesheet tagged $:/tags/Stylesheet
.tc-sidebar-scrollable { top: -55px; }


.tc-sidebar-header .tc-site-title,
.tc-sidebar-header .tc-site-subtitle,
.tc-sidebar-header .tc-page-controls {display:none;
}


.tc-sidebar-lists .tc-search {display:none}


.tc-topbar-left {
   margin-left: 0px;
   margin-right: 2em;
}


html .tc-topbar svg {
 height: 1.4em;
 width: 1.4em;
}

It seems to work,


Birthe

-- 
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 post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/c0fc9f9d-b42b-4079-92d1-6a2acff4340f%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw5] Re: How to do I make some specific changes in the UI?

2018-09-16 Thread talha131 


Update

I added 

{{||$:/core/ui/PageTemplate/pagecontrols}}

to a tiddler and tag it with $:/tags/AboveStory. The result is

I am half way there. Now need to figure out how to put search field in the 
tiddler.
​

-- 
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 post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/3cce6300-c13c-4467-8a96-e2573bb1a362%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw5] Re: How to do I make some specific changes in the UI?

2018-09-16 Thread talha131 
>From the docs, I get to know about `$:/tags/AboveStory`. Whatever I put 
inside a tiddler that is tagged with `$:/tags/AboveStory`, it will appear 
on top of story river.

I can leverage this tag to place page controls and search box on top of the 
story river.

The question is how do I place page controls and search box inside a new 
tiddler? 

-- 
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 post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/f7301fda-007e-4069-8a1a-45ef672c222c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw5] Re: How to do I make some specific changes in the UI?

2018-09-15 Thread talha131 


Thank you Stephan. I used following code

div.tc-search {
position: fixed;
top: 0px;
left: 300px;}
div.tc-page-controls {
position: fixed;
top: 0px;
left: 0px;}
div.tc-sidebar-header h1.tc-site-title,div.tc-sidebar-header 
div.tc-site-subtitle {
display:none;}

My intention was to *keep the page controls and search always visible, even 
if sidebar is collapsed*. It seems my approach is wrong. The page control 
and search bar has moved to the top but they disappear when I hide the 
sidebar.

Not sure it is possible or not. Perhaps I will have to override the shadow 
tiddlers that Tony mentioned.

On Sunday, September 16, 2018 at 3:07:37 AM UTC+5, Stephan Hradek wrote:

This is ugly but to give you a starting point:
>
> You can use CSS. Create a new tiddler tagged with $:/tags/Stylesheet
>
> Then insert
>
> div.tc-search {
> position: fixed;
> top: 0px;
> left: 0px;
> }
> div.tc-page-controls {
> position: fixed;
> top: 0px;
> right: 0px;
> }
> div.tc-sidebar-header h1.tc-site-title,
> div.tc-sidebar-header div.tc-site-subtitle {
> display:none;
> }
>
>
>
> ​

-- 
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 post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/d03ef566-ce96-4e1e-860b-f968f53ba912%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw5] Re: How to do I make some specific changes in the UI?

2018-09-15 Thread talha131 
Thank you Tony.

> Otherwise it is also a matter of looking at the tiddlers that currently 
generate the content in the side bar and cut and copy as needed.


Can you please point me towards some such tiddlers so that I can inspect 
their code?

On Sunday, September 16, 2018 at 3:21:01 AM UTC+5, TonyM wrote:
>
> The next release will make this easier with a tag you can use for elements 
> in the sidebar.
>
> Otherwise it is also a matter of looking at the tiddlers that currently 
> generate the content in the side bar and cut and copy as needed.
>
> Your changes to shadow tiddlers will replace the underlying tiddler but 
> can be deleted, restoring the shadow tiddler.
>
> Regards
> Tony
>
>

-- 
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 post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/67c392c5-0860-44cb-a24f-a89fed984368%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw5] Re: How to do I make some specific changes in the UI?

2018-09-15 Thread TonyM 
The next release will make this easier with a tag you can use for elements in 
the sidebar.

Otherwise it is also a matter of looking at the tiddlers that currently 
generate the content in the side bar and cut and copy as needed.

Your changes to shadow tiddlers will replace the underlying tiddler but can be 
deleted, restoring the shadow tiddler.

Regards
Tony

-- 
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 post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/073f253d-0b52-4144-a037-96f4db61fc52%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw5] Re: How to do I make some specific changes in the UI?

2018-09-15 Thread Stephan Hradek 
This is ugly but to give you a starting point:

You can use CSS. Create a new tiddler tagged with $:/tags/Stylesheet

Then insert

div.tc-search {
position: fixed;
top: 0px;
left: 0px;
}
div.tc-page-controls {
position: fixed;
top: 0px;
right: 0px;
}
div.tc-sidebar-header h1.tc-site-title,
div.tc-sidebar-header div.tc-site-subtitle {
display:none;
}



-- 
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 post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/35fa497a-926b-42d7-8da3-ae3987af385a%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.