Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

style(web): synchronize styles #1004

Merged
merged 9 commits into from
Jul 27, 2022
Merged

style(web): synchronize styles #1004

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
13f50e6
style(web): synchronize styles of the connections list
Red-Asuka Jul 25, 2022
6d8f31e
style(web): synchronize styles of the connection info
Red-Asuka Jul 26, 2022
866c861
style(web): synchronize styles of the subscriptions list
Red-Asuka Jul 26, 2022
a49d4d7
style(web): synchronize styles of the filter bar
Red-Asuka Jul 26, 2022
2ad51c6
improve(web): add remove sub tips
Red-Asuka Jul 26, 2022
5179ba2
style(web): synchronize styles of the msg item
Red-Asuka Jul 26, 2022
13b0423
style(web): synchronize styles of the msg publish
Red-Asuka Jul 27, 2022
ebe5544
style(web): modify icon more
Red-Asuka Jul 27, 2022
3ffa5b7
feat(web): release MQTT X Web v1.8.1
Red-Asuka Jul 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/views/connections/ConnectionInfo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ export default class ConnectionInfo extends Vue {
private async validateName(rule: FormRule, name: string, callBack: NameCallBack) {
for (const oneConnection of this.allConnections) {
if (name !== this.oldName && oneConnection.name === name) {
callBack(`${this.$t('connections.duplicateName')}`)
callBack(this.$tc('connections.duplicateName'))
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "mqttx-web",
"version": "1.0.0",
"version": "1.8.1",
"license": "Apache-2.0",
"scripts": {
"serve": "vue-cli-service serve",
Expand Down
96 changes: 77 additions & 19 deletions web/src/assets/scss/element/element-reset.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,19 +14,23 @@
}
.el-radio-button--mini .el-radio-button__inner {
background: transparent;
border: 2px solid var(--color-border-bold);
width: 90px;
color: var(--color-text-light);
}
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
background-color: var(--color-bg-item);
color: var(--color-main-green);
border: 2px solid var(--color-main-green) !important;
z-index: 1;
box-shadow: none;
}
.el-radio-button:first-child .el-radio-button__inner {
border-left: 2px solid var(--color-border-bold);

/* Checkbox */
.el-checkbox.is-bordered {
border: 1px solid var(--color-border-default);
.el-checkbox__label {
color: var(--color-text-default);
font-weight: 400;
}
}

/* Card */
Expand Down Expand Up @@ -71,24 +75,28 @@
}

/* Button */
.el-button--mini {
border-radius: 4px;
}
.el-button--outline {
background: var(--color-bg-normal);
border: 2px solid var(--color-main-green);
border: 1px solid var(--color-main-green);
color: var(--color-main-green);
}
.el-button.is-plain:hover,
.el-button.is-plain:focus {
background: var(--color-bg-normal);
}

/* Cascader */
.el-cascader {
.el-input-number--mini {
width: 100%;
.el-input__inner {
text-align: left;
}
}

/* Message */
.el-message-box {
border-radius: 2px;
border-radius: 8px;
background-color: var(--color-bg-messagebox);
border-color: var(--color-border-default);
.el-message-box__title {
Expand Down Expand Up @@ -150,7 +158,7 @@

/* Notification */
.el-notification {
border-radius: 4px;
border-radius: 8px;
background-color: var(--color-bg-messagebox);
border-color: var(--color-border-default);
.el-notification__title {
Expand All @@ -168,6 +176,7 @@
/* Dialog */
.el-dialog {
background: var(--color-bg-normal);
border-radius: 8px;
}

/* Input */
Expand All @@ -180,6 +189,9 @@
color: var(--color-text-light);
}
}
&.is-disabled .el-input__inner {
border-color: var(--color-border-default);
}
}
.el-textarea {
.el-textarea__inner {
Expand All @@ -192,14 +204,35 @@
}
}

/* Input Number */
.el-input-number.is-controls-right {
.el-input-number__decrease,
.el-input-number__increase {
background: var(--color-bg-normal);
border-left: 1px solid var(--color-border-default);
}
.el-input-number__increase {
border-bottom: 1px solid var(--color-border-default);
}
}

/* Popper */
.el-popover__title {
color: var(--color-text-title);
}
.el-popper {
background: var(--color-bg-messagebox);
border-color: var(--color-border-default);
li {
color: var(--color-text-default);
}
}
.el-popper[x-placement^='right'] .popper__arrow {
border-right-color: var(--color-border-default);
&::after {
border-right-color: var(--color-bg-messagebox);
}
}
.el-popper[x-placement^='bottom'] .popper__arrow {
border-bottom-color: var(--color-border-default);
&::after {
Expand All @@ -216,19 +249,14 @@
.el-select-dropdown__item:hover {
background: var(--color-bg-item);
}

/* Cascader */
.el-cascader-menu {
border-right: 1px solid var(--color-border-default);
}
.el-cascader-node:not(.is-disabled):hover,
.el-cascader-node:not(.is-disabled):focus {
background: var(--color-bg-item);
// Fix css style bug in open el-dialog
.el-popup-parent--hidden {
padding-right: 0px !important;
}

/* Tootip */
.el-tooltip__popper.is-light {
color: #616161;
color: var(--color-text-light);
}

/* Color picker */
Expand Down Expand Up @@ -266,3 +294,33 @@
margin-top: 6px;
border-top: 1px solid var(--color-border-default);
}

/* Loading */
.el-loading-mask {
background-color: var(--color-bg-primary);
}

/* Tree */
.el-tree-node__content > .el-tree-node__expand-icon {
padding: 3px;
}

/* Skeleton */
.el-skeleton.is-animated .el-skeleton__item {
background: linear-gradient(
90deg,
var(--color-bg-skeleton) 25%,
var(--color-bg-skeleton_transition) 37%,
var(--color-bg-skeleton) 63%
);
background-size: 400% 100%;
animation: el-skeleton-loading 1.4s ease infinite;
@keyframes el-skeleton-loading {
0% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
}
18 changes: 18 additions & 0 deletions web/src/assets/scss/theme/dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,14 @@ body.dark {
--color-bg-code: #38404a;
--color-bg-input_btn: transparent;
--color-bg-radio: #37363d80;
--color-bg-select_lang: #37363d80;
--color-bg-popover: #fff;
--color-bg-dark: #131415d9;
--color-bg-unreadmsg: #1c1f22e8;
--color-bg-historybtn: #393a3c;
--color-bg-scrollbar: #ffffff33;
--color-bg-skeleton: #464646;
--color-bg-skeleton_transition: #252525;
--color-bg-card-normal: #34363c;
--color-bg-card-gradient: linear-gradient(33deg, #27393c 0%, #2c2f3e 100%);
--color-bg-btn-gradient: linear-gradient(90deg, #35c98d 0%, #37dc85 100%);
Expand All @@ -28,6 +36,10 @@ body.dark {
--color-text-right_block: #484848;
--color-text-right_info: #959599;
--color-text-left_info: #959599;
--color-text-active: #fff;
--color-text-leftbar_icon: #868787;
--color-text-historybtn: #fff;
--color-text-historybtn_disabled: #6f6f6f;
--color-text-card_icon: #eaebec;

/* Accent color */
Expand All @@ -46,4 +58,10 @@ body.dark {
--color-border-bold: #969696;
--color-shadow-card: #00000059;
--color-shadow-message: #1f1f1f;

/* Shadow color */
--color-shadow-leftlist: #00000061;
--color-shadow-sendbtn: #2dc17769;
--color-shadow-card: #00000059;
--color-shadow-message: #1f1f1f;
}
18 changes: 18 additions & 0 deletions web/src/assets/scss/theme/light.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,14 @@ body.light {
--color-bg-code: #e6eef7;
--color-bg-input_btn: #f5f7fa;
--color-bg-radio: #f6f7fb;
--color-bg-select_lang: #f6f7fb;
--color-bg-popover: #303133f0;
--color-bg-dark: #082537e8;
--color-bg-unreadmsg: #082537e8;
--color-bg-historybtn: #dfefe7;
--color-bg-scrollbar: #00000033;
--color-bg-skeleton: #f2f2f2;
--color-bg-skeleton_transition: #e6e6e6;
--color-bg-card-normal: #edf4fc;
--color-bg-card-gradient: linear-gradient(33deg, #e5fafc 0%, #eceeff 100%);
--color-bg-btn-gradient: linear-gradient(90deg, #35c98d 0%, #37dc85 100%);
Expand All @@ -28,6 +36,10 @@ body.light {
--color-text-right_block: #34c388;
--color-text-right_info: #ade7cf;
--color-text-left_info: #00000075;
--color-text-active: #fff;
--color-text-leftbar_icon: #83929b;
--color-text-historybtn: #25465f;
--color-text-historybtn_disabled: #c0c4cc;
--color-text-card_icon: #2f4852;

/* Accent color */
Expand All @@ -46,4 +58,10 @@ body.light {
--color-border-bold: #979797;
--color-shadow-card: #0000001a;
--color-shadow-message: #dcdcdc;

/* Shadow color */
--color-shadow-leftlist: #5b769438;
--color-shadow-sendbtn: #2dc17769;
--color-shadow-card: #0000001a;
--color-shadow-message: #dcdcdc;
}
18 changes: 18 additions & 0 deletions web/src/assets/scss/theme/night.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,14 @@ body.night {
--color-bg-code: #4f5965;
--color-bg-input_btn: transparent;
--color-bg-radio: #262529b3;
--color-bg-select_lang: #262529b3;
--color-bg-popover: #fff;
--color-bg-dark: #0052cc6b;
--color-bg-unreadmsg: #34c388;
--color-bg-historybtn: #4d535b;
--color-bg-scrollbar: #ffffff33;
--color-bg-skeleton: #292b33;
--color-bg-skeleton_transition: #212328;
--color-bg-card-normal: #323e4f;
--color-bg-card-gradient: linear-gradient(33deg, #263e4b 0%, #2b344d 100%);
--color-bg-btn-gradient: linear-gradient(90deg, #35c98d 0%, #37dc85 100%);
Expand All @@ -28,6 +36,10 @@ body.night {
--color-text-right_block: #1b1d20;
--color-text-right_info: #b4b4b4;
--color-text-left_info: #959599;
--color-text-active: #fff;
--color-text-leftbar_icon: #83929b;
--color-text-historybtn: #fff;
--color-text-historybtn_disabled: #9d9fa0;
--color-text-card_icon: #eaebec;

/* Accent color */
Expand All @@ -46,4 +58,10 @@ body.night {
--color-border-bold: #4f5367;
--color-shadow-card: #00000085;
--color-shadow-message: #151515;

/* Shadow color */
--color-shadow-leftlist: #00000061;
--color-shadow-sendbtn: #2dc17769;
--color-shadow-card: #00000085;
--color-shadow-message: #151515;
}
14 changes: 11 additions & 3 deletions web/src/components/MsgLeftItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,16 +56,24 @@ export default class MsgLeftItem extends Vue {
text-align: left;
position: relative;
.topic-color {
height: calc(100% - 44px);
display: inline-block;
width: 3px;
width: 4px;
position: absolute;
top: 10px;
left: -3px;
top: 11px;
border-radius: 8px;
left: -4px;
}
.left-payload {
background: var(--color-main-grey);
border-radius: 0px 10px 10px 10px;
position: relative;
}
.left-payload,
.left-time {
position: relative;
right: 0px;
animation: leftMsg 0.3s ease-in-out;
}
}
</style>
21 changes: 13 additions & 8 deletions web/src/components/MsgPublish.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,7 @@
<el-option :value="1"></el-option>
<el-option :value="2"></el-option>
</el-select>
<div class="retain-block">
<span class="publish-label">Retain: </span>
<el-checkbox v-model="msgRecord.retain"></el-checkbox>
</div>
<el-checkbox class="retain-block" v-model="msgRecord.retain" label="Retain" border size="mini"></el-checkbox>
</div>
<el-input
class="topic-input"
Expand Down Expand Up @@ -144,7 +141,8 @@ export default class MsgPublish extends Vue {
border-top: 1px solid var(--color-border-default);
.publish-header {
padding: 0 16px;
margin-bottom: 4px;
margin: 6px 0;
border-bottom: 1px solid var(--color-border-default);
}
.publish-footer {
padding: 0 6px;
Expand All @@ -156,7 +154,6 @@ export default class MsgPublish extends Vue {
padding: 0px;
height: 36px;
line-height: 36px;
border-bottom: 1px solid var(--color-border-default);
}
}
.qos-retain {
Expand All @@ -174,7 +171,7 @@ export default class MsgPublish extends Vue {
width: 55px;
}
.retain-block {
float: right;
margin-left: 8px;
}
.el-checkbox__inner {
border-radius: 100%;
Expand All @@ -184,8 +181,16 @@ export default class MsgPublish extends Vue {
position: fixed;
right: 16px;
bottom: 10px;
background: var(--color-main-green);
border-radius: 50%;
text-align: center;
box-shadow: 0px 4px 6px 0px var(--color-shadow-sendbtn);
width: 26px;
height: 26px;
line-height: 26px;
.icon-send {
font-size: $font-size--send;
font-size: 16px;
color: var(--color-text-active);
}
}
}
Expand Down
Loading