Merge pull request #4492 from Ocelot-Social-Community/3673_post_editor_legend

feat: 🍰 Post Editor Legend

package.json

@@ -49,5 +49,6 @@
   },
   "resolutions": {
     "set-value": "^2.0.1"
-  }
+  },
+  "dependencies": {}
 }

webapp/components/Editor/MenuBar.vue

@@ -59,6 +59,8 @@
         :onClick="commands.horizontal_rule"
         icon="minus"
       />
+
+      <menu-legend class="legend-button" />
     </div>
   </editor-menu-bar>
 </template>
@@ -66,11 +68,13 @@
 <script>
 import { EditorMenuBar } from 'tiptap'
 import MenuBarButton from './MenuBarButton'
+import MenuLegend from './MenuLegend.vue'
 
 export default {
   components: {
     EditorMenuBar,
     MenuBarButton,
+    MenuLegend,
   },
   props: {
     editor: Object,
@@ -78,3 +82,10 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.legend-button {
+  display: inline;
+  position: relative;
+}
+</style>

webapp/components/Editor/MenuLegend.vue

@@ -0,0 +1,115 @@
+<template>
+  <dropdown :placement="placement" offset="5">
+    <template #default="{ openMenu, closeMenu }">
+      <slot name="button">
+        <menu-bar-button
+          icon="question-circle"
+          circle
+          ghost
+          class="legend-question-button"
+          @mouseover.native="openMenu()"
+          @mouseleave.native="closeMenu()"
+        />
+      </slot>
+    </template>
+    <template #popover="" class="legend">
+      <div class="legend-container">
+        <div class="legend-header">{{ $t(`editor.legend.legendTitle`) }}</div>
+        <div
+          :class="['legend-table', index < legendItems.length - 1 && 'legend-table-split-line']"
+          v-for="(item, index) in legendItems"
+          :key="item.name"
+        >
+          <div>
+            <base-button size="small" circle ghost :icon="item.iconName" class="legend-icon">
+              <span v-if="item.label">{{ item.label }}</span>
+            </base-button>
+            <span>{{ $t(item.name) }}</span>
+          </div>
+          <span class="tool-shortcut">{{ item.shortcut }}</span>
+        </div>
+      </div>
+    </template>
+  </dropdown>
+</template>
+
+<script>
+import Dropdown from '~/components/Dropdown'
+import MenuBarButton from './MenuBarButton'
+
+export default {
+  components: {
+    Dropdown,
+    MenuBarButton,
+  },
+  props: {
+    placement: { type: String, default: 'bottom-start' },
+  },
+  data() {
+    return {
+      legendItems: [
+        { iconName: 'bold', name: `editor.legend.bold`, shortcut: 'ctrl + b' },
+        { iconName: 'italic', name: `editor.legend.italic`, shortcut: 'ctrl + i' },
+        { iconName: 'underline', name: `editor.legend.underline`, shortcut: 'ctrl + u' },
+        { iconName: 'link', name: `editor.legend.link`, shortcut: '' },
+        { iconName: 'paragraph', name: `editor.legend.paragraph`, shortcut: '' },
+        { label: 'H3', name: `editor.legend.heading3`, shortcut: '### + space' },
+        { label: 'H4', name: `editor.legend.heading4`, shortcut: '#### + space' },
+        { iconName: 'list-ul', name: `editor.legend.unorderedList`, shortcut: '* + space' },
+        { iconName: 'list-ol', name: `editor.legend.orderedList`, shortcut: '1. + space' },
+        { iconName: 'quote-right', name: `editor.legend.quote`, shortcut: '> + space' },
+        { iconName: 'minus', name: `editor.legend.ruler`, shortcut: '---' },
+      ],
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+.legend-question-button {
+  color: $color-neutral-40;
+  font-size: 1.2rem !important;
+}
+.legend-question-button:hover {
+  background: none !important;
+  color: $color-neutral-40 !important;
+}
+.legend-question-button:focus {
+  outline: none !important;
+}
+.legend {
+  padding: 0rem;
+  border: 1px solid #e5e3e8;
+}
+.legend-container {
+  display: flex;
+  width: 18rem !important;
+  flex-direction: column;
+}
+.legend-header {
+  margin-bottom: 0.5em;
+  text-align: center;
+}
+
+.legend-table {
+  display: grid;
+  align-items: center;
+  grid-template-columns: 1fr 1fr;
+  padding: 0.2em;
+}
+.legend-table-split-line {
+  border-bottom: 0.5px solid grey;
+}
+
+.legend-table > div {
+  display: flex;
+  align-items: center;
+}
+.tool-shortcut {
+  padding-left: 2rem;
+}
+.legend-icon {
+  pointer-events: none;
+  margin-right: 1rem;
+}
+</style>

webapp/locales/de.json

@@ -313,6 +313,20 @@
       "addLetter": "Tippe einen Buchstaben",
       "noHashtagsFound": "Keine Hashtags gefunden"
     },
+    "legend": {
+      "bold": "Fett",
+      "heading3": "Überschrift 3",
+      "heading4": "Überschrift 4",
+      "italic": "Kursiv",
+      "legendTitle": "Tastaturkürzel und Markdown-Code",
+      "link": "Verlinkung",
+      "orderedList": "Geordnete Liste",
+      "paragraph": "Absatz",
+      "quote": "Zitat",
+      "ruler": "Linie",
+      "underline": "Unterstrichen",
+      "unorderedList": "Ungeordnete Liste"
+    },
     "mention": {
       "noUsersFound": "Keine Benutzer gefunden"
     },

webapp/locales/en.json

@@ -313,6 +313,20 @@
       "addLetter": "Type a letter",
       "noHashtagsFound": "No hashtags found"
     },
+    "legend": {
+      "bold": "Bold",
+      "heading3": "Heading 3",
+      "heading4": "Heading 4",
+      "italic": "Italic",
+      "legendTitle": "Keyboard shortcuts and markdown code",
+      "link": "Link",
+      "orderedList": "Ordered list",
+      "paragraph": "Paragraph",
+      "quote": "Quote",
+      "ruler": "Ruler",
+      "underline": "Underline",
+      "unorderedList": "Unordered list"
+    },
     "mention": {
       "noUsersFound": "No users found"
     },

webapp/locales/ru.json

@@ -260,6 +260,20 @@
       "addLetter": "Введите букву",
       "noHashtagsFound": "Хэштеги не найдены"
     },
+    "legend": {
+      "bold": "Полужирный",
+      "heading3": "Заголовок 3",
+      "heading4": "Заголовок 4",
+      "italic": "Курсив",
+      "legendTitle": "Клавиатурные сокращения и код разметки",
+      "link": "Ссылка",
+      "orderedList": "Нумерованный список",
+      "paragraph": "Параграф",
+      "quote": "Кавычки",
+      "ruler": "Горизонтальная линия",
+      "underline": "Подчеркнутый",
+      "unorderedList": "Маркированный список"
+    },
     "mention": {
       "noUsersFound": "Пользователи не найдены"
     },