Material Theme for TW5 (sort of)

2,528 views
Skip to first unread message

JD

unread,
Apr 2, 2018, 1:37:26 PM4/2/18
to TiddlyWiki
Hello folks, I've been playing around with Google's Material design and would like to share what I created so far...

http://j.d.material.tiddlyspot.com

...in hindsight, I think overwriting core image tiddlers (and "more tiddler actions" button) might not be the best way to go... So, for anybody who wants to try this out, there's that info for you. I'll probably cut those overwritten portions away in an update...

Oh. Please try out the palettes under Control Panel > Appearance > Material Tweaks, they're specifically designed for this theme...

***

I've been testing this with the v.v. amazing Noteself fork with a Cloudant account (and the android app! So freaking cool)... The
setup just made my life easier (I've been meaning to send some feedback but I've recently been very busy I'm sorry).

So, thanks, everyone. I've been enjoying my visits here in Google Groups. You guys are awesome innovators! I get shy just thinking about how little I can contribute... Y'all are some of the coolest forum-goers around.

David Gifford

unread,
Apr 2, 2018, 3:55:49 PM4/2/18
to TiddlyWiki
Lovely! I love the palettes and palette names. Lumpy space princess?

manuar...@gmail.com

unread,
Apr 2, 2018, 4:27:55 PM4/2/18
to TiddlyWiki
I really enjoy this theme, I will try it for my next mobile-based tiddlywiki project.

Thanks!

TonyM

unread,
Apr 2, 2018, 6:02:26 PM4/2/18
to TiddlyWiki
JD,

Looks very nice, thanks for Sharing. The Left hand Driven menu theme, hamburger, and topbar is much in demand and to quickly customise this theme with the alternate colours is a bonus. 

Thanks
Tony

JD

unread,
Apr 3, 2018, 6:12:43 AM4/3/18
to TiddlyWiki
Hey, thanks! Yeah, those colors remind me of LSP from Adventure Time... I guess that cartoon is not that popular nowadays  😅
Message has been deleted

JD

unread,
Apr 3, 2018, 6:18:39 AM4/3/18
to TiddlyWiki
Thanks for the compliments! I hope a future update to Vanilla theme would have sidebar-left as an option, at least. 
Message has been deleted

ruby

unread,
Apr 4, 2018, 4:52:50 AM4/4/18
to tiddlywiki
tried. very nice. you're genious

some quick questions:
I like zoomin mode, but if set storyview to "zoomin", the story width gets bigger and bigger, and the bottom scroll bar appears.

and tried http://j.d.material.muri.tiddlyspot.com/, after click "V" "more actions", the pop memu div is hiden under below tiddler. maybe add some z-index?
1 load http://j.d.material.muri.tiddlyspot.com/
2 click + to add tiddler ,and type "test"
3 save
4 click V to see "more actions", and the pop memu div is hiden under below tiddler. maybe add some z-index?

@TiddlyTweeter

unread,
Apr 4, 2018, 12:04:48 PM4/4/18
to TiddlyWiki
No one commented on FAB yet? Its a fab idea!

I think it may need a little work cross-platform to work relaibly the same, but the design and idea behind it is really excellent.

Josiah

JD

unread,
Apr 5, 2018, 9:50:27 AM4/5/18
to TiddlyWiki
Hi Bardy, thanks for the feedback! Yeah, looks like I forgot to test this with the different story views. 

I just updated the theme and now it should work with Zoomin view. I also changed how I applied the swiping ability. Plus, the image tiddlers are separated from the theme now (I don't want to overwrite core system tiddlers)

Please do tell if problems persist, and if you discover new ones :)
Thanks Josiah! Anybody with ideas to make this theme work better cross-platform, please do inform. My knowledge of both TW5 and CSS are very limited, and I haven't even started learning JS, meaning I'm not even aware of what could be made more efficient here lol

TonyM

unread,
Apr 5, 2018, 5:58:00 PM4/5/18
to tiddl...@googlegroups.com
Josiah,

I cant see FAB anywhere?

With respect what are to talking about, it is hard to comment on something we cant see?

Tony

@TiddlyTweeter

unread,
Apr 6, 2018, 6:58:10 AM4/6/18
to TiddlyWiki
Ciao TonyM

By default the full JD's FAB is off--though the big "+"circle, bottom right, is a FAB. Visit $:/ControlPanel > Appearance > FAB Buttons. Set the buttons, see what happens.

They seem to work best on touch-screens?

At the moment the behaviour differs between platforms. I'll try document this a bit so JD knows more.

Best wishes
Josiah

TonyM

unread,
Apr 6, 2018, 8:30:41 AM4/6/18
to TiddlyWiki
Thanks The Fab Button is Cool,

I only found the secondaries on hover above the first fab button.

Thanks
Tony

@TiddlyTweeter

unread,
Apr 6, 2018, 8:38:40 AM4/6/18
to TiddlyWiki
They only appear on hover. Its a way of getting an elegant malleable menuing system that is not obtrusive.

I think the "trigger-zone" for the hover activation probably needs a bit of tweeking. I need try it a bit more.

I can see how its good for smart phones. But for some desktop apps it could be good too.

JD

unread,
Apr 6, 2018, 8:40:48 AM4/6/18
to tiddl...@googlegroups.com

Oh yes, that's right. I'm not a big fan of how they work right now. It's is a very simple implementation of an opacity+height transition in CSS. 

When none is set, the "opacity: 0;" hoverable div above the main FAB button is not revealed.

If one or more is set, the div is revealed, but is set to "opacity: 0;" until the area is hovered upon to turn it to full opacity. (please see attached file)

How I actually want it to be revealed is by long-pressing the main FAB button, but I think that's a mobile OS feature and can't be properly implemented in HTML or CSS. Maybe it can happen via JS? 

TonyM

unread,
Apr 6, 2018, 8:43:22 AM4/6/18
to TiddlyWiki
JD,

The More I look at it the more I am Tempted to move some key wikis to this - thanks for sharing

Tony


On Friday, April 6, 2018 at 10:40:48 PM UTC+10, JD wrote:
Oh yes, that's right. I'm not a big fan of how they work right now. It's is a very simple implementation of an opacity+height transition in CSS. 

When none is set, the "opacity: 0;" hoverable div above the main FAB button is not revealed.

If one or more is set, the div is revealed, but is set to "opacity: 0;" until the area is hovered upon to turn it to full opacity. (please see attached file)

How I actually want it to be revealed is by long-pressing the main FAB button, but I think that's a mobile OS feature and can't be properly implemented in HTML or CSS. Maybe it can happen via JS? 

<blockquote class="imgur-embed-pub" lang="en" data-id="a/WtzhR"><a href="//imgur.com/WtzhR"></a></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>

BurningTreeC

unread,
Apr 6, 2018, 9:09:27 AM4/6/18
to TiddlyWiki
Hi JD,  I want to express my appreciation of your work, I think it's great - and seeing my hammerjs widgets being used within it is really cool :) !

How's the swipe widget working for you?
We have put hammerjs to the tiddlywiki plugin library, so that it's enough to drag it from the prerelease page to use it
In the meantime I've modified the different widgets (swipe, pan, press, rotate and tap) to use that plugin and I've made some modifications that make them work better
I wanted to make a dedicated page for those widgets only, just haven't found the time til now. But I'll put them online soon!

How I actually want it to be revealed is by long-pressing the main FAB button, but I think that's a mobile OS feature and can't be properly implemented in HTML or CSS. Maybe it can happen via JS? 

The press widget I made also uses hammerjs and would do that - on a long press it triggers your actions. The annoying thing is that it also opens the rightclick-caret on desktop browsers when pressing with fingers on a touch screen. it's in use at http://tiddlypiano.tiddlyspot.com/ if you want to get a preview, I think I'll modify it a bit for the hammer-widgets-page later on


That said, you're doing really cool work, thank you very much!

BurningTreeC

JD

unread,
Apr 6, 2018, 11:28:29 AM4/6/18
to TiddlyWiki
Oh wow, thanks for noticing, I love your Swipe widget! It has allowed a JS-illiterate person like me to get what I wanted out of TW in my mobile browser (outside of Noteself's android app)

Yeah, a dedicated page for the widgets would surely help with spreading the word around. A concise info page like this tiddler for the ButtonWidget would make it easier for other users to implement it in their projects, I feel like. 

Oh, and yeah, thanks for pointing me towards the Press widget and tiddlypiano! I'd play with these in the coming weekend! 

Cheers :)

P.S. can I do a bug report here? Removing the "$targets" parameter on the swipe widget gives me a Red Window when I click the Save-tiddler button. And although the tiddler isn't saved after clicking the Save-tiddler button (without the "$targets" param), I can neither close nor erase the said tiddler... and I have to refresh the wiki to go back in time (so to speak). 

I ran into this problem while learning about the widget and learned how to avoid it, but this might scare first-time users? Let me visualize this with a gif:

BurningTreeC

unread,
Apr 6, 2018, 1:06:51 PM4/6/18
to TiddlyWiki

Yeah, a dedicated page for the widgets would surely help with spreading the word around. A concise info page like this tiddler for the ButtonWidget would make it easier for other users to implement it in their projects, I feel like. 

Oh, and yeah, thanks for pointing me towards the Press widget and tiddlypiano! I'd play with these in the coming weekend! 

Cheers :)

you're welcome, seeing those widgets being used I want to make them better and more user-friendly
I'll make the docs tiddly-like, so everybody knows to read them :P
 
P.S. can I do a bug report here? Removing the "$targets" parameter on the swipe widget gives me a Red Window when I click the Save-tiddler button. And although the tiddler isn't saved after clicking the Save-tiddler button (without the "$targets" param), I can neither close nor erase the said tiddler... and I have to refresh the wiki to go back in time (so to speak). 

I ran into this problem while learning about the widget and learned how to avoid it, but this might scare first-time users? Let me visualize this with a gif:

  



Yes thanks for pointing this out, all bug reports are welcome, doesn't matter how and where
This is because it misses some checks, I think my latest version already prevents those errors...

On the hammer-widgets page I'll put the most stable versions possible and good docs, I'll post it in a thread and leave a note here


all the best,
BTC

ruby

unread,
Apr 7, 2018, 6:04:38 AM4/7/18
to tiddlywiki
hi, it seems that table of contents can not be left aligned
tiddlers without child have some extra space before them

at this page https://tiddlywiki.com/#TableOfContents
I see the TOC is left aligned

what's the problem here?
see here:
http://testtocalign.tiddlyspot.com/


another question,
after add a swipe-area layer, it seems impossible to return to original  Vanilla Basic theme?
right sidebar is not clickable.

JD

unread,
Apr 7, 2018, 8:14:09 AM4/7/18
to TiddlyWiki
Hey Bardy thanks for the bug reports!  

The misaligned TOC turned out to be due to missing class declarations in the Material-ized SVG tiddlers. I updated the iconset at the demosite, please export/import the set again if you still wish to use them. 

I also updated the theme to comply with the corrected SVG classification, please try the updated theme. 

by "swipe-area layer" do you mean the additional $:/themes/jd/Material/Template/SwipeArea tiddler? I can't replicate the problem. I can go back and forth between themes just fine (please see attached file)... please elaborate?

JD

unread,
Apr 7, 2018, 8:17:12 AM4/7/18
to tiddl...@googlegroups.com
Thanks BTC! I'll update the widgets on my demo page! 

EDIT: Sorry for my ignorant question, is the updated Swipe widget on Muritest , and the HammerJS library on GitHub?

BurningTreeC

unread,
Apr 7, 2018, 8:34:37 AM4/7/18
to TiddlyWiki
Thanks BTC! I'll update the widgets on my demo page! 

EDIT: Sorry for my ignorant question, is the updated Swipe widget on Muritest , and the HammerJS library on GitHub?

At the moment I don't know where the latest version is, that's why I want to put them all to one page where the widgets and the hammerjs library will be

Hammerjs would also be available on the tiddlywiki prerelease page: https://tiddlywiki.com/prerelease 
But the widgets need a small modification to use it

BTC 

@TiddlyTweeter

unread,
Apr 7, 2018, 8:54:53 AM4/7/18
to TiddlyWiki
JD

Testing notes.

I been playing with it. On FAB. It worked well on ...

Windows 7 Desktop Firefox 52: FAB works.

Windows 7 Desktop latest Chrome. FAB works.

On BOTH I think the "trigger area" may be a bit small?

At first it didn't trigger because I was mousing not close enough to the "zone".

Windows 10 tablet in "tablet mode" in Firefox 53 ... this is interesting in that its a kinda mongrel situation. Its in some ways like a desktop but also like a mobile O/S. FWIW on FAB you can't get it to activate via finger under my setup (default to Tablet, not keyboard or mouse). BUT it does work with the stylus well.

Best wishes
Josiah

@TiddlyTweeter

unread,
Apr 7, 2018, 9:04:40 AM4/7/18
to TiddlyWiki
REQUEST

Could the SIZE of the FAB circles be user changeable?

Best wishes
Josiah

@TiddlyTweeter

unread,
Apr 7, 2018, 9:12:32 AM4/7/18
to TiddlyWiki
AN OBSERVATION...

This is not really critique, merely an observation on the behaviour of FAB setting ...

I find it slightly odd that AFTER setting FAB all the dropdowns are blank...



You have the setting displayed AND a separate dropdown.

More intuitive might be to have the dropdown itself make the setting and display it. So that you don't need to have two items per FAB, only one. If you get what I mean?

Best wishes
Josiah
Auto Generated Inline Image 1

JD

unread,
Apr 7, 2018, 9:39:16 AM4/7/18
to TiddlyWiki
Hi Josiah, 

As of now the only update I can push is changing the height of the hover "trigger", the area above the main FAB button, and adding sizing options for the buttons. 

I think it's quite small, myself. Maybe it'll also help with the Windows 10 tablet problem? I'll look for possible solutions to that. 

Thanks for the feedback! I only have an Android phone and Windows 10 laptop to test this on, both running Chrome

@TiddlyTweeter

unread,
Apr 7, 2018, 9:45:07 AM4/7/18
to TiddlyWiki
A far thought I had was "how would this be in a version that ONLY showed FAB buttons?"

I kinda think it might work! :-).

Best
Josiah

@TiddlyTweeter

unread,
Apr 7, 2018, 10:00:30 AM4/7/18
to TiddlyWiki
Ciao JD

JD wrote ...
I think it's quite small, myself.

Right. Its to do with interaction with other CSS settings unless you enforce sizing, I think?

For me its bigger than I need on desktop (high resolution, big screens). FWIW it looks like this ...



The "+" has more excess space around it than the other icons, but all of them have some they might lose?

Just comments, not essentials.

Best wishes
Josiah
Auto Generated Inline Image 1

JD

unread,
Apr 7, 2018, 10:27:55 AM4/7/18
to TiddlyWiki
Hi Josiah, 

yes, this is pure laziness on my part. It's updated now to be more intuitive 😅 along with the above tweaks to the FAB buttons

JD

unread,
Apr 7, 2018, 10:54:08 AM4/7/18
to TiddlyWiki
It's actually quite easy to excise the tiddlers related to the FAB buttons, they're just the ff:
  1. template
  2. stylesheet
  3. configDB(optional)
  4. options tiddler (optional)
As for the sidebar and all the other page elements, that can be styled separately.

You might want to see this: http://j.d.fab.tiddlyspot.com/

@TiddlyTweeter

unread,
Apr 7, 2018, 11:05:38 AM4/7/18
to TiddlyWiki
EXCELLENT. Spot-on.

Tx.

@TiddlyTweeter

unread,
Apr 7, 2018, 11:10:11 AM4/7/18
to TiddlyWiki
JD

Thank you for that example variant of a FAB-centric approach. I appreciate it.

I'm probably gonna use it. It seems to give all I need for much public work.

Best wishes
Josiah

BurningTreeC

unread,
Apr 7, 2018, 12:50:43 PM4/7/18
to TiddlyWiki
Hey JD, the swipe widget is here: http://hammerwidgets.tiddlyspot.com/

Currently there's only the swipe widget - the others will follow one by one

all the best,
BTC

Jeremy Ruston

unread,
Apr 7, 2018, 1:07:10 PM4/7/18
to tiddl...@googlegroups.com
Hi J.D.

Please accept my belated congratulations, this is another terrific piece of work. I really like the way that you've done the FAB buttons. I'd welcome a PR to add this to the tw.com links.

Best wishes

Jeremy

--
Jeremy Ruston
jer...@jermolene.com
https://jermolene.com

> On 2 Apr 2018, at 18:37, JD <jologsd...@gmail.com> wrote:
>
> Hello folks, I've been playing around with Google's Material design and would like to share what I created so far...
>
> http://j.d.material.tiddlyspot.com
>
> ...in hindsight, I think overwriting core image tiddlers (and "more tiddler actions" button) might not be the best way to go... So, for anybody who wants to try this out, there's that info for you. I'll probably cut those overwritten portions away in an update...
>
> Oh. Please try out the palettes under Control Panel > Appearance > Material Tweaks, they're specifically designed for this theme...
>
> ***
>
> I've been testing this with the v.v. amazing Noteself fork with a Cloudant account (and the android app! So freaking cool)... The
> setup just made my life easier (I've been meaning to send some feedback but I've recently been very busy I'm sorry).
>
> So, thanks, everyone. I've been enjoying my visits here in Google Groups. You guys are awesome innovators! I get shy just thinking about how little I can contribute... Y'all are some of the coolest forum-goers around.
>
> --
> 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+...@googlegroups.com.
> To post to this group, send email to tiddl...@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/ddf56942-3a14-4d85-bec8-167ea10a892d%40googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.

JD

unread,
Apr 7, 2018, 1:30:54 PM4/7/18
to TiddlyWiki
So cool! I'll update the demo theme page with this one!

JD

unread,
Apr 7, 2018, 1:34:52 PM4/7/18
to TiddlyWiki
Oh, wow, that's really nice coming from you Jeremy! Thanks! 😁 

BurningTreeC

unread,
Apr 7, 2018, 2:12:42 PM4/7/18
to TiddlyWiki
@JD - I've tried your FAB buttons now, I didn't get how it works bc I thought it was swipable so I swiped half an hour in all directions XD

It's awesome now that I know how to use it - did you think about adding a swipe-up gesture on it to show the secondary buttons? That would be cool on mobiles and my touch-laptop!


Btw, thanks for adding the link to the hammerwidgets page - press, pan, pinch/rotate and tap are coming soon


good weekend to all!

BTC

ruby

unread,
Apr 7, 2018, 11:05:41 PM4/7/18
to tiddlywiki
I mean this site http://j.d.material.muri.tiddlyspot.com/

seems that
http://j.d.material.muri.tiddlyspot.com/ is not synchonized with
http://j.d.material.tiddlyspot.com/

at http://j.d.material.muri.tiddlyspot.com/
zoomin story view mode is not as good as http://j.d.material.tiddlyspot.com/
there's no space between right side of story and vertical scroll bar
check these:
http://testZoominMaterial.tiddlyspot.com/
http://testZoominMaterialMuri.tiddlyspot.com/


and at at http://j.d.material.muri.tiddlyspot.com/
there's swipe-area layer for swipe
and can not go back and forth between themes
check this:
http://testZoominMaterialMuriSwitchTheme.tiddlyspot.com/

btw just find that tiddlyspot.com is really good at reproducing problem
if I have a problem, make a demo site in 1 minute...

JD

unread,
Apr 8, 2018, 12:16:04 AM4/8/18
to TiddlyWiki
Oh man, I should've deleted that site! (http://j.d.material.muri.tiddlyspot.com/)

At the time it was more of a proof-of-concept... I moved on with a simpler implementation of the widget and that site no longer applies (I'll delete it in a sec)

If you still plan on using the theme with the swipe capabilities, please use the updated theme and tiddlers at http://j.d.material.tiddlyspot.com/

and yeah, tiddlyspot is amazing for quickly sharing TW5s hehe. It's up to us to keep the free servers clean, however, so I'm pretty embarrassed to still have that outdated thing above running around causing confusion

JD

unread,
Apr 8, 2018, 12:32:32 AM4/8/18
to TiddlyWiki
Oh! haha! I'm still testing out methods on how to reveal the secondary FABbuttons... 

At the demo site I used the swipe widget on the FAB button (as an overwritten theme tiddler, not yet integrated into the theme plugin), but it revealed a weird problem on Chrome for Android in my case. The positioning is right and all, but it seems the actual area that triggers the main FAB button shifts up when Chrome's address bar shifts up and out of sight. Looking around stackoverflow, it looks like Android Chrome has issues with bottom-fixed elements... I'm still looking into it 😅

BurningTreeC

unread,
Apr 8, 2018, 4:02:25 AM4/8/18
to TiddlyWiki
Oh! haha! I'm still testing out methods on how to reveal the secondary FABbuttons... 

At the demo site I used the swipe widget on the FAB button (as an overwritten theme tiddler, not yet integrated into the theme plugin), but it revealed a weird problem on Chrome for Android in my case. The positioning is right and all, but it seems the actual area that triggers the main FAB button shifts up when Chrome's address bar shifts up and out of sight. Looking around stackoverflow, it looks like Android Chrome has issues with bottom-fixed elements... I'm still looking into it 😅


Have you seen the dynaview plugin on the prerelease page? It has an option in its settings that saves the viewport dimensions to two separate tiddlers - it's dynamic, so if the viewport changes those tiddlers will update

That would allow a workaround, knowing the height, making it top-fixed, if android chrome likes that

----------

Now FAB is swipeable! :) That's cool! ... thanks for the quick update!

BTC

 

BurningTreeC

unread,
Apr 8, 2018, 5:56:43 AM4/8/18
to TiddlyWiki
The Pan, Press and Tap widgets are now online at http://hammerwidgets.tiddlyspot.com/

Have fun!

BTC

JD

unread,
Apr 8, 2018, 10:47:49 AM4/8/18
to TiddlyWiki
Thanks BTC! Swipe + Tap work awesome together!

JD

unread,
Apr 8, 2018, 10:54:02 AM4/8/18
to TiddlyWiki
Oh man, by using that feature of the dynaview plugin, it looks like I indeed have to top-fix something. Thanks for the recommendation! 

I'll look more into it, but as of now it's not bothering me at all on Noteself Android. It's just Chrome (for Android) that's showing some kinks

BurningTreeC

unread,
Apr 9, 2018, 5:54:39 AM4/9/18
to TiddlyWiki
Oh man, by using that feature of the dynaview plugin, it looks like I indeed have to top-fix something. Thanks for the recommendation! 

I'll look more into it, but as of now it's not bothering me at all on Noteself Android. It's just Chrome (for Android) that's showing some kinks

Just letting you know about that feature, it's a bit hidden

I got an idea for your FAB button if you want to make it movable

you can use the <$press> and <$pan> widget on it and set the $time interval of the press widget higher, so that one needs to press for an amount of time to trigger the action
then the action would be to set the pan widget state on: $state={{$:/a-tiddler-for-on-off}}
then the fab button could be moved around
the endactions of the pan widget then can set the state of $:/a-tiddler-for-on-off to "off"

then with some css:

<$list filter="[[$:/state/fab-pan-statetiddler]!is[missing]]">

.tc-fab-button {
    position: absolute;
    left: {{$:/state/fab-pan-statetiddler!!center-x}}px;
    top: {{$:/state/fab-pan-statetiddler!!center-y}}px;
    bottom: inherit;
    right: inherit;
}

</$list>

@TiddlyTweeter

unread,
Apr 9, 2018, 6:25:44 AM4/9/18
to TiddlyWiki
Dear Dynamic Duo, BTC (Batman) and JD (Robin) :-)

https://www.youtube.com/watch?v=kK4H-LkrQjQ

A small plea from Gotham City inhabitants.

When you come to decide how the various pieces of this jigsaw are finalised into plugins I wish for modularity. So that I could use parts of your wholes without having to import stuff I won't use ... :-).

For instance...

-- the FAB buttons are so fab I think they could work alone--as well as part of a bigger theme change.

-- the TOUCHY stuff: pan, zoom, pinch, slide and crunch--some issues come up cross platform. Ideally it would be good if they all work on touch and non-touch screens. But I think, practically, some bits won't. I think modularity can part help with this issue--so end users can be clearer what will and won't. I very much appreciate that designing for desktop, tablet and smart-phone simultaneously is a challenge that your Duo is playing with in excellent ways.

Just thoughts, best wishes
Josiah

BurningTreeC

unread,
Apr 9, 2018, 6:31:09 AM4/9/18
to TiddlyWiki
-- the TOUCHY stuff: pan, zoom, pinch, slide and crunch--some issues come up cross platform. Ideally it would be good if they all work on touch and non-touch screens. But I think, practically, some bits won't. I think modularity can part help with this issue--so end users can be clearer what will and won't. I very much appreciate that designing for desktop, tablet and smart-phone simultaneously is a challenge that your Duo is playing with in excellent ways.

Ciao Josiah, may I ask you to report over on the HammerWidgets thread which things don't work on which browser with which type of pointer (mouse/touch)?

BTC

@TiddlyTweeter

unread,
Apr 9, 2018, 7:35:27 AM4/9/18
to TiddlyWiki
Will do. Give me a few days so I can be precise.

JD

unread,
Apr 9, 2018, 7:59:49 AM4/9/18
to TiddlyWiki
Whooooaa this is a really cool idea... that might even result into a separate FAB plugin. I see this being usable even outside of Material theme! I'll start working on a demo. 

Btw, as more and more people use your widgets in their plugins/theme, do you think it's better if the widgets remain separate, to be pulled from the official plugin library? Or together are they small enough to be packaged together? I'm thinking of folks who have a lot of plugins installed who might get confused over which plugin is dependent on which plugin. The hurdles of keeping track!

JD

unread,
Apr 9, 2018, 8:05:24 AM4/9/18
to TiddlyWiki
That was a refreshing video, Josiah, thanks 😁 

Yeah, I was wondering about modularity as well. With all the other amazing folks who are using BTC's widgets, separated widgets might be the best way to go. Although it might be trickier for the devs to keep all those modular plugins in sync with each other (this is just speculation, I've no experience with modular stuff)...

@TiddlyTweeter

unread,
Apr 9, 2018, 8:15:21 AM4/9/18
to tiddl...@googlegroups.com
JD, related to my last ... IF the overhead in total is low then mixed package. IF the functionality of each "bit" is discrete: separate.

A way to deal with keeping track and being able to provide "packages" is to use PMario's BUNDLER tool to assemble complete packages for those who want them.

EDIT: By which I mean packages of plugins.

JD wrote:
... Or together are they small enough to be packaged together? I'm thinking of folks who have a lot of plugins installed who might get confused over which plugin is dependent on which plugin. The hurdles of keeping track!

JD

unread,
Apr 9, 2018, 9:25:01 AM4/9/18
to TiddlyWiki
I just got acquainted with this plugin (PMarios's Bundler). Thanks for the info! 

BurningTreeC

unread,
Apr 9, 2018, 12:40:03 PM4/9/18
to TiddlyWiki
@JD ... I tried my idea with the moveable button - an error happened that should now be solved with an update on the pan widget - set $refresh="no" in <$pan ...>

also, my css was wrong, it should be position: fixed;


My FAB button is moving all over the screen now, pretty cool
The secondary buttons though are still on their place - I'm still using your previous fab buttons, without the swipe


BTC


BurningTreeC

unread,
Apr 9, 2018, 12:52:17 PM4/9/18
to TiddlyWiki
No the error isn't solved, unlucky try

If you're trying and you get an error at pan-end, I think there are other ways to do it

ruby

unread,
Apr 10, 2018, 3:59:50 AM4/10/18
to tiddlywiki
> Drag the following into your TW if you want to use it

but after I drag them to https://tiddlywiki.com/empty.html
I didn't get the same thing as http://j.d.material.tiddlyspot.com/
see http://emptymaterial.tiddlyspot.com/

there's some other unknown magic?

maybe simple for advanced users,
but I'm not familiar with this system, it gave me many confusion and I can't figure it out

seems that directly saving the whole site from http://j.d.material.tiddlyspot.com/
is the simplest way to use this theme

I see your theme is rapidly getting better and better ,
hopefully it'll be as simple as a drag to get the same effect


BurningTreeC

unread,
Apr 10, 2018, 4:24:45 AM4/10/18
to TiddlyWiki
@bardy - if you ask me, the look on your emptymaterial page is exactly the look from the material page

after dragging the links to your wiki, you need to SAVE and RELOAD to see the changes

Simon

BurningTreeC

unread,
Apr 10, 2018, 7:55:40 AM4/10/18
to TiddlyWiki
@JD - I'm trying to get my idea of the moveable fab button to work. It's a bit more complicated than I thought to be honest.
I have to change some things in the widgets and see what works ... it's a use-case I want to cover, so I want to make this work

I'll let you know when I have a fully working example


BTC

JD

unread,
Apr 10, 2018, 8:04:34 AM4/10/18
to TiddlyWiki
Hey BTC, over at http://j.d.fab.tiddlyspot.com/ I'm also getting the pan-end errors, have you discovered the root of this? the moving FAB is really really cool! I'm thinking of creating a floating sticky note with this xD

JD

unread,
Apr 10, 2018, 8:07:23 AM4/10/18
to TiddlyWiki
Yeah, I think I'm hitting the same errors as you had. Maybe it's a problem with sandwiching widgets with each other? I tried both

<$swipe><$press></$press></$swipe> 

<$press><$swipe></$swipe></$press>

to no avail! Thanks for looking into it :)

BurningTreeC

unread,
Apr 10, 2018, 8:17:25 AM4/10/18
to tiddl...@googlegroups.com
@JD 

I think the problem is the changing content or too many things changing there within at the same time and missing handling in my widgets
I'll have to figure out how to handle that, I'm sure there's a lot of potential to tweak and correct stuff ... I hope I can make them better, I'll see and report when something changes to the good side
Maybe someone can point me to a solution for refreshing the widget when its content changes, I'll have to search around how other widgets do it...


I've looked at fab.tiddlyspot.com, have you seen that the editor blocks the movement of the button?
That's because the iframe somehow eats the pointer events. For this, the pan widget automatically creates a tiddler $:/state/dragging at pan-start and deletes it at pan-end

it's enough to put this in a stylesheet :

<$list filter="[[$:/state/dragging]!is[missing]]">

iframe {
    pointer-events: none;
}

</$list>

..maybe add !important if it doesn't work without


JD

unread,
Apr 10, 2018, 8:28:46 AM4/10/18
to TiddlyWiki
Oh my, Bardy, looks like the theme tiddlers at http://emptymaterial.tiddlyspot.com/ are not in sync with each other. Do you mind going over the following steps? I just want to know the cause of the problem (which I see as the tiddler frame not filling the story river)

1. Go to filter search, copy+paste
[prefix[$:/themes/jd/]]

2. Press the delete/trash button (confirm 6 tiddlers to be deleted)

3. Save, then refresh the window (this and the above steps are to delete all tiddlers created by Material theme)

4. From http://j.d.material.tiddlyspot.com/ drag either Material Theme or Material Theme + icons + HammerWidgets into the refreshed, vanilla-themed window (the draggable links look like tag pills now)

5. Save, then refresh the window.

The theme should properly set now... If not, please inform me. Thanks so much for the bug reports!

JD

unread,
Apr 10, 2018, 8:38:43 AM4/10/18
to TiddlyWiki
oh, yeah, that was pointed out in the official HammerWidgets page, too (the pointer events block). 

While I'm well inside the div, panning very slowly so the div keeps up, the iframe doesn't block the movement... which made me think of Surgery games and such.... which gave me the idea of the possibility of creating a game with this lol 

By the way, BTC... wait, maybe I'll post the rest of this thought over at the official thread--

BurningTreeC

unread,
Apr 10, 2018, 9:27:49 AM4/10/18
to TiddlyWiki
oh, yeah, that was pointed out in the official HammerWidgets page, too (the pointer events block). 

While I'm well inside the div, panning very slowly so the div keeps up, the iframe doesn't block the movement... which made me think of Surgery games and such.... which gave me the idea of the possibility of creating a game with this lol 

By the way, BTC... wait, maybe I'll post the rest of this thought over at the official thread


I've made progress - not much widget-tweaking but the fab itself and how the widgets handle states

JD

unread,
Apr 10, 2018, 10:23:38 AM4/10/18
to TiddlyWiki
Whoa, I just found out by studying your code that actions can be defined in macros... I tried it with your test page just to see if it worked (nothing was changed inside the macros)

\define pressStartActions()
"""
<$action-setfield $tiddler="$:/state/fab-pan-values" $field="center-x" $value={{$:/state/fab-static!!center-x}}/>
<$action-setfield $tiddler="$:/state/fab-pan-values" $field="center-y" $value={{$:/state/fab-static!!center-y}}/>
<$action-setfield $tiddler="$:/state/swipe-onoff" $field="text" $value="off"/>
<$action-setfield $tiddler="$:/state/FABs" $field="text" $value="no"/>
<$action-setfield $tiddler="$:/state/fab-panning" text="yes"/>
"""
\end

\define panEndActions()
"""
<$list filter="[[$:/state/fab-panning]!is[missing]]">
<$action-setfield $tiddler="$:/state/fab-static" $field="center-x" $value={{$:/state/fab-pan-values!!center-x}}/>
<$action-setfield $tiddler="$:/state/fab-static" $field="center-y" $value={{$:/state/fab-pan-values!!center-y}}/>
</$list>
<$action-deletetiddler $tiddler="$:/state/fab-panning"/>
<$action-setfield $tiddler="$:/state/swipe-onoff" $field="text" $value="on"/>
"""
\end

\define swipeUpActions()
"""
<$list filter="[{$:/state/swipe-onoff}regexp[on]]">
<$action-setfield $tiddler="$:/state/FABs" $field="text" $value="yes"/>
</$list>
"""
\end

\define swipeDownActions()
"""
<$list filter="[{$:/state/FABs}regexp[yes]addprefix{$:/state/swipe-onoff}regexp[onyes]]">
<$action-setfield $tiddler="$:/state/FABs" $field="text" $value="no"/>
</$list>
"""
\end

<$set name="tv-config-toolbar-class" value="tc-btn-invisible FABitem">
<$press $targets="tc-fab-press-wrapper" $time="500" $startactions=<<pressStartActions>>>
<$pan $targets="tc-fab-press-wrapper" $statetiddler="$:/state/fab-pan-values" $endactions=<<panEndActions>>>
<$swipe $targets="tc-fab-wrapper" $velocity="0.1" $direction="up" $actions=<<swipeUpActions>>>
<$swipe $targets="tc-fab-wrapper" $velocity="0.1" $direction="down" $actions=<<swipeDownActions>>>
<div class="tc-fab-wrapper">
<div class="tc-fab-press-wrapper">
<div class="FAB-wrapper">
<$transclude tiddler={{$:/themes/jd/Material/ConfigDB##fab}}/>
</div>
</div>
<$reveal state="$:/state/FABs" type="match" text="yes">
<div style="position: absolute; top: -60px;">
<$transclude tiddler={{$:/themes/jd/Material/ConfigDB##fab1}}/>
</div>
</$reveal>
</div>
</$swipe>
</$swipe>
</$pan>
</$press>
</$set>

As I understand, we can't have both press-end and pan-start actions working on the same target div? 

(My day's about to end, will continue tomorrow)

BurningTreeC

unread,
Apr 10, 2018, 11:07:11 AM4/10/18
to TiddlyWiki
Whoa, I just found out by studying your code that actions can be defined in macros... I tried it with your test page just to see if it worked (nothing was changed inside the macros)

Oh yes, that's possible :) - that allows many many ideas to become possible 
better the press-start actions, press-end would mean, you're not holding the pointer anymore / the finger has left the screen - then pan-start either has already happened or is not possible anymore

 But I don't see why press and pan shouldn't work on the same div, too - did you try that and it didn't work?


(My day's about to end, will continue tomorrow)

no problem, read you next time

BTC 
 

BurningTreeC

unread,
Apr 10, 2018, 11:08:22 AM4/10/18
to TiddlyWiki
\define mymacro()
list
action
bla
\end

<$tap $actions="""<<mymacro>>""">

works, too

BurningTreeC

unread,
Apr 10, 2018, 11:54:01 AM4/10/18
to TiddlyWiki
@JD 

I made some minor updates on my moveablefab.tiddlyspot.com

mostly the handling when you press long enough to pan, but you don't actually pan, so that it deletes that one state tiddler that allows panning with the <$press> endactions (with a list filter that checks if panning was done)

and a bit of css to show that panning is activated


Simon

BurningTreeC

unread,
Apr 10, 2018, 2:37:29 PM4/10/18
to TiddlyWiki
... the updates on moveablefab.tiddlyspot.com have become a bit bigger, it works great now (on my laptop) and can be customized further if one wants

we could have different buttons if swiping up/down/right/left for example


ruby

unread,
Apr 10, 2018, 11:12:35 PM4/10/18
to tiddlywiki
hi, as said , I draw them to https://tiddlywiki.com/empty.html,
obviously it's empty, no need to delete anything.

anyway I've figured out something.

I need to drag these extra tiddlers to get the same:
* [[$:/config/PageControlButtons/Visibility/$:/core/ui/Buttons/new-tiddler]]
* $:/themes/tiddlywiki/vanilla/options/sidebarlayout
* [[$:/config/PageControlButtons/Visibility/$:/core/ui/Buttons/more-page-actions]]
* $:/tags/PageControls

so it's ok now.

but, there's another problem.
the old zoomin story view mode problem.

after drag to http://emptymaterial.tiddlyspot.com/,
if change to "zoomin" mode, the tiddler width is wider than that in classic mode,
and there's no space at right tiddler frame border,  a little problem.
see http://emptymaterial.tiddlyspot.com/

and at http://j.d.material.tiddlyspot.com/,
currently versioned 0.3.47, if change to "zoomin" mode,
the tiddler width is much wider than that in classic mode, and cause bottom scroll bar to appear
I remember you've fixed this problem. at least at version 0.3.43 it's ok. don't know why this problem reappears.

I use latest firefox and chrome explorer on windows 10

> Oh my, Bardy, looks like the theme tiddlers at
> http://emptymaterial.tiddlyspot.com/ are not in sync with each other. Do
> you mind going over the following steps? I just want to know the cause of
> the problem (which I see as the tiddler frame not filling the story river)
> 1. Go to filter search, copy+paste ... delete ... drag again ...


BurningTreeC

unread,
Apr 11, 2018, 6:13:53 AM4/11/18
to TiddlyWiki
@JD 

about the moveable fab button: I believe that the animation on the fabs causes trouble to the hammer widgets
could be worth trying without, I did and errors have disappeared - I remember that something with animations/keyframes was mentioned somewhere related to hammerjs

BTC

JD

unread,
Apr 11, 2018, 6:39:47 AM4/11/18
to TiddlyWiki
Hey Bardy, thanks so much for the bug reports, they're really valuable to me!

The old zoomin problem.. 😑 looks like I needed to define the CSS more specifically for tiddler frames in zoomin view. I updated the theme and hope that this is not a persisting problem!

As for having to drag the visibility tiddlers, that wasn't needed. Buttons for the header could be set at ControlPanel > Appearance > Toolbars > Page Toolbar... same as for Vanilla theme :) 

If you haven't lost patience in this, would you mind trying out the updated theme on the main Tiddlywiki site, or on Empty edition? Thanks a bunch!

JD

unread,
Apr 11, 2018, 7:02:16 AM4/11/18
to TiddlyWiki
BTC, you're blowing my mind with your progress on this! All I can do now is stand back and watch while your magic happens. The idea to have a FAB button fixed to each tiddler (I assume to replace the standard ViewTemplate buttons?) is something that I didn't even know I wanted, and now I'm itching for it xD

Do you have plans to make this into a separate FAB plugin of your own? That would be really cool, because you were able to add a lot of functionality to it that works great outside of the theme package!

meanwhile... I'm back here at step one wondering why this...
<$press $targets="test-div" $time="500" $startactions="""<$action-setfield $tiddler="$:/state/test/pannable" text="yes"/>""" $endactions="""<$action-setfield $tiddler="$:/state/test-values" $field="center-x" $value={{$:/state/test/pan!!center-x}}/>""">
<$pan $targets="test-div" $statetiddler="$:/state/test/pan">
<div class="test-div green">test</div>
</$pan>
</$press>

 is producing this error:
Uncaught TypeError: Cannot read property 'insertBefore' of undefine


BurningTreeC

unread,
Apr 11, 2018, 7:16:39 AM4/11/18
to TiddlyWiki
BTC, you're blowing my mind with your progress on this! All I can do now is stand back and watch while your magic happens. The idea to have a FAB button fixed to each tiddler (I assume to replace the standard ViewTemplate buttons?) is something that I didn't even know I wanted, and now I'm itching for it xD 

Do you have plans to make this into a separate FAB plugin of your own? That would be really cool, because you were able to add a lot of functionality to it that works great outside of the theme package!


Yes, I can make it its own plugin. The per-tiddler-fab would show the viewtoolbar buttons in view mode and the edittoolbar + editor toolbar buttons in edit mode
 

meanwhile... I'm back here at step one wondering why this...
<$press $targets="test-div" $time="500" $startactions="""<$action-setfield $tiddler="$:/state/test/pannable" text="yes"/>""" $endactions="""<$action-setfield $tiddler="$:/state/test-values" $field="center-x" $value={{$:/state/test/pan!!center-x}}/>""">
<$pan $targets="test-div" $statetiddler="$:/state/test/pan">
<div class="test-div green">test</div>
</$pan>
</$press>

 is producing this error:
Uncaught TypeError: Cannot read property 'insertBefore' of undefine


I discovered that it's a bad idea having the $state="on/off" on-off-switchable ... I'm not using that anymore and I think I'll remove it from all the widgets
Widget actions can be filtered by the existence of a state tiddler for example, that would do the same if done right

This error here I guess is either that or something with animations

BTC

BurningTreeC

unread,
Apr 11, 2018, 9:09:51 AM4/11/18
to TiddlyWiki
@JD 

if you have time, I've made the single-tiddler fab button - some parts are missing

there are some styling issues you may be able to solve in an instant 

would you take a look?


BTC

JD

unread,
Apr 11, 2018, 10:16:52 AM4/11/18
to TiddlyWiki
Hey BTC, sorry I got caught up in something. Yes, I'd like to help! 

BurningTreeC

unread,
Apr 11, 2018, 11:48:08 AM4/11/18
to TiddlyWiki
Hey BTC, sorry I got caught up in something. Yes, I'd like to help! 

Don't worry, whenever you have time and you like

It's the single-tiddler fab button on moveablefab.tiddlyspot.com
I'm trying to make it a circle svg path like in the example on https://tiddlywiki.com/#Making%20curved%20text%20with%20SVG
But I'm a bit unlucky with the right css

the tiddler is $:/core/ui/Buttons/single-tiddler-fab
the svg is currently removed from the button, it shows only the tiddlywiki core icon. But it's in that tiddler , just needs to be called from the button (it's a macro) and the $(storytiddler)$ must be passed to it


I'm still using your styles for the FABitem - maybe that's the cause of the problem
I think you're pretty good at inspecting the root of the cause,
a little hint already helps a lot

as I said, whenever you like and you find time

Simon

ruby

unread,
Apr 11, 2018, 10:15:26 PM4/11/18
to tiddlywiki
> would you mind trying out the updated theme on the main Tiddlywiki site, or on Empty edition?

hi, it's my pleasure

just tried your current version 0.3.53
on both the main Tiddlywiki site and Empty edition

I think everything is OK now.



one thing:
in the default Color theme
the color of the "Save" button is highlighted,
and after making some change, the "Save" button is grayed out

I think maybe it'd be more natural for an indicator
to be highlighted when there's change
and be grayed out when there's no change

anyway I see this color can be simply changed at ControlPanel "Material Tweak", "Colors of save-wiki dirty indicator on Tools sidebar"
so it's not really a problem.


another thing:
to "Make it swipable / tappable"
> Swipe from the left edge of the screen to open the sidebar (and from the right edge of the screen to close it)

on popular mobiles like Apple iPhones Safari this gesture is already used as Back and Forward for navigation history

maybe swipe from middle ... just a thought.

JD

unread,
Apr 12, 2018, 9:41:32 AM4/12/18
to TiddlyWiki
hey BTC, I actually got it to work, try replacing the whole text of $:/core/ui/Buttons/single-tiddler-fab with the following:

\define textOnPath(text)
<svg width="100%" height="100%" viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<defs>
<path id="MyPath" d="M 100 100 a 50 50 0 1 0 35 85"/>
</defs>
<use xlink:href="#MyPath" fill="none" stroke="#ddd"/>
<text font-family="'Roboto', Arial, 'Lucida Grande', sans-serif" font-size="42.5">
<textPath xlink:href="#MyPath">
$text$
</textPath>
</text>
</svg>
\end

<$macrocall $name="textOnPath" text=<<currentTiddler>>/>

it looks like the variable used is still "currentTiddler", not "storytiddler"

however, I don't know if this is the kind of circular SVG path you meant, because with this style it's kind of hard to read the tiddler title? Also, actually looking for SVG paths online is harder than I thought lol

there must be a better path than this one 
d="M 100 100 a 50 50 0 1 0 35 85"


JD

unread,
Apr 12, 2018, 10:00:19 AM4/12/18
to TiddlyWiki
whoops! Spoke too soon. I'm sure it worked a while ago, but <<currentTiddler>> isn't the variable used now. 

also, the width, height, viewbox, and path are still something I find hard to grasp. I'll try to sort this out on the weekend. 

On Thursday, April 12, 2018 at 12:48:08 AM UTC+9, BurningTreeC wrote:

BurningTreeC

unread,
Apr 12, 2018, 11:30:21 AM4/12/18
to TiddlyWiki
Thanks JD, no problem! I solved it keeping something like a button and having a tooltip for identification 

now the single-tiddler fabs have a quick-note function by clicking them :)


BTC

Maarten

unread,
Apr 13, 2018, 12:20:02 PM4/13/18
to TiddlyWiki
hi JD,

nice work, but a strange thing: in one of my wikis (running on node,js) the sidebar pushes the story away and both are visible. But in the other, with (as far as I can discover ALL settings are the same), the sidebar slides open but the story stays in the same place and is only partly visible.

Any idea what can cause this?

Maarten


On Monday, April 2, 2018 at 7:37:26 PM UTC+2, JD wrote:
Hello folks, I've been playing around with Google's Material design and would like to share what I created so far...

http://j.d.material.tiddlyspot.com

...in hindsight, I think overwriting core image tiddlers (and "more tiddler actions" button) might not be the best way to go... So, for anybody who wants to try this out, there's that info for you. I'll probably cut those overwritten portions away in an update...

Oh. Please try out the palettes under Control Panel > Appearance > Material Tweaks, they're specifically designed for this theme...

***

I've been testing this with the v.v. amazing Noteself fork with a Cloudant account (and the android app! So freaking cool)... The
setup just made my life easier (I've been meaning to send some feedback but I've recently been very busy I'm sorry).

So, thanks, everyone. I've been enjoying my visits here in Google Groups. You guys are awesome innovators! I get shy just thinking about how little I can contribute... Y'all are some of the coolest forum-goers around.

JD

unread,
Apr 18, 2018, 10:24:43 AM4/18/18
to TiddlyWiki
Hi Maarten, sorry for the late rep! Have you found the root cause of this? I'm guessing there's a metrics tiddler (referenced by a stylesheet) that interferes with the stylesheet of this theme. 

I'm not trying to pry into your TW, but I'd like to inspect an empty version of the TW where this error is happening? If that's not too much to ask. We can continue this thread in PMs if you like 

JD

unread,
Apr 18, 2018, 10:30:39 AM4/18/18
to TiddlyWiki
Hey Bardy, 

On Thursday, April 12, 2018 at 11:15:26 AM UTC+9, bardy wrote:
> would you mind trying out the updated theme on the main Tiddlywiki site, or on Empty edition?

hi, it's my pleasure

just tried your current version 0.3.53
on both the main Tiddlywiki site and Empty edition

I think everything is OK now.

That's great!

one thing:
in the default Color theme
the color of the "Save" button is highlighted,
and after making some change, the "Save" button is grayed out

I think maybe it'd be more natural for an indicator
to be highlighted when there's change
and be grayed out when there's no change

This is a good observation, and I think this is because of how the theme is handling the save-wiki-dirty-indicator. I'd include consideration of this in an update (might be this weekend)


anyway I see this color can be simply changed at ControlPanel "Material Tweak", "Colors of save-wiki dirty indicator on Tools sidebar"
so it's not really a problem.

Yes, there's that, although I wish I could make it automatic hehe
 

another thing:
to "Make it swipable / tappable"
> Swipe from the left edge of the screen to open the sidebar (and from the right edge of the screen to close it)

on popular mobiles like Apple iPhones Safari this gesture is already used as Back and Forward for navigation history

maybe swipe from middle ... just a thought.

Oh, right! I'm not on iOS so I didn't even know about this. I'll look into BTC's HammerWidgets to see if enlarging the swipable area won't interfere with text selection. 

Thanks again!

Maarten

unread,
May 1, 2018, 4:17:11 PM5/1/18
to TiddlyWiki
hi JD,

when I deleted all tiddlers from a copy of my wiki the menu changed in its behavior and doesn't block the text of the tiddlers anymore. Any idea what can be the cause of what's happening in the original wiki?

Maarten

Kevin Kleinfelter

unread,
May 5, 2018, 5:59:27 PM5/5/18
to TiddlyWiki
The material theme always has the sidebar closed on initial page load (for a node.js TW).  I'd prefer it always open.  Curiously, this behavior is backwards from the built-in themes.

I understand that state tiddlers are not persisted with a node.js TW, so I tried https://tobibeer.github.io/tb5/#Hiding%20The%20Sidebar%20On%20Startup.  It sets the state tiddler during startup. But whether I set its config to 'yes' or 'no', the sidebar is not visible on initial page load when Material is the active theme.

How can I make Material always open with the sidebar visible?
TIA

JD

unread,
May 15, 2018, 10:38:53 AM5/15/18
to TiddlyWiki
Hey Maarten,

Sorry for the late reply! I just came back from a long vacation. 

when I deleted all tiddlers from a copy of my wiki the menu changed in its behavior and doesn't block the text of the tiddlers anymore. Any idea what can be the cause of what's happening in the original wiki?

I'm guessing it's CSS code declared either in a tiddler tagged $:/tags/Stylesheet , or any other normal tiddler containing <style></style> attributes.

One way I'd pinpoint the source of this is by using the browser's Inspect function, or by looking into internally styled tiddlers.

I hope the above items help!

JD

unread,
May 15, 2018, 11:27:38 AM5/15/18
to TiddlyWiki
Hi Kevin,

Sorry for the late reply, and very sorry to inform you that I would figure out a solution to this no sooner than next week, as this is a bug I would like to fix completely. 

@TiddlyTweeter

unread,
May 15, 2018, 12:15:56 PM5/15/18
to tiddl...@googlegroups.com
"(sort of)" in the title can go.

It works. Well.


Its still not ultimate optimal for the smallest screens. But, TBH, I'm not sure what ever would be.

The design issue on small is "how to make an elephant into a mouse?"

Designing look for TINY smartphones I think, ultimately, is about, also, making suited software too. Then matching THAT with appropriate styling. Styling backwards from complexity to simplicity (when Gerald is only LARGE) is not optimal.

I think you gone pretty far into it in CSS to translate those worlds pretty well.

Just opinions, I'm happy to give up (on evidence :) if its viable to go further.

@TiddlyTweeter, x

Kevin Kleinfelter

unread,
Jun 20, 2018, 9:13:10 AM6/20/18
to TiddlyWiki
Hello JD,
Did you ever come up with a solution?  Even a hack that sorta-mostly works?
Thanks!

E Browns

unread,
Jun 20, 2018, 10:47:13 AM6/20/18
to tiddl...@googlegroups.com
Hi Kevin, 

Oh my, sorry for the delay, it's been a rough few weeks at work and I haven't been able to do backdoor TW stuff for a while now. 

If you can wait, I'll update the theme by the weekend. I'm guessing I can do default-sidebar-open by setting the various $reveal widgets to have default="yes" values for anywhere it applies to the sidebar.

Sorry for the delay, and thanks for following up on this! 

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/qiS1Vs46EQw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@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/ae3c13f2-9d5b-4064-8e14-393631345d34%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

TonyM

unread,
Jun 20, 2018, 7:41:47 PM6/20/18
to TiddlyWiki
Josiah,

On the issue of TiddlyWiki on desktops AND Small devices. 

The answer has being responsive design for some time now, where usually the same design for large and small responds to the change in screen size. I have being doing this for an online shop, however I often find I need to include or exclude items from the different views. 

Now with the changes in tiddlywiki the size can be interrogated and the reveal widgets set to respond. This could be used to switch themes altogether, including variations of themes.

My personal experience suggests we cant always depend on responsive elements to work for all cases.  There is value on testing a solution on both platforms, if they only need a little tweaking, change some elements, if you need a lot of tweaking change the whole theme (in response to screen size).

I suspect individuals have spent time on this already and that tiddlywiki has some predictable areas that need different handling. It would be nice to try and get people to tell us about their tricks in a generic way so we can build a resource to this effect. As is often the case the best solutions are already out there it is just hard to collect less concrete ideas into a resource.

Regards
Tony

Mohammad

unread,
Jun 21, 2018, 2:10:00 AM6/21/18
to TiddlyWiki
Hi JD,
 Impressive theme, it should be bundled with TW release. Why not?

/Mohammaf

@TiddlyTweeter

unread,
Jun 21, 2018, 6:31:13 AM6/21/18
to TiddlyWiki
Right the combination of "responsive CSS" and TW "Startup State Sensing" is promising. CSS is a really potent area of TW usage. As is we have great example results (JD, Telmiger, Riz and likely more) that simplify & clarify how to make TW look better. Some kind of synoptic overview of how to use the two together ("Startup Sensing" & "Responsive CSS") might help. Changes in the variety of ways Custom CSS can be applied in the latest release are also relevant.

Josiah

TonyM wrote:
On the issue of TiddlyWiki on desktops AND Small devices. 

... Now with the changes in tiddlywiki the size can be interrogated and the reveal widgets set to respond. This could be used to switch themes altogether, including variations of themes.

My personal experience suggests we cant always depend on responsive elements to work for all cases...

I suspect individuals have spent time on this already ... It would be nice to try and get people to tell us about their tricks in a generic way so we can build a resource to this effect. As is often the case the best solutions are already out there it is just hard to collect less concrete ideas into a resource.

JD

unread,
Jun 23, 2018, 4:41:20 AM6/23/18
to TiddlyWiki
Hi Kevin, 

I updated the theme so that it's possible to select the default sidebar state when $:/state/sidebar is missing (Control Panel > Appearance Material Tweaks). 

Is it that restarting / reopening TWs on node.js deletes $:/state/sidebar? Shooting in the dark here, as I don't know how to use node.js, but when I close the sidebar then save my wiki, the sidebar remains closed when I reopen the wiki. All of this in tiddlyspot, by the way, using Vanilla theme. 

OTHER UPDATES:
  • Updated the demo site to TW5.1.17
  • Updated implementation of BTC's HammerWidgets and HammerJS (the theme will detect if these two plugins are installed, and will automatically apply swipe+tap capabilities specific to the theme. There's no longer a need for an additional theme tiddler)
  • The theme no longer edits the palettes within it. Only the configDB is being edited when tweaking the theme in Control Panel > Appearance > Material Tweaks
  • Added links to TheDiveO's RobotoFont plugin, Material icons, and BTC's widgets under the Miscellaneous section in Control Panel > Appearance Material Tweaks
  • The theme is now more mindful of the core color palettes, and will look nice even when not using the Material palettes it has built-in (I've recently been digging the core Blue Palette).
If you're updating, please delete with the following filter first: [all[shadows+tiddlers]prefix[$:/themes/jd/Material]]

-JD

Jeremy Ruston

unread,
Jun 23, 2018, 5:22:49 AM6/23/18
to tiddl...@googlegroups.com
Hi JD


On 23 Jun 2018, at 09:41, JD <jologsd...@gmail.com> wrote:

Is it that restarting / reopening TWs on node.js deletes $:/state/sidebar? Shooting in the dark here, as I don't know how to use node.js, but when I close the sidebar then save my wiki, the sidebar remains closed when I reopen the wiki. All of this in tiddlyspot, by the way, using Vanilla theme. 

$:/state/ tiddlers are not synced back to the server under Node.js. It’s a bit of a hack to avoid different state information from different users interfering with one another.

Best wishes

Jeremy

@TiddlyTweeter

unread,
Jun 23, 2018, 5:48:47 AM6/23/18
to TiddlyWiki
Ciao JD

Seriously good improvements. A few notes after some testing:

(1) on first update you can get a JavaScript RSOD (Firefox Win ESR v52.8). I am not sure this actually is an error but its known that sometimes you need install a plugin, save and refresh, then refresh again. I'm not sure why. It may have something to do with how the initial settings get applied. If the RSOD comes up again in other contexts I will let you know.

(2) Simple point. When you release a new version please give the link again to: http://j.d.material.tiddlyspot.com/. Some readers will be new and won't have ever read the first post (early April) or know how to find it.

(3) I had a look at your developing Spartan Theme at http://j.d.spartan.tiddlyspot.com/ -- looking good!

Best wishes
Josiah


JD wrote:
Hi Kevin, 

I updated the theme so that it's possible to select the default sidebar state when $:/state/sidebar is missing (Control Panel > Appearance Material Tweaks). 
<snip>
OTHER UPDATES:
  • Updated the demo site to TW5.1.17
  • Updated implementation of BTC's HammerWidgets and HammerJS (the theme will detect if these two plugins are installed, and will automatically apply swipe+tap capabilities specific to the theme. There's no longer a need for an additional theme tiddler)
  • The theme no longer edits the palettes within it. Only the configDB is being edited when tweaking the theme in Control Panel > Appearance > Material Tweaks
  • Added links to TheDiveO's RobotoFont plugin, Material icons, and BTC's widgets under the Miscellaneous section in Control Panel > Appearance Material Tweaks
  • The theme is now more mindful of the core color palettes, and will look nice even when not using the Material palettes it has built-in (I've recently been digging the core Blue Palette).
<snip>

JD

unread,
Jun 23, 2018, 6:11:31 AM6/23/18
to TiddlyWiki
Hi Jeremy,

Thanks for the info! This is useful to keep in mind for people like me who don't use node.js but make use of $:/state/ tiddlers.

- JD

@TiddlyTweeter

unread,
Jun 23, 2018, 6:12:35 AM6/23/18
to TiddlyWiki
Ciao again JD

Small info footnote ...

This thread is fact approaching 100 posts. This is #97.

When it reaches, on the WEB version of Google Groups, anything over 100 starts to get complicated to read as the posts start paginating.

Suggest you start a new thread.

Just a thought
Josiah

It is loading more messages.
0 new messages