Merge branch 'project-view-switcher-buttons'

package.json

@@ -12,6 +12,7 @@
     "core-js": "^2.6.5",
     "tailwindcss-interaction-variants": "^2.0.0-beta.1",
     "tailwindcss-spaced-items": "^0.1.0",
+    "tailwindcss-visuallyhidden": "^1.0.2",
     "vue": "^2.6.10",
     "vue-router": "^3.0.3"
   },

src/components/ProjectViewSwitcher.vue

@@ -1,6 +1,38 @@
 <template>
   <div>
-    <button type="button" @click="$emit('changed', 'grid')">Grid</button>
-    <button type="button" @click="$emit('changed', 'list')" class="ml-2">List</button>
+    <button type="button" class="p-2" :class="{ active: activeMode == 'grid'}" @click="$emit('changed', 'grid')">
+      <span class="visuallyhidden">View projects in a grid</span>
+      <svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><defs><clipPath id="a"><path d="M12.2 5v4.8H17V5zm0 12H17v-4.8h-4.8zM5 5h4.8v4.8H5zm0 12v-4.8h4.8V17z" fill="none" clip-rule="evenodd"/></clipPath><clipPath id="b"><path fill="none" d="M0 0h22v22H0z"/></clipPath><clipPath id="c"><path fill="none" d="M5 5h12v12H5z"/></clipPath></defs><g clip-path="url(&quot;#a&quot;)"><g clip-path="url(&quot;#b&quot;)" style="clip-path:url(&quot;#icon-grid-b&quot;)"><g clip-path="url(&quot;#c&quot;)"><path d="M0 0h22v22H0z"/></g></g></g></svg>
+    </button>
+
+    <button type="button" class="p-2 ml-2" :class="{ active: activeMode == 'list'}" @click="$emit('changed', 'list')">
+      <span class="visuallyhidden">View projects in a list</span>
+      <svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 22"><defs><clipPath id="link-icon-a"><path d="M5,5V7H19V5Zm14,7V10H5v2ZM5,17H19V15H5Z" style="fill: none; clip-rule: evenodd;"></path></clipPath><clipPath id="link-icon-b"><rect width="24" height="22" style="fill: none;"></rect></clipPath><clipPath id="link-icon-c"><rect x="5" y="5" width="14" height="12" style="fill: none;"></rect></clipPath></defs><title>Asset 1</title><g style="clip-path: url(&quot;#link-icon-a&quot;);"><g style="clip-path: url(&quot;#link-icon-b&quot;);"><g style="clip-path: url(&quot;#link-icon-c&quot;);"><rect width="24" height="22"></rect></g></g></g></svg>
+    </button>
   </div>
 </template>
+
+<script>
+export default {
+  props: {
+    activeMode: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<style type="postcss" scoped>
+  button {
+    @apply text-gray-700;
+
+    &:hover {
+    @apply bg-white rounded shadow
+  }
+  }
+
+  .active {
+    @apply bg-white rounded shadow text-blue-400
+  }
+</style>

src/views/Projects.vue

@@ -8,7 +8,7 @@
       <div class="flex justify-between items-baseline">
         <page-title class="mb-6">All Projects</page-title>
 
-        <project-view-switcher @changed="projectViewSwitched"></project-view-switcher>
+        <project-view-switcher @changed="projectViewSwitched" :active-mode="displayMode"></project-view-switcher>
       </div>
 
       <div v-if="displayMode == 'grid'" class="flex flex-wrap mt-4 -mx-4 -mb-8">

tailwind.config.js

@@ -23,5 +23,6 @@ module.exports = {
   plugins: [
     require('tailwindcss-spaced-items')({ values: defaultConfig.theme.spacing }),
     require('tailwindcss-interaction-variants')(),
+    require('tailwindcss-visuallyhidden')(),
   ]
 }

yarn.lock

@@ -9023,6 +9023,11 @@ tailwindcss-spaced-items@^0.1.0:
   resolved "https://registry.yarnpkg.com/tailwindcss-spaced-items/-/tailwindcss-spaced-items-0.1.0.tgz#e7f381e5c780a034bcdbc38a6a2cfb31f828a020"
   integrity sha512-YiT1h89fp13r6I+EBM8wS1RWfsTwzHSi4BAnHoTXXQK1GQ53DUCPeFNmiksYSdx2aQLMdp/DTPvErqBVfTALiQ==
 
+tailwindcss-visuallyhidden@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/tailwindcss-visuallyhidden/-/tailwindcss-visuallyhidden-1.0.2.tgz#cdf178208282d1787e72186df2cf9d1286347667"
+  integrity sha512-Hk3Do4x9nAz43CGzcxXqdAhsQs+bE6tUhlcHWBvLC4F8WjqbiGIcp1jPPHmXBAv41D8kFIH0UZyLGw490upsKg==
+
 tailwindcss@^1.0.0-beta.8:
   version "1.0.0-beta.8"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.0.0-beta.8.tgz#62c04d4bb342933b45164735b0334119651cd733"