listview: show buttons with labels

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
This commit is contained in:
Rohit Yadav 2020-06-13 13:04:49 +05:30
parent a9bc272403
commit 73d8b1bb8f
5 changed files with 62 additions and 55 deletions

View File

@ -37,9 +37,13 @@
<a-button
:icon="action.icon"
:type="action.icon === 'delete' ? 'danger' : (action.icon === 'plus' ? 'primary' : 'default')"
shape="circle"
:shape="!dataView && action.icon === 'plus' ? 'round' : 'circle'"
style="margin-left: 5px"
@click="execAction(action)" />
@click="execAction(action)">
<span v-if="!dataView && action.icon === 'plus'">
{{ $t(action.label) }}
</span>
</a-button>
</a-badge>
<a-button
v-if="action.api in $store.getters.apis &&
@ -48,9 +52,13 @@
('show' in action ? action.show(resource, $store.getters) : true)"
:icon="action.icon"
:type="action.icon === 'delete' ? 'danger' : (action.icon === 'plus' ? 'primary' : 'default')"
shape="circle"
:shape="!dataView && action.icon === 'plus' ? 'round' : 'circle'"
style="margin-left: 5px"
@click="execAction(action)" />
@click="execAction(action)">
<span v-if="!dataView && action.icon === 'plus'">
{{ $t(action.label) }}
</span>
</a-button>
</a-tooltip>
</span>
</template>

View File

@ -68,7 +68,7 @@
<os-logo v-if="record.ostypename" :osName="record.ostypename" size="1x" style="margin-right: 5px" />
<console :resource="record" size="small" style="margin-right: 5px" />
<span v-if="$route.name === 'globalsetting'">{{ text }}</span>
<span v-if="$route.path.startsWith('/globalsetting')">{{ text }}</span>
<span v-else>
<router-link :to="{ path: $route.path + '/' + record.id }" v-if="record.id">{{ text }}</router-link>
<router-link :to="{ path: $route.path + '/' + record.name }" v-else>{{ text }}</router-link>

View File

@ -273,7 +273,7 @@
"label.add.certificate": "Add Certificate",
"label.add.ciscoasa1000v": "Add CiscoASA1000v Resource",
"label.add.cluster": "Add Cluster",
"label.add.compute.offering": "Add compute offering",
"label.add.compute.offering": "Add Compute Offering",
"label.add.direct.iprange": "Add Direct Ip Range",
"label.add.disk.offering": "Add Disk Offering",
"label.add.domain": "Add Domain",
@ -304,7 +304,7 @@
"label.add.network.acl": "Add network ACL",
"label.add.network.acl.list": "Add Network ACL List",
"label.add.network.device": "Add Network Device",
"label.add.network.offering": "Add network offering",
"label.add.network.offering": "Add Network Offering",
"label.add.new.f5": "Add new F5",
"label.add.new.gateway": "Add new gateway",
"label.add.new.iso": "Add new ISO",

View File

@ -21,53 +21,53 @@
<a-row>
<a-col :span="device === 'mobile' ? 24 : 12" style="padding-left: 12px">
<breadcrumb :resource="resource">
<a-tooltip placement="bottom" slot="end">
<template slot="title">
{{ $t('label.refresh') }}
</template>
<a-button
style="margin-top: 4px"
:loading="loading"
shape="round"
size="small"
icon="reload"
@click="fetchData()">
{{ $t('label.refresh') }}
</a-button>
</a-tooltip>
<span slot="end">
<a-tooltip placement="bottom">
<template slot="title">
{{ $t('label.refresh') }}
</template>
<a-button
style="margin-top: 4px"
:loading="loading"
shape="round"
size="small"
icon="reload"
@click="fetchData()">
{{ $t('label.refresh') }}
</a-button>
</a-tooltip>
<a-select
v-if="filters && filters.length > 0"
:placeholder="$t('label.filterby')"
:value="$t('label.' + selectedFilter)"
style="min-width: 100px; margin-left: 10px"
@change="changeFilter">
<a-icon slot="suffixIcon" type="filter" />
<a-select-option v-for="filter in filters" :key="filter">
{{ $t('label.' + filter) }}
</a-select-option>
</a-select>
</span>
</breadcrumb>
</a-col>
<a-col
:span="device === 'mobile' ? 24 : 12"
:style="device !== 'mobile' ? { 'margin-bottom': '-6px' } : { 'margin-top': '12px', 'margin-bottom': '-6px' }">
<span :style="device !== 'mobile' ? { float: 'right' } : {}">
<action-button
style="margin-bottom: 5px"
:loading="loading"
:actions="actions"
:selectedRowKeys="selectedRowKeys"
:dataView="dataView"
:resource="resource"
@exec-action="execAction"/>
<a-select
v-if="filters && filters.length > 0"
:placeholder="$t('label.filterby')"
:value="$t('label.' + selectedFilter)"
style="min-width: 100px; margin-left: 10px"
@change="changeFilter">
<a-icon slot="suffixIcon" type="filter" />
<a-select-option v-for="filter in filters" :key="filter">
{{ $t('label.' + filter) }}
</a-select-option>
</a-select>
<a-input-search
style="width: 20vw; margin-left: 10px"
:placeholder="$t('label.search')"
v-model="searchQuery"
v-if="!dataView && !treeView"
allowClear
@search="onSearch" />
</span>
:style="device === 'mobile' ? { float: 'right', 'margin-top': '12px', 'margin-bottom': '-6px', display: 'table' } : { float: 'right', display: 'table', 'margin-bottom': '-6px' }" >
<action-button
:style="dataView || treeView ? { float: device === 'mobile' ? 'left' : 'right' } : { 'margin-right': '10px', display: 'inline-flex' }"
:loading="loading"
:actions="actions"
:selectedRowKeys="selectedRowKeys"
:dataView="dataView"
:resource="resource"
@exec-action="execAction"/>
<a-input-search
style="width: 100%; display: table-cell"
:placeholder="$t('label.search')"
v-if="!dataView && !treeView"
v-model="searchQuery"
allowClear
@search="onSearch" />
</a-col>
</a-row>
</a-card>

View File

@ -116,11 +116,10 @@ export default {
<style scoped lang="scss">
.form-layout {
width: 600px;
}
.random {
width: 80%;
width: 80vw;
@media (min-width: 700px) {
width: 600px;
}
}
.action-button {