improve heading components

cateditor/src/components/CatalogContents.vue

@@ -8,7 +8,11 @@
     <v-layout row fill-height>
       <v-flex xs4>
         <v-card>
-          <DragListHeading title="Sections" />
+          <DragListHeading title="Sections">
+            <v-btn @click="showAddSectionDialog = true" icon class="ma-0 pa-0">
+              <v-icon>add</v-icon>
+            </v-btn>
+          </DragListHeading>
 
           <div id="sections" class="list-group">
             <div v-for="item in sections" :key="item.id">

cateditor/src/components/DialogHeading.vue

@@ -0,0 +1,17 @@
+<template>
+  <v-card class="subheading font-weight-bold ma-0 pa-0 white--text" color="keen_dark_grey">
+    <v-card-title class="ma-0 pa-0 pl-1">
+      <span class="pa-2">{{ title }}</span>
+      <v-spacer></v-spacer>
+      <slot></slot>
+    </v-card-title>
+  </v-card>
+</template>
+
+<script>
+export default {
+  props: {
+    title: String,
+  },
+}
+</script>

cateditor/src/components/DragListHeading.vue

@@ -1,12 +1,9 @@
 <template>
   <v-card class="subheading font-weight-bold ma-0 pl-2" color="grey lighten-2">
-    <v-card-title class="">
+    <v-card-title class="ma-0 pa-0">
-      {{ title }}
+      <span class="pa-2">{{ title }}</span>
       <v-spacer></v-spacer>
-<!--      <v-btn icon>
+      <slot></slot>
-        <v-icon class="ma-0 pa-0">add</v-icon>
-      </v-btn>
-      -->
     </v-card-title>
   </v-card>
 </template>

cateditor/src/components/ExitEditorDialog.vue

@@ -1,15 +1,13 @@
 <template>
   <v-layout row justify-center>
-    <v-dialog v-model="show" persistent max-width="280">
+    <v-dialog v-model="show" max-width="280">
       <v-card>
 
-        <v-card class="subheading font-weight-bold ma-0 pa-0 white--text" color="keen_dark_grey">
+        <DialogHeading title="Quit Editor">
-          <v-card-title class="ma-0 pa-2 pl-3">
+          <v-btn @click="show = false" icon class="ma-0 pa-0">
-            Quit Editor
+            <v-icon color="white">clear</v-icon>
-            <v-spacer></v-spacer>
+          </v-btn>
-            <v-icon color="white" @click="show = false">clear</v-icon>
+        </DialogHeading>
-          </v-card-title>
-        </v-card>
 
         <v-card-text>
           Abandon changes and return to the catalog list?
@@ -26,8 +24,13 @@
 </template>
 
 <script>
+import DialogHeading from './DialogHeading'
+
 // https://stackoverflow.com/questions/48035310/open-a-vuetify-dialog-from-a-component-template-in-vuejs
 export default {
+  components: {
+    DialogHeading,
+  },
   data: () => ({
   }),
   props: {