Skip to content
代码片段 群组 项目
未验证 提交 d7acfa53 编辑于 作者: tbrkollar's avatar tbrkollar 提交者： GitHub
浏览文件

Fix logo on config page and toolbar (#1095)

上级 d9df1e59
No related branches found
No related tags found
无相关合并请求
隐藏空白变更内容
行内 左右并排
public/zap_logo.png 0 → 100644
+ 0
− 0
浏览文件 @ d7acfa53
public/zap_logo.png

45.5 KB

src/components/ZCLToolbar.vue
+ 2
− 2
浏览文件 @ d7acfa53
...@@ -206,7 +206,7 @@ export default { ...@@ -206,7 +206,7 @@ export default {
'.svg' '.svg'
) )
} else { } else {
return '' return '/zap_logo.png'
} }
}, },
}, },
...@@ -267,7 +267,7 @@ export default { ...@@ -267,7 +267,7 @@ export default {
}, },
}, },
mounted() { mounted() {
if(this.$onWebSocket) { if (this.$onWebSocket) {
this.$onWebSocket( this.$onWebSocket(
dbEnum.wsCategory.notificationCount, dbEnum.wsCategory.notificationCount,
(notificationCount) => { (notificationCount) => {
......
src/css/quasar.variables.scss
+ 24
− 21
浏览文件 @ d7acfa53
...@@ -29,7 +29,7 @@ $warning: #f2c037; ...@@ -29,7 +29,7 @@ $warning: #f2c037;
background: transparent; background: transparent;
} }
.body--light{ .body--light {
.bg-glass { .bg-glass {
background-color: rgba(238, 238, 238, 0.61); background-color: rgba(238, 238, 238, 0.61);
-webkit-backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
...@@ -209,8 +209,8 @@ $warning: #f2c037; ...@@ -209,8 +209,8 @@ $warning: #f2c037;
} }
} }
.body--dark{ .body--dark {
color:#cfcfcf !important; color: #cfcfcf !important;
.bg-glass { .bg-glass {
background-color: rgba(25, 25, 25, 0.61); background-color: rgba(25, 25, 25, 0.61);
-webkit-backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
...@@ -242,7 +242,8 @@ $warning: #f2c037; ...@@ -242,7 +242,8 @@ $warning: #f2c037;
.q-item { .q-item {
transition: all 0.1s ease-out; transition: all 0.1s ease-out;
min-height: auto; min-height: auto;
background: linear-gradient(var(--q-dark), var(--q-dark)) padding-box, background: linear-gradient(var(--q-dark), var(--q-dark))
padding-box,
linear-gradient( linear-gradient(
90deg, 90deg,
rgba(78, 143, 242, 1), rgba(78, 143, 242, 1),
...@@ -256,14 +257,14 @@ $warning: #f2c037; ...@@ -256,14 +257,14 @@ $warning: #f2c037;
transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;
width: fit-content; width: fit-content;
font-weight: 500; font-weight: 500;
color: #cfcfcf;; color: #cfcfcf;
} }
} }
} }
} }
.q-expansion-item__content { .q-expansion-item__content {
transition: all 0.1s ease-in !important; transition: all 0.1s ease-in !important;
background: linear-gradient(var(--q-dark),var(--q-dark)) padding-box, background: linear-gradient(var(--q-dark), var(--q-dark)) padding-box,
linear-gradient(90deg, rgba(78, 143, 242, 1), rgba(118, 246, 207, 1)) linear-gradient(90deg, rgba(78, 143, 242, 1), rgba(118, 246, 207, 1))
border-box !important; border-box !important;
border: 2px solid white; border: 2px solid white;
...@@ -284,7 +285,7 @@ $warning: #f2c037; ...@@ -284,7 +285,7 @@ $warning: #f2c037;
min-height: auto; min-height: auto;
padding-bottom: 0; padding-bottom: 0;
border: none; border: none;
background: transparent !important; background: transparent !important;
border-radius: 14px; border-radius: 14px;
padding: 7px 14px; padding: 7px 14px;
&__section { &__section {
...@@ -326,8 +327,9 @@ $warning: #f2c037; ...@@ -326,8 +327,9 @@ $warning: #f2c037;
.q-item { .q-item {
transition: all 0.1s ease-out; transition: all 0.1s ease-out;
min-height: auto; min-height: auto;
background: linear-gradient(var(--q-dark), var(--q-dark)) padding-box, background: linear-gradient(var(--q-dark), var(--q-dark))
linear-gradient(90deg,var(--q-primary), rgba(0, 0, 0, 1)) padding-box,
linear-gradient(90deg, var(--q-primary), rgba(0, 0, 0, 1))
border-box !important; border-box !important;
border: 2px solid transparent; border: 2px solid transparent;
border-radius: 14px; border-radius: 14px;
...@@ -343,7 +345,7 @@ $warning: #f2c037; ...@@ -343,7 +345,7 @@ $warning: #f2c037;
} }
.q-expansion-item__content { .q-expansion-item__content {
transition: all 0.1s ease-in !important; transition: all 0.1s ease-in !important;
background: linear-gradient(#272821,#272821) padding-box, background: linear-gradient(#272821, #272821) padding-box,
linear-gradient(90deg, var(--q-primary), rgba(0, 0, 0, 1)) linear-gradient(90deg, var(--q-primary), rgba(0, 0, 0, 1))
border-box !important; border-box !important;
border: 2px solid white; border: 2px solid white;
...@@ -375,7 +377,7 @@ $warning: #f2c037; ...@@ -375,7 +377,7 @@ $warning: #f2c037;
margin-bottom: -1px; margin-bottom: -1px;
margin-left: 3px; margin-left: 3px;
background: var(--q-primary); background: var(--q-primary);
color: #cfcfcf;; color: #cfcfcf;
padding: 2px 16px; padding: 2px 16px;
width: fit-content; width: fit-content;
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
...@@ -491,16 +493,19 @@ h2 { ...@@ -491,16 +493,19 @@ h2 {
} }
} }
.logo { .logo {
width: 100%; width: auto;
height: auto; height: auto;
max-height: 40px;
max-width: 150px; max-width: 150px;
} }
:root { :root {
--q-transition-duration: 1s; --q-transition-duration: 1s;
} }
.w-fit-content {
width: fit-content;
}
@keyframes fadeInAnimation { @keyframes fadeInAnimation {
0% { 0% {
...@@ -510,20 +515,18 @@ h2 { ...@@ -510,20 +515,18 @@ h2 {
opacity: 1; opacity: 1;
} }
} }
.text-h4{ .text-h4 {
font-size: 2rem; font-size: 2rem;
} }
.q-rounded-borders-xl{ .q-rounded-borders-xl {
border-radius: 20px; border-radius: 20px;
} }
.q-btn--rounded{ .q-btn--rounded {
border-radius: 12px; border-radius: 12px;
} }
.zigbeee{ .zigbeee {
--q-color-primary: #C10015; --q-color-primary: #c10015;
--q-primary: #C10015; --q-primary: #c10015;
} }
:root { :root {
--q-transition-duration: 1s; --q-transition-duration: 1s;
......
src/pages/ZapConfig.vue
+ 93
− 53
浏览文件 @ d7acfa53
<template> <template>
<q-page <q-page padding class="row justify-center full-height" :class="getuitheme">
padding
class="row justify-center full-height"
:class="{ zigbee: getuitheme === 'zigbee' }"
>
<Transition name="slide-up" mode="out-in" appear> <Transition name="slide-up" mode="out-in" appear>
<q-card flat class="q-mt-lg q-rounded-borders-xl bg-glass col-10 column"> <q-card flat class="q-mt-lg q-rounded-borders-xl bg-glass col-10 column">
<q-scroll-area class="col q-px-xl"> <q-scroll-area class="col q-px-xl">
...@@ -11,16 +7,10 @@ ...@@ -11,16 +7,10 @@
<Transition name="slide-up" mode="out-in" appear> <Transition name="slide-up" mode="out-in" appear>
<div class="column"> <div class="column">
<img <img
v-if="getuitheme === 'zigbee'" v-if="getLogo"
height="40" height="40"
class="mx-auto q-my-lg block" class="q-mx-auto q-my-lg block w-fit-content"
src="/zigbee_logo.svg" :src="getLogo"
/>
<img
v-else
height="40"
class="mx-auto q-my-lg block"
src="/matter_logo.svg"
/> />
</div> </div>
</Transition> </Transition>
...@@ -99,36 +89,57 @@ ...@@ -99,36 +89,57 @@
</q-td> </q-td>
<q-td key="status" :props="props"> <q-td key="status" :props="props">
<div v-if="props.row.warning"> <div v-if="props.row.warning">
<q-icon class="cursor-pointer" name="warning" color="orange" size="2.5em" @click="propertyDataDialog[props.row.id] = true"> <q-icon
class="cursor-pointer"
name="warning"
color="orange"
size="2.5em"
@click="propertyDataDialog[props.row.id] = true"
>
</q-icon> </q-icon>
<q-dialog v-model="propertyDataDialog[props.row.id]" persistent> <q-dialog
v-model="propertyDataDialog[props.row.id]"
persistent
>
<q-card> <q-card>
<q-card-section> <q-card-section>
<div class="row items-center"> <div class="row items-center">
<div class="col-1"> <div class="col-1">
<q-icon name="warning" color="orange" size="2em"/> <q-icon
</div> name="warning"
<div class="text-h6 col">{{ props.row.description }} </div> color="orange"
<div class="col-1 text-right"> size="2em"
/>
</div>
<div class="text-h6 col">
{{ props.row.description }}
</div>
<div class="col-1 text-right">
<q-btn dense flat icon="close" v-close-popup> <q-btn dense flat icon="close" v-close-popup>
<q-tooltip>Close</q-tooltip> <q-tooltip>Close</q-tooltip>
</q-btn> </q-btn>
</div>
</div> </div>
<ul> </div>
<li <ul>
v-for="(notification, index) in props.row.notifications" <li
:key="index" v-for="(notification, index) in props.row
style="margin-bottom: 20px" .notifications"
> :key="index"
{{ notification }} style="margin-bottom: 20px"
</li> >
</ul> {{ notification }}
</li>
</ul>
</q-card-section> </q-card-section>
</q-card> </q-card>
</q-dialog> </q-dialog>
</div> </div>
<q-icon v-else name="check_circle" color="green" size="2em" /> <q-icon
v-else
name="check_circle"
color="green"
size="2em"
/>
</q-td> </q-td>
</q-tr> </q-tr>
</template> </template>
...@@ -180,13 +191,23 @@ ...@@ -180,13 +191,23 @@
</q-td> </q-td>
<q-td key="status" :props="props"> <q-td key="status" :props="props">
<div v-if="props.row.warning"> <div v-if="props.row.warning">
<q-icon name="warning" color="orange" size="2.5em" @click="genDataDialog[props.row.id] = true"> <q-icon
name="warning"
color="orange"
size="2.5em"
@click="genDataDialog[props.row.id] = true"
>
</q-icon> </q-icon>
<q-dialog v-model="genDataDialog[props.row.id]" persistent> <q-dialog
v-model="genDataDialog[props.row.id]"
persistent
>
<q-card> <q-card>
<q-bar> <q-bar>
<q-icon name="warning" color="orange"/> <q-icon name="warning" color="orange" />
<div class="text-h6">{{ props.row.description }}</div> <div class="text-h6">
{{ props.row.description }}
</div>
<q-space /> <q-space />
<q-btn dense flat icon="close" v-close-popup> <q-btn dense flat icon="close" v-close-popup>
<q-tooltip>Close</q-tooltip> <q-tooltip>Close</q-tooltip>
...@@ -194,11 +215,12 @@ ...@@ -194,11 +215,12 @@
</q-bar> </q-bar>
<q-card-section> <q-card-section>
<ul> <ul>
<li <li
v-for="(notification, index) in props.row.notifications" v-for="(notification, index) in props.row
.notifications"
:key="index" :key="index"
style="margin-bottom: 20px" style="margin-bottom: 20px"
> >
{{ notification }} {{ notification }}
</li> </li>
</ul> </ul>
...@@ -206,7 +228,12 @@ ...@@ -206,7 +228,12 @@
</q-card> </q-card>
</q-dialog> </q-dialog>
</div> </div>
<q-icon v-else name="check_circle" color="green" size="2em" /> <q-icon
v-else
name="check_circle"
color="green"
size="2em"
/>
</q-td> </q-td>
</q-tr> </q-tr>
</template> </template>
...@@ -308,8 +335,8 @@ const generateNewSessionCol = [ ...@@ -308,8 +335,8 @@ const generateNewSessionCol = [
name: 'status', name: 'status',
label: 'status', label: 'status',
align: 'left', align: 'left',
style: 'width: 15%' style: 'width: 15%',
} },
] ]
const loadPreSessionCol = [ const loadPreSessionCol = [
{ {
...@@ -377,6 +404,21 @@ export default { ...@@ -377,6 +404,21 @@ export default {
getuitheme: function () { getuitheme: function () {
return this.selectedZclPropertiesData?.category return this.selectedZclPropertiesData?.category
}, },
getLogo: {
get() {
if (this.selectedZclPropertiesData?.category) {
return (
'/' +
this.selectedZclPropertiesData?.category +
'_logo' +
(this.$q.dark.isActive ? '_white' : '') +
'.svg'
)
} else {
return '/zap_logo.png'
}
},
},
}, },
watch: { watch: {
...@@ -474,33 +516,31 @@ export default { ...@@ -474,33 +516,31 @@ export default {
id: item.sessionId, id: item.sessionId,
}) })
}) })
this.$serverGet(restApi.uri.packageNotification) this.$serverGet(restApi.uri.packageNotification)
.then((resp) => { .then((resp) => {
let messageMap = {} let messageMap = {}
resp.data.forEach((row) => { resp.data.forEach((row) => {
if(!(row.packageId in messageMap)) { if (!(row.packageId in messageMap)) {
messageMap[row.packageId] = [] messageMap[row.packageId] = []
} }
messageMap[row.packageId].push(row.message) messageMap[row.packageId].push(row.message)
}) })
this.zclPropertiesRow.forEach((row)=>{ this.zclPropertiesRow.forEach((row) => {
if(row.id in messageMap) { if (row.id in messageMap) {
row.warning = true row.warning = true
row.notifications = messageMap[row.id] row.notifications = messageMap[row.id]
} } else {
else {
row.warning = false row.warning = false
row.notifications = [] row.notifications = []
} }
this.propertyDataDialog[row.id] = false this.propertyDataDialog[row.id] = false
}) })
this.zclGenRow.forEach((row, index)=>{ this.zclGenRow.forEach((row, index) => {
if(row.id in messageMap) { if (row.id in messageMap) {
row.warning = true row.warning = true
row.notifications = messageMap[row.id] row.notifications = messageMap[row.id]
} } else {
else {
row.warning = false row.warning = false
row.notifications = [] row.notifications = []
} }
......
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或