Presenting: Whitespace, a negative-spacious, webapp-nostalgic theme

[JD]

Hello everyone, theming-obsessed JD here,

This might be against the grain of current UI ideas and conversations, but lately I've been nostalgic about a webapp-y kind of design... So I made a theme out of it, for other folks who might be into this sort of style. I don't expect it would be used much, I'm just sharing for archiving reasons... 

Link here: http://j.d.whitespace.tiddlyspot.com/

Thanks for the inspiring conversations, everyone. I love back-reading ☺️

Perpetual lurker, 

JD

[@TiddlyTweeter]

Dear Perpetual Lurker

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

Very neat! Thanks!

(FYI, the hamburger doesn't work as you describe at the moment on either FF 52 or Chrome 68 on Windows desktop 64-bit.)

Josiah

[E Browns]

Hi Josiah, 

Oh, wow, I used the exact same browsers to test this (got myself a copy of Firefox just yesterday). Can you describe what happens when you click the hamburger, then hover on it? 

-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/6-KSnCFXtWU/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/0ef5bd16-384a-4ca0-b738-7681929720bc%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Julio Peña]

Goodmorning (here in the US) to JD and to all:

Oh, wow, loving that theme! Great stuff there congrats!

About the hamburger issue I tested mine in Water Fox (a FF derivative). And when I press the hamburger button the tiddlers expand but they expand underneath the left sidebar. I put a screen shot so that you can see.

(Edit: Oooops.....spoke too soon....now the hover works! Congrats!)

Best Regards,

Julio

[Eric Shulman]

On Sunday, August 26, 2018 at 7:30:59 AM UTC-7, Julio Peña wrote:

...when I press the hamburger button the tiddlers expand but they expand underneath the left sidebar

This is how it works on Chrome (68.0.3440.106):

Pressing the button changes the sidebar from fixed to hovering, which causes the tiddlers to expand "underneath" the sidebar.  If you then move the mouse away from the sidebar, it automatically closes, exposing the full tiddler content.

-e

[Mohammad]

Thank you Jed!

 Great theme! I like the right bar and the design of cards like tools, search and create and ...

Add the small description by Eric in above email as we expect when click on the button sidebar is closed

but at the same time we need to move mouse away from the sidebar to see the effects.

I suggest it is better  by clicking the button it closes the sidebar!

Cheers

Mohammad

[JD]

Hi Julio,

Thanks for the compliments! I'm glad you got how it works. I should probably make the documentation clearer; I suck at explaining things 😅

Please do report if you come across any bug!

-jd

[JD]

Hi Eric, 

Thanks for the explanation! Can I add your text to the demo?

-jd

[JD]

Hi Mohammad, 

In a future version I'll add an option to disable the hover mode and have it simply close and open the sidebar... I don't have much free time as of now and can't commit. Thanks for the idea!

-jd

[HC Haase]

HI JD

while it is a nice theme, I´me not in this for the looks.

But a thing that got me really exited is the feature to add a new tiddler from the text string entered in the search bar. This is brilliant!

 * it saves interface space

 * it simplifies actions and save time

 

when adding some information/knowledge to my wiki, most of the time I have to make a search to see if I have a related tiddler that I want to update, or I should make a new one. As I already have entered (roughly) the title of the new tiddler in the search bar, it seems redundant to then create a new tiddler and type the title again. Your solution is elegant, functional and simple.

Is there a chance you could package that bit into a separate plug in?

and can I propose to push this feature to the core? I know it doesn't add any new functionality, but IMO it makes TW much more user friendly and efficient in a non intrusive way.

I know adding to the core is a sensitive topic for some, but I would argue that this (though a minor thing) will improve how we use TW and would benefit the general user. And if you don't want to use it, it doesn't destroy the normal interface.

Thoughts?

[JD]

Thanks, HC!

Yes, the theme is just me running with a nostalgic idea, and then some. 

You can actually use the keyboard shortcut "ctrl+space", when the searchbar has keyboard focus, to trigger the same actions the "+" button does.

Is there a chance you could package that bit into a separate plug in?

I don't know about packaging it as a plugin, but you can use the attached tiddler to replace $:/core/ui/SideBarLists on a vanilla TW 5.1.17 to have the same functions ("+" button or "ctrl+space" to create tiddler out of search term). 

You can use difftext preview in edit mode to see the changes I've made to the tiddler. I just added some action widgets and replaced a certain <div> with a <$keyboard> widget for the "ctrl+space" catcher.

-jd

[Sylvain Naudin]

Le mercredi 29 août 2018 11:22:02 UTC+2, HC Haase a écrit :

HI JD

while it is a nice theme, I´me not in this for the looks.

But a thing that got me really exited is the feature to add a new tiddler from the text string entered in the search bar. This is brilliant!

 * it saves interface space

 * it simplifies actions and save time

 

when adding some information/knowledge to my wiki, most of the time I have to make a search to see if I have a related tiddler that I want to update, or I should make a new one. As I already have entered (roughly) the title of the new tiddler in the search bar, it seems redundant to then create a new tiddler and type the title again. Your solution is elegant, functional and simple.

Me too, I often start by a search before adding new content.

So I open this ticket https://github.com/Jermolene/TiddlyWiki5/issues/1801 and Pmario did this plugin : https://wikilabs.github.io/editions/new-tiddler-from-search/

But your solution is simple and I like the minimal presentation and save space.

 

[David Gifford]

I want to echo others' sentiments here that the search / create function is a really handy feature.

Having the sidebar be a hover when the tiddlers are expanded is super nice too.

I do agree it would be nice if you or someone would tease out the search / function as a plugin and host it at a specific location so I can link to it from the TiddlyWiki toolmap.

Congrats, and blessings,

[HC Haase]

I don't know about packaging it as a plugin, but you can use the attached tiddler to replace $:/core/ui/SideBarLists on a vanilla TW 5.1.17 to have the same functions ("+" button or "ctrl+space" to create tiddler out of search term). 

You can use difftext preview in edit mode to see the changes I've made to the tiddler. I just added some action widgets and replaced a certain <div> with a <$keyboard> widget for the "ctrl+space" catcher.

-jd

Thank you JD, the functionality as a stand alone feature, it was just what I was hoping for. I like plugins, otherwise I will completely forget what/where all my TW modification is. So I used the TINKA pluging and packged your SideBarLists in a plugin :)

[HC Haase]

and by the way

can this be modified to also wok on the advanced search, so that it would work on your (brilliant) simple mobile layout also?

[JD]

Hi Dave,

Well, it looks like there's real interest in this functionality... So while it isn't in the core yet, I've turned this into a plugin (with thanks to HC): 

Demo here: 

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

I've read somewhere that the sidebar would be modularized in the next TW update, I'll update this plugin then.

-jd

[JD]

Hi HC,

Thanks for creating a base plugin with this. I've created a demo site for it, with some updates, here: 

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

Also, as per your suggestion I've added the same functionality to the Mobile Layout plugin, it's updated at the demo site:

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

-jd

[Abraham Samma]

Hi JD,

I am awestruck. Your theme is by far the best I've seen for TW5. 5/5 I love your dedication to treating narrow screen views with the simplicity they deserve. Definitely deserves praise.

P.S: I am creating a Github repo to document and make available different versions of TW5. Could I add yours?

Regards.

[JD]

Hi Abraham, 

Wow, thanks for the compliments! I tweak according to my personal use at the moment, I'm glad they're useful to others :D

P.S: I am creating a Github repo to document and make available different versions of TW5. Could I add yours?

Sure, no problem!

-jd 

[HC Haase]

HI

In the newe 5.19 the NTFS plugin don't work any more :(

am I the only one?

@JD could you maybe have a look at it?

thanks

[Dave Gifford - http://www.giffmex.org/]

Egads

All that work I did this weekend on vertical toc's, when Whitespace was what I wanted! If only whitespace had been in the "Sidebar and control panel modifications" section of my toolmap. I previously only had it under themes. Well, I rectified that so it shows up in the sidebar section too.

On Sunday, August 26, 2018 at 7:36:03 AM UTC-5, JD wrote:

[E Browns]

Hi HC,

Sorry for the late update, but due to the recent changes to the sidebar structure I have had to re-release this plugin here:

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

The old one (for TW5.1.18 below) is still available at http://j.d.ntfs.tiddlyspot.com/

(still haven't the time to update my other stuff, will do that along with bug reports 😅)

-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/6-KSnCFXtWU/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/58b88a66-906e-4862-a83b-96c35c424951%40googlegroups.com.

[Donald Coates]

Hello I really love this theme.  I have noticed a very minor annoyance - when I open a new tiddler, whether to edit or view, the browser goes to the bottom of the page while the new tiddler opens at the top so that I have to scroll up to find it.  I may have made some minor tweak to cause it?  Happens in both logged in mode and view only and in chromebook chrome and android firefox.

Take care and again thank you so much for all your plugins and themes.  I'm really enjoying them.

[JD]

Hi Donald,

Thank you! Glad to know they're liked :) 

I see the issue now that I've updated to 5.1.19 (It didn't have this bug on 5.1.17) . I'll look into it and hopefully will have a fix soon.

Thanks again!

-jd

[HC Haase]

Thank you!

[Shaxine]

Hello JD,

First of all thank you for the awesome theme!

I'm writing to know if you had the time to fix the mentioned scroll issue.

Thank you once again!

- Shaxine

[Alex]

Unfortunately, I've the same issue and I've been digging around in the code to see if I can find a solution, unfortunately I cannot trace it. Hoping you might have a fix soon! Thanks JD. Love the theme!

[danraymond]

Hi JD;

This may be too old a thread now. However, Thank you for such a great theme. It has made my TW5 use much more fluid.

I have a very dumb question: when I remove a sidebar "card" with the "remove from sidebar" button. How do I get it back?

Also, I made the top control buttons area (the hover area that shows the control buttons) 50px as I have 2 rows. How can I move the title/subtitle are down to accommodate ths change as the hover are covers it up slightly?

Thank you

[E Browns]

Hi Danraymond! 

Thank you so much for enjoying the theme! ^^,

I updated it to have a config for the sidebar page controls height, and sidebar top padding to accomodate. 

You can add to the sidebar by tagging any tiddler with $:/tags/SideBar

Pre-loaded sidebar tabs, those part of the core, can be searched for in Advanced Search: prefixed with $:/core/ui/SideBar/

Be wary that the theme has a scrolling bug in later TW versions... I might get this up to date but I'm not sure when. There are so many plates spinning. 

Please stay safe ^^,

-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/6-KSnCFXtWU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/d12f70de-5c7a-4e80-877a-9c9b5c2585b3o%40googlegroups.com.

[Life Glass]

Hi JD,

I love the rounded corners and easy sidebar of this theme. Unfortunately I can't use it with the Stories plugin that provides a 2 column view. I understand that not everyone uses this plugin, but do you intend to add support for it, or have any tips on getting a 2 column view with this theme?

Emily

[JD]

Hi Emily! Thanks for the compliments ^^, 

Can you provide a link to that plugin? I'll try to incorporate something like what you've described, if the changes prove to be minimal. 

For a quick hack though, you can create a tiddler with any title you want, tag it $:/tags/Stylesheet and have its text be:

@media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {

.tc-story-river {

    display: flex;

    flex-wrap: wrap;

}

.tc-tiddler-frame {

    width: 49% !important;

    max-height: 35em;     /* remove this line if you don't want the tiddler height to be clamped, or you can adjust the height value */

    overflow: auto;

}

}

 Stay safe and best regards

-jd

[Life Glass]

Hi JD,

Thank you. Here it is: https://giffmex.org/stroll/empty.html#%24%3A%2Fplugins%2Fsq%2FStories

Emily

[twid...@gmail.com]

Two column view also works fine using Material and Mono.

Emily

[JD]

Hi Emily, thanks for the feedback!

I've created a dedicated stylesheet you can use for the Stories plugin... please check it out here and inform if it works as expected!

http://j.d.whitespace.tiddlyspot.com/#Compatibiliy%20with%20''Stories''%20Plugin

The above stylesheet applies only to wide screens.

I tested by dragging the Theme and the Compatibility Stylesheet into a fresh load of the Stories plugin link you sent me. Thanks for getting my attention to that wonderful plugin!

-jd

[twid...@gmail.com]

Hi JD,

Thank you! This works just as expected.

Emily

[twid...@gmail.com]

Actually, when the right column is hidden, the tiddlers on the left should change to full width. When using Whitespace, the left tiddlers stay halved.

Emily

[danraymond]

Hi JD;

Thanks for such a quick response. I updated the theme. I opened the theme Whitespace Theme tweaks, where do I adjust the sidebar page controls height, and sidebar top padding?

Thank you

-jd

To unsubscribe from this group and all its topics, send an email to tiddl...@googlegroups.com.

[JD]

Hi again! 

It should be in $:/ControlPanel > Appearance > Whitespace Tweaks

The items are Sidebar top buttons area height and Sidebar top padding!

Please do inform if they're not working as expected!

-jd

[JD]

I updated the tiddler in http://j.d.whitespace.tiddlyspot.com/#Compatibility%20with%20''Stories''%20Plugin !

Thank you so much for testing! Please do inform if you encounter more bugs!

-jd

[danraymond]

Hi JD;

Thanks again for being so responsive. That's what I looked for, but see attached image those options are not there. Will try delete the theme files and reimport the downloaded theme tid file.

[E Browns]

Oh my! 

I looked into it and I saw/remembered that I had put a bad mechanism that made components of this theme immune to updates (basically, configurations edit the fields of theme tiddlers themselves.. These over-writings persist beyond updates). 

Let me fix these and I'll get back to you again. 

Thanks for bringing this to my attention! 

-jd

To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/9ae9b346-cc3e-4290-a2d5-e3be8b217dc0o%40googlegroups.com.

[JD]

Hello again Danraymond,

I've finally updated this theme to fix the previous bugs (The demo site has also been updated to v5.1.22 of Tiddlywiki). 

For safe re-installation, please go to $:/AdvancedSearch > Filter tab of your wiki and delete this filter search term: 

[is[shadow]prefix[$:/themes/jd/Whitespace]][prefix[$:/config/Whitespace]]

Then, just install the theme normally again from the site.

(Overwritten shadow tiddlers of the theme might have prevented the update.)

Thanks for the bug report!

-jd

[twid...@gmail.com]

Hi JD,

Thank you. :)

Emily

[danraymond]

JD;

Thank you. Seems whitespace tiddlyspot not loading at moment. Will try later.

[TW Tones]

Just loaded for me

Regards

Tony

[TW Tones]

JD

I just reviewed your theme again and I really is great. The only thing I notices was when the side bar is open and you click on a card, you must click the word eg "Tools" to open the card. The way the cards look though one would expect clicking anywhere on that line, except where the buttons appear on hover, would open the card. If its not a difficult issue that may be a nice refinement. It will help on touch based systems as well.

Also I am curious where Close others button has gone.

This is very nice. Thanks

Regards

TW Tones (aka TonyM)

[danraymond]

Hello JD;

All good thank you for the best theme for TW5 it is perfect for my needs. Look forward to any further incarnations.

[danraymond]

JD,

Any way to remove the icons above the Title in the sidebar. I use the Menu Bar as well which unfortunatley covers the top part of the popout sidebar. Unless there's a way to get the Menu Bar below your sidebarso side bar goes on top when it pops out???

[E Browns]

Oh my! Sorry I've been really busy with work, I'll get to it this weekend!

Will adding an option to offset Whitespace's topbar help with your use case? So the MebuBar is topmost and Whitespace topbar is below it? 

To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/9453baa6-d6f6-474f-99e6-b723e8fc0e46n%40googlegroups.com.

[odin...@gmail.com]

Did you end up with a way to disable the hover mode? I am trying to find it within the code, but I can't seem to find it.

Op maandag 27 augustus 2018 om 12:57:07 UTC+2 schreef JD:

Hi Mohammad, 

In a future version I'll add an option to disable the hover mode and have it simply close and open the sidebar... I don't have much free time as of now and can't commit. Thanks for the idea!

-jd

On Monday, August 27, 2018 at 4:14:50 AM UTC+9, Mohammad wrote:

Thank you Jed!

 Great theme! I like the right bar and the design of cards like tools, search and create and ...

Add the small description by Eric in above email as we expect when click on the button sidebar is closed

but at the same time we need to move mouse away from the sidebar to see the effects.

I suggest it is better  by clicking the button it closes the sidebar!

Cheers

Mohammad