Skip to content

Commit 747c70e

Browse files
mfoulks3200mfoulks3200
committed
Fixed styling issues
1 parent 3e43260 commit 747c70e

20 files changed

+393
-297
lines changed

‎.storybook/main.ts

Lines changed: 46 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,51 @@ import path from 'path';
33

44
const config: StorybookConfig = {
55
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
6-
addons: ['@storybook/addon-webpack5-compiler-swc', '@storybook/addon-essentials', '@storybook/addon-onboarding', '@chromatic-com/storybook', '@storybook/addon-interactions'],
6+
addons: [
7+
'@storybook/addon-webpack5-compiler-swc',
8+
'@storybook/addon-essentials',
9+
'@storybook/addon-onboarding',
10+
'@chromatic-com/storybook',
11+
'@storybook/addon-interactions',
12+
{
13+
name: '@storybook/addon-styling-webpack',
14+
options: {
15+
rules: [
16+
// Replaces existing CSS rules to support CSS Modules
17+
{
18+
test: /\.css$/,
19+
use: [
20+
'style-loader',
21+
{
22+
loader: 'css-loader',
23+
options: {
24+
modules: {
25+
localIdentName: '[name]__[local]--[hash:base64:5]',
26+
},
27+
},
28+
},
29+
],
30+
},
31+
{
32+
test: /\.less$/i,
33+
use: [
34+
'style-loader',
35+
{
36+
loader: 'css-loader',
37+
options: {
38+
sourceMap: true,
39+
modules: {
40+
localIdentName: '[name]__[local]--[hash:base64:5]',
41+
},
42+
},
43+
},
44+
'less-loader',
45+
],
46+
},
47+
],
48+
},
49+
},
50+
],
751
framework: {
852
name: '@storybook/react-webpack5',
953
options: {},
@@ -14,15 +58,7 @@ const config: StorybookConfig = {
1458
'@/*': path.resolve(__dirname, '../src/*'),
1559
};
1660

17-
config.module!.rules!.push({
18-
test: /\.less$/i,
19-
use: [
20-
// compiles Less to CSS
21-
'style-loader',
22-
'css-loader',
23-
'less-loader',
24-
],
25-
});
61+
config.resolve?.extensions?.push('.less', '.css');
2662

2763
return config;
2864
},

‎package-lock.json

Lines changed: 64 additions & 17 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,17 +41,19 @@
4141
"dependencies": {
4242
"@interactjs/types": "^1.10.11",
4343
"@types/react-virtualized": "^9.21.14",
44+
"clsx": "^2.1.1",
4445
"framework-utils": "^1.1.0",
4546
"interactjs": "^1.10.11",
4647
"react-virtualized": "^9.22.3",
47-
"vocs": "^1.0.0",
48-
"typescript": "^5.8.2"
48+
"typescript": "^5.8.2",
49+
"vocs": "^1.0.0"
4950
},
5051
"devDependencies": {
5152
"@chromatic-com/storybook": "^3.2.5",
5253
"@storybook/addon-essentials": "^8.6.4",
5354
"@storybook/addon-interactions": "^8.6.4",
5455
"@storybook/addon-onboarding": "^8.6.4",
56+
"@storybook/addon-styling-webpack": "^1.0.1",
5557
"@storybook/addon-webpack5-compiler-swc": "^2.1.0",
5658
"@storybook/blocks": "^8.6.4",
5759
"@storybook/manager-api": "^8.6.4",
@@ -78,6 +80,7 @@
7880
"react": "^18.0.0",
7981
"react-dom": "^18.0.2",
8082
"storybook": "^8.6.4",
83+
"style-loader": "^4.0.0",
8184
"ts-loader": "^9.5.2",
8285
"typescript": "^5.8.2",
8386
"vite-tsconfig-paths": "^5.1.4",
@@ -86,4 +89,4 @@
8689
"yaml": "^2.4.0",
8790
"yorkie": "^2.0.0"
8891
}
89-
}
92+
}

‎src/components/cursor/cursor.less

Lines changed: 25 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,28 @@
1-
.timeline-editor {
2-
&-cursor {
3-
cursor: ew-resize;
4-
position: absolute;
5-
top: 32px;
6-
height: calc(100% - 32px);
7-
box-sizing: border-box;
8-
border-left: 1px solid #5297FF;
9-
border-right: 1px solid #5297FF;
10-
transform: translateX(-25%) scaleX(0.5);
1+
.cursor {
2+
cursor: ew-resize;
3+
position: absolute;
4+
top: 20px;
5+
height: calc(100% - 32px);
6+
box-sizing: border-box;
7+
border-left: 1px solid #5297FF;
8+
border-right: 1px solid #5297FF;
9+
transform: translateX(-25%) scaleX(0.5);
1110

12-
&-top {
13-
position: absolute;
14-
top: 0;
15-
left: 50%;
16-
transform: translate(-50%, 0) scaleX(2);
17-
margin: auto;
18-
}
11+
&Top {
12+
position: absolute;
13+
top: 0;
14+
left: 50%;
15+
transform: translate(-50%, 0) scaleX(2);
16+
margin: auto;
17+
}
1918

20-
&-area {
21-
width: 16px;
22-
height: 100%;
23-
cursor: ew-resize;
24-
position: absolute;
25-
top: 0;
26-
left: 50%;
27-
transform: translateX(-50%);
28-
}
19+
&Area {
20+
width: 16px;
21+
height: 100%;
22+
cursor: ew-resize;
23+
position: absolute;
24+
top: 0;
25+
left: 50%;
26+
transform: translateX(-50%);
2927
}
30-
}
28+
}

‎src/components/cursor/cursor.tsx

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { prefix } from '../../utils/deal_class_prefix';
55
import { parserPixelToTime, parserTimeToPixel } from '../../utils/deal_data';
66
import { RowDnd } from '../row_rnd/row_rnd';
77
import { RowRndApi } from '../row_rnd/row_rnd_interface';
8-
import './cursor.less';
8+
import * as styles from './cursor.less';
99

1010
/** 动画时间轴组件参数 */
1111
export type CursorProps = CommonProp & {
@@ -91,14 +91,20 @@ export const Cursor: FC<CursorProps> = ({
9191
return false;
9292
}}
9393
>
94-
<div className={prefix('cursor')}>
95-
<svg className={prefix('cursor-top')} width="8" height="12" viewBox="0 0 8 12" fill="none">
94+
<div className={styles.cursor}>
95+
<svg
96+
className={styles.cursorTop}
97+
width="8"
98+
height="12"
99+
viewBox="0 0 8 12"
100+
fill="none"
101+
>
96102
<path
97103
d="M0 1C0 0.447715 0.447715 0 1 0H7C7.55228 0 8 0.447715 8 1V9.38197C8 9.76074 7.786 10.107 7.44721 10.2764L4.44721 11.7764C4.16569 11.9172 3.83431 11.9172 3.55279 11.7764L0.552786 10.2764C0.214002 10.107 0 9.76074 0 9.38197V1Z"
98104
fill="#5297FF"
99105
/>
100106
</svg>
101-
<div className={prefix('cursor-area')} />
107+
<div className={styles.cursorArea} />
102108
</div>
103109
</RowDnd>
104110
);

‎src/components/edit_area/drag_lines.less

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
1-
.timeline-editor {
2-
&-drag-line-container {
3-
position: absolute;
4-
height: 100%;
5-
top: 0;
6-
left: 0;
7-
}
1+
.dragLineContainer {
2+
position: absolute;
3+
height: 100%;
4+
top: 0;
5+
left: 0;
6+
}
87

9-
&-drag-line {
10-
width: 0;
11-
position: absolute;
12-
top: 0;
13-
height: 99%;
14-
border-left: 1px dashed rgba(82, 151, 255, 0.6);
15-
}
8+
.dragLine {
9+
width: 0;
10+
position: absolute;
11+
top: 0;
12+
height: 99%;
13+
border-left: 1px dashed rgba(82, 151, 255, 0.6);
1614
}

0 commit comments

Comments
 (0)