adds extended menu

src/components/deck-card-editor-menu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="menu-bar" :class="{ active }">
+  <menu class="menu-bar" :class="{ active }">
     <button class="editor-button-bold" :class="{ active: value.bold }" @click="menuAction('bold')" />
     <button class="editor-button-italic" :class="{ active: value.italic }" @click="menuAction('italic')" />
 
@@ -9,21 +9,27 @@
 
     <button class="editor-button-bullet-list" :class="{ active: value.bulletList }" @click="menuAction('bulletList')" />
     <button class="editor-button-horizontal-rule" :class="{ active: value.separator}" @click="menuAction('separator')" />
-    <button class="editor-button-horizontal-rule" :class="{ active: value.spacer}" @click="menuAction('spacer')" />
 
-    <button class="editor-button-stat-block" :class="{ active: value.statBlock }" @click="menuAction('statBlock')" />
+    <button class="editor-button-dropdown" :class="{ active: dropdownOpen }" @click="toggleDropdown" />
-  </div>
+
+    <div class="extended-menu" v-show="dropdownOpen">
+      <button class="extended-menu-button" @click="extMenuAction('statBlock')">Stat Block (DnD5e)</button>
+      <button class="extended-menu-button" @click="extMenuAction('boxes')">Empty Boxes</button>
+    </div>
+  </menu>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
-import { blocks, State } from '@/editor'
+import { blocks, marks, State } from '@/editor'
 
 @Component
 export default class DeckCardEditorMenu extends Vue {
   @Prop() public readonly active!: boolean
   @Prop() public readonly value!: State
 
+  private dropdownOpen = false
+
   private menuAction (name: string) {
     const newState = { ...this.value }
 
@@ -32,13 +38,23 @@ export default class DeckCardEditorMenu extends Vue {
         newState[block] = false
       })
       newState[name] = true
-    } else { // marks behave like checkboxes
+    } else if (marks.indexOf(name)) { // marks behave like checkboxes
       newState[name] = !newState[name]
     }
 
     this.$emit('input', newState)
     this.$emit('action', name)
   }
+
+  private toggleDropdown () {
+    this.dropdownOpen = !this.dropdownOpen
+    this.$emit('action', 'refocus')
+  }
+
+  private extMenuAction (name: string) {
+    this.menuAction(name)
+    this.dropdownOpen = false
+  }
 }
 </script>
 
@@ -92,4 +108,29 @@ export default class DeckCardEditorMenu extends Vue {
 .editor-button-horizontal-rule:after { content: '—'; }
 
 .editor-button-stat-block:after { content: 'ST'; }
+
+.menu-bar > button.editor-button-dropdown {
+  width: 3.6rem;
+}
+.menu-bar > button.editor-button-dropdown:after {
+  content: ' more ';
+  width: 90%;
+  font-size: 1rem;
+}
+
+.extended-menu {
+  width: 100%;
+  height: 4rem;
+  padding-top: .5rem;
+  background: var(--highlight-color);
+}
+.extended-menu-button {
+  width: 97%;
+  height: 1.6rem;
+  margin: 0 .1rem;
+  background-color: #EEE;
+  color: black;
+  font-size: 1rem;
+  border: none;
+}
 </style>

src/components/deck-card-editor.vue

@@ -83,7 +83,7 @@ export default class DeckCardEditor extends Vue {
     content.focus()
 
     const cmd = menuActionToCommand[action]
-    cmd()
+    if (cmd) cmd()
 
     this.$nextTick(() => this.syncMenuState())
   }