New version of the Notebook theme available

[Nicolas Petton]

Hi,

I've been working lately on a new version of my Notebook theme.

The theme has evolved quite a bit, and is now available with 2 colour
palettes. While it hasn't reached v1.0 yet, I would consider it stable
enough for general usage.

A demo and installation instructions can be found here:

https://nicolas.petton.fr/tw/notebook.html

If you find a bug or missing feature, contributions are welcome!
The theme is released under MIT, and is hosted on GitHub at

https://github.com/NicolasPetton/notebook

Cheers,
Nico

[Mohammad]

Hi Nico,

Many thanks for your contribution. Notebook is an amazing theme. The words clean and uncluttered theme best describe it.

On mobile and small screen I think the is the only theme makes TW like an app and its lower menu and action on sidebar item selection is very useful.

Best wishes

Mohammad

[Nicolas Petton]

Mohammad <mohammad...@gmail.com> writes:

Hi Mohammad,

> Many thanks for your contribution. Notebook is an amazing theme. The words
> clean and uncluttered theme best describe it.
> On mobile and small screen I think the is the only theme makes TW like an
> app and its lower menu and action on sidebar item selection is very
> useful.

Thank you, I'm glad you like it! If you find any issue with it, feel
free to report it.

Cheers,
Nico

[odin...@gmail.com]

Hi Nicolas!

Thank you for sharing this theme. Your design is really well done. In order for TiddlyWiki to appeal to a wider audience, it is IMO essential to have a clean design available. It is good to see people are working on those designs!

You wrote that it hasn't reached V1.0 yet. What are some things you want to implement/change for a full release?

Op maandag 14 december 2020 om 10:03:01 UTC+1 schreef Nicolas Petton:

[odin...@gmail.com]

I am running into a problem. I can't seem to import the whole plugin. After importing the plugin, the list of tiddlers are showing in italics. Only $:/core/ui/PageTemplate/sidebar is imported, the rest are missing.

How to recreate: Go to tiddlywiki.com and drag and drop the theme into TiddlyWiki. I also tried this using TiddlyDesktop.

Op maandag 14 december 2020 om 11:08:35 UTC+1 schreef odin...@gmail.com:

[Nicolas Petton]

"odin...@gmail.com" <odin...@gmail.com> writes:

> Hi Nicolas!

Hi Odin,

> Thank you for sharing this theme. Your design is really well done. In order
> for TiddlyWiki to appeal to a wider audience, it is IMO essential to have a
> clean design available. It is good to see people are working on those
> designs!

Thanks :)

> You wrote that it hasn't reached V1.0 yet. What are some things you want to
> implement/change for a full release?

Further testing needs to be done. In particular, I haven't tested
Notebook on tablets (or any IOS device). I also have some bugs to fix
for the upcoming TiddlyWiki release.

Cheers,
Nico

[Nicolas Petton]

"odin...@gmail.com" <odin...@gmail.com> writes:

Hi Odin,

> I am running into a problem. I can't seem to import the whole plugin. After
> importing the plugin, the list of tiddlers are showing in italics. Only
> $:/core/ui/PageTemplate/sidebar

> <https://tiddlywiki.com/#%24%3A%2Fcore%2Fui%2FPageTemplate%2Fsidebar> is

> imported, the rest are missing.

You're right, something wrong, I'll have a look.

Cheers,
Nico

[Michael Arndt]

Very nice theme, if I find some time I'll take a look how to make it compatible with sq/Stories to have a second column on desktop :) 

--
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 view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/87r1nswmf6.fsf%40petton.fr.

[Nicolas Petton]

Michael Arndt <ar...@menedev.de> writes:

> Very nice theme, if I find some time I'll take a look how to make it
> compatible with sq/Stories to have a second column on desktop :)

That would be great!

Nico

[Keelan Cook]

I was coming here specifically to bring up Saq's Stories and Streams plugins. Glad that's already on the table.

Nicolas, your Notebook theme is probably my favorite for overall style. It looks great. I just wish I could extend to two stories to make it real productive for writing and research. I use TW more for that goal than project management.

Great work!

Keelan

[Ibby (parc6502)]

Regarding stories compatibility, I was playing around with this today and came up with something. It's pretty hacky, as I don't really understand what I'm doing.

The main thing it's missing is scrolling on the right column. The behaviour I have is that everything will look the same unless there is a tiddler in the second column. Here's the code I used, and I've attached an HTML to demonstrate.

[Sapphireslinger]

Tried your theme today. I have a tiddler that doesn't get transcluded properly when I tag it into the sidebar.

I have a tiddler titled "Classes" with this content:

1. {{transcluded tiddler}}

2. {{transcuded tiddler 2}}

3. text sentence

4. bullet list

5. student-tab student-tab student-tab student-tab student-tab (this is a horizontal menu) (each tab has further paragraphs along with vertical tab menus within each)

6. list links list

7. a link

1, 2, 3, and 4 lose their formatting in the sidebar, all jumbled together in one paragraph.

5, 6, 7 are fine. The tab menu and all its child(?) transclusions and their tab menus and transclusions as far in as I drill down are rendered perfectly. It's only that area before the first tab menu that doesn't seem to have gotten the mode=block memo. Even the (6) bullet list and (7) link I have up on the first level but AFTER the tab menu renders fine.

[Sapphireslinger]

Some titles and captions don't make the translation into the sidebar:

1. a transcluded image as part of the caption field

2. a strange character as part of the title field

I have a tiddler titled "Classes"

The caption field reads {{$:/images/fa5/solid/book-reader}} Classes

It shows as "(icon) Classes" in sidebar tabs in Vanilla theme.

But the icon shows as text ... {{$:/images/fa5/solid/book-reader}} Classes ... just like that in the sidebar tab under Notebook theme.

Even worse if I have a special character in the title like

✝️ Bible Study

Its sidebar tab is completely blank under notebook theme. The tab is still clickable but it's blank.

[ludwa6]

I've got what might be a niche UseCase & related need -but who knows, there's usually others out there with needs not so different, as it happens.

Case is essentially this: I came upon Notebook theme (thanks to @Nico for that) as a solution to the problem of having a minimalist theme for mobile use -via Quine2 app on iPhone in my case- and for such use, the mobile should serve strictly as a productivity tool to support GTD workflow... And this workflow involves focusing primarily on the Projectify UI, with all other distractions filtered out. 

So I've set up MyDashboard tiddler in Projectify to be the sole Default Tiddler that opens on startup or Home, and that puts everything i need (Inbox, Projects and Schedule for today & upcoming) right where i want, with essentially nothing else (in Notebook theme) but Toolbar and Search widget to distract.  Perfect for mobile GTD!

Problem is: My TiddlyDesktop UI is a more complex thing (2 column-display w/ Contents outline is essential) built upon a different theme... And the nature of my work has me making abrupt transitions between desktop and mobile modalities, which results in my opening up a tool very often with the wrong UI for that particular modality. 

SO: What's needed is a theme-switching affordance that is as agile as the context-switching dynamic of my work/life-style.  Drilling down thru Control Panel / Appearance tab/ Theme menu/ Theme select is a PITA on desktop, and an absolute non-starter on mobile.  Ideally, i would have a one-click way to switch from one theme to the other, ideally via nice fat toolbar button.

I don't know enough to be sure, but i'm guessing this would involve some tweak in the theme, which could either be a built-in affordance (if there's enough people besides just me that wants), or else something i could implement in a clone of the theme (? i know how to clone a Palette & have done, but i don't know if the same works for themes) that i might easily maintain.  

Am i barking up the right tree here? and if so, can anyone offer a boost?  :-)

/walt

[Nicolas Petton]

Sapphireslinger <sapphir...@gmail.com> writes:

Hi!

> Tried your theme today. I have a tiddler that doesn't get transcluded
> properly when I tag it into the sidebar.

Could you try with the newly released v1.3.3?

The sidebar has been improved to use core tiddlers for sections (with
the tag $:/tags/SideBar).

Cheers,
Nico

[Nicolas Petton]

ludwa6 <wlud...@gmail.com> writes:

Hi!

> SO: What's needed is a theme-switching affordance that is as agile as the
> context-switching dynamic of my work/life-style. Drilling down thru
> Control Panel / Appearance tab/ Theme menu/ Theme select is a PITA on
> desktop, and an absolute non-starter on mobile. Ideally, i would have a
> one-click way to switch from one theme to the other, ideally via nice fat
> toolbar button.

You could try something like the following (admittedly hackish) tiddler
for switching the theme on startup based on the width of the viewport.

I've set the breakpoint to 960px in the example below, and the "desktop"
theme to snowwhite, but you can change those values (do not forget to
set the Type field to "application/javascript").

/*\
title: $:/hacks/startup/setup-mobile-theme.js
type: application/javascript
module-type: startup
\*/

/*global $tw: false */
(function() {
exports.name = "setup-mobile-theme";
exports.platforms = ["browser"];
exports.after = ["startup"];

var mobileTheme = "$:/themes/nico/notebook";
var desktopTheme = "$:/themes/tiddlywiki/snowwhite";

var breakpoint = 960;

exports.startup = function() {
var theme, palette;
if (document.documentElement.clientWidth <= breakpoint) {
theme = mobileTheme;
} else {
theme = desktopTheme;
}

setup(theme);
};

function setup(theme, palette) {
$tw.wiki.addTiddler({title: "$:/theme", text: theme});
}
})();

[ludwa6]

Brilliant solution, @Nico!  But: how do i get the script to run? 

I copy/pasted this script verbatim- i.e. from /*\ to })(); -into a new tiddler of type:application/javascript, titled "ThemeSwitch"... but i guess that's not going to run by itself unless it gets activated somehow.  Do i need to make that into a system tiddler, or shadow or some such ( all those  $:/_ prefixes on all those "meta" tiddlers are greek to me still :-(

/walt

[Maarten]

nice work Nico,

in the demo the text of the buttons is very large but when I make the font size smaller the menu becomes unreadable. How can I change the font size of the buttons

Maarten

[Nicolas Petton]

ludwa6 <wlud...@gmail.com> writes:

> Brilliant solution, @Nico! But: how do i get the script to run?

Save the tiddler as $:/hacks/startup/setup-mobile-theme.js, with the
type field set to application/javascript, and the script should run on
startup.

Cheers,
Nico

[Nicolas Petton]

Maarten <mdr.in...@gmail.com> writes:

Hi Maarten,

> in the demo the text of the buttons is very large but when I make the font
> size smaller the menu becomes unreadable.

Low large, could you post a screenshot? They're supposed to be using the
same font size as the other parts of the page.

Cheers,
Nico

[Maarten]

default font size:

font size 10px (acceptable button text size but menu becomes quite difficult to read on larger screens):

[ludwa6]

Sounds good,, @NIco -so i renamed that tiddler i'd already created to hold the script you provided (type is application/javascript) with the name:

> $:/hacks/startup/setup-mobile-theme.js

- at first TiddlyDesktop choked on this (wanted to rename it something else), so then i created a file in my text editor to hold the script, tried to save w/ the above name -and my Mac choked on it (substituted a hyphen for the colon)... Still, having nothing else for it, i just imported that file into TiddlyDesktop, which created 3 different $:/import files all having for content just the word "yes"... -It didn't work so i had to throw them out and start over...

Finally i went back to the "ThemeSwitch" tiddler i'd originally created w/ the script, and this time was able to rename as above (no idea why what didn't work before now does)... And now my installation looks correct in the TiddlyDesktop Explorer, with the above named tiddler of type application/javascript and content of the given script, file being nested under/hacks/startup/ ...

Yet: no joy - i'm always getting the same theme (my default: Vanilla basic) on startup, on iPhone as well as desktop.

Is there anything else i can try, anything you might suggest?

/walt

[Sylvain Naudin]

Hi Walt,

I just try for curiosity Nico hack.

Tested with success if you set module-type: startup correctly in field of tiddler $:/hacks/startup/setup-mobile-theme.js

(add module-type field with startup).

Regards,

Sylvain

[Nicolas Petton]

Sylvain Naudin <sil...@gmail.com> writes:

> I just try for curiosity Nico hack.
> Tested with success if you set module-type: startup correctly in field of
> tiddler $:/hacks/startup/setup-mobile-theme.js

Right, I forgot to mention that! Thanks Sylvain :)

Cheers,
Nico

[Nicolas Petton]

Maarten <mdr.in...@gmail.com> writes:

> font size 10px (acceptable button text size but menu becomes quite
> difficult to read on larger screens):

Oh, right, I get it now! You're displaying the toolbar button labels.

I haven't really worked on that yet as I always keep it off, but I just
added to todo for that for the next release.

Cheers,
Nico

[ludwa6]

Bingo!  That's got it working; thanks a heap, @Sylvain & @Nico.  This is a brilliant solution to the problem of cross-platform usability, IMHO.

Walt

[Jon]

Hi Nico, 

this is very nice and ideal for a new wiki of mine.

It would be perfect if I could include a background image.

Is that possible? It's not in the theme tweaks - so presumably not?

Regards

Jon