Docker/planka
Docker/planka
1
0
Fork 0
mirror of https://github.com/plankanban/planka.git synced 2025-07-28 01:29:44 +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 196121bd38
commit ff95a12578
312 changed files with 4295 additions and 2989 deletions
Download patch file Download diff file Expand all files Collapse all files

17
client/src/components/Project/ActionsPopup/ActionsPopup.jsx
View file

@ -10,7 +10,7 @@ import EditNameStep from './EditNameStep';
import EditBackgroundStep from './EditBackgroundStep';
import DeleteStep from '../../DeleteStep';
import styles from './ActionsPopup.module.css';
import styles from './ActionsPopup.module.scss';
const StepTypes = {
EDIT_NAME: 'EDIT_NAME',
@ -54,11 +54,17 @@ const ActionsStep = React.memo(
);
const handleBackgroundImageDelete = useCallback(() => {
onUpdate({
background: null,
const data = {
backgroundImage: null,
});
}, [onUpdate]);
};
// TODO: move to services?
if (project.background && project.background.type === 'image') {
data.background = null;
}
onUpdate(data);
}, [project.background, onUpdate]);
if (step) {
if (step) {
@ -76,6 +82,7 @@ const ActionsStep = React.memo(
return (
<EditBackgroundStep
defaultValue={project.background}
imageCoverUrl={project.backgroundImage && project.backgroundImage.coverUrl}
isImageUpdating={project.isBackgroundImageUpdating}
onUpdate={handleBackgroundUpdate}
onImageUpdate={onBackgroundImageUpdate}

9
client/src/components/Project/ActionsPopup/ActionsPopup.module.css
View file

@ -1,9 +0,0 @@
.menu {
margin: -7px -12px -5px !important;
width: calc(100% + 24px) !important;
}
.menuItem {
margin: 0 !important;
padding-left: 14px !important;
}

11
client/src/components/Project/ActionsPopup/ActionsPopup.module.scss Normal file
View file

@ -0,0 +1,11 @@
:global(#app) {
.menu {
margin: -7px -12px -5px;
width: calc(100% + 24px);
}
.menuItem {
margin: 0;
padding-left: 14px;
}
}

126
client/src/components/Project/ActionsPopup/EditBackgroundStep.jsx
View file

@ -1,17 +1,59 @@
import dequal from 'dequal';
import upperFirst from 'lodash/upperFirst';
import camelCase from 'lodash/camelCase';
import React, { useCallback, useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { useTranslation } from 'react-i18next';
import { Button } from 'semantic-ui-react';
import { Button, Image } from 'semantic-ui-react';
import { FilePicker, Popup } from '../../../lib/custom-ui';
import styles from './EditBackgroundStep.module.css';
import ProjectBackgroundGradients from '../../../constants/ProjectBackgroundGradients';
import styles from './EditBackgroundStep.module.scss';
import globalStyles from '../../../styles.module.scss';
const EditBackgroundStep = React.memo(
({ defaultValue, isImageUpdating, onImageUpdate, onImageDelete, onBack }) => {
({
defaultValue,
imageCoverUrl,
isImageUpdating,
onUpdate,
onImageUpdate,
onImageDelete,
onBack,
}) => {
const [t] = useTranslation();
const field = useRef(null);
const handleGradientClick = useCallback(
(_, { value }) => {
const background = {
type: 'gradient',
name: value,
};
if (!dequal(background, defaultValue)) {
onUpdate({
type: 'gradient',
name: value,
});
}
},
[defaultValue, onUpdate],
);
const handleImageClick = useCallback(() => {
const background = {
type: 'image',
};
if (!dequal(background, defaultValue)) {
onUpdate(background);
}
}, [defaultValue, onUpdate]);
const handleFileSelect = useCallback(
(file) => {
onImageUpdate({
@ -21,6 +63,14 @@ const EditBackgroundStep = React.memo(
[onImageUpdate],
);
const handleDeleteImageClick = useCallback(() => {
onImageDelete();
}, [onImageDelete]);
const handleRemoveClick = useCallback(() => {
onUpdate(null);
}, [onUpdate]);
useEffect(() => {
field.current.focus();
}, []);
@ -33,24 +83,76 @@ const EditBackgroundStep = React.memo(
})}
</Popup.Header>
<Popup.Content>
<div className={styles.gradientButtons}>
{ProjectBackgroundGradients.map((gradient) => (
<Button
key={gradient}
type="button"
name="gradient"
value={gradient}
className={classNames(
styles.gradientButton,
defaultValue &&
defaultValue.type === 'gradient' &&
gradient === defaultValue.name &&
styles.gradientButtonActive,
globalStyles[`background${upperFirst(camelCase(gradient))}`],
)}
onClick={handleGradientClick}
/>
))}
</div>
{imageCoverUrl && (
/* TODO: wrap in button */
<Image
src={imageCoverUrl}
label={
defaultValue &&
defaultValue.type === 'image' && {
corner: 'left',
size: 'small',
icon: {
name: 'star',
color: 'grey',
inverted: true,
},
className: styles.imageLabel,
}
}
className={styles.image}
onClick={handleImageClick}
/>
)}
<div className={styles.action}>
<FilePicker accept="image/*" onSelect={handleFileSelect}>
<Button
ref={field}
content={t('action.uploadNewBackground')}
content={t('action.uploadNewImage')}
loading={isImageUpdating}
disabled={isImageUpdating}
className={styles.actionButton}
/>
</FilePicker>
</div>
{imageCoverUrl && (
<div className={styles.action}>
<Button
content={t('action.deleteImage')}
disabled={isImageUpdating}
className={styles.actionButton}
onClick={handleDeleteImageClick}
/>
</div>
)}
{defaultValue && (
<Button
negative
content={t('action.deleteBackground')}
disabled={isImageUpdating}
onClick={onImageDelete}
/>
<div className={styles.action}>
<Button
content={t('action.removeBackground')}
disabled={isImageUpdating}
className={styles.actionButton}
onClick={handleRemoveClick}
/>
</div>
)}
</Popup.Content>
</>
@ -60,8 +162,9 @@ const EditBackgroundStep = React.memo(
EditBackgroundStep.propTypes = {
defaultValue: PropTypes.object, // eslint-disable-line react/forbid-prop-types
imageCoverUrl: PropTypes.string,
isImageUpdating: PropTypes.bool.isRequired,
// onUpdate: PropTypes.func.isRequired,
onUpdate: PropTypes.func.isRequired,
onImageUpdate: PropTypes.func.isRequired,
onImageDelete: PropTypes.func.isRequired,
onBack: PropTypes.func.isRequired,
@ -69,6 +172,7 @@ EditBackgroundStep.propTypes = {
EditBackgroundStep.defaultProps = {
defaultValue: undefined,
imageCoverUrl: undefined,
};
export default EditBackgroundStep;

25
client/src/components/Project/ActionsPopup/EditBackgroundStep.module.css
View file

@ -1,25 +0,0 @@
.action {
border: none;
display: inline-block;
height: 36px;
overflow: hidden;
position: relative;
transition: background 0.3s ease;
width: 100%;
}
.action:hover {
background: #e9e9e9 !important;
}
.actionButton {
background: transparent !important;
color: #6b808c !important;
font-weight: normal !important;
height: 36px;
line-height: 24px !important;
padding: 6px 12px !important;
text-align: left !important;
text-decoration: underline !important;
width: 100%;
}

74
client/src/components/Project/ActionsPopup/EditBackgroundStep.module.scss Normal file
View file

@ -0,0 +1,74 @@
:global(#app) {
.action {
border: none;
display: inline-block;
height: 36px;
overflow: hidden;
position: relative;
transition: background 0.3s ease;
width: 100%;
&:hover {
background: #e9e9e9;
}
}
.actionButton {
background: transparent;
color: #6b808c;
font-weight: normal;
height: 36px;
line-height: 24px;
padding: 6px 12px;
text-align: left;
text-decoration: underline;
width: 100%;
}
.gradientButton {
float: left;
height: 40px;
margin: 4px;
padding: 0;
position: relative;
width: 49.6px;
&:hover {
opacity: 0.9;
}
}
.gradientButtonActive: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;
}
.gradientButtons {
margin: -4px;
padding-bottom: 8px;
&:after {
content: "";
display: table;
clear: both;
}
}
.image {
cursor: pointer;
margin-bottom: 8px;
}
.imageLabel {
border-color: rgba(29, 46, 63, 0.8);
}
}

2
client/src/components/Project/ActionsPopup/EditNameStep.jsx
View file

@ -6,7 +6,7 @@ import { Input, Popup } from '../../../lib/custom-ui';
import { useField } from '../../../hooks';
import styles from './EditNameStep.module.css';
import styles from './EditNameStep.module.scss';
const EditNameStep = React.memo(({ defaultValue, onUpdate, onBack, onClose }) => {
const [t] = useTranslation();

10
client/src/components/Project/ActionsPopup/EditNameStep.module.css
View file

@ -1,10 +0,0 @@
.field {
margin-bottom: 8px;
}
.text {
color: #444444;
font-size: 12px;
font-weight: bold;
padding-bottom: 6px;
}

12
client/src/components/Project/ActionsPopup/EditNameStep.module.scss Normal file
View file

@ -0,0 +1,12 @@
:global(#app) {
.field {
margin-bottom: 8px;
}
.text {
color: #444444;
font-size: 12px;
font-weight: bold;
padding-bottom: 6px;
}
}