display legend on click

webapp/components/Editor/MenuBar.vue

@@ -60,21 +60,7 @@
         icon="minus"
       />
 
-      <menu-bar-button
-        @mouseover.native="hover = true"
-        @mouseleave.native="hover = false"
-        :isActive="isActive.horizontal_rule()"
-        :onClick="commands.horizontal_rule"
-        icon="question-circle"
-        class="legend-button"
-      />
-
-      <menu-legend
-        v-if="hover"
-        class="menu-legend"
-      >
-      </menu-legend>
-
+      <menu-legend class="legend-button" />
     </div>
   </editor-menu-bar>
 </template>
@@ -86,9 +72,7 @@ import MenuLegend from './MenuLegend.vue'
 
 export default {
   data() {
-    return {
-      hover: false
-    }
+    return {}
   },
   components: {
     EditorMenuBar,
@@ -103,12 +87,13 @@ export default {
 </script>
 
 <style lang="scss">
-  .legend-button{
-    color: #70677e;
-    position:relative;
+.legend-button {
+  display: inline;
+  position: relative;
 
-    .base-icon {
-      font-size: 1.2rem;
-    }
+  .base-icon {
+    font-size: 1.2rem;
+    color: #70677e !important;
   }
+}
 </style>

webapp/components/Editor/MenuLegend.vue

@@ -1,63 +1,87 @@
 <template>
-    <ds-card class="legend">
-        <div class="legend-container">
-            <div class="legend-header">Keyboard shortcuts and markdown code</div>
-            <div class="legend-table" v-for="item in legenditems" :key="item.name">
-                <base-button size="small" circle :ghost="!isActive" @click="onClick" :icon="item.iconname">
-                    <span v-if="item.label">{{ item.label }}</span>
-                </base-button>
-                <span>{{item.name}}</span>
-                <span class="tool-shortcut">{{item.shortcut}}</span>
-            </div>
+  <dropdown class="content-menu" :placement="placement" offset="5">
+    <template #default="{ toggleMenu }">
+      <slot name="button" :toggleMenu="toggleMenu">
+        <base-button
+          data-test="content-menu-button"
+          icon="question-circle"
+          size="small"
+          circle
+          ghost
+          @click="toggleMenu()"
+        />
+      </slot>
+    </template>
+    <template #popover="" class="legend">
+      <div class="legend-container">
+        <div class="legend-header">Keyboard shortcuts and markdown code</div>
+        <div class="legend-table" v-for="item in legenditems" :key="item.name">
+          <base-button size="small" circle ghost :icon="item.iconname" class="legend-icon">
+            <span v-if="item.label">{{ item.label }}</span>
+          </base-button>
+          <span>{{ item.name }}</span>
+          <span class="tool-shortcut">{{ item.shortcut }}</span>
         </div>
-    </ds-card>
+      </div>
+    </template>
+  </dropdown>
 </template>
 
 <script>
+import Dropdown from '~/components/Dropdown'
+
 export default {
-    data(){
-        return {
-            legenditems: [
-                {iconname:'bold',name:'bold',shortcut:'Ctrl+b'},
-                {iconname:'italic',name:'italic',shortcut:'Ctrl+i'},
-                {iconname:'underline',name:'underline',shortcut:'Ctrl+u'},
-                {iconname:'link',name:'link',shortcut:''},
-                {iconname:'paragraph',name:'paragraph',shortcut:''},
-                {label:'H3',name:'heading 3',shortcut:'### + space'},
-                {label:'H4',name:'heading 4',shortcut:'#### + space'},
-                {iconname:'list-ul',name:'unordered list',shortcut:'* + space'},
-                {iconname:'list-ol',name:'ordered list',shortcut:'1. + space'},
-                {iconname:'quote-right',name:'quote',shortcut:'> + space'},
-                {iconname:'minus',name:'ruler',shortcut:'---'},
-            ]
-        }
+  components: {
+    Dropdown,
+  },
+  props: {
+    placement: { type: String, default: 'bottom-start' },
+  },
+  data() {
+    return {
+      hover: false,
+      legenditems: [
+        { iconname: 'bold', name: 'bold', shortcut: 'Ctrl+b' },
+        { iconname: 'italic', name: 'italic', shortcut: 'Ctrl+i' },
+        { iconname: 'underline', name: 'underline', shortcut: 'Ctrl+u' },
+        { iconname: 'link', name: 'link', shortcut: '' },
+        { iconname: 'paragraph', name: 'paragraph', shortcut: '' },
+        { label: 'H3', name: 'heading 3', shortcut: '### + space' },
+        { label: 'H4', name: 'heading 4', shortcut: '#### + space' },
+        { iconname: 'list-ul', name: 'unordered list', shortcut: '* + space' },
+        { iconname: 'list-ol', name: 'ordered list', shortcut: '1. + space' },
+        { iconname: 'quote-right', name: 'quote', shortcut: '> + space' },
+        { iconname: 'minus', name: 'ruler', shortcut: '---' },
+      ],
     }
+  },
 }
 </script>
 
 <style lang="scss">
-.legend{
-    z-index: 5;
-    position: absolute;
-    width: 22rem;
-    padding: 0rem;
-    border: 1px solid #e5e3e8;
+.legend {
+  padding: 0rem;
+  border: 1px solid #e5e3e8;
 }
-.legend-container{
-    display: flex;
-    flex-direction: column;
+.legend-container {
+  display: flex;
+  width: 18rem !important;
+  flex-direction: column;
 }
-.legend-header{
-    margin-bottom: 0.5em;
+.legend-header {
+  margin-bottom: 0.5em;
 }
-.legend-table{
-    display:grid;
-    align-items: center;
-    grid-template-columns: 0.5fr 1fr 2fr;
-    border-bottom: 0.5px solid grey;
-    padding: 0.2em;
+.legend-table {
+  display: grid;
+  align-items: center;
+  grid-template-columns: 0.5fr 1fr 2fr;
+  border-bottom: 0.5px solid grey;
+  padding: 0.2em;
 }
-.tool-shortcut{
+.tool-shortcut {
   padding-left: 2rem;
 }
+.legend-icon {
+  pointer-events: none;
+}
 </style>