Skip to content

Commit 1eea9c5

Browse files
shwstpprshwstppr
authored
ui: add tooltips for actions in tab (#4842)
Adds tooltips for buttons in tabs Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>
1 parent f5e665c commit 1eea9c5

37 files changed

+561
-478
lines changed

‎ui/src/components/view/DetailSettings.vue‎

Lines changed: 9 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -52,18 +52,8 @@
5252
:dataSource="detailOptions[newKey]"
5353
:placeholder="$t('label.value')"
5454
@change="e => onAddInputChange(e, 'newValue')" />
55-
<a-tooltip arrowPointAtCenter placement="topRight">
56-
<template slot="title">
57-
{{ $t('label.add.setting') }}
58-
</template>
59-
<a-button icon="check" @click="addDetail" class="detail-button"></a-button>
60-
</a-tooltip>
61-
<a-tooltip arrowPointAtCenter placement="topRight">
62-
<template slot="title">
63-
{{ $t('label.cancel') }}
64-
</template>
65-
<a-button icon="close" @click="closeDetail" class="detail-button"></a-button>
66-
</a-tooltip>
55+
<tooltip-button :tooltip="$t('label.add.setting')" icon="check" @click="addDetail" buttonClass="detail-button" />
56+
<tooltip-button :tooltip="$t('label.cancel')" icon="close" @click="closeDetail" buttonClass="detail-button" />
6757
</a-input-group>
6858
<p v-if="error" style="color: red"> {{ $t(error) }} </p>
6959
</div>
@@ -90,14 +80,10 @@
9080
slot="actions"
9181
v-if="!disableSettings && 'updateTemplate' in $store.getters.apis &&
9282
'updateVirtualMachine' in $store.getters.apis && isAdminOrOwner() && allowEditOfDetail(item.name)">
93-
<a-button shape="circle" size="default" @click="updateDetail(index)" v-if="item.edit">
94-
<a-icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
95-
</a-button>
96-
<a-button shape="circle" size="default" @click="hideEditDetail(index)" v-if="item.edit">
97-
<a-icon type="close-circle" theme="twoTone" twoToneColor="#f5222d" />
98-
</a-button>
99-
<a-button
100-
shape="circle"
83+
<tootip-button :tooltip="$t('label.cancel')" @click="hideEditDetail(index)" v-if="item.edit" iconType="close-circle" iconTwoToneColor="#f5222d" />
84+
<tootip-button :tooltip="$t('label.ok')" @click="updateDetail(index)" v-if="item.edit" iconType="check-circle" iconTwoToneColor="#52c41a" />
85+
<tooltip-button
86+
:tooltip="$t('label.edit')"
10187
icon="edit"
10288
v-if="!item.edit"
10389
@click="showEditDetail(index)" />
@@ -113,7 +99,7 @@
11399
:cancelText="$t('label.no')"
114100
placement="left"
115101
>
116-
<a-button shape="circle" type="danger" icon="delete" />
102+
<tooltip-button :tooltip="$t('label.delete')" type="danger" icon="delete" />
117103
</a-popconfirm>
118104
</div>
119105
</a-list-item>
@@ -123,8 +109,10 @@
123109

124110
<script>
125111
import { api } from '@/api'
112+
import TooltipButton from './TooltipButton.vue'
126113
127114
export default {
115+
components: { TooltipButton },
128116
name: 'DetailSettings',
129117
props: {
130118
resource: {

‎ui/src/components/view/InfoCard.vue‎

Lines changed: 30 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -106,19 +106,15 @@
106106
<div class="resource-detail-item" v-if="resource.id">
107107
<div class="resource-detail-item__label">{{ $t('label.id') }}</div>
108108
<div class="resource-detail-item__details">
109-
<a-tooltip placement="right" >
110-
<template slot="title">
111-
<span>{{ $t('label.copyid') }}</span>
112-
</template>
113-
<a-button
114-
style="margin-left: -5px"
115-
shape="circle"
116-
icon="barcode"
117-
type="dashed"
118-
size="small"
119-
@click="$message.success($t('label.copied.clipboard'))"
120-
v-clipboard:copy="resource.id" />
121-
</a-tooltip>
109+
<tooltip-button
110+
tooltipPlacement="right"
111+
:tooltip="$t('label.copyid')"
112+
style="margin-left: -5px"
113+
icon="barcode"
114+
type="dashed"
115+
size="small"
116+
@click="$message.success($t('label.copied.clipboard'))"
117+
v-clipboard:copy="resource.id" />
122118
<span style="margin-left: 10px;">{{ resource.id }}</span>
123119
</div>
124120
</div>
@@ -573,14 +569,14 @@
573569
<a-icon type="key" />
574570
<strong>
575571
{{ $t('label.apikey') }}
576-
<a-tooltip placement="right" >
577-
<template slot="title">
578-
<span>{{ $t('label.copy') + ' ' + $t('label.apikey') }}</span>
579-
</template>
580-
<a-button shape="circle" type="dashed" size="small" @click="$message.success($t('label.copied.clipboard'))" v-clipboard:copy="resource.apikey">
581-
<a-icon type="copy"/>
582-
</a-button>
583-
</a-tooltip>
572+
<tooltip-button
573+
tooltipPlacement="right"
574+
:tooltip="$t('label.copy') + ' ' + $t('label.apikey')"
575+
icon="copy"
576+
type="dashed"
577+
size="small"
578+
@click="$message.success($t('label.copied.clipboard'))"
579+
v-clipboard:copy="resource.apikey" />
584580
</strong>
585581
<div>
586582
{{ resource.apikey.substring(0, 20) }}...
@@ -590,14 +586,14 @@
590586
<a-icon type="lock" />
591587
<strong>
592588
{{ $t('label.secretkey') }}
593-
<a-tooltip placement="right" >
594-
<template slot="title">
595-
<span>{{ $t('label.copy') + ' ' + $t('label.secretkey') }}</span>
596-
</template>
597-
<a-button shape="circle" type="dashed" size="small" @click="$message.success($t('label.copied.clipboard'))" v-clipboard:copy="resource.secretkey">
598-
<a-icon type="copy"/>
599-
</a-button>
600-
</a-tooltip>
589+
<tooltip-button
590+
tooltipPlacement="right"
591+
:tooltip="$t('label.copy') + ' ' + $t('label.secretkey')"
592+
icon="copy"
593+
type="dashed"
594+
size="small"
595+
@click="$message.success($t('label.copied.clipboard'))"
596+
v-clipboard:copy="resource.secretkey" />
601597
</strong>
602598
<div>
603599
{{ resource.secretkey.substring(0, 20) }}...
@@ -626,12 +622,8 @@
626622
<a-input ref="input" :value="inputKey" @change="handleKeyChange" style="width: 30%; text-align: center" :placeholder="$t('label.key')" />
627623
<a-input style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff" placeholder="=" disabled />
628624
<a-input :value="inputValue" @change="handleValueChange" style="width: 30%; text-align: center; border-left: 0" :placeholder="$t('label.value')" />
629-
<a-button shape="circle" size="small" @click="handleInputConfirm">
630-
<a-icon type="check"/>
631-
</a-button>
632-
<a-button shape="circle" size="small" @click="inputVisible=false">
633-
<a-icon type="close"/>
634-
</a-button>
625+
<tooltip-button :tooltip="$t('label.ok')" icon="check" size="small" @click="handleInputConfirm" />
626+
<tooltip-button :tooltip="$t('label.cancel')" icon="close" size="small" @click="inputVisible=false" />
635627
</a-input-group>
636628
</div>
637629
<a-tag @click="showInput" style="background: #fff; borderStyle: dashed;" v-else-if="isAdminOrOwner() && 'createTags' in $store.getters.apis">
@@ -701,13 +693,15 @@ import { api } from '@/api'
701693
import Console from '@/components/widgets/Console'
702694
import OsLogo from '@/components/widgets/OsLogo'
703695
import Status from '@/components/widgets/Status'
696+
import TooltipButton from '@/components/view/TooltipButton'
704697
705698
export default {
706699
name: 'InfoCard',
707700
components: {
708701
Console,
709702
OsLogo,
710-
Status
703+
Status,
704+
TooltipButton
711705
},
712706
props: {
713707
resource: {

‎ui/src/components/view/ListView.vue‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070
:enabled="quickViewEnabled() && actions.length > 0 && columns && columns[0].dataIndex === 'name' "
7171
@exec-action="$parent.execAction"/>
7272
<span v-if="$route.path.startsWith('/project')" style="margin-right: 5px">
73-
<a-button type="dashed" size="small" shape="circle" icon="login" @click="changeProject(record)" />
73+
<tooltip-button type="dashed" size="small" icon="login" @click="changeProject(record)" />
7474
</span>
7575
<os-logo v-if="record.ostypename" :osName="record.ostypename" size="1x" style="margin-right: 5px" />
7676

@@ -287,30 +287,29 @@
287287
</div>
288288
</template>
289289
<template slot="actions" slot-scope="text, record">
290-
<a-button
291-
shape="circle"
290+
<tooltip-button
291+
:tooltip="$t('label.edit')"
292292
:disabled="!('updateConfiguration' in $store.getters.apis)"
293293
v-if="editableValueKey !== record.key"
294294
icon="edit"
295295
@click="editValue(record)" />
296-
<a-button
297-
shape="circle"
296+
<tooltip-button
297+
:tooltip="$t('label.cancel')"
298+
@click="editableValueKey = null"
299+
v-if="editableValueKey === record.key"
300+
iconType="close-circle"
301+
iconTwoToneColor="#f5222d" />
302+
<tooltip-button
303+
:tooltip="$t('label.ok')"
298304
:disabled="!('updateConfiguration' in $store.getters.apis)"
299305
@click="saveValue(record)"
300-
v-if="editableValueKey === record.key" >
301-
<a-icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
302-
</a-button>
303-
<a-button
304-
shape="circle"
305-
size="default"
306-
@click="editableValueKey = null"
307-
v-if="editableValueKey === record.key" >
308-
<a-icon type="close-circle" theme="twoTone" twoToneColor="#f5222d" />
309-
</a-button>
306+
v-if="editableValueKey === record.key"
307+
iconType="check-circle"
308+
iconTwoToneColor="#52c41a" />
310309
</template>
311310
<template slot="tariffActions" slot-scope="text, record">
312-
<a-button
313-
shape="circle"
311+
<tooltip-button
312+
:tooltip="$t('label.edit')"
314313
v-if="editableValueKey !== record.key"
315314
:disabled="!('quotaTariffUpdate' in $store.getters.apis)"
316315
icon="edit"
@@ -327,6 +326,7 @@ import OsLogo from '@/components/widgets/OsLogo'
327326
import Status from '@/components/widgets/Status'
328327
import InfoCard from '@/components/view/InfoCard'
329328
import QuickView from '@/components/view/QuickView'
329+
import TooltipButton from '@/components/view/TooltipButton'
330330
331331
export default {
332332
name: 'ListView',
@@ -335,7 +335,8 @@ export default {
335335
OsLogo,
336336
Status,
337337
InfoCard,
338-
QuickView
338+
QuickView,
339+
TooltipButton
339340
},
340341
props: {
341342
columns: {

‎ui/src/components/view/SearchView.vue‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -76,9 +76,7 @@
7676
<a-input ref="input" :value="inputKey" @change="e => inputKey = e.target.value" style="width: 50px; text-align: center" :placeholder="$t('label.key')" />
7777
<a-input style=" width: 20px; border-left: 0; pointer-events: none; backgroundColor: #fff" placeholder="=" disabled />
7878
<a-input :value="inputValue" @change="handleValueChange" style="width: 50px; text-align: center; border-left: 0" :placeholder="$t('label.value')" />
79-
<a-button shape="circle" size="small" @click="inputKey = inputValue = ''">
80-
<a-icon type="close"/>
81-
</a-button>
79+
<tooltip-button icon="close" size="small" @click="inputKey = inputValue = ''" />
8280
</a-input-group>
8381
</div>
8482
</div>

‎ui/src/components/view/SettingsTab.vue‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -46,25 +46,24 @@
4646
</div>
4747

4848
<div slot="actions" class="action">
49-
<a-button
50-
shape="circle"
49+
<tooltip-button
50+
:tooltip="$t('label.edit')"
5151
:disabled="!('updateConfiguration' in $store.getters.apis)"
5252
v-if="editableValueKey !== index"
5353
icon="edit"
5454
@click="setEditableSetting(item, index)" />
55-
<a-button
56-
shape="circle"
57-
size="default"
55+
<tooltip-button
56+
:tooltip="$t('label.cancel')"
5857
@click="editableValueKey = null"
59-
v-if="editableValueKey === index" >
60-
<a-icon type="close-circle" theme="twoTone" twoToneColor="#f5222d" />
61-
</a-button>
62-
<a-button
63-
shape="circle"
58+
v-if="editableValueKey === index"
59+
iconType="close-circle"
60+
iconTwoToneColor="#f5222d" />
61+
<tooltip-button
62+
:tooltip="$t('label.ok')"
6463
@click="updateData(item)"
65-
v-if="editableValueKey === index" >
66-
<a-icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
67-
</a-button>
64+
v-if="editableValueKey === index"
65+
iconType="check-circle"
66+
iconTwoToneColor="#52c41a" />
6867
</div>
6968
</a-list-item>
7069
</a-list>
@@ -73,8 +72,12 @@
7372

7473
<script>
7574
import { api } from '@/api'
75+
import TooltipButton from './TooltipButton.vue'
7676
7777
export default {
78+
components: {
79+
TooltipButton
80+
},
7881
name: 'SettingsTab',
7982
props: {
8083
resource: {

0 commit comments

Comments
 (0)