new meal type edit

vue/src/components/MealPlanCalenderHeader.vue

@@ -43,7 +43,8 @@
       <slot name="label">{{ headerProps.periodLabel }}</slot>
     </div>
     <div class="actionArea d-none d-sm-flex">
-      <span class="delete-area text-danger p-1 mr-2" @drop.prevent="onDeleteDrop($event)"
+      <button class="btn btn-success plus-button pt-1 pb-1" @click="$emit('create-new')"><i class="fas fa-plus"></i></button>
+      <span class="delete-area text-danger p-1 mr-2 ml-2" @drop.prevent="onDeleteDrop($event)"
             @dragenter.prevent="onDeleteDragEnter($event)" @dragleave.prevent="onDeleteDragLeave($event)" @dragover.prevent="onDeleteDragEnter"><i
           class="fas fa-trash"></i> {{ $t('Drag_Here_To_Delete') }}</span>
     </div>
@@ -107,6 +108,13 @@ export default {
   font-size: 1.5em;
 }
 
+.plus-button {
+  border-style: dotted;
+  margin-left: auto;
+  order: 1;
+  user-select: none
+}
+
 .delete-area {
   border-style: dotted;
   margin-left: auto;

vue/src/components/Modals/EmojiInput.vue

@@ -1,15 +1,15 @@
 <template>
     <div>
-        <b-form-group 
+        <b-form-group
             v-bind:label="label"
             class="mb-3">
-          <twemoji-textarea 
+          <twemoji-textarea
             :ref="'_edit_' + id"
             :initialContent="value"
-            :emojiData="emojiDataAll" 
+            :emojiData="emojiDataAll"
             :emojiGroups="emojiGroups"
             triggerType="hover"
-            recentEmojisFeat="true"
+            :recentEmojisFeat="true"
             recentEmojisStorage="local"
             @contentChanged="setIcon"
            />
@@ -59,7 +59,7 @@ export default {
   },
   methods: {
     prepareEmoji: function() {
-      this.$refs['_edit_' + this.id].addText(this.this_item.icon || ''); 
+      this.$refs['_edit_' + this.id].addText(this.this_item.icon || '');
       this.$refs['_edit_' + this.id].blur()
       document.getElementById('btn-emoji-default').disabled = true;
     },