From 5e5d76255ec954220d8e1bf284d2ba0534c3ebce Mon Sep 17 00:00:00 2001 From: petkir Date: Thu, 18 Jun 2020 23:05:45 +0200 Subject: [PATCH] css playing --- samples/react-kanban-board/package-lock.json | 5 + samples/react-kanban-board/package.json | 1 + .../src/kanban/KanbanBucket.module.scss | 7 ++ .../src/kanban/KanbanBucket.tsx | 58 +++++----- .../src/kanban/KanbanComponent.tsx | 103 ++++++++++++++++-- .../src/kanban/KanbanTask.module.scss | 5 + .../src/kanban/KanbanTask.tsx | 16 +-- 7 files changed, 146 insertions(+), 49 deletions(-) diff --git a/samples/react-kanban-board/package-lock.json b/samples/react-kanban-board/package-lock.json index 77c132925..154582a61 100644 --- a/samples/react-kanban-board/package-lock.json +++ b/samples/react-kanban-board/package-lock.json @@ -4199,6 +4199,11 @@ } } }, + "classnames": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", + "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + }, "clean-css": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz", diff --git a/samples/react-kanban-board/package.json b/samples/react-kanban-board/package.json index a825abd18..9ed0fd7f7 100644 --- a/samples/react-kanban-board/package.json +++ b/samples/react-kanban-board/package.json @@ -25,6 +25,7 @@ "@types/react": "16.7.22", "@types/react-dom": "16.8.0", "@types/webpack-env": "1.13.1", + "classnames": "^2.2.6", "jqwidgets-scripts": "^8.1.2", "office-ui-fabric-react": "^6.143.0", "react": "16.7.0", diff --git a/samples/react-kanban-board/src/kanban/KanbanBucket.module.scss b/samples/react-kanban-board/src/kanban/KanbanBucket.module.scss index 5122e821c..23f021917 100644 --- a/samples/react-kanban-board/src/kanban/KanbanBucket.module.scss +++ b/samples/react-kanban-board/src/kanban/KanbanBucket.module.scss @@ -19,4 +19,11 @@ right: 0px; } } + &.dragover{ + background-color: lightgray; + } + .placeholder{ + background-color: rgb(180, 180, 180); + } + } diff --git a/samples/react-kanban-board/src/kanban/KanbanBucket.tsx b/samples/react-kanban-board/src/kanban/KanbanBucket.tsx index a38189276..b4669485e 100644 --- a/samples/react-kanban-board/src/kanban/KanbanBucket.tsx +++ b/samples/react-kanban-board/src/kanban/KanbanBucket.tsx @@ -7,6 +7,7 @@ import { IKanbanBoardTaskActions } from './IKanbanBoardTaskActions'; import { ProgressIndicator } from 'office-ui-fabric-react/lib/ProgressIndicator'; import { ActionButton } from 'office-ui-fabric-react'; import KanbanTask from './KanbanTask'; +import classNames from 'classnames'; import * as strings from 'KanbanBoardStrings'; export interface IKanbanBucketProps extends IKanbanBucket { @@ -14,6 +15,15 @@ export interface IKanbanBucketProps extends IKanbanBucket { tasksettings: IKanbanBoardTaskSettings; taskactions: IKanbanBoardTaskActions; + onDragStart: (event, taskId: string | number, bucket: string) => void; + onDragOver: (event, targetbucket: string) => void; + onDragLeave: (event, targetbucket: string) => void; + onDrop: (event, targetbucket: string) => void; + + leavingTaskId?: number | string; + leavingBucket?: string; + overBucket?: string; + openDetails?: (taskId: number | string) => void; } @@ -27,6 +37,7 @@ export default class KanbanBucket extends React.Component { - const { bucketheadline, color, buckettasks, tasksettings, taskactions, percentageComplete, allowAddTask } = this.props; + const { bucket, bucketheadline, color, buckettasks, + tasksettings, taskactions, percentageComplete, + allowAddTask, overBucket,leavingTaskId,leavingBucket } = this.props; + return ( -
this.onDragOver(event)} - onDrop={this.onDrop.bind(this)} +
this.props.onDragOver(event, bucket)} + onDragLeave={(event) => this.props.onDragLeave(event, bucket)} + onDrop={(event) => this.props.onDragLeave(event, bucket)} >
{bucketheadline} @@ -56,11 +72,17 @@ export default class KanbanBucket extends React.Component { const merge = { ...t, ...tasksettings, ...taskactions }; - return ( - + + onDragStart={(event) => this.props.onDragStart(event, t.taskId, t.bucket)} + + />
); }) } @@ -69,27 +91,5 @@ export default class KanbanBucket extends React.Component { - if (task.taskName == taskName) { - task.type = cat; - } - return task; - }); - - - this.setState({ - ...this.state, - tasks - }); - */ - } } diff --git a/samples/react-kanban-board/src/kanban/KanbanComponent.tsx b/samples/react-kanban-board/src/kanban/KanbanComponent.tsx index 159d19bce..0cbe570cc 100644 --- a/samples/react-kanban-board/src/kanban/KanbanComponent.tsx +++ b/samples/react-kanban-board/src/kanban/KanbanComponent.tsx @@ -20,20 +20,27 @@ export interface IKanbanComponentProps { */ } -export interface IKanbanComponentState { } +export interface IKanbanComponentState { + leavingTaskId?: number | string; + leavingBucket?: string; + overBucket?: string; +} export default class KanbanComponent extends React.Component { - + private dragelement?: IKanbanTask; constructor(props: IKanbanComponentProps) { super(props); this.state = { - + leavingTaskId: null, + leavingBucket: null, + overBucket: null }; } public render(): React.ReactElement { const { buckets, tasks, tasksettings, taskactions, showCommandbar } = this.props; + const { leavingBucket, leavingTaskId, overBucket } = this.state return (
{showCommandbar && }
- {buckets.map((b) => - ( x.bucket == b.bucket)} - tasksettings={tasksettings} - taskactions={taskactions} - openDetails={(x) => alert(x)} - />) + { - )} + buckets.map((b) => { + const merge = { ...b, ...this.state } + return ( x.bucket == b.bucket)} + tasksettings={tasksettings} + taskactions={taskactions} + openDetails={(x) => alert(x)} + onDrop={this.onDrop.bind(this)} + onDragLeave={this.onDragLeave.bind(this)} + onDragOver={this.onDragOver.bind(this)} + onDragStart={this.onDragStart.bind(this)} + + />) + + } + + )}
); } + private onDragLeave(event): void { + console.log('onDragLeave'); + /* if (this.bucketRef.current.classList.contains(styles.dragover)) { + this.bucketRef.current.classList.remove(styles.dragover) + }*/ + + } + + private onDragStart(event, taskId: string | number, bucket: string): void { + console.log('onDragStart'); + const taskitem = this.props.tasks.filter(p => p.taskId == taskId); + + if (taskitem.length === 1) { + event.dataTransfer.setData("taskId", taskId); + event.dataTransfer.setData("sourcebucket", bucket); + //set element because event.dataTransfer is empty by DragOver + console.log('set dragelement'); + this.dragelement = taskitem[0]; + this.setState({ + leavingTaskId: taskId, + leavingBucket: bucket, + }); + } else { + // Error not consitent + } + + + } + + private onDragOver(event, targetbucket: string): void { + event.preventDefault(); + console.log('onDragOver'); + console.log(event.dataTransfer.getData("sourcebucket")); + if (this.dragelement.bucket !== targetbucket) { + /* if (!this.bucketRef.current.classList.contains(styles.dragover)) { + this.bucketRef.current.classList.add(styles.dragover) + }*/ + } else { + + } + + } + + private onDrop(event, targetbucket: string): void { + console.log(`onDrop sourcebucket ${event.dataTransfer.getData("sourcebucket")} taskid: ${event.dataTransfer.getData("taskId")}`); + /* if (this.bucketRef.current.classList.contains(styles.dragover)) { + this.bucketRef.current.classList.remove(styles.dragover) + }*/ + if (event.dataTransfer.getData("sourcebucket") !== targetbucket) { + // other cases no Bucketchange + } + + this.dragelement = null; + this.setState({ + leavingTaskId: null, + leavingBucket: null, + overBucket: null, + }); + + } + private getItems = () => { return [ { diff --git a/samples/react-kanban-board/src/kanban/KanbanTask.module.scss b/samples/react-kanban-board/src/kanban/KanbanTask.module.scss index 14175bac1..2b7c833ef 100644 --- a/samples/react-kanban-board/src/kanban/KanbanTask.module.scss +++ b/samples/react-kanban-board/src/kanban/KanbanTask.module.scss @@ -1,5 +1,6 @@ .taskcard { display: block; + background-color: initial; .titlerow { .title{ display: inline; @@ -12,4 +13,8 @@ display: inline; } } + +} +.moving{ + background-color: rgb(180, 100, 100) !important; } \ No newline at end of file diff --git a/samples/react-kanban-board/src/kanban/KanbanTask.tsx b/samples/react-kanban-board/src/kanban/KanbanTask.tsx index 0414176e0..02c110e97 100644 --- a/samples/react-kanban-board/src/kanban/KanbanTask.tsx +++ b/samples/react-kanban-board/src/kanban/KanbanTask.tsx @@ -5,12 +5,14 @@ import { IconButton } from 'office-ui-fabric-react/lib/Button'; import {IKanbanTask} from './IKanbanTask'; import {IKanbanBoardTaskSettings} from './IKanbanBoardTaskSettings'; import {IKanbanBoardTaskActions} from './IKanbanBoardTaskActions'; +import classNames from 'classnames'; export interface IKanbanTaskProps extends IKanbanTask,IKanbanBoardTaskSettings,IKanbanBoardTaskActions { openDetails?: (taskId: number | string) => void; - + onDragStart:(event) => void; + isMoving:boolean; } export interface IKanbanTaskState { } @@ -22,12 +24,13 @@ export default class KanbanTask extends React.Component { - const { title, showLabels, showPriority, showAssignedTo, isCompleted } = this.props; + const { title, showLabels, showPriority, showAssignedTo, isCompleted,isMoving } = this.props; const showCompleted = !!this.props.toggleCompleted; const iconCompleted = { iconName: isCompleted ? 'RadioBtnOn' : 'RadioBtnOff' }; return ( -
this.onDragStart(event)} +
{showCompleted && ( @@ -55,8 +58,5 @@ export default class KanbanTask extends React.Component