feat: editor page props UI improvements + codemirror fix
This commit is contained in:
Nick
@@ -2,7 +2,7 @@
|
||||
v-dialog(
|
||||
v-model='isShown'
|
||||
persistent
|
||||
width='1100'
|
||||
width='1000'
|
||||
:fullscreen='$vuetify.breakpoint.smAndDown'
|
||||
)
|
||||
.dialog-header
|
||||
@@ -17,159 +17,204 @@
|
||||
v-icon(left) mdi-check
|
||||
span {{ $t('common:actions.ok') }}
|
||||
v-card(tile)
|
||||
v-card-text.pt-5
|
||||
.overline.pb-5 {{$t('editor:props.pageInfo')}}
|
||||
v-text-field(
|
||||
ref='iptTitle'
|
||||
outlined
|
||||
:label='$t(`editor:props.title`)'
|
||||
counter='255'
|
||||
v-model='title'
|
||||
)
|
||||
v-text-field(
|
||||
outlined
|
||||
:label='$t(`editor:props.shortDescription`)'
|
||||
counter='255'
|
||||
v-model='description'
|
||||
persistent-hint
|
||||
:hint='$t(`editor:props.shortDescriptionHint`)'
|
||||
)
|
||||
v-divider
|
||||
v-card-text.grey.pt-5(:class='darkMode ? `darken-3-d3` : `lighten-5`')
|
||||
.overline.pb-5 {{$t('editor:props.pathCategorization')}}
|
||||
v-container.pa-0(fluid, grid-list-lg)
|
||||
v-layout(row, wrap)
|
||||
v-flex(xs12, md2)
|
||||
v-select(
|
||||
outlined
|
||||
:label='$t(`editor:props.locale`)'
|
||||
suffix='/'
|
||||
:items='namespaces'
|
||||
v-model='locale'
|
||||
hide-details
|
||||
:disabled='mode !== "create"'
|
||||
v-tabs(color='white', background-color='blue darken-1', dark, centered)
|
||||
v-tab {{$t('editor:props.info')}}
|
||||
v-tab {{$t('editor:props.scheduling')}}
|
||||
v-tab {{$t('editor:props.social')}}
|
||||
v-tab-item
|
||||
v-card-text.pt-5
|
||||
.overline.pb-5 {{$t('editor:props.pageInfo')}}
|
||||
v-text-field(
|
||||
ref='iptTitle'
|
||||
outlined
|
||||
:label='$t(`editor:props.title`)'
|
||||
counter='255'
|
||||
v-model='title'
|
||||
)
|
||||
v-flex(xs12, md10)
|
||||
v-text-field(
|
||||
outlined
|
||||
:label='$t(`editor:props.path`)'
|
||||
append-icon='mdi-folder-search'
|
||||
v-model='path'
|
||||
:hint='$t(`editor:props.pathHint`)'
|
||||
persistent-hint
|
||||
@click:append='showPathSelector'
|
||||
:disabled='mode !== "create"'
|
||||
)
|
||||
v-combobox(
|
||||
chips
|
||||
deletable-chips
|
||||
:label='$t(`editor:props.tags`)'
|
||||
outlined
|
||||
multiple
|
||||
v-model='tags'
|
||||
single-line
|
||||
:hint='`COMING SOON - ` + $t(`editor:props.tagsHint`)'
|
||||
persistent-hint
|
||||
disabled
|
||||
)
|
||||
v-divider
|
||||
v-card-text.py-5.grey(:class='darkMode ? `darken-3-d5` : `lighten-4`')
|
||||
.overline.pb-5 {{$t('editor:props.publishState')}} #[v-chip.ml-3(label, color='grey', small, outlined).white--text coming soon]
|
||||
v-container.pa-0(fluid, grid-list-lg)
|
||||
v-layout(row, wrap)
|
||||
v-flex(xs12, md4)
|
||||
v-switch(
|
||||
:label='$t(`editor:props.publishToggle`)'
|
||||
v-model='isPublished'
|
||||
color='primary'
|
||||
:hint='$t(`editor:props.publishToggleHint`)'
|
||||
persistent-hint
|
||||
disabled
|
||||
)
|
||||
v-flex(xs12, md4)
|
||||
v-dialog(
|
||||
ref='menuPublishStart'
|
||||
:close-on-content-click='false'
|
||||
v-model='isPublishStartShown'
|
||||
:return-value.sync='publishStartDate'
|
||||
full-width
|
||||
width='460px'
|
||||
:disabled='!isPublished || true'
|
||||
)
|
||||
template(v-slot:activator='{ on }')
|
||||
v-text-field(
|
||||
v-on='on'
|
||||
:label='$t(`editor:props.publishStart`)'
|
||||
v-model='publishStartDate'
|
||||
prepend-icon='mdi-calendar-check'
|
||||
readonly
|
||||
v-text-field(
|
||||
outlined
|
||||
:label='$t(`editor:props.shortDescription`)'
|
||||
counter='255'
|
||||
v-model='description'
|
||||
persistent-hint
|
||||
:hint='$t(`editor:props.shortDescriptionHint`)'
|
||||
)
|
||||
v-divider
|
||||
v-card-text.grey.pt-5(:class='darkMode ? `darken-3-d3` : `lighten-5`')
|
||||
.overline.pb-5 {{$t('editor:props.path')}}
|
||||
v-container.pa-0(fluid, grid-list-lg)
|
||||
v-layout(row, wrap)
|
||||
v-flex(xs12, md2)
|
||||
v-select(
|
||||
outlined
|
||||
clearable
|
||||
:hint='$t(`editor:props.publishStartHint`)'
|
||||
:label='$t(`editor:props.locale`)'
|
||||
suffix='/'
|
||||
:items='namespaces'
|
||||
v-model='locale'
|
||||
hide-details
|
||||
:disabled='mode !== "create"'
|
||||
)
|
||||
v-flex(xs12, md10)
|
||||
v-text-field(
|
||||
outlined
|
||||
:label='$t(`editor:props.path`)'
|
||||
append-icon='mdi-folder-search'
|
||||
v-model='path'
|
||||
:hint='$t(`editor:props.pathHint`)'
|
||||
persistent-hint
|
||||
@click:append='showPathSelector'
|
||||
:disabled='mode !== "create"'
|
||||
)
|
||||
v-divider
|
||||
v-card-text.grey.pt-5(:class='darkMode ? `darken-3-d5` : `lighten-4`')
|
||||
.overline.pb-5 {{$t('editor:props.categorization')}}
|
||||
v-combobox(
|
||||
chips
|
||||
deletable-chips
|
||||
:label='$t(`editor:props.tags`)'
|
||||
outlined
|
||||
multiple
|
||||
v-model='tags'
|
||||
:hint='$t(`editor:props.tagsHint`)'
|
||||
persistent-hint
|
||||
clearable
|
||||
height='130'
|
||||
)
|
||||
v-tab-item
|
||||
v-card-text
|
||||
.overline.pb-5 {{$t('editor:props.publishState')}} #[v-chip.ml-3(label, color='grey', small, outlined).white--text coming soon]
|
||||
v-switch(
|
||||
:label='$t(`editor:props.publishToggle`)'
|
||||
v-model='isPublished'
|
||||
color='primary'
|
||||
:hint='$t(`editor:props.publishToggleHint`)'
|
||||
persistent-hint
|
||||
disabled
|
||||
)
|
||||
v-divider
|
||||
v-card-text.grey.pt-5(:class='darkMode ? `darken-3-d3` : `lighten-5`')
|
||||
v-container.pa-0(fluid, grid-list-lg)
|
||||
v-row
|
||||
v-col(cols='6')
|
||||
v-dialog(
|
||||
ref='menuPublishStart'
|
||||
:close-on-content-click='false'
|
||||
v-model='isPublishStartShown'
|
||||
:return-value.sync='publishStartDate'
|
||||
full-width
|
||||
width='460px'
|
||||
:disabled='!isPublished || true'
|
||||
)
|
||||
v-date-picker(
|
||||
v-model='publishStartDate'
|
||||
:min='(new Date()).toISOString().substring(0, 10)'
|
||||
color='primary'
|
||||
reactive
|
||||
scrollable
|
||||
landscape
|
||||
)
|
||||
v-spacer
|
||||
v-btn(
|
||||
flat=''
|
||||
color='primary'
|
||||
@click='isPublishStartShown = false'
|
||||
) {{$t('common:actions.cancel')}}
|
||||
v-btn(
|
||||
flat=''
|
||||
color='primary'
|
||||
@click='$refs.menuPublishStart.save(publishStartDate)'
|
||||
) {{$t('common:actions.ok')}}
|
||||
v-flex(xs12, md4)
|
||||
v-dialog(
|
||||
ref='menuPublishEnd'
|
||||
:close-on-content-click='false'
|
||||
v-model='isPublishEndShown'
|
||||
:return-value.sync='publishEndDate'
|
||||
full-width
|
||||
width='460px'
|
||||
:disabled='!isPublished || true'
|
||||
)
|
||||
template(v-slot:activator='{ on }')
|
||||
v-text-field(
|
||||
v-on='on'
|
||||
:label='$t(`editor:props.publishEnd`)'
|
||||
v-model='publishEndDate'
|
||||
prepend-icon='mdi-calendar-remove'
|
||||
readonly
|
||||
outlined
|
||||
clearable
|
||||
:hint='$t(`editor:props.publishEndHint`)'
|
||||
persistent-hint
|
||||
template(v-slot:activator='{ on }')
|
||||
v-text-field(
|
||||
v-on='on'
|
||||
:label='$t(`editor:props.publishStart`)'
|
||||
v-model='publishStartDate'
|
||||
prepend-icon='mdi-calendar-check'
|
||||
readonly
|
||||
outlined
|
||||
clearable
|
||||
:hint='$t(`editor:props.publishStartHint`)'
|
||||
persistent-hint
|
||||
:disabled='!isPublished || true'
|
||||
)
|
||||
v-date-picker(
|
||||
v-model='publishStartDate'
|
||||
:min='(new Date()).toISOString().substring(0, 10)'
|
||||
color='primary'
|
||||
reactive
|
||||
scrollable
|
||||
landscape
|
||||
)
|
||||
v-spacer
|
||||
v-btn(
|
||||
flat=''
|
||||
color='primary'
|
||||
@click='isPublishStartShown = false'
|
||||
) {{$t('common:actions.cancel')}}
|
||||
v-btn(
|
||||
flat=''
|
||||
color='primary'
|
||||
@click='$refs.menuPublishStart.save(publishStartDate)'
|
||||
) {{$t('common:actions.ok')}}
|
||||
v-col(cols='6')
|
||||
v-dialog(
|
||||
ref='menuPublishEnd'
|
||||
:close-on-content-click='false'
|
||||
v-model='isPublishEndShown'
|
||||
:return-value.sync='publishEndDate'
|
||||
full-width
|
||||
width='460px'
|
||||
:disabled='!isPublished || true'
|
||||
)
|
||||
v-date-picker(
|
||||
v-model='publishEndDate'
|
||||
:min='(new Date()).toISOString().substring(0, 10)'
|
||||
color='primary'
|
||||
reactive
|
||||
scrollable
|
||||
landscape
|
||||
)
|
||||
v-spacer
|
||||
v-btn(
|
||||
flat=''
|
||||
color='primary'
|
||||
@click='isPublishEndShown = false'
|
||||
) {{$t('common:actions.cancel')}}
|
||||
v-btn(
|
||||
flat=''
|
||||
color='primary'
|
||||
@click='$refs.menuPublishEnd.save(publishEndDate)'
|
||||
) {{$t('common:actions.ok')}}
|
||||
template(v-slot:activator='{ on }')
|
||||
v-text-field(
|
||||
v-on='on'
|
||||
:label='$t(`editor:props.publishEnd`)'
|
||||
v-model='publishEndDate'
|
||||
prepend-icon='mdi-calendar-remove'
|
||||
readonly
|
||||
outlined
|
||||
clearable
|
||||
:hint='$t(`editor:props.publishEndHint`)'
|
||||
persistent-hint
|
||||
:disabled='!isPublished || true'
|
||||
)
|
||||
v-date-picker(
|
||||
v-model='publishEndDate'
|
||||
:min='(new Date()).toISOString().substring(0, 10)'
|
||||
color='primary'
|
||||
reactive
|
||||
scrollable
|
||||
landscape
|
||||
)
|
||||
v-spacer
|
||||
v-btn(
|
||||
flat=''
|
||||
color='primary'
|
||||
@click='isPublishEndShown = false'
|
||||
) {{$t('common:actions.cancel')}}
|
||||
v-btn(
|
||||
flat=''
|
||||
color='primary'
|
||||
@click='$refs.menuPublishEnd.save(publishEndDate)'
|
||||
) {{$t('common:actions.ok')}}
|
||||
|
||||
v-tab-item
|
||||
v-card-text
|
||||
.overline.pb-5 {{$t('editor:props.socialFeatures')}} #[v-chip.ml-3(label, color='grey', small, outlined).white--text coming soon]
|
||||
v-switch(
|
||||
:label='$t(`editor:props.allowComments`)'
|
||||
v-model='isPublished'
|
||||
color='primary'
|
||||
:hint='$t(`editor:props.allowCommentsHint`)'
|
||||
persistent-hint
|
||||
disabled
|
||||
)
|
||||
v-switch(
|
||||
:label='$t(`editor:props.allowRatings`)'
|
||||
v-model='isPublished'
|
||||
color='primary'
|
||||
:hint='$t(`editor:props.allowRatingsHint`)'
|
||||
persistent-hint
|
||||
disabled
|
||||
)
|
||||
v-switch(
|
||||
:label='$t(`editor:props.displayAuthor`)'
|
||||
v-model='isPublished'
|
||||
color='primary'
|
||||
:hint='$t(`editor:props.displayAuthorHint`)'
|
||||
persistent-hint
|
||||
disabled
|
||||
)
|
||||
v-switch(
|
||||
:label='$t(`editor:props.displaySharingBar`)'
|
||||
v-model='isPublished'
|
||||
color='primary'
|
||||
:hint='$t(`editor:props.displaySharingBarHint`)'
|
||||
persistent-hint
|
||||
disabled
|
||||
)
|
||||
|
||||
page-selector(mode='create', v-model='pageSelectorShown', :path='path', :locale='locale', :open-handler='setPath')
|
||||
v-tour(name='editorPropertiesTour', :steps='tourSteps')
|
||||
|
||||
Reference in New Issue
Block a user