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.
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>
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?
Yeah, a dedicated page for the widgets would surely help with spreading the word around. A concise info page like this tiddler for the ButtonWidget would make it easier for other users to implement it in their projects, I feel like.Oh, and yeah, thanks for pointing me towards the Press widget and tiddlypiano! I'd play with these in the coming weekend!Cheers :)
P.S. can I do a bug report here? Removing the "$targets" parameter on the swipe widget gives me a Red Window when I click the Save-tiddler button. And although the tiddler isn't saved after clicking the Save-tiddler button (without the "$targets" param), I can neither close nor erase the said tiddler... and I have to refresh the wiki to go back in time (so to speak).I ran into this problem while learning about the widget and learned how to avoid it, but this might scare first-time users? Let me visualize this with a gif:
Thanks BTC! I'll update the widgets on my demo page!
I think it's quite small, myself.
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 😅
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
-- 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.
... 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!
[prefix[$:/themes/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 lolBy the way, BTC... wait, maybe I'll post the rest of this thought over at the official thread
\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>
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)
(My day's about to end, will continue tomorrow)
<$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
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
Hey BTC, sorry I got caught up in something. Yes, I'd like to help!
\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>>/>
d="M 100 100 a 50 50 0 1 0 35 85"
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.
> 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.
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?
--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/qiS1Vs46EQw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/ae3c13f2-9d5b-4064-8e14-393631345d34%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
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.
On 23 Jun 2018, at 09:41, JD <jologsd...@gmail.com> wrote:Is it that restarting / reopening TWs on node.js deletes $:/state/sidebar? Shooting in the dark here, as I don't know how to use node.js, but when I close the sidebar then save my wiki, the sidebar remains closed when I reopen the wiki. All of this in tiddlyspot, by the way, using Vanilla theme.
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).
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).