[theme] Presenting "Mono" theme

[JD]

Hello everyone,

JD here, offering a kind of stark theme that incorporates my most personal needs for a writing interface:

[x] Sidebar to the <- left
[x] Built-in mobile layout
[x] Centered story river (when sidebar is closed)
[x] Sidebar segments visibility toggler at Control Panel 
[x] TopLeftBar buttons visibility toggler at Control Panel 
[x] EmptyStoryMessage template
[x] Splashcreen template
[x] TiddlerFrame style
[x] AdvancedSearch tabs on TopRightBar searchbar
[x] TopRightBar searchbar you can create a tiddler from like NTFS or NTFS19
[x] Font scroller button
[x] Day/night palete switcher button

Here is the main conceit of the mobile UI:

The main change has been to TopBarLeft and TopBarRight. They are still separated, but are now contained in a wrapper, like this:

<div class="tc-topbar tc-adjust-top-of-scroll">
<div class="tc-topbar-left">
(items tagged $:/tags/TopLeftBar)
</div>
<div class="tc-topbar-right">
(items tagged $:/tags/TopRightBar)
</div>
</div>

On desktop, the wrapper, tc-topbar, is by default arranged in a row... but on mobile it has this: flex-wrap: wrap;... so if tc-topbar-left has width: 100%;, tc-topbar-right will automatically be stacked below it.

By combining the left and right topbars, the special class tc-adjust-top-of-scroll is now incorporated to both the TopBarLeft and TopBarRight templates. This is especially useful for mobile UI.

I might extract just this bit into the next iteration of my MobilePlugin, albeit it will only be for TW5.1.19 and above.

You can try it out, and install from here:

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

A future update would be this:

[ ] hoverable buttons <- for next update

[ ] hoverable topbar on desktop <- for next update

 and some other stuff I'm forgetting right now

I've been using this with BTC's app, and it works so nice so I'm sharing this with you all :D

-jd

P.S.: 

Shoutout to BTC and his amazing development! I love it and it's great with an automatic GoogleDrive android->desktop syncer

Thank you everyone for the inspiration!

[h0p3]

It's stunning! Thank you.

[Greg Davis]

oohs and aahs, applause from the crowd!

Don't work on moble much but this may be very tempting on my laptop or desktop, like the menu on the left.

Played around in Firefox Responsive Design Mode and it seems to work on smaller screen sizes. Did notice an oddity, on width 800 and less the pallete selection option lost the last four choices, spartan etc.

Really great work, well done!
Greg

[Mohammad]

WOW!

This is amazing JD.

The dark theme and multi column layout are lovely.

Thank you JD

I hope I can back with some comments if any!

--Mohammad

[Mohammad]

One more thing

The search toolbar at the top left and its local drop down to access the advanced search is really handy and useful.

--Mohammad

On Monday, February 4, 2019 at 2:38:01 AM UTC+3:30, JD wrote:

[David Nebauer]

Very nice, indeed.

I did notice that on my work system (Windows 7, IE 11) the top bar (with main icons and search box) covers 3/4 of the title of the top-most tiddler and 1/2 of the view toolbar icons, with no way to scroll down sufficiently to bring those elements into view.

David

On Monday, 4 February 2019 08:38:01 UTC+9:30, JD wrote:

[Mohammad]

My Test on mobile is great

The editor toolbar, the topbar tools and searchbox work as expected.

Screenshots using Quinoid are attached!

On Desktop:

 Searchbox/Filter/ Delete icon (trashbin) works oddly!

 The dropdown menu overflows the screen right edge 

 and it should be displayed down-left instead of down right

Thank you

On Monday, February 4, 2019 at 2:38:01 AM UTC+3:30, JD wrote:

[Jeremy Ruston]

Hi JD

Great stuff, very impressive. It's great to see themes that make substantial mods to the UI.

Best wishes

Jeremy.

--

Jeremy Ruston

jer...@jermolene.com

https://jermolene.com

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/4c3d7f1b-022f-4410-b97f-b262fddaae78%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

<p01.jpeg>

<p02.jpeg>

<p03.jpeg>

[JD]

Hi Greg, 

Thanks!!! Hopefully the CSS is cross-compatible. Haven't run this through lint yet, I completely forgot to. 

Played around in Firefox Responsive Design Mode and it seems to work on smaller screen sizes. Did notice an oddity, on width 800 and less the pallete selection option lost the last four choices, spartan etc.

Oh my, I can't replicate this. I also tried this in Firefox RD, and at w<=800px I can scroll the whole page down to reveal the rest of the dropdown... 

Anyways, I'd look into it. Thanks again :)

-jd

[JD]

Hi David,

Thank you! 

Alas, IE doesn't support position:sticky (used by the topbar). I'll have to drop this current style and use position:fixed instead. I'll update the plugin with this change for compatibility soon. Thank you for the bug report!

-jd

[JD]

Hi Mohammad,

Thank you so much for posting screenshots! Those are good for documentation :D

I see what you mean with the FilterSearchButtons on desktop. I didn't want to overwrite core tiddlers, and their dropdown <$reveal/>'s don't have position="belowleft". 

I'll style around this, then, and will post an update soon. Thank you for the bug reports!

-jd

EDIT: I have to try Quinoid soon! SpartanNightPalette looks so nice with it, and I sorely miss the Android statusbar.

[JD]

Hi Jeremy,

Thank you! TiddlyWiki is so fun to style :D

-jd 

[Ton Gerner]

Hi JD,

Very, very nice; as eye pleasing as all your themes. Develop more!
I hope I can learn a lot from your designs.

Cheers,

Ton

[David Nebauer]

It has a different appearance on my home desktop system (Linux; qutebrowser, using QtWebEngine (Chromium 65.0.3325.230) backend). I've attached a couple screenshots showing the top left and top right corners of the screen. You can see most of the sidebar tabs are hidden under the button strip -- only two are showing while seven are hidden. There is an icon almost totally hidden at the top of the screen in the top right.

On the plus side, I can see the tiddler titles just fine!

A fantastic project! Please keep perfecting it.

David

[Mohammad]

Thank you JD.

Yes, on mobile it works great! The issue with Trashbin popup in on the desktop.

Cheers

Mohammad

[JD]

Hi Ton,

Wow, this is a lot coming from you! I got my inspiration and first ideas from your work! Thanks so much :)

-jd

[Ton Gerner]

Hi JD,

Glad to hear my work inspired you.

Cheers,

Ton

[Mohammad]

Small issues:

- When the story river is empty, the last ten modified tiddlers are shown.

Assume some of these tiddlers use a ViewTemplate and have nothing inside the body! Mono shows them as empty tiddler (A tiddler only have a title)

- When you turn on the SiteTitle, it seems the font size is big to show the site title correctly!

-Mohammad

[Donald Coates]

More amazingness, thank you.  

I am getting html in my sidebar.  screenshot attached.  I changed from whitespace to this.  On chromebook chrome.

I really appreciate the time you put into these themes and plugins.

[E Browns]

Hi Donald, 

Thank you!

Wow, that seems to be remnant code generated by WhiteSpace theme, maybe when previously a codeblock had been accidentally dragged into the sidebar? Doing that creates a sidebar tab, in that theme. 

Hopefully simply deleting that tiddler will help. Please do inform if this is a solution.

-jd

--
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/e1rXfFuUohA/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/f250387d-bce0-4011-888b-38462ab04339%40googlegroups.com.

[Greg Davis]

Hi JD,

So you know what I'm seeing.
Should probably mention this is WinXP SP3 and Firefox 52.9 ESR.
Greg

[Donald Coates]

Thanks for all your responses.

Interestingly I could not simply delete it in the wiki, even after removing the tag.  When I moved the code into the body of a tiddler and closed it the sidebar title Recent showed.  I changed the order in Whitespace to put Recent up top, so I am thinking that is the source of the problem.  That order, with Recent first, was maintained in the tabs of Mono.

I am running the node version so I was able to just go into the tiddlers directory and delete the file.  Most likely since it had a '_' prepended to the file name it would not delete through the browser.

These are of course all minor issues.  I love the themes.  I'm using Material with my Knowledge wiki, Whitespace with my Learning log, and Mono for writing practice - so you have completely invaded my personal space!

Again, as someone who punches a time clock 80+ hours a week, I truly appreciate the time you and all the others who contribute this project put in.  These themes in particular just really add a whole new level of feel to an already fantastic piece of software.

[Damon Pritchett]

Hi JD,

I love the theme. I've got one question. How did you get the sidebar to the left? That's what I love about this theme the most. 

Thanks,

Damon

[Damon Pritchett]

JD,

One other thing I just noticed. It appears that text in bullets do not wrap within the tiddler like it did before I moved to your theme. I can switch back and forth between the them I was previously using and the problem goes with the theme. I haven't investigated it thoroughly; only enough to characterize the behavior. Not a big deal, but thought you should know about it.

Damon

On Sunday, February 3, 2019 at 4:08:01 PM UTC-7, JD wrote:

[Damon Pritchett]

Found the wrapping problem. There's a style in your stylesheet defined as

 ul, li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

Damon

On Sunday, February 3, 2019 at 4:08:01 PM UTC-7, JD wrote:

[Damon Pritchett]

Sorry, I should have gone through all of this before I posted.

The bullets are missing entirely as well.

Damon

On Sunday, February 3, 2019 at 4:08:01 PM UTC-7, JD wrote:

[Mohammad]

The new update handle long titles greatly:

See the screenshot.

Cheers

Mohammad

[JD]

Hi everyone,

Thanks for the feedback and bug reports!

I'll try to have an update soon-ish, I'm having a rather busy week. Hopefully nothing gets broken with the next update!

-jd

[BurningTreeC]

Hi JD, forgive me that I'm using this thread for something not directly related:

I like your palettes a lot and often happen to just drag one over to one of my wikies, especially the spartan night palette

There's one stopper that needs me to add a line of css for the spartan night palette every time, it's the color of the tc-tiddlylink buttons and a-tags

I use a slightly more readable color for them (#5656f3;)

Would you mind giving it a shot if it also improves readability for you? I think it would improve the palette a lot

all the best,

btc

[E Browns]

http://j.d.palette.tiddlyspot.com/Hi BTC,

Thank you! Spartan Day and Night are my actual favorites. 

It's not a problem for me to update http://j.d.palette.tiddlyspot.com/ with your suggestion, as I constantly change my personal copy of the palette anyway (I tend towards redder colors more, recently. Sometimes harsh white accents when the mood strikes)

-jd

--

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/e1rXfFuUohA/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/3f1dc787-2add-40a5-b89c-0e8597ff5a93%40googlegroups.com.

[BurningTreeC]

http://j.d.palette.tiddlyspot.com/Hi BTC,

Thank you! Spartan Day and Night are my actual favorites. 

It's not a problem for me to update http://j.d.palette.tiddlyspot.com/ with your suggestion, as I constantly change my personal copy of the palette anyway (I tend towards redder colors more, recently. Sometimes harsh white accents when the mood strikes)

-jd

Thank you JD! 

[Jeremy Ruston]

Hi JD

These are great. I'd be interested in having them in the core: most of us struggle to make palettes that are effective, and yet they are quite small.

Best wishes

Jeremy

--

Jeremy Ruston

jer...@jermolene.com

https://jermolene.com

You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.

To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/CAOAd_aVs8WFF2JguCxe4yFmeAg6NSMe-HJV%2BHUxiVA-wdnH-jw%40mail.gmail.com.

[E Browns]

Hi Jeremy,

Thank you!

I  wonder if I have to convert some colors for that? Some of these palettes use rgba colors with opacities, which might not be compatible with some browsers. 

And also, I don't know how to actually request something be put into the core, nor the naming convention for a palette that isn't attached to a theme. 😅 

-jd

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/EDE183DA-9E79-44AC-ABC1-51A9E4C9F80B%40gmail.com.

[Damon Pritchett]

Hi JD,

I found the problem with the bullets for your mono theme. Under the ul, li elements, the overflow was set to hidden. Setting this to visible restored the bullets. Was there a particular reason you had it set that way? Would that change or any of the others I suggested above break anything?

Thanks,

Damon

[Jeremy Ruston]

Hi JD

I  wonder if I have to convert some colors for that? Some of these palettes use rgba colors with opacities, which might not be compatible with some browsers. 

We may be OK, support looks pretty broad now:

https://caniuse.com/#feat=css3-colors

And also, I don't know how to actually request something be put into the core, nor the naming convention for a palette that isn't attached to a theme. 😅 

Not a problem, I can easily copy them across if you're happy to contribute them?

Many thanks,

Jeremy

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/CAOAd_aUcxOdiHPLcH%2BHqJD--gc8J6GJWcEGtvgi49Fr4w6%3DA3w%40mail.gmail.com.

[Mohammad]

Great idea Jeremy,

 The theme and pallets by JD are useful an really gives a new face to TW.

Thank you for incorporating them into the core.

Best

Mohammad

[BurningTreeC]

Hi Jeremy,

Thank you!

I  wonder if I have to convert some colors for that? Some of these palettes use rgba colors with opacities, which might not be compatible with some browsers. 

And also, I don't know how to actually request something be put into the core, nor the naming convention for a palette that isn't attached to a theme. 😅 

-jd

Hi @JD, I think I can help you with the github part:

1. go to https://github.com/Jermolene/TiddlyWiki5/tree/master/core/palettes

2. click "Create new File"

3. give it a name like "Mono.tid"

4. add the following on top of the textarea

title: $:/palettes/Mono

tags: $:/tags/Palette

description: description

name: Mono

5. add a space below these lines

6. insert your palette text-content

7. go down to "Propose new File" and give it a title like "add Mono palette" - add a description if you like

8. click "Propose new File"

9. in the following window, click "Create Pull Request" and in the next window, click "Create Pull Request" again. PR created and ready to be discussed, edited, merged

I hope this helps!

A minor thing I found in your Spartan theme are the missing select-tag-background and select-tag-foreground colors, you could probably just add them while you're there,

but such a PR is not final and missing parts can always be added / changed later on

all the best,

btc

[BurningTreeC]

 

Hi @JD, I think I can help you with the github part:

1. go to https://github.com/Jermolene/TiddlyWiki5/tree/master/core/palettes

2. click "Create new File"

3. give it a name like "Mono.tid"

4. add the following on top of the textarea

title: $:/palettes/Mono

tags: $:/tags/Palette

description: description

name: Mono

5. add a space below these lines

a new line, I mean a new line

[JD]

Hello! 

Not an update to this theme (although please resend bug reports, prior notifications are hard to sift through I'm sorry!)

I added a Stylesheet that will make Mono.theme compatible with the very very cool Stories plugin. 

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

> Then the tiddler: $:/themes/jd/Mono/Stylesheet/StoriesPluginCompatibility

I tested the above stylesheet with:

> https://giffmex.org/stroll/empty.html

> https://akhater.github.io/drift/

Please do send issues my way!

-jd

[Saq Imtiaz]

Highly appreciated JD, thank you!

[Atronoush]

Lovely, thank you JD.

One minor comment: why the left column is a bit lower than the right?

Atro

[Birthe C]

JD,

Two stories plugin has two icons for showing the stories. Visible in sidebar open tab. But not if we use the theme switcher in page controls and shift to the dark theme. Show right column is visible but not hide right column.

Thank you so much for bringing the lovely two stories to your beautiful themes.

Birthe

[TW Tones]

JD,

I note at http://j.d.mono.tiddlyspot.com/ the tiddler http://j.d.mono.tiddlyspot.com/#TiddlyFox%20Apocalypse

Will mislead, Timimi is a more than adequate replacement for the old tiddlyfox see here 

https://tiddlywiki.com/#Timimi%3A%20WebExtension%20and%20Native%20Host%20by%20Riz

Regards

Tony

[TiddlyTweeter]

Ciao JD

Replying as of Late July 2020.

I'd like to suggest you make a "Plugin Library" for all your themes. Why? Because its obvious they are widely appreciated and used. Because having a single install point makes that efficient. Better for users. Easier for you to maintain & distribute canonical versions.

Best wishes

TT

[JD]

Oh wow, thanks for the compliments TT, this is making me want to speed up my update process more and delay some new TW projects (ahaha!)

I'll look into it! 

-jd

[Anjar]

JD - I think your theme is amazing! It is so fun to work with and it is so easy to make things look great!

A small suggestion (which I guess would apply to tiddlywiki in general, not just the mono theme) from me is to enhance the print css a little:) After some fiddling, I find this nice:

@media print {

@page {

  size: A4;

  margin: 2cm;

}

.tc-sidebar-scrollable, .tc-topbar, .tc-tiddler-controls{

  display: none !important;

}

.tc-titlebar, .tc-tiddler-title{

  position: static;

  top: 0mm;

}

h2.tc-title{

  font-size: xx-large !important;

}

.tc-story-river{

  display: block;

  margin-top: 0mm;

}

.tc-tiddler-frame{

  background-color: white;

  display: block;

}

.tc-tiddler-body{

  page-break-after: always;

}

}

Best,

Anders

[danraymond]

JD;

Thank you, amazing theme. I am playing with it a lot. I particularly like the display of the last 10 days when the storyriver is empty. This is very usefull. I am trying to modify this so that rather than the display the last ten days it would show a particular tag that I selected say from a  dropdown list or links in the sidebar or hard coded.

Any suggestions.

I am starting by modifing the $:/themes/jd/Mono/EmptyStoryMessage tiddler to hard code the tags and see where that goes. But was hoping someone with more experience than me can assist in how to do a dropdown tag list in the Sidebar.