Allowing to show properties in the gallery view
This commit is contained in:
parent
0890698280
commit
1b0613844b
|
@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
})
|
||||
|
|
|
@ -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)
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user