From 8af37617eeb529b2608ca15f2db8cd67dd5b8e72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Espino?= <jespinog@gmail.com>
Date: Wed, 31 Mar 2021 13:39:12 +0200
Subject: [PATCH] Improving a bit the gallery

---
 webapp/src/components/centerPanel.tsx          | 5 +++--
 webapp/src/components/gallery/gallery.scss     | 1 +
 webapp/src/components/gallery/gallery.tsx      | 7 +++++--
 webapp/src/components/gallery/galleryCard.scss | 5 +++++
 webapp/src/components/gallery/galleryCard.tsx  | 8 +++++---
 5 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/webapp/src/components/centerPanel.tsx b/webapp/src/components/centerPanel.tsx
index ed6e9f806..6eaf108ef 100644
--- a/webapp/src/components/centerPanel.tsx
+++ b/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)
         }
 
diff --git a/webapp/src/components/gallery/gallery.scss b/webapp/src/components/gallery/gallery.scss
index 73a9c3b1d..7ba76a29f 100644
--- a/webapp/src/components/gallery/gallery.scss
+++ b/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;
diff --git a/webapp/src/components/gallery/gallery.tsx b/webapp/src/components/gallery/gallery.tsx
index f9ada8e84..c1bc9a61b 100644
--- a/webapp/src/components/gallery/gallery.tsx
+++ b/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)}
                         />
                     )
                 }
diff --git a/webapp/src/components/gallery/galleryCard.scss b/webapp/src/components/gallery/galleryCard.scss
index 47100d41e..4b618f40b 100644
--- a/webapp/src/components/gallery/galleryCard.scss
+++ b/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);
diff --git a/webapp/src/components/gallery/galleryCard.tsx b/webapp/src/components/gallery/galleryCard.tsx
index c9d31afb9..3663cfc50 100644
--- a/webapp/src/components/gallery/galleryCard.tsx
+++ b/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'>