diff --git a/src/components/coscine/CoscineCard.vue b/src/components/coscine/CoscineCard.vue index e904aefb12217207b3e6ba834da02e549b05e2a7..f86cf39174c35d6c32b48dccfcaccc534cadcbf3 100644 --- a/src/components/coscine/CoscineCard.vue +++ b/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() { - this.$emit("open-card", this.to); + if (!this.disabled) { + this.$emit("open-card", this.to); + } }, - settingsCard() { - this.$emit("open-card-settings", this.toSettings); + 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; diff --git a/src/modules/project/pages/ProjectPage.vue b/src/modules/project/pages/ProjectPage.vue index fe5e8c86a159056d2561b92b2ba65dc6cdef6734..d0ea4d4d4a510fceb1292c331736ef234028f541 100644 --- a/src/modules/project/pages/ProjectPage.vue +++ b/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: {