Merge pull request #89 from multinet-app/page-level-styling

Page level styling

client/src/components/ItemPanel.vue

@@ -0,0 +1,116 @@
+<template>
+  <v-list
+    dark
+    subheader
+  >
+    <v-subheader class="pr-2">
+      {{title}}
+
+      <v-spacer />
+
+        <v-tooltip top>
+          <template v-slot:activator="{ on }">
+            <v-scroll-x-transition>
+              <v-btn
+                flat
+                icon
+                v-if="anySelected"
+                v-on="on"
+              >
+                <v-icon color="red accent-2">delete_sweep</v-icon>
+              </v-btn>
+            </v-scroll-x-transition>
+          </template>
+          <span>Delete selected</span>
+        </v-tooltip>
+    </v-subheader>
+
+    <v-divider></v-divider>
+
+    <template v-if="items.length > 0">
+      <v-hover
+        v-for="item in items"
+        :key="item"
+      >
+        <v-list-tile
+          active-class="grey lighten-4"
+          avatar
+          ripple
+          slot-scope="{ hover }"
+          :to="`/workspaces/${workspace}/${routeType}/${item}`"
+        >
+          <v-list-tile-avatar @click.prevent>
+            <v-fade-transition hide-on-leave>
+              <v-icon
+                color="blue lighten-1"
+                v-if="!hover && !checkbox[item]"
+              >{{icon}}</v-icon>
+
+              <v-checkbox
+                class="ws-detail-checkbox"
+                v-else
+                v-model="checkbox[item]"
+              ></v-checkbox>
+            </v-fade-transition>
+          </v-list-tile-avatar>
+
+          <v-list-tile-content>
+            <v-list-tile-title>{{item}}</v-list-tile-title>
+          </v-list-tile-content>
+        </v-list-tile>
+      </v-hover>
+    </template>
+    <div
+      class="ws-detail-empty-list"
+      v-else
+    >
+      <v-icon color="blue lighten-1">info</v-icon> There's nothing here yet...
+    </div>
+  </v-list>
+</template>
+
+<script>
+export default {
+  name: 'ItemPanel',
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    items: {
+      type: Array,
+      required: true,
+    },
+    workspace: {
+      type: String,
+      required: true,
+    },
+    routeType: {
+      type: String,
+      required: true,
+    },
+    icon: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      checkbox: {},
+    };
+  },
+  computed: {
+    anySelected() {
+      return Object.values(this.checkbox)
+        .some(d => !!d);
+    },
+  },
+}
+</script>
+
+<style scoped>
+.ws-detail-checkbox.v-input--selection-controls {
+  margin-top: 19px;
+  margin-left: 8px;
+}
+</style>