Compare commits

...

2 Commits

Author SHA1 Message Date
Benjamin Gaudé e3459d136e Ajout mode compacté 2020-06-16 11:23:57 +02:00
Benjamin Gaudé fe0e2667a0 Correction affichage issue ajouter depuis l'UI 2020-06-16 10:54:11 +02:00
4 changed files with 63 additions and 22 deletions

View File

@ -66,7 +66,7 @@ export class BoardPage extends React.Component<BoardPageProps> {
return ( return (
<Fragment> <Fragment>
<nav className="navbar is-info"> <nav className="navbar is-light">
<div className="container is-fluid"> <div className="container is-fluid">
<div className="navbar-start"> <div className="navbar-start">
<div className="navbar-item"> <div className="navbar-item">
@ -74,6 +74,19 @@ export class BoardPage extends React.Component<BoardPageProps> {
</div> </div>
</div> </div>
<div className="navbar-end"> <div className="navbar-end">
<div className="navbar-item">
<div className="field">
<input id="compactMode"
checked={this.state.compactMode}
onChange={this.onCompactModeChange.bind(this)}
type="checkbox"
className="switch is-outlined is-success"
name="compactMode"
/>
<label htmlFor="compactMode">Mode compact</label>
</div>
</div>
<a href={`#/boards/${board.id}/edit`} className="navbar-item"> <a href={`#/boards/${board.id}/edit`} className="navbar-item">
<span className="icon"> <span className="icon">
<i className="fa fa-edit fa-fw"></i> <i className="fa fa-edit fa-fw"></i>
@ -86,13 +99,13 @@ export class BoardPage extends React.Component<BoardPageProps> {
<div className="container is-fluid"> <div className="container is-fluid">
<div className="kanboard-container is-fullheight"> <div className="kanboard-container is-fullheight">
<Board <Board
initialBoard={kanboard}
renderCard={this.renderCard.bind(this)} renderCard={this.renderCard.bind(this)}
renderColumnHeader={this.renderLaneHeader.bind(this)} renderColumnHeader={this.renderLaneHeader.bind(this)}
onCardDragEnd={this.onCardDragEnd.bind(this)} onCardDragEnd={this.onCardDragEnd.bind(this)}
disableColumnDrag={true} disableColumnDrag={true}
/> >
{kanboard}
</Board>
{ this.renderNewCardModal() } { this.renderNewCardModal() }
</div> </div>
</div> </div>

View File

@ -20,18 +20,21 @@ export class IssueCard extends React.PureComponent<IssueCardProps> {
<div className="media"> <div className="media">
<div className="media-content"> <div className="media-content">
<div className="content"> <div className="content">
{ !compact &&
<nav className="level"> <nav className="level">
<div className="level-left"> <div className="level-left">
<div className="level-item"> <div className="level-item">
<a target="_blank" href={issueURL}><strong>{`#${card.issue.number}`}</strong></a> <a target="_blank" href={issueURL}><strong>{`#${card.issue.number}`}</strong></a>
</div> </div>
{ !compact &&
<div className="level-item"> <div className="level-item">
<a target="_blank" href={projectURL}>{card.project}</a> <a target="_blank" href={projectURL}>{card.project}</a>
</div> </div>
}
</div> </div>
<div className="level-right"> <div className="level-right">
{ {
card.issue.assignee ? card.issue.assignee && !compact ?
<div className="level-item"> <div className="level-item">
<small>{`@${card.issue.assignee.login}`}</small> <small>{`@${card.issue.assignee.login}`}</small>
</div> </div>
@ -39,9 +42,13 @@ export class IssueCard extends React.PureComponent<IssueCardProps> {
} }
</div> </div>
</nav> </nav>
}
{ compact &&
<a target="_blank" className="mr-1" href={issueURL}><strong>{`#${card.issue.number}`}</strong></a>
}
<span>{card.issue.title ? card.issue.title : ''}</span> <span>{card.issue.title ? card.issue.title : ''}</span>
</div> </div>
{ { !compact &&
<nav className="level"> <nav className="level">
<div className="level-left"></div> <div className="level-left"></div>
<div className="level-right"> <div className="level-right">

View File

@ -19,3 +19,7 @@ html, body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.mr-1 {
margin-right: 5px;
}

View File

@ -156,3 +156,20 @@
.react-kanban-column { .react-kanban-column {
background: white !important; background: white !important;
} }
.kanboard-card {
overflow-wrap: break-word;
a {
display: inline-block;
}
.level {
margin-bottom: 0;
}
.level-item {
max-width: 100%;
}
}