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

Jump to bottom

refactor(publish): optimize publish options UI #1417

Merged
merged 2 commits into from
Sep 15, 2023
Merged

refactor(publish): optimize publish options UI #1417

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
35b9829
refactor(publish): optimize publish options UI
ysfscream Sep 14, 2023
54b40f9
refactor(web-publish): optimize publish options UI
ysfscream Sep 14, 2023
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
23 changes: 15 additions & 8 deletions src/components/MsgPublish.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,18 +88,18 @@
</div>
<div class="publish-header">
<div class="publish-metadata">
<span class="publish-label">Payload: </span>
<el-select class="payload-select" size="mini" v-model="payloadType">
<el-option v-for="(type, index) in payloadOptions" :key="index" :value="type"> </el-option>
<el-option-group :label="$t('connections.publishPayloadEncodedBy')">
<el-option v-for="(type, index) in payloadOptions" :key="index" :label="type" :value="type"> </el-option>
</el-option-group>
</el-select>
<span class="publish-label">QoS: </span>
<el-select class="qos-select" size="mini" v-model="msgRecord.qos">
<el-option v-for="qos in [0, 1, 2]" :key="qos" :label="qos" :value="qos">
<el-option v-for="qos in [0, 1, 2]" :key="qos" :label="`QoS ${qos}`" :value="qos">
<span style="float: left">{{ qos }}</span>
<span style="float: right; color: #8492a6; margin-left: 12px">{{ $t(`connections.qos${qos}`) }}</span>
</el-option>
</el-select>
<el-checkbox class="retain-block" v-model="msgRecord.retain" label="Retain" border size="mini"></el-checkbox>
<el-checkbox class="retain-checkbox" v-model="msgRecord.retain" label="Retain" border size="mini"></el-checkbox>
<el-tooltip
placement="top"
:disabled="mqtt5PropsEnable"
Expand Down Expand Up @@ -683,8 +683,9 @@ export default class MsgPublish extends Vue {
}
.publish-metadata {
background: var(--color-bg-normal);
padding: 0 16px;
padding: 0 13px;
margin-top: 6px;
margin-bottom: 2px;
.el-input__inner {
padding: 4px 10px;
}
Expand All @@ -697,10 +698,16 @@ export default class MsgPublish extends Vue {
margin-right: 8px;
}
.qos-select {
width: 46px;
width: 76px;
}
.retain-block {
.retain-checkbox {
margin-left: 8px;
.el-checkbox__input {
line-height: 1px;
}
.el-checkbox__label {
padding-left: 8px;
}
}
.meta-block {
margin-left: 6px;
Expand Down
17 changes: 12 additions & 5 deletions src/lang/connections.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -497,11 +497,18 @@ export default {
hu: 'Fogadott üzenet',
},
receivedPayloadDecodedBy: {
zh: '接收到的 Payload 通过编码格式输出',
en: 'Received Payload is output by encoding format',
tr: 'Alınan Payload, kodlama biçimiyle çıkarılır',
ja: '受信したペイロードは、エンコード形式で出力されます',
hu: 'A fogadott Payload kódolási formátum szerint',
zh: '使用以下格式编码接收到的 Payload',
en: 'Format Received Payload by',
tr: 'Alınan Payload’ı şununla biçimlendir: ',
ja: '以下の方式で受信 Payload をフォーマット: ',
hu: 'Fogadott Payload formázása e szerint: ',
},
publishPayloadEncodedBy: {
zh: '使用以下格式编码要发布的 Payload',
en: 'Format Payload to Publish by',
tr: 'Yayınlamak için Payload’ı şununla biçimlendir: ',
ja: '以下の方式で公開用 Payload をフォーマット: ',
hu: 'A közzétételre szánt Payload formázása e szerint: ',
},
alias: {
zh: '别名',
Expand Down
4 changes: 2 additions & 2 deletions src/utils/element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import {
Switch,
Select,
Option,
// OptionGroup,
OptionGroup,
Button,
// ButtonGroup,
// Table,
Expand Down Expand Up @@ -100,7 +100,7 @@ export default (Vue: typeof _Vue) => {
Vue.use(Switch)
Vue.use(Select)
Vue.use(Option)
// Vue.use(OptionGroup)
Vue.use(OptionGroup)
Vue.use(Button)
// Vue.use(ButtonGroup)
// Vue.use(Table)
Expand Down
37 changes: 18 additions & 19 deletions src/views/connections/ConnectionsDetail.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,18 +202,11 @@
</a>
</span>
<div class="message-type">
<el-tooltip
placement="top"
:effect="theme !== 'light' ? 'light' : 'dark'"
:open-delay="500"
:content="$t('connections.receivedPayloadDecodedBy')"
>
<a href="javascript:;" class="icon-tip">
<i class="el-icon-question"></i>
</a>
</el-tooltip>
<el-select class="received-type-select" size="small" v-model="receivedMsgType">
<el-option v-for="type in ['Plaintext', 'JSON', 'Base64', 'Hex']" :key="type" :value="type"> </el-option>
<el-select class="received-type-select" size="mini" v-model="receivedMsgType">
<el-option-group :label="$t('connections.receivedPayloadDecodedBy')">
<el-option v-for="type in ['Plaintext', 'JSON', 'Base64', 'Hex']" :key="type" :value="type">
</el-option>
</el-option-group>
</el-select>
<MsgTypeTabs v-model="msgType" @change="handleMsgTypeChanged" />
</div>
Expand Down Expand Up @@ -429,7 +422,7 @@ export default class ConnectionsDetail extends Vue {
}

private retryTimes = 0
private inputHeight = 160
private inputHeight = 180
private msgBottom = 166
private messageListHeight: number = 284
private messageListMarginTop: number = 19
Expand Down Expand Up @@ -1932,10 +1925,6 @@ export default class ConnectionsDetail extends Vue {
right: 0;
z-index: 1;
transition: all 0.4s;
.el-input .el-input__inner {
border: none;
color: var(--color-main-green);
}
.subs-title {
color: var(--color-text-title);
position: absolute;
Expand All @@ -1954,8 +1943,11 @@ export default class ConnectionsDetail extends Vue {
.message-type {
@include flex-space-between;
.received-type-select {
width: 95px;
margin-left: 245px;
width: 88px;
margin-left: 227px;
.el-input__inner {
padding: 4px 10px;
}
}
.icon-tip {
position: absolute;
Expand Down Expand Up @@ -2016,4 +2008,11 @@ export default class ConnectionsDetail extends Vue {
}
}
}
.el-select-group__title {
padding-right: 20px;
color: var(--color-text-light) !important;
font-size: 13px;
height: 34px;
border-bottom: 1px solid var(--color-border-default);
}
</style>
23 changes: 15 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 @@ -89,18 +89,18 @@
</div>
<div class="publish-header">
<div class="publish-metadata">
<span class="publish-label">Payload: </span>
<el-select class="payload-select" size="mini" v-model="payloadType">
<el-option v-for="(type, index) in payloadOptions" :key="index" :value="type"> </el-option>
<el-option-group :label="$t('connections.publishPayloadEncodedBy')">
<el-option v-for="(type, index) in payloadOptions" :key="index" :label="type" :value="type"> </el-option>
</el-option-group>
</el-select>
<span class="publish-label">QoS: </span>
<el-select class="qos-select" size="mini" v-model="msgRecord.qos">
<el-option v-for="qos in [0, 1, 2]" :key="qos" :label="qos" :value="qos">
<el-option v-for="qos in [0, 1, 2]" :key="qos" :label="`QoS ${qos}`" :value="qos">
<span style="float: left">{{ qos }}</span>
<span style="float: right; color: #8492a6; margin-left: 12px">{{ $t(`connections.qos${qos}`) }}</span>
</el-option>
</el-select>
<el-checkbox class="retain-block" v-model="msgRecord.retain" label="Retain" border size="mini"></el-checkbox>
<el-checkbox class="retain-checkbox" v-model="msgRecord.retain" label="Retain" border size="mini"></el-checkbox>
<el-tooltip
placement="top"
:disabled="mqtt5PropsEnable"
Expand Down Expand Up @@ -586,8 +586,9 @@ export default class MsgPublish extends Vue {
}
.publish-metadata {
background: var(--color-bg-normal);
padding: 0 16px;
padding: 0 13px;
margin-top: 6px;
margin-bottom: 2px;
.el-input__inner {
padding: 4px 10px;
}
Expand All @@ -600,10 +601,16 @@ export default class MsgPublish extends Vue {
margin-right: 8px;
}
.qos-select {
width: 46px;
width: 76px;
}
.retain-block {
.retain-checkbox {
margin-left: 8px;
.el-checkbox__input {
line-height: 1px;
}
.el-checkbox__label {
padding-left: 8px;
}
}
.meta-block {
margin-left: 6px;
Expand Down
10 changes: 3 additions & 7 deletions web/src/components/SubscriptionsList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@
<el-button class="btn new-subs-btn" icon="el-icon-plus" plain type="outline" size="mini" @click="openDialog">
{{ $t('connections.newSubscription') }}
</el-button>
<a class="hide-btn" href="javascript:;" @click="hideSubsList">
<!-- <a class="hide-btn" href="javascript:;" @click="hideSubsList">
<i class="iconfont icon-collapse"></i>
</a>
</a> -->
</div>
<div
v-for="(sub, index) in subsList"
Expand Down Expand Up @@ -674,11 +674,7 @@ export default class SubscriptionsList extends Vue {
text-align: center;
position: relative;
padding: 16px 16px 0 16px;
text-align: initial;
.new-subs-btn {
border-width: 1px;
border-style: dashed;
}
text-align: center;
.hide-btn {
font-size: 20px;
position: absolute;
Expand Down
11 changes: 8 additions & 3 deletions web/src/lang/connections.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -355,9 +355,14 @@ export default {
ja: 'メッセージを受信する',
},
receivedPayloadDecodedBy: {
zh: '接收到的 Payload 通过编码格式输出',
en: 'Received Payload is output by encoding format',
ja: '受信したペイロードは、エンコード形式で出力されます',
zh: '使用以下格式编码接收到的 Payload',
en: 'Format Received Payload by',
ja: '以下の方式で受信 Payload をフォーマット: ',
},
publishPayloadEncodedBy: {
zh: '使用以下格式编码要发布的 Payload',
en: 'Format Payload to Publish by',
ja: '以下の方式で公開用 Payload をフォーマット: ',
},
alias: {
zh: '别名',
Expand Down
4 changes: 2 additions & 2 deletions web/src/utils/element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import {
Switch,
Select,
Option,
// OptionGroup,
OptionGroup,
Button,
// ButtonGroup,
// Table,
Expand Down Expand Up @@ -95,7 +95,7 @@ export default (Vue: any) => {
Vue.use(Switch)
Vue.use(Select)
Vue.use(Option)
// Vue.use(OptionGroup)
Vue.use(OptionGroup)
Vue.use(Button)
// Vue.use(ButtonGroup)
// Vue.use(Table)
Expand Down
37 changes: 18 additions & 19 deletions web/src/views/connections/ConnectionsDetail.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,18 +131,11 @@
</a>
</span>
<div class="message-type">
<el-tooltip
placement="top"
:effect="theme !== 'light' ? 'light' : 'dark'"
:open-delay="500"
:content="$t('connections.receivedPayloadDecodedBy')"
>
<a href="javascript:;" class="icon-tip">
<i class="el-icon-question"></i>
</a>
</el-tooltip>
<el-select class="received-type-select" size="small" v-model="receivedMsgType">
<el-option v-for="type in ['Plaintext', 'Base64', 'JSON', 'Hex']" :key="type" :value="type"> </el-option>
<el-select class="received-type-select" size="mini" v-model="receivedMsgType">
<el-option-group :label="$t('connections.receivedPayloadDecodedBy')">
<el-option v-for="type in ['Plaintext', 'JSON', 'Base64', 'Hex']" :key="type" :value="type">
</el-option>
</el-option-group>
</el-select>
<MsgTypeTabs v-model="msgType" @change="handleMsgTypeChanged" />
</div>
Expand Down Expand Up @@ -300,7 +293,7 @@ export default class ConnectionsDetail extends Vue {
private searchTopic = ''
private titleName: string = this.record.name
private retryTimes = 0
private inputHeight = 155
private inputHeight = 180
private msgBottom = 160
private messageListHeight: number = 284
private messageListMarginTop: number = 19
Expand Down Expand Up @@ -1141,10 +1134,6 @@ export default class ConnectionsDetail extends Vue {
right: 0;
z-index: 1;
transition: all 0.4s;
.el-input .el-input__inner {
border: none;
color: var(--color-main-green);
}
.subs-title {
line-height: 32px;
color: var(--color-text-title);
Expand All @@ -1164,8 +1153,11 @@ export default class ConnectionsDetail extends Vue {
.message-type {
@include flex-space-between;
.received-type-select {
width: 95px;
margin-left: 300px;
width: 88px;
margin-left: 276px;
.el-input__inner {
padding: 4px 10px;
}
}
.icon-tip {
position: absolute;
Expand Down Expand Up @@ -1227,4 +1219,11 @@ export default class ConnectionsDetail extends Vue {
background: var(--color-light-red);
}
}
.el-select-group__title {
padding-right: 20px;
color: var(--color-text-light) !important;
font-size: 13px;
height: 34px;
border-bottom: 1px solid var(--color-border-default);
}
</style>
Loading