feat: editor select custom view UI
This commit is contained in:
Nick
parent
b6fd070b0b
commit
dedcd191a3
@ -6,27 +6,45 @@
|
||||
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
|
||||
disabled
|
||||
)
|
||||
v-card-text.text-center(@click='selectEditor("api")')
|
||||
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-hover
|
||||
template(v-slot:default='{ hover }')
|
||||
v-card.radius-7.grey(
|
||||
hover
|
||||
light
|
||||
ripple
|
||||
disabled
|
||||
)
|
||||
v-card-text.text-center(@click='selectEditor("code")')
|
||||
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-hover
|
||||
template(v-slot:default='{ hover }')
|
||||
v-card.radius-7.grey(
|
||||
hover
|
||||
light
|
||||
ripple
|
||||
disabled
|
||||
)
|
||||
v-card-text.text-center(@click='selectEditor("tabular")')
|
||||
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-hover
|
||||
template(v-slot:default='{ hover }')
|
||||
v-card.radius-7.grey(
|
||||
hover
|
||||
light
|
||||
ripple
|
||||
disabled
|
||||
)
|
||||
v-card-text.text-center(@click='selectEditor("wikitext")')
|
||||
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>
|
||||
|
||||
1
client/static/svg/icon-cube.svg
Normal file
1
client/static/svg/icon-cube.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 968 B |
1
client/static/svg/icon-hierarchy.svg
Normal file
1
client/static/svg/icon-hierarchy.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 340 B |
1
client/static/svg/icon-sewing-patch.svg
Normal file
1
client/static/svg/icon-sewing-patch.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
Loading…
Reference in New Issue
Block a user