Unverified Commit 411237f6 authored by Alireza Heidari's avatar Alireza Heidari
Browse files

Adds highlight support to card component 

Introduces a new highlighted prop to enable visual highlighting of cards, useful for indicating selection anchors or drawing attention to specific items.

Applies a subtle box shadow when the card is highlighted to provide clear visual feedback without being intrusive.
parent 84dd7212

client/src/components/Common/GCard.vue

+11 −1
Original line number Diff line number Diff line
@@ -176,6 +176,11 @@ interface Props { 
     * @default "Last updated"

     */

    updateTimeTitle?: string;



    /** Whether this card is highlighted (for example, as a range selection anchor)

     * @default false

     */

    highlighted?: boolean;

}



const props = withDefaults(defineProps<Props>(), {
@@ -207,6 +212,7 @@ const props = withDefaults(defineProps<Props>(), { 
    updateTime: "",

    updateTimeIcon: () => faEdit,

    updateTimeTitle: "Last updated",

    highlighted: false,

});



/**
@@ -310,7 +316,7 @@ function onKeyDown(event: KeyboardEvent) { 
        <div

            :id="`g-card-content-${props.id}`"

            class="g-card-content d-flex flex-column justify-content-between h-100 p-2"

            :class="contentClass">

            :class="[{ 'g-card-highlighted': props.highlighted }, contentClass]">

            <slot>

                <div class="d-flex flex-column flex-gapy-1">

                    <div
@@ -701,6 +707,10 @@ function onKeyDown(event: KeyboardEvent) { 
        border-left: 0.25rem solid $brand-primary;

    }



    &.g-card-highlighted .g-card-content {

        box-shadow: 0 0 0 0.2rem transparentize($brand-primary, 0.75);

    }



    &.g-card-clickable {

        cursor: pointer;