[tw5] Material Theme for TW5 (still sort-of 😅)

[JD]

Hello everyone,

The original thread where I first shared this theme might be too long now
for new users (old thread here
<https://groups.google.com/forum/#!topic/TiddlyWiki/qiS1Vs46EQw%5B1-25%5D>),
so I'm going to re-share it, along with some updates.

This is my *Material Theme for TW5* (demo here:
http://j.d.material.tiddlyspot.com/), loosely following Google's Material
design guidelines. This theme has a built-in mobile layout and color
palettes that you can tweak at *Control Panel* > *Appearance *> *Material
Tweaks*

I rely on your feedback and bug reports, please inform me about them here.


*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).
- Added ability to select the default sidebar state when
*$:/state/sidebar* is missing (*Control Panel* > *Appearance *> *Material
Tweaks*)

If you're updating, please delete with the following filter first:
*[all[shadows+tiddlers]prefix[$:/themes/jd/Material]]*

-JD

[@TiddlyTweeter]

JD

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.

Very likely. The RSOD that disappears on second refresh usually relates to
JS plugins that on first run change some things that need a reload to
activate.

J.

[@TiddlyTweeter]

JD

I understand this is a Theme, not a plugin. But it might be worth a thought
creating a "package" that will install the Theme & the Hammer support in
ONE go. So the user does not have to do more than one download?

Have you seen PMario's BUNDLER? It will wrap in one JSON all components
needed. Its really easy. Its designed exactly for this kind of situation: The
Bundler
<https://wikilabs.github.io/editions/bundler/#%24%3A%2Fplugins%2Fwikilabs%2Fbundler>

Just thoughts
Josiah

[JD]

Hi Josiah,

Yes, the demo site has been using The Bundler for a while now. The
draggable tagpill Material Theme + icons + HammerWidgets is meant to
represent that, although I take it from your comment that it isn't as easy
to understand as I initially thought. I updated the demo site to hopefully
reflect this.

Post by @TiddlyTweeter
JD
I understand this is a Theme, not a plugin. But it might be worth a
thought creating a "package" that will install the Theme & the Hammer
support in ONE go. So the user does not have to do more than one download?
Have you seen PMario's BUNDLER? It will wrap in one JSON all components
needed. Its really easy. Its designed exactly for this kind of situation: The
Bundler
<https://wikilabs.github.io/editions/bundler/#%24%3A%2Fplugins%2Fwikilabs%2Fbundler>
Just thoughts
Josiah

[@TiddlyTweeter]

Great! I think that change will help. (No, it was not clear, at least to
me, that there was a one drag option of "all needed".)

Best wishes
Josiah

Post by JD
Yes, the demo site has been using The Bundler for a while now. The
draggable tagpill Material Theme + icons + HammerWidgets is meant to
represent that, although I take it from your comment that it isn't as easy
to understand as I initially thought. I updated the demo site to hopefully
reflect this.

[Diego Mesa]

JD:

*WOW - PLEASE lets try to get this in the core!!*

The ctrl+space for bringing up the search bar - this is *exactly* what
Ive wanted for so long!!! I'm so happy!! Thank you!!

Post by @TiddlyTweeter
Great! I think that change will help. (No, it was not clear, at least to
me, that there was a one drag option of "all needed".)
Best wishes
Josiah

Post by JD
Yes, the demo site has been using The Bundler for a while now. The
draggable tagpill Material Theme + icons + HammerWidgets is meant to
represent that, although I take it from your comment that it isn't as easy
to understand as I initially thought. I updated the demo site to hopefully
reflect this.

[JD]

Hi Diego!

I think there's still a long way to go before I can agree to that, but gee,
thanks! :D

Regarding ctrl+space for bringing up the search bar, you have to install BTC's
KeeBoord Plugin <http://keeboord.tiddlyspot.com/> for that to work. And
then you have to define the shortcut itself.

I just finished documenting how at the demo site.

Thanks!

Post by Diego Mesa
*WOW - PLEASE lets try to get this in the core!!*
The ctrl+space for bringing up the search bar - this is *exactly* what
Ive wanted for so long!!! I'm so happy!! Thank you!!

Post by @TiddlyTweeter
Great! I think that change will help. (No, it was not clear, at least to
me, that there was a one drag option of "all needed".)
Best wishes
Josiah

Post by JD
Yes, the demo site has been using The Bundler for a while now. The
draggable tagpill Material Theme + icons + HammerWidgets is meant to
represent that, although I take it from your comment that it isn't as easy
to understand as I initially thought. I updated the demo site to hopefully
reflect this.

[Adam Antios]

This post might be inappropriate. Click to display it.

[JD]

Oh, wow, thanks for the feedback and suggestion! Once I'm properly
acquainted with either of those I'll maybe create a space for this theme
there. Aside from the features you mentioned, I'm also a little bit worried
that this thread might be hijacking people's inboxes too much 😅

I found your theme yesterday and I am amazed with how gorgeous it is. I
haven't searched the whole conversation so I don't know if someone has
already talked about this but you should definitely create a GitHub/GitLab
page for it. That way you will have more control about feature requests and
bugs. Also that amazing theme will have a home and gain more traction.
Seriously it has great potential, don't work on in through Google Groups!

[Abraham Samma]

Hello JD,

First off, let me just say WOW to your effort to apply MD to TW5. Great job.

Second, though the app looks great and fast on desktop, it feels slightly
but noticeably slower on a mobile phone (for understandable reasons;
reducing animation duration to zero improves this somewhat).

Third, opening and closing the drawer to access tiddlers can get a little
tiring. Most users would expect the drawer to automatically close after
selecting something in mobile apps. I think we can improve this
functionality for TW5 in general somehow.

Overall, this has great potential. Great job again.

Post by JD
Hello everyone,
The original thread where I first shared this theme might be too long now
for new users (old thread here
<https://groups.google.com/forum/#!topic/TiddlyWiki/qiS1Vs46EQw%5B1-25%5D>),
so I'm going to re-share it, along with some updates.
http://j.d.material.tiddlyspot.com/), loosely following Google's Material
design guidelines. This theme has a built-in mobile layout and color
palettes that you can tweak at *Control Panel* > *Appearance *> *Material
Tweaks*
I rely on your feedback and bug reports, please inform me about them here.
*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).
- Added ability to select the default sidebar state when
*$:/state/sidebar* is missing (*Control Panel* > *Appearance *> *Material
Tweaks*)
*[all[shadows+tiddlers]prefix[$:/themes/jd/Material]]*
-JD

[Mohammad]

Great Job!
Keep going on.

Best
Mohammad

Post by JD
Hello everyone,
The original thread where I first shared this theme might be too long now
for new users (old thread here
<https://groups.google.com/forum/#!topic/TiddlyWiki/qiS1Vs46EQw%5B1-25%5D>),
so I'm going to re-share it, along with some updates.
http://j.d.material.tiddlyspot.com/), loosely following Google's Material
design guidelines. This theme has a built-in mobile layout and color
palettes that you can tweak at *Control Panel* > *Appearance *> *Material
Tweaks*
I rely on your feedback and bug reports, please inform me about them here.
*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).
- Added ability to select the default sidebar state when
*$:/state/sidebar* is missing (*Control Panel* > *Appearance *> *Material
Tweaks*)
*[all[shadows+tiddlers]prefix[$:/themes/jd/Material]]*
-JD

[Adam]

If you press the search button and for instance search for Sidebar in the
shadow tiddlers then there is a bug because the available tiddlers are more
than the space of the list.

[Adam]

Greetings,

because I have found some more bugs in the theme, I would like to ask you
whether you have uploaded it to a repository, so issues can be created for
them.

If we mention bugs here then we can't keep track of them and also we can't
know if there is progress resolving them. Ultimately we don't really know
when to update the theme we have installed.

I have been using your theme for many days now and it is magnificent. Keep
up the good work and thank you for it!

Kind regards,
Adam

[JD]

Hey man, it seems it really would be easier to track this in a centralized
place.

I created the repository as suggested... It's
here: https://github.com/jdjdjdjdjdjd/TW5-Material

Please do report issues there, and thanks again for your feedback!

Post by Adam
Greetings,
because I have found some more bugs in the theme, I would like to ask you
whether you have uploaded it to a repository, so issues can be created for
them.
If we mention bugs here then we can't keep track of them and also we can't
know if there is progress resolving them. Ultimately we don't really know
when to update the theme we have installed.
I have been using your theme for many days now and it is magnificent. Keep
up the good work and thank you for it!
Kind regards,
Adam

[@TiddlyTweeter]

great name for a repository! though github.com/jdx6 might work too. J.

Post by JD
https://github.com/jdjdjdjdjdjd/TW5-Material
<https://www.google.com/url?q=https%3A%2F%2Fgithub.com%2Fjdjdjdjdjdjd%2FTW5-Material&sa=D&sntz=1&usg=AFQjCNFM8kqsMBIcdXraz46hiyyXuSXIvQ>

[Adam]

JD,

Amazing! You don't need to thank me, I use your theme as my main theme all
day!

Cheers,
Adam

[JD]

Post by @TiddlyTweeter
great name for a repository! though github.com/jdx6 might work too. J.

Oh snap! Well I quickly grabbed the first free multiple of "jd" still
available 🀣
Hopefully, this will help me keep this theme updated.
I will also move some other stuff to github and will present them here in
Google Groups if they ever become ready...
(or is that defeating its purpose?)


JD,

Post by @TiddlyTweeter
Amazing! You don't need to thank me, I use your theme as my main theme all
day!
Cheers,
Adam

Wow, that's really cool! Please don't hesitate to send feedback and bug
reports!

[@TiddlyTweeter]

GitHub, once you know what you are doing, I think is very good for software
maintenance. I, myself, never got to a PR yet, but I do comment on Issues
quite often there. Github does not have the serious problems Google Groups
has with lost history. It makes life easier, I think. The developer can
much better gauge where they are and what is important.

Just MO.
Josiah

... Hopefully, this will help me keep this theme updated.

[JD]

Oh, yeah. I'm barely scratching the surface with what I can do with it. Or
maybe I'm already at the surface. Well, from what I read on their docs the
best way to learn github is to use github. I guess we can also say that
about most software :D

Thanks for the info Josiah

-JD

Post by @TiddlyTweeter
GitHub, once you know what you are doing, I think is very good for
software maintenance. I, myself, never got to a PR yet, but I do comment on
Issues quite often there. Github does not have the serious problems Google
Groups has with lost history. It makes life easier, I think. The developer
can much better gauge where they are and what is important.
Just MO.
Josiah

... Hopefully, this will help me keep this theme updated.

[Adam]

This post might be inappropriate. Click to display it.

[Stobot]

This is a *fantastic* theme - thanks JD for putting together.

There are only a couple tweaks I'd like to make for myself that I can't
seem to figure out (CSS newbie). I think I need to adjust the following
section from $:/themes/jd/Material/Stylesheet

- I like the tiddler title big like it is normally in vanilla
- I like the tiddler title vertically aligned with the buttons (this
seems to have the title slightly *below* the icons, causing needless
whitespace)
- Don't need the floating "New Tiddler" button - though see that I can
make it 0px big, so I'm good there.

When I try to adjust for #1 in the "font-size" line, it affects the size of
the title and the icons - trying to change the title only. I added instead
a line on the View side which fixes it when in view mode at least. I can't
figure out how to not have the title fall below the icons/buttons
vertically though.

I'm assuming this is very easy - but I've been monkeying with it for over
an hour, so thought I'd see if an expert had an easy fix. Thanks all!

/* VIEW & EDIT FRAME */

.tc-tiddler-edit-frame .tc-tiddler-title,
.tc-tiddler-view-frame .tc-titlebar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: {{$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize}};
line-height: 0;
}


/* VIEW FRAME */

.tc-tiddler-view-frame .tc-title {
font-weight: bold;
}

.tc-tiddler-view-frame .tc-tiddler-title-icon svg {
height: {{$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize}};
}