diff --git a/ux/src/components/EditorMarkdown.vue b/ux/src/components/EditorMarkdown.vue index 6eb73621..1335336c 100644 --- a/ux/src/components/EditorMarkdown.vue +++ b/ux/src/components/EditorMarkdown.vue @@ -119,7 +119,21 @@ textarea(ref='cmRef') transition(name='editor-markdown-preview') .editor-markdown-preview(v-if='state.previewShown') - .editor-markdown-preview-toolbar Render Preview + .editor-markdown-preview-toolbar + strong: em {{ t('editor.renderPreview') }} + q-separator.q-ml-md.q-mr-sm(vertical, inset) + q-btn( + icon='mdi-arrow-vertical-lock' + padding='xs sm' + flat + ) + q-tooltip(anchor='top middle' self='bottom middle') {{ t('editor.toggleScrollLock') }} + q-btn( + icon='mdi-eye-off-outline' + padding='xs sm' + flat + ) + q-tooltip(anchor='top middle' self='bottom middle') {{ t('editor.togglePreviewPane') }} .editor-markdown-preview-content.contents(ref='editorPreviewContainer') div( ref='editorPreview' @@ -421,12 +435,13 @@ $editor-height-mobile: calc(100vh - 112px - 16px); } &-toolbar { background-color: $primary; + border-left: 40px solid darken($primary, 5%); color: #FFF; height: 32px; } &-sidebar { background-color: $dark-4; - border-top: 32px solid $primary; + border-top: 32px solid darken($primary, 10%); color: #FFF; width: 56px; display: flex; diff --git a/ux/src/components/PageHeader.vue b/ux/src/components/PageHeader.vue index 8283f62a..fa33c3fb 100644 --- a/ux/src/components/PageHeader.vue +++ b/ux/src/components/PageHeader.vue @@ -104,6 +104,15 @@ aria-label='Print' ) q-tooltip Print + q-btn.q-mr-sm.acrylic-btn( + v-if='editorStore.isActive' + icon='las la-question-circle' + flat + color='grey' + :href='siteStore.docsBase + `/editor/${editorStore.editor}`' + target='_blank' + type='a' + ) template(v-if='editorStore.isActive || editorStore.hasPendingChanges') q-btn.acrylic-btn.q-mr-sm( flat diff --git a/ux/src/i18n/locales/en.json b/ux/src/i18n/locales/en.json index f668880e..1f5b42fd 100644 --- a/ux/src/i18n/locales/en.json +++ b/ux/src/i18n/locales/en.json @@ -1716,5 +1716,8 @@ "profile.cvdProtanopia": "Protanopia", "profile.cvdTritanopia": "Tritanopia", "profile.cvdDeuteranopia": "Deuteranopia", - "profile.accessibility": "Accessibility" + "profile.accessibility": "Accessibility", + "editor.toggleScrollLock": "Toggle Scroll Lock", + "editor.togglePreviewPane": "Toggle Preview Pane", + "editor.renderPreview": "Render Preview" }