Skip to content

Commit 434177d

Browse files
lukasbachlukasbach
committed
feat: modern css
1 parent bed8058 commit 434177d

File tree

5 files changed

+219
-10
lines changed

5 files changed

+219
-10
lines changed

‎.storybook/preview.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { sortStories } from './utils/story-helpers';
22
import { storyOrder } from './utils/storyOrder';
33
import React from 'react';
44

5-
import 'react-complex-tree/src/style.css';
5+
import 'react-complex-tree/src/style-modern.css';
66
import '../packages/autodemo/src/styles.css';
77

88
export const parameters = {

‎packages/core/src/renderers/createDefaultRenderers.tsx

+2-6
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,7 @@ export const createDefaultRenderers = (
5252
<path
5353
fillRule="evenodd"
5454
clipRule="evenodd"
55-
d="M12,5c-0.28,0-0.53,0.11-0.71,0.29L8,8.59L4.71,5.29C4.53,5.11,4.28,5,4,5
56-
C3.45,5,3,5.45,3,6c0,0.28,0.11,0.53,0.29,0.71l4,4C7.47,10.89,7.72,11,8,11s0.53-0.11,0.71-0.29l4-4C12.89,6.53,13,6.28,13,6
57-
C13,5.45,12.55,5,12,5z"
55+
d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
5856
className="rct-tree-item-arrow-path"
5957
/>
6058
</g>
@@ -76,9 +74,7 @@ export const createDefaultRenderers = (
7674
<path
7775
fillRule="evenodd"
7876
clipRule="evenodd"
79-
d="M10.71,7.29l-4-4C6.53,3.11,6.28,3,6,3C5.45,3,5,3.45,5,4
80-
c0,0.28,0.11,0.53,0.29,0.71L8.59,8l-3.29,3.29C5.11,11.47,5,11.72,5,12c0,0.55,0.45,1,1,1c0.28,0,0.53-0.11,0.71-0.29l4-4
81-
C10.89,8.53,11,8.28,11,8C11,7.72,10.89,7.47,10.71,7.29z"
77+
d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
8278
className="rct-tree-item-arrow-path"
8379
/>
8480
</g>

‎packages/core/src/stories/BasicExamples.stories.tsx

+34
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,40 @@ export const SingleTree = () => (
4141
</UncontrolledTreeEnvironment>
4242
);
4343

44+
export const DarkMode = () => (
45+
<UncontrolledTreeEnvironment<string>
46+
canDragAndDrop
47+
canDropOnFolder
48+
canReorderItems
49+
dataProvider={
50+
new StaticTreeDataProvider(longTree.items, (item, data) => ({
51+
...item,
52+
data,
53+
}))
54+
}
55+
getItemTitle={item => item.data}
56+
viewState={{
57+
'tree-1': {
58+
expandedItems: [
59+
'Fruit',
60+
'Meals',
61+
'America',
62+
'Europe',
63+
'Asia',
64+
'Desserts',
65+
],
66+
},
67+
}}
68+
>
69+
<div
70+
className="rct-dark"
71+
style={{ backgroundColor: '#222', color: '#e3e3e3' }}
72+
>
73+
<Tree treeId="tree-1" rootItem="root" treeLabel="Tree Example" />
74+
</div>
75+
</UncontrolledTreeEnvironment>
76+
);
77+
4478
export const PredefinedViewState = () => (
4579
<UncontrolledTreeEnvironment<string>
4680
canDragAndDrop

‎packages/core/src/style-modern.css

+179
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
@import "./style.css";
2+
3+
:root {
4+
--rct-color-tree-bg: transparent;
5+
--rct-item-height: 28px;
6+
--rct-color-search-highlight-bg: #acccf1;
7+
8+
--rct-color-tree-focus-outline: transparent;
9+
--rct-item-margin: 1px;
10+
--rct-item-padding: 8px;
11+
--rct-radius: 4px;
12+
--rct-bar-offset: 6px;
13+
--rct-bar-width: 4px;
14+
--rct-bar-color: #0366d6;
15+
--rct-focus-outline: #000000;
16+
17+
--rct-color-focustree-item-selected-bg: #f0f2f5;
18+
--rct-color-focustree-item-hover-bg: #f0f2f5;
19+
--rct-color-focustree-item-hover-text: inherit;
20+
--rct-color-focustree-item-active-bg: #e4e6eb;
21+
--rct-color-focustree-item-active-text: #4f4f4f;
22+
23+
--rct-arrow-size: 10px;
24+
--rct-arrow-container-size: 16px;
25+
--rct-arrow-padding: 6px;
26+
27+
--rct-cursor: pointer;
28+
29+
--rct-search-width: 120px;
30+
--rct-search-height: 16px;
31+
--rct-search-padding: 8px;
32+
--rct-search-border: #b4b7bd;
33+
--rct-search-border-bottom: #0366d6;
34+
--rct-search-bg: #f8f9fa;
35+
--rct-search-text: #000000;
36+
--rct-search-text-offset: calc(var(--rct-search-padding) * 2 + 16px);
37+
}
38+
39+
.rct-dark {
40+
--rct-color-search-highlight-bg: #2f5381;
41+
42+
--rct-bar-color: #1d7be5;
43+
--rct-focus-outline: #ffffff;
44+
45+
--rct-color-focustree-item-selected-text: #ffffff;
46+
--rct-color-focustree-item-selected-bg: #373737;
47+
--rct-color-focustree-item-hover-bg: #373737;
48+
--rct-color-focustree-item-hover-text: #ffffff;
49+
--rct-color-focustree-item-active-bg: #313131;
50+
--rct-color-focustree-item-active-text: #ffffff;
51+
--rct-color-focustree-item-draggingover-bg: #313131;
52+
--rct-color-focustree-item-draggingover-color: #ffffff;
53+
--rct-color-arrow: #ffffff;
54+
55+
--rct-search-border: #4f4f4f;
56+
--rct-search-border-bottom: #1d7be5;
57+
--rct-search-bg: #373737;
58+
--rct-search-text: #ffffff;
59+
--rct-search-text-offset: calc(var(--rct-search-padding) * 2 + 16px);
60+
}
61+
62+
.rct-tree-item-button {
63+
padding: 0 var(--rct-item-padding) 0 calc(var(--rct-item-padding) + var(--rct-arrow-container-size) + var(--rct-arrow-padding));
64+
margin-left: calc(-1 * var(--rct-arrow-size));
65+
cursor: var(--rct-cursor);
66+
transition: color 100ms ease-out, background-color 100ms ease-out;
67+
}
68+
69+
.rct-tree-item-button:focus-visible {
70+
outline: 2px solid var(--rct-focus-outline);
71+
}
72+
73+
.rct-tree-item-button:hover {
74+
background-color: var(--rct-color-focustree-item-hover-bg);
75+
color: var(--rct-color-focustree-item-hover-text);
76+
}
77+
78+
.rct-tree-item-button:active {
79+
background-color: var(--rct-color-focustree-item-active-bg);
80+
color: var(--rct-color-focustree-item-active-text);
81+
}
82+
83+
.rct-tree-item-title-container-selected .rct-tree-item-button {
84+
background-color: var(--rct-color-focustree-item-selected-bg);
85+
color: var(--rct-color-focustree-item-selected-text);
86+
}
87+
88+
.rct-tree-item-title-container-selected .rct-tree-item-button::before {
89+
content: " ";
90+
position: absolute;
91+
top: calc(var(--rct-bar-offset) + var(var(--rct-item-margin)));
92+
/* left: calc(-1 * var(--rct-bar-width));*/
93+
left: calc(-0.5 * var(--rct-bar-width));
94+
height: calc(var(--rct-item-height) - 2 * var(--rct-bar-offset));
95+
width: var(--rct-bar-width);
96+
background-color: var(--rct-bar-color);
97+
border-radius: 99px;
98+
}
99+
100+
.rct-tree-item-button {
101+
margin-top: var(--rct-item-margin);
102+
margin-bottom: var(--rct-item-margin);
103+
position: relative;
104+
border-radius: var(--rct-radius);
105+
}
106+
107+
.rct-tree-item-title-container-dragging-over .rct-tree-item-button {
108+
background-color: var(--rct-color-focustree-item-draggingover-bg);
109+
color: var(--rct-color-focustree-item-draggingover-color);
110+
}
111+
112+
.rct-tree-item-title-container {
113+
border: none;
114+
background-color: unset !important;
115+
}
116+
117+
.rct-tree-item-arrow {
118+
z-index: 1;
119+
margin-right: calc(-1 * var(--rct-arrow-container-size) + var(--rct-arrow-padding));
120+
width: var(--rct-arrow-container-size);
121+
height: var(--rct-arrow-container-size);
122+
display: flex;
123+
justify-content: center;
124+
align-content: center;
125+
border-radius: var(--rct-radius);
126+
cursor: var(--rct-cursor);
127+
}
128+
129+
.rct-tree-item-arrow.rct-tree-item-arrow-isFolder:hover {
130+
background-color: var(--rct-color-focustree-item-hover-bg);
131+
color: var(--rct-color-focustree-item-hover-text);
132+
}
133+
134+
.rct-tree-item-arrow svg {
135+
width: var(--rct-arrow-size);
136+
}
137+
138+
.rct-tree-item-renaming-submit-button {
139+
border-radius: var(--rct-radius);
140+
visibility: hidden;
141+
}
142+
143+
.rct-tree-drag-between-line {
144+
border-radius: 99px;
145+
height: 3px;
146+
}
147+
148+
.rct-tree-search-input-container {
149+
width: calc(var(--rct-search-width) + var(--rct-search-text-offset) + var(--rct-search-padding) + 2px);
150+
}
151+
152+
.rct-tree-search-input {
153+
width: var(--rct-search-width);
154+
height: var(--rct-search-height);
155+
padding: var(--rct-search-padding);
156+
padding-left: var(--rct-search-text-offset);
157+
margin: 0;
158+
border: 1px solid var(--rct-search-border);
159+
border-bottom: 2px solid var(--rct-search-border-bottom);
160+
border-radius: var(--rct-radius);
161+
background-color: var(--rct-search-bg);
162+
color: var(--rct-search-text);
163+
}
164+
165+
.rct-tree-search-input:focus {
166+
outline: none;
167+
}
168+
169+
.rct-tree-search-input-container::before {
170+
content: url(data:image/svg+xml,%3Csvg%20stroke%3D%22currentColor%22%20fill%3D%22currentColor%22%20stroke-width%3D%220%22%20viewBox%3D%220%200%2016%2016%22%20height%3D%221em%22%20width%3D%221em%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M11.742%2010.344a6.5%206.5%200%201%200-1.397%201.398h-.001c.03.04.062.078.098.115l3.85%203.85a1%201%200%200%200%201.415-1.414l-3.85-3.85a1.007%201.007%200%200%200-.115-.1zM12%206.5a5.5%205.5%200%201%201-11%200%205.5%205.5%200%200%201%2011%200z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E);
171+
position: absolute;
172+
top: calc(var(--rct-search-height) / 2);
173+
left: var(--rct-search-padding);
174+
z-index: 1;
175+
}
176+
177+
.rct-dark .rct-tree-search-input-container::before {
178+
content: url(data:image/svg+xml,%3Csvg%20stroke%3D%22%23ffffff%22%20fill%3D%22%23ffffff%22%20stroke-width%3D%220%22%20viewBox%3D%220%200%2016%2016%22%20height%3D%221em%22%20width%3D%221em%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M11.742%2010.344a6.5%206.5%200%201%200-1.397%201.398h-.001c.03.04.062.078.098.115l3.85%203.85a1%201%200%200%200%201.415-1.414l-3.85-3.85a1.007%201.007%200%200%200-.115-.1zM12%206.5a5.5%205.5%200%201%201-11%200%205.5%205.5%200%200%201%2011%200z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E);
179+
}

‎packages/core/src/style.css

+3-3
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414

1515
--rct-color-search-highlight-bg: #a2aed2;
1616
--rct-color-drag-between-line-bg: #0366d6;
17-
--rct-color-arrow: #9aa5b3;
17+
--rct-color-arrow: #373a3f;
1818

1919
--rct-item-height: 22px;
2020

@@ -70,11 +70,11 @@
7070
}
7171

7272
.rct-tree-item-arrow {
73-
width: 16px;
73+
width: 10px;
7474
}
7575

7676
.rct-tree-item-arrow svg {
77-
width: 16px;
77+
width: 10px;
7878
}
7979

8080
.rct-tree-item-arrow-path {

0 commit comments

Comments
 (0)