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">
Wiki
</span>
<div>
<v-btn x-large icon @click="wikiVisible = !wikiVisible">
<v-icon>{{ visibleIcon() }}</v-icon>
</v-btn>
</div>
<v-sheet v-if="wikiVisible" elevation="2" class="aywiki pa-2 pa-sm-6 mt-2">
<v-btn
:color="!!editMode ? 'secondary' : false"
x-large
icon
v-if="canEdit"
text
@click="editMode = !editMode"
>
<v-icon>fa-edit</v-icon></v-btn
>
<div v-if="!editMode" v-html="compiledOutput()"></div>
<div v-if="editMode">
<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-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-btn tile @click="switchView()">
<v-icon left>switchViewIcon()</v-icon>View</v-btn
>
<v-sheet
v-if="currentView != 0"
elevation="2"
class="aywiki pa-2 pa-sm-6 mt-2"
>
<v-row>
<!-- DESIGNER -->
<v-col
v-if="canEdit"
v-show="showDesigner()"
:cols="currentView == 1 ? 6 : 12"
>
<div>
<v-btn depressed tile> <v-icon>fa-bold</v-icon></v-btn>
<v-btn depressed tile> <v-icon>fa-italic</v-icon></v-btn>
<v-btn depressed tile> <v-icon>fa-strikethrough</v-icon></v-btn>
<v-btn depressed tile> <v-icon>fa-heading</v-icon></v-btn>
<v-btn depressed tile class="ml-1">
<v-icon>fa-minus</v-icon></v-btn
>
<v-btn depressed tile> <v-icon>fa-quote-left</v-icon></v-btn>
<v-btn depressed tile> <v-icon>fa-list-ul</v-icon></v-btn>
<v-btn depressed tile> <v-icon>fa-list-ol</v-icon></v-btn>
<v-btn depressed tile> <v-icon>fa-check-square</v-icon></v-btn>
<v-btn depressed tile class="ml-1">
<v-icon>fa-table</v-icon></v-btn
>
<v-btn depressed tile> <v-icon>fa-link</v-icon></v-btn>
<v-btn depressed tile> <v-icon>fa-image</v-icon></v-btn>
<v-btn depressed tile class="ml-1"> <v-icon>fa-code</v-icon></v-btn>
<v-btn depressed tile> <v-icon>fa-square-full</v-icon></v-btn>
</div>
<v-textarea v-model="value" auto-grow></v-textarea>
</v-col>
<!-- WIKI -->
<v-col v-show="showWiki()" :cols="currentView == 1 ? 6 : 12">
<div class="aywiki" v-html="compiledOutput()"></div>
</v-col>
</v-row>
</v-sheet>
</div>
</template>
<script>
import marked from "marked";
import DOMPurify from "dompurify";
const HIDDEN_VIEW = 0;
const SPLIT_VIEW = 1;
const WIKI_VIEW = 2;
const DESIGN_VIEW = 3;
export default {
data() {
return {
wikiVisible: true,
editMode: true,
tabView: false
currentView: HIDDEN_VIEW
};
},
props: {
@@ -100,6 +67,64 @@ export default {
canEdit: Boolean
},
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() {
return this.wikiVisible ? "fa-eye-slash" : "fa-eye";
},
@@ -115,7 +140,7 @@ 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
Add "View" translation key
Show/hide/edit control
eyeball icon like password reveal
flag as dirty when edited