From 21c137a66c37f010b36697bb6bed5321138fbb9f Mon Sep 17 00:00:00 2001 From: Jermolene Date: Sun, 6 Jul 2014 16:55:51 +0100 Subject: [PATCH] Refactor theme tweaks as individual tiddlers MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The trouble with the previous approach of storing several settings in a single data tiddler was that it made it hard to introduce new settings. Users who already have a custom copy of the settings/metrics tiddler wouldn’t get the default settings. The new approach uses individual tiddlers for each setting. This commit also introduces a new theme tweak for the cutoff width for switching between responsive views. --- .../tw5.com/tiddlers/Release 5.0.14beta.tid | 4 +++ .../tiddlers/concepts/DataTiddlers.tid | 2 +- themes/tiddlywiki/centralised/styles.tid | 2 +- themes/tiddlywiki/seamless/base.tid | 2 +- themes/tiddlywiki/snowwhite/base.tid | 2 +- themes/tiddlywiki/vanilla/ThemeTweaks.tid | 20 +++++++------- themes/tiddlywiki/vanilla/base.tid | 26 +++++++++---------- themes/tiddlywiki/vanilla/metrics.multids | 10 +++++++ themes/tiddlywiki/vanilla/metrics.tid | 10 ------- themes/tiddlywiki/vanilla/settings.multids | 3 +++ themes/tiddlywiki/vanilla/settings.tid | 4 --- 11 files changed, 43 insertions(+), 42 deletions(-) create mode 100644 themes/tiddlywiki/vanilla/metrics.multids delete mode 100644 themes/tiddlywiki/vanilla/metrics.tid create mode 100644 themes/tiddlywiki/vanilla/settings.multids delete mode 100644 themes/tiddlywiki/vanilla/settings.tid diff --git a/editions/tw5.com/tiddlers/Release 5.0.14beta.tid b/editions/tw5.com/tiddlers/Release 5.0.14beta.tid index b9637b09a..b71bf7e29 100644 --- a/editions/tw5.com/tiddlers/Release 5.0.14beta.tid +++ b/editions/tw5.com/tiddlers/Release 5.0.14beta.tid @@ -7,6 +7,10 @@ caption: 5.0.14-beta //[[See GitHub for detailed change history of this release|https://github.com/Jermolene/TiddlyWiki5/compare/v5.0.13-beta...v5.0.14-beta]]// +!! Incompatible Changes + +* Theme tweaks (in [[control panel|$:/ControlPanel]] under the ''Appearance'' tab) will not be upgraded from TiddlyWiki versions prior to 5.0.14-beta. You'll need to re-apply any customisations after upgrading + !! Accessibility Improvements * diff --git a/editions/tw5.com/tiddlers/concepts/DataTiddlers.tid b/editions/tw5.com/tiddlers/concepts/DataTiddlers.tid index 95c26bae1..ab59b3696 100644 --- a/editions/tw5.com/tiddlers/concepts/DataTiddlers.tid +++ b/editions/tw5.com/tiddlers/concepts/DataTiddlers.tid @@ -25,7 +25,7 @@ The tiddler dictionary format is an alternative syntax for data tiddlers: * The ContentType field `type` is set to `application/x-tiddler-dictionary` * The `text` field consists of one or more lines of the form `:` -For example, the [[metrics of the Vanilla theme|$:/themes/tiddlywiki/vanilla/metrics]] are a tiddler dictionary. +For example, palettes such as the [[default Vanilla palette|$:/palettes/Vanilla]] are tiddler dictionaries. ! Accessing data within data tiddlers diff --git a/themes/tiddlywiki/centralised/styles.tid b/themes/tiddlywiki/centralised/styles.tid index aee3ec050..d4c2267a0 100644 --- a/themes/tiddlywiki/centralised/styles.tid +++ b/themes/tiddlywiki/centralised/styles.tid @@ -3,7 +3,7 @@ tags: [[$:/tags/stylesheet]] \rules only filteredtranscludeinline transcludeinline macrodef macrocallinline -@media (min-width: 770px) { +@media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) { html .tw-page-container { text-align: center; diff --git a/themes/tiddlywiki/seamless/base.tid b/themes/tiddlywiki/seamless/base.tid index 181ea3413..6cc8c9a6c 100644 --- a/themes/tiddlywiki/seamless/base.tid +++ b/themes/tiddlywiki/seamless/base.tid @@ -59,7 +59,7 @@ Rules copied from Snow White Seamless modifications */ -@media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics##storywidth}}) { +@media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) { /* Drop the tiddler frame padding */ body.tw-body .tw-tiddler-frame { diff --git a/themes/tiddlywiki/snowwhite/base.tid b/themes/tiddlywiki/snowwhite/base.tid index e61c46a44..30f5d66d3 100644 --- a/themes/tiddlywiki/snowwhite/base.tid +++ b/themes/tiddlywiki/snowwhite/base.tid @@ -17,7 +17,7 @@ tags: [[$:/tags/stylesheet]] } } -@media (max-width: 770px) { +@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) { .tw-tiddler-frame { <> } diff --git a/themes/tiddlywiki/vanilla/ThemeTweaks.tid b/themes/tiddlywiki/vanilla/ThemeTweaks.tid index ad700e7dd..95c5d9d09 100644 --- a/themes/tiddlywiki/vanilla/ThemeTweaks.tid +++ b/themes/tiddlywiki/vanilla/ThemeTweaks.tid @@ -4,19 +4,17 @@ caption: Theme Tweaks You can tweak certain aspects of the ''Vanilla'' theme. -//Take care to preserve any backticks (`) in the settings// - ! Settings -* Font family: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/settings" index="fontfamily" default="" tag="input"/> +* Font family: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/settings/fontfamily" default="" tag="input"/> ! Sizes -* Font size: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics" index="fontsize" default="" tag="input"/> -* Line height: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics" index="lineheight" default="" tag="input"/> -* Story left position //(the distance between the left of the screen and the left margin of the story river or tiddler area)//: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics" index="storyleft" default="" tag="input"/> -* Story top position //(the distance between the top of the screen ad the top margin of the story river or tiddler area)//: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics" index="storytop" default="" tag="input"/> -* Story right //(the distance between the left side of the screen and the left margin of the sidebar area)//: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics" index="storyright" default="" tag="input"/> -* Story width //(the width of the story river or tiddler area)//: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics" index="storywidth" default="" tag="input"/> -* Tiddler width //(the width of individual tiddlers -- used for zoomin storyview)//: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics" index="tiddlerwidth" default="" tag="input"/> - +* Font size: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/fontsize" default="" tag="input"/> +* Line height: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/lineheight" default="" tag="input"/> +* Story left position //(the distance between the left of the screen and the left margin of the story river or tiddler area)//: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/storyleft" default="" tag="input"/> +* Story top position //(the distance between the top of the screen ad the top margin of the story river or tiddler area)//: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/storytop" default="" tag="input"/> +* Story right //(the distance between the left side of the screen and the left margin of the sidebar area)//: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/storyright" default="" tag="input"/> +* Story width //(the width of the story river or tiddler area)//: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/storywidth" default="" tag="input"/> +* Tiddler width //(the width of individual tiddlers -- used for zoomin storyview)//: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth" default="" tag="input"/> +* Sidebar breakpoint //(the minimum width for the sidebar to be displayed above the story river)//: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint" default="" tag="input"/> diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid index ab3fc7b49..b41b0d7df 100644 --- a/themes/tiddlywiki/vanilla/base.tid +++ b/themes/tiddlywiki/vanilla/base.tid @@ -23,7 +23,7 @@ html button { */ html { - font-family: {{$:/themes/tiddlywiki/vanilla/settings##fontfamily}}; + font-family: {{$:/themes/tiddlywiki/vanilla/settings/fontfamily}}; text-rendering: optimizeLegibility; /* Enables kerning and ligatures etc. */ } @@ -32,8 +32,8 @@ html:-webkit-full-screen { } body.tw-body { - font-size: {{$:/themes/tiddlywiki/vanilla/metrics##fontsize}}; - line-height: {{$:/themes/tiddlywiki/vanilla/metrics##lineheight}}; + font-size: {{$:/themes/tiddlywiki/vanilla/metrics/fontsize}}; + line-height: {{$:/themes/tiddlywiki/vanilla/metrics/lineheight}}; color: <>; background-color: <>; word-wrap: break-word; @@ -434,7 +434,7 @@ a.tw-tiddlylink-external:hover { min-height: 100%; } -@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics##storywidth}}) { +@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) { .sidebar-header { padding: 14px; @@ -447,7 +447,7 @@ a.tw-tiddlylink-external:hover { } } -@media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics##storywidth}}) { +@media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) { .tw-message-box { margin: 21px -21px 21px -21px; @@ -455,8 +455,8 @@ a.tw-tiddlylink-external:hover { .tw-sidebar-scrollable { position: fixed; - top: {{$:/themes/tiddlywiki/vanilla/metrics##storytop}}; - left: {{$:/themes/tiddlywiki/vanilla/metrics##storyright}}; + top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}}; + left: {{$:/themes/tiddlywiki/vanilla/metrics/storyright}}; bottom: 0; right: 0; overflow-y: auto; @@ -468,9 +468,9 @@ a.tw-tiddlylink-external:hover { .story-river { position: relative; - left: {{$:/themes/tiddlywiki/vanilla/metrics##storyleft}}; - top: {{$:/themes/tiddlywiki/vanilla/metrics##storytop}}; - width: {{$:/themes/tiddlywiki/vanilla/metrics##storywidth}}; + left: {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}; + top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}}; + width: {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}}; padding: 42px 42px 42px 42px; } @@ -537,7 +537,7 @@ a.tw-tiddlylink-external:hover { .tw-view-field-value { } -@media (max-width: 770px) { +@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) { .tw-tiddler-frame { padding: 14px 14px 14px 14px; } @@ -547,10 +547,10 @@ a.tw-tiddlylink-external:hover { } } -@media (min-width: 770px) { +@media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) { .tw-tiddler-frame { padding: 28px 42px 42px 42px; - width: {{$:/themes/tiddlywiki/vanilla/metrics##tiddlerwidth}}; + width: {{$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth}}; } <