Skip to content

Commit 0d18631

Browse files
KaviileeKaviilee
committed
feat(team): modernize management workspaces
1 parent f424f45 commit 0d18631

54 files changed

Lines changed: 7277 additions & 1493 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src/assets/css/team/app.less‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -289,6 +289,26 @@
289289
.u-op {
290290
.pa;
291291
.rt(0);
292+
293+
.el-button {
294+
min-height: 38px;
295+
margin-left: 8px;
296+
padding: 0 15px;
297+
border-radius: 10px;
298+
font-size: 13px;
299+
font-weight: 600;
300+
line-height: 36px;
301+
transition:
302+
color 150ms cubic-bezier(0.2, 0, 0, 1),
303+
border-color 150ms cubic-bezier(0.2, 0, 0, 1),
304+
background-color 150ms cubic-bezier(0.2, 0, 0, 1),
305+
box-shadow 150ms cubic-bezier(0.2, 0, 0, 1);
306+
307+
&:focus-visible {
308+
outline: none;
309+
box-shadow: 0 0 0 3px rgba(91, 92, 245, 0.16);
310+
}
311+
}
292312
}
293313

294314
.u-help {

‎src/assets/css/team/dkp/character.less‎

Lines changed: 72 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,79 @@
1-
.m-team-character_wrapper{
2-
.u-character-logo{
3-
// .fl;
1+
@import (reference) "../design-system/_tokens.less";
2+
3+
.m-team-character_wrapper {
4+
display: flex;
5+
align-items: center;
6+
gap: 8px;
7+
min-width: 0;
8+
min-height: 46px;
9+
padding: 8px 10px;
10+
border: 1px solid @team-border-light;
11+
border-radius: @team-radius-small;
12+
background: @team-surface-muted;
13+
transition: border-color @team-duration-fast @team-ease-standard,
14+
background-color @team-duration-fast @team-ease-standard;
15+
16+
&:hover {
17+
border-color: @team-border;
18+
background: @team-surface;
19+
}
20+
21+
.u-character-logo {
422
.size(28px);
5-
.y;
23+
flex: 0 0 28px;
624
}
7-
.u-character-name{
8-
.ml(6px);
9-
.fz(12px);
10-
.dbi;
11-
.w(160px);
25+
26+
.u-character-name {
27+
min-width: 0;
28+
.fz(13px);
29+
flex: 1;
1230
overflow: hidden;
31+
color: @team-text-regular;
32+
font-weight: 600;
1333
text-overflow: ellipsis;
1434
white-space: nowrap;
1535
line-height: 28px;
16-
vertical-align: middle;
1736
}
18-
}
37+
}
38+
39+
.m-dkp-role-popover {
40+
max-width: calc(100vw - 24px);
41+
padding: 12px !important;
42+
border-color: @team-border !important;
43+
border-radius: 12px !important;
44+
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12) !important;
45+
}
46+
47+
.m-dkp-role-popover__header {
48+
display: flex;
49+
align-items: center;
50+
justify-content: space-between;
51+
margin-bottom: 10px;
52+
53+
strong {
54+
color: @team-text-primary;
55+
font-size: 13px;
56+
line-height: 20px;
57+
}
58+
59+
span {
60+
padding: 1px 7px;
61+
border-radius: 999px;
62+
background: @team-primary-soft;
63+
color: @team-primary;
64+
font-size: 11px;
65+
line-height: 18px;
66+
}
67+
}
68+
69+
.m-dkp-role-grid {
70+
display: grid;
71+
grid-template-columns: repeat(2, minmax(0, 1fr));
72+
gap: 8px;
73+
}
74+
75+
@media screen and (max-width: 480px) {
76+
.m-dkp-role-grid {
77+
grid-template-columns: minmax(0, 1fr);
78+
}
79+
}

‎src/assets/css/team/dkp/dkp_dialog.less‎

Lines changed: 243 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,243 @@
1-
.m-dkp-dialog-modify {
2-
.u-user-item {
3-
.nobreak;
4-
}
5-
.u-user-name {
6-
&:hover {
7-
color: @pink;
8-
}
9-
}
10-
.u-user-avatar{
11-
.size(24px);
12-
.y;
13-
.mr(3px);
14-
.r(2px);
15-
}
16-
}
1+
@import (reference) "../design-system/_tokens.less";
2+
3+
.m-dkp-dialog-modify.el-dialog {
4+
max-width: calc(100vw - 32px);
5+
overflow: hidden;
6+
border: 1px solid @team-border-light;
7+
border-radius: @team-radius-control;
8+
background: @team-surface;
9+
box-shadow: 0 24px 64px rgba(15, 23, 42, 0.16);
10+
11+
.el-dialog__header {
12+
margin: 0;
13+
padding: @team-space-4 56px @team-space-3 @team-space-4;
14+
border-bottom: 1px solid @team-border-light;
15+
}
16+
17+
.el-dialog__title {
18+
color: @team-text-primary;
19+
font-size: 18px;
20+
font-weight: 600;
21+
line-height: 26px;
22+
}
23+
24+
.el-dialog__headerbtn {
25+
top: 16px;
26+
right: 16px;
27+
width: 34px;
28+
height: 34px;
29+
border-radius: 9px;
30+
31+
&:hover {
32+
background: @team-surface-muted;
33+
}
34+
35+
.el-dialog__close {
36+
color: @team-text-muted;
37+
}
38+
}
39+
40+
.el-dialog__body {
41+
max-height: calc(100vh - 190px);
42+
padding: @team-space-4;
43+
overflow-y: auto;
44+
}
45+
46+
.el-dialog__footer {
47+
padding: @team-space-3 @team-space-4 @team-space-4;
48+
border-top: 1px solid @team-border-light;
49+
}
50+
}
51+
52+
.m-dkp-dialog-form {
53+
display: grid;
54+
gap: @team-space-3;
55+
56+
.el-form-item {
57+
margin: 0;
58+
}
59+
60+
.el-form-item__label {
61+
height: auto;
62+
padding: 0 0 7px;
63+
color: @team-text-secondary;
64+
font-size: 13px;
65+
font-weight: 600;
66+
line-height: 20px;
67+
}
68+
69+
.u-field-label {
70+
display: inline-flex;
71+
align-items: center;
72+
gap: 7px;
73+
74+
em {
75+
padding: 0 7px;
76+
border-radius: 999px;
77+
background: @team-primary-soft;
78+
color: @team-primary;
79+
font-size: 11px;
80+
font-style: normal;
81+
font-weight: 600;
82+
line-height: 18px;
83+
}
84+
}
85+
86+
.el-select,
87+
.el-input {
88+
width: 100%;
89+
}
90+
91+
.el-input__wrapper,
92+
.el-select__wrapper {
93+
min-height: 42px;
94+
padding: 0 @team-space-2;
95+
border: 1px solid @team-border;
96+
border-radius: @team-radius-small;
97+
background: @team-surface;
98+
box-shadow: none;
99+
transition: border-color @team-duration-fast @team-ease-standard,
100+
box-shadow @team-duration-fast @team-ease-standard;
101+
102+
&:hover {
103+
border-color: @team-border-focus;
104+
}
105+
}
106+
107+
.el-input__wrapper.is-focus,
108+
.el-select__wrapper.is-focused {
109+
border-color: @team-primary;
110+
box-shadow: @team-shadow-focus;
111+
}
112+
113+
.el-radio-group {
114+
display: grid;
115+
grid-template-columns: repeat(2, minmax(0, 1fr));
116+
gap: @team-space-2;
117+
width: 100%;
118+
119+
&.is-single-option {
120+
grid-template-columns: minmax(0, 1fr);
121+
}
122+
}
123+
124+
.el-radio.is-bordered {
125+
width: 100%;
126+
height: 42px;
127+
margin: 0;
128+
padding: 0 @team-space-2;
129+
border-color: @team-border;
130+
border-radius: @team-radius-small;
131+
background: @team-surface;
132+
133+
&:hover {
134+
border-color: @team-border-focus;
135+
}
136+
137+
&.is-checked {
138+
border-color: @team-primary;
139+
background: @team-primary-soft;
140+
}
141+
}
142+
}
143+
144+
.m-dkp-dialog-form__row {
145+
display: grid;
146+
grid-template-columns: repeat(2, minmax(0, 1fr));
147+
gap: @team-space-3;
148+
}
149+
150+
.m-dkp-target-list {
151+
display: grid;
152+
max-height: 120px;
153+
padding: @team-space-2;
154+
overflow-y: auto;
155+
border: 1px solid @team-border-light;
156+
border-radius: 12px;
157+
background: @team-surface-muted;
158+
grid-template-columns: repeat(2, minmax(0, 1fr));
159+
gap: @team-space-2;
160+
161+
.u-user-item {
162+
display: flex;
163+
min-width: 0;
164+
min-height: 44px;
165+
align-items: center;
166+
padding: 6px 8px;
167+
border: 1px solid transparent;
168+
border-radius: @team-radius-small;
169+
background: @team-surface;
170+
color: @team-text-regular;
171+
gap: 9px;
172+
text-decoration: none;
173+
transition: border-color @team-duration-fast @team-ease-standard,
174+
color @team-duration-fast @team-ease-standard;
175+
176+
&:hover {
177+
border-color: @team-border-focus;
178+
color: @team-primary;
179+
}
180+
}
181+
182+
.u-user-avatar {
183+
width: 32px;
184+
height: 32px;
185+
flex: none;
186+
border-radius: 9px;
187+
object-fit: cover;
188+
}
189+
190+
.u-user-name {
191+
min-width: 0;
192+
overflow: hidden;
193+
font-size: 13px;
194+
font-weight: 600;
195+
text-overflow: ellipsis;
196+
white-space: nowrap;
197+
}
198+
}
199+
200+
.m-dkp-role-option {
201+
display: inline-flex;
202+
align-items: center;
203+
gap: 8px;
204+
205+
img {
206+
width: 24px;
207+
height: 24px;
208+
}
209+
}
210+
211+
.m-dkp-dialog-footer {
212+
display: flex;
213+
justify-content: flex-end;
214+
gap: @team-space-2;
215+
216+
.el-button {
217+
min-width: 88px;
218+
min-height: 38px;
219+
margin: 0;
220+
border-radius: @team-radius-small;
221+
font-weight: 600;
222+
}
223+
}
224+
225+
@media screen and (max-width: 620px) {
226+
.m-dkp-dialog-modify.el-dialog {
227+
width: calc(100% - 24px) !important;
228+
height: auto !important;
229+
margin: 12px auto !important;
230+
231+
.el-dialog__header,
232+
.el-dialog__body,
233+
.el-dialog__footer {
234+
padding-left: @team-space-3;
235+
padding-right: @team-space-3;
236+
}
237+
}
238+
239+
.m-dkp-dialog-form__row,
240+
.m-dkp-target-list {
241+
grid-template-columns: minmax(0, 1fr);
242+
}
243+
}

0 commit comments

Comments
 (0)