self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2024-11-27 08:31:20 +02:00
Code Issues Releases Activity

Added edit color and text options

Browse Source
This commit is contained in:
Harshil Sharma 2023-01-20 19:15:43 +05:30
parent 9f5db533ac
commit a7b94e345e
2 changed files with 40 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
webapp/src/components/standardProperties/statusProperty/editStatusDialog.scss
View File

@ -65,6 +65,8 @@
.Label {
width: max-content;
margin-top: 0;
margin-right: auto;
max-width: 150px;
span {
overflow: hidden;
@ -75,20 +77,51 @@
.categorySwimlane_Value {
display: flex;
cursor: pointer;
padding-top: 4px;
padding-bottom: 4px;
padding: 4px;
.colorEditor, .EditIcon {
display: none;
}
.colorEditor {
margin-right: 4px;
margin-left: 4px;
}
.EditIcon {
width: 24px;
height: 24px;
text-align: center;
border-radius: 4px;
&:hover {
background: rgba(var(--center-channel-color-rgb), 0.1);
}
}
&:hover {
background: rgba(var(--center-channel-color-rgb), 0.1);
border-radius: 4px;
.colorEditor, .EditIcon {
display: block;
}
}
.dragHandleWrapper {
width: 24px;
height: 24px;
margin-top: 3px;
text-align: center;
}
.colorEditor {
width: 24px;
min-width: 24px;
max-width: 24px;
height: 24px;
border: 1px solid #80808052;
border-radius: 4px;
}
}
.emptyColumnPlaceholder {
@ -116,4 +149,4 @@
}
}
}
}
}

3
webapp/src/components/standardProperties/statusProperty/editStatusDialog.tsx
View File

@ -17,6 +17,7 @@ import ActionDialog from '../../actionDialog/actionDialog'
import Label from '../../../widgets/label'
import {IPropertyOption} from '../../../blocks/board'
import DragHandle from '../../../widgets/icons/dragHandle'
import EditIcon from '../../../widgets/icons/edit'
export type StatusCategoryEmptyState = {
icon: JSX.Element
@ -70,6 +71,8 @@ const EditStatusPropertyDialog = (props: Props): JSX.Element => {
>
<span>{option.value}</span>
</Label>
<div className={`colorEditor ${option.color} withBorder`}/>
<EditIcon/>
</div>
)}
</Draggable>