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(
+              v-hover
-                hover
+                template(v-slot:default='{ hover }')
-                light
+                  v-card.radius-7.grey(
-                ripple
+                    hover
-                disabled
+                    light
-                )
+                    ripple
-                v-card-text.text-center(@click='selectEditor("api")')
+                    )
-                  img(src='/svg/icon-rest-api.svg', alt='API', style='width: 36px;')
+                    v-card-text.text-center(@click='')
-                  .body-2.mt-2.grey--text.text--darken-2 API Docs
+                      img(src='/svg/icon-rest-api.svg', alt='API', style='width: 36px;')
-                  .caption.grey--text.text--darken-1 REST / GraphQL
+                      .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(
+              v-hover
-                hover
+                template(v-slot:default='{ hover }')
-                light
+                  v-card.radius-7.grey(
-                ripple
+                    hover
-                disabled
+                    light
-                )
+                    ripple
-                v-card-text.text-center(@click='selectEditor("code")')
+                    )
-                  img(src='/svg/icon-source-code.svg', alt='Code', style='width: 36px;')
+                    v-card-text.text-center(@click='')
-                  .body-2.mt-2.grey--text.text--darken-2 Code
+                      img(src='/svg/icon-source-code.svg', alt='Code', style='width: 36px;')
-                  .caption.grey--text.text--darken-1 Raw HTML
+                      .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(
+              v-hover
-                hover
+                template(v-slot:default='{ hover }')
-                light
+                  v-card.radius-7.grey(
-                ripple
+                    hover
-                disabled
+                    light
-                )
+                    ripple
-                v-card-text.text-center(@click='selectEditor("tabular")')
+                    )
-                  img(src='/svg/icon-table.svg', alt='Tabular', style='width: 36px;')
+                    v-card-text.text-center(@click='')
-                  .body-2.grey--text.mt-2.text--darken-2 Tabular
+                      img(src='/svg/icon-table.svg', alt='Tabular', style='width: 36px;')
-                  .caption.grey--text.text--darken-1 Excel-like
+                      .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(
+              v-hover
-                hover
+                template(v-slot:default='{ hover }')
-                light
+                  v-card.radius-7.grey(
-                ripple
+                    hover
-                disabled
+                    light
-                )
+                    ripple
-                v-card-text.text-center(@click='selectEditor("wikitext")')
+                    )
-                  img(src='/svg/icon-news.svg', alt='WikiText', style='width: 36px;')
+                    v-card-text.text-center(@click='')
-                  .body-2.grey--text.mt-2.text--darken-2 WikiText
+                      img(src='/svg/icon-news.svg', alt='WikiText', style='width: 36px;')
-                  .caption.grey--text.text--darken-1 MediaWiki Format
+                      .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>

client/static/svg/icon-sewing-patch.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" x="0" y="0" version="1.1" viewBox="0 0 128 128" xml:space="preserve" width="128" height="128"><path fill="#d3d8dd" d="M99,119H29c-11,0-20-9-20-20V29C9,18,18,9,29,9h70c11,0,20,9,20,20v70C119,110,110,119,99,119z"/><path fill="#444b54" d="M99,122H29c-12.7,0-23-10.3-23-23V29c0-1.7,1.3-3,3-3s3,1.3,3,3v70c0,9.4,7.6,17,17,17h70c9.4,0,17-7.6,17-17 V29c0-9.4-7.6-17-17-17H29c-4.5,0-8.8,1.8-12,5c-1.2,1.2-3.1,1.2-4.2,0c-1.2-1.2-1.2-3.1,0-4.2C17.1,8.4,22.9,6,29,6h70 c12.7,0,23,10.3,23,23v70C122,111.7,111.7,122,99,122z"/><path fill="#fff" d="M94,107h-3c-1.7,0-3-1.3-3-3s1.3-3,3-3h3c1.7,0,3,1.3,3,3S95.7,107,94,107z M76.2,107h-3c-1.7,0-3-1.3-3-3 s1.3-3,3-3h3c1.7,0,3,1.3,3,3S77.8,107,76.2,107z M58.4,107h-3c-1.7,0-3-1.3-3-3s1.3-3,3-3h3c1.7,0,3,1.3,3,3S60,107,58.4,107z M40.6,107h-3c-1.7,0-3-1.3-3-3s1.3-3,3-3h3c1.7,0,3,1.3,3,3S42.2,107,40.6,107z M25,101.3c-1.1,0-2.2-0.6-2.7-1.7 c-0.6-1.2-0.9-2.4-1.1-3.7c-0.2-1.6,0.9-3.2,2.5-3.4c1.6-0.2,3.2,0.9,3.4,2.5c0.1,0.7,0.3,1.3,0.6,2c0.7,1.5,0.1,3.3-1.4,4 C25.9,101.2,25.4,101.3,25,101.3z M104,97.8c-0.1,0-0.2,0-0.2,0c-1.7-0.1-2.9-1.6-2.7-3.2c0-0.2,0-0.4,0-0.6v-2.1 c0-1.7,1.3-3,3-3s3,1.3,3,3V94c0,0.4,0,0.7,0,1.1C106.8,96.6,105.5,97.8,104,97.8z M24,83.7c-1.7,0-3-1.3-3-3v-3c0-1.7,1.3-3,3-3 s3,1.3,3,3v3C27,82.3,25.7,83.7,24,83.7z M104,80c-1.7,0-3-1.3-3-3v-3c0-1.7,1.3-3,3-3s3,1.3,3,3v3C107,78.7,105.7,80,104,80z M24,65.8c-1.7,0-3-1.3-3-3v-3c0-1.7,1.3-3,3-3s3,1.3,3,3v3C27,64.5,25.7,65.8,24,65.8z M104,62.2c-1.7,0-3-1.3-3-3v-3 c0-1.7,1.3-3,3-3s3,1.3,3,3v3C107,60.9,105.7,62.2,104,62.2z M24,48c-1.7,0-3-1.3-3-3v-3c0-1.7,1.3-3,3-3s3,1.3,3,3v3 C27,46.7,25.7,48,24,48z M104,44.4c-1.7,0-3-1.3-3-3v-3c0-1.7,1.3-3,3-3s3,1.3,3,3v3C107,43,105.7,44.4,104,44.4z M26.2,30.7 c-0.7,0-1.3-0.2-1.9-0.7c-1.3-1-1.5-2.9-0.5-4.2c0.8-1,1.8-1.9,2.8-2.6c1.4-0.9,3.2-0.6,4.2,0.8c0.9,1.4,0.6,3.2-0.8,4.2 c-0.6,0.4-1.1,0.9-1.5,1.4C28,30.3,27.1,30.7,26.2,30.7z M99,28.4c-0.5,0-1-0.1-1.5-0.4c-0.6-0.4-1.2-0.6-1.9-0.8 c-1.6-0.4-2.6-2-2.2-3.6c0.4-1.6,2-2.6,3.6-2.2c1.3,0.3,2.5,0.8,3.6,1.4c1.4,0.8,1.9,2.7,1.1,4.1C101.1,27.8,100.1,28.4,99,28.4z M81.5,27h-3c-1.7,0-3-1.3-3-3s1.3-3,3-3h3c1.7,0,3,1.3,3,3S83.1,27,81.5,27z M63.7,27h-3c-1.7,0-3-1.3-3-3s1.3-3,3-3h3 c1.7,0,3,1.3,3,3S65.3,27,63.7,27z M45.9,27h-3c-1.7,0-3-1.3-3-3s1.3-3,3-3h3c1.7,0,3,1.3,3,3S47.5,27,45.9,27z"/></svg>