admin/raven-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
John Cardinal
2020-04-17 00:48:37 +00:00
parent 5ef861a277
commit 3c75830079
1 changed files with 107 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
ayanova/src/components/wiki-control.vue
View File

@@ -3,96 +3,63 @@
<span class="v-label v-label--active theme--light"> <span class="v-label v-label--active theme--light">
Wiki Wiki
</span> </span>
<div> <v-btn tile @click="switchView()">
<v-btn x-large icon @click="wikiVisible = !wikiVisible"> <v-icon left>switchViewIcon()</v-icon>View</v-btn
<v-icon>{{ visibleIcon() }}</v-icon> >
</v-btn> <v-sheet
</div> v-if="currentView != 0"
elevation="2"
<v-sheet v-if="wikiVisible" elevation="2" class="aywiki pa-2 pa-sm-6 mt-2"> class="aywiki pa-2 pa-sm-6 mt-2"
<v-btn >
:color="!!editMode ? 'secondary' : false" <v-row>
x-large <!-- DESIGNER -->
icon <v-col
v-if="canEdit" v-if="canEdit"
text v-show="showDesigner()"
@click="editMode = !editMode" :cols="currentView == 1 ? 6 : 12"
> >
<v-icon>fa-edit</v-icon></v-btn <div>
> <v-btn depressed tile> <v-icon>fa-bold</v-icon></v-btn>
<div v-if="!editMode" v-html="compiledOutput()"></div> <v-btn depressed tile> <v-icon>fa-italic</v-icon></v-btn>
<div v-if="editMode"> <v-btn depressed tile> <v-icon>fa-strikethrough</v-icon></v-btn>
<template v-if="tabView"> <v-btn depressed tile> <v-icon>fa-heading</v-icon></v-btn>
<v-tabs> <v-btn depressed tile class="ml-1">
<v-tab>Edit</v-tab> <v-icon>fa-minus</v-icon></v-btn
<v-tab>View</v-tab> >
<v-tab-item> <v-btn depressed tile> <v-icon>fa-quote-left</v-icon></v-btn>
<div> <v-btn depressed tile> <v-icon>fa-list-ul</v-icon></v-btn>
<v-btn tile> <v-icon>fa-bold</v-icon></v-btn> <v-btn depressed tile> <v-icon>fa-list-ol</v-icon></v-btn>
<v-btn tile> <v-icon>fa-italic</v-icon></v-btn> <v-btn depressed tile> <v-icon>fa-check-square</v-icon></v-btn>
<v-btn tile> <v-icon>fa-strikethrough</v-icon></v-btn> <v-btn depressed tile class="ml-1">
<v-btn tile> <v-icon>fa-heading</v-icon></v-btn> <v-icon>fa-table</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 depressed tile> <v-icon>fa-link</v-icon></v-btn>
<v-btn tile> <v-icon>fa-list-ul</v-icon></v-btn> <v-btn depressed tile> <v-icon>fa-image</v-icon></v-btn>
<v-btn tile> <v-icon>fa-list-ol</v-icon></v-btn> <v-btn depressed tile class="ml-1"> <v-icon>fa-code</v-icon></v-btn>
<v-btn tile> <v-icon>fa-check-square</v-icon></v-btn> <v-btn depressed tile> <v-icon>fa-square-full</v-icon></v-btn>
<v-btn tile> <v-icon>fa-table</v-icon></v-btn> </div>
<v-btn tile> <v-icon>fa-link</v-icon></v-btn> <v-textarea v-model="value" auto-grow></v-textarea>
<v-btn tile> <v-icon>fa-image</v-icon></v-btn> </v-col>
<!-- WIKI -->
<v-btn tile> <v-icon>fa-code</v-icon></v-btn> <v-col v-show="showWiki()" :cols="currentView == 1 ? 6 : 12">
<v-btn tile> <v-icon>fa-square-full</v-icon></v-btn> <div class="aywiki" v-html="compiledOutput()"></div>
<v-btn tile> <v-icon>fa-columns</v-icon></v-btn> </v-col>
</div> </v-row>
<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> </v-sheet>
</div> </div>
</template> </template>
<script> <script>
import marked from "marked"; import marked from "marked";
import DOMPurify from "dompurify"; import DOMPurify from "dompurify";
const HIDDEN_VIEW = 0;
const SPLIT_VIEW = 1;
const WIKI_VIEW = 2;
const DESIGN_VIEW = 3;
export default { export default {
data() { data() {
return { return {
wikiVisible: true, currentView: HIDDEN_VIEW
editMode: true,
tabView: false
}; };
}, },
props: { props: {
@@ -100,6 +67,64 @@ export default {
canEdit: Boolean canEdit: Boolean
}, },
methods: { methods: {
switchViewIcon() {
//return the icon that indicates what it will change to if you click it
//mirror of switchview below
if (!this.canEdit) {
if (this.currentView == HIDDEN_VIEW) {
return "fa-eye";
} else {
return "fa-eye-slash";
}
return;
}
switch (this.currentView) {
case HIDDEN_VIEW:
return "fa-eye";
case WIKI_VIEW:
return "fa-columns";
case SPLIT_VIEW:
return "fa-feather";
case DESIGN_VIEW:
return "fa-eye";
}
},
showWiki() {
return this.currentView == WIKI_VIEW || this.currentView == SPLIT_VIEW;
},
showDesigner() {
return this.currentView == DESIGN_VIEW || this.currentView == SPLIT_VIEW;
},
switchView() {
//if user can't edit then cycle between hidden and wiki view
if (!this.canEdit) {
if (this.currentView == HIDDEN_VIEW) {
this.currentView = WIKI_VIEW;
} else {
this.currentView = HIDDEN_VIEW;
}
return;
}
//user can edit so switch OUT of hidden view but never into it
//and cycle between design, split and wiki views only
//never goes into hidden
switch (this.currentView) {
case HIDDEN_VIEW:
this.currentView = WIKI_VIEW;
break;
case WIKI_VIEW:
this.currentView = SPLIT_VIEW;
break;
case SPLIT_VIEW:
this.currentView = DESIGN_VIEW;
break;
case DESIGN_VIEW:
this.currentView = WIKI_VIEW;
break;
}
},
visibleIcon() { visibleIcon() {
return this.wikiVisible ? "fa-eye-slash" : "fa-eye"; return this.wikiVisible ? "fa-eye-slash" : "fa-eye";
}, },
@@ -115,7 +140,7 @@ todo:
try to make view without using tab control 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 - user picks view in toolbar from choices of split, design or result view and toggles when they select these choices
Add "View" translation key
Show/hide/edit control Show/hide/edit control
eyeball icon like password reveal eyeball icon like password reveal
flag as dirty when edited flag as dirty when edited