This is an automated email from the ASF dual-hosted git repository. rohit pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/cloudstack-primate.git
commit a340256601f3231c974f51933b6d1c142b2f27d6 Author: Rohit Yadav <[email protected]> AuthorDate: Sun Nov 24 23:49:21 2019 +0530 components: styling and placement refactoring Signed-off-by: Rohit Yadav <[email protected]> --- src/components/header/ProjectMenu.vue | 60 ++++------- src/components/header/UserMenu.vue | 3 - src/components/page/GlobalHeader.vue | 8 +- src/components/view/DetailSettings.vue | 2 +- src/components/widgets/Breadcrumb.vue | 22 +++- src/layouts/ResourceLayout.vue | 2 +- src/views/AutogenView.vue | 166 +++++++++++------------------- src/views/dashboard/CapacityDashboard.vue | 60 ++++++----- 8 files changed, 139 insertions(+), 184 deletions(-) diff --git a/src/components/header/ProjectMenu.vue b/src/components/header/ProjectMenu.vue index 6e48b8f..489f4bb 100644 --- a/src/components/header/ProjectMenu.vue +++ b/src/components/header/ProjectMenu.vue @@ -16,49 +16,27 @@ // under the License. <template> - <a-popover - class="project" - v-model="visible" - trigger="click" - placement="bottom" - :autoAdjustOverflow="true" - :arrowPointAtCenter="true"> - <template slot="content"> - <a-menu style="margin: -12px -16px"> - <a-menu-item> - <a-icon class="project-icon" type="login" /> - <a-select - class="project-select" - size="default" - defaultValue="Default View" - :value="selectedProject" - :disabled="isDisabled()" - :filterOption="filterProject" - @change="changeProject" - showSearch> - <a-select-option v-for="(project, index) in projects" :key="index"> - {{ project.displaytext || project.name }} - </a-select-option> - </a-select> - </a-menu-item> - <a-menu-item> - <router-link :to="{ path: '/project' }"> - <a-icon class="project-icon" type="project" /> - {{ $t('Projects') }} - </router-link> - </a-menu-item> - </a-menu> - </template> - <span @click="visible = !visible" class="header-notice-opener"> - <a-icon class="project-icon" type="project" /> - </span> - </a-popover> + <span class="header-notice-opener"> + <a-select + class="project-select" + defaultValue="Default View" + :value="selectedProject" + :disabled="isDisabled()" + :filterOption="filterProject" + @change="changeProject" + showSearch> + <a-icon slot="suffixIcon" style="font-size:14px" type="project" /> + <a-select-option v-for="(project, index) in projects" :key="index"> + {{ project.displaytext || project.name }} + </a-select-option> + </a-select> + </span> </template> <script> import Vue from 'vue' -import { api } from '@/api' import store from '@/store' +import { api } from '@/api' import { CURRENT_PROJECT } from '@/store/mutation-types' export default { @@ -73,8 +51,6 @@ export default { mounted () { this.fetchData() }, - computed: { - }, methods: { fetchData () { if (this.isDisabled()) { @@ -130,11 +106,11 @@ export default { <style lang="less" scoped> .project { &-select { - width: 200px; + width: 40%; } &-icon { - font-size: 18px; + font-size: 20px; line-height: 1; padding-top: 5px; padding-right: 5px; diff --git a/src/components/header/UserMenu.vue b/src/components/header/UserMenu.vue index f16482c..0279934 100644 --- a/src/components/header/UserMenu.vue +++ b/src/components/header/UserMenu.vue @@ -18,7 +18,6 @@ <template> <div class="user-menu"> - <project-menu class="action"/> <translation-menu class="action"/> <header-notice class="action"/> <a-dropdown> @@ -60,14 +59,12 @@ <script> import config from '@/config/settings' import HeaderNotice from './HeaderNotice' -import ProjectMenu from './ProjectMenu' import TranslationMenu from './TranslationMenu' import { mapActions, mapGetters } from 'vuex' export default { name: 'UserMenu', components: { - ProjectMenu, TranslationMenu, HeaderNotice }, diff --git a/src/components/page/GlobalHeader.vue b/src/components/page/GlobalHeader.vue index 7a6ea85..d06882c 100644 --- a/src/components/page/GlobalHeader.vue +++ b/src/components/page/GlobalHeader.vue @@ -28,7 +28,7 @@ class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggle"/> - <breadcrumb v-if="device !== 'mobile'" /> + <project-menu v-if="device !== 'mobile'" /> <user-menu></user-menu> </div> <div v-else :class="['top-nav-header-index', theme]"> @@ -47,8 +47,8 @@ :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle"></a-icon> </div> - <breadcrumb v-if="device !== 'mobile'" /> - <user-menu class="header-index-right"></user-menu> + <project-menu v-if="device !== 'mobile'" /> + <user-menu></user-menu> </div> </div> @@ -59,6 +59,7 @@ import Breadcrumb from '@/components/widgets/Breadcrumb' import Logo from '../header/Logo' import SMenu from '../menu/' +import ProjectMenu from '../header/ProjectMenu' import UserMenu from '../header/UserMenu' import { mixin } from '@/utils/mixin.js' @@ -69,6 +70,7 @@ export default { Breadcrumb, Logo, SMenu, + ProjectMenu, UserMenu }, mixins: [mixin], diff --git a/src/components/view/DetailSettings.vue b/src/components/view/DetailSettings.vue index c6adafb..eeabb50 100644 --- a/src/components/view/DetailSettings.vue +++ b/src/components/view/DetailSettings.vue @@ -52,7 +52,7 @@ <a-icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" style="font-size: 24px"/> </a-button> <a-button shape="circle" size="small" @click="hideEditDetail(index)" style="margin: 2px"> - <a-icon type="close-circle" theme="twoTone" twoToneColor="#eb2f96" style="font-size: 24px"/> + <a-icon type="close-circle" theme="twoTone" twoToneColor="#f5222d" style="font-size: 24px"/> </a-button> </span> <span v-else>{{ item.value }}</span> diff --git a/src/components/widgets/Breadcrumb.vue b/src/components/widgets/Breadcrumb.vue index 4fe2e6b..990d1cf 100644 --- a/src/components/widgets/Breadcrumb.vue +++ b/src/components/widgets/Breadcrumb.vue @@ -27,11 +27,25 @@ </router-link> <span v-else-if="$route.params.id"> {{ $route.params.id }} - <a-button shape="circle" type="dashed" size="small" v-clipboard:copy="$route.params.id"> - <a-icon type="copy" style="margin-left: -1px; margin-top: 1px"/> - </a-button> </span> - <span v-else>{{ $t(item.meta.title) }}</span> + <span v-else> + {{ $t(item.meta.title) }} + </span> + <a-tooltip v-if="index === (breadList.length - 1)" placement="bottom"> + <template slot="title"> + {{ "Refresh" }} + </template> + <a-button + shape="circle" + style="margin-left: 8px" + @click="$emit('refresh')" > + <a-icon + type="reload" + style="margin-left: 0px" + @click="$emit('refresh')" + /> + </a-button> + </a-tooltip> </a-breadcrumb-item> </a-breadcrumb> </template> diff --git a/src/layouts/ResourceLayout.vue b/src/layouts/ResourceLayout.vue index abbe3d1..7817646 100644 --- a/src/layouts/ResourceLayout.vue +++ b/src/layouts/ResourceLayout.vue @@ -16,7 +16,7 @@ // under the License. <template> - <div style="padding-top: 12px" class="page-header-index-wide page-header-wrapper-grid-content-main"> + <div class="page-header-index-wide page-header-wrapper-grid-content-main"> <a-row :gutter="12"> <a-col :md="24" :lg="9" style="margin-bottom: 12px"> <slot name="left"> diff --git a/src/views/AutogenView.vue b/src/views/AutogenView.vue index a06bb5c..a1e0b07 100644 --- a/src/views/AutogenView.vue +++ b/src/views/AutogenView.vue @@ -17,93 +17,67 @@ <template> <div> - <a-card class="mobile-breadcrumb" v-if="device === 'mobile'"> - <breadcrumb /> - </a-card> - <a-row> - <a-col :span="18"> - <span - v-for="(action, actionIndex) in actions" - :key="actionIndex"> - <a-tooltip - placement="bottom" - v-if="action.api in $store.getters.apis && - ((!dataView && (action.listView || action.groupAction && selectedRowKeys.length > 0)) || - (dataView && action.dataView && ('show' in action ? action.show(resource) : true)))"> - <template slot="title"> - {{ $t(action.label) }} - </template> - <a-button - :icon="action.icon" - :type="action.icon === 'delete' ? 'danger' : (action.icon === 'plus' ? 'primary' : 'default')" - shape="circle" - style="margin-right: 5px" - @click="execAction(action)" - > - </a-button> - </a-tooltip> - </span> - <span v-if="!dataView" style="float: right; padding-right: 8px; margin-top: -2px"> - <a-tooltip placement="bottom"> - <template slot="title"> - {{ "Auto-Refresh" }} - </template> - <a-switch - style="margin: 8px;" - :loading="loading" - :checked="autoRefresh" - @change="toggleAutoRefresh" - /> - </a-tooltip> - <a-tooltip placement="bottom"> - <template slot="title"> - {{ "Refresh" }} - </template> - <a-button - @click="fetchData()" - :loading="loading" - shape="circle" - icon="reload" - /> - </a-tooltip> - </span> - </a-col> - <a-col :span="6"> - <a-tooltip placement="bottom" v-if="dataView"> - <template slot="title"> - {{ "Refresh" }} - </template> - <a-button - style="float: right" - @click="fetchData()" - :loading="loading" - shape="circle" - icon="reload" - /> - </a-tooltip> - <a-tooltip placement="bottom" v-if="dataView"> - <template slot="title"> - {{ "Auto-Refresh" }} - </template> - <a-switch - v-if="dataView" - style="float: right; margin: 5px;" - :loading="loading" - :checked="autoRefresh" - @change="toggleAutoRefresh" - /> - </a-tooltip> + <a-card class="mobile-breadcrumb"> + <a-row> + <a-col :span="24" style="display: inline-flex"> + <breadcrumb style="margin-right: 10px; width: 100%" @refresh="fetchData()" /> + <span + v-for="(action, actionIndex) in actions" + :key="actionIndex"> + <a-tooltip + placement="bottom" + v-if="action.api in $store.getters.apis && + ((!dataView && (action.listView || action.groupAction && selectedRowKeys.length > 0)) || + (dataView && action.dataView && ('show' in action ? action.show(resource) : true)))"> + <template slot="title"> + {{ $t(action.label) }} + </template> + <a-button + :icon="action.icon" + :type="action.icon === 'delete' ? 'danger' : (action.icon === 'plus' ? 'primary' : 'default')" + shape="circle" + style="margin-right: 5px" + @click="execAction(action)" + > + </a-button> + </a-tooltip> + </span> - <a-input-search - size="default" - placeholder="Search" - v-model="searchQuery" - v-if="!dataView" - @search="onSearch" - > - </a-input-search> - </a-col> - </a-row> + <a-input-search + style="width: 100%; padding-left: 5px" + size="default" + placeholder="Search" + v-model="searchQuery" + v-if="!dataView" + @search="onSearch" + > + </a-input-search> + </a-col> + <a-col :span="24" v-if="false"> + <span + v-for="(action, actionIndex) in actions" + :key="actionIndex"> + <a-tooltip + placement="bottom" + v-if="action.api in $store.getters.apis && + ((!dataView && (action.listView || action.groupAction && selectedRowKeys.length > 0)) || + (dataView && action.dataView && ('show' in action ? action.show(resource) : true)))"> + <template slot="title"> + {{ $t(action.label) }} + </template> + <a-button + :icon="action.icon" + :type="action.icon === 'delete' ? 'danger' : (action.icon === 'plus' ? 'primary' : 'default')" + shape="circle" + style="margin-right: 5px" + @click="execAction(action)" + > + </a-button> + </a-tooltip> + </span> + </a-col> + </a-row> + </a-card> <div v-show="showAction"> <keep-alive v-if="currentAction.component"> @@ -244,7 +218,6 @@ export default { return { apiName: '', loading: false, - autoRefresh: false, columns: [], items: [], itemCount: 0, @@ -418,21 +391,6 @@ export default { this.searchQuery = value this.fetchData() }, - toggleAutoRefresh () { - this.autoRefresh = !this.autoRefresh - this.doRefresh() - }, - doRefresh () { - if (!this.autoRefresh) { - return - } - const doRefresh = this.doRefresh - const fetchData = this.fetchData - setTimeout(function () { - fetchData() - doRefresh() - }, 5000) - }, closeAction () { this.currentAction.loading = false this.showAction = false @@ -626,8 +584,8 @@ export default { <style scoped> .mobile-breadcrumb { - margin-left: -16px; - margin-right: -16px; + margin-left: -24px; + margin-right: -24px; margin-top: -16px; margin-bottom: 12px; } diff --git a/src/views/dashboard/CapacityDashboard.vue b/src/views/dashboard/CapacityDashboard.vue index 930fddc..04d5518 100644 --- a/src/views/dashboard/CapacityDashboard.vue +++ b/src/views/dashboard/CapacityDashboard.vue @@ -37,37 +37,12 @@ Fetch Latest </template> <a-button - type="primary" shape="circle" @click="listCapacity(zoneSelected, true)"> <a-icon class="capacity-dashboard-button-icon" type="reload" /> </a-button> </a-tooltip> </div> - <div class="capacity-dashboard-button"> - <a-tooltip placement="bottom"> - <template slot="title"> - View Alerts - </template> - <a-button shape="circle"> - <router-link :to="{ name: 'alert' }"> - <a-icon class="capacity-dashboard-button-icon" type="flag" /> - </router-link> - </a-button> - </a-tooltip> - </div> - <div class="capacity-dashboard-button"> - <a-tooltip placement="bottom"> - <template slot="title"> - View Hosts in Alert State - </template> - <a-button type="danger" shape="circle"> - <router-link :to="{ name: 'host', query: {'state': 'Alert'} }"> - <a-icon class="capacity-dashboard-button-icon" type="desktop" /> - </router-link> - </a-button> - </a-tooltip> - </div> </div> <a-row :gutter="12"> <a-col @@ -96,7 +71,36 @@ <a-col :xl="6"> <chart-card> <div style="text-align: center"> - <a-button><router-link :to="{ name: 'event' }">View Events</router-link></a-button> + <a-tooltip placement="bottom" class="capacity-dashboard-button-wrapper"> + <template slot="title"> + View Hosts in Alert State + </template> + <a-button type="danger" shape="circle"> + <router-link :to="{ name: 'host', query: {'state': 'Alert'} }"> + <a-icon class="capacity-dashboard-button-icon" type="desktop" /> + </router-link> + </a-button> + </a-tooltip> + <a-tooltip placement="bottom" class="capacity-dashboard-button-wrapper"> + <template slot="title"> + View Alerts + </template> + <a-button shape="circle"> + <router-link :to="{ name: 'alert' }"> + <a-icon class="capacity-dashboard-button-icon" type="flag" /> + </router-link> + </a-button> + </a-tooltip> + <a-tooltip placement="bottom" class="capacity-dashboard-button-wrapper"> + <template slot="title"> + View Events + </template> + <a-button shape="circle"> + <router-link :to="{ name: 'event' }"> + <a-icon class="capacity-dashboard-button-icon" type="schedule" /> + </router-link> + </a-button> + </a-tooltip> </div> <template slot="footer"> <div class="capacity-dashboard-footer"> @@ -261,6 +265,10 @@ export default { } } + &-button-wrapper { + margin-left: 12px; + } + &-button { width: auto; padding-left: 12px;
