feat: editor select custom view UI

client/components/editor/editor-modal-editorselect.vue

@@ -6,27 +6,45 @@
         v-container(grid-list-lg, fluid)
           v-layout(row, wrap, justify-center)
             v-flex(xs4)
-              v-card.radius-7.grey(
-                hover
-                light
-                ripple
-                disabled
-                )
-                v-card-text.text-center(@click='selectEditor("api")')
-                  img(src='/svg/icon-rest-api.svg', alt='API', style='width: 36px;')
-                  .body-2.mt-2.grey--text.text--darken-2 API Docs
-                  .caption.grey--text.text--darken-1 REST / GraphQL
+              v-hover
+                template(v-slot:default='{ hover }')
+                  v-card.radius-7.grey(
+                    hover
+                    light
+                    ripple
+                    )
+                    v-card-text.text-center(@click='')
+                      img(src='/svg/icon-rest-api.svg', alt='API', style='width: 36px;')
+                      .body-2.mt-2.grey--text.text--darken-2 API Docs
+                      .caption.grey--text.text--darken-1 REST / GraphQL
+                    v-fade-transition
+                      v-overlay(
+                        v-if='hover'
+                        absolute
+                        color='primary'
+                        opacity='.8'
+                        )
+                        .body-2 Coming Soon
             v-flex(xs4)
-              v-card.radius-7.grey(
-                hover
-                light
-                ripple
-                disabled
-                )
-                v-card-text.text-center(@click='selectEditor("code")')
-                  img(src='/svg/icon-source-code.svg', alt='Code', style='width: 36px;')
-                  .body-2.mt-2.grey--text.text--darken-2 Code
-                  .caption.grey--text.text--darken-1 Raw HTML
+              v-hover
+                template(v-slot:default='{ hover }')
+                  v-card.radius-7.grey(
+                    hover
+                    light
+                    ripple
+                    )
+                    v-card-text.text-center(@click='')
+                      img(src='/svg/icon-source-code.svg', alt='Code', style='width: 36px;')
+                      .body-2.mt-2.grey--text.text--darken-2 Code
+                      .caption.grey--text.text--darken-1 Raw HTML
+                    v-fade-transition
+                      v-overlay(
+                        v-if='hover'
+                        absolute
+                        color='primary'
+                        opacity='.8'
+                        )
+                        .body-2 Coming Soon
             v-flex(xs4)
               v-card.radius-7(
                 hover
@@ -38,16 +56,25 @@
                   .primary--text.body-2.mt-2 Markdown
                   .caption.grey--text Default
             v-flex(xs4)
-              v-card.radius-7.grey(
-                hover
-                light
-                ripple
-                disabled
-                )
-                v-card-text.text-center(@click='selectEditor("tabular")')
-                  img(src='/svg/icon-table.svg', alt='Tabular', style='width: 36px;')
-                  .body-2.grey--text.mt-2.text--darken-2 Tabular
-                  .caption.grey--text.text--darken-1 Excel-like
+              v-hover
+                template(v-slot:default='{ hover }')
+                  v-card.radius-7.grey(
+                    hover
+                    light
+                    ripple
+                    )
+                    v-card-text.text-center(@click='')
+                      img(src='/svg/icon-table.svg', alt='Tabular', style='width: 36px;')
+                      .body-2.grey--text.mt-2.text--darken-2 Tabular
+                      .caption.grey--text.text--darken-1 Excel-like
+                    v-fade-transition
+                      v-overlay(
+                        v-if='hover'
+                        absolute
+                        color='primary'
+                        opacity='.8'
+                        )
+                        .body-2 Coming Soon
             //- v-flex(xs4)
             //-   v-card.radius-7.grey(
             //-     hover
@@ -70,17 +97,92 @@
                   .body-2.mt-2.primary--text Visual Editor
                   .caption.grey--text Rich-text WYSIWYG
             v-flex(xs4)
-              v-card.radius-7.grey(
-                hover
-                light
-                ripple
-                disabled
-                )
-                v-card-text.text-center(@click='selectEditor("wikitext")')
-                  img(src='/svg/icon-news.svg', alt='WikiText', style='width: 36px;')
-                  .body-2.grey--text.mt-2.text--darken-2 WikiText
-                  .caption.grey--text.text--darken-1 MediaWiki Format
+              v-hover
+                template(v-slot:default='{ hover }')
+                  v-card.radius-7.grey(
+                    hover
+                    light
+                    ripple
+                    )
+                    v-card-text.text-center(@click='')
+                      img(src='/svg/icon-news.svg', alt='WikiText', style='width: 36px;')
+                      .body-2.grey--text.mt-2.text--darken-2 WikiText
+                      .caption.grey--text.text--darken-1 MediaWiki Format
+                    v-fade-transition
+                      v-overlay(
+                        v-if='hover'
+                        absolute
+                        color='primary'
+                        opacity='.8'
+                        )
+                        .body-2 Coming Soon
         .caption.blue--text.text--lighten-2 {{$t('editor:select.cannotChange')}}
+
+    v-card.radius-7.mt-3(color='teal darken-3', dark)
+      v-card-text.text-center.py-4
+        .subtitle-1.white--text {{$t('editor:select.customView')}}
+        v-container(grid-list-lg, fluid)
+          v-layout(row, wrap, justify-center)
+            v-flex(xs4)
+              v-hover
+                template(v-slot:default='{ hover }')
+                  v-card.radius-7.grey(
+                    hover
+                    light
+                    ripple
+                    )
+                    v-card-text.text-center(@click='')
+                      img(src='/svg/icon-cube.svg', alt='From Template', style='width: 42px;')
+                      .body-2.mt-1.grey--text.text--darken-2 From Template
+                      .caption.grey--text.text--darken-1 Use an existing page / tree
+                    v-fade-transition
+                      v-overlay(
+                        v-if='hover'
+                        absolute
+                        color='teal'
+                        opacity='.8'
+                        )
+                        .body-2 Coming Soon
+            v-flex(xs4)
+              v-hover
+                template(v-slot:default='{ hover }')
+                  v-card.radius-7.grey(
+                    hover
+                    light
+                    ripple
+                    )
+                    v-card-text.text-center(@click='')
+                      img(src='/svg/icon-hierarchy.svg', alt='Code', style='width: 42px;')
+                      .body-2.mt-1.grey--text.text--darken-2 Tree View
+                      .caption.grey--text.text--darken-1 List children pages
+                    v-fade-transition
+                      v-overlay(
+                        v-if='hover'
+                        absolute
+                        color='teal'
+                        opacity='.8'
+                        )
+                        .body-2 Coming Soon
+            v-flex(xs4)
+              v-hover
+                template(v-slot:default='{ hover }')
+                  v-card.radius-7.grey(
+                    hover
+                    light
+                    ripple
+                    )
+                    v-card-text.text-center(@click='')
+                      img(src='/svg/icon-sewing-patch.svg', alt='Code', style='width: 42px;')
+                      .body-2.mt-1.grey--text.text--darken-2 Embed
+                      .caption.grey--text.text--darken-1 Include external pages
+                    v-fade-transition
+                      v-overlay(
+                        v-if='hover'
+                        absolute
+                        color='teal'
+                        opacity='.8'
+                        )
+                        .body-2 Coming Soon
 </template>
 
 <script>

client/static/svg/icon-cube.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="64" height="64"><path fill="#fff" d="M19 39L19 109 89 109 109 89 39 19z"/><path fill="#d3d8dd" d="M109,19H39v67c0,1.7,1.3,3,3,3h67V19z"/><path fill="#444b54" d="M101.1,26.9c-1.2-1.2-3.1-1.2-4.2,0L87.8,36H34c-1.7,0-3,1.3-3,3s1.3,3,3,3h52v52c0,1.7,1.3,3,3,3s3-1.3,3-3V40.2l9.1-9.1C102.3,29.9,102.3,28.1,101.1,26.9z"/><path fill="#444b54" d="M109,16H39c-0.2,0-0.4,0-0.6,0.1c-0.1,0-0.2,0.1-0.3,0.1c-0.1,0-0.2,0.1-0.3,0.1c-0.1,0-0.2,0.1-0.3,0.2c-0.1,0-0.2,0.1-0.2,0.1c-0.2,0.1-0.3,0.2-0.5,0.4l-20,20c-0.1,0.1-0.3,0.3-0.4,0.5c0,0.1-0.1,0.1-0.1,0.2c-0.1,0.1-0.1,0.2-0.2,0.3c0,0.1-0.1,0.2-0.1,0.3c0,0.1-0.1,0.2-0.1,0.3c0,0.2-0.1,0.4-0.1,0.6v70c0,1.7,1.3,3,3,3h70c0.2,0,0.4,0,0.6-0.1c0.1,0,0.2-0.1,0.3-0.1c0.1,0,0.2-0.1,0.3-0.1c0.1,0,0.2-0.1,0.3-0.2c0.1,0,0.2-0.1,0.2-0.1c0.2-0.1,0.3-0.2,0.5-0.4l20-20c0.6-0.6,0.9-1.3,0.9-2.1V19C112,17.3,110.7,16,109,16z M106,87.8L87.8,106H22V40.2L40.2,22H106V87.8z"/></svg>

client/static/svg/icon-hierarchy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 48 48" width="96" height="96"><path fill="#90CAF9" d="M36 13L36 9 22 9 22 22 13 22 13 26 22 26 22 39 36 39 36 35 26 35 26 26 36 26 36 22 26 22 26 13z"/><path fill="#D81B60" d="M6 17H16V31H6z"/><path fill="#2196F3" d="M32 6H42V16H32zM32 32H42V42H32zM32 19H42V29H32z"/></svg>