Refonte de l'UI des tableaux

This commit is contained in:
Benjamin Gaudé 2020-06-05 16:18:53 +02:00
parent 94bfb77d87
commit 832cca1c66
8 changed files with 202 additions and 98 deletions

View File

@ -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": {

View File

@ -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",

View File

@ -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<BoardPageProps> {
state = {
@ -24,6 +25,7 @@ export class BoardPage extends React.Component<BoardPageProps> {
project: ""
},
compactMode: true,
hasError: false,
}
onNewCardTitleChange: (evt: any) => void;
@ -41,19 +43,22 @@ export class BoardPage extends React.Component<BoardPageProps> {
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 (
<Page title={`${board ? (board.title + ' - ') : ''}GenGitKan`}>
<div className="container is-fluid">
{this.renderBoard()}
</div>
</Page>
);
}
renderBoard() {
const { kanboard } = this.props;
const { kanboard, board } = this.props;
if (!kanboard) {
return <Loader></Loader>
@ -61,29 +66,36 @@ export class BoardPage extends React.Component<BoardPageProps> {
return (
<Fragment>
<div className="is-clearfix has-margin-top-normal">
<div className="is-pulled-right">
<div className="field">
<input id="compactMode"
checked={this.state.compactMode}
onChange={this.onCompactModeChange.bind(this)}
type="checkbox"
className="switch is-rtl"
name="compactMode"
/>
<label htmlFor="compactMode">Mode compact</label>
<nav className="navbar is-info">
<div className="container is-fluid">
<div className="navbar-start">
<div className="navbar-item">
{board.title}
</div>
</div>
<div className="navbar-end">
<a href={`#/boards/${board.id}/edit`} className="navbar-item">
<span className="icon">
<i className="fa fa-edit fa-fw"></i>
</span>
<span>Modifier le tableau</span>
</a>
</div>
</div>
</nav>
<div className="container is-fluid">
<div className="kanboard-container is-fullheight">
<Board disableLaneDrag={true}
<Board
initialBoard={kanboard}
renderCard={this.renderCard.bind(this)}
renderLaneHeader={this.renderLaneHeader}
onCardDragEnd={this.onCardDragEnd.bind(this)}>
{kanboard}
</Board>
renderColumnHeader={this.renderLaneHeader.bind(this)}
onCardDragEnd={this.onCardDragEnd.bind(this)}
disableColumnDrag={true}
/>
{ this.renderNewCardModal() }
</div>
</div>
</Fragment>
);
@ -167,28 +179,39 @@ export class BoardPage extends React.Component<BoardPageProps> {
<div className="kanboard-lane">
<div className="level">
<div className="level-left">
<h3 className="level-item is-size-3">{lane.title}</h3>
<div className="level-item">
<span className="tag is-primary is-light is-normal">{lane.cards.length}</span>
</div>
<h3 className="level-item is-size-5">
{lane.title}
</h3>
</div>
<div className="level-right">
<button className="button is-light level-item is-medium"
<button className="button is-light level-item is-small"
onClick={this.onNewCardClick.bind(this, lane.id)}>
<span className="icon">
<i className="fas fa-plus" aria-hidden="true"></i>
</span>
</button>
<button className="button is-light level-item is-small"
onClick={this.onNewCardClick.bind(this, lane.id)}>
<span className="icon">
<i className="fas fa-chevron-left" aria-hidden="true"></i>
</span>
</button>
</div>
</div>
</div>
)
}
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
));
}

View File

@ -16,43 +16,45 @@ export class IssueCard extends React.PureComponent<IssueCardProps> {
return (
<div className="kanboard-card">
<div className={`box ${compact ? 'has-padding-small': ''}`}>
<div className="box has-padding-small is-radiusless">
<div className="media">
<div className="media-content">
<div className="content">
<nav className="level">
<div className="level-left">
<div className="level-item">
<a target="_blank" href={issueURL}><strong>{`#${card.issue.number}`}</strong></a>
</div>
<div className="level-item">
<a target="_blank" href={projectURL}>{card.project}</a>
</div>
</div>
<div className="level-right">
{
card.issue.assignee && !compact ?
<div className="media-left">
<figure className="image is-64x64">
<img src={card.issue.assignee.avatar_url} alt="Image" />
</figure>
card.issue.assignee ?
<div className="level-item">
<small>{`@${card.issue.assignee.login}`}</small>
</div>
: null
}
<div className="media-content">
<div className="content">
<p>
<a target="_blank" href={issueURL}><strong>{`#${card.issue.number}`}</strong></a>&nbsp;
{ !compact && card.issue.milestone ? <small>{`- ${card.issue.milestone.title}`}</small> : null }
{ !compact ? <br /> : ' - ' }
<span className="is-size-6">{card.issue.title}</span>
</p>
</div>
</div>
</nav>
<span>{card.issue.title}</span>
</div>
{
!compact ?
<div className="level is-mobile" style={{marginTop:'1rem'}}>
<div className="level-left">
<small className="level-item"><a href={projectURL}>{card.project}</a></small>
</div>
<nav className="level">
<div className="level-left"></div>
<div className="level-right">
<div className="level-item is-size-7">
{card.issue.milestone.title}
</div>
</div> :
null
</div>
</nav>
}
</div>
</div>
</div>
</div>
);
}
}

View File

@ -1,4 +1,5 @@
@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';

View File

@ -44,6 +44,10 @@
.kanboard-lane {
margin-bottom: $size-small;
background: $white;
position: sticky;
position: -webkit-sticky;
top: 0;
}
}
@ -52,3 +56,78 @@
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;
}

View File

@ -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];

View File

@ -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;