From 5ef861a277eb526b07fe77db8d1c2d6484e1388c Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Thu, 16 Apr 2020 23:26:20 +0000
Subject: [PATCH]

---
 ayanova/src/components/wiki-control.vue | 88 +++++++++++++++++--------
 1 file changed, 62 insertions(+), 26 deletions(-)

diff --git a/ayanova/src/components/wiki-control.vue b/ayanova/src/components/wiki-control.vue
index 4b87f52c..740c4533 100644
--- a/ayanova/src/components/wiki-control.vue
+++ b/ayanova/src/components/wiki-control.vue
@@ -22,32 +22,64 @@
       >
       <div v-if="!editMode" v-html="compiledOutput()"></div>
       <div v-if="editMode">
-        <v-row>
-          <v-col cols="6">
-            <div>
-              <v-btn tile> <v-icon>fa-bold</v-icon></v-btn>
-              <v-btn tile> <v-icon>fa-italic</v-icon></v-btn>
-              <v-btn tile> <v-icon>fa-strikethrough</v-icon></v-btn>
-              <v-btn tile> <v-icon>fa-heading</v-icon></v-btn>
-              <v-btn tile> <v-icon>fa-minus</v-icon></v-btn>
-              <v-btn tile> <v-icon>fa-quote-left</v-icon></v-btn>
-              <v-btn tile> <v-icon>fa-list-ul</v-icon></v-btn>
-              <v-btn tile> <v-icon>fa-list-ol</v-icon></v-btn>
-              <v-btn tile> <v-icon>fa-check-square</v-icon></v-btn>
-              <v-btn tile> <v-icon>fa-table</v-icon></v-btn>
-              <v-btn tile> <v-icon>fa-link</v-icon></v-btn>
-              <v-btn tile> <v-icon>fa-image</v-icon></v-btn>
+        <template v-if="tabView">
+          <v-tabs>
+            <v-tab>Edit</v-tab>
+            <v-tab>View</v-tab>
+            <v-tab-item>
+              <div>
+                <v-btn tile> <v-icon>fa-bold</v-icon></v-btn>
+                <v-btn tile> <v-icon>fa-italic</v-icon></v-btn>
+                <v-btn tile> <v-icon>fa-strikethrough</v-icon></v-btn>
+                <v-btn tile> <v-icon>fa-heading</v-icon></v-btn>
+                <v-btn tile> <v-icon>fa-minus</v-icon></v-btn>
+                <v-btn tile> <v-icon>fa-quote-left</v-icon></v-btn>
+                <v-btn tile> <v-icon>fa-list-ul</v-icon></v-btn>
+                <v-btn tile> <v-icon>fa-list-ol</v-icon></v-btn>
+                <v-btn tile> <v-icon>fa-check-square</v-icon></v-btn>
+                <v-btn tile> <v-icon>fa-table</v-icon></v-btn>
+                <v-btn tile> <v-icon>fa-link</v-icon></v-btn>
+                <v-btn tile> <v-icon>fa-image</v-icon></v-btn>
 
-              <v-btn tile> <v-icon>fa-code</v-icon></v-btn>
-              <v-btn tile> <v-icon>fa-square-full</v-icon></v-btn>
-              <v-btn tile> <v-icon>fa-columns</v-icon></v-btn>
-            </div>
-            <v-textarea v-model="value" auto-grow></v-textarea>
-          </v-col>
-          <v-col cols="6">
-            <div class="aywiki" v-html="compiledOutput()"></div>
-          </v-col>
-        </v-row>
+                <v-btn tile> <v-icon>fa-code</v-icon></v-btn>
+                <v-btn tile> <v-icon>fa-square-full</v-icon></v-btn>
+                <v-btn tile> <v-icon>fa-columns</v-icon></v-btn>
+              </div>
+              <v-textarea v-model="value" auto-grow></v-textarea
+            ></v-tab-item>
+            <v-tab-item
+              ><div class="aywiki" v-html="compiledOutput()"></div
+            ></v-tab-item>
+          </v-tabs>
+        </template>
+        <template v-else>
+          <v-row>
+            <v-col cols="6">
+              <div>
+                <v-btn elevation="0" tile> <v-icon>fa-bold</v-icon></v-btn>
+                <v-btn elevation="0" tile> <v-icon>fa-italic</v-icon></v-btn>
+                <v-btn elevation="0" tile> <v-icon>fa-strikethrough</v-icon></v-btn>
+                <v-btn tile> <v-icon>fa-heading</v-icon></v-btn>
+                <v-btn tile> <v-icon>fa-minus</v-icon></v-btn>
+                <v-btn tile> <v-icon>fa-quote-left</v-icon></v-btn>
+                <v-btn tile> <v-icon>fa-list-ul</v-icon></v-btn>
+                <v-btn tile outlined> <v-icon>fa-list-ol</v-icon></v-btn>
+                <v-btn tile outlined> <v-icon>fa-check-square</v-icon></v-btn>
+                <v-btn tile outlined> <v-icon>fa-table</v-icon></v-btn>
+                <v-btn tile> <v-icon>fa-link</v-icon></v-btn>
+                <v-btn tile> <v-icon>fa-image</v-icon></v-btn>
+
+                <v-btn tile> <v-icon>fa-code</v-icon></v-btn>
+                <v-btn tile> <v-icon>fa-square-full</v-icon></v-btn>
+                <v-btn tile> <v-icon>fa-columns</v-icon></v-btn>
+              </div>
+              <v-textarea v-model="value" auto-grow></v-textarea>
+            </v-col>
+            <v-col cols="6">
+              <div class="aywiki" v-html="compiledOutput()"></div>
+            </v-col>
+          </v-row>
+        </template>
       </div>
     </v-sheet>
   </div>
@@ -59,7 +91,8 @@ export default {
   data() {
     return {
       wikiVisible: true,
-      editMode: true
+      editMode: true,
+      tabView: false
     };
   },
   props: {
@@ -79,6 +112,9 @@ export default {
 /**
 todo:
 
+try to make view without using tab control
+  - user picks view in toolbar from choices of split, design or result view and toggles when they select these choices
+
 
 Show/hide/edit control
 eyeball icon like password reveal