Fix: CoscineCard

src/components/coscine/CoscineCard.vue

@@ -2,35 +2,39 @@
   <b-card
     no-body
     class="coscine_card m-2 text-center"
-    :class="isLoading ? 'bg-light' : ''"
+    :class="isLoading || disabled ? 'bg-light' : ''"
     @click.prevent="openCard()"
   >
     <!-- Stretched Link (Card) -->
     <a
-      v-if="!isLoading && !isDisabled"
+      v-if="!isLoading && !disabled"
       :href="hrefFromRouter(to)"
       class="stretched-link"
     />
 
     <!-- Badge -->
     <template #header>
-      <b-badge v-if="badgeVisibility" pill :variant="badgeType">
+      <b-badge
+        v-if="badgeVisibility"
+        pill
+        :variant="disabled ? 'secondary' : badgeType"
+      >
         {{ badgeText }}
       </b-badge>
     </template>
 
     <!-- Settings Button -->
     <b-button
-      v-if="toSettings"
+      v-if="!disabled && toSettings"
       size="sm"
       variant="outline-primary"
       class="settings_button"
-      @click.stop.prevent="settingsCard"
+      @click.stop.prevent="openSettings"
     >
       <b-icon icon="pencil-fill" />
       <!-- Stretched Link (Settings) -->
       <a
-        v-if="!isLoading && !isDisabled"
+        v-if="!isLoading && !disabled"
         :href="hrefFromRouter(toSettings)"
         class="stretched-link"
       />
@@ -41,7 +45,12 @@
         <!-- Loading Spinner -->
         <b-spinner v-if="isLoading" variant="primary" class="card_icon" />
         <!-- Icon -->
-        <b-icon v-else :icon="cardIcon" variant="primary" class="card_icon" />
+        <b-icon
+          v-else
+          :icon="cardIcon"
+          :variant="disabled ? 'secondary' : 'primary'"
+          class="card_icon"
+        />
       </div>
       <!-- Title -->
       <b-card-text>
@@ -93,7 +102,7 @@ export default defineComponent({
       default: false,
       type: Boolean,
     },
-    isDisabled: {
+    disabled: {
       default: false,
       type: Boolean,
     },
@@ -128,10 +137,14 @@ export default defineComponent({
       return routeData.href;
     },
     openCard() {
+      if (!this.disabled) {
         this.$emit("open-card", this.to);
+      }
     },
-    settingsCard() {
+    openSettings() {
+      if (!this.disabled) {
         this.$emit("open-card-settings", this.toSettings);
+      }
     },
   },
 });
@@ -145,7 +158,12 @@ export default defineComponent({
   max-width: 9rem;
   max-height: 9rem;
 }
-
+.coscine_card:hover {
+  background-color: #cccccc !important;
+}
+.coscine_card:hover .settings_button {
+  visibility: visible;
+}
 .card-header {
   /* Header + (Icon) + Text = Card */
   /* (Padding) + Settings Icon = Header */
@@ -155,15 +173,6 @@ export default defineComponent({
   border: 0;
   text-align: center;
 }
-
-.coscine_card:hover {
-  background-color: #cccccc;
-}
-
-.card.coscine_card:hover .settings_button {
-  visibility: visible;
-}
-
 .settings_button {
   /* Pin button in the top-right corner */
   position: absolute;
@@ -176,7 +185,6 @@ export default defineComponent({
   height: 1.7rem;
   padding: 0;
 }
-
 .card_icon {
   /* Header + (Icon) + Text = Card */
   width: 2.9rem;

src/modules/project/pages/ProjectPage.vue

@@ -11,11 +11,10 @@
               <b-card-group id="card-deck" deck>
                 <CoscineCard
                   id="addResource"
-                  :style="cardStyleAddResource"
                   :title="$t('page.project.addResource')"
                   type="create"
                   :to="toCreateResource()"
-                  :is-disabled="!isEmailValid"
+                  :disabled="!isEmailValid"
                   @open-card="openCreateResource($event)"
                 />
                 <b-tooltip target="addResource">
@@ -40,7 +39,6 @@
                   :key="index"
                   :title="resource.displayName"
                   type="resource"
-                  :style="cardStyle"
                   :badge-visibility="resource.archived"
                   :badge-text="$t('default.archived')"
                   :to="toResource(resource)"
@@ -54,6 +52,7 @@
                   :to="{}"
                   :title="$t('default.loading')"
                   :is-loading="!resources"
+                  :disabled="true"
                 />
               </b-card-group>
             </div>
@@ -69,7 +68,6 @@
                 <CoscineCard
                   :title="$t('page.listProjects.addProject')"
                   type="create"
-                  :style="cardStyle"
                   :to="toCreateSubProject()"
                   @open-card="openCreateProject($event)"
                 />
@@ -86,7 +84,6 @@
                   :key="index"
                   :title="subProject.displayName"
                   type="project"
-                  :style="cardStyle"
                   :to="toSubProject(subProject)"
                   @open-card="openProject($event, subProject)"
                 />
@@ -130,14 +127,6 @@ export default defineComponent({
 
     return { projectStore, resourceStore, userStore };
   },
-  data() {
-    return {
-      card: {
-        backgroundHoverActive: "#cccccc",
-        backgroundHoverInactive: "transparent",
-      },
-    };
-  },
 
   computed: {
     project(): ProjectObject | null {
@@ -170,25 +159,6 @@ export default defineComponent({
     user(): UserObject | null {
       return this.userStore.user;
     },
-    cardStyle() {
-      return {
-        "--coscine_card-background-color--hover":
-          this.card.backgroundHoverActive,
-      };
-    },
-    cardStyleAddResource() {
-      if (this.isEmailValid) {
-        return {
-          "--coscine_card-background-color--hover":
-            this.card.backgroundHoverActive,
-        };
-      } else {
-        return {
-          "--coscine_card-background-color--hover":
-            this.card.backgroundHoverInactive,
-        };
-      }
-    },
   },
 
   methods: {