Docker/planka
Docker/planka
1
0
Fork 0
mirror of https://github.com/plankanban/planka.git synced 2025-08-09 23:45:31 +02:00
Code Issues Releases Activity

Merge pull request #2 from HS-KunioOkita/feature/expired_dudate

Browse source 
Feature/expired dudate
This commit is contained in:
Kunio Okita 2023-03-25 21:01:38 +09:00 • committed by GitHub
commit eb0ec5c044
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 26 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

4
client/src/components/Card/Card.jsx
View file

@ -86,6 +86,8 @@ const Card = React.memo(
const ActionsPopup = usePopup(ActionsStep); const ActionsPopup = usePopup(ActionsStep);
const isExpiredDueDate = dueDate && dueDate.getTime() < new Date().getTime();
const contentNode = ( const contentNode = (
<> <>
{coverUrl && <img src={coverUrl} alt="" className={styles.cover} />} {coverUrl && <img src={coverUrl} alt="" className={styles.cover} />}
@ -119,7 +121,7 @@ const Card = React.memo(
)} )}
{dueDate && ( {dueDate && (
<span className={classNames(styles.attachment, styles.attachmentLeft)}> <span className={classNames(styles.attachment, styles.attachmentLeft)}>
<DueDate value={dueDate} size="tiny" /> <DueDate value={dueDate} size="tiny" isExpired={isExpiredDueDate} />
</span> </span>
)} )}
{stopwatch && ( {stopwatch && (

6
client/src/components/CardModal/CardModal.jsx
View file

@ -167,6 +167,8 @@ const CardModal = React.memo(
const userIds = users.map((user) => user.id); const userIds = users.map((user) => user.id);
const labelIds = labels.map((label) => label.id); const labelIds = labels.map((label) => label.id);
const isExpiredDueDate = dueDate && dueDate.getTime() < new Date().getTime();
const contentNode = ( const contentNode = (
<Grid className={styles.grid}> <Grid className={styles.grid}>
<Grid.Row className={styles.headerPadding}> <Grid.Row className={styles.headerPadding}>
@ -286,10 +288,10 @@ const CardModal = React.memo(
<span className={styles.attachment}> <span className={styles.attachment}>
{canEdit ? ( {canEdit ? (
<DueDateEditPopup defaultValue={dueDate} onUpdate={handleDueDateUpdate}> <DueDateEditPopup defaultValue={dueDate} onUpdate={handleDueDateUpdate}>
<DueDate value={dueDate} /> <DueDate value={dueDate} isExpired={isExpiredDueDate} />
</DueDateEditPopup> </DueDateEditPopup>
) : ( ) : (
<DueDate value={dueDate} /> <DueDate value={dueDate} isExpired={isExpiredDueDate} />
)} )}
</span> </span>
</div> </div>

8
client/src/components/DueDate/DueDate.jsx
View file

@ -18,13 +18,15 @@ const FORMATS = {
medium: 'longDateTime', medium: 'longDateTime',
}; };
const DueDate = React.memo(({ value, size, isDisabled, onClick }) => { const DueDate = React.memo(({ value, size, isDisabled, onClick, isExpired }) => {
const [t] = useTranslation(); const [t] = useTranslation();
const wrapperClass = isExpired ? styles.wrapperExpired : styles.wrapper;
const contentNode = ( const contentNode = (
<span <span
className={classNames( className={classNames(
styles.wrapper, wrapperClass,
styles[`wrapper${upperFirst(size)}`], styles[`wrapper${upperFirst(size)}`],
onClick && styles.wrapperHoverable, onClick && styles.wrapperHoverable,
)} )}
@ -50,12 +52,14 @@ DueDate.propTypes = {
size: PropTypes.oneOf(Object.values(SIZES)), size: PropTypes.oneOf(Object.values(SIZES)),
isDisabled: PropTypes.bool, isDisabled: PropTypes.bool,
onClick: PropTypes.func, onClick: PropTypes.func,
isExpired: PropTypes.bool,
}; };
DueDate.defaultProps = { DueDate.defaultProps = {
size: SIZES.MEDIUM, size: SIZES.MEDIUM,
isDisabled: false, isDisabled: false,
onClick: undefined, onClick: undefined,
isExpired: false,
}; };
export default DueDate; export default DueDate;

13
client/src/components/DueDate/DueDate.module.scss
View file

@ -20,6 +20,18 @@
vertical-align: top; vertical-align: top;
} }
.wrapperExpired {
background: red;
border: none;
border-radius: 3px;
color: #ffffff;
display: inline-block;
outline: none;
text-align: left;
transition: background 0.3s ease;
vertical-align: top;
}
.wrapperHoverable:hover { .wrapperHoverable:hover {
background: #d2d8dc; background: #d2d8dc;
color: #17394d; color: #17394d;
@ -43,4 +55,5 @@
line-height: 20px; line-height: 20px;
padding: 6px 12px; padding: 6px 12px;
} }
} }