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

Background gradients, migrate from CSS to SCSS, remove !important

Browse source
This commit is contained in:
Maksim Eltyshev 2020-05-29 19:31:19 +05:00
parent 8534ed292c
commit 5bfff3865f
312 changed files with 4295 additions and 2989 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -8,14 +8,14 @@ import { useForm } from '../../hooks';
import LabelColors from '../../constants/LabelColors';
import Editor from './Editor';
import styles from './AddStep.module.css';
import styles from './AddStep.module.scss';
const AddStep = React.memo(({ onCreate, onBack }) => {
const [t] = useTranslation();
const [data, handleFieldChange] = useForm(() => ({
name: '',
color: LabelColors.KEYS[0],
color: LabelColors[0],
}));
const handleSubmit = useCallback(() => {

3
client/src/components/LabelsStep/AddStep.module.css
View file

@ -1,3 +0,0 @@
.submitButton {
margin-top: 12px;
}

5
client/src/components/LabelsStep/AddStep.module.scss Normal file
View file

@ -0,0 +1,5 @@
:global(#app) {
.submitButton {
margin-top: 12px;
}
}

4
client/src/components/LabelsStep/EditStep.jsx
View file

@ -10,7 +10,7 @@ import LabelColors from '../../constants/LabelColors';
import Editor from './Editor';
import DeleteStep from '../DeleteStep';
import styles from './EditStep.module.css';
import styles from './EditStep.module.scss';
const StepTypes = {
DELETE: 'DELETE',
@ -20,7 +20,7 @@ const EditStep = React.memo(({ defaultData, onUpdate, onDelete, onBack }) => {
const [t] = useTranslation();
const [data, handleFieldChange] = useForm(() => ({
color: LabelColors.KEYS[0],
color: LabelColors[0],
...defaultData,
name: defaultData.name || '',
}));

6
client/src/components/LabelsStep/EditStep.module.css
View file

@ -1,6 +0,0 @@
.deleteButton {
bottom: 12px;
box-shadow: 0 1px 0 #cbcccc;
position: absolute;
right: 9px;
}

8
client/src/components/LabelsStep/EditStep.module.scss Normal file
View file

@ -0,0 +1,8 @@
:global(#app) {
.deleteButton {
bottom: 12px;
box-shadow: 0 1px 0 #cbcccc;
position: absolute;
right: 9px;
}
}

17
client/src/components/LabelsStep/Editor.jsx
View file

@ -1,3 +1,5 @@
import upperFirst from 'lodash/upperFirst';
import camelCase from 'lodash/camelCase';
import React, { useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
@ -7,7 +9,8 @@ import { Input } from '../../lib/custom-ui';
import LabelColors from '../../constants/LabelColors';
import styles from './Editor.module.css';
import styles from './Editor.module.scss';
import globalStyles from '../../styles.module.scss';
const Editor = React.memo(({ data, onFieldChange }) => {
const [t] = useTranslation();
@ -31,19 +34,17 @@ const Editor = React.memo(({ data, onFieldChange }) => {
/>
<div className={styles.text}>{t('common.color')}</div>
<div className={styles.colorButtons}>
{LabelColors.PAIRS.map(([name, hex]) => (
{LabelColors.map((color) => (
<Button
key={name}
key={color}
type="button"
name="color"
value={name}
value={color}
className={classNames(
styles.colorButton,
name === data.color && styles.colorButtonActive,
color === data.color && styles.colorButtonActive,
globalStyles[`background${upperFirst(camelCase(color))}`],
)}
style={{
background: hex,
}}
onClick={onFieldChange}
/>
))}

48
client/src/components/LabelsStep/Editor.module.css
View file

@ -1,48 +0,0 @@
.colorButton {
float: left;
height: 40px;
margin: 4px !important;
padding: 0 !important;
position: relative;
width: 49.6px;
}
.colorButton:hover {
opacity: 0.9;
}
.colorButtonActive:before {
bottom: 3px;
color: #ffffff;
content: "Г";
font-size: 18px;
line-height: 36px;
position: absolute;
right: 6px;
text-align: center;
top: 0;
transform: rotate(-135deg);
width: 36px;
}
.colorButtons {
margin: -4px;
padding-bottom: 16px;
}
.colorButtons:after {
content: "";
display: table;
clear: both;
}
.field {
margin-bottom: 8px;
}
.text {
color: #444444;
font-size: 12px;
font-weight: bold;
padding-bottom: 6px;
}

50
client/src/components/LabelsStep/Editor.module.scss Normal file
View file

@ -0,0 +1,50 @@
:global(#app) {
.colorButton {
float: left;
height: 40px;
margin: 4px;
padding: 0;
position: relative;
width: 49.6px;
&:hover {
opacity: 0.9;
}
}
.colorButtonActive:before {
bottom: 3px;
color: #ffffff;
content: "Г";
font-size: 18px;
line-height: 36px;
position: absolute;
right: 6px;
text-align: center;
top: 0;
transform: rotate(-135deg);
width: 36px;
}
.colorButtons {
margin: -4px;
padding-bottom: 16px;
&:after {
content: "";
display: table;
clear: both;
}
}
.field {
margin-bottom: 8px;
}
.text {
color: #444444;
font-size: 12px;
font-weight: bold;
padding-bottom: 6px;
}
}

16
client/src/components/LabelsStep/Item.jsx
View file

@ -1,11 +1,12 @@
import upperFirst from 'lodash/upperFirst';
import camelCase from 'lodash/camelCase';
import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { Button } from 'semantic-ui-react';
import LabelColors from '../../constants/LabelColors';
import styles from './Item.module.css';
import styles from './Item.module.scss';
import globalStyles from '../../styles.module.scss';
const Item = React.memo(({ name, color, isPersisted, isActive, onSelect, onDeselect, onEdit }) => {
const handleToggleClick = useCallback(() => {
@ -23,10 +24,11 @@ const Item = React.memo(({ name, color, isPersisted, isActive, onSelect, onDesel
content={name}
active={isActive}
disabled={!isPersisted}
className={classNames(styles.labelButton, isActive && styles.labelButtonActive)}
style={{
background: LabelColors.MAP[color],
}}
className={classNames(
styles.labelButton,
isActive && styles.labelButtonActive,
globalStyles[`background${upperFirst(camelCase(color))}`],
)}
onClick={handleToggleClick}
/>
<Button

49
client/src/components/LabelsStep/Item.module.css
View file

@ -1,49 +0,0 @@
.editButton {
background: transparent !important;
box-shadow: none !important;
flex: 0 0 auto;
font-weight: normal !important;
margin: 0 !important;
padding: 8px 10px !important;
text-decoration: underline !important;
}
.editButton:hover {
background: #e9e9e9 !important;
}
.labelButton {
color: #fff !important;
flex: 1 1 auto;
font-size: 14px !important;
font-weight: bold !important;
overflow: hidden;
padding: 8px 32px 8px 10px !important;
position: relative;
text-align: left !important;
text-overflow: ellipsis;
}
.labelButton:hover {
opacity: 0.9;
}
.labelButtonActive:before {
bottom: 1px;
content: "Г";
font-size: 18px;
font-weight: normal;
line-height: 36px;
position: absolute;
right: 2px;
text-align: center;
transform: rotate(-135deg);
width: 36px;
}
.wrapper {
display: flex;
margin-bottom: 4px;
max-width: 280px;
white-space: nowrap;
}

51
client/src/components/LabelsStep/Item.module.scss Normal file
View file

@ -0,0 +1,51 @@
:global(#app) {
.editButton {
background: transparent;
box-shadow: none;
flex: 0 0 auto;
font-weight: normal;
margin: 0;
padding: 8px 10px;
text-decoration: underline;
&:hover {
background: #e9e9e9;
}
}
.labelButton {
color: #fff;
flex: 1 1 auto;
font-size: 14px;
font-weight: bold;
overflow: hidden;
padding: 8px 32px 8px 10px;
position: relative;
text-align: left;
text-overflow: ellipsis;
&:hover {
opacity: 0.9;
}
}
.labelButtonActive:before {
bottom: 1px;
content: "Г";
font-size: 18px;
font-weight: normal;
line-height: 36px;
position: absolute;
right: 2px;
text-align: center;
transform: rotate(-135deg);
width: 36px;
}
.wrapper {
display: flex;
margin-bottom: 4px;
max-width: 280px;
white-space: nowrap;
}
}

2
client/src/components/LabelsStep/LabelsStep.jsx
View file

@ -10,7 +10,7 @@ import AddStep from './AddStep';
import EditStep from './EditStep';
import Item from './Item';
import styles from './LabelsStep.module.css';
import styles from './LabelsStep.module.scss';
const StepTypes = {
ADD: 'ADD',

15
client/src/components/LabelsStep/LabelsStep.module.css
View file

@ -1,15 +0,0 @@
.addButton {
background: transparent !important;
box-shadow: none !important;
color: #6b808c !important;
font-weight: normal !important;
margin-top: 8px !important;
padding: 6px 11px !important;
text-align: left !important;
text-decoration: underline !important;
transition: background 0.3s ease !important;
}
.addButton:hover {
background: #e9e9e9 !important;
}

17
client/src/components/LabelsStep/LabelsStep.module.scss Normal file
View file

@ -0,0 +1,17 @@
:global(#app) {
.addButton {
background: transparent;
box-shadow: none;
color: #6b808c;
font-weight: normal;
margin-top: 8px;
padding: 6px 11px;
text-align: left;
text-decoration: underline;
transition: background 0.3s ease;
&:hover {
background: #e9e9e9;
}
}
}