Skip to content

Commit 4c70822

Browse files
youngbeom-shin申永范-UX
youngbeom-shin
and
申永范-UX
authored
feat(buttons): update button styles and structure (#1223)
* feat(buttons): update button styles and structure * feat(buttons): update button styles and structure * add datapipelines svg icon --------- Co-authored-by: 申永范-UX <[email protected]>
1 parent 7506dc3 commit 4c70822

File tree

3 files changed

+104
-33
lines changed

3 files changed

+104
-33
lines changed

‎frontend/public/images/icons/navbar-datapipelines.svg‎

Lines changed: 15 additions & 0 deletions
Loading

‎frontend/src/assets/stylesheets/element-plus/button.css‎

Lines changed: 71 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -196,9 +196,7 @@
196196
.btn-secondary-gray.btn-sm,
197197
.btn-secondary-color.btn-sm,
198198
.btn-tertiary-gray.btn-sm,
199-
.btn-tertiary-color.btn-sm,
200-
.btn-link-gray.btn-sm,
201-
.btn-link-color.btn-sm {
199+
.btn-tertiary-color.btn-sm {
202200
padding: 8px 12px;
203201
font-size: 12px;
204202
line-height: 18px;
@@ -213,15 +211,26 @@
213211
justify-content: center;
214212
}
215213

214+
.btn-link-gray.btn-sm,
215+
.btn-link-color.btn-sm {
216+
padding: 0;
217+
font-size: 12px;
218+
line-height: 18px;
219+
font-weight: 400;
220+
transform: scale(1);
221+
-webkit-transform: scale(1);
222+
display: inline-flex;
223+
text-align: center;
224+
justify-content: center;
225+
}
226+
216227
/* md size button */
217228
.btn-primary.btn-md,
218229
.btn-danger.btn-md,
219230
.btn-secondary-gray.btn-md,
220231
.btn-secondary-color.btn-md,
221232
.btn-tertiary-gray.btn-md,
222-
.btn-tertiary-color.btn-md,
223-
.btn-link-gray.btn-md,
224-
.btn-link-color.btn-md {
233+
.btn-tertiary-color.btn-md {
225234
padding: 10px 14px;
226235
font-size: 14px;
227236
line-height: 22px;
@@ -236,14 +245,25 @@
236245
justify-content: center;
237246
}
238247

248+
.btn-link-gray.btn-md,
249+
.btn-link-color.btn-md {
250+
padding: 0;
251+
font-size: 14px;
252+
line-height: 22px;
253+
font-weight: 400;
254+
transform: scale(1);
255+
-webkit-transform: scale(1);
256+
display: inline-flex;
257+
text-align: center;
258+
justify-content: center;
259+
}
260+
239261
/* lg size button */
240262
.btn-primary.btn-lg,
241263
.btn-secondary-gray.btn-lg,
242264
.btn-secondary-color.btn-lg,
243265
.btn-tertiary-gray.btn-lg,
244-
.btn-tertiary-color.btn-lg,
245-
.btn-link-gray.btn-lg,
246-
.btn-link-color.btn-lg {
266+
.btn-tertiary-color.btn-lg {
247267
padding: 10px 16px;
248268
font-size: 16px;
249269
line-height: 24px;
@@ -258,14 +278,25 @@
258278
justify-content: center;
259279
}
260280

281+
.btn-link-gray.btn-lg,
282+
.btn-link-color.btn-lg {
283+
padding: 0;
284+
font-size: 16px;
285+
line-height: 24px;
286+
font-weight: 400;
287+
transform: scale(1);
288+
-webkit-transform: scale(1);
289+
display: inline-flex;
290+
text-align: center;
291+
justify-content: center;
292+
}
293+
261294
/* xl size button */
262295
.btn-primary.btn-xl,
263296
.btn-secondary-gray.btn-xl,
264297
.btn-secondary-color.btn-xl,
265298
.btn-tertiary-gray.btn-xl,
266-
.btn-tertiary-color.btn-xl,
267-
.btn-link-gray.btn-xl,
268-
.btn-link-color.btn-xl {
299+
.btn-tertiary-color.btn-xl {
269300
padding: 12px 18px;
270301
font-size: 16px;
271302
line-height: 24px;
@@ -280,14 +311,25 @@
280311
justify-content: center;
281312
}
282313

314+
.btn-link-gray.btn-xl,
315+
.btn-link-color.btn-xl {
316+
padding: 0;
317+
font-size: 16px;
318+
line-height: 24px;
319+
font-weight: 400;
320+
transform: scale(1);
321+
-webkit-transform: scale(1);
322+
display: inline-flex;
323+
text-align: center;
324+
justify-content: center;
325+
}
326+
283327
/* 2xl size button */
284328
.btn-primary.btn-2xl,
285329
.btn-secondary-gray.btn-2xl,
286330
.btn-secondary-color.btn-2xl,
287331
.btn-tertiary-gray.btn-2xl,
288-
.btn-tertiary-color.btn-2xl,
289-
.btn-link-gray.btn-2xl,
290-
.btn-link-color.btn-2xl {
332+
.btn-tertiary-color.btn-2xl {
291333
padding: 16px 22px;
292334
font-size: 18px;
293335
line-height: 28px;
@@ -301,3 +343,17 @@
301343
text-align: center;
302344
justify-content: center;
303345
}
346+
347+
.btn-link-gray.btn-2xl,
348+
.btn-link-color.btn-2xl {
349+
padding: 0;
350+
font-size: 18px;
351+
line-height: 28px;
352+
font-weight: 400;
353+
transform: scale(1);
354+
-webkit-transform: scale(1);
355+
display: inline-flex;
356+
text-align: center;
357+
justify-content: center;
358+
}
359+

‎frontend/src/components/dataflow_config/algTemplate/index.vue‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -78,11 +78,26 @@
7878
</p>
7979
</el-tooltip>
8080
</div>
81-
<div class="flex items-center justify-between mt-1">
82-
<span class="text-gray-700 text-sm font-normal">{{
81+
<div class="flex items-center justify-between mt-1 gap-4">
82+
<span class="text-gray-700 text-sm font-normal line-clamp-1 w-full truncate overflow-hidden text-ellipsis">{{
8383
item.type ? t(`dataPipelines.${item.type}`) : '-'
8484
}}</span>
85-
<div class="flex items-center justify-end gap-1">
85+
<div class="flex items-center justify-end gap-2">
86+
<el-popconfirm
87+
:title="`${t('dataPipelines.deleteConfirm')}?`"
88+
:confirm-button-text="t('dataPipelines.confirm')"
89+
:cancel-button-text="t('dataPipelines.cancel')"
90+
width="220px"
91+
@confirm="handleDelete(item.template_id)"
92+
>
93+
<template #reference>
94+
<CsgButton
95+
v-if="item.template_id"
96+
class="btn btn-link-gray btn-md whitespace-nowrap"
97+
:name="t('dataPipelines.remove')"
98+
/>
99+
</template>
100+
</el-popconfirm>
86101
<CsgButton
87102
class="btn btn-link-gray btn-md whitespace-nowrap"
88103
@click="toNewPage('add', index)"
@@ -99,21 +114,6 @@
99114
@click="goToNewTask(index)"
100115
:name="t('dataPipelines.apply')"
101116
/>
102-
<el-popconfirm
103-
:title="`${t('dataPipelines.deleteConfirm')}?`"
104-
:confirm-button-text="t('dataPipelines.confirm')"
105-
:cancel-button-text="t('dataPipelines.cancel')"
106-
width="220px"
107-
@confirm="handleDelete(item.template_id)"
108-
>
109-
<template #reference>
110-
<CsgButton
111-
v-if="item.template_id"
112-
class="btn btn-link-gray btn-sm whitespace-nowrap"
113-
:name="t('dataPipelines.remove')"
114-
/>
115-
</template>
116-
</el-popconfirm>
117117
</div>
118118
</div>
119119
</div>

0 commit comments

Comments
 (0)