Skip to content

W
wiki-js
Commit a3be2a77 authored by Nick's avatar Nick
Browse files
Options

feat: editor modals translations

parent 1a143d84
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 66 additions and 84 deletions
.eslintrc.yml
View file @ a3be2a77
extends:
- requarks
- plugin:vue/recommended
- plugin:vue/strongly-recommended
env:
node: true
jest: true
......@@ -12,4 +12,4 @@ globals:
document: false
navigator: false
window: false
FuseBox: false
\ No newline at end of file
FuseBox: false
client/components/common/duration-picker.vue
View file @ a3be2a77
<template lang='pug'>
v-toolbar.radius-7(flat, :color='$vuetify.dark ? "grey darken-4-l3" : "grey lighten-3"')
.body-2.mr-3 Every
.body-2.mr-3 {{$t('common:duration.every')}}
v-text-field(
solo
hide-details
......@@ -8,7 +8,7 @@
reverse
v-model='minutes'
)
.body-2.mx-3 Minute(s)
.body-2.mx-3 {{$t('common:duration.minutes')}}
v-divider.mr-3()
v-text-field(
solo
......@@ -17,7 +17,7 @@
reverse
v-model='hours'
)
.body-2.mx-3 Hour(s)
.body-2.mx-3 {{$t('common:duration.hours')}}
v-divider.mr-3()
v-text-field(
solo
......@@ -26,7 +26,7 @@
reverse
v-model='days'
)
.body-2.mx-3 Day(s)
.body-2.mx-3 {{$t('common:duration.days')}}
v-divider.mr-3()
v-text-field(
solo
......@@ -35,7 +35,7 @@
reverse
v-model='months'
)
.body-2.mx-3 Month(s)
.body-2.mx-3 {{$t('common:duration.months')}}
v-divider.mr-3()
v-text-field(
solo
......@@ -44,7 +44,7 @@
reverse
v-model='years'
)
.body-2.mx-3 Year(s)
.body-2.mx-3 {{$t('common:duration.years')}}
</template>
<script>
......
client/components/common/user-search.vue
View file @ a3be2a77
......@@ -5,7 +5,7 @@
)
v-card.wiki-form
.dialog-header
span Search User
span {{$t('common:user.search')}}
v-spacer
v-progress-circular(
indeterminate
......@@ -17,7 +17,7 @@
v-card-text
v-text-field(
outline
label='Search Users...'
:label='$t(`common:user.searchPlaceholder`)'
v-model='search'
prepend-inner-icon='search'
color='primary'
......@@ -45,7 +45,7 @@
flat
@click='close'
:disabled='loading'
) Cancel
) {{$t('common:actions.cancel')}}
</template>
<script>
......
client/components/editor/editor-markdown.vue
View file @ a3be2a77
......@@ -86,6 +86,12 @@
v-btn.animated.fadeIn.wait-p11s(icon, slot='activator', @click='insertAfter({ content: `---`, newLine: true })').mx-0
v-icon remove
span Horizontal Bar
template(v-if='$vuetify.breakpoint.mdAndUp')
v-spacer
v-tooltip(bottom, color='primary')
v-btn.animated.fadeIn.wait-p11s(icon, slot='activator', @click='previewShown = !previewShown').mx-0
v-icon flip
span Hide / Show Preview Pane
.editor-markdown-main
.editor-markdown-sidebar
v-tooltip(right, color='teal')
......@@ -131,12 +137,9 @@
v-icon(:color='helpShown ? `teal` : ``') help
span Markdown Formatting Help
.editor-markdown-editor
.editor-markdown-editor-title(v-if='previewShown', @click='previewShown = false') Editor
.editor-markdown-editor-title(v-else='previewShown', @click='previewShown = true'): v-icon(dark) drag_indicator
codemirror(ref='cm', v-model='code', :options='cmOptions', @ready='onCmReady', @input='onCmInput')
transition(name='editor-markdown-preview')
.editor-markdown-preview(v-if='previewShown')
.editor-markdown-preview-title(@click='previewShown = false') Preview
.editor-markdown-preview-content.contents(ref='editorPreview', v-html='previewHTML')
v-system-bar.editor-markdown-sysbar(dark, status, color='grey darken-3')
......@@ -264,7 +267,9 @@ export default {
highlightSelectionMatches: {
annotateScrollbar: true
},
viewportMargin: 50
viewportMargin: 50,
inputStyle: 'contenteditable',
allowDropFileTypes: ['image/jpg', 'image/png', 'image/svg', 'image/jpeg', 'image/gif']
},
cursorPos: { ch: 0, line: 1 },
previewShown: true,
......@@ -339,6 +344,7 @@ export default {
this.positionSync(cm)
this.scrollSync(cm)
})
cm.on('paste', this.onCmPaste)
this.onCmInput(this.code)
},
onCmInput: _.debounce(function (newContent) {
......@@ -351,6 +357,23 @@ export default {
this.scrollSync(this.cm)
})
}, 500),
onCmPaste (cm, ev) {
const clipItems = (ev.clipboardData || ev.originalEvent.clipboardData).items
for (const clipItem of clipItems) {
if (_.startsWith(clipItem.type, 'image/')) {
const file = clipItem.getAsFile()
const reader = new FileReader()
reader.onload = evt => {
this.$store.commit(`loadingStart`, 'editor-paste-image')
this.insertAfter({
content: `![${file.name}](${evt.target.result})`,
newLine: true
})
}
reader.readAsDataURL(file)
}
}
},
/**
* Update cursor state
*/
......@@ -514,28 +537,6 @@ $editor-height-mobile: calc(100vh - 112px - 16px);
@include until($tablet) {
height: $editor-height-mobile;
}
&-title {
background-color: mc('grey', '800');
border-bottom-left-radius: 5px;
display: inline-flex;
height: 30px;
justify-content: center;
align-items: center;
padding: 0 1rem;
color: mc('grey', '500');
position: absolute;
top: 0;
right: 0;
z-index: 7;
text-transform: uppercase;
font-size: .7rem;
cursor: pointer;
@include until($tablet) {
display: none;
}
}
}
&-preview {
......@@ -582,24 +583,6 @@ $editor-height-mobile: calc(100vh - 112px - 16px);
height: $editor-height-mobile;
}
}
&-title {
background-color: rgba(mc('blue', '100'), .75);
border-bottom-right-radius: 5px;
display: inline-flex;
height: 30px;
justify-content: center;
align-items: center;
padding: 0 1rem;
color: mc('blue', '800');
position: absolute;
top: 0;
left: 0;
z-index: 2;
text-transform: uppercase;
font-size: .7rem;
cursor: pointer;
}
}
&-toolbar {
......
client/components/editor/editor-modal-editorselect.vue
View file @ a3be2a77
......@@ -2,7 +2,7 @@
v-dialog(v-model='isShown', persistent, max-width='700')
v-card.radius-7(color='blue darken-3', dark)
v-card-text.text-xs-center.py-4
.subheading Which editor do you want to use for this page?
.subheading {{$t('editor:select.title')}}
v-container(grid-list-lg, fluid)
v-layout(row, wrap, justify-center)
v-flex(xs4)
......@@ -65,7 +65,7 @@
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
.caption.blue--text.text--lighten-2 This cannot be changed once the page is created.
.caption.blue--text.text--lighten-2 {{$t('editor:select.cannotChange')}}
</template>
<script>
......
client/components/editor/editor-modal-properties.vue
View file @ a3be2a77
......@@ -8,7 +8,7 @@
)
.dialog-header
v-icon(color='white') sort_by_alpha
.subheading.white--text.ml-2 Page Properties
.subheading.white--text.ml-2 {{$t('editor:props.pageProperties')}}
v-spacer
v-btn.mx-0(
outline
......@@ -19,34 +19,34 @@
span {{ $t('common:actions.ok') }}
v-card.wiki-form(tile)
v-card-text
v-subheader.pl-0 Page Info
v-subheader.pl-0 {{$t('editor:props.pageInfo')}}
v-text-field(
ref='iptTitle'
outline
background-color='grey lighten-2'
label='Title'
:label='$t(`editor:props.title`)'
counter='255'
v-model='title'
)
v-text-field(
outline
background-color='grey lighten-2'
label='Short Description'
:label='$t(`editor:props.shortDescription`)'
counter='255'
v-model='description'
persistent-hint
hint='Shown below the title'
:hint='$t(`editor:props.shortDescriptionHint`)'
)
v-divider
v-card-text.grey(:class='darkMode ? `darken-3-d3` : `lighten-5`')
v-subheader.pl-0 Path &amp; Categorization
v-subheader.pl-0 {{$t('editor:props.pathCategorization')}}
v-container.pa-0(fluid, grid-list-lg)
v-layout(row, wrap)
v-flex(xs12, md2)
v-select(
outline
background-color='grey lighten-2'
label='Locale'
:label='$t(`editor:props.locale`)'
suffix='/'
:items='namespaces'
v-model='locale'
......@@ -57,10 +57,10 @@
v-text-field(
outline
background-color='grey lighten-2'
label='Path'
:label='$t(`editor:props.path`)'
append-icon='folder'
v-model='path'
hint='Do not include any leading or trailing slashes.'
:hint='$t(`editor:props.pathHint`)'
persistent-hint
@click:append='showPathSelector'
:disabled='mode !== "create"'
......@@ -69,25 +69,25 @@
background-color='grey lighten-2'
chips
deletable-chips
label='Tags'
:label='$t(`editor:props.tags`)'
outline
multiple
v-model='tags'
single-line
hint='Use tags to categorize your pages and make them easier to find.'
:hint='$t(`editor:props.tagsHint`)'
persistent-hint
)
v-divider
v-card-text.pb-5.grey(:class='darkMode ? `darken-3-d5` : `lighten-4`')
v-subheader.pl-0 Publishing State
v-subheader.pl-0 {{$t('editor:props.publishState')}}
v-container.pa-0(fluid, grid-list-lg)
v-layout(row, wrap)
v-flex(xs12, md4)
v-switch(
label='Published'
:label='$t(`editor:props.publishToggle`)'
v-model='isPublished'
color='primary'
hint='Unpublished pages can still be seen by users having write permissions on this page.'
:hint='$t(`editor:props.publishToggleHint`)'
persistent-hint
)
v-flex(xs12, md4)
......@@ -103,14 +103,14 @@
)
v-text-field(
slot='activator'
label='Publish starting on...'
:label='$t(`editor:props.publishStart`)'
v-model='publishStartDate'
prepend-icon='event'
readonly
outline
background-color='grey lighten-2'
clearable
hint='Leave empty for no start date'
:hint='$t(`editor:props.publishStartHint`)'
persistent-hint
:disabled='!isPublished'
)
......@@ -127,12 +127,12 @@
flat=''
color='primary'
@click='isPublishStartShown = false'
) Cancel
) {{$t('common:actions.cancel')}}
v-btn(
flat=''
color='primary'
@click='$refs.menuPublishStart.save(publishStartDate)'
) OK
) {{$t('common:actions.ok')}}
v-flex(xs12, md4)
v-dialog(
ref='menuPublishEnd'
......@@ -146,14 +146,14 @@
)
v-text-field(
slot='activator'
label='Publish ending on...'
:label='$t(`editor:props.publishEnd`)'
v-model='publishEndDate'
prepend-icon='event'
readonly
outline
background-color='grey lighten-2'
clearable
hint='Leave empty for no end date'
:hint='$t(`editor:props.publishEndHint`)'
persistent-hint
:disabled='!isPublished'
)
......@@ -170,12 +170,12 @@
flat=''
color='primary'
@click='isPublishEndShown = false'
) Cancel
) {{$t('common:actions.cancel')}}
v-btn(
flat=''
color='primary'
@click='$refs.menuPublishEnd.save(publishEndDate)'
) OK
) {{$t('common:actions.ok')}}
page-selector(mode='create', v-model='pageSelectorShown', :path='path', :locale='locale', :open-handler='setPath')
v-tour(name='editorPropertiesTour', :steps='tourSteps')
......
client/components/editor/editor-modal-unsaved.vue
View file @ a3be2a77
......@@ -3,13 +3,13 @@
v-card.wiki-form
.dialog-header.is-short.is-red
v-icon.mr-2(color='white') warning
span Discard Unsaved Changes?
span {{$t('editor:unsaved.title')}}
v-card-text
.body-2 You have unsaved changes. Are you sure you want to leave the editor and discard any modifications you made since the last save?
.body-2 {{$t('editor:unsaved.body')}}
v-card-chin
v-spacer
v-btn(flat, @click='isShown = false') Cancel
v-btn(color='red', @click='discard', dark) Discard Changes
v-btn(flat, @click='isShown = false') {{$t('common:actions.cancel')}}
v-btn(color='red', @click='discard', dark) {{$t('common:actions.discardChanges')}}
</template>
<script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment