From e4fc2b7b126cf0c79ddd8d0eb275180fb4d77047 Mon Sep 17 00:00:00 2001 From: Nick Date: Sat, 15 Jun 2019 21:45:53 -0400 Subject: [PATCH] feat: editor md + source translations --- client/components/editor/editor-markdown.vue | 61 ++++++++++---------- client/components/source.vue | 7 ++- 2 files changed, 35 insertions(+), 33 deletions(-) diff --git a/client/components/editor/editor-markdown.vue b/client/components/editor/editor-markdown.vue index 6d42ddfb..658c3a44 100644 --- a/client/components/editor/editor-markdown.vue +++ b/client/components/editor/editor-markdown.vue @@ -5,20 +5,20 @@ v-spacer v-btn.animated.fadeInRight(flat, @click='closeAllModal') v-icon(left) remove_circle_outline - span Back to Editor + span {{$t('editor:backToEditor')}} template(v-else) v-tooltip(bottom, color='primary') v-btn.animated.fadeIn(icon, slot='activator', @click='toggleMarkup({ start: `**` })').mx-0 v-icon format_bold - span Bold + span {{$t('editor:markup.bold')}} v-tooltip(bottom, color='primary') v-btn.animated.fadeIn.wait-p1s(icon, slot='activator', @click='toggleMarkup({ start: `*` })').mx-0 v-icon format_italic - span Italic + span {{$t('editor:markup.italic')}} v-tooltip(bottom, color='primary') v-btn.animated.fadeIn.wait-p2s(icon, slot='activator', @click='toggleMarkup({ start: `~~` })').mx-0 v-icon format_strikethrough - span Strikethrough + span {{$t('editor:markup.strikethrough')}} v-menu(offset-y, open-on-hover) v-btn.animated.fadeIn.wait-p3s(icon, slot='activator').mx-0 v-icon text_fields @@ -27,16 +27,16 @@ v-list-tile(@click='setHeaderLine(n)', :key='idx') v-list-tile-action v-icon(:size='24 - (idx - 1) * 2') title - v-list-tile-title Heading {{n}} + v-list-tile-title {{$t('editor:markup.heading', { level: n })}} v-divider(v-if='idx < 5') v-tooltip(bottom, color='primary') v-btn.animated.fadeIn.wait-p4s(icon, slot='activator', @click='toggleMarkup({ start: `~` })').mx-0 v-icon vertical_align_bottom - span Subscript + span {{$t('editor:markup.subscript')}} v-tooltip(bottom, color='primary') v-btn.animated.fadeIn.wait-p5s(icon, slot='activator', @click='toggleMarkup({ start: `^` })').mx-0 v-icon vertical_align_top - span Superscript + span {{$t('editor:markup.superscript')}} v-menu(offset-y, open-on-hover) v-btn.animated.fadeIn.wait-p6s(icon, slot='activator').mx-0 v-icon format_quote @@ -44,98 +44,98 @@ v-list-tile(@click='insertBeforeEachLine({ content: `> `})') v-list-tile-action v-icon format_quote - v-list-tile-title Blockquote + v-list-tile-title {{$t('editor:markup.blockquote')}} v-divider v-list-tile(@click='insertBeforeEachLine({ content: `> `, after: `{.is-info}`})') v-list-tile-action v-icon(color='blue') format_quote - v-list-tile-title Info Blockquote + v-list-tile-title {{$t('editor:markup.blockquoteInfo')}} v-divider v-list-tile(@click='insertBeforeEachLine({ content: `> `, after: `{.is-success}`})') v-list-tile-action v-icon(color='success') format_quote - v-list-tile-title Success Blockquote + v-list-tile-title {{$t('editor:markup.blockquoteSuccess')}} v-divider v-list-tile(@click='insertBeforeEachLine({ content: `> `, after: `{.is-warning}`})') v-list-tile-action v-icon(color='warning') format_quote - v-list-tile-title Warning Blockquote + v-list-tile-title {{$t('editor:markup.blockquoteWarning')}} v-divider v-list-tile(@click='insertBeforeEachLine({ content: `> `, after: `{.is-danger}`})') v-list-tile-action v-icon(color='error') format_quote - v-list-tile-title Error Blockquote + v-list-tile-title {{$t('editor:markup.blockquoteError')}} v-divider v-tooltip(bottom, color='primary') v-btn.animated.fadeIn.wait-p7s(icon, slot='activator', @click='insertBeforeEachLine({ content: `- `})').mx-0 v-icon format_list_bulleted - span Unordered List + span {{$t('editor:markup.unorderedList')}} v-tooltip(bottom, color='primary') v-btn.animated.fadeIn.wait-p8s(icon, slot='activator', @click='insertBeforeEachLine({ content: `1. `})').mx-0 v-icon format_list_numbered - span Ordered List + span {{$t('editor:markup.orderedList')}} v-tooltip(bottom, color='primary') v-btn.animated.fadeIn.wait-p9s(icon, slot='activator', @click='toggleMarkup({ start: "`" })').mx-0 v-icon space_bar - span Inline Code + span {{$t('editor:markup.inlineCode')}} v-tooltip(bottom, color='primary') v-btn.animated.fadeIn.wait-p10s(icon, slot='activator', @click='toggleMarkup({ start: ``, end: `` })').mx-0 v-icon font_download - span Keyboard Key + span {{$t('editor:markup.keyboardKey')}} v-tooltip(bottom, color='primary') v-btn.animated.fadeIn.wait-p11s(icon, slot='activator', @click='insertAfter({ content: `---`, newLine: true })').mx-0 v-icon remove - span Horizontal Bar + span {{$t('editor:markup.horizontalBar')}} 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 + span {{$t('editor:markup.togglePreviewPane')}} .editor-markdown-main .editor-markdown-sidebar v-tooltip(right, color='teal') v-btn.animated.fadeInLeft(icon, slot='activator', dark, disabled).mx-0 v-icon link - span Insert Link + span {{$t('editor:markup.insertLink')}} v-tooltip(right, color='teal') v-btn.animated.fadeInLeft.wait-p1s(icon, slot='activator', dark, @click='toggleModal(`editorModalMedia`)').mx-0 v-icon(:color='activeModal === `editorModalMedia` ? `teal` : ``') burst_mode - span Insert Assets + span {{$t('editor:markup.insertAssets')}} v-tooltip(right, color='teal') v-btn.animated.fadeInLeft.wait-p2s(icon, slot='activator', dark, @click='toggleModal(`editorModalBlocks`)').mx-0 v-icon(:color='activeModal === `editorModalBlocks` ? `teal` : ``') dashboard - span Insert Block + span {{$t('editor:markup.insertBlock')}} v-tooltip(right, color='teal') v-btn.animated.fadeInLeft.wait-p3s(icon, slot='activator', dark, disabled).mx-0 v-icon code - span Insert Code Block + span {{$t('editor:markup.insertCodeBlock')}} v-tooltip(right, color='teal') v-btn.animated.fadeInLeft.wait-p4s(icon, slot='activator', dark, disabled).mx-0 v-icon play_circle_outline - span Insert Video / Audio + span {{$t('editor:markup.insertVideoAudio')}} v-tooltip(right, color='teal') v-btn.animated.fadeInLeft.wait-p5s(icon, slot='activator', dark, disabled).mx-0 v-icon multiline_chart - span Insert Diagram + span {{$t('editor:markup.insertDiagram')}} v-tooltip(right, color='teal') v-btn.animated.fadeInLeft.wait-p6s(icon, slot='activator', dark, disabled).mx-0 v-icon functions - span Insert Math Expression + span {{$t('editor:markup.insertMathExpression')}} v-tooltip(right, color='teal') v-btn.animated.fadeInLeft.wait-p7s(icon, slot='activator', dark, disabled).mx-0 v-icon border_outer - span Table Helper + span {{$t('editor:markup.tableHelper')}} template(v-if='$vuetify.breakpoint.mdAndUp') v-spacer v-tooltip(right, color='teal') v-btn.animated.fadeInLeft.wait-p8s(icon, slot='activator', dark, @click='toggleFullscreen').mx-0 v-icon crop_free - span Distraction Free Mode + span {{$t('editor:markup.distractionFreeMode')}} v-tooltip(right, color='teal') v-btn.animated.fadeInLeft.wait-p9s(icon, slot='activator', dark, @click='toggleHelp').mx-0 v-icon(:color='helpShown ? `teal` : ``') help - span Markdown Formatting Help + span {{$t('editor:markup.markdownFormattingHelp')}} .editor-markdown-editor codemirror(ref='cm', v-model='code', :options='cmOptions', @ready='onCmReady', @input='onCmInput') transition(name='editor-markdown-preview') @@ -249,7 +249,8 @@ export default { }, props: { save: { - type: Function + type: Function, + default: () => {} } }, data() { @@ -387,7 +388,7 @@ export default { if (!end) { end = start } if (!this.cm.doc.somethingSelected()) { return this.$store.commit('showNotification', { - message: 'You must select something first!', + message: this.$t('editor:markup.noSelectionError'), style: 'warning', icon: 'warning' }) diff --git a/client/components/source.vue b/client/components/source.vue index 2ea10268..f886ccca 100644 --- a/client/components/source.vue +++ b/client/components/source.vue @@ -3,11 +3,12 @@ nav-header v-content v-toolbar(color='primary', dark) - .subheading Viewing source of page #[strong /{{path}}] + i18next.subheading(path='common:page.viewingSource', tag='div') + strong(place='path') /{{path}}] template(v-if='$vuetify.breakpoint.mdAndUp') v-spacer - .caption.blue--text.text--lighten-3 ID {{pageId}} - v-btn.ml-4(depressed, color='blue darken-1', @click='goLive') Return to Normal View + .caption.blue--text.text--lighten-3 {{$t('common:page.id', { id: pageId })}} + v-btn.ml-4(depressed, color='blue darken-1', @click='goLive') {{$t('common:page.returnNormalView')}} v-card(tile) v-card-text v-card.grey.radius-7(flat, :class='darkMode ? `darken-4` : `lighten-4`')