mirror of
https://github.com/plankanban/planka.git
synced 2025-08-09 07:25:24 +02:00
Merge branch 'master' into new-features/context-menu
This commit is contained in:
Rafly Maulana
commit
ad78fc5e23
11 changed files with 269 additions and 83 deletions
141
client/package-lock.json
generated
141
client/package-lock.json
generated
|
|
@ -11,6 +11,7 @@
|
|||
"connected-react-router": "^6.9.3",
|
||||
"date-fns": "^2.29.1",
|
||||
"dequal": "^2.0.3",
|
||||
"easymde": "^2.18.0",
|
||||
"history": "^4.10.1",
|
||||
"i18next": "^21.8.14",
|
||||
"i18next-browser-languagedetector": "^6.1.4",
|
||||
|
|
@ -33,6 +34,7 @@
|
|||
"react-redux": "^7.2.8",
|
||||
"react-router-dom": "^5.3.1",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-simplemde-editor": "^5.2.0",
|
||||
"react-textarea-autosize": "^8.3.4",
|
||||
"redux": "^4.2.0",
|
||||
"redux-logger": "^3.0.6",
|
||||
|
|
@ -3695,6 +3697,14 @@
|
|||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/codemirror": {
|
||||
"version": "5.60.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-5.60.5.tgz",
|
||||
"integrity": "sha512-TiECZmm8St5YxjFUp64LK0c8WU5bxMDt9YaAek1UqUb9swrSCoJhh92fWu1p3mTEqlHjhB5sY7OFBhWroJXZVg==",
|
||||
"dependencies": {
|
||||
"@types/tern": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/connect": {
|
||||
"version": "3.4.35",
|
||||
"resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
|
||||
|
|
@ -3833,6 +3843,11 @@
|
|||
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
|
||||
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
|
||||
},
|
||||
"node_modules/@types/marked": {
|
||||
"version": "4.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/marked/-/marked-4.0.7.tgz",
|
||||
"integrity": "sha512-eEAhnz21CwvKVW+YvRvcTuFKNU9CV1qH+opcgVK3pIMI6YZzDm6gc8o2vHjldFk6MGKt5pueSB7IOpvpx5Qekw=="
|
||||
},
|
||||
"node_modules/@types/mdast": {
|
||||
"version": "3.0.10",
|
||||
"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.10.tgz",
|
||||
|
|
@ -3970,6 +3985,14 @@
|
|||
"resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
|
||||
"integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
|
||||
},
|
||||
"node_modules/@types/tern": {
|
||||
"version": "0.23.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/tern/-/tern-0.23.4.tgz",
|
||||
"integrity": "sha512-JAUw1iXGO1qaWwEOzxTKJZ/5JxVeON9kvGZ/osgZaJImBnyjyn0cjovPsf6FNLmyGY8Vw9DoXZCMlfMkMwHRWg==",
|
||||
"dependencies": {
|
||||
"@types/estree": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/trusted-types": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
|
||||
|
|
@ -6172,6 +6195,19 @@
|
|||
"node": ">= 4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/codemirror": {
|
||||
"version": "5.65.9",
|
||||
"resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.9.tgz",
|
||||
"integrity": "sha512-19Jox5sAKpusTDgqgKB5dawPpQcY+ipQK7xoEI+MVucEF9qqFaXpeqY1KaoyGBso/wHQoDa4HMMxMjdsS3Zzzw=="
|
||||
},
|
||||
"node_modules/codemirror-spell-checker": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/codemirror-spell-checker/-/codemirror-spell-checker-1.1.2.tgz",
|
||||
"integrity": "sha512-2Tl6n0v+GJRsC9K3MLCdLaMOmvWL0uukajNJseorZJsslaxZyZMgENocPU8R0DyoTAiKsyqiemSOZo7kjGV0LQ==",
|
||||
"dependencies": {
|
||||
"typo-js": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/collect-v8-coverage": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
|
||||
|
|
@ -7419,6 +7455,18 @@
|
|||
"resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
|
||||
"integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
|
||||
},
|
||||
"node_modules/easymde": {
|
||||
"version": "2.18.0",
|
||||
"resolved": "https://registry.npmjs.org/easymde/-/easymde-2.18.0.tgz",
|
||||
"integrity": "sha512-IxVVUxNWIoXLeqtBU4BLc+eS/ScYhT1Dcb6yF5Wchoj1iXAV+TIIDWx+NCaZhY7RcSHqDPKllbYq7nwGKILnoA==",
|
||||
"dependencies": {
|
||||
"@types/codemirror": "^5.60.4",
|
||||
"@types/marked": "^4.0.7",
|
||||
"codemirror": "^5.63.1",
|
||||
"codemirror-spell-checker": "1.1.2",
|
||||
"marked": "^4.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ecc-jsbn": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
|
||||
|
|
@ -14763,6 +14811,17 @@
|
|||
"url": "https://github.com/sponsors/wooorm"
|
||||
}
|
||||
},
|
||||
"node_modules/marked": {
|
||||
"version": "4.2.2",
|
||||
"resolved": "https://registry.npmjs.org/marked/-/marked-4.2.2.tgz",
|
||||
"integrity": "sha512-JjBTFTAvuTgANXx82a5vzK9JLSMoV6V3LBVn4Uhdso6t7vXrGx7g1Cd2r6NYSsxrYbQGFCMqBDhFHyK5q2UvcQ==",
|
||||
"bin": {
|
||||
"marked": "bin/marked.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 12"
|
||||
}
|
||||
},
|
||||
"node_modules/mdast-util-definitions": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/mdast-util-definitions/-/mdast-util-definitions-5.1.1.tgz",
|
||||
|
|
@ -20516,6 +20575,19 @@
|
|||
"react": "^16.0.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-simplemde-editor": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-simplemde-editor/-/react-simplemde-editor-5.2.0.tgz",
|
||||
"integrity": "sha512-GkTg1MlQHVK2Rks++7sjuQr/GVS/xm6y+HchZ4GPBWrhcgLieh4CjK04GTKbsfYorSRYKa0n37rtNSJmOzEDkQ==",
|
||||
"dependencies": {
|
||||
"@types/codemirror": "~5.60.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"easymde": ">= 2.0.0 < 3.0.0",
|
||||
"react": ">=16.8.2",
|
||||
"react-dom": ">=16.8.2"
|
||||
}
|
||||
},
|
||||
"node_modules/react-test-renderer": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-17.0.2.tgz",
|
||||
|
|
@ -23873,6 +23945,11 @@
|
|||
"typescript-compare": "^0.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/typo-js": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/typo-js/-/typo-js-1.2.2.tgz",
|
||||
"integrity": "sha512-C7pYBQK17EjSg8tVNY91KHdUt5Nf6FMJ+c3js076quPmBML57PmNMzAcIq/2kf/hSYtFABNDIYNYlJRl5BJhGw=="
|
||||
},
|
||||
"node_modules/unbox-primitive": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
|
||||
|
|
@ -27814,6 +27891,14 @@
|
|||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"@types/codemirror": {
|
||||
"version": "5.60.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-5.60.5.tgz",
|
||||
"integrity": "sha512-TiECZmm8St5YxjFUp64LK0c8WU5bxMDt9YaAek1UqUb9swrSCoJhh92fWu1p3mTEqlHjhB5sY7OFBhWroJXZVg==",
|
||||
"requires": {
|
||||
"@types/tern": "*"
|
||||
}
|
||||
},
|
||||
"@types/connect": {
|
||||
"version": "3.4.35",
|
||||
"resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
|
||||
|
|
@ -27952,6 +28037,11 @@
|
|||
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
|
||||
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
|
||||
},
|
||||
"@types/marked": {
|
||||
"version": "4.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/marked/-/marked-4.0.7.tgz",
|
||||
"integrity": "sha512-eEAhnz21CwvKVW+YvRvcTuFKNU9CV1qH+opcgVK3pIMI6YZzDm6gc8o2vHjldFk6MGKt5pueSB7IOpvpx5Qekw=="
|
||||
},
|
||||
"@types/mdast": {
|
||||
"version": "3.0.10",
|
||||
"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.10.tgz",
|
||||
|
|
@ -28089,6 +28179,14 @@
|
|||
"resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
|
||||
"integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
|
||||
},
|
||||
"@types/tern": {
|
||||
"version": "0.23.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/tern/-/tern-0.23.4.tgz",
|
||||
"integrity": "sha512-JAUw1iXGO1qaWwEOzxTKJZ/5JxVeON9kvGZ/osgZaJImBnyjyn0cjovPsf6FNLmyGY8Vw9DoXZCMlfMkMwHRWg==",
|
||||
"requires": {
|
||||
"@types/estree": "*"
|
||||
}
|
||||
},
|
||||
"@types/trusted-types": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
|
||||
|
|
@ -29733,6 +29831,19 @@
|
|||
"q": "^1.1.2"
|
||||
}
|
||||
},
|
||||
"codemirror": {
|
||||
"version": "5.65.9",
|
||||
"resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.9.tgz",
|
||||
"integrity": "sha512-19Jox5sAKpusTDgqgKB5dawPpQcY+ipQK7xoEI+MVucEF9qqFaXpeqY1KaoyGBso/wHQoDa4HMMxMjdsS3Zzzw=="
|
||||
},
|
||||
"codemirror-spell-checker": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/codemirror-spell-checker/-/codemirror-spell-checker-1.1.2.tgz",
|
||||
"integrity": "sha512-2Tl6n0v+GJRsC9K3MLCdLaMOmvWL0uukajNJseorZJsslaxZyZMgENocPU8R0DyoTAiKsyqiemSOZo7kjGV0LQ==",
|
||||
"requires": {
|
||||
"typo-js": "*"
|
||||
}
|
||||
},
|
||||
"collect-v8-coverage": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
|
||||
|
|
@ -30645,6 +30756,18 @@
|
|||
"resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
|
||||
"integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
|
||||
},
|
||||
"easymde": {
|
||||
"version": "2.18.0",
|
||||
"resolved": "https://registry.npmjs.org/easymde/-/easymde-2.18.0.tgz",
|
||||
"integrity": "sha512-IxVVUxNWIoXLeqtBU4BLc+eS/ScYhT1Dcb6yF5Wchoj1iXAV+TIIDWx+NCaZhY7RcSHqDPKllbYq7nwGKILnoA==",
|
||||
"requires": {
|
||||
"@types/codemirror": "^5.60.4",
|
||||
"@types/marked": "^4.0.7",
|
||||
"codemirror": "^5.63.1",
|
||||
"codemirror-spell-checker": "1.1.2",
|
||||
"marked": "^4.1.0"
|
||||
}
|
||||
},
|
||||
"ecc-jsbn": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
|
||||
|
|
@ -36172,6 +36295,11 @@
|
|||
"resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.2.tgz",
|
||||
"integrity": "sha512-y8j3a5/DkJCmS5x4dMCQL+OR0+2EAq3DOtio1COSHsmW2BGXnNCK3v12hJt1LrUz5iZH5g0LmuYOjDdI+czghA=="
|
||||
},
|
||||
"marked": {
|
||||
"version": "4.2.2",
|
||||
"resolved": "https://registry.npmjs.org/marked/-/marked-4.2.2.tgz",
|
||||
"integrity": "sha512-JjBTFTAvuTgANXx82a5vzK9JLSMoV6V3LBVn4Uhdso6t7vXrGx7g1Cd2r6NYSsxrYbQGFCMqBDhFHyK5q2UvcQ=="
|
||||
},
|
||||
"mdast-util-definitions": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/mdast-util-definitions/-/mdast-util-definitions-5.1.1.tgz",
|
||||
|
|
@ -40120,6 +40248,14 @@
|
|||
"react-is": "^16.12.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"react-simplemde-editor": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-simplemde-editor/-/react-simplemde-editor-5.2.0.tgz",
|
||||
"integrity": "sha512-GkTg1MlQHVK2Rks++7sjuQr/GVS/xm6y+HchZ4GPBWrhcgLieh4CjK04GTKbsfYorSRYKa0n37rtNSJmOzEDkQ==",
|
||||
"requires": {
|
||||
"@types/codemirror": "~5.60.5"
|
||||
}
|
||||
},
|
||||
"react-test-renderer": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-17.0.2.tgz",
|
||||
|
|
@ -42736,6 +42872,11 @@
|
|||
"typescript-compare": "^0.0.2"
|
||||
}
|
||||
},
|
||||
"typo-js": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/typo-js/-/typo-js-1.2.2.tgz",
|
||||
"integrity": "sha512-C7pYBQK17EjSg8tVNY91KHdUt5Nf6FMJ+c3js076quPmBML57PmNMzAcIq/2kf/hSYtFABNDIYNYlJRl5BJhGw=="
|
||||
},
|
||||
"unbox-primitive": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
|
||||
|
|
|
|||
|
|
@ -69,6 +69,7 @@
|
|||
"connected-react-router": "^6.9.3",
|
||||
"date-fns": "^2.29.1",
|
||||
"dequal": "^2.0.3",
|
||||
"easymde": "^2.18.0",
|
||||
"history": "^4.10.1",
|
||||
"i18next": "^21.8.14",
|
||||
"i18next-browser-languagedetector": "^6.1.4",
|
||||
|
|
@ -91,6 +92,7 @@
|
|||
"react-redux": "^7.2.8",
|
||||
"react-router-dom": "^5.3.1",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-simplemde-editor": "^5.2.0",
|
||||
"react-textarea-autosize": "^8.3.4",
|
||||
"redux": "^4.2.0",
|
||||
"redux-logger": "^3.0.6",
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ const BoardActions = React.memo(
|
|||
onLabelDelete,
|
||||
}) => {
|
||||
return (
|
||||
<div className={styles.wrapper}>
|
||||
<div className={styles.actions}>
|
||||
<div className={styles.action}>
|
||||
<Memberships
|
||||
|
|
@ -57,6 +58,7 @@ const BoardActions = React.memo(
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
:global(#app) {
|
||||
.action {
|
||||
flex: 0 0 auto;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
|
|
@ -8,4 +9,15 @@
|
|||
display: flex;
|
||||
margin: 20px 20px;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,15 @@
|
|||
import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
|
||||
import React, { useCallback, useImperativeHandle, useMemo, useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import TextareaAutosize from 'react-textarea-autosize';
|
||||
import { Button, Form, TextArea } from 'semantic-ui-react';
|
||||
|
||||
import { useClosableForm, useField } from '../../hooks';
|
||||
import { Button, Form } from 'semantic-ui-react';
|
||||
import SimpleMDE from 'react-simplemde-editor';
|
||||
|
||||
import styles from './DescriptionEdit.module.scss';
|
||||
|
||||
const DescriptionEdit = React.forwardRef(({ children, defaultValue, onUpdate }, ref) => {
|
||||
const [t] = useTranslation();
|
||||
const [isOpened, setIsOpened] = useState(false);
|
||||
const [value, handleFieldChange, setValue] = useField(null);
|
||||
|
||||
const field = useRef(null);
|
||||
const [value, setValue] = useState(null);
|
||||
|
||||
const open = useCallback(() => {
|
||||
setIsOpened(true);
|
||||
|
|
@ -55,20 +51,37 @@ const DescriptionEdit = React.forwardRef(({ children, defaultValue, onUpdate },
|
|||
[close],
|
||||
);
|
||||
|
||||
const [handleFieldBlur, handleControlMouseOver, handleControlMouseOut] = useClosableForm(
|
||||
close,
|
||||
isOpened,
|
||||
);
|
||||
|
||||
const handleSubmit = useCallback(() => {
|
||||
close();
|
||||
}, [close]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpened) {
|
||||
field.current.ref.current.focus();
|
||||
}
|
||||
}, [isOpened]);
|
||||
const mdEditorOptions = useMemo(
|
||||
() => ({
|
||||
autofocus: true,
|
||||
spellChecker: false,
|
||||
status: false,
|
||||
toolbar: [
|
||||
'bold',
|
||||
'italic',
|
||||
'heading',
|
||||
'strikethrough',
|
||||
'|',
|
||||
'quote',
|
||||
'unordered-list',
|
||||
'ordered-list',
|
||||
'table',
|
||||
'|',
|
||||
'link',
|
||||
'image',
|
||||
'|',
|
||||
'undo',
|
||||
'redo',
|
||||
'|',
|
||||
'guide',
|
||||
],
|
||||
}),
|
||||
[],
|
||||
);
|
||||
|
||||
if (!isOpened) {
|
||||
return React.cloneElement(children, {
|
||||
|
|
@ -78,26 +91,17 @@ const DescriptionEdit = React.forwardRef(({ children, defaultValue, onUpdate },
|
|||
|
||||
return (
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<TextArea
|
||||
ref={field}
|
||||
as={TextareaAutosize}
|
||||
<SimpleMDE
|
||||
value={value}
|
||||
options={mdEditorOptions}
|
||||
placeholder={t('common.enterDescription')}
|
||||
minRows={3}
|
||||
spellCheck={false}
|
||||
className={styles.field}
|
||||
onKeyDown={handleFieldKeyDown}
|
||||
onChange={handleFieldChange}
|
||||
onBlur={handleFieldBlur}
|
||||
onChange={setValue}
|
||||
/>
|
||||
<div className={styles.controls}>
|
||||
{/* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */}
|
||||
<Button
|
||||
positive
|
||||
content={t('action.save')}
|
||||
onMouseOver={handleControlMouseOver}
|
||||
onMouseOut={handleControlMouseOut}
|
||||
/>
|
||||
<Button positive content={t('action.save')} />
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -6,15 +6,12 @@
|
|||
|
||||
.field {
|
||||
background: #fff;
|
||||
border: 1px solid rgba(9, 30, 66, 0.13);
|
||||
border-radius: 3px;
|
||||
color: #17394d;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 4px;
|
||||
overflow: hidden;
|
||||
padding: 8px 12px;
|
||||
resize: none;
|
||||
|
||||
&:focus {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import truncate from 'lodash/truncate';
|
||||
import React, { useCallback } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useTranslation, Trans } from 'react-i18next';
|
||||
|
|
@ -47,23 +48,26 @@ const NotificationsStep = React.memo(({ items, onDelete, onClose }) => {
|
|||
{activity.data.toList.name}
|
||||
</Trans>
|
||||
);
|
||||
case ActivityTypes.COMMENT_CARD:
|
||||
case ActivityTypes.COMMENT_CARD: {
|
||||
const commentText = truncate(activity.data.text);
|
||||
|
||||
return (
|
||||
<Trans
|
||||
i18nKey="common.userLeftNewCommentToCard"
|
||||
values={{
|
||||
user: activity.user.name,
|
||||
comment: activity.data.text,
|
||||
comment: commentText,
|
||||
card: card.name,
|
||||
}}
|
||||
>
|
||||
{activity.user.name}
|
||||
{` left a new comment «${activity.data.text}» to `}
|
||||
{` left a new comment «${commentText}» to `}
|
||||
<Link to={Paths.CARDS.replace(':id', card.id)} onClick={onClose}>
|
||||
{card.name}
|
||||
</Link>
|
||||
</Trans>
|
||||
);
|
||||
}
|
||||
default:
|
||||
}
|
||||
|
||||
|
|
@ -80,9 +84,10 @@ const NotificationsStep = React.memo(({ items, onDelete, onClose }) => {
|
|||
})}
|
||||
</Popup.Header>
|
||||
<Popup.Content>
|
||||
{items.length > 0
|
||||
? items.map((item) => (
|
||||
<div key={item.id} className={styles.wrapper}>
|
||||
{items.length > 0 ? (
|
||||
<div className={styles.wrapper}>
|
||||
{items.map((item) => (
|
||||
<div key={item.id} className={styles.item}>
|
||||
{item.card && item.activity ? (
|
||||
<>
|
||||
<User
|
||||
|
|
@ -90,20 +95,23 @@ const NotificationsStep = React.memo(({ items, onDelete, onClose }) => {
|
|||
avatarUrl={item.activity.user.avatarUrl}
|
||||
size="large"
|
||||
/>
|
||||
<span className={styles.content}>{renderItemContent(item)}</span>
|
||||
<span className={styles.itemContent}>{renderItemContent(item)}</span>
|
||||
</>
|
||||
) : (
|
||||
<div className={styles.deletedContent}>{t('common.cardOrActionAreDeleted')}</div>
|
||||
<div className={styles.itemDeleted}>{t('common.cardOrActionAreDeleted')}</div>
|
||||
)}
|
||||
<Button
|
||||
type="button"
|
||||
icon="close"
|
||||
className={styles.button}
|
||||
icon="trash alternate outline"
|
||||
className={styles.itemButton}
|
||||
onClick={() => handleDelete(item.id)}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
: t('common.noUnreadNotifications')}
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
t('common.noUnreadNotifications')
|
||||
)}
|
||||
</Popup.Content>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,13 @@
|
|||
:global(#app) {
|
||||
.button {
|
||||
.item {
|
||||
padding: 12px;
|
||||
|
||||
&:hover {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
.itemButton {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
float: right;
|
||||
|
|
@ -7,7 +15,7 @@
|
|||
line-height: 20px;
|
||||
margin: 0;
|
||||
min-height: auto;
|
||||
padding: 5px 0;
|
||||
padding: 0;
|
||||
transition: background 0.3s ease;
|
||||
width: 20px;
|
||||
|
||||
|
|
@ -16,7 +24,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.itemContent {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
min-height: 36px;
|
||||
|
|
@ -27,7 +35,7 @@
|
|||
word-break: break-word;
|
||||
}
|
||||
|
||||
.deletedContent {
|
||||
.itemDeleted {
|
||||
display: inline-block;
|
||||
line-height: 20px;
|
||||
min-height: 20px;
|
||||
|
|
@ -38,10 +46,21 @@
|
|||
|
||||
.wrapper {
|
||||
margin: 0 -12px;
|
||||
padding: 12px;
|
||||
max-height: 60vh;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
|
||||
&:hover {
|
||||
background: #f0f0f0;
|
||||
&::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import NotFound from './NotFound';
|
|||
|
||||
import 'react-datepicker/dist/react-datepicker.css';
|
||||
import 'photoswipe/dist/photoswipe.css';
|
||||
import 'easymde/dist/easymde.min.css';
|
||||
import '../lib/custom-ui/styles.css';
|
||||
|
||||
import '../styles.module.scss';
|
||||
|
|
|
|||
4
package-lock.json
generated
4
package-lock.json
generated
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "planka",
|
||||
"version": "1.8.4",
|
||||
"version": "1.8.5",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "planka",
|
||||
"version": "1.8.4",
|
||||
"version": "1.8.5",
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "planka",
|
||||
"version": "1.8.4",
|
||||
"version": "1.8.5",
|
||||
"private": true,
|
||||
"homepage": "https://plankanban.github.io/planka",
|
||||
"repository": {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue