diff client/src/components/importschedule/Importschedule.vue @ 2330:7b79d4966a87

client: unified buttons styles in tables
author Markus Kottlaender <markus@intevation.de>
date Tue, 19 Feb 2019 16:33:31 +0100
parents 41218dd386a9
children f04d33fec01e
line wrap: on
line diff
--- a/client/src/components/importschedule/Importschedule.vue	Tue Feb 19 14:57:48 2019 +0100
+++ b/client/src/components/importschedule/Importschedule.vue	Tue Feb 19 16:33:31 2019 +0100
@@ -28,7 +28,7 @@
                 />
               </div>
             </div>
-            <table v-if="schedules.length" class="table">
+            <table v-if="schedules.length" class="table table-hover">
               <thead>
                 <tr>
                   <th><translate>Import</translate></th>
@@ -36,9 +36,7 @@
                   <th><translate>Author</translate></th>
                   <th><translate>Schedule</translate></th>
                   <th><translate>Email</translate></th>
-                  <th>&nbsp;</th>
-                  <th>&nbsp;</th>
-                  <th>&nbsp;</th>
+                  <th></th>
                 </tr>
               </thead>
               <tbody>
@@ -55,29 +53,37 @@
                       icon="check"
                     ></font-awesome-icon>
                   </td>
-                  <td>
-                    <font-awesome-icon
-                      :style="activeStyle"
+                  <td class="text-right">
+                    <button
                       @click="editSchedule(schedule.id)"
-                      icon="pencil-alt"
-                      fixed-width
-                    ></font-awesome-icon>
-                  </td>
-                  <td>
-                    <font-awesome-icon
-                      :style="activeStyle"
+                      class="btn btn-sm btn-dark mr-1"
+                      :disabled="importScheduleDetailVisible"
+                    >
+                      <font-awesome-icon
+                        icon="pencil-alt"
+                        fixed-width
+                      ></font-awesome-icon>
+                    </button>
+                    <button
                       @click="deleteSchedule(schedule.id)"
-                      icon="trash"
-                      fixed-width
-                    ></font-awesome-icon>
-                  </td>
-                  <td>
-                    <font-awesome-icon
+                      class="btn btn-sm btn-dark mr-1"
+                      :disabled="importScheduleDetailVisible"
+                    >
+                      <font-awesome-icon
+                        icon="trash"
+                        fixed-width
+                      ></font-awesome-icon>
+                    </button>
+                    <button
                       @click="triggerManualImport(schedule.id)"
-                      class="fa-fw mr-2"
-                      fixed-width
-                      icon="play"
-                    ></font-awesome-icon>
+                      class="btn btn-sm btn-dark"
+                      :disabled="importScheduleDetailVisible"
+                    >
+                      <font-awesome-icon
+                        icon="play"
+                        fixed-width
+                      ></font-awesome-icon>
+                    </button>
                   </td>
                 </tr>
               </tbody>
@@ -204,10 +210,6 @@
   computed: {
     ...mapState("application", ["showSidebar"]),
     ...mapState("importschedule", ["schedules", "importScheduleDetailVisible"]),
-    activeStyle() {
-      const color = this.importScheduleDetailVisible ? "#aeaeae" : "#000000";
-      return { color: color };
-    },
     spacerStyle() {
       return [
         "spacer ml-3",