github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-02 18:04:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: update styles

Browse Source
This commit is contained in:
Qiuxia Fan 2022-01-10 16:54:57 +08:00
parent 74401f4e79
commit 89673ff65c
1 changed files with 32 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/views/dashboard/controls/Widget.vue
View File

@ -16,15 +16,21 @@ limitations under the License. -->
<div class="widget"> <div class="widget">
<div class="header flex-h"> <div class="header flex-h">
<div>{{ data.widget.title || "" }}</div> <div>{{ data.widget.title || "" }}</div>
<div class="operations"> <el-popover
<Icon placement="bottom"
class="mr-5" trigger="click"
size="sm" :style="{ width: '100px' }"
iconName="createmode_editedit" >
@click="setConfig" <template #reference>
/> <Icon iconName="ellipsis_v" size="middle" class="operation" />
<Icon size="sm" iconName="clearclose" @click="removeWidget" /> </template>
</div> <div class="tools" @click="setConfig">
<span>Edit</span>
</div>
<div class="tools" @click="removeWidget">
<span>Delete</span>
</div>
</el-popover>
</div> </div>
<div class="body" :style="{ height: '200px', width: '400px' }"> <div class="body" :style="{ height: '200px', width: '400px' }">
<component <component
@ -45,6 +51,7 @@ import graphs from "../graphs";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import Loading from "@/utils/loading"; import Loading from "@/utils/loading";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { ElPopover } from "element-plus";
const props = { const props = {
data: { data: {
@ -55,7 +62,7 @@ const props = {
}; };
export default defineComponent({ export default defineComponent({
name: "Widget", name: "Widget",
components: { ...graphs }, components: { ...graphs, ElPopover },
props, props,
setup(props) { setup(props) {
const { t } = useI18n(); const { t } = useI18n();
@ -70,6 +77,7 @@ export default defineComponent({
async function queryMetrics() { async function queryMetrics() {
const loadingInstance = loading({ const loadingInstance = loading({
text: t("loading"), text: t("loading"),
fullscreen: false,
}); });
const json = await dashboardStore.fetchMetricValue(props.data); const json = await dashboardStore.fetchMetricValue(props.data);
@ -123,11 +131,23 @@ export default defineComponent({
justify-content: space-between; justify-content: space-between;
} }
.operations { .operation {
color: #aaa;
cursor: pointer; cursor: pointer;
} }
.tools {
padding: 5px 0;
color: #999;
cursor: pointer;
position: relative;
text-align: center;
&:hover {
color: #409eff;
background-color: #eee;
}
}
.body { .body {
padding: 5px; padding: 5px;
height: 200px; height: 200px;