From d3fa781287b46ac30e8615530b43440ace6d592a Mon Sep 17 00:00:00 2001
From: Jeremy Ruston <jeremy@osmosoft.com>
Date: Sun, 19 May 2013 12:11:18 +0100
Subject: [PATCH] Switch to using a slider for tiddler info

---
 core/modules/widgets/reveal.js                          | 5 +++++
 core/templates/{TiddlerDropdown.tid => TiddlerInfo.tid} | 6 +++---
 core/templates/ViewTemplate.tid                         | 5 ++---
 themes/tiddlywiki/snowwhite/base.tid                    | 9 +++++++++
 4 files changed, 19 insertions(+), 6 deletions(-)
 rename core/templates/{TiddlerDropdown.tid => TiddlerInfo.tid} (54%)

diff --git a/core/modules/widgets/reveal.js b/core/modules/widgets/reveal.js
index 7bd1ef0ad..529c4bb69 100644
--- a/core/modules/widgets/reveal.js
+++ b/core/modules/widgets/reveal.js
@@ -40,6 +40,9 @@ RevealWidget.prototype.generate = function() {
 	if(this["class"]) {
 		$tw.utils.pushTop(classes,this["class"]);
 	}
+	if(this.isOpen) {
+		$tw.utils.pushTop(classes,"tw-reveal-open");
+	}
 	switch(this.type) {
 		case "popup":
 			styles.push("position:absolute;");
@@ -146,6 +149,8 @@ RevealWidget.prototype.refreshInDom = function(changedAttributes,changedTiddlers
 		}
 		// Set the visibility of the children
 		this.renderer.domNode.style.display = this.isOpen ? (this.renderer.parseTreeNode.isBlock ? "block" : "inline") : "none";
+		// Add or remove the tw-reveal-open class
+		$tw.utils.toggleClass(this.renderer.domNode,"tw-reveal-open",this.isOpen);
 	}
 	// Position the content if required
 	if(this.isOpen) {
diff --git a/core/templates/TiddlerDropdown.tid b/core/templates/TiddlerInfo.tid
similarity index 54%
rename from core/templates/TiddlerDropdown.tid
rename to core/templates/TiddlerInfo.tid
index 68722d1cb..f506618c8 100644
--- a/core/templates/TiddlerDropdown.tid
+++ b/core/templates/TiddlerInfo.tid
@@ -1,6 +1,6 @@
-title: $:/templates/TiddlerDropdown
+title: $:/templates/TiddlerInfo
 
-<div class="tw-tab-set"><div class="tw-tab-buttons"><$button type="set" set="$:/state/tiddlerDropDownTabSet" setTo="refTab" qualifyTiddlerTitles="yes" selectedClass="tw-tab-selected">References</$button><$button type="set" set="$:/state/tiddlerDropDownTabSet" setTo="taggingTab" qualifyTiddlerTitles="yes" selectedClass="tw-tab-selected">Tagging</$button><$button type="set" set="$:/state/tiddlerDropDownTabSet" setTo="fieldsTab" qualifyTiddlerTitles="yes" selectedClass="tw-tab-selected">Fields</$button></div>
+<div class="tw-tiddler-info"><div class="tw-tab-set"><div class="tw-tab-buttons"><$button type="set" set="$:/state/tiddlerDropDownTabSet" setTo="refTab" qualifyTiddlerTitles="yes" selectedClass="tw-tab-selected">References</$button><$button type="set" set="$:/state/tiddlerDropDownTabSet" setTo="taggingTab" qualifyTiddlerTitles="yes" selectedClass="tw-tab-selected">Tagging</$button><$button type="set" set="$:/state/tiddlerDropDownTabSet" setTo="fieldsTab" qualifyTiddlerTitles="yes" selectedClass="tw-tab-selected">Fields</$button></div>
 <div class="tw-tab-divider">
 </div>
 <div class="tw-tab-content">
@@ -15,4 +15,4 @@ title: $:/templates/TiddlerDropdown
 <$fieldgrid />
 </$reveal>
 </div>
-</div>
\ No newline at end of file
+</div></div>
diff --git a/core/templates/ViewTemplate.tid b/core/templates/ViewTemplate.tid
index ea5b9f705..4e80c7e88 100644
--- a/core/templates/ViewTemplate.tid
+++ b/core/templates/ViewTemplate.tid
@@ -1,12 +1,11 @@
 title: $:/templates/ViewTemplate
 modifier: JeremyRuston
 
-
-<span class="title"><span class="tw-tiddler-controls"><$button popup="$:/state/tiddlerDropdown" qualifyTiddlerTitles="yes" class="btn-invisible">{{$:/core/images/info-button}}</$button><$button message="tw-edit-tiddler" class="btn-invisible">{{$:/core/images/edit-button}}</$button><$button message="tw-close-tiddler" class="btn-invisible">{{$:/core/images/close-button}}</$button>
+<span class="title"><span class="tw-tiddler-controls"><$button popup="$:/state/tiddlerInfo" qualifyTiddlerTitles="yes" class="btn-invisible">{{$:/core/images/info-button}}</$button><$button message="tw-edit-tiddler" class="btn-invisible">{{$:/core/images/edit-button}}</$button><$button message="tw-close-tiddler" class="btn-invisible">{{$:/core/images/close-button}}</$button>
 
 </span><$view field="title"/></span>
 
-<$reveal type="popup" state="$:/state/tiddlerDropdown" position="belowleft" qualifyTiddlerTitles="yes"><div class="tw-drop-down"><$transclude template="$:/templates/TiddlerDropdown"></$transclude></div>
+<$reveal type="nomatch" text="" default="" state="$:/state/tiddlerInfo" qualifyTiddlerTitles="yes"><$transclude template="$:/templates/TiddlerInfo"/>
 </$reveal>
 
 <div class="small"><$view field="modifier" format="link"/> <$view field="modified" format="relativedate"/></div>
diff --git a/themes/tiddlywiki/snowwhite/base.tid b/themes/tiddlywiki/snowwhite/base.tid
index 56b688b64..9bcf104cf 100644
--- a/themes/tiddlywiki/snowwhite/base.tid
+++ b/themes/tiddlywiki/snowwhite/base.tid
@@ -395,6 +395,15 @@ a.tw-tiddlylink-external:before {
 	fill: #888;
 }
 
+.tw-tiddler-info {
+	margin: 0 -3em 0 -3em;
+	padding: 1em 3em 1em 3em;
+	background-color: #f8f8f8;
+	border-top: 1px solid #ddd;
+	border-bottom: 1px solid #ddd;
+	<<box-shadow "inset 1px 2px 3px rgba(0,0,0,0.1)">>
+}
+
 @media print {
 	.tw-tiddler-controls {
 		display: none;