From 832cca1c66bcb04fb5e87efecd6e3a09482b1642 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benjamin=20Gaud=C3=A9?= Date: Fri, 5 Jun 2020 16:18:53 +0200 Subject: [PATCH 1/7] Refonte de l'UI des tableaux --- client/package-lock.json | 69 ++++++++------- client/package.json | 2 +- client/src/components/BoardPage/BoardPage.tsx | 83 ++++++++++++------- client/src/components/BoardPage/IssueCard.tsx | 60 +++++++------- client/src/sass/_all.scss | 3 +- client/src/sass/_kanboard.scss | 79 ++++++++++++++++++ client/src/store/reducers/kanboards.ts | 2 +- client/src/store/sagas/kanboards.ts | 2 +- 8 files changed, 202 insertions(+), 98 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index e89da4a..821a8b2 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -1162,22 +1162,6 @@ } } }, - "@babel/runtime-corejs2": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/runtime-corejs2/-/runtime-corejs2-7.7.4.tgz", - "integrity": "sha512-hKNcmHQbBSJFnZ82ewYtWDZ3fXkP/l1XcfRtm7c8gHPM/DMecJtFFBEp7KMLZTuHwwb7RfemHdsEnd7L916Z6A==", - "requires": { - "core-js": "^2.6.5", - "regenerator-runtime": "^0.13.2" - }, - "dependencies": { - "regenerator-runtime": { - "version": "0.13.3", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz", - "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==" - } - } - }, "@babel/template": { "version": "7.7.0", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.7.0.tgz", @@ -1259,11 +1243,11 @@ "dev": true }, "@lourenci/react-kanban": { - "version": "0.15.0", - "resolved": "https://registry.npmjs.org/@lourenci/react-kanban/-/react-kanban-0.15.0.tgz", - "integrity": "sha512-/2XjB26iXcvpwDwlT3sz8/ptQ7QyTpMGlrPf1f02+V1Z4jdbVMo6Luz1sGlHe/TP68N8yz69/YT9qwqHZ6YYmQ==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@lourenci/react-kanban/-/react-kanban-2.0.0.tgz", + "integrity": "sha512-ieNi7d/01wgT9t8kN7Z/RBubyZq9VvKXyU/5sj+UlrY8h4GPRNrN11jLV/ykg55lhyXGKgXDk3ObYurOfrmu3w==", "requires": { - "react-beautiful-dnd": "^11.0.0" + "react-beautiful-dnd": "^13.0.0" } }, "@redux-saga/core": { @@ -2530,7 +2514,8 @@ "core-js": { "version": "2.6.10", "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.10.tgz", - "integrity": "sha512-I39t74+4t+zau64EN1fE5v2W31Adtc/REhzWN+gWRRXg6WH5qAsZm62DHpQ1+Yhe4047T55jvzz7MUqF/dBBlA==" + "integrity": "sha512-I39t74+4t+zau64EN1fE5v2W31Adtc/REhzWN+gWRRXg6WH5qAsZm62DHpQ1+Yhe4047T55jvzz7MUqF/dBBlA==", + "dev": true }, "core-js-compat": { "version": "3.4.1", @@ -2635,9 +2620,9 @@ } }, "css-box-model": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.0.tgz", - "integrity": "sha512-lri0br+jSNV0kkkiGEp9y9y3Njq2PmpqbeGWRFQJuZteZzY9iC9GZhQ8Y4WpPwM/2YocjHePxy14igJY7YKzkA==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz", + "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==", "requires": { "tiny-invariant": "^1.0.6" } @@ -6201,18 +6186,32 @@ } }, "react-beautiful-dnd": { - "version": "11.0.5", - "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-11.0.5.tgz", - "integrity": "sha512-7llby9U+jIfkINcyxPHVWU0HFYzqxMemUYgGHsFsbx4fZo1n/pW6sYKYzhxGxR3Ap5HxqswcQkKUZX4uEUWhlw==", + "version": "13.0.0", + "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.0.0.tgz", + "integrity": "sha512-87It8sN0ineoC3nBW0SbQuTFXM6bUqM62uJGY4BtTf0yzPl8/3+bHMWkgIe0Z6m8e+gJgjWxefGRVfpE3VcdEg==", "requires": { - "@babel/runtime-corejs2": "^7.4.5", - "css-box-model": "^1.1.2", - "memoize-one": "^5.0.4", - "raf-schd": "^4.0.0", - "react-redux": "^7.0.3", - "redux": "^4.0.1", - "tiny-invariant": "^1.0.4", - "use-memo-one": "^1.1.0" + "@babel/runtime": "^7.8.4", + "css-box-model": "^1.2.0", + "memoize-one": "^5.1.1", + "raf-schd": "^4.0.2", + "react-redux": "^7.1.1", + "redux": "^4.0.4", + "use-memo-one": "^1.1.1" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.10.2", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.10.2.tgz", + "integrity": "sha512-6sF3uQw2ivImfVIl62RZ7MXhO2tap69WeWK57vAaimT6AZbE4FbqjdEJIN1UqoD6wI6B+1n9UiagafH1sxjOtg==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + }, + "regenerator-runtime": { + "version": "0.13.5", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz", + "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==" + } } }, "react-dom": { diff --git a/client/package.json b/client/package.json index 8652106..446f3d4 100644 --- a/client/package.json +++ b/client/package.json @@ -48,7 +48,7 @@ "ts-loader": "^7.0.2" }, "dependencies": { - "@lourenci/react-kanban": "^0.15.0", + "@lourenci/react-kanban": "^2.0.0", "bulma": "^0.7.2", "bulma-switch": "^2.0.0", "react": "^16.12.0", diff --git a/client/src/components/BoardPage/BoardPage.tsx b/client/src/components/BoardPage/BoardPage.tsx index 68aeda2..bc07950 100644 --- a/client/src/components/BoardPage/BoardPage.tsx +++ b/client/src/components/BoardPage/BoardPage.tsx @@ -1,7 +1,7 @@ import React, { Fragment } from 'react'; import { Page } from '../Page'; import { connect, DispatchProp } from 'react-redux'; -import Board from '@lourenci/react-kanban'; +import Board, { addColumn } from '@lourenci/react-kanban'; import { fetchBoards } from '../../store/actions/boards'; import { createIssue } from '../../store/actions/issues'; import { buildKanboard, moveCard } from '../../store/actions/kanboards'; @@ -13,6 +13,7 @@ export interface BoardPageProps extends DispatchProp { board: any kanboard: any } + export class BoardPage extends React.Component { state = { @@ -24,6 +25,7 @@ export class BoardPage extends React.Component { project: "" }, compactMode: true, + hasError: false, } onNewCardTitleChange: (evt: any) => void; @@ -41,19 +43,22 @@ export class BoardPage extends React.Component { this.onNewCardSaveClick = this.onNewCardSaveClick.bind(this); } + componentDidCatch(error, errorInfo) { + // You can also log the error to an error reporting service + console.error(error, errorInfo); + } + render() { const { board } = this.props; return ( -
- {this.renderBoard()} -
+ {this.renderBoard()} ); } renderBoard() { - const { kanboard } = this.props; + const { kanboard, board } = this.props; if (!kanboard) { return @@ -61,28 +66,35 @@ export class BoardPage extends React.Component { return ( -
-
-
- - +
-
- - {kanboard} - - { this.renderNewCardModal() } + +
+
+ + { this.renderNewCardModal() } +
@@ -167,28 +179,39 @@ export class BoardPage extends React.Component {
-

{lane.title}

+
+ {lane.cards.length} +
+

+ {lane.title} +

- +
) } - onCardDragEnd(source: any, dest: any) { + onCardDragEnd(b: any, card: any, source: any, dest: any) { const { board } = this.props; this.props.dispatch(moveCard( board.id, - source.fromLaneId, + source.fromColumnId, source.fromPosition, - dest.toLaneId, + dest.toColumnId, dest.toPosition )); } diff --git a/client/src/components/BoardPage/IssueCard.tsx b/client/src/components/BoardPage/IssueCard.tsx index 217f610..34e6ca4 100644 --- a/client/src/components/BoardPage/IssueCard.tsx +++ b/client/src/components/BoardPage/IssueCard.tsx @@ -16,41 +16,43 @@ export class IssueCard extends React.PureComponent { return (
-
+
- { - card.issue.assignee && !compact ? -
-
- Image -
- {`@${card.issue.assignee.login}`} -
- : null - }
-

- {`#${card.issue.number}`}  - { !compact && card.issue.milestone ? {`- ${card.issue.milestone.title}`} : null } - { !compact ?
: ' - ' } - {card.issue.title} -

+ + {card.issue.title}
+ { + + }
- { - !compact ? -
- -
- -
-
: - null - }
); diff --git a/client/src/sass/_all.scss b/client/src/sass/_all.scss index 0cba34d..3bddada 100644 --- a/client/src/sass/_all.scss +++ b/client/src/sass/_all.scss @@ -1,5 +1,6 @@ @import 'bulma/bulma.sass'; +@import '../../node_modules/@lourenci/react-kanban/dist/styles.css'; @import 'bulma-switch/dist/css/bulma-switch.sass'; @import '_base.scss'; @import '_loader.scss'; -@import '_kanboard.scss'; \ No newline at end of file +@import '_kanboard.scss'; diff --git a/client/src/sass/_kanboard.scss b/client/src/sass/_kanboard.scss index e1e29a8..4a0885a 100644 --- a/client/src/sass/_kanboard.scss +++ b/client/src/sass/_kanboard.scss @@ -44,6 +44,10 @@ .kanboard-lane { margin-bottom: $size-small; + background: $white; + position: sticky; + position: -webkit-sticky; + top: 0; } } @@ -51,4 +55,79 @@ justify-content: center; align-items: center; width: 50% !important; +} + +.react-kanban-board { + max-height: calc(100vh - calc(52px * 2)); + overflow: hidden; + overflow-x: scroll; + + scrollbar-color: $grey-lighter, #f1f1f1; + scrollbar-width: 5px; + + &::-webkit-scrollbar { + width: 5px; + height: 5px; + } + + /* Track */ + &::-webkit-scrollbar-track { + background: #f1f1f1; + } + + /* Handle */ + &::-webkit-scrollbar-thumb { + background: $grey-lighter; + } + + /* Handle on hover */ + &::-webkit-scrollbar-thumb:hover { + background: $green; + } +} + +.react-kanban-column { + max-width: 305px; + min-width: 305px; + position: relative; + + max-height: 100%; + overflow-x: hidden; + overflow-y: scroll; + + scrollbar-color: $grey-lighter, #f1f1f1; + scrollbar-width: 5px; + + &.minimized { + max-width: 30px; + min-width: 30px; + } + + &::-webkit-scrollbar { + width: 5px; + } + + /* Track */ + &::-webkit-scrollbar-track { + background: #f1f1f1; + } + + /* Handle */ + &::-webkit-scrollbar-thumb { + background: $grey-lighter; + } + + /* Handle on hover */ + &::-webkit-scrollbar-thumb:hover { + background: $green; + } +} + +.react-kanban-card__title { + position: sticky; + position: -webkit-sticky; +} + +.react-kanban-column { + background: white !important; } \ No newline at end of file diff --git a/client/src/store/reducers/kanboards.ts b/client/src/store/reducers/kanboards.ts index 5a099e0..ebe5474 100644 --- a/client/src/store/reducers/kanboards.ts +++ b/client/src/store/reducers/kanboards.ts @@ -37,7 +37,7 @@ function handleMoveCard(state: any, action: any) { const kanboard = state.byID[boardID]; - const lanes = [ ...kanboard.lanes ]; + const lanes = [ ...kanboard.columns ]; const fromLane = lanes[fromLaneID]; const toLane = lanes[toLaneID]; const card = fromLane.cards[fromPosition]; diff --git a/client/src/store/sagas/kanboards.ts b/client/src/store/sagas/kanboards.ts index f3d8f78..bae3769 100644 --- a/client/src/store/sagas/kanboards.ts +++ b/client/src/store/sagas/kanboards.ts @@ -145,7 +145,7 @@ function createKanboard(board: Board, issues: any) { const kanboard = { id: board.id, - lanes: createKanboardLanes(board, issues), + columns: createKanboardLanes(board, issues), }; return kanboard; From 0e93e7c52f14bebb5f4da8a433d612f22ad27723 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benjamin=20Gaud=C3=A9?= Date: Fri, 5 Jun 2020 17:14:55 +0200 Subject: [PATCH 2/7] =?UTF-8?q?Permettre=20la=20r=C3=A9duction=20des=20col?= =?UTF-8?q?onnes=20d'un=20tableau?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/BoardPage/BoardPage.tsx | 8 ++++- client/src/components/BoardPage/IssueCard.tsx | 4 +-- client/src/sass/_kanboard.scss | 33 ++++++++++++++++--- 3 files changed, 38 insertions(+), 7 deletions(-) diff --git a/client/src/components/BoardPage/BoardPage.tsx b/client/src/components/BoardPage/BoardPage.tsx index bc07950..208a5f8 100644 --- a/client/src/components/BoardPage/BoardPage.tsx +++ b/client/src/components/BoardPage/BoardPage.tsx @@ -185,6 +185,12 @@ export class BoardPage extends React.Component {

{lane.title}

+
- {card.issue.title} + {card.issue.title ? card.issue.title : ''}
{ diff --git a/client/src/sass/_kanboard.scss b/client/src/sass/_kanboard.scss index 4a0885a..f4d893c 100644 --- a/client/src/sass/_kanboard.scss +++ b/client/src/sass/_kanboard.scss @@ -45,9 +45,11 @@ .kanboard-lane { margin-bottom: $size-small; background: $white; - position: sticky; - position: -webkit-sticky; top: 0; + + .expand { + display: none; + } } } @@ -87,6 +89,7 @@ } .react-kanban-column { + transition: width ease .2s; max-width: 305px; min-width: 305px; position: relative; @@ -99,8 +102,30 @@ scrollbar-width: 5px; &.minimized { - max-width: 30px; - min-width: 30px; + max-width: 40px; + min-width: 40px; + + writing-mode: vertical-rl; + text-orientation: sideways-right; + + .kanboard-lane { + margin-right: -1em; + + h3 { + margin-top: .5em; + margin-right: -.5em; + } + + .tag { + margin-right: -1em; + } + + .expand { + display: block !important; + margin-top: .5em; + } + } + } &::-webkit-scrollbar { From fe0e2667a0717af9acd12d6d0cca7a24d56e7921 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benjamin=20Gaud=C3=A9?= Date: Tue, 16 Jun 2020 10:54:11 +0200 Subject: [PATCH 3/7] Correction affichage issue ajouter depuis l'UI --- client/src/components/BoardPage/BoardPage.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/client/src/components/BoardPage/BoardPage.tsx b/client/src/components/BoardPage/BoardPage.tsx index 208a5f8..d5f7d5d 100644 --- a/client/src/components/BoardPage/BoardPage.tsx +++ b/client/src/components/BoardPage/BoardPage.tsx @@ -59,6 +59,8 @@ export class BoardPage extends React.Component { renderBoard() { const { kanboard, board } = this.props; + + console.log(kanboard); if (!kanboard) { return @@ -86,13 +88,13 @@ export class BoardPage extends React.Component {
+ > + {kanboard} + { this.renderNewCardModal() }
From e3459d136ef6c54a4309b4bf4e297d20f8da2256 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benjamin=20Gaud=C3=A9?= Date: Tue, 16 Jun 2020 11:23:57 +0200 Subject: [PATCH 4/7] =?UTF-8?q?Ajout=20mode=20compact=C3=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/BoardPage/BoardPage.tsx | 17 ++++++-- client/src/components/BoardPage/IssueCard.tsx | 43 +++++++++++-------- client/src/sass/_base.scss | 4 ++ client/src/sass/_kanboard.scss | 17 ++++++++ 4 files changed, 60 insertions(+), 21 deletions(-) diff --git a/client/src/components/BoardPage/BoardPage.tsx b/client/src/components/BoardPage/BoardPage.tsx index d5f7d5d..b4c5c4f 100644 --- a/client/src/components/BoardPage/BoardPage.tsx +++ b/client/src/components/BoardPage/BoardPage.tsx @@ -59,8 +59,6 @@ export class BoardPage extends React.Component { renderBoard() { const { kanboard, board } = this.props; - - console.log(kanboard); if (!kanboard) { return @@ -68,7 +66,7 @@ export class BoardPage extends React.Component { return ( -