Skip to content

Commit fdf7653

Browse files
ysfscreamysfscream
committed
feat(web): sync UI improvements from desktop
- Sync leftbar styling with animations and indicator - Sync connection list to use text color for online status - Sync subscription list animations and hover effects - Sync message item styling and shadows - Update theme variables for shadows - Adjust layout positions for leftbar width
1 parent e73e2ce commit fdf7653

13 files changed

Lines changed: 203 additions & 128 deletions

File tree

‎web/src/assets/scss/mixins.scss‎

Lines changed: 30 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -14,91 +14,87 @@
1414
pre {
1515
white-space: pre-wrap;
1616
word-wrap: break-word;
17+
font-size: 13px;
18+
line-height: 1.6;
1719
}
1820
p {
1921
margin: 0px;
2022
}
2123
.left-info {
22-
color: var(--color-text-left_info);
24+
color: var(--color-text-title);
25+
font-size: 13px;
26+
font-weight: 500;
27+
.qos {
28+
color: var(--color-text-default);
29+
}
2330
}
2431
.right-info {
2532
color: var(--color-text-right_info);
2633
}
2734
.topic {
28-
margin-right: 16px;
35+
margin-right: 20px;
2936
}
3037
.retain {
3138
margin-left: 16px;
32-
font-size: 12px;
39+
font-size: 11px;
3340
color: var(--color-text-active);
34-
background-color: #7e848885;
35-
padding: 0 4px;
41+
background-color: var(--color-main-yellow);
42+
padding: 2px 8px;
3643
border-radius: 8px;
3744
float: right;
45+
font-weight: 500;
3846
}
3947
.payload {
4048
display: inline-block;
4149
min-height: 41px;
4250
max-width: 85%;
4351
min-width: 20px;
4452
margin: 10px 0 0px 0px;
45-
padding: 10px;
53+
padding: 14px 16px;
4654
white-space: normal;
4755
word-break: break-all;
4856
}
4957
.time {
5058
color: var(--color-text-light);
5159
margin-bottom: 5px;
60+
font-size: 12px;
5261
}
5362
.properties {
54-
margin-top: 10px;
55-
padding-top: 6px;
56-
border-top-width: 1px;
57-
border-top-style: dashed;
58-
&:last-child {
59-
padding-bottom: 10px;
60-
border-bottom-width: 1px;
61-
border-bottom-style: dashed;
62-
}
63+
margin-top: 12px;
64+
padding-top: 10px;
6365
&.left {
64-
color: var(--color-text-left_info);
65-
border-top-color: var(--color-border-left_metainfo);
66-
&:last-child {
67-
border-bottom-color: var(--color-border-left_metainfo);
68-
}
66+
color: var(--color-text-default);
6967
}
7068
&.right {
7169
color: var(--color-text-right_info);
72-
border-top-color: var(--color-text-right_metainfo);
73-
&:last-child {
74-
border-bottom-color: var(--color-border-right_metainfo);
75-
}
7670
}
7771
}
7872
.user-properties {
79-
margin-top: 10px;
80-
padding: 6px 0;
73+
margin-top: 12px;
74+
padding: 10px 0;
8175
.key-value-editor.msg-item-props {
8276
.editor-header {
83-
margin-bottom: 10px;
77+
margin-bottom: 12px;
78+
.editor-title {
79+
font-weight: 600;
80+
font-size: 13px;
81+
}
8482
}
8583
.el-input.is-disabled .el-input__inner {
86-
background-color: transparent;
84+
background-color: var(--color-bg-msg-input);
8785
}
8886
}
8987
&.left {
9088
.key-value-editor.msg-item-props {
9189
.editor-title {
92-
color: var(--color-text-left_info);
90+
color: var(--color-text-title);
9391
}
9492
.el-input.is-disabled .el-input__inner {
95-
color: var(--color-text-left_info);
96-
border: 1px solid var(--color-border-left_metainfo);
93+
color: var(--color-text-default);
94+
border: 1px solid var(--color-border-default);
95+
background-color: var(--color-bg-msg-input);
9796
}
9897
}
99-
border: 1px dashed var(--color-border-left_metainfo);
100-
border-right: none;
101-
border-left: none;
10298
}
10399
&.right {
104100
.key-value-editor.msg-item-props {
@@ -110,9 +106,6 @@
110106
border: 1px solid var(--color-border-right_metainfo);
111107
}
112108
}
113-
border: 1px dashed var(--color-border-right_metainfo);
114-
border-right: none;
115-
border-left: none;
116109
}
117110
}
118111
}

‎web/src/assets/scss/theme/dark.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -60,10 +60,10 @@ body.dark {
6060
--color-border-right_metainfo: #ffffff59;
6161

6262
/* Shadow color */
63-
--color-shadow-leftlist: #00000061;
64-
--color-shadow-sendbtn: #2dc17769;
63+
--color-shadow-leftlist: #00000038;
64+
--color-shadow-sendbtn: transparent;
6565
--color-shadow-card: #00000059;
66-
--color-shadow-message: #1f1f1f;
66+
--color-shadow-message: transparent;
6767

6868
@import './highlight/dark.scss';
6969
}

‎web/src/assets/scss/theme/light.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ body.light {
3434
--color-text-light: #a2a9b0;
3535
--color-text-tips: #b4b4b4;
3636
--color-text-right_block: #34c388;
37-
--color-text-right_info: #ffffffde;
37+
--color-text-right_info: #ffffff;
3838
--color-text-left_info: #00000075;
3939
--color-text-active: #fff;
4040
--color-text-leftbar_icon: #83929b;

‎web/src/assets/scss/theme/night.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -60,10 +60,10 @@ body.night {
6060
--color-border-right_metainfo: #ffffff54;
6161

6262
/* Shadow color */
63-
--color-shadow-leftlist: #00000061;
64-
--color-shadow-sendbtn: #2dc17769;
63+
--color-shadow-leftlist: #00000038;
64+
--color-shadow-sendbtn: transparent;
6565
--color-shadow-card: #00000085;
66-
--color-shadow-message: #151515;
66+
--color-shadow-message: transparent;
6767

6868
@import './highlight/night-owl.scss';
6969
}

‎web/src/components/LeftPanel.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export default class LeftPanel extends Vue {}
1818
.left-panel {
1919
& > div {
2020
position: fixed;
21-
left: 401px;
21+
left: 397px;
2222
z-index: 1;
2323
width: 280px;
2424
background: var(--color-bg-normal);
@@ -27,7 +27,7 @@ export default class LeftPanel extends Vue {}
2727
bottom: 0;
2828
padding-bottom: 42px;
2929
@media (min-width: 1920px) {
30-
left: 521px;
30+
left: 517px;
3131
width: 400px;
3232
}
3333
}
@@ -44,7 +44,7 @@ export default class LeftPanel extends Vue {}
4444
left: 0;
4545
}
4646
to {
47-
left: 401px;
47+
left: 397px;
4848
}
4949
}
5050
@media (min-width: 1920px) {
@@ -53,7 +53,7 @@ export default class LeftPanel extends Vue {}
5353
left: 0;
5454
}
5555
to {
56-
left: 521px;
56+
left: 517px;
5757
}
5858
}
5959
}

‎web/src/components/Leftbar.vue‎

Lines changed: 64 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -78,17 +78,28 @@ export default class Leftbar extends Vue {
7878
<style lang="scss">
7979
@import '~@/assets/scss/variable.scss';
8080
81+
@keyframes glow-pulse {
82+
0%,
83+
100% {
84+
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
85+
}
86+
50% {
87+
box-shadow: 0 0 12px 2px rgba(16, 185, 129, 0.3);
88+
}
89+
}
90+
8191
.leftbar {
8292
position: fixed;
83-
width: 80px;
93+
width: 76px;
8494
top: 0;
8595
bottom: 0;
86-
background: linear-gradient(135deg, var(--color-bg-leftbar_top) 0%, var(--color-bg-leftbar_bottom) 100%);
87-
padding: 45px 0;
96+
background: linear-gradient(180deg, var(--color-bg-leftbar_top) 0%, var(--color-bg-leftbar_bottom) 100%);
97+
padding: 40px 0 24px;
8898
z-index: 1001;
8999
display: flex;
90100
flex-direction: column;
91101
-webkit-app-region: drag;
102+
border-right: 1px solid rgba(255, 255, 255, 0.05);
92103
93104
& > .leftbar-top {
94105
flex: 3;
@@ -99,20 +110,44 @@ export default class Leftbar extends Vue {
99110
100111
.leftbar-item {
101112
text-align: center;
102-
margin-bottom: 25px;
113+
margin-bottom: 12px;
103114
position: relative;
104115
a {
105-
height: 48px;
106-
width: 48px;
107-
line-height: 48px;
108-
display: inline-block;
116+
height: 44px;
117+
width: 44px;
118+
line-height: 44px;
119+
display: inline-flex;
120+
align-items: center;
121+
justify-content: center;
122+
border-radius: 12px;
123+
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
124+
position: relative;
125+
&::before {
126+
content: '';
127+
position: absolute;
128+
left: -12px;
129+
top: 50%;
130+
transform: translateY(-50%) scaleY(0);
131+
width: 3px;
132+
height: 20px;
133+
background: var(--color-main-green);
134+
border-radius: 0 2px 2px 0;
135+
transition: transform 0.2s ease;
136+
}
109137
}
110138
&.active a {
111-
background-color: var(--color-bg-leftbar_item);
112-
border-radius: 8px;
139+
background: linear-gradient(135deg, var(--color-bg-leftbar_item) 0%, rgba(16, 185, 129, 0.15) 100%);
140+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
141+
&::before {
142+
transform: translateY(-50%) scaleY(1);
143+
}
144+
.iconfont {
145+
color: var(--color-main-green);
146+
}
113147
}
114-
&.active a,
115148
a:hover {
149+
background: var(--color-bg-leftbar_item);
150+
transform: scale(1.05);
116151
.iconfont {
117152
color: var(--color-main-white);
118153
}
@@ -123,25 +158,36 @@ export default class Leftbar extends Vue {
123158
}
124159
125160
.app-logo {
126-
margin-bottom: 35px;
161+
margin-bottom: 72px;
162+
a {
163+
&:hover {
164+
background: transparent;
165+
transform: none;
166+
}
167+
}
127168
img {
128-
width: 40px;
129-
height: 40px;
169+
width: 36px;
170+
height: 36px;
171+
transition: transform 0.3s ease;
172+
&:hover {
173+
transform: rotate(10deg) scale(1.1);
174+
}
130175
}
131176
}
132177
133178
.iconfont {
134-
color: var(--color-text-light);
179+
color: var(--color-text-leftbar_icon);
180+
transition: color 0.2s ease;
135181
}
136182
.leftbar-top .iconfont {
137-
font-size: 24px;
183+
font-size: 22px;
138184
}
139185
.leftbar-bottom .iconfont {
140-
font-size: 20px;
186+
font-size: 18px;
141187
}
142188
143189
@media (min-width: 1920px) {
144-
width: 120px;
190+
width: 116px;
145191
}
146192
}
147193
</style>

‎web/src/components/MsgLeftItem.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export default class MsgLeftItem extends Vue {
7272
text-align: left;
7373
position: relative;
7474
.topic-color {
75-
height: calc(100% - 44px);
75+
height: calc(100% - 38px);
7676
display: inline-block;
7777
width: 4px;
7878
position: absolute;
@@ -81,9 +81,10 @@ export default class MsgLeftItem extends Vue {
8181
left: -4px;
8282
}
8383
.left-payload {
84-
background: var(--color-main-grey);
84+
background: var(--color-bg-messagebox);
8585
border-radius: 0px 10px 10px 10px;
8686
position: relative;
87+
box-shadow: 0 1px 3px var(--color-shadow-message);
8788
}
8889
.left-payload,
8990
.left-time {

‎web/src/components/MsgRightItem.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ export default class MsgrightItem extends Vue {
6969
background: var(--color-text-right_block);
7070
border-radius: 10px 0 10px 10px;
7171
text-align: left;
72+
box-shadow: 0 1px 3px var(--color-shadow-sendbtn);
7273
}
7374
.right-payload,
7475
.right-time {

0 commit comments

Comments
 (0)