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

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.

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

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

[Adam Antios]

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!

[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 for that to work. And then you have to define the shortcut itself. 

I just finished documenting how at the demo site.  

Thanks!

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

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

[Mohammad]

Great Job!

Keep going on.

Best

Mohammad

[Adam]

If you press the search button and write, for instance, "Sidebar" in the shadow tiddlers, then there is a bug because the available tiddlers don't fit the space of the list.

Also the option Default Sidebar Tab is bugged and doesn't usually (?) work.

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

[@TiddlyTweeter]

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

[Adam]

JD,

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

Cheers,

Adam

[JD]

On Tuesday, July 3, 2018 at 1:14:04 AM UTC+9, @TiddlyTweeter wrote:

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

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

JD wrote:

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

[Adam]

Don't worry, GitHub is just a service. Git is the software that you are actually learning and I believe is the best way to achieve version control in software. I am a complete noob myself regarding Git and all the services that provide it so there is no need to worry if you make mistakes as no one is going to judge you! The good thing is that you have created something great (your theme) and get to learn Git by trying to improve it.

Adam

[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}};
}

[Mohammad]

Hi JD

First thank you for the great Material theme and appreciate your all efforts.

I am adopting the theme for TW-Docs and see some small issues:

1. The search result run out the border of search body and needs a overflow-y: scroll;

2. The color of visited link and tag pill is the same and for most color scheme the visited link hardly can be read

3. The TW 5.1.20+ core supports the keyboard shortcuts, so I may recommend to update the theme to new TW

4. When you click new tiddler, the top section of tiddler is hidden under top menubar and needs a little tweaking (now one has to scroll and bring tiddler down to be able to edit the title field

I would much appreciate if you kindly to have a look and let me know your opinion on this. I would welcome if I can be of any help.

--Mohammad 

On Saturday, June 23, 2018 at 3:07:32 PM UTC+4:30, JD wrote: