Add a storyview button

core/images/storyview-cecily.tid

@@ -0,0 +1,13 @@
+title: $:/core/images/storyview-cecily
+tags: $:/tags/Image
+
+<svg class="tw-image-storyview-cecily tw-image-button" width="128px" height="128px" viewBox="0 0 128 128">
+    <g fill-rule="evenodd">
+        <path d="M9.99919566,0 C4.48152297,0 0.00856547772,4.48053479 0.00856547772,9.99063018 L0.00856547772,118.00937 C0.00856547772,123.527043 4.48910027,128 9.99919566,128 L118.017935,128 C123.535608,128 128.008565,123.519465 128.008565,118.00937 L128.008565,9.99063018 C128.008565,4.47295749 123.528031,0 118.017935,0 L9.99919566,0 Z M9.00856548,9 L9.00856548,119 L119.008565,119 L119.008565,9 L9.00856548,9 Z"></path>
+        <rect x="16.0098828" y="16" width="28.9901172" height="61"></rect>
+        <rect x="52.0098828" y="16" width="12.1124795" height="23"></rect>
+        <rect x="35.8875205" y="85" width="28.2348417" height="28"></rect>
+        <rect x="71.132245" y="16" width="12.1124795" height="74"></rect>
+        <rect x="90.2546073" y="16" width="21.9693375" height="43"></rect>
+    </g>
+</svg>

core/images/storyview-classic.tid

@@ -0,0 +1,11 @@
+title: $:/core/images/storyview-classic
+tags: $:/tags/Image
+
+<svg class="tw-image-storyview-classic tw-image-button" width="129px" height="128px" viewBox="0 0 129 128">
+    <g fill-rule="evenodd">
+        <path d="M9.99919566,0 C4.48152297,0 0.00856547772,4.48053479 0.00856547772,9.99063018 L0.00856547772,118.00937 C0.00856547772,123.527043 4.48910027,128 9.99919566,128 L118.017935,128 C123.535608,128 128.008565,123.519465 128.008565,118.00937 L128.008565,9.99063018 C128.008565,4.47295749 123.528031,0 118.017935,0 L9.99919566,0 Z M9.00856548,9 L9.00856548,119 L119.008565,119 L119.008565,9 L9.00856548,9 Z"></path>
+        <rect x="16.0098828" y="16" width="96.203165" height="32"></rect>
+        <rect x="16.0098828" y="55" width="96.203165" height="23"></rect>
+        <rect x="16.0207797" y="85" width="96.203165" height="24"></rect>
+    </g>
+</svg>

core/images/storyview-pop.tid

@@ -0,0 +1,12 @@
+title: $:/core/images/storyview-pop
+tags: $:/tags/Image
+
+<svg class="tw-image-storyview-pop tw-image-button" width="128px" height="128px" viewBox="0 0 128 128">
+    <g fill-rule="evenodd">
+        <path d="M9.99919566,0 C4.48152297,0 0.00856547772,4.48053479 0.00856547772,9.99063018 L0.00856547772,118.00937 C0.00856547772,123.527043 4.48910027,128 9.99919566,128 L118.017935,128 C123.535608,128 128.008565,123.519465 128.008565,118.00937 L128.008565,9.99063018 C128.008565,4.47295749 123.528031,0 118.017935,0 L9.99919566,0 Z M9.00856548,9 L9.00856548,119 L119.008565,119 L119.008565,9 L9.00856548,9 Z"></path>
+        <rect x="16.0098828" y="16" width="96.203165" height="32"></rect>
+        <path d="M16.0098828,55 L16.0098828,78 L112.213048,78 L112.213048,55 L16.0098828,55 Z M18.5049414,57.5 L18.5049414,75.5 L109.717989,75.5 L109.717989,57.5 L18.5049414,57.5 Z"></path>
+        <rect x="25.6164067" y="60.5" width="76.9901172" height="12"></rect>
+        <rect x="16.0207797" y="85" width="96.203165" height="24"></rect>
+    </g>
+</svg>

core/images/storyview-zoomin.tid

@@ -0,0 +1,9 @@
+title: $:/core/images/storyview-zoomin
+tags: $:/tags/Image
+
+<svg class="tw-image-storyview-zoomin tw-image-button" width="128px" height="128px" viewBox="0 0 128 128">
+    <g fill-rule="evenodd">
+        <path d="M9.99919566,0 C4.48152297,0 0.00856547772,4.48053479 0.00856547772,9.99063018 L0.00856547772,118.00937 C0.00856547772,123.527043 4.48910027,128 9.99919566,128 L118.017935,128 C123.535608,128 128.008565,123.519465 128.008565,118.00937 L128.008565,9.99063018 C128.008565,4.47295749 123.528031,0 118.017935,0 L9.99919566,0 Z M9.00856548,9 L9.00856548,119 L119.008565,119 L119.008565,9 L9.00856548,9 Z"></path>
+        <rect x="16.0098828" y="16" width="96.203165" height="57.9273639"></rect>
+    </g>
+</svg>

core/language/en-GB/Buttons.multids

@@ -44,6 +44,8 @@ Save/Caption: save
 Save/Hint: Save this tiddler
 SaveWiki/Caption: save changes
 SaveWiki/Hint: Save changes
+StoryView/Caption: storyview
+StoryView/Hint: Choose the story visualisation
 HideSideBar/Caption: hide sidebar
 HideSideBar/Hint: Hide sidebar
 ShowSideBar/Caption: show sidebar

core/ui/PageControls/storyview.tid

@@ -0,0 +1,27 @@
+title: $:/core/ui/Buttons/storyview
+tags: $:/tags/PageControls
+caption: {{$:/core/images/storyview-classic}} {{$:/language/Buttons/StoryView/Caption}}
+description: {{$:/language/Buttons/StoryView/Hint}}
+
+\define icon()
+$:/core/images/storyview-$(storyview)$
+\end
+<$button popup=<<qualify "$:/state/popup/storyview">> title={{$:/language/Buttons/StoryView/Hint}} aria-label={{$:/language/Buttons/StoryView/Caption}} class=<<tw-config-toolbar-class>> selectedClass="tw-selected">
+<$list filter="[<tw-config-toolbar-icons>prefix[yes]]">
+<$set name="storyview" value={{$:/view}}>
+<$transclude tiddler=<<icon>>/>
+</$set>
+</$list>
+<$list filter="[<tw-config-toolbar-text>prefix[yes]]">
+<$text text={{$:/language/Buttons/StoryView/Caption}}/>
+</$list>
+</$button>
+<$reveal state=<<qualify "$:/state/popup/storyview">> type="popup" position="below" animate="yes">
+<div class="tw-drop-down">
+<$linkcatcher to="$:/view">
+<$list filter="[storyviews[]]" variable="storyview">
+<$link to=<<storyview>>><$transclude tiddler=<<icon>>/> <$text text=<<storyview>>/></$link>
+</$list>
+</$linkcatcher>
+</div>
+</$reveal>

core/wiki/config/PageControlButtons.multids

@@ -7,3 +7,4 @@ core/ui/Buttons/home: hide
 core/ui/Buttons/language: hide
 core/ui/Buttons/more-page-actions: hide
 core/ui/Buttons/permaview: hide
+core/ui/Buttons/storyview: hide

themes/tiddlywiki/vanilla/base.tid

@@ -860,7 +860,7 @@ canvas.tw-edit-bitmapeditor  {
 	line-height: 1.4;
 }
 
-.tw-drop-down button svg {
+.tw-drop-down button svg, .tw-drop-down a svg  {
 	fill: <<colour foreground>>;
 }