Ajout d'un mode "compact"

Ce mode compact est activé par défaut

Voir #24

client/src/components/BoardPage/BoardPage.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { Page } from '../Page';
 import { connect, DispatchProp } from 'react-redux';
 import Board from '@lourenci/react-kanban';
@@ -22,7 +22,8 @@ export class BoardPage extends React.Component<BoardPageProps> {
       title: "",
       body: "",
       project: ""
-    }
+    },
+    compactMode: true,
   }
 
   onNewCardTitleChange: (evt: any) => void;
@@ -59,15 +60,32 @@ export class BoardPage extends React.Component<BoardPageProps> {
     }
 
     return (
-      <div className="kanboard-container is-fullheight">
-        <Board disableLaneDrag={true}
-          renderCard={this.renderCard}
-          renderLaneHeader={this.renderLaneHeader}
-          onCardDragEnd={this.onCardDragEnd.bind(this)}>
-          {kanboard}
-        </Board>
-        { this.renderNewCardModal() }
-      </div>
+      <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>
+            </div>
+          </div>
+        </div>
+        <div className="kanboard-container is-fullheight">
+          <Board disableLaneDrag={true}
+            renderCard={this.renderCard.bind(this)}
+            renderLaneHeader={this.renderLaneHeader}
+            onCardDragEnd={this.onCardDragEnd.bind(this)}>
+            {kanboard}
+          </Board>
+          { this.renderNewCardModal() }
+        </div>
+      </Fragment>
+      
     );
   }
 
@@ -139,7 +157,7 @@ export class BoardPage extends React.Component<BoardPageProps> {
   }
 
   renderCard(card: any) {
-    return <IssueCard card={card} />;
+    return <IssueCard compact={this.state.compactMode} card={card} />;
   }
 
   renderLaneHeader(lane: any) {
@@ -239,6 +257,11 @@ export class BoardPage extends React.Component<BoardPageProps> {
     this.props.dispatch(buildKanboard(board));
   }
 
+  onCompactModeChange(evt: React.ChangeEvent) {
+    const checked = (evt.currentTarget as HTMLInputElement).checked;
+    this.setState(state => ({...state, compactMode: checked }));
+  }
+
 }
 
 export const ConnectedBoardPage = connect(function(state: any, props: any) {

client/src/components/BoardPage/IssueCard.tsx

@@ -1,21 +1,25 @@
 import React from 'react';
+import { KanboardCard } from '../../types/kanboard';
 
 export interface IssueCardProps {
-  card: any
+  card: KanboardCard
+  compact: boolean
 }
 
 export class IssueCard extends React.PureComponent<IssueCardProps> {
   render() {
-    const { card } = this.props;
+    
+    const { card, compact } = this.props;
     const issueURLInfo = extractInfoFromIssueURL(card.issue.url);
     const projectURL = `${issueURLInfo.baseURL}/${issueURLInfo.owner}/${issueURLInfo.projectName}`;
     const issueURL = `${projectURL}/issues/${card.issue.number}`;
+
     return (
       <div className="kanboard-card">
-        <div className="box">
+        <div className={`box ${compact ? 'has-padding-small': ''}`}>
           <div className="media">
             {
-              card.issue.assignee ?
+              card.issue.assignee && !compact ?
               <div className="media-left">
                 <figure className="image is-64x64">
                   <img src={card.issue.assignee.avatar_url} alt="Image" />
@@ -27,26 +31,26 @@ export class IssueCard extends React.PureComponent<IssueCardProps> {
             <div className="media-content">
               <div className="content">
                 <p>
-                  <strong>{`#${card.issue.number}`}</strong>&nbsp;
-                  { card.issue.milestone ? <small>{`- ${card.issue.milestone.title}`}</small> : null }
-                  <br />
+                  <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>
           </div>
-          <div className="level is-mobile" style={{marginTop:'1rem'}}>
-            <div className="level-left">
-              <small className="level-item"><a href={projectURL}>{card.project}</a></small>
-            </div>
-            <div className="level-right">
-              <a className="level-item" target="_blank" href={issueURL}>
-                <span className="icon is-small has-text-info">
-                  <i className="fas fa-search" aria-hidden="true"></i>
-                </span>
-              </a>
-            </div>
-          </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>
+              <div className="level-right">
+                
+              </div>
+            </div> :
+            null
+          }
         </div>
       </div>
     );