Improving a bit the gallery

webapp/src/components/centerPanel.tsx

@@ -159,7 +159,8 @@ class CenterPanel extends React.Component<Props, State> {
                             <Gallery
                                 boardTree={boardTree}
                                 readonly={this.props.readonly}
-                                showCard={this.showCard}
+                                onCardClicked={this.cardClicked}
+                                selectedCardIds={this.state.selectedCardIds}
                                 addCard={(show) => this.addCard('', show)}
                             />}
                     </div>
@@ -277,7 +278,7 @@ class CenterPanel extends React.Component<Props, State> {
                 }
                 this.setState({selectedCardIds})
             }
-        } else if (activeView.viewType === 'board') {
+        } else if (activeView.viewType === 'board' || activeView.viewType === 'gallery') {
             this.showCard(card.id)
         }
 

webapp/src/components/gallery/gallery.scss

@@ -8,6 +8,7 @@
         color: rgba(var(--body-color), 0.3);
         cursor: pointer;
         width: 280px;
+        min-height: 200px;
         display: flex;
         flex-direction: column;
         align-items: center;

webapp/src/components/gallery/gallery.tsx

@@ -3,6 +3,7 @@
 import React, {useState, useEffect} from 'react'
 import {FormattedMessage} from 'react-intl'
 
+import {Card} from '../../blocks/card'
 import {BoardTree} from '../../viewModel/boardTree'
 import {CardTree, MutableCardTree} from '../../viewModel/cardTree'
 import useCardListener from '../../hooks/cardListener'
@@ -13,8 +14,9 @@ import GalleryCard from './galleryCard'
 type Props = {
     boardTree: BoardTree
     readonly: boolean
-    showCard: (cardId?: string) => void
     addCard: (show: boolean) => Promise<void>
+    selectedCardIds: string[]
+    onCardClicked: (e: React.MouseEvent, card: Card) => void
 }
 
 const Gallery = (props: Props): JSX.Element => {
@@ -56,8 +58,9 @@ const Gallery = (props: Props): JSX.Element => {
                         <GalleryCard
                             key={card.id + card.updateAt}
                             cardTree={cardTree}
-                            showCard={props.showCard}
+                            onClick={props.onCardClicked}
                             visiblePropertyTemplates={visiblePropertyTemplates}
+                            isSelected={props.selectedCardIds.includes(card.id)}
                         />
                     )
                 }

webapp/src/components/gallery/galleryCard.scss

@@ -6,6 +6,11 @@
     flex-direction: column;
     margin-right: 10px;
     margin-bottom: 10px;
+    cursor: pointer;
+
+    &.selected{
+        background-color: rgba(90, 200, 255, 0.2);
+    }
 
     &:hover {
         background-color: rgba(var(--body-color), 0.05);

webapp/src/components/gallery/galleryCard.tsx

@@ -4,6 +4,7 @@ import React from 'react'
 import {FormattedMessage} from 'react-intl'
 
 import {IPropertyTemplate} from '../../blocks/board'
+import {Card} from '../../blocks/card'
 import {CardTree} from '../../viewModel/cardTree'
 import {IContentBlock} from '../../blocks/contentBlock'
 
@@ -15,8 +16,9 @@ import './galleryCard.scss'
 
 type Props = {
     cardTree: CardTree
-    showCard: (cardId: string) => void
+    onClick: (e: React.MouseEvent, card: Card) => void
     visiblePropertyTemplates: IPropertyTemplate[]
+    isSelected: boolean
 }
 
 const GalleryCard = React.memo((props: Props) => {
@@ -29,8 +31,8 @@ const GalleryCard = React.memo((props: Props) => {
 
     return (
         <div
-            className='GalleryCard'
-            onClick={() => props.showCard(cardTree.card.id)}
+            className={`GalleryCard ${props.isSelected ? 'selected' : ''}`}
+            onClick={(e: React.MouseEvent) => props.onClick(e, cardTree.card)}
         >
             {images?.length > 0 &&
                 <div className='gallery-image'>