Docker/planka
Docker/planka
1
0
Fork 0
mirror of https://github.com/plankanban/planka.git synced 2025-07-19 13:19:44 +02:00
Code Issues Releases Activity

fix: Responsive label color selector, improve action button styles (#1184)

Browse source
This commit is contained in:
Symon Baikov 2025-06-07 14:44:45 +03:00 • committed by GitHub
parent 1a8dcd9858
commit 8bc1569242
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 44 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

4
client/src/components/labels/LabelsStep/AddStep.jsx
View file

@ -15,8 +15,6 @@ import { useForm } from '../../../hooks';
import LABEL_COLORS from '../../../constants/LabelColors';
import Editor from './Editor';
import styles from './AddStep.module.scss';
const AddStep = React.memo(({ cardId, defaultData, onBack }) => {
const dispatch = useDispatch();
const [t] = useTranslation();
@ -52,7 +50,7 @@ const AddStep = React.memo(({ cardId, defaultData, onBack }) => {
<Popup.Content>
<Form onSubmit={handleSubmit}>
<Editor data={data} onFieldChange={handleFieldChange} />
<Button positive content={t('action.createLabel')} className={styles.submitButton} />
<Button positive content={t('action.createLabel')} />
</Form>
</Popup.Content>
</>

10
client/src/components/labels/LabelsStep/AddStep.module.scss
View file

@ -1,10 +0,0 @@
/*!
* Copyright (c) 2024 PLANKA Software GmbH
* Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
*/
:global(#app) {
.submitButton {
margin-top: 12px;
}
}

15
client/src/components/labels/LabelsStep/EditStep.jsx
View file

@ -91,13 +91,16 @@ const EditStep = React.memo(({ labelId, onBack }) => {
<Popup.Content>
<Form onSubmit={handleSubmit}>
<Editor data={data} onFieldChange={handleFieldChange} />
<Button positive content={t('action.save')} className={styles.submitButton} />
<div className={styles.actions}>
<Button positive content={t('action.save')} />
<Button
type="button"
content={t('action.delete')}
className={styles.deleteButton}
onClick={handleDeleteClick}
/>
</div>
</Form>
<Button
content={t('action.delete')}
className={styles.deleteButton}
onClick={handleDeleteClick}
/>
</Popup.Content>
</>
);

14
client/src/components/labels/LabelsStep/EditStep.module.scss
View file

@ -4,14 +4,14 @@
*/
:global(#app) {
.deleteButton {
bottom: 12px;
box-shadow: 0 1px 0 #cbcccc;
position: absolute;
right: 9px;
.actions {
align-items: center;
display: flex;
gap: 12px;
justify-content: space-between;
}
.submitButton {
margin-top: 12px;
.deleteButton {
box-shadow: 0 1px 0 #cbcccc;
}
}

41
client/src/components/labels/LabelsStep/Editor.module.scss
View file

@ -5,12 +5,8 @@
:global(#app) {
.colorButton {
float: left;
height: 30px;
margin: 3px;
padding: 0;
margin: 0;
position: relative;
width: 41.6px;
&:hover {
opacity: 0.9;
@ -18,28 +14,43 @@
}
.colorButtonActive:before {
bottom: 1px;
color: #ffffff;
content: "Г";
font-size: 16px;
line-height: 32px;
position: absolute;
right: 4px;
right: calc(50% - 5px);
text-align: center;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
top: 0;
top: calc(50% - 17px);
transform: rotate(-135deg);
width: 32px;
}
.colorButtons {
margin: -3px;
padding-bottom: 16px;
display: grid;
gap: 6px;
grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
margin-bottom: 12px;
max-height: 60vh;
overflow-y: auto;
&:after {
clear: both;
content: "";
display: table;
@supports (-moz-appearance: none) {
scrollbar-color: rgba(0, 0, 0, 0.32) transparent;
scrollbar-width: thin;
}
&::-webkit-scrollbar {
width: 9px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background-clip: padding-box;
border-left: 0.25em transparent solid;
border-radius: 3px;
}
}