Use outline color to encode types (#77)

* Support use outline color to encode types * Fix app icon * Fix format * Fix app icon * Fix format * Add underline color
bioimage-io · Sep 4, 2020 · 4d301bb · 4d301bb
1 parent fb43848
commit 4d301bb
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 11 deletions.
diff --git a/site.config.json b/site.config.json
@@ -84,6 +84,7 @@
       "name": "Models",
       "type": "model",
       "description": "List AI models",
+      "outline_color": "rgb(36 0 236)",
       "tag_categories": {
         "modality": ["widefield", "confocal", "SR", "EM", "TEM", "cryoEM"],
         "content": [
@@ -119,16 +120,19 @@
     {
       "name": "Applications",
       "type": "application",
+      "outline_color": "rgb(83 230 7)",
       "description": "List software, web apps and utility tools"
     },
     {
       "name": "Notebooks",
       "type": "notebook",
+      "outline_color": "rgb(224 188 9)",
       "description": "List Jupyter notebooks/Colab for models, workflows"
     },
     {
       "name": "Datasets",
       "type": "dataset",
+      "outline_color": "rgb(236 0 185)",
       "description": "List datasets"
     }
   ]

diff --git a/src/components/ResourceItemCard.vue b/src/components/ResourceItemCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="resource-item-card">
-    <div class="card is-shady">
+    <div class="card is-shady" :style="{ 'box-shadow': boxShadow }">
       <div class="card-image">
         <b-carousel
           v-if="
@@ -44,12 +44,7 @@
               style="border-radius: 50%;background: #167cf0b8;"
               :src="'/static/anonymousAnimals/' + icon.src + '.png'"
             />
-            <b-icon
-              v-else
-              style="height:22px;"
-              :icon="icon.src"
-              size="is-small"
-            />
+            <b-icon v-else class="item-icon" :icon="icon.src" />
             <span>{{ resourceItem.name }}</span>
           </h4>
           <div class="buttons floating-buttons">
@@ -82,6 +77,12 @@
 import Badges from "./Badges";
 import AppIcons from "./AppIcons";
 import { anonymousAnimals } from "../utils";
+import siteConfig from "../../site.config.json";
+
+const colorMap = {};
+for (let it of siteConfig.resource_categories) {
+  colorMap[it.type] = it.outline_color;
+}
 
 const isTouchDevice = (function() {
   try {
@@ -110,6 +111,10 @@ export default {
     "app-icons": AppIcons
   },
   computed: {
+    boxShadow: function() {
+      const color = colorMap[this.resourceItem.type] || "rgba(0,0,0,.2)";
+      return `0 3px 1px -2px ${color}, 0 2px 2px 0 ${color}, 0 1px 5px 0 rgba(0,0,0,.12)`;
+    },
     icon: function() {
       if (this.resourceItem.icon) {
         if (this.resourceItem.icon.startsWith("http")) {

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -140,7 +140,7 @@
       <b-tooltip label="List all items" position="is-bottom">
         <div
           class="item-lists is-link"
-          style="width:30px; margin-left: -16px;"
+          style="width:30px; margin-left: -16px;border-bottom-color: gray;"
           @click="
             selectedCategory = null;
             updateQueryTags();
@@ -162,6 +162,7 @@
             selectedCategory = list;
             updateQueryTags();
           "
+          :style="{ 'border-bottom-color': list.outline_color }"
           :class="{ active: selectedCategory === list }"
         >
           {{ list.name }}
@@ -435,6 +436,7 @@ function normalizeItem(self, item) {
   if (item.covers && !Array.isArray(item.covers)) {
     item.covers = [item.covers];
   }
+  if (item.icon === "extension") item.icon = "puzzle";
   item.cover_images = [];
   for (let cover of item.covers) {
     if (cover.includes("(") || cover.includes(")")) {
@@ -466,6 +468,7 @@ function normalizeItem(self, item) {
         .map(tag => tag.toLowerCase())
     );
   }
+
   // make it lower case and remove duplicates
   item.allLabels = Array.from(
     new Set(item.allLabels.map(label => label.toLowerCase()))
@@ -1230,16 +1233,20 @@ export default {
 }
 
 .item-lists {
+  padding-bottom: 2px;
   width: 110px;
   display: inline-block;
   margin: 10px;
   text-align: center;
   cursor: pointer;
-  font-size: 1.1em;
+  font-size: 1.2em;
   color: #006fcb;
+  border-bottom: 2px solid;
+  border-radius: 5px;
 }
+
 .item-lists:hover {
-  font-weight: 600;
+  font-weight: 500;
 }
 
 .item-lists.active {
@@ -1276,7 +1283,7 @@ export default {
   font-size: 1.3rem;
 }
 .site-title {
-  font-size: 2.4em;
+  font-size: 2.2em;
   padding-top: 10px;
   padding-left: 4px;
 }