From d573f97fe6ff39cbe315036e657d00f0759a7806 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Espino?= Date: Tue, 30 Mar 2021 18:57:55 +0200 Subject: [PATCH] Moving the label concept into its own component --- webapp/src/components/kanban/kanban.scss | 6 +++ .../components/kanban/kanbanColumnHeader.tsx | 37 ++++++++++--------- .../kanban/kanbanHiddenColumnItem.tsx | 7 ++-- .../src/components/propertyValueElement.tsx | 10 ++--- webapp/src/components/table/table.scss | 2 +- webapp/src/components/table/table.tsx | 14 +++---- webapp/src/styles/main.scss | 13 ------- webapp/src/widgets/label.scss | 12 ++++++ webapp/src/widgets/label.tsx | 25 +++++++++++++ webapp/src/widgets/valueSelector.scss | 4 +- webapp/src/widgets/valueSelector.tsx | 11 +++--- 11 files changed, 85 insertions(+), 56 deletions(-) create mode 100644 webapp/src/widgets/label.scss create mode 100644 webapp/src/widgets/label.tsx diff --git a/webapp/src/components/kanban/kanban.scss b/webapp/src/components/kanban/kanban.scss index fad242891..89094b023 100644 --- a/webapp/src/components/kanban/kanban.scss +++ b/webapp/src/components/kanban/kanban.scss @@ -35,6 +35,12 @@ background-color: rgba(var(--body-color), 0.1); } } + + .Label{ + .Editable { + background: transparent; + } + } } diff --git a/webapp/src/components/kanban/kanbanColumnHeader.tsx b/webapp/src/components/kanban/kanbanColumnHeader.tsx index 503dbb1eb..11354434b 100644 --- a/webapp/src/components/kanban/kanbanColumnHeader.tsx +++ b/webapp/src/components/kanban/kanbanColumnHeader.tsx @@ -17,6 +17,7 @@ import OptionsIcon from '../../widgets/icons/options' import Menu from '../../widgets/menu' import MenuWrapper from '../../widgets/menuWrapper' import Editable from '../../widgets/editable' +import Label from '../../widgets/label' type Props = { boardTree: BoardTree @@ -72,8 +73,7 @@ export default function KanbanColumnHeader(props: Props): JSX.Element { }} > {!group.option.id && -
-
} + } {group.option.id && - { - if (groupTitle.trim() === '') { + }
{!props.readonly && diff --git a/webapp/src/components/kanban/kanbanHiddenColumnItem.tsx b/webapp/src/components/kanban/kanbanHiddenColumnItem.tsx index d549233f5..cfe1926bc 100644 --- a/webapp/src/components/kanban/kanbanHiddenColumnItem.tsx +++ b/webapp/src/components/kanban/kanbanHiddenColumnItem.tsx @@ -11,6 +11,7 @@ import Button from '../../widgets/buttons/button' import Menu from '../../widgets/menu' import MenuWrapper from '../../widgets/menuWrapper' import ShowIcon from '../../widgets/icons/show' +import Label from '../../widgets/label' type Props = { boardTree: BoardTree @@ -60,12 +61,12 @@ export default function KanbanHiddenColumnItem(props: Props): JSX.Element { -
{group.option.value} -
+ { propertyColorCssClassName = cardPropertyValue.color } - let className = 'octo-propertyvalue octo-label' - if (!displayValue) { - className += ' empty' - } - if (readOnly || !boardTree) { return (
- {finalDisplayValue} +
) } diff --git a/webapp/src/components/table/table.scss b/webapp/src/components/table/table.scss index 545df26c9..bad0d2a5c 100644 --- a/webapp/src/components/table/table.scss +++ b/webapp/src/components/table/table.scss @@ -94,7 +94,7 @@ overflow: hidden; } - .octo-label { + .Label { color: rgba(var(--body-color), 0.6); } } diff --git a/webapp/src/components/table/table.tsx b/webapp/src/components/table/table.tsx index 60555b09d..a244cf909 100644 --- a/webapp/src/components/table/table.tsx +++ b/webapp/src/components/table/table.tsx @@ -13,6 +13,7 @@ import {BoardTree} from '../../viewModel/boardTree' import SortDownIcon from '../../widgets/icons/sortDown' import SortUpIcon from '../../widgets/icons/sortUp' import MenuWrapper from '../../widgets/menuWrapper' +import Label from '../../widgets/label' import {HorizontalGrip} from '../horizontalGrip' @@ -69,15 +70,13 @@ class Table extends React.Component { style={{overflow: 'unset', width: this.columnWidth(Constants.titleColumnId)}} > -
+
+ { disabled={this.props.readonly} >
{ this.draggedHeaderTemplate = template @@ -166,8 +164,10 @@ class Table extends React.Component { this.draggedHeaderTemplate = undefined }} > - {template.name} - {sortIcon} +
+ {props.children} + + ) +} + +export default React.memo(Label) diff --git a/webapp/src/widgets/valueSelector.scss b/webapp/src/widgets/valueSelector.scss index c5cd7a77b..62c777ea9 100644 --- a/webapp/src/widgets/valueSelector.scss +++ b/webapp/src/widgets/valueSelector.scss @@ -7,7 +7,7 @@ background-color: rgba(var(--body-color), 0.1), } - > .octo-label { + > .Label { margin: 0 10px; &.empty { color: rgba(var(--body-color), 0.6); @@ -17,7 +17,7 @@ .value-menu-option { display: flex; width: 100%; - .octo-label-container { + .label-container { flex-grow: 1; } .MenuWrapper { diff --git a/webapp/src/widgets/valueSelector.tsx b/webapp/src/widgets/valueSelector.tsx index d64586e59..4bfb7c070 100644 --- a/webapp/src/widgets/valueSelector.tsx +++ b/webapp/src/widgets/valueSelector.tsx @@ -14,6 +14,7 @@ import MenuWrapper from './menuWrapper' import IconButton from './buttons/iconButton' import OptionsIcon from './icons/options' import DeleteIcon from './icons/delete' +import Label from './label' import './valueSelector.scss' @@ -39,12 +40,12 @@ type LabelProps = { const ValueSelectorLabel = React.memo((props: LabelProps): JSX.Element => { const {option, meta} = props if (meta.context === 'value') { - return {option.value} + return } return (
-
-
{option.value}
+
+
}/> @@ -79,9 +80,9 @@ function ValueSelector(props: Props): JSX.Element { className='ValueSelector' onClick={() => setActivated(true)} > - + +
) }