From 51db3e9e75d98c48105e7b15f8f491c073cb703e Mon Sep 17 00:00:00 2001
From: Jermolene <jeremy@jermolene.com>
Date: Mon, 29 Feb 2016 17:47:46 +0000
Subject: [PATCH] Text-slicer: style edit and view templates

---
 plugins/tiddlywiki/text-slicer/styles.tid     | 40 ++++++++++++++-----
 .../text-slicer/ui/edit-template-segment.tid  | 35 ++++++++++++++++
 .../text-slicer/ui/view-template-segment.tid  |  6 +++
 3 files changed, 71 insertions(+), 10 deletions(-)
 create mode 100644 plugins/tiddlywiki/text-slicer/ui/edit-template-segment.tid

diff --git a/plugins/tiddlywiki/text-slicer/styles.tid b/plugins/tiddlywiki/text-slicer/styles.tid
index bf6edc97b..370b4d684 100644
--- a/plugins/tiddlywiki/text-slicer/styles.tid
+++ b/plugins/tiddlywiki/text-slicer/styles.tid
@@ -43,7 +43,8 @@ tags: $:/tags/Stylesheet
 	margin-bottom: 3px;
 }
 
-.tc-view-template-document-tiddler-wrapper {
+.tc-view-template-document-tiddler-wrapper,
+.tc-edit-template-document-tiddler-wrapper {
     border-top: 2px solid #D6A2A2;
     margin-left: -42px;
     margin-right: -42px;
@@ -54,31 +55,50 @@ tags: $:/tags/Stylesheet
     padding-bottom: 10px;
 }
 
-.tc-view-template-document-tiddler-heading a {
+.tc-edit-template-document-tiddler-wrapper {
+	background: #A3A3D7;
+}
+
+div.tc-view-template-document-tiddler-heading a,
+div.tc-edit-template-document-tiddler-heading a {
 	border: 1px solid #D6A2A2;
 	background: #fff;
 	border-radius: 16px;
-	padding: 4px;
-	margin: 4px;
+    padding: 0px 4px 0px 4px;
+    margin: 2px 4px 2px 4px;
     white-space: nowrap;
+    display: inline-block;
 }
 
-.tc-view-template-document-tiddler-heading-icon {
+div.tc-view-template-document-tiddler-heading a:hover,
+div.tc-edit-template-document-tiddler-heading a:hover {
+	border: 1px solid <<colour background>>;
+	text-decoration: none;
+	color: <<colour background>>;
+	background: <<colour foreground>>;
+}
+
+.tc-view-template-document-tiddler-heading-icon,
+.tc-edit-template-document-tiddler-heading-icon {
 	width: 42px;
 	text-align: center;
     margin-left: -42px;
     margin-right: -42px;
     position: absolute;
-    margin-top: -20px;
 }
 
-.tc-view-template-document-tiddler-heading-icon svg {
+.tc-view-template-document-tiddler-subheading,
+.tc-edit-template-document-tiddler-subheading {
+	font-size: 0.7em;
+	font-weight: bold;
+	color: <<colour muted-foreground>>;
+}
+
+.tc-view-template-document-tiddler-heading-icon svg,
+.tc-edit-template-document-tiddler-heading-icon svg {
 	fill: <<colour background>>;	
 }
 
-.tc-view-template-document-tiddler-heading {
-}
-
 .tc-view-template-document-tiddler {
 	font-size: 0.9em;
 }
diff --git a/plugins/tiddlywiki/text-slicer/ui/edit-template-segment.tid b/plugins/tiddlywiki/text-slicer/ui/edit-template-segment.tid
new file mode 100644
index 000000000..bd836a425
--- /dev/null
+++ b/plugins/tiddlywiki/text-slicer/ui/edit-template-segment.tid
@@ -0,0 +1,35 @@
+title: $:/plugins/tiddlywiki/text-slicer/ui/edit-template-segment
+tags: $:/tags/EditTemplate
+
+\define edit-field(name,tag:"input")
+$name$:
+
+<$edit-text field="""$name$""" tag="$tag$" class="tc-edit-texteditor"/>
+\end
+
+<$reveal type="nomatch" state="!!toc-type" text="">
+
+<div class="tc-edit-template-document-tiddler-wrapper">
+
+<div class="tc-edit-template-document-tiddler-heading">
+
+<div class="tc-edit-template-document-tiddler-heading-icon">
+
+{{$:/core/images/file}}
+
+</div>
+
+<div class="tc-edit-template-document-tiddler-subheading">
+
+<$view field="toc-type"/>
+
+</div>
+
+<<edit-field "list" tag:"textarea">>
+
+</div>
+
+</div>
+
+</$reveal>
+
diff --git a/plugins/tiddlywiki/text-slicer/ui/view-template-segment.tid b/plugins/tiddlywiki/text-slicer/ui/view-template-segment.tid
index d2a07b9b2..ebc346e8e 100644
--- a/plugins/tiddlywiki/text-slicer/ui/view-template-segment.tid
+++ b/plugins/tiddlywiki/text-slicer/ui/view-template-segment.tid
@@ -19,6 +19,12 @@ $:/state/plugins/tiddlywiki/text-slicer/heading-status/$(currentTiddler)$
 
 </div>
 
+<div class="tc-view-template-document-tiddler-subheading">
+
+<$view field="toc-type"/>
+
+</div>
+
 Parents: <$list filter="[all[current]listed[]!is[system]]" emptyMessage="None">
 <$link><$view field="title"/></$link>
 </$list>