Allowing to show properties in the gallery view

webapp/src/components/gallery/gallery.tsx

@@ -20,6 +20,7 @@ type Props = {
 const Gallery = (props: Props): JSX.Element => {
     const {boardTree} = props
     const {cards} = boardTree
+    const visiblePropertyTemplates = boardTree.board.cardProperties.filter((template) => boardTree.activeView.visiblePropertyIds.includes(template.id))
     const [cardTrees, setCardTrees] = useState<{[key: string]: CardTree | undefined}>({})
 
     useCardListener(
@@ -56,6 +57,7 @@ const Gallery = (props: Props): JSX.Element => {
                             key={card.id + card.updateAt}
                             cardTree={cardTree}
                             showCard={props.showCard}
+                            visiblePropertyTemplates={visiblePropertyTemplates}
                         />
                     )
                 }

webapp/src/components/gallery/galleryCard.scss

@@ -2,7 +2,6 @@
     border: 1px solid rgba(var(--body-color), 0.09);
     border-radius: var(--default-rad);
     width: 280px;
-    height: 200px;
     display: flex;
     flex-direction: column;
     margin-right: 10px;
@@ -20,11 +19,15 @@
         padding: 0 10px;
         font-size: 0.7em;
         opacity: 0.7;
+        max-height: 160px;
+        min-height: 160px;
     }
 
     .gallery-image {
         flex-grow: 1;
         overflow: hidden;
+        max-height: 160px;
+        min-height: 160px;
 
         .ImageElement {
             width: 100%;
@@ -42,4 +45,14 @@
             margin-right: 5px;
         }
     }
+
+    .gallery-props {
+        flex-grow: 0;
+        margin: 0;
+        padding: 5px 10px;
+        overflow-wrap: anywhere;
+        .octo-icon {
+            margin-right: 5px;
+        }
+    }
 }

webapp/src/components/gallery/galleryCard.tsx

@@ -3,22 +3,27 @@
 import React from 'react'
 import {FormattedMessage} from 'react-intl'
 
+import {IPropertyTemplate} from '../../blocks/board'
 import {CardTree} from '../../viewModel/cardTree'
 import {IContentBlock} from '../../blocks/contentBlock'
 
 import ImageElement from '../content/imageElement'
 import ContentElement from '../content/contentElement'
+import PropertyValueElement from '../propertyValueElement'
 
 import './galleryCard.scss'
 
 type Props = {
     cardTree: CardTree
     showCard: (cardId: string) => void
+    visiblePropertyTemplates: IPropertyTemplate[]
 }
 
 const GalleryCard = React.memo((props: Props) => {
     const {cardTree} = props
 
+    const visiblePropertyTemplates = props.visiblePropertyTemplates || []
+
     let images: IContentBlock[] = []
     images = cardTree.contents.filter((content) => content.type === 'image')
 
@@ -51,6 +56,18 @@ const GalleryCard = React.memo((props: Props) => {
                         />}
                 </div>
             </div>
+            {visiblePropertyTemplates.length > 0 &&
+                <div className='gallery-props'>
+                    {visiblePropertyTemplates.map((template) => (
+                        <PropertyValueElement
+                            key={template.id}
+                            readOnly={true}
+                            card={cardTree.card}
+                            propertyTemplate={template}
+                            emptyDisplayValue=''
+                        />
+                    ))}
+                </div>}
         </div>
     )
 })

webapp/src/components/viewHeader/viewHeader.tsx

@@ -42,7 +42,7 @@ const ViewHeader = React.memo((props: Props) => {
     const {boardTree, showView} = props
     const {board, activeView} = boardTree
 
-    const withGroupBy = activeView.type === 'board'
+    const withGroupBy = activeView.viewType === 'board'
 
     const [viewTitle, setViewTitle] = useState(activeView.title)