Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

➖ remove b-tooltip component #5856

Merged
merged 10 commits into from
May 18, 2023
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions components/bsx/Offer/OfferTable.vue
Original file line number Diff line number Diff line change
Expand Up @@ -82,11 +82,11 @@
field="expirationBlock"
:label="$t('offer.expiration')"
sortable>
<b-tooltip
<NeoTooltip
v-if="!isExpired(props.row.expiration)"
:label="calcExpirationDate(props.row.expiration)">
{{ calcExpirationTime(props.row.expiration) }}
</b-tooltip>
</NeoTooltip>
<span v-else>
{{ calcExpirationTime(props.row.expiration) }}
</span>
daiagi marked this conversation as resolved.
Show resolved Hide resolved
Expand All @@ -99,7 +99,7 @@
width="120"
sortable>
<div class="buttons">
<b-tooltip
<NeoTooltip
v-if="isOwner"
:label="$t('offer.expired')"
:active="calcExpirationTime(props.row.expiration) === 'expired'"
Expand All @@ -110,7 +110,7 @@
icon-left="money-bill"
:disabled="calcExpirationTime(props.row.expiration) === 'expired'"
@click="tellFrens(props.row.caller, false)" />
</b-tooltip>
</NeoTooltip>
<b-button
v-if="props.row.caller === accountId || isOwner"
type="is-orange"
Expand Down Expand Up @@ -159,11 +159,13 @@ import { Offer } from './types'
import OfferMixin from '@/utils/mixins/offerMixin'
import PrefixMixin from '@/utils/mixins/prefixMixin'
import { getKusamaAssetId } from '@/utils/api/bsx/query'
import { NeoTooltip } from '@kodadot1/brick'

const components = {
Identity: () => import('@/components/identity/IdentityIndex.vue'),
Money: () => import('@/components/bsx/format/TokenMoney.vue'),
Pagination: () => import('@/components/rmrk/Gallery/Pagination.vue'),
NeoTooltip,
}

@Component({ components, filters: { formatDistanceToNow } })
Expand Down
8 changes: 3 additions & 5 deletions components/common/IdentityForm.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,9 @@
<form>
<p class="title is-size-3">
{{ $i18n.t('identity.set') }}
<b-tooltip
:label="$i18n.t('identity.fundsReserve')"
position="is-bottom">
<NeoTooltip :label="$i18n.t('identity.fundsReserve')" position="bottom">
roiLeo marked this conversation as resolved.
Show resolved Hide resolved
<NeoIcon icon="info-circle" pack="fas" />
</b-tooltip>
</NeoTooltip>
</p>

<p v-if="accountId" class="subtitle is-size-6">
Expand Down Expand Up @@ -89,7 +87,7 @@ import { notificationTypes, showNotification } from '@/utils/notification'
import { onApiConnect } from '@kodadot1/sub-api'
import { hexToString, isHex } from '@polkadot/util'
import { Data } from '@polkadot/types'
import { NeoIcon } from '@kodadot1/brick'
import { NeoIcon, NeoTooltip } from '@kodadot1/brick'

const Auth = defineAsyncComponent(() => import('@/components/shared/Auth.vue'))
const BasicInput = defineAsyncComponent(
Expand Down
25 changes: 13 additions & 12 deletions components/navbar/CreateDropdown.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,48 +7,48 @@
</div>
</template>
<b-dropdown-item has-link>
<b-tooltip
position="is-left"
<NeoTooltip
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tooltip overflows

image

image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I made a change to have it multiline but I find it change the UI, should I keep it multiline?

Copy link
Contributor

@daiagi daiagi May 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Either that or change max width of tooltip to large value to avoid it overflowing

I would opt for increasing max width

position="left"
:label="$t('createDropdown.start')"
class="navbar-item-tooltip">
<nuxt-link data-cy="classic" :to="`/${urlPrefix}/create`">
{{ $t('classic') }}
</nuxt-link>
</b-tooltip>
</NeoTooltip>
</b-dropdown-item>

<b-dropdown-item has-link>
<b-tooltip
<NeoTooltip
v-if="chain === 'bsx' && accountId"
position="is-left"
position="left"
:label="$t('createDropdown.waifu')"
class="navbar-item-tooltip">
<nuxt-link data-cy="waifu" :to="`/${urlPrefix}/waifu`">
{{ $t('navbar.create.waifu') }}
</nuxt-link>
</b-tooltip>
</NeoTooltip>
</b-dropdown-item>
<template v-if="chain === 'rmrk'">
<b-dropdown-item has-link>
<b-tooltip
position="is-left"
<NeoTooltip
position="left"
:label="$t('createDropdown.simplifiedNft')"
class="navbar-item-tooltip">
<nuxt-link data-cy="simple" :to="`/${urlPrefix}/mint`">
{{ $t('simple') }}
</nuxt-link>
</b-tooltip>
</NeoTooltip>
</b-dropdown-item>
</template>
<b-dropdown-item v-if="redesign" has-link>
<b-tooltip
position="is-left"
<NeoTooltip
position="left"
:label="$t('createDropdown.massmint')"
class="navbar-item-tooltip">
<nuxt-link data-cy="massmint" :to="`/${urlPrefix}/massmint`">
{{ $t('multipleNFTS') }}
</nuxt-link>
</b-tooltip>
</NeoTooltip>
</b-dropdown-item>
</b-dropdown>

Expand Down Expand Up @@ -87,6 +87,7 @@

<script lang="ts" setup>
import MobileExpandableSection from '@/components/navbar/MobileExpandableSection.vue'
import { NeoTooltip } from '@kodadot1/brick'

defineProps<{
chain: string
Expand Down
2 changes: 0 additions & 2 deletions components/rmrk/Create/DropUpload.vue
Original file line number Diff line number Diff line change
Expand Up @@ -55,14 +55,12 @@

<script lang="ts">
import { Component, Emit, Prop, Ref, Vue } from 'nuxt-property-decorator'
import Tooltip from '@/components/shared/Tooltip.vue'
import MediaResolver from '@/components/media/MediaResolver.vue'
import { MAX_UPLOADED_FILE_SIZE } from '@/utils/constants'
import { NeoIcon } from '@kodadot1/brick'

@Component({
components: {
Tooltip,
MediaResolver,
NeoIcon,
},
Expand Down
1 change: 0 additions & 1 deletion components/rmrk/Create/SimpleMint.vue
Original file line number Diff line number Diff line change
Expand Up @@ -231,7 +231,6 @@ const components = {
Auth: () => import('@/components/shared/Auth.vue'),
MetadataUpload: () => import('./DropUpload.vue'),
PasswordInput: () => import('@/components/shared/PasswordInput.vue'),
Tooltip: () => import('@/components/shared/Tooltip.vue'),
Support,
AttributeTagInput: () => import('./AttributeTagInput.vue'),
BalanceInput: () => import('@/components/shared/BalanceInput.vue'),
Expand Down
6 changes: 3 additions & 3 deletions components/rmrk/Gallery/EmotionList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,15 @@
type="is-outlined"
class="emoji-box mb-2"
@click="$emit('selected', emoji.parsed)">
<b-tooltip append-to-body>
<NeoTooltip append-to-body>
roiLeo marked this conversation as resolved.
Show resolved Hide resolved
{{ emoji.parsed }}
<span class="ml-1">{{ emoji.count }}</span>
<template #content>
<div v-for="issuer in emoji.issuers" :key="issuer">
<Identity :address="issuer" />
</div>
</template>
</b-tooltip>
</NeoTooltip>
</b-button>

<b-button
Expand All @@ -32,7 +32,7 @@ import orderBy from 'lodash/orderBy'

import { Emotion } from '../service/scheme'
import EmotionModal from './EmotionModal.vue'
import { NeoIcon } from '@kodadot1/brick'
import { NeoIcon, NeoTooltip } from '@kodadot1/brick'

const issuerId = (emotion: Emotion) => emotion.caller

Expand Down
10 changes: 4 additions & 6 deletions components/rmrk/Gallery/History.vue
Original file line number Diff line number Diff line change
Expand Up @@ -102,14 +102,11 @@
cell-class="short-identity__table"
field="Date"
label="Date">
<b-tooltip
:label="props.row.Date"
position="is-right"
append-to-body>
<NeoTooltip :label="props.row.Date" position="right" append-to-body>
roiLeo marked this conversation as resolved.
Show resolved Hide resolved
<BlockExplorerLink
:block-id="props.row.Block"
:text="props.row.Time" />
</b-tooltip>
</NeoTooltip>
</b-table-column>
</b-table>
</div>
Expand Down Expand Up @@ -140,14 +137,15 @@ import {
import shortAddress from '@/utils/shortAddress'

import { Interaction as EventInteraction } from '../service/scheme'
import { NeoIcon } from '@kodadot1/brick'
import { NeoIcon, NeoTooltip } from '@kodadot1/brick'

const components = {
Identity: () => import('@/components/identity/IdentityIndex.vue'),
Pagination: () => import('@/components/rmrk/Gallery/Pagination.vue'),
BlockExplorerLink: () => import('@/components/shared/BlockExplorerLink.vue'),
CommonTokenMoney: () => import('@/components/shared/CommonTokenMoney.vue'),
NeoIcon,
NeoTooltip,
}

type TableRowItem = {
Expand Down
11 changes: 6 additions & 5 deletions components/rmrk/Gallery/Holder/Holder.vue
Original file line number Diff line number Diff line change
Expand Up @@ -115,11 +115,11 @@
field="Timestamp"
:label="dateHeaderLabel"
sortable>
<b-tooltip :label="props.row.Date" position="is-right">
<NeoTooltip :label="props.row.Date" position="right">
<BlockExplorerLink
:text="props.row.Time"
:block-id="props.row.Block" />
</b-tooltip>
</NeoTooltip>
</b-table-column>
<template slot="detail" slot-scope="props">
<tr v-for="item in props.row.Items" :key="item.Item.id">
Expand Down Expand Up @@ -149,9 +149,9 @@
{{ item.Percentage | toPercent('-') }}
</td>
<td v-show="columnsVisible['Date'].display">
<b-tooltip :label="item.Date" position="is-right">
<NeoTooltip :label="item.Date" position="right">
<BlockExplorerLink :text="item.Time" :block-id="item.Block" />
</b-tooltip>
</NeoTooltip>
</td>
</tr>
</template>
Expand All @@ -174,12 +174,13 @@ import PrefixMixin from '@/utils/mixins/prefixMixin'
import { parseDate, parsePriceForItem } from './helper'
import { Interaction as EventInteraction } from '../../service/scheme'
import { usePreferencesStore } from '@/stores/preferences'
import { NeoIcon } from '@kodadot1/brick'
import { NeoIcon, NeoTooltip } from '@kodadot1/brick'

const components = {
Identity: () => import('@/components/identity/IdentityIndex.vue'),
BlockExplorerLink: () => import('@/components/shared/BlockExplorerLink.vue'),
NeoIcon,
NeoTooltip,
}

export type NftHolderEvent = {
Expand Down
12 changes: 6 additions & 6 deletions components/rmrk/Gallery/Layout.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="content is-hidden-mobile">
<b-field :position="position">
<b-tooltip :label="$t('tooltip.largeDisplay')">
<NeoTooltip :label="$t('tooltip.largeDisplay')">
<b-radio-button
v-model="preferenceLayout"
type="is-primary"
Expand All @@ -13,8 +13,8 @@
<NeoIcon icon="th-large" />
</span>
</b-radio-button>
</b-tooltip>
<b-tooltip :label="$t('tooltip.smallDisplay')">
</NeoTooltip>
<NeoTooltip :label="$t('tooltip.smallDisplay')">
<b-radio-button
v-model="preferenceLayout"
type="is-primary"
Expand All @@ -26,7 +26,7 @@
<NeoIcon icon="th" />
</span>
</b-radio-button>
</b-tooltip>
</NeoTooltip>
</b-field>
</div>
</template>
Expand All @@ -35,9 +35,9 @@
import { Component, Prop, Vue } from 'nuxt-property-decorator'
import { RmrkType } from '@/components/rmrk/service/scheme'
import { usePreferencesStore } from '@/stores/preferences'
import { NeoIcon } from '@kodadot1/brick'
import { NeoIcon, NeoTooltip } from '@kodadot1/brick'

@Component({ components: { NeoIcon } })
@Component({ components: { NeoIcon, NeoTooltip } })
export default class Layout extends Vue {
@Prop({ default: 'nftDetail' }) public type!: string
@Prop({ default: 'rmrk/detail' }) public link!: string
Expand Down
11 changes: 8 additions & 3 deletions components/rmrk/Gallery/Pagination.vue
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
aria-current-label="Current page"
@change="onPageChange">
</b-pagination>
<b-tooltip :label="$t('tooltip.random') + ' (g+r)'">
<NeoTooltip :label="$t('tooltip.random') + ' (g+r)'">
<b-button
v-if="hasMagicBtn"
class="ml-2 magicBtn is-bordered-light share-button"
Expand All @@ -25,7 +25,7 @@
icon-left="dice"
@click="goToRandomPage">
</b-button>
</b-tooltip>
</NeoTooltip>
</div>
</template>

Expand All @@ -34,8 +34,13 @@ import { Component, Prop, Watch, mixins } from 'nuxt-property-decorator'
import { Debounce } from 'vue-debounce-decorator'
import { getRandomIntInRange } from '../utils'
import KeyboardEventsMixin from '~/utils/mixins/keyboardEventsMixin'
import { NeoTooltip } from '@kodadot1/brick'

@Component({})
@Component({
components: {
NeoTooltip,
},
})
export default class Pagination extends mixins(KeyboardEventsMixin) {
@Prop() value!: number
@Prop() public total!: number
Expand Down
Loading