mirror of
https://gitee.com/nocobase/nocobase.git
synced 2025-07-02 11:12:20 +08:00
feat: style module -> emotion css
This commit is contained in:
katherinehhh
parent
5f8cb58d7e
commit
24cf984191
@ -1,4 +1,6 @@
|
||||
import React, { ReactChild } from 'react';
|
||||
import { cx } from '@emotion/css';
|
||||
import { DateSetup } from '../../types/date-setup';
|
||||
import { ViewMode } from '../../types/public-types';
|
||||
import { TopPartOfCalendar } from './top-part-of-calendar';
|
||||
import {
|
||||
@ -8,8 +10,7 @@ import {
|
||||
getLocaleMonth,
|
||||
getWeekNumberISO8601,
|
||||
} from '../../helpers/date-helper';
|
||||
import { DateSetup } from '../../types/date-setup';
|
||||
import styles from './calendar.css';
|
||||
import { calendarBottomText, calendarHeader } from './style';
|
||||
|
||||
export type CalendarProps = {
|
||||
dateSetup: DateSetup;
|
||||
@ -44,7 +45,7 @@ export const Calendar: React.FC<CalendarProps> = ({
|
||||
key={date.getTime()}
|
||||
y={headerHeight * 0.8}
|
||||
x={columnWidth * i + columnWidth * 0.5}
|
||||
className={styles.calendarBottomText}
|
||||
className={cx(calendarBottomText)}
|
||||
>
|
||||
{bottomValue}
|
||||
</text>,
|
||||
@ -86,7 +87,7 @@ export const Calendar: React.FC<CalendarProps> = ({
|
||||
key={date.getTime()}
|
||||
y={headerHeight * 0.8}
|
||||
x={columnWidth * i + columnWidth * 0.5}
|
||||
className={styles.calendarBottomText}
|
||||
className={cx(calendarBottomText)}
|
||||
>
|
||||
{quarter}
|
||||
</text>,
|
||||
@ -127,7 +128,7 @@ export const Calendar: React.FC<CalendarProps> = ({
|
||||
key={bottomValue + date.getFullYear()}
|
||||
y={headerHeight * 0.8}
|
||||
x={columnWidth * i + columnWidth * 0.5}
|
||||
className={styles.calendarBottomText}
|
||||
className={cx(calendarBottomText)}
|
||||
>
|
||||
{bottomValue}
|
||||
</text>,
|
||||
@ -177,7 +178,7 @@ export const Calendar: React.FC<CalendarProps> = ({
|
||||
key={date.getTime()}
|
||||
y={headerHeight * 0.8}
|
||||
x={columnWidth * (i + +rtl)}
|
||||
className={styles.calendarBottomText}
|
||||
className={cx(calendarBottomText)}
|
||||
>
|
||||
{bottomValue}
|
||||
</text>,
|
||||
@ -219,7 +220,7 @@ export const Calendar: React.FC<CalendarProps> = ({
|
||||
key={date.getTime()}
|
||||
y={headerHeight * 0.8}
|
||||
x={columnWidth * i + columnWidth * 0.5}
|
||||
className={styles.calendarBottomText}
|
||||
className={cx(calendarBottomText)}
|
||||
>
|
||||
{bottomValue}
|
||||
</text>,
|
||||
@ -261,7 +262,7 @@ export const Calendar: React.FC<CalendarProps> = ({
|
||||
key={date.getTime()}
|
||||
y={headerHeight * 0.8}
|
||||
x={columnWidth * (i + +rtl)}
|
||||
className={styles.calendarBottomText}
|
||||
className={cx(calendarBottomText)}
|
||||
fontFamily={fontFamily}
|
||||
>
|
||||
{bottomValue}
|
||||
@ -306,7 +307,7 @@ export const Calendar: React.FC<CalendarProps> = ({
|
||||
key={date.getTime()}
|
||||
y={headerHeight * 0.8}
|
||||
x={columnWidth * (i + +rtl)}
|
||||
className={styles.calendarBottomText}
|
||||
className={cx(calendarBottomText)}
|
||||
fontFamily={fontFamily}
|
||||
>
|
||||
{bottomValue}
|
||||
@ -368,7 +369,7 @@ export const Calendar: React.FC<CalendarProps> = ({
|
||||
y={0}
|
||||
width={columnWidth * dateSetup.dates.length}
|
||||
height={headerHeight}
|
||||
className={styles.calendarHeader}
|
||||
className={cx(calendarHeader)}
|
||||
/>
|
||||
{bottomValues} {topValues}
|
||||
</g>
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
.calendarBottomText {
|
||||
import { css } from '@emotion/css';
|
||||
|
||||
export const calendarBottomText = css`
|
||||
text-anchor: middle;
|
||||
fill: #333;
|
||||
-webkit-touch-callout: none;
|
||||
@ -7,13 +9,13 @@
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
`;
|
||||
|
||||
.calendarTopTick {
|
||||
export const calendarTopTick = css`
|
||||
stroke: #e6e4e4;
|
||||
}
|
||||
`;
|
||||
|
||||
.calendarTopText {
|
||||
export const calendarTopText = css`
|
||||
text-anchor: middle;
|
||||
fill: #555;
|
||||
-webkit-touch-callout: none;
|
||||
@ -22,10 +24,10 @@
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
`;
|
||||
|
||||
.calendarHeader {
|
||||
export const calendarHeader = css`
|
||||
fill: #ffffff;
|
||||
stroke: #e0e0e0;
|
||||
stroke-width: 1.4;
|
||||
}
|
||||
`;
|
||||
@ -1,5 +1,7 @@
|
||||
import React from "react";
|
||||
import styles from "./calendar.css";
|
||||
import { cx } from '@emotion/css';
|
||||
import { calendarTopTick, calendarTopText } from './style';
|
||||
|
||||
|
||||
type TopPartOfCalendarProps = {
|
||||
value: string;
|
||||
@ -25,14 +27,14 @@ export const TopPartOfCalendar: React.FC<TopPartOfCalendarProps> = ({
|
||||
y1={y1Line}
|
||||
x2={x1Line}
|
||||
y2={y2Line}
|
||||
className={styles.calendarTopTick}
|
||||
className={cx(calendarTopTick)}
|
||||
key={value + "line"}
|
||||
/>
|
||||
<text
|
||||
key={value + "text"}
|
||||
y={yText}
|
||||
x={xText}
|
||||
className={styles.calendarTopText}
|
||||
className={cx(calendarTopText)}
|
||||
>
|
||||
{value}
|
||||
</text>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import React, { useState, SyntheticEvent, useRef, useEffect, useMemo } from 'react';
|
||||
import { useFieldSchema, Schema, RecursionField } from '@formily/react';
|
||||
import { cx } from '@emotion/css';
|
||||
import { Task } from '../../types/public-types';
|
||||
import { GridProps } from '../grid/grid';
|
||||
import { ganttDateRange, seedDates } from '../../helpers/date-helper';
|
||||
@ -14,16 +15,16 @@ import { GanttEvent } from '../../types/gantt-task-actions';
|
||||
import { DateSetup } from '../../types/date-setup';
|
||||
import { HorizontalScroll } from '../other/horizontal-scroll';
|
||||
import { removeHiddenTasks, sortTasks } from '../../helpers/other-helper';
|
||||
import styles from './gantt.css';
|
||||
import { wrapper } from './style';
|
||||
import { GanttToolbarContext } from '../../context';
|
||||
import { useDesignable } from '../../../../../schema-component';
|
||||
import { TableBlockProvider, useGanttBlockContext, useBlockRequestContext } from '../../../../../block-provider';
|
||||
|
||||
function Toolbar(props) {
|
||||
function Toolbar(props:any) {
|
||||
const fieldSchema = useFieldSchema();
|
||||
const toolBarSchema: Schema = useMemo(
|
||||
() =>
|
||||
fieldSchema.reduceProperties((buf, current) => {
|
||||
fieldSchema.reduceProperties((buf:any, current:any) => {
|
||||
if (current['x-component'].endsWith('.ActionBar')) {
|
||||
return current;
|
||||
}
|
||||
@ -38,12 +39,12 @@ function Toolbar(props) {
|
||||
);
|
||||
}
|
||||
|
||||
const getColumnWidth = (dataSetLength, clientWidth) => {
|
||||
const getColumnWidth = (dataSetLength:any, clientWidth:any) => {
|
||||
const columnWidth = clientWidth / dataSetLength > 50 ? Math.floor(clientWidth / dataSetLength) + 20 : 50;
|
||||
return columnWidth;
|
||||
};
|
||||
|
||||
export const Gantt: any = (props) => {
|
||||
export const Gantt: any = (props:any) => {
|
||||
const { designable } = useDesignable();
|
||||
const {
|
||||
headerHeight = designable ? 65 : 55,
|
||||
@ -363,12 +364,12 @@ export const Gantt: any = (props) => {
|
||||
setSelectedTask(newSelectedTask);
|
||||
};
|
||||
const handleTableExpanderClick = (expanded: boolean, record: any) => {
|
||||
const task = tasks.find((v) => v.id === record.id + '');
|
||||
const task = tasks.find((v:any) => v.id === record.id + '');
|
||||
if (onExpanderClick && record.children.length) {
|
||||
onExpanderClick({ ...task, hideChildren: !expanded });
|
||||
}
|
||||
};
|
||||
const handleProgressChange = async (task) => {
|
||||
const handleProgressChange = async (task:Task) => {
|
||||
await resource.update({
|
||||
filterByTk: task.id,
|
||||
values: {
|
||||
@ -377,7 +378,7 @@ export const Gantt: any = (props) => {
|
||||
},
|
||||
});
|
||||
};
|
||||
const handleTaskChange = async (task) => {
|
||||
const handleTaskChange = async (task:Task) => {
|
||||
await resource.update({
|
||||
filterByTk: task.id,
|
||||
values: {
|
||||
@ -448,7 +449,7 @@ export const Gantt: any = (props) => {
|
||||
<RecursionField name={'table'} schema={fieldSchema.properties.table} />
|
||||
</TableBlockProvider>
|
||||
|
||||
<div className={styles.wrapper} onKeyDown={handleKeyDown} tabIndex={0} ref={wrapperRef}>
|
||||
<div className={cx(wrapper)} onKeyDown={handleKeyDown} tabIndex={0} ref={wrapperRef}>
|
||||
<TaskGantt
|
||||
gridProps={gridProps}
|
||||
calendarProps={calendarProps}
|
||||
|
||||
@ -1,22 +1,25 @@
|
||||
.ganttVerticalContainer {
|
||||
|
||||
import { css } from '@emotion/css';
|
||||
|
||||
export const ganttVerticalContainer=css `
|
||||
overflow: hidden;
|
||||
font-size: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width:100%
|
||||
}
|
||||
`
|
||||
|
||||
.horizontalContainer {
|
||||
export const horizontalContainer=css `
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
`
|
||||
|
||||
.wrapper {
|
||||
export const wrapper =css`
|
||||
display: flex;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
outline: none;
|
||||
position: relative;
|
||||
}
|
||||
`
|
||||
@ -1,8 +1,10 @@
|
||||
import React, { useRef, useEffect, forwardRef } from 'react';
|
||||
import { cx } from '@emotion/css';
|
||||
import { GridProps, Grid } from '../grid/grid';
|
||||
import { CalendarProps, Calendar } from '../calendar/calendar';
|
||||
import { TaskGanttContentProps, TaskGanttContent } from './task-gantt-content';
|
||||
import styles from './gantt.css';
|
||||
import { ganttVerticalContainer,horizontalContainer } from './style';
|
||||
|
||||
|
||||
export type TaskGanttProps = {
|
||||
gridProps: GridProps;
|
||||
@ -32,7 +34,7 @@ export const TaskGantt: React.FC<TaskGanttProps> = forwardRef(
|
||||
}, [scrollX]);
|
||||
|
||||
return (
|
||||
<div className={styles.ganttVerticalContainer} ref={ref} dir="ltr">
|
||||
<div className={cx(ganttVerticalContainer)} ref={ref} dir="ltr">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={gridProps.svgWidth}
|
||||
@ -43,7 +45,7 @@ export const TaskGantt: React.FC<TaskGanttProps> = forwardRef(
|
||||
</svg>
|
||||
<div
|
||||
ref={horizontalContainerRef}
|
||||
className={styles.horizontalContainer}
|
||||
className={cx(horizontalContainer)}
|
||||
style={ganttHeight ? { height: ganttHeight, width: gridProps.svgWidth } : { width: gridProps.svgWidth }}
|
||||
>
|
||||
<svg
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import React, { ReactChild } from "react";
|
||||
import { cx } from '@emotion/css';
|
||||
import { Task } from "../../types/public-types";
|
||||
import { addToDate } from "../../helpers/date-helper";
|
||||
import styles from "./grid.css";
|
||||
import { gridRowLine, gridRow,gridTick } from './style';
|
||||
|
||||
export type GridBodyProps = {
|
||||
tasks: Task[];
|
||||
@ -30,7 +31,7 @@ export const GridBody: React.FC<GridBodyProps> = ({
|
||||
y1={0}
|
||||
x2={svgWidth}
|
||||
y2={0}
|
||||
className={styles.gridRowLine}
|
||||
className={cx(gridRowLine)}
|
||||
/>,
|
||||
];
|
||||
for (const task of tasks) {
|
||||
@ -41,7 +42,7 @@ export const GridBody: React.FC<GridBodyProps> = ({
|
||||
y={y}
|
||||
width={svgWidth}
|
||||
height={rowHeight}
|
||||
className={styles.gridRow}
|
||||
className={cx(gridRow)}
|
||||
/>
|
||||
);
|
||||
rowLines.push(
|
||||
@ -51,7 +52,7 @@ export const GridBody: React.FC<GridBodyProps> = ({
|
||||
y1={y + rowHeight}
|
||||
x2={svgWidth}
|
||||
y2={y + rowHeight}
|
||||
className={styles.gridRowLine}
|
||||
className={cx(gridRowLine)}
|
||||
/>
|
||||
);
|
||||
y += rowHeight;
|
||||
@ -70,7 +71,7 @@ export const GridBody: React.FC<GridBodyProps> = ({
|
||||
y1={0}
|
||||
x2={tickX}
|
||||
y2={y}
|
||||
className={styles.gridTick}
|
||||
className={cx(gridTick)}
|
||||
/>
|
||||
);
|
||||
if (
|
||||
|
||||
@ -1,15 +0,0 @@
|
||||
.gridRow {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.gridRow:nth-child(even) {
|
||||
fill: #f5f5f5;
|
||||
}
|
||||
|
||||
.gridRowLine {
|
||||
stroke: #ebeff2;
|
||||
}
|
||||
|
||||
.gridTick {
|
||||
stroke: #e6e4e4;
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
import { css } from '@emotion/css';
|
||||
export const gridRow = css`
|
||||
fill: #fff;
|
||||
&:nth-child(even) {
|
||||
fill: #f5f5f5;
|
||||
}
|
||||
`;
|
||||
|
||||
export const gridRowLine = css`
|
||||
stroke: #ebeff2;
|
||||
`;
|
||||
|
||||
export const gridTick = css`
|
||||
stroke: #e6e4e4;
|
||||
`;
|
||||
@ -1,33 +0,0 @@
|
||||
.scrollWrapper {
|
||||
overflow: auto;
|
||||
max-width: 100%;
|
||||
/*firefox*/
|
||||
scrollbar-width: thin;
|
||||
/*iPad*/
|
||||
height: 1.2rem;
|
||||
}
|
||||
.scrollWrapper::-webkit-scrollbar {
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
}
|
||||
.scrollWrapper::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
.scrollWrapper::-webkit-scrollbar-thumb {
|
||||
border: 6px solid transparent;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
background: var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));
|
||||
border-radius: 10px;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
.scrollWrapper::-webkit-scrollbar-thumb:hover {
|
||||
border: 4px solid transparent;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
background: var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));
|
||||
background-clip: padding-box;
|
||||
}
|
||||
@media only screen and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
|
||||
}
|
||||
.scroll {
|
||||
height: 1px;
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
import React, { SyntheticEvent, useRef, useEffect } from "react";
|
||||
import styles from "./horizontal-scroll.css";
|
||||
import { cx } from '@emotion/css';
|
||||
import {scrollWrapper,horizontalScroll} from './style'
|
||||
|
||||
export const HorizontalScroll: React.FC<{
|
||||
scroll: number;
|
||||
@ -24,11 +25,11 @@ export const HorizontalScroll: React.FC<{
|
||||
? `0px ${taskListWidth}px 0px 0px`
|
||||
: `0px 0px 0px ${taskListWidth}px`,
|
||||
}}
|
||||
className={styles.scrollWrapper}
|
||||
className={cx(scrollWrapper)}
|
||||
onScroll={onScroll}
|
||||
ref={scrollRef}
|
||||
>
|
||||
<div style={{ width: svgWidth }} className={styles.scroll} />
|
||||
<div style={{ width: svgWidth }} className={cx(horizontalScroll)} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -0,0 +1,98 @@
|
||||
|
||||
import { css } from '@emotion/css';
|
||||
|
||||
export const scrollWrapper =css`
|
||||
overflow: auto;
|
||||
max-width: 100%;
|
||||
/*firefox*/
|
||||
scrollbar-width: thin;
|
||||
/*iPad*/
|
||||
height: 1.2rem;
|
||||
&::-webkit-scrollbar {
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
};
|
||||
&::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
};
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border: 6px solid transparent;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
background: var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));
|
||||
border-radius: 10px;
|
||||
background-clip: padding-box;
|
||||
};
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
border: 4px solid transparent;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
background: var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));
|
||||
background-clip: padding-box;
|
||||
}
|
||||
`
|
||||
|
||||
export const horizontalScroll =css`
|
||||
height: 1px;
|
||||
`
|
||||
|
||||
export const tooltipDefaultContainer =css`
|
||||
background: #fff;
|
||||
padding: 12px;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
`
|
||||
|
||||
export const tooltipDefaultContainerParagraph =css`
|
||||
font-size: 12px;
|
||||
margin-bottom: 6px;
|
||||
color: #666;
|
||||
`
|
||||
|
||||
export const tooltipDetailsContainer =css`
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
pointer-events: none;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
`
|
||||
|
||||
export const tooltipDetailsContainerHidden= css`
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
pointer-events: none;
|
||||
`
|
||||
|
||||
|
||||
export const verticalScroll =css`
|
||||
overflow: hidden auto;
|
||||
width: 1rem;
|
||||
flex-shrink: 0;
|
||||
/*firefox*/
|
||||
scrollbar-width: thin;
|
||||
&::-webkit-scrollbar {
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
};
|
||||
&::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
};
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border: 6px solid transparent;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
background: var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));
|
||||
border-radius: 10px;
|
||||
background-clip: padding-box;
|
||||
};
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
border: 4px solid transparent;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
background: var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
`
|
||||
|
||||
|
||||
@ -1,30 +0,0 @@
|
||||
.tooltipDefaultContainer {
|
||||
background: #fff;
|
||||
padding: 12px;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
}
|
||||
|
||||
.tooltipDefaultContainerParagraph {
|
||||
font-size: 12px;
|
||||
margin-bottom: 6px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.tooltipDetailsContainer {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
pointer-events: none;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tooltipDetailsContainerHidden {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
pointer-events: none;
|
||||
}
|
||||
@ -1,7 +1,13 @@
|
||||
import React, { useRef, useEffect, useState } from "react";
|
||||
import { Task } from "../../types/public-types";
|
||||
import { BarTask } from "../../types/bar-task";
|
||||
import styles from "./tooltip.css";
|
||||
import React, { useRef, useEffect, useState } from 'react';
|
||||
import { cx } from '@emotion/css';
|
||||
import { Task } from '../../types/public-types';
|
||||
import { BarTask } from '../../types/bar-task';
|
||||
import {
|
||||
tooltipDefaultContainer,
|
||||
tooltipDetailsContainer,
|
||||
tooltipDetailsContainerHidden,
|
||||
tooltipDefaultContainerParagraph,
|
||||
} from './style';
|
||||
|
||||
export type TooltipProps = {
|
||||
task: BarTask;
|
||||
@ -63,12 +69,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
|
||||
const tooltipLeftmostPoint = tooltipWidth + newRelatedX;
|
||||
const fullChartWidth = taskListWidth + svgContainerWidth;
|
||||
if (tooltipLeftmostPoint > fullChartWidth) {
|
||||
newRelatedX =
|
||||
task.x1 +
|
||||
taskListWidth -
|
||||
arrowIndent * 1.5 -
|
||||
scrollX -
|
||||
tooltipWidth;
|
||||
newRelatedX = task.x1 + taskListWidth - arrowIndent * 1.5 - scrollX - tooltipWidth;
|
||||
}
|
||||
if (newRelatedX < taskListWidth) {
|
||||
newRelatedX = svgContainerWidth + taskListWidth - tooltipWidth;
|
||||
@ -100,11 +101,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
|
||||
return (
|
||||
<div
|
||||
ref={tooltipRef}
|
||||
className={
|
||||
relatedX
|
||||
? styles.tooltipDetailsContainer
|
||||
: styles.tooltipDetailsContainerHidden
|
||||
}
|
||||
className={relatedX ? cx(tooltipDetailsContainer) : cx(tooltipDetailsContainerHidden)}
|
||||
style={{ left: relatedX, top: relatedY }}
|
||||
>
|
||||
<TooltipContent task={task} fontSize={fontSize} fontFamily={fontFamily} />
|
||||
@ -122,24 +119,18 @@ export const StandardTooltipContent: React.FC<{
|
||||
fontFamily,
|
||||
};
|
||||
return (
|
||||
<div className={styles.tooltipDefaultContainer} style={style}>
|
||||
<b style={{ fontSize: fontSize + 6 }}>{`${
|
||||
task.name
|
||||
}: ${task.start.getDate()}-${
|
||||
<div className={cx(tooltipDefaultContainer)} style={style}>
|
||||
<b style={{ fontSize: fontSize + 6 }}>{`${task.name}: ${task.start.getDate()}-${
|
||||
task.start.getMonth() + 1
|
||||
}-${task.start.getFullYear()} - ${task.end.getDate()}-${
|
||||
task.end.getMonth() + 1
|
||||
}-${task.end.getFullYear()}`}</b>
|
||||
}-${task.start.getFullYear()} - ${task.end.getDate()}-${task.end.getMonth() + 1}-${task.end.getFullYear()}`}</b>
|
||||
{task.end.getTime() - task.start.getTime() !== 0 && (
|
||||
<p className={styles.tooltipDefaultContainerParagraph}>{`Duration: ${~~(
|
||||
<p className={cx(tooltipDefaultContainerParagraph)}>{`Duration: ${~~(
|
||||
(task.end.getTime() - task.start.getTime()) /
|
||||
(1000 * 60 * 60 * 24)
|
||||
)} day(s)`}</p>
|
||||
)}
|
||||
|
||||
<p className={styles.tooltipDefaultContainerParagraph}>
|
||||
{!!task.progress && `Progress: ${task.progress} %`}
|
||||
</p>
|
||||
<p className={cx(tooltipDefaultContainerParagraph)}>{!!task.progress && `Progress: ${task.progress} %`}</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,27 +0,0 @@
|
||||
.scroll {
|
||||
overflow: hidden auto;
|
||||
width: 1rem;
|
||||
flex-shrink: 0;
|
||||
/*firefox*/
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
.scroll::-webkit-scrollbar {
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
}
|
||||
.scroll::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
.scroll::-webkit-scrollbar-thumb {
|
||||
border: 6px solid transparent;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
background: var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));
|
||||
border-radius: 10px;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
.scroll::-webkit-scrollbar-thumb:hover {
|
||||
border: 4px solid transparent;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
background: var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));
|
||||
background-clip: padding-box;
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
import React, { SyntheticEvent, useRef, useEffect } from "react";
|
||||
import styles from "./vertical-scroll.css";
|
||||
import React, { SyntheticEvent, useRef, useEffect } from 'react';
|
||||
import { cx } from '@emotion/css';
|
||||
import { verticalScroll } from './style';
|
||||
|
||||
export const VerticalScroll: React.FC<{
|
||||
scroll: number;
|
||||
@ -8,14 +9,7 @@ export const VerticalScroll: React.FC<{
|
||||
headerHeight: number;
|
||||
rtl: boolean;
|
||||
onScroll: (event: SyntheticEvent<HTMLDivElement>) => void;
|
||||
}> = ({
|
||||
scroll,
|
||||
ganttHeight,
|
||||
ganttFullHeight,
|
||||
headerHeight,
|
||||
rtl,
|
||||
onScroll,
|
||||
}) => {
|
||||
}> = ({ scroll, ganttHeight, ganttFullHeight, headerHeight, rtl, onScroll }) => {
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
@ -29,9 +23,9 @@ export const VerticalScroll: React.FC<{
|
||||
style={{
|
||||
height: ganttHeight,
|
||||
marginTop: headerHeight,
|
||||
marginLeft: rtl ? "" : "-1rem",
|
||||
marginLeft: rtl ? '' : '-1rem',
|
||||
}}
|
||||
className={styles.scroll}
|
||||
className={cx(verticalScroll)}
|
||||
onScroll={onScroll}
|
||||
ref={scrollRef}
|
||||
>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import React from "react";
|
||||
import styles from "./bar.css";
|
||||
import React from 'react';
|
||||
import { cx } from '@emotion/css';
|
||||
import { barHandle } from './style';
|
||||
|
||||
type BarDateHandleProps = {
|
||||
x: number;
|
||||
@ -9,21 +10,14 @@ type BarDateHandleProps = {
|
||||
barCornerRadius: number;
|
||||
onMouseDown: (event: React.MouseEvent<SVGRectElement, MouseEvent>) => void;
|
||||
};
|
||||
export const BarDateHandle: React.FC<BarDateHandleProps> = ({
|
||||
x,
|
||||
y,
|
||||
width,
|
||||
height,
|
||||
barCornerRadius,
|
||||
onMouseDown,
|
||||
}) => {
|
||||
export const BarDateHandle: React.FC<BarDateHandleProps> = ({ x, y, width, height, barCornerRadius, onMouseDown }) => {
|
||||
return (
|
||||
<rect
|
||||
x={x}
|
||||
y={y}
|
||||
width={width}
|
||||
height={height}
|
||||
className={styles.barHandle}
|
||||
className={cx(barHandle)}
|
||||
ry={barCornerRadius}
|
||||
rx={barCornerRadius}
|
||||
onMouseDown={onMouseDown}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import React from "react";
|
||||
import style from "./bar.css";
|
||||
import { cx } from '@emotion/css';
|
||||
import { barBackground } from './style';
|
||||
|
||||
type BarDisplayProps = {
|
||||
x: number;
|
||||
@ -49,7 +50,7 @@ export const BarDisplay: React.FC<BarDisplayProps> = ({
|
||||
ry={barCornerRadius}
|
||||
rx={barCornerRadius}
|
||||
fill={getBarColor()}
|
||||
className={style.barBackground}
|
||||
className={cx(barBackground)}
|
||||
/>
|
||||
<rect
|
||||
x={progressX}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import React from "react";
|
||||
import styles from "./bar.css";
|
||||
import { cx } from '@emotion/css';
|
||||
import { barHandle } from './style';
|
||||
|
||||
type BarProgressHandleProps = {
|
||||
progressPoint: string;
|
||||
@ -11,7 +12,7 @@ export const BarProgressHandle: React.FC<BarProgressHandleProps> = ({
|
||||
}) => {
|
||||
return (
|
||||
<polygon
|
||||
className={styles.barHandle}
|
||||
className={cx(barHandle)}
|
||||
points={progressPoint}
|
||||
onMouseDown={onMouseDown}
|
||||
/>
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
import React from "react";
|
||||
import { cx } from '@emotion/css';
|
||||
import { getProgressPoint } from "../../../helpers/bar-helper";
|
||||
import { BarDisplay } from "./bar-display";
|
||||
import { BarProgressHandle } from "./bar-progress-handle";
|
||||
import { TaskItemProps } from "../task-item";
|
||||
import styles from "./bar.css";
|
||||
import { barWrapper } from './style';
|
||||
|
||||
|
||||
export const BarSmall: React.FC<TaskItemProps> = ({
|
||||
task,
|
||||
@ -18,7 +20,7 @@ export const BarSmall: React.FC<TaskItemProps> = ({
|
||||
task.height
|
||||
);
|
||||
return (
|
||||
<g className={styles.barWrapper} tabIndex={0}>
|
||||
<g className={cx(barWrapper)} tabIndex={0}>
|
||||
<BarDisplay
|
||||
x={task.x1}
|
||||
y={task.y}
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
.barWrapper {
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.barWrapper:hover .barHandle {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.barHandle {
|
||||
fill: #ddd;
|
||||
cursor: ew-resize;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.barBackground {
|
||||
user-select: none;
|
||||
stroke-width: 0;
|
||||
}
|
||||
@ -1,10 +1,12 @@
|
||||
import React from "react";
|
||||
import { cx } from '@emotion/css';
|
||||
import { getProgressPoint } from "../../../helpers/bar-helper";
|
||||
import { BarDisplay } from "./bar-display";
|
||||
import { BarDateHandle } from "./bar-date-handle";
|
||||
import { BarProgressHandle } from "./bar-progress-handle";
|
||||
import { TaskItemProps } from "../task-item";
|
||||
import styles from "./bar.css";
|
||||
import { barWrapper } from './style';
|
||||
|
||||
|
||||
export const Bar: React.FC<TaskItemProps> = ({
|
||||
task,
|
||||
@ -21,7 +23,7 @@ export const Bar: React.FC<TaskItemProps> = ({
|
||||
);
|
||||
const handleHeight = task.height - 2;
|
||||
return (
|
||||
<g className={styles.barWrapper} tabIndex={0}>
|
||||
<g className={cx(barWrapper)} tabIndex={0}>
|
||||
<BarDisplay
|
||||
x={task.x1}
|
||||
y={task.y}
|
||||
|
||||
@ -0,0 +1,22 @@
|
||||
import { css } from '@emotion/css';
|
||||
|
||||
export const barWrapper = css`
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
&:hover .barHandle {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
`;
|
||||
|
||||
export const barHandle = css`
|
||||
fill: #ddd;
|
||||
cursor: ew-resize;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
`;
|
||||
|
||||
export const barBackground = css`
|
||||
user-select: none;
|
||||
stroke-width: 0;
|
||||
`;
|
||||
@ -1,8 +0,0 @@
|
||||
.milestoneWrapper {
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.milestoneBackground {
|
||||
user-select: none;
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
import React from "react";
|
||||
import { cx } from '@emotion/css';
|
||||
import { TaskItemProps } from "../task-item";
|
||||
import styles from "./milestone.css";
|
||||
import { milestoneWrapper,milestoneBackground } from './style';
|
||||
|
||||
export const Milestone: React.FC<TaskItemProps> = ({
|
||||
task,
|
||||
@ -17,7 +18,7 @@ export const Milestone: React.FC<TaskItemProps> = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<g tabIndex={0} className={styles.milestoneWrapper}>
|
||||
<g tabIndex={0} className={cx(milestoneWrapper)}>
|
||||
<rect
|
||||
fill={getBarColor()}
|
||||
x={task.x1}
|
||||
@ -27,7 +28,7 @@ export const Milestone: React.FC<TaskItemProps> = ({
|
||||
rx={task.barCornerRadius}
|
||||
ry={task.barCornerRadius}
|
||||
transform={transform}
|
||||
className={styles.milestoneBackground}
|
||||
className={cx(milestoneBackground)}
|
||||
onMouseDown={e => {
|
||||
isDateChangeable && onEventStart("move", task, e);
|
||||
}}
|
||||
|
||||
@ -0,0 +1,11 @@
|
||||
|
||||
import { css } from '@emotion/css';
|
||||
|
||||
export const milestoneWrapper =css`
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
`
|
||||
|
||||
export const milestoneBackground =css`
|
||||
user-select: none;
|
||||
`
|
||||
@ -1,13 +0,0 @@
|
||||
.projectWrapper {
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.projectBackground {
|
||||
user-select: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.projectTop {
|
||||
user-select: none;
|
||||
}
|
||||
@ -1,6 +1,8 @@
|
||||
import React from "react";
|
||||
import { cx } from '@emotion/css';
|
||||
import { TaskItemProps } from "../task-item";
|
||||
import styles from "./project.css";
|
||||
import { projectWrapper,projectBackground,projectTop } from './style';
|
||||
|
||||
|
||||
export const Project: React.FC<TaskItemProps> = ({ task, isSelected }) => {
|
||||
const barColor = isSelected
|
||||
@ -29,7 +31,7 @@ export const Project: React.FC<TaskItemProps> = ({ task, isSelected }) => {
|
||||
].join(",");
|
||||
|
||||
return (
|
||||
<g tabIndex={0} className={styles.projectWrapper}>
|
||||
<g tabIndex={0} className={cx(projectWrapper)}>
|
||||
<rect
|
||||
fill={barColor}
|
||||
x={task.x1}
|
||||
@ -38,7 +40,7 @@ export const Project: React.FC<TaskItemProps> = ({ task, isSelected }) => {
|
||||
height={task.height}
|
||||
rx={task.barCornerRadius}
|
||||
ry={task.barCornerRadius}
|
||||
className={styles.projectBackground}
|
||||
className={cx(projectBackground)}
|
||||
/>
|
||||
<rect
|
||||
x={task.progressX}
|
||||
@ -57,15 +59,15 @@ export const Project: React.FC<TaskItemProps> = ({ task, isSelected }) => {
|
||||
height={task.height / 2}
|
||||
rx={task.barCornerRadius}
|
||||
ry={task.barCornerRadius}
|
||||
className={styles.projectTop}
|
||||
className={cx(projectTop)}
|
||||
/>
|
||||
<polygon
|
||||
className={styles.projectTop}
|
||||
className={cx(projectTop)}
|
||||
points={projectLeftTriangle}
|
||||
fill={barColor}
|
||||
/>
|
||||
<polygon
|
||||
className={styles.projectTop}
|
||||
className={cx(projectTop)}
|
||||
points={projectRightTriangle}
|
||||
fill={barColor}
|
||||
/>
|
||||
|
||||
@ -0,0 +1,16 @@
|
||||
|
||||
import { css } from '@emotion/css';
|
||||
|
||||
export const projectWrapper =css `
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
`
|
||||
|
||||
export const projectBackground =css`
|
||||
user-select: none;
|
||||
opacity: 0.6;
|
||||
`
|
||||
|
||||
export const projectTop =css`
|
||||
user-select: none;
|
||||
`
|
||||
@ -1,4 +1,7 @@
|
||||
.barLabel {
|
||||
|
||||
import { css } from '@emotion/css';
|
||||
|
||||
export const barLabel =css`
|
||||
fill: #fff;
|
||||
text-anchor: middle;
|
||||
font-weight: lighter;
|
||||
@ -9,9 +12,9 @@
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
`
|
||||
|
||||
.barLabelOutside {
|
||||
export const barLabelOutside =css`
|
||||
fill: #555;
|
||||
text-anchor: start;
|
||||
-webkit-touch-callout: none;
|
||||
@ -20,4 +23,4 @@
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
`
|
||||
@ -1,11 +1,12 @@
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { cx } from '@emotion/css';
|
||||
import { BarTask } from "../../types/bar-task";
|
||||
import { GanttContentMoveAction } from "../../types/gantt-task-actions";
|
||||
import { Bar } from "./bar/bar";
|
||||
import { BarSmall } from "./bar/bar-small";
|
||||
import { Milestone } from "./milestone/milestone";
|
||||
import { Project } from "./project/project";
|
||||
import style from "./task-list.css";
|
||||
import { barLabel,barLabelOutside } from './style';
|
||||
|
||||
export type TaskItemProps = {
|
||||
task: BarTask;
|
||||
@ -113,8 +114,8 @@ export const TaskItem: React.FC<TaskItemProps> = props => {
|
||||
y={task.y + taskHeight * 0.5}
|
||||
className={
|
||||
isTextInside
|
||||
? style.barLabel
|
||||
: style.barLabel && style.barLabelOutside
|
||||
? cx(barLabel)
|
||||
: cx(barLabel) && cx(barLabelOutside)
|
||||
}
|
||||
ref={textRef}
|
||||
>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user