[tw] Material Theme for TW5 (sort of)

[JD]

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]

Lovely! I love the palettes and palette names. Lumpy space princess?

Post by JD
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]

Hey, thanks! Yeah, those colors remind me of LSP from Adventure Time... I
guess that cartoon is not that popular nowadays 😅

Post by David Gifford
Lovely! I love the palettes and palette names. Lumpy space princess?

[m***@gmail.com]

I really enjoy this theme, I will try it for my next mobile-based
tiddlywiki project.

Thanks!

Post by JD
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]

Thanks, man. If you encounter problems with this theme please let me know
:)

Post by m***@gmail.com
I really enjoy this theme, I will try it for my next mobile-based
tiddlywiki project.
Thanks!

[TonyM]

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

Post by JD
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]

Thanks for the compliments! I hope a future update to Vanilla theme would
have sidebar-left as an option, at least.

Post by TonyM
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

[ruby]

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?

[JD]

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 :)

Post by ruby
tried. very nice. you're genious
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?

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

Post by ruby
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

[@TiddlyTweeter]

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

[TonyM]

Josiah,

I can see FAB anywhere?

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

Tony

Post by @TiddlyTweeter
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

[@TiddlyTweeter]

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

Post by TonyM
Josiah,
I cant see FAB anywhere?
With respect what are to talking about, it is hard to comment on something
we cant see?
Tony

Post by @TiddlyTweeter
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

[TonyM]

Thanks The Fab Button is Cool,

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

Thanks
Tony

Post by @TiddlyTweeter
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

Post by TonyM
Josiah,
I cant see FAB anywhere?
With respect what are to talking about, it is hard to comment on
something we cant see?
Tony

Post by @TiddlyTweeter
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

[@TiddlyTweeter]

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.

Post by TonyM
Thanks The Fab Button is Cool,
I only found the secondaries on hover above the first fab button.

[JD]

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>

Post by @TiddlyTweeter
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

Post by TonyM
Josiah,
I cant see FAB anywhere?
With respect what are to talking about, it is hard to comment on
something we cant see?
Tony

Post by @TiddlyTweeter
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

[TonyM]

JD,

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

Tony

Post by JD
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.
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>

Post by @TiddlyTweeter
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

Post by TonyM
Josiah,
I cant see FAB anywhere?
With respect what are to talking about, it is hard to comment on
something we cant see?
Tony

Post by @TiddlyTweeter
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

[BurningTreeC]

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

Post by JD
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]

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
<https://github.com/NoteSelf/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
<https://tiddlywiki.com/#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 <http://tiddlypiano.tiddlyspot.com/>! 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:

<Loading Image...>

Post by BurningTreeC
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

Post by JD
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/
<http://www.google.com/url?q=http%3A%2F%2Ftiddlypiano.tiddlyspot.com%2F&sa=D&sntz=1&usg=AFQjCNEvSbxDGa6lqjfpNBE8Hl8lrfLTOQ>
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

[BurningTreeC]

Post by JD
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 <https://tiddlywiki.com/#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 <http://tiddlypiano.tiddlyspot.com/>! 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

Post by JD
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
<https://i.imgur.com/upV6DGm.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

[JD]

Thanks BTC! I'll update the widgets on my demo page!

Post by BurningTreeC
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

[BurningTreeC]

Post by JD
Thanks BTC! I'll update the widgets on my demo page!
EDIT: Sorry for my ignorant question, is the updated Swipe widget on
Muritest <http://muritest.tiddlyspot.com/> , and the HammerJS library on
GitHub
<https://github.com/Jermolene/TiddlyWiki5/tree/master/plugins/tiddlywiki/hammerjs>
?
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

[ruby]

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]

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
<http://j.d.material.tiddlyspot.com/#%24%3A%2Fthemes%2Fjd%2FMaterial%2FTemplate%2FSwipeArea> tiddler?
I can't replicate the problem. I can go back and forth between themes just
fine (please see attached file)... please elaborate?

<Loading Image...>

Post by ruby
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?
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.

[@TiddlyTweeter]

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

[JD]

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

Post by @TiddlyTweeter
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]

Ciao JD

JD wrote ...

Post by JD
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

[@TiddlyTweeter]

REQUEST

Could the SIZE of the FAB circles be user changeable?

Best wishes
Josiah

[@TiddlyTweeter]

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

[JD]

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

Post by @TiddlyTweeter
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

[@TiddlyTweeter]

EXCELLENT. Spot-on.

Tx.

Post by JD
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

Post by @TiddlyTweeter
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

[@TiddlyTweeter]

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

[JD]

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/

Post by @TiddlyTweeter
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]

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

Post by JD
It's actually quite easy to excise the tiddlers related to the FAB
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/

Post by @TiddlyTweeter
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

[BurningTreeC]

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

[JD]

So cool! I'll update the demo theme page with this one!

Post by BurningTreeC
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

[BurningTreeC]

@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

[JD]

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 😅

Post by BurningTreeC
@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

[BurningTreeC]

Post by JD
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

[JD]

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

Post by JD
Oh! haha! I'm still testing out methods on how to reveal the secondary

Post by JD
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]

Post by JD
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]

Dear Dynamic Duo, BTC (Batman) and JD (Robin) :-)

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]

Post by @TiddlyTweeter
-- 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]

Will do. Give me a few days so I can be precise.

Post by BurningTreeC

Post by @TiddlyTweeter
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)?

[JD]

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)...

Post by @TiddlyTweeter
Dear Dynamic Duo, BTC (Batman) and JD (Robin) :-)
http://youtu.be/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

[JD]

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!

Post by JD
Oh man, by using that feature of the dynaview plugin, it looks like I

Post by JD
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
$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"
<$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]

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
<https://wikilabs.github.io/editions/bundler/#%24%3A%2Fplugins%2Fwikilabs%2Fbundler>
to assemble complete packages for those who want them.

... 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]

I just got acquainted with this plugin (PMarios's Bundler). Thanks for the
info!

Post by @TiddlyTweeter
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
<https://wikilabs.github.io/editions/bundler/#%24%3A%2Fplugins%2Fwikilabs%2Fbundler>
to assemble complete packages for those who want them.
EDIT: By which I mean packages of plugins.

... 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!

[BurningTreeC]

@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]

Post by BurningTreeC
@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
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

[JD]

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

Post by BurningTreeC
@JD ... I tried my idea with the moveable button - an error happened that

Post by BurningTreeC
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
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

[Jeremy Ruston]

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
***@jermolene.com
https://jermolene.com

Post by JD
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.
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]

Oh, wow, that's really nice coming from you Jeremy! Thanks! 😁

Post by Jeremy Ruston
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
https://jermolene.com

Post by JD
Hello folks, I've been playing around with Google's Material design and

would like to share what I created so far...

Post by JD
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...

Post by JD
Oh. Please try out the palettes under Control Panel > Appearance >

Material Tweaks, they're specifically designed for this theme...

Post by JD
***
I've been testing this with the v.v. amazing Noteself fork with a

Cloudant account (and the android app! So freaking cool)... The

Post by JD
setup just made my life easier (I've been meaning to send some feedback

but I've recently been very busy I'm sorry).

Post by JD
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.

Post by JD
--
You received this message because you are subscribed to the Google

Groups "TiddlyWiki" group.

Post by JD
To unsubscribe from this group and stop receiving emails from it, send

<javascript:>.

Post by JD
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.

Post by JD
For more options, visit https://groups.google.com/d/optout.

[ruby]

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...

Post by JD
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]

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

Post by ruby
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
http://testZoominMaterial.tiddlyspot.com/
<http://www.google.com/url?q=http%3A%2F%2FtestZoominMaterial.tiddlyspot.com%2F&sa=D&sntz=1&usg=AFQjCNGGUtKOkAvpfpeevBmOYu9uwE9eew>
http://testZoominMaterialMuri.tiddlyspot.com/
<http://www.google.com/url?q=http%3A%2F%2FtestZoominMaterialMuri.tiddlyspot.com%2F&sa=D&sntz=1&usg=AFQjCNHDP-QDqoe6L38_uKCLYckKAk0YYA>
and at at http://j.d.material.muri.tiddlyspot.com/
<http://www.google.com/url?q=http%3A%2F%2Fj.d.material.muri.tiddlyspot.com%2F&sa=D&sntz=1&usg=AFQjCNFPCVsTP-4Ehot55rc5U6GhsUclIg>
there's swipe-area layer for swipe
and can not go back and forth between themes
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...

Post by JD
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

Post by JD
fine (please see attached file)... please elaborate?

[BurningTreeC]

The Pan, Press and Tap widgets are now online
at http://hammerwidgets.tiddlyspot.com/

Have fun!

BTC

[JD]

Thanks BTC! Swipe + Tap work awesome together!

The Pan, Press and Tap widgets are now online at
http://hammerwidgets.tiddlyspot.com/
Have fun!
BTC

[ruby]

hi,
as said here http://j.d.material.tiddlyspot.com/ :> 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]

@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]

@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]

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 :)

Post by BurningTreeC
@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

[BurningTreeC]

@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

then you can 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]

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--

Post by BurningTreeC
@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
<$list filter="[[$:/state/dragging]!is[missing]]">
iframe {
pointer-events: none;
}
</$list>
..maybe add !important if it doesn't work without

[BurningTreeC]

Post by JD
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

http://moveablefab.tiddlyspot.com/

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

[JD]

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)

Post by JD
oh, yeah, that was pointed out in the official HammerWidgets page, too

Post by JD
(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

http://moveablefab.tiddlyspot.com/
I've made progress - not much widget-tweaking but the fab itself and how
the widgets handle states

[BurningTreeC]

Post by JD
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

Post by JD
\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?

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?

Post by JD
(My day's about to end, will continue tomorrow)
no problem, read you next time

BTC

[BurningTreeC]

\define mymacro()
list
action
bla
\end

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

works, too

[BurningTreeC]

@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]

... 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

[JD]

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!

Post by ruby
hi,

Post by ruby
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

[ruby]

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

Post by JD
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 ...

[JD]

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!

Post by ruby
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.
*
[[$:/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

Post by JD
Oh my, Bardy, looks like the theme tiddlers at
http://emptymaterial.tiddlyspot.com/ are not in sync with each other.

Do

Post by JD
you mind going over the following steps? I just want to know the cause

of

Post by JD
the problem (which I see as the tiddler frame not filling the story

river)

Post by JD
1. Go to filter search, copy+paste ... delete ... drag again ...

[BurningTreeC]

@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]

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

Post by BurningTreeC
@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

[BurningTreeC]

Post by JD
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

Post by JD
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>
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]

@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]

Hey BTC, sorry I got caught up in something. Yes, I'd like to help!

Post by BurningTreeC
@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

[BurningTreeC]

Post by JD
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

[JD]

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"

Post by JD
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

[JD]

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.

Post by JD
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

[BurningTreeC]

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

[ruby]

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]

Hey Bardy,

Post by JD

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!

Post by JD
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

Post by JD
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

Post by JD
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]

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

Post by JD
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]

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

Post by Maarten
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

Post by JD
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.

[Maarten]

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

Post by JD
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

Post by Maarten
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

Post by JD
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.

[Kevin Kleinfelter]

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

[Kevin Kleinfelter]

Hello JD,
Did you ever come up with a solution? Even a hack that sorta-mostly works?
Thanks!

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.

Post by Kevin Kleinfelter
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.

[E Browns]

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!

Post by Kevin Kleinfelter
Hello JD,
Did you ever come up with a solution? Even a hack that sorta-mostly works?
Thanks!

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.

Post by Kevin Kleinfelter
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.
--

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
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
<https://groups.google.com/d/msgid/tiddlywiki/ae3c13f2-9d5b-4064-8e14-393631345d34%40googlegroups.com?utm_medium=email&utm_source=footer>
.
For more options, visit https://groups.google.com/d/optout.

[Mohammad]

Hi JD,
Impressive theme, it should be bundled with TW release. Why not?

/Mohammaf

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!

Post by Kevin Kleinfelter
Hello JD,
Did you ever come up with a solution? Even a hack that sorta-mostly works?
Thanks!

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.

Post by Kevin Kleinfelter
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.
--

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
<javascript:>.
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
<https://groups.google.com/d/msgid/tiddlywiki/ae3c13f2-9d5b-4064-8e14-393631345d34%40googlegroups.com?utm_medium=email&utm_source=footer>
.
For more options, visit https://groups.google.com/d/optout.

[JD]

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

Post by Kevin Kleinfelter
Hello JD,
Did you ever come up with a solution? Even a hack that sorta-mostly works?
Thanks!

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.

Post by Kevin Kleinfelter
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.

[Jeremy Ruston]

Hi JD

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

[JD]

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

Post by JD
Hi JD
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]

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

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>

[@TiddlyTweeter]

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

[@TiddlyTweeter]

Post by @TiddlyTweeter
Ciao again JD
Small info footnote ...
This thread is fact approaching 100 posts. This is #98.
When it reaches, on the WEB version of Google Groups, anything over 100
starts to get complicated to read as the posts start paginating.

UPDATE: Its already started paginating. :-)

Post by @TiddlyTweeter
Suggest you start a new thread.
Just a thought
Josiah

[JD]

Aha! I guess I should officially re-anounce it?

Post by @TiddlyTweeter

Post by @TiddlyTweeter
Ciao again JD
Small info footnote ...
This thread is fact approaching 100 posts. This is #98.
When it reaches, on the WEB version of Google Groups, anything over 100
starts to get complicated to read as the posts start paginating.

UPDATE: Its already started paginating. :-)

Post by @TiddlyTweeter
Suggest you start a new thread.
Just a thought
Josiah

[JD]

New thread here
<https://groups.google.com/forum/#!topic/tiddlywiki/Fk5FivkKNvg>, everyone.
Please redirect bug reports there :)

Post by JD
Aha! I guess I should officially re-anounce it?

Post by @TiddlyTweeter

Post by @TiddlyTweeter
Ciao again JD
Small info footnote ...
This thread is fact approaching 100 posts. This is #98.
When it reaches, on the WEB version of Google Groups, anything over 100
starts to get complicated to read as the posts start paginating.

UPDATE: Its already started paginating. :-)

Post by @TiddlyTweeter
Suggest you start a new thread.
Just a thought
Josiah

[JD]

Post by @TiddlyTweeter
Ciao JD

Hi Josiah, it's always nice to read your posts. Thanks for looking into
this theme!


(1) on first update you can get a JavaScript RSOD (Firefox Win ESR v52.8).

Post by @TiddlyTweeter
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.

Oh, I wonder what could be causing it. This is a JS-free theme (besides of
course, relying on core TW scripts). Please do inform if this comes up
again in relation to this theme. I'm wondering if it has anything to do
with HammerWidgets or HammerJS? It's not packaged with Material Theme, but
some theme tiddlers look for its existence.


(2) Simple point. When you release a new version *please give the link

Post by @TiddlyTweeter
again* to: http://j.d.material.tiddlyspot.com/
<http://www.google.com/url?q=http%3A%2F%2Fj.d.material.tiddlyspot.com%2F&sa=D&sntz=1&usg=AFQjCNEQyehnmy4rw0I28mOqRuv4NjVzYQ>.
Some readers will be new and won't have ever read the first post (early
April) or know how to find it.

Thanks for the reminder! I forget to re-announce 😅


(3) I had a look at your developing Spartan Theme at

Post by @TiddlyTweeter
http://j.d.spartan.tiddlyspot.com/ -- looking good!

Thanks, although I wonder if I'll ever release that. It's testing the
limits of minimalist design and is specifically designed for my use-case.
I've recently fallen inlove with BTC's KeeBoord plugin, and with it I ran
the idea of a pseudo-commandline searchbar that can open / edit tiddlers
called by it. The whole point of Spartan Theme is to let me use the
keyboard more.

Again, thanks for the feedback!

-JD

Post by @TiddlyTweeter

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>

[TonyM]

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

"(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

[@TiddlyTweeter]

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

Post by TonyM
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.