Skip to content
This repository was archived by the owner on Sep 16, 2024. It is now read-only.

Commit c6b5eb6

Browse files
hibighibig
committed
fix(style): graph node hover in dark
1 parent 95f41c9 commit c6b5eb6

File tree

10 files changed

+51
-60
lines changed

10 files changed

+51
-60
lines changed

‎components.d.ts

-3
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ declare module 'vue' {
2929
AInputSearch: typeof import('@arco-design/web-vue')['InputSearch'];
3030
ALayout: typeof import('@arco-design/web-vue')['Layout'];
3131
ALayoutContent: typeof import('@arco-design/web-vue')['LayoutContent'];
32-
ALayoutFooter: typeof import('@arco-design/web-vue')['LayoutFooter'];
3332
ALayoutSider: typeof import('@arco-design/web-vue')['LayoutSider'];
3433
ALink: typeof import('@arco-design/web-vue')['Link'];
3534
AMenu: typeof import('@arco-design/web-vue')['Menu'];
@@ -38,12 +37,10 @@ declare module 'vue' {
3837
AOption: typeof import('@arco-design/web-vue')['Option'];
3938
APagination: typeof import('@arco-design/web-vue')['Pagination'];
4039
AProgress: typeof import('@arco-design/web-vue')['Progress'];
41-
ARangePicker: typeof import('@arco-design/web-vue')['RangePicker'];
4240
AResult: typeof import('@arco-design/web-vue')['Result'];
4341
ASelect: typeof import('@arco-design/web-vue')['Select'];
4442
ASpace: typeof import('@arco-design/web-vue')['Space'];
4543
ASpin: typeof import('@arco-design/web-vue')['Spin'];
46-
AStatistic: typeof import('@arco-design/web-vue')['Statistic'];
4744
ASubMenu: typeof import('@arco-design/web-vue')['SubMenu'];
4845
ASwitch: typeof import('@arco-design/web-vue')['Switch'];
4946
ATable: typeof import('@arco-design/web-vue')['Table'];

‎src/assets/images/graph_nodes_dark.png

4 KB
Loading

‎src/assets/images/resource-dark.png

5.12 KB
Loading

‎src/assets/style/global.less

+8
Original file line numberDiff line numberDiff line change
@@ -377,6 +377,14 @@ html[arco-theme='dark'] {
377377
margin-left: 2px;
378378
}
379379

380+
.m-l-4 {
381+
margin-left: 4px;
382+
}
383+
384+
.m-l-3 {
385+
margin-left: 3px;
386+
}
387+
380388
.m-b-8 {
381389
margin-bottom: 8px;
382390
}

‎src/views/application-management/services/components/instance/tab-graph/components/graph-g6.vue

+12-9
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
import resourceImages from '@/views/application-management/resource-images';
1515
import serviceImg from '@/assets/images/service.png';
1616
import resourceImg from '@/assets/images/resource.png';
17+
import resourceImgDark from '@/assets/images/resource-dark.png';
1718
import dependencyIcon from '@/assets/images/dependency-03.png';
1819
import compositionIcon from '@/assets/images/composition-03.png';
1920
import realizationIcon from '@/assets/images/realization-03.png';
@@ -148,7 +149,9 @@
148149
const renderExecHtml = () => {
149150
if (!executable) return '';
150151
return `<li code="exec" class="iconfont icon-terminal">
151-
${i18n.global.t('applications.instance.tab.term')}
152+
<span class="m-l-3">${i18n.global.t(
153+
'applications.instance.tab.term'
154+
)}</span>
152155
</li>`;
153156
};
154157
@@ -262,14 +265,15 @@
262265
const setNodeList = async () => {
263266
const { sourceData: data } = props;
264267
const darkMode = appStore.theme;
268+
const { isDark } = appStore;
265269
const style = {
266270
lineWidth: 1,
267271
stroke: 'transparent',
268272
cursor: 'grabbing'
269273
};
270274
nodeList.value = _.map(data.nodes || [], (o) => {
271275
const node = _.cloneDeep(o);
272-
node.isDark = darkMode === 'dark';
276+
node.isDark = isDark;
273277
const loggableList = getResourceKeyList(
274278
{ ...node.extensions, id: node.nodeId },
275279
'loggable'
@@ -323,9 +327,10 @@
323327
};
324328
325329
// ========== logo icon ==========
330+
const resImg = isDark ? resourceImgDark : resourceImg;
326331
const defaultImg =
327332
resourceImages.get(node.providerType)?.get(node.resourceType) ||
328-
(_.get(node, 'extensions.isService') ? serviceImg : resourceImg);
333+
(_.get(node, 'extensions.isService') ? serviceImg : resImg);
329334
330335
node.logoIcon = {
331336
width: 32,
@@ -334,8 +339,6 @@
334339
img: node.icon || defaultImg
335340
};
336341
337-
// updateNodeImage(node, defaultImg);
338-
339342
// ========== node state style ==========
340343
if (_.get(node, 'kind') === nodeKindType.ServiceResourceGroup) {
341344
node.style = {
@@ -458,7 +461,6 @@
458461
},
459462
isCollapsed: show
460463
});
461-
// graph.refreshItem(node);
462464
}
463465
});
464466
animateFlag.value = true;
@@ -957,8 +959,9 @@
957959
.graph-mount {
958960
.g6-component-contextmenu {
959961
padding: 6px 8px;
962+
background-color: var(--color-white-1);
960963
border: none;
961-
box-shadow: rgba(174, 174, 174, 0.5) 0 0 10px !important;
964+
box-shadow: rgba(174, 174, 174, 0.5) 0 0 5px !important;
962965
}
963966
}
964967
@@ -978,11 +981,11 @@
978981
979982
.iconfont {
980983
margin-right: 4px;
981-
color: var(--sealblue-6);
984+
color: rgb(var(--link-6));
982985
}
983986
984987
a {
985-
color: var(--sealblue-6);
988+
color: rgb(var(--link-6));
986989
cursor: pointer;
987990
}
988991
}

‎src/views/application-management/services/components/instance/tab-graph/config/common.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { IGroup, IShape, GroupCfg } from '@antv/g-base';
44
import insertCss from 'insert-css';
55
import serviceImg from '@/assets/images/service.png';
66
import compositionImg from '@/assets/images/graph_nodes.png';
7+
import compositionImgDark from '@/assets/images/graph_nodes_dark.png';
78
import moreButtonIcon from '@/assets/images/more.png';
89
import moreButtonIconDark from '@/assets/images/more-dark.png';
910
import umlcompositionIcon from '@/assets/images/composition-03.png';
@@ -75,13 +76,13 @@ export const defineCustomNode = () => {
7576
},
7677
drawCompositionIcon(cfg: Node & NodeConfig, group: IGroup) {
7778
if (!cfg.hasComposition) return;
78-
const { compositionIcon, size } = cfg;
79+
const { compositionIcon, size, isDark } = cfg;
7980
const w: number = _.get(size, '0') || DefaultNodeSize[0];
8081
const h: number = _.get(size, '1') || DefaultNodeSize[1];
8182
const { width, height, img } = compositionIcon as any;
8283
group['shapeMap']['composition-icon'] = group.addShape('image', {
8384
attrs: {
84-
img,
85+
img: isDark ? compositionImgDark : img,
8586
x: -w / 2 + 18,
8687
y: h / 2 - 12,
8788
width,
@@ -100,6 +101,7 @@ export const defineCustomNode = () => {
100101
UMLRealizationIcon,
101102
hasComposition,
102103
isCollapsed,
104+
isDark,
103105
size
104106
} = cfg;
105107
if (!UMLCompositionIcon && !UMLDependencyIcon && !UMLRealizationIcon)

‎src/views/application-management/services/components/instance/tab-graph/config/theme.ts

+10-9
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,11 @@ export const lightStateStyles = {
2727
fill: 'rgba(247, 186, 30,.7)'
2828
},
2929
selected: {
30-
storke: 'rgba(247, 186, 30,.8)',
30+
stroke: 'rgba(247, 186, 30,.8)',
3131
lineWidth: 1
3232
},
3333
hover: {
34-
storke: 'rgba(247, 186, 30,.8)',
34+
stroke: 'rgba(247, 186, 30,.8)',
3535
lineWidth: 1
3636
}
3737
},
@@ -43,11 +43,11 @@ export const lightStateStyles = {
4343
fill: 'rgba(142, 173, 231,.7)'
4444
},
4545
selected: {
46-
storke: 'rgb(33, 74, 196)',
46+
stroke: 'rgb(33, 74, 196)',
4747
lineWidth: 1
4848
},
4949
hover: {
50-
storke: 'rgb(33, 74, 196)',
50+
stroke: 'rgb(33, 74, 196)',
5151
lineWidth: 1
5252
}
5353
}
@@ -86,11 +86,11 @@ export const darkStateStyles = {
8686
fill: 'rgba(142, 173, 231,.7)'
8787
},
8888
selected: {
89-
storke: 'rgba(247, 186, 30,.8)',
89+
stroke: 'rgba(247, 186, 30,.8)',
9090
lineWidth: 1
9191
},
9292
hover: {
93-
storke: 'rgba(247, 186, 30,.8)',
93+
stroke: 'rgba(247, 186, 30,.8)',
9494
lineWidth: 1
9595
}
9696
},
@@ -104,12 +104,13 @@ export const darkStateStyles = {
104104
fill: 'rgba(81,115,153,1)'
105105
},
106106
selected: {
107-
storke: 'rgb(33, 74, 196)',
107+
stroke: 'rgba(255,255,255, .7)',
108+
fill: `rgba(${black2}, 1)`,
108109
lineWidth: 1
109110
},
110111
hover: {
111-
storke: 'rgba(33,74,196,1)',
112-
fill: 'rgba(81,115,153,1)',
112+
stroke: 'rgba(186,186,186, 0.7)',
113+
fill: `rgba(${black2}, 1)`,
113114
lineWidth: 1
114115
}
115116
}

‎src/views/application-management/services/components/instance/tab-graph/style/g6-component-tooltip.less

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
.graph-mount {
22
.g6-component-tooltip {
3+
z-index: 1000;
4+
color: var(--color-text-2);
5+
background-color: var(--color-white-1);
36
border: none;
4-
box-shadow: rgba(174, 174, 174, 0.5) 0 0 10px !important;
7+
box-shadow: rgba(174, 174, 174, 0.5) 0 0 5px !important;
58

69
.loggable-text {
710
padding: 0 3px;

‎src/views/application-management/services/pages/edit.vue

+3-8
Original file line numberDiff line numberDiff line change
@@ -903,25 +903,20 @@
903903

904904
<style lang="less" scoped>
905905
.comment-wrap {
906-
position: relative;
907906
display: flex;
908907
flex-direction: column;
909908
align-items: center;
910-
margin: 50px auto 20px;
909+
margin: 50px auto 0;
911910
padding: 20px 0;
912911
913912
.textarea {
914-
padding-bottom: 40px;
915913
background: var(--color-white-1);
916914
}
917915
918916
.button-group {
919-
position: absolute;
920-
bottom: 0;
921917
justify-content: center;
922-
padding: 10px;
923-
background-color: var(--color-white-1);
924-
border-radius: var(--border-radius-small);
918+
width: 100%;
919+
margin-top: 10px;
925920
}
926921
}
927922
</style>

‎src/views/operation-hub/templates/components/template-item.vue

+10-28
Original file line numberDiff line numberDiff line change
@@ -51,28 +51,6 @@
5151
{{ dataInfo.description }}
5252
</div>
5353
</div>
54-
<!-- <div
55-
style="text-align: left"
56-
class="m-t-10"
57-
v-if="dataInfo.catalog?.name"
58-
>
59-
<a-tag
60-
style="
61-
background-color: var(--color-fill-1);
62-
color: var(--color-text-3);
63-
"
64-
>
65-
<i
66-
class="iconfont icon-laiyuan1 m-r-5 size-12"
67-
style="
68-
color: rgba(var(--gray-6), 0.8);
69-
position: relative;
70-
top: 1px;
71-
"
72-
></i>
73-
<span> {{ dataInfo.catalog?.name }}</span>
74-
</a-tag>
75-
</div> -->
7654
</div>
7755

7856
<a-checkbox
@@ -234,12 +212,11 @@
234212
margin-left: 10px;
235213
}
236214
237-
&.dark {
238-
.img {
239-
filter: invert(1) hue-rotate(180deg);
240-
}
241-
}
242-
215+
// &.dark {
216+
// .img {
217+
// filter: invert(1) hue-rotate(180deg);
218+
// }
219+
// }
243220
.img-box {
244221
flex-basis: 50px;
245222
padding: 16px;
@@ -262,6 +239,11 @@
262239
display: flex;
263240
padding: 0;
264241
background-color: var(--color-white-1);
242+
243+
.iconfont {
244+
color: rgb(var(--primary-5));
245+
font-size: 50px;
246+
}
265247
}
266248
267249
:deep(.arco-icon) {

0 commit comments

Comments
 (0)