This is an automated email from the ASF dual-hosted git repository.
nvazquez pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/cloudstack.git
The following commit(s) were added to refs/heads/main by this push:
new d8a961e Fix action bar in place (#5368)
d8a961e is described below
commit d8a961e5225b609248548f61efb7c37054d92e8b
Author: davidjumani <[email protected]>
AuthorDate: Tue Aug 31 04:50:18 2021 +0530
Fix action bar in place (#5368)
---
ui/src/components/page/GlobalLayout.vue | 124 +++++++++++++++-------------
ui/src/views/AutogenView.vue | 142 ++++++++++++++++----------------
2 files changed, 137 insertions(+), 129 deletions(-)
diff --git a/ui/src/components/page/GlobalLayout.vue
b/ui/src/components/page/GlobalLayout.vue
index ebfd4c4..0203cd1 100644
--- a/ui/src/components/page/GlobalLayout.vue
+++ b/ui/src/components/page/GlobalLayout.vue
@@ -18,72 +18,78 @@
<template>
<a-layout class="layout" :class="[device]">
- <template v-if="isSideMenu()">
- <a-drawer
- v-if="isMobile()"
- :wrapClassName="'drawer-sider ' + navTheme"
- :closable="false"
- :visible="collapsed"
- placement="left"
- @close="() => this.collapsed = false"
- >
+ <a-affix style="z-index: 200">
+
+ <template v-if="isSideMenu()">
+ <a-drawer
+ v-if="isMobile()"
+ :wrapClassName="'drawer-sider ' + navTheme"
+ :closable="false"
+ :visible="collapsed"
+ placement="left"
+ @close="() => this.collapsed = false"
+ >
+ <side-menu
+ :menus="menus"
+ :theme="navTheme"
+ :collapsed="false"
+ :collapsible="true"
+ mode="inline"
+ @menuSelect="menuSelect"></side-menu>
+ </a-drawer>
+
<side-menu
- :menus="menus"
- :theme="navTheme"
- :collapsed="false"
- :collapsible="true"
+ v-else
mode="inline"
- @menuSelect="menuSelect"></side-menu>
- </a-drawer>
-
- <side-menu
- v-else
- mode="inline"
- :menus="menus"
- :theme="navTheme"
- :collapsed="collapsed"
- :collapsible="true"></side-menu>
- </template>
- <template v-else>
- <a-drawer
- v-if="isMobile()"
- :wrapClassName="'drawer-sider ' + navTheme"
- placement="left"
- @close="() => this.collapsed = false"
- :closable="false"
- :visible="collapsed"
- >
- <side-menu
:menus="menus"
:theme="navTheme"
- :collapsed="false"
- :collapsible="true"
- mode="inline"
- @menuSelect="menuSelect"></side-menu>
- </a-drawer>
- </template>
-
- <template>
- <drawer :visible="showSetting" placement="right">
- <div slot="handler">
- <a-button type="primary" size="large">
- <a-icon :type="showSetting ? 'close' : 'setting'"/>
- </a-button>
- </div>
- <setting slot="drawer" :visible="showSetting" />
- </drawer>
- </template>
+ :collapsed="collapsed"
+ :collapsible="true"></side-menu>
+ </template>
+ <template v-else>
+ <a-drawer
+ v-if="isMobile()"
+ :wrapClassName="'drawer-sider ' + navTheme"
+ placement="left"
+ @close="() => this.collapsed = false"
+ :closable="false"
+ :visible="collapsed"
+ >
+ <side-menu
+ :menus="menus"
+ :theme="navTheme"
+ :collapsed="false"
+ :collapsible="true"
+ mode="inline"
+ @menuSelect="menuSelect"></side-menu>
+ </a-drawer>
+ </template>
+
+ <template>
+ <drawer :visible="showSetting" placement="right">
+ <div slot="handler">
+ <a-button type="primary" size="large">
+ <a-icon :type="showSetting ? 'close' : 'setting'"/>
+ </a-button>
+ </div>
+ <setting slot="drawer" :visible="showSetting" />
+ </drawer>
+ </template>
+
+ </a-affix>
<a-layout :class="[layoutMode, `content-width-${contentWidth}`]" :style="{
paddingLeft: contentPaddingLeft, minHeight: '100vh' }">
<!-- layout header -->
- <global-header
- :mode="layoutMode"
- :menus="menus"
- :theme="navTheme"
- :collapsed="collapsed"
- :device="device"
- @toggle="toggle"
- />
+ <a-affix style="z-index: 100">
+ <global-header
+ :mode="layoutMode"
+ :menus="menus"
+ :theme="navTheme"
+ :collapsed="collapsed"
+ :device="device"
+ @toggle="toggle"
+ />
+ </a-affix>
<!-- layout content -->
<a-layout-content class="layout-content" :class="{'is-header-fixed':
fixedHeader}">
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index 72ec725..a49bc95 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -17,74 +17,76 @@
<template>
<div>
- <a-card class="breadcrumb-card">
- <a-row>
- <a-col :span="device === 'mobile' ? 24 : 12" style="padding-left:
12px">
- <breadcrumb :resource="resource">
- <span slot="end">
- <a-button
- :loading="loading"
- style="margin-bottom: 5px"
- shape="round"
- size="small"
- icon="reload"
- @click="fetchData({ irefresh: true })">
- {{ $t('label.refresh') }}
- </a-button>
- <a-switch
- v-if="!dataView && ['vm', 'volume', 'zone', 'cluster', 'host',
'storagepool'].includes($route.name)"
- style="margin-left: 8px"
- :checked-children="$t('label.metrics')"
- :un-checked-children="$t('label.metrics')"
- :checked="$store.getters.metrics"
- @change="(checked, event) => { $store.dispatch('SetMetrics',
checked) }"/>
- <a-tooltip placement="right">
- <template slot="title">
- {{ $t('label.filterby') }}
- </template>
- <a-select
- v-if="!dataView && filters && filters.length > 0"
- :placeholder="$t('label.filterby')"
- :value="$route.query.filter || (projectView && $route.name
=== 'vm' ||
- ['Admin',
'DomainAdmin'].includes($store.getters.userInfo.roletype) && ['vm', 'iso',
'template'].includes($route.name)
- ? 'all' : ['guestnetwork'].includes($route.name) ? 'all' :
'self')"
- style="min-width: 100px; margin-left: 10px"
- @change="changeFilter">
- <a-icon slot="suffixIcon" type="filter" />
- <a-select-option v-if="['Admin',
'DomainAdmin'].includes($store.getters.userInfo.roletype) && ['vm', 'iso',
'template'].includes($route.name)" key="all">
- {{ $t('label.all') }}
- </a-select-option>
- <a-select-option v-for="filter in filters" :key="filter">
- {{ $t('label.' + filter) }}
- </a-select-option>
- </a-select>
- </a-tooltip>
- </span>
- </breadcrumb>
- </a-col>
- <a-col
- :span="device === 'mobile' ? 24 : 12"
- :style="device === 'mobile' ? { float: 'right', 'margin-top':
'12px', 'margin-bottom': '-6px', display: 'table' } : { float: 'right',
display: 'table', 'margin-bottom': '-6px' }" >
- <slot name="action" v-if="dataView &&
$route.path.startsWith('/publicip')"></slot>
- <action-button
- v-else
- :style="dataView ? { float: device === 'mobile' ? 'left' : 'right'
} : { 'margin-right': '10px', display: getStyle(), padding: '5px' }"
- :loading="loading"
- :actions="actions"
- :selectedRowKeys="selectedRowKeys"
- :dataView="dataView"
- :resource="resource"
- @exec-action="(action) => execAction(action, action.groupAction &&
!dataView)"/>
- <search-view
- v-if="!dataView"
- :searchFilters="searchFilters"
- :searchParams="searchParams"
- :apiName="apiName"
- @search="onSearch"
- @change-filter="changeFilter"/>
- </a-col>
- </a-row>
- </a-card>
+ <a-affix :offsetTop="78">
+ <a-card class="breadcrumb-card" style="z-index: 10">
+ <a-row>
+ <a-col :span="device === 'mobile' ? 24 : 12" style="padding-left:
12px">
+ <breadcrumb :resource="resource">
+ <span slot="end">
+ <a-button
+ :loading="loading"
+ style="margin-bottom: 5px"
+ shape="round"
+ size="small"
+ icon="reload"
+ @click="fetchData({ irefresh: true })">
+ {{ $t('label.refresh') }}
+ </a-button>
+ <a-switch
+ v-if="!dataView && ['vm', 'volume', 'zone', 'cluster',
'host', 'storagepool'].includes($route.name)"
+ style="margin-left: 8px"
+ :checked-children="$t('label.metrics')"
+ :un-checked-children="$t('label.metrics')"
+ :checked="$store.getters.metrics"
+ @change="(checked, event) => { $store.dispatch('SetMetrics',
checked) }"/>
+ <a-tooltip placement="right">
+ <template slot="title">
+ {{ $t('label.filterby') }}
+ </template>
+ <a-select
+ v-if="!dataView && filters && filters.length > 0"
+ :placeholder="$t('label.filterby')"
+ :value="$route.query.filter || (projectView && $route.name
=== 'vm' ||
+ ['Admin',
'DomainAdmin'].includes($store.getters.userInfo.roletype) && ['vm', 'iso',
'template'].includes($route.name)
+ ? 'all' : ['guestnetwork'].includes($route.name) ? 'all'
: 'self')"
+ style="min-width: 100px; margin-left: 10px"
+ @change="changeFilter">
+ <a-icon slot="suffixIcon" type="filter" />
+ <a-select-option v-if="['Admin',
'DomainAdmin'].includes($store.getters.userInfo.roletype) && ['vm', 'iso',
'template'].includes($route.name)" key="all">
+ {{ $t('label.all') }}
+ </a-select-option>
+ <a-select-option v-for="filter in filters" :key="filter">
+ {{ $t('label.' + filter) }}
+ </a-select-option>
+ </a-select>
+ </a-tooltip>
+ </span>
+ </breadcrumb>
+ </a-col>
+ <a-col
+ :span="device === 'mobile' ? 24 : 12"
+ :style="device === 'mobile' ? { float: 'right', 'margin-top':
'12px', 'margin-bottom': '-6px', display: 'table' } : { float: 'right',
display: 'table', 'margin-bottom': '-6px' }" >
+ <slot name="action" v-if="dataView &&
$route.path.startsWith('/publicip')"></slot>
+ <action-button
+ v-else
+ :style="dataView ? { float: device === 'mobile' ? 'left' :
'right' } : { 'margin-right': '10px', display: getStyle(), padding: '5px' }"
+ :loading="loading"
+ :actions="actions"
+ :selectedRowKeys="selectedRowKeys"
+ :dataView="dataView"
+ :resource="resource"
+ @exec-action="(action) => execAction(action, action.groupAction
&& !dataView)"/>
+ <search-view
+ v-if="!dataView"
+ :searchFilters="searchFilters"
+ :searchParams="searchParams"
+ :apiName="apiName"
+ @search="onSearch"
+ @change-filter="changeFilter"/>
+ </a-col>
+ </a-row>
+ </a-card>
+ </a-affix>
<div v-show="showAction">
<keep-alive v-if="currentAction.component && (!currentAction.groupAction
|| this.selectedRowKeys.length === 0)">
@@ -334,7 +336,7 @@
</a-modal>
</div>
- <div v-if="dataView">
+ <div v-if="dataView" style="margin-top: -10px">
<slot name="resource" v-if="$route.path.startsWith('/quotasummary') ||
$route.path.startsWith('/publicip')"></slot>
<resource-view
v-else
@@ -353,6 +355,7 @@
@refresh="this.fetchData" />
<a-pagination
class="row-element"
+ style="margin-top: 10px"
size="small"
:current="page"
:pageSize="pageSize"
@@ -1453,7 +1456,6 @@ export default {
}
.row-element {
- margin-top: 10px;
margin-bottom: 10px;
}
