From aebaef0f28c0ada57870f516a9c022be119f3338 Mon Sep 17 00:00:00 2001
From: Seth Ladygo <alx-git@arclight.industries>
Date: Thu, 16 Jan 2020 12:14:07 -0800
Subject: [PATCH] cat editor: update icons and layout for vuetify2

---
 cateditor/src/components/AddSectionDialog.vue | 12 +++++++----
 cateditor/src/components/CatalogContents.vue  | 12 +++++------
 cateditor/src/components/ExitEditorDialog.vue | 20 +++++++++++++------
 .../src/components/MaterialDeleteDialog.vue   | 19 ++++++++++++------
 .../src/components/ModelDeleteDialog.vue      | 19 ++++++++++++------
 cateditor/src/components/ModelInfoDialog.vue  | 10 +++++++---
 .../src/components/SectionDeleteDialog.vue    | 19 ++++++++++++------
 .../src/components/SectionInfoDialog.vue      | 10 +++++++---
 templates/catalogedit/catalogedit.html        |  1 -
 9 files changed, 81 insertions(+), 41 deletions(-)

diff --git a/cateditor/src/components/AddSectionDialog.vue b/cateditor/src/components/AddSectionDialog.vue
index d222476..972bbd7 100644
--- a/cateditor/src/components/AddSectionDialog.vue
+++ b/cateditor/src/components/AddSectionDialog.vue
@@ -5,11 +5,11 @@
         <v-card>
           <DialogHeading title="Add Section">
             <v-btn icon class="ma-0 pa-0" @click="show = false">
-              <v-icon color="white">clear</v-icon>
+              <v-icon color="white">mdi-close</v-icon>
             </v-btn>
           </DialogHeading>
 
-          <v-card-text>
+          <v-card-text class="my-0 pb-0 pt-2">
             <v-text-field
               v-model="name"
               :rules="[v => !!v || 'Required']"
@@ -22,11 +22,15 @@
 
           <v-card-actions>
             <v-spacer/>
-            <v-btn flat @click="show = false">Cancel</v-btn>
+            <v-btn
+              small
+              class="mb-2"
+              @click="show = false">Cancel</v-btn>
             <v-btn
               :disabled="!valid"
               color="primary"
-              flat
+              class="black--text ml-4 mb-2"
+              small
               @click="doNewSection()">OK</v-btn>
             <v-spacer/>
           </v-card-actions>
diff --git a/cateditor/src/components/CatalogContents.vue b/cateditor/src/components/CatalogContents.vue
index 6eacb68..62374f4 100644
--- a/cateditor/src/components/CatalogContents.vue
+++ b/cateditor/src/components/CatalogContents.vue
@@ -12,7 +12,7 @@
         <v-card>
           <DragListHeading title="Sections">
             <v-btn icon class="ma-0 pa-0" @click="showAddSectionDialog = true">
-              <v-icon>add</v-icon>
+              <v-icon>mdi-plus</v-icon>
             </v-btn>
           </DragListHeading>
 
@@ -41,10 +41,10 @@
                   <v-list-item-action>
                     <span class="group">
                       <v-btn icon @click.stop="popSectionInfo(item.id)">
-                        <v-icon small color="grey lighten-1">info</v-icon>
+                        <v-icon small color="grey">mdi-information-outline</v-icon>
                       </v-btn>
                       <v-btn icon @click.stop="popSectionDelete(item.id)">
-                        <v-icon small color="grey lighten-1">delete</v-icon>
+                        <v-icon small color="grey">mdi-trash-can-outline</v-icon>
                       </v-btn>
                     </span>
                   </v-list-item-action>
@@ -81,10 +81,10 @@
                   <v-list-item-action>
                     <span class="group">
                       <v-btn icon @click.stop="popModelInfo(item.model)">
-                        <v-icon small color="grey lighten-1">info</v-icon>
+                        <v-icon small color="grey">mdi-information-outline</v-icon>
                       </v-btn>
                       <v-btn icon @click.stop="popModelDelete(item.model)">
-                        <v-icon small color="grey lighten-1">delete</v-icon>
+                        <v-icon small color="grey">mdi-trash-can-outline</v-icon>
                       </v-btn>
                     </span>
                   </v-list-item-action>
@@ -116,7 +116,7 @@
                   <v-list-item-action>
                     <span class="group">
                       <v-btn icon @click="popMaterialDelete(item.id)">
-                        <v-icon small color="grey lighten-1">delete</v-icon>
+                        <v-icon small color="grey">mdi-trash-can-outline</v-icon>
                       </v-btn>
                     </span>
                   </v-list-item-action>
diff --git a/cateditor/src/components/ExitEditorDialog.vue b/cateditor/src/components/ExitEditorDialog.vue
index 1f369ec..70d0460 100644
--- a/cateditor/src/components/ExitEditorDialog.vue
+++ b/cateditor/src/components/ExitEditorDialog.vue
@@ -1,22 +1,30 @@
 <template>
   <v-row justify="center">
-    <v-dialog v-model="show" max-width="280">
+    <v-dialog v-model="show" max-width="250">
       <v-card>
 
-        <DialogHeading title="Quit Editor">
+        <DialogHeading title="Exit Editor">
           <v-btn icon class="ma-0 pa-0" @click="show = false">
-            <v-icon color="white">clear</v-icon>
+            <v-icon color="white">mdi-close</v-icon>
           </v-btn>
         </DialogHeading>
 
-        <v-card-text>
+        <v-card-text class="my-0 pb-0 pt-2">
           Abandon changes and return to the catalog list?
         </v-card-text>
 
         <v-card-actions>
           <v-spacer/>
-          <v-btn flat @click="show = false">Back to editing</v-btn>
-          <v-btn flat href="/catalogs">Quit</v-btn>
+          <v-btn
+            small
+            class="mb-2"
+            @click="show = false">Cancel</v-btn>
+          <v-btn
+            color="primary"
+            class="black--text ml-4 mb-2"
+            small
+            href="/catalogs">Exit</v-btn>
+          <v-spacer/>
         </v-card-actions>
       </v-card>
     </v-dialog>
diff --git a/cateditor/src/components/MaterialDeleteDialog.vue b/cateditor/src/components/MaterialDeleteDialog.vue
index cf89ed5..3c3ebaf 100644
--- a/cateditor/src/components/MaterialDeleteDialog.vue
+++ b/cateditor/src/components/MaterialDeleteDialog.vue
@@ -1,16 +1,16 @@
 <template>
   <v-row justify="center">
-    <v-dialog v-model="show" max-width="250">
+    <v-dialog v-model="show" max-width="300">
       <v-card>
         <DialogHeading title="Remove Material">
           <v-btn icon class="ma-0 pa-0" @click="show = false">
-            <v-icon color="white">clear</v-icon>
+            <v-icon color="white">mdi-close</v-icon>
           </v-btn>
         </DialogHeading>
 
-        <v-card-text>
+        <v-card-text class="pt-4 pb-2">
           Really remove material from model?
-          <div class="subheading mt-2">
+          <div class="subheading black--text mt-2">
             <span class="font-weight-medium">{{ id }}</span> {{ name }}
           </div>
           <div class="body">{{ color }}</div>
@@ -18,8 +18,15 @@
 
         <v-card-actions>
           <v-spacer/>
-          <v-btn text @click="show = false">Cancel</v-btn>
-          <v-btn color="primary" text @click="doDelete()">OK</v-btn>
+          <v-btn
+            small
+            class="mb-2"
+            @click="show = false">Cancel</v-btn>
+          <v-btn
+            color="primary"
+            class="black--text ml-4 mb-2"
+            small
+            @click="doDelete()">OK</v-btn>
           <v-spacer/>
         </v-card-actions>
       </v-card>
diff --git a/cateditor/src/components/ModelDeleteDialog.vue b/cateditor/src/components/ModelDeleteDialog.vue
index d824126..3550388 100644
--- a/cateditor/src/components/ModelDeleteDialog.vue
+++ b/cateditor/src/components/ModelDeleteDialog.vue
@@ -1,24 +1,31 @@
 <template>
   <v-row justify="center">
-    <v-dialog v-model="show" max-width="250">
+    <v-dialog v-model="show" max-width="300">
       <v-card>
         <DialogHeading title="Remove Model">
           <v-btn icon class="ma-0 pa-0" @click="show = false">
-            <v-icon color="white">clear</v-icon>
+            <v-icon color="white">mdi-close</v-icon>
           </v-btn>
         </DialogHeading>
 
-        <v-card-text>
+        <v-card-text class="pt-4 pb-2">
           Really remove model from section?
-          <div class="subheading font-weight-medium mt-2">
+          <div class="subheading black--text font-weight-medium mt-2">
             {{ name }}
           </div>
         </v-card-text>
 
         <v-card-actions>
           <v-spacer/>
-          <v-btn text @click="show = false">Cancel</v-btn>
-          <v-btn color="primary" text @click="doDelete()">OK</v-btn>
+          <v-btn
+            small
+            class="mb-2"
+            @click="show = false">Cancel</v-btn>
+          <v-btn
+            color="primary"
+            class="black--text ml-4 mb-2"
+            small
+            @click="doDelete()">OK</v-btn>
           <v-spacer/>
         </v-card-actions>
       </v-card>
diff --git a/cateditor/src/components/ModelInfoDialog.vue b/cateditor/src/components/ModelInfoDialog.vue
index da2951e..07fce77 100644
--- a/cateditor/src/components/ModelInfoDialog.vue
+++ b/cateditor/src/components/ModelInfoDialog.vue
@@ -4,18 +4,22 @@
       <v-card>
         <DialogHeading title="Model Info">
           <v-btn icon class="ma-0 pa-0" @click="show = false">
-            <v-icon color="white">clear</v-icon>
+            <v-icon color="white">mdi-close</v-icon>
           </v-btn>
         </DialogHeading>
 
-        <v-card-text>
+        <v-card-text class="pt-2 pb-0">
           <v-text-field v-model="name" label="Name" required/>
           {{ modelMaterialCount }} {{ modelMaterialCount | pluralize('material') }}
         </v-card-text>
 
         <v-card-actions>
           <v-spacer/>
-          <v-btn color="primary" text @click="show = false">OK</v-btn>
+          <v-btn
+            color="primary"
+            small
+            class="black--text mb-2"
+            @click="show = false">OK</v-btn>
           <v-spacer/>
         </v-card-actions>
       </v-card>
diff --git a/cateditor/src/components/SectionDeleteDialog.vue b/cateditor/src/components/SectionDeleteDialog.vue
index 644231f..21dbd17 100644
--- a/cateditor/src/components/SectionDeleteDialog.vue
+++ b/cateditor/src/components/SectionDeleteDialog.vue
@@ -1,24 +1,31 @@
 <template>
   <v-row justify="center">
-    <v-dialog v-model="show" max-width="250">
+    <v-dialog v-model="show" max-width="300">
       <v-card>
         <DialogHeading title="Delete Section">
           <v-btn icon class="ma-0 pa-0" @click="show = false">
-            <v-icon color="white">clear</v-icon>
+            <v-icon color="white">mdi-close</v-icon>
           </v-btn>
         </DialogHeading>
 
-        <v-card-text>
+        <v-card-text class="pt-4 pb-2">
           Really delete catalog section?
-          <div class="subheading font-weight-medium mt-2">
+          <div class="subheading black--text font-weight-medium mt-2">
             {{ name }}
           </div>
         </v-card-text>
 
         <v-card-actions>
           <v-spacer/>
-          <v-btn text @click="show = false">Cancel</v-btn>
-          <v-btn color="primary" text @click="doDelete()">OK</v-btn>
+          <v-btn
+            small
+            class="mb-2"
+            @click="show = false">Cancel</v-btn>
+          <v-btn
+            color="primary"
+            class="black--text ml-4 mb-2"
+            small
+            @click="doDelete()">OK</v-btn>
           <v-spacer/>
         </v-card-actions>
       </v-card>
diff --git a/cateditor/src/components/SectionInfoDialog.vue b/cateditor/src/components/SectionInfoDialog.vue
index 11e5356..e9691d9 100644
--- a/cateditor/src/components/SectionInfoDialog.vue
+++ b/cateditor/src/components/SectionInfoDialog.vue
@@ -4,11 +4,11 @@
       <v-card>
         <DialogHeading title="Section Info">
           <v-btn icon class="ma-0 pa-0" @click="show = false">
-            <v-icon color="white">clear</v-icon>
+            <v-icon color="white">mdi-close</v-icon>
           </v-btn>
         </DialogHeading>
 
-        <v-card-text>
+        <v-card-text class="pt-2 pb-0">
           <v-text-field v-model="name" label="Name" required/>
           {{ sectionModelCount }} {{ sectionModelCount | pluralize('model') }}<br>
           {{ sectionMaterialCount }} {{ sectionMaterialCount | pluralize('material') }}
@@ -16,7 +16,11 @@
 
         <v-card-actions>
           <v-spacer/>
-          <v-btn color="primary" text @click="show = false">OK</v-btn>
+          <v-btn
+            color="primary"
+            small
+            class="black--text mb-2"
+            @click="show = false">OK</v-btn>
           <v-spacer/>
         </v-card-actions>
       </v-card>
diff --git a/templates/catalogedit/catalogedit.html b/templates/catalogedit/catalogedit.html
index 8420ad1..8c45945 100644
--- a/templates/catalogedit/catalogedit.html
+++ b/templates/catalogedit/catalogedit.html
@@ -10,7 +10,6 @@
     <link href="{% static 'img/favicon.ico' %}" rel="shortcut icon" />
     <title>ProCatalog Editor</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
-    <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
     {{ catalogID | json_script:"catalogID" }}
     {{ regions | json_script:"regions" }}
     {{ seasons | json_script:"seasons" }}