Adding more fixes to the gallery view

webapp/src/components/content/imageElement.tsx

@@ -35,6 +35,7 @@ const ImageElement = React.memo((props: Props): JSX.Element|null => {
 
     return (
         <img
+            className='ImageElement'
             src={imageDataUrl}
             alt={block.title}
         />

webapp/src/components/gallery/galleryCard.scss

@@ -8,16 +8,26 @@
     margin-right: 10px;
     margin-bottom: 10px;
 
-    &.selected {
-        background-color: rgba(90, 200, 255, 0.2);
-    }
-
     &:hover {
         background-color: rgba(var(--body-color), 0.05);
     }
 
     .gallery-item {
+        background-color: rgba(var(--body-color), 0.03);
+
         flex-grow: 1;
+        overflow: hidden;
+        padding: 0 10px;
+        font-size: 0.9em;
+    }
+
+    .gallery-image {
+        flex-grow: 1;
+        overflow: hidden;
+
+        .ImageElement {
+            width: 100%;
+        }
     }
 
     .gallery-title {

webapp/src/components/gallery/galleryCard.tsx

@@ -1,47 +1,55 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-import React from 'react'
+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 {IContentBlock} from '../../blocks/contentBlock'
 
-import PropertyValueElement from '../propertyValueElement'
+import ImageElement from '../content/imageElement'
+import ContentElement from '../content/contentElement'
 
 import './galleryCard.scss'
 
 type Props = {
-    boardTree: BoardTree
     card: Card
     showCard: (cardId: string) => void
 }
 
 const GalleryCard = React.memo((props: Props) => {
-    const {boardTree, card} = props
-    const {board} = boardTree
+    const {card} = props
+    const [cardTree, setCardTree] = useState<CardTree|null>(null)
 
-    // const images = card.contents.filter((content) => content.type == 'image')
-    const images = []
+    useEffect(() => {
+        const f = async () => setCardTree(await MutableCardTree.sync(card.id))
+        f()
+    }, [])
+
+    let images: IContentBlock[] = []
+    if (cardTree) {
+        images = cardTree.contents.filter((content) => content.type === 'image')
+    }
 
     return (
         <div
             className='GalleryCard'
             onClick={() => props.showCard(props.card.id)}
         >
-            <div
-                className='gallery-item'
-            >
-                {images?.length > 0 && null }
-                {images?.length === 0 && board.cardProperties.map((template) => (
-                    <PropertyValueElement
-                        key={template.id}
-                        readOnly={true}
-                        card={card}
-                        propertyTemplate={template}
-                        emptyDisplayValue=''
-                    />
-                ))}
-            </div>
+            {images?.length > 0 &&
+                <div className='gallery-image'>
+                    <ImageElement block={images[0]}/>
+                </div>}
+            {images?.length === 0 &&
+                <div className='gallery-item'>
+                    {cardTree && images?.length === 0 && cardTree.contents.map((block) => (
+                        <ContentElement
+                            key={block.id}
+                            block={block}
+                            readonly={true}
+                        />
+                    ))}
+                </div>}
             <div className='gallery-title'>
                 { card.icon ? <div className='octo-icon'>{card.icon}</div> : undefined }
                 <div key='__title'>

webapp/src/components/sidebar/sidebarBoardItem.scss

@@ -36,6 +36,10 @@
             width: 14px;
             margin-right: 8px;
             flex-shrink: 0;
+            &.ImageIcon {
+                fill: rgba(var(--sidebar-fg), 0.3);
+                stroke: unset;
+            }
         }
 
         >.IconButton {

webapp/src/components/sidebar/sidebarBoardItem.tsx

@@ -13,6 +13,7 @@ import DisclosureTriangle from '../../widgets/icons/disclosureTriangle'
 import DuplicateIcon from '../../widgets/icons/duplicate'
 import OptionsIcon from '../../widgets/icons/options'
 import TableIcon from '../../widgets/icons/table'
+import ImageIcon from '../../widgets/icons/image'
 import Menu from '../../widgets/menu'
 import MenuWrapper from '../../widgets/menuWrapper'
 
@@ -35,6 +36,7 @@ const SidebarBoardItem = React.memo((props: Props) => {
         switch (viewType) {
         case 'board': return <BoardIcon/>
         case 'table': return <TableIcon/>
+        case 'gallery': return <ImageIcon/>
         default: return <div/>
         }
     }

webapp/src/components/viewMenu.tsx

@@ -14,6 +14,7 @@ import BoardIcon from '../widgets/icons/board'
 import DeleteIcon from '../widgets/icons/delete'
 import DuplicateIcon from '../widgets/icons/duplicate'
 import TableIcon from '../widgets/icons/table'
+import ImageIcon from '../widgets/icons/image'
 import Menu from '../widgets/menu'
 
 type Props = {
@@ -199,7 +200,7 @@ export class ViewMenu extends React.PureComponent<Props> {
                         <Menu.Text
                             id='gallery'
                             name='Gallery'
-                            icon={<TableIcon/>}
+                            icon={<ImageIcon/>}
                             onClick={this.handleAddViewGallery}
                         />
                     </Menu.SubMenu>
@@ -212,6 +213,7 @@ export class ViewMenu extends React.PureComponent<Props> {
         switch (viewType) {
         case 'board': return <BoardIcon/>
         case 'table': return <TableIcon/>
+        case 'gallery': return <ImageIcon/>
         default: return <div/>
         }
     }