MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[WIP] replace buttons with new ui component

This commit is contained in:
ArneBo 2024-12-12 18:01:02 +01:00 committed by upsiflu
parent 5399f9be0e
commit 5eef4692e1
27 changed files with 128 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
front/src/components/album/Widget.vue
View File

@ -9,6 +9,7 @@ import { useI18n } from 'vue-i18n'
import axios from 'axios'
import AlbumCard from '~/components/album/Card.vue'
import Button from '~/components/ui/Button.vue'
import useErrorHandler from '~/composables/useErrorHandler'
@ -111,13 +112,12 @@ watch(
</slot>
<template v-if="nextPage">
<div class="ui hidden divider" />
<button
<Button
v-if="nextPage"
:class="['ui', 'basic', 'button']"
@click="fetchData(nextPage)"
>
{{ t('components.audio.album.Widget.button.more') }}
</button>
</Button>
</template>
</div>
</template>

6
front/src/components/artist/Widget.vue
View File

@ -9,6 +9,7 @@ import { useI18n } from 'vue-i18n'
import axios from 'axios'
import ArtistCard from '~/components/artist/Card.vue'
import Button from '~/components/ui/Button.vue'
import useErrorHandler from '~/composables/useErrorHandler'
@ -107,13 +108,12 @@ watch(
</slot>
<template v-if="nextPage">
<div class="ui hidden divider" />
<button
<Button
v-if="nextPage"
:class="['ui', 'basic', 'button']"
@click="fetchData(nextPage)"
>
{{ t('components.audio.artist.Widget.button.more') }}
</button>
</Button>
</template>
</div>
</template>

6
front/src/components/audio/ChannelSeries.vue
View File

@ -8,6 +8,7 @@ import { useI18n } from 'vue-i18n'
import axios from 'axios'
import ChannelSerieCard from '~/components/audio/ChannelSerieCard.vue'
import AlbumCard from '~/components/audio/album/Card.vue'
import Button from '~/components/ui/Button.vue'
interface Props {
filters: object
@ -82,13 +83,12 @@ fetchData()
</div>
<template v-if="nextPage">
<div class="ui hidden divider" />
<button
<Button
v-if="nextPage"
:class="['ui', 'basic', 'button']"
@click="fetchData(nextPage)"
>
{{ t('components.audio.ChannelSeries.button.showMore') }}
</button>
</Button>
</template>
<template v-if="!isLoading && albums.length === 0">
<empty-state

6
front/src/components/audio/ChannelsWidget.vue
View File

@ -8,6 +8,7 @@ import { useI18n } from 'vue-i18n'
import axios from 'axios'
import ChannelCard from '~/components/audio/ChannelCard.vue'
import Button from '~/components/ui/Button.vue'
interface Events {
(e: 'fetched', channels: BackendResponse<Channel>): void
@ -75,13 +76,12 @@ fetchData()
</div>
<template v-if="nextPage">
<div class="ui hidden divider" />
<button
<Button
v-if="nextPage"
:class="['ui', 'basic', 'button']"
@click="fetchData(nextPage)"
>
{{ t('components.audio.ChannelsWidget.button.showMore') }}
</button>
</Button>
</template>
<template v-if="!isLoading && channels.length === 0">
<empty-state

6
front/src/components/audio/track/Widget.vue
View File

@ -9,6 +9,7 @@ import { useI18n } from 'vue-i18n'
import axios from 'axios'
import useWebSocketHandler from '~/composables/useWebSocketHandler'
import Button from '~/components/ui/Button.vue'
import PlayButton from '~/components/audio/PlayButton.vue'
import TagsList from '~/components/tags/List.vue'
@ -219,12 +220,11 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
</div>
<template v-if="nextPage">
<div class="ui hidden divider" />
<button
:class="['ui', 'basic', 'button']"
<Button
@click="fetchData(nextPage as string)"
>
{{ t('components.audio.track.Widget.button.more') }}
</button>
</Button>
</template>
</div>
</template>

8
front/src/components/auth/Authorize.vue
View File

@ -9,6 +9,7 @@ import { ref, computed } from 'vue'
import useSharedLabels from '~/composables/locale/useSharedLabels'
import useScopes from '~/composables/auth/useScopes'
import useFormData from '~/composables/useFormData'
import Button from '~/components/ui/Button.vue'
interface Props {
clientId: string
@ -204,13 +205,12 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
<li>{{ unknownscope }}</li>
</ul>
</div>
<button
class="ui success labeled icon button"
<Button
icon="bi-unlock"
type="submit"
>
<i class="lock open icon" />
{{ t('components.auth.Authorize.button.authorize', { app: application.name }) }}
</button>
</Button>
<p
v-if="redirectUri === 'urn:ietf:wg:oauth:2.0:oob'"
>

7
front/src/components/auth/Logout.vue
View File

@ -3,6 +3,8 @@ import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useStore } from '~/store'
import Button from '~/components/ui/Button.vue'
const store = useStore()
const { t } = useI18n()
@ -27,12 +29,11 @@ const labels = computed(() => ({
<p>
{{ t('components.auth.Logout.message.loggedIn', { username: store.state.auth.username }) }}
</p>
<button
class="ui button"
<Button
@click="store.dispatch('auth/logout')"
>
{{ t('components.auth.Logout.button.logout') }}
</button>
</Button>
</div>
<div
v-else

6
front/src/components/common/EmptyState.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import Button from '~/components/ui/Button.vue'
interface Events {
(e: 'refresh'): void
@ -30,13 +31,12 @@ withDefaults(defineProps<Props>(), {
</h4>
<div class="inline center aligned text">
<slot />
<button
<Button
v-if="refresh"
class="ui button"
@click="emit('refresh')"
>
{{ t('components.common.EmptyState.button.refresh') }}
</button>
</Button>
</div>
</div>
</template>

10
front/src/components/federation/FetchButton.vue
View File

@ -3,6 +3,7 @@ import type { BackendError } from '~/types'
import axios from 'axios'
import SemanticModal from '~/components/semantic/Modal.vue'
import Button from '~/components/ui/Button.vue'
import { useTimeoutFn } from '@vueuse/core'
import { ref } from 'vue'
@ -212,16 +213,15 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
</div>
</div>
<div class="actions">
<button class="ui basic cancel button">
<Button color="secondary">
{{ t('components.federation.FetchButton.button.close') }}
</button>
<button
</Button>
<Button
v-if="data && data.status === 'finished'"
class="ui confirm success button"
@click.prevent="showModal = false; emit('refresh')"
>
{{ t('components.federation.FetchButton.button.reload') }}
</button>
</Button>
</div>
</semantic-modal>
</div>

6
front/src/components/federation/LibraryWidget.vue
View File

@ -8,6 +8,7 @@ import { useI18n } from 'vue-i18n'
import axios from 'axios'
import LibraryCard from '~/views/content/remote/Card.vue'
import Button from '~/components/ui/Button.vue'
import useErrorHandler from '~/composables/useErrorHandler'
@ -90,13 +91,12 @@ fetchData()
</div>
<template v-if="nextPage">
<div class="ui hidden divider" />
<button
<Button
v-if="nextPage"
:class="['ui', 'basic', 'button']"
@click="fetchData(nextPage)"
>
{{ t('components.federation.LibraryWidget.button.showMore') }}
</button>
</Button>
</template>
</div>
</template>

16
front/src/components/forms/PasswordInput.vue
View File

@ -4,6 +4,8 @@ import { useI18n } from 'vue-i18n'
import { useClipboard, useVModel } from '@vueuse/core'
import { useStore } from '~/store'
import Button from '~/components/ui/Button.vue'
interface Events {
(e: 'update:modelValue', value: string): void
}
@ -53,22 +55,20 @@ const copyPassword = () => {
name="password"
:type="passwordInputType"
>
<button
<Button
type="button"
:title="labels.title"
class="ui icon button"
icon="bi-eye"
@click.prevent="showPassword = !showPassword"
>
<i class="eye icon" />
</button>
<button
</Button>
<Button
v-if="copyButton && canCopy"
type="button"
class="ui icon button"
icon="bi-copy"
:title="labels.copy"
@click.prevent="copyPassword"
>
<i class="copy icon" />
</button>
</Button>
</div>
</template>

6
front/src/components/library/Albums.vue
View File

@ -17,6 +17,7 @@ import $ from 'jquery'
import TagsSelector from '~/components/library/TagsSelector.vue'
import AlbumCard from '~/components/album/Card.vue'
import Pagination from '~/components/vui/Pagination.vue'
import Button from '~/components/ui/Button.vue'
import useSharedLabels from '~/composables/locale/useSharedLabels'
import useOrdering from '~/composables/navigation/useOrdering'
@ -141,13 +142,12 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
name="search"
:placeholder="labels.searchPlaceholder"
>
<button
class="ui icon button"
<Button
type="submit"
:aria-label="t('components.library.Albums.button.search')"
>
<i class="search icon" />
</button>
</Button>
</div>
</div>
<div class="field">

12
front/src/components/library/ArtistBase.vue
View File

@ -13,6 +13,7 @@ import useLogger from '~/composables/useLogger'
import EmbedWizard from '~/components/audio/EmbedWizard.vue'
import SemanticModal from '~/components/semantic/Modal.vue'
import Button from '~/components/ui/Button.vue'
import PlayButton from '~/components/audio/PlayButton.vue'
import RadioButton from '~/components/radios/Button.vue'
import Popover from '~/components/ui/Popover.vue'
@ -161,21 +162,20 @@ watch(() => props.id, fetchData, { immediate: true })
</div>
</div>
<div class="actions">
<button class="ui deny button">
<Button color="secondary">
{{ t('components.library.ArtistBase.button.cancel') }}
</button>
</Button>
</div>
</semantic-modal>
<div class="ui buttons">
<Popover>
<template #default="{ toggleOpen }">
<button
class="ui button"
<Button
@click="toggleOpen"
icon="caret-down-fill"
>
{{ t('components.library.ArtistBase.button.more') }}
<i class="dropdown icon" />
</button>
</Button>
</template>
<template #items>

8
front/src/components/library/Artists.vue
View File

@ -17,6 +17,7 @@ import $ from 'jquery'
import TagsSelector from '~/components/library/TagsSelector.vue'
import Pagination from '~/components/vui/Pagination.vue'
import Button from '~/components/ui/Button.vue'
import useSharedLabels from '~/composables/locale/useSharedLabels'
import useOrdering from '~/composables/navigation/useOrdering'
@ -142,13 +143,12 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
name="search"
:placeholder="labels.searchPlaceholder"
>
<button
class="ui icon button"
<Button
type="submit"
icon="bi-search"
:aria-label="t('components.library.Artists.button.search')"
>
<i class="search icon" />
</button>
</Button>
</div>
</div>
<div class="field">

6
front/src/components/library/FsBrowser.vue
View File

@ -4,6 +4,8 @@ import type { FileSystem, FSEntry } from '~/types'
import { useVModel } from '@vueuse/core'
import { useI18n } from 'vue-i18n'
import Button from '~/components/ui/Button.vue'
interface Events {
(e: 'update:modelValue', value: string[]): void
@ -42,12 +44,12 @@ const handleClick = (entry: FSEntry) => {
disabled
:value="props.data.root + '/' + value.join('/')"
>
<button
<Button
class="ui button"
@click.prevent="emit('import')"
>
{{ t('components.library.FsBrowser.button.import') }}
</button>
</Button>
</div>
<div class="ui list component-fs-browser">
<a

9
front/src/components/library/ImportStatusModal.vue
View File

@ -1,10 +1,11 @@
<script setup lang="ts">
import type { Upload } from '~/types'
import SemanticModal from '~/components/semantic/Modal.vue'
import { useVModel } from '@vueuse/core'
import { useI18n } from 'vue-i18n'
import SemanticModal from '~/components/semantic/Modal.vue'
import Button from '~/components/ui/Button.vue'
interface ErrorEntry {
key: string
value: string
@ -183,9 +184,9 @@ const getErrorData = (upload: Upload) => {
</div>
</div>
<div class="actions">
<button class="ui deny button">
<Button color="secondary">
{{ t('components.library.ImportStatusModal.button.close') }}
</button>
</Button>
</div>
</semantic-modal>
</template>

21
front/src/components/library/Podcasts.vue
View File

@ -3,8 +3,6 @@ import type { OrderingProps } from '~/composables/navigation/useOrdering'
import type { Artist, BackendResponse } from '~/types'
import type { RouteRecordName } from 'vue-router'
import type { OrderingField } from '~/store/ui'
import Popover from "~/components/ui/Popover.vue"
import PopoverItem from "~/components/ui/popover/PopoverItem.vue"
import { computed, ref, watch } from 'vue'
import { useRouteQuery } from '@vueuse/router'
@ -20,6 +18,9 @@ import RemoteSearchForm from '~/components/RemoteSearchForm.vue'
import Modal from '~/components/ui/Modal.vue'
import ArtistCard from '~/components/artist/Card.vue'
import Pagination from '~/components/vui/Pagination.vue'
import Popover from "~/components/ui/Popover.vue"
import PopoverItem from "~/components/ui/popover/PopoverItem.vue"
import Button from '~/components/ui/Button.vue'
import useSharedLabels from '~/composables/locale/useSharedLabels'
import useOrdering from '~/composables/navigation/useOrdering'
@ -143,13 +144,12 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
name="search"
:placeholder="labels.searchPlaceholder"
>
<button
class="ui icon button"
<Button
icon="bi-search"
type="submit"
:aria-label="t('components.library.Podcasts.button.search')"
>
<i class="search icon" />
</button>
</Button>
</div>
</div>
<div class="field">
@ -275,17 +275,16 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
/>
</div>
<div class="actions">
<button class="ui basic deny button">
<Button color="secondary">
{{ t('components.library.Podcasts.button.cancel') }}
</button>
<button
</Button>
<Button
form="remote-search"
type="submit"
class="ui primary button"
>
<i class="bookmark icon" />
{{ t('components.library.Podcasts.button.subscribe') }}
</button>
</Button>
</div>
</Modal>
</main>

7
front/src/components/library/Radios.vue
View File

@ -176,13 +176,12 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
name="search"
:placeholder="labels.searchPlaceholder"
>
<button
class="ui icon button"
<Button
icon="bi-search"
type="submit"
:aria-label="t('components.library.Radios.button.search')"
>
<i class="search icon" />
</button>
</Button>
</div>
</div>
<div class="field">

5
front/src/components/library/TrackBase.vue
View File

@ -18,6 +18,7 @@ import PlayButton from '~/components/audio/PlayButton.vue'
import Button from '~/components/ui/Button.vue'
import Popover from '~/components/ui/Popover.vue'
import PopoverItem from '~/components/ui/popover/PopoverItem.vue'
import Button from '~/components/ui/Button.vue'
import updateQueryString from '~/composables/updateQueryString'
import useErrorHandler from '~/composables/useErrorHandler'
@ -191,9 +192,9 @@ const open = ref(false)
</div>
</div>
<div class="actions">
<button class="ui basic deny button">
<Button color="secondary">
{{ t('components.library.TrackBase.button.cancel') }}
</button>
</Button>
</div>
</semantic-modal>
<Popover v-model:open="open">

5
front/src/components/library/radios/Filter.vue
View File

@ -14,6 +14,7 @@ import { clone } from 'lodash-es'
import SemanticModal from '~/components/semantic/Modal.vue'
import TrackTable from '~/components/audio/track/Table.vue'
import Button from '~/components/ui/Button.vue'
import useErrorHandler from '~/composables/useErrorHandler'
@ -197,9 +198,9 @@ fetchCandidates()
</div>
</div>
<div class="actions">
<button class="ui deny button">
<Button color="secondary">
{{ t('components.library.radios.Filter.cancelButton') }}
</button>
</Button>
</div>
</semantic-modal>
</td>

9
front/src/components/manage/library/UploadsTable.vue
View File

@ -14,6 +14,7 @@ import axios from 'axios'
import ImportStatusModal from '~/components/library/ImportStatusModal.vue'
import ActionTable from '~/components/common/ActionTable.vue'
import Pagination from '~/components/vui/Pagination.vue'
import Button from '~/components/ui/Button.vue'
import useSmartSearch from '~/composables/navigation/useSmartSearch'
import useSharedLabels from '~/composables/locale/useSharedLabels'
@ -334,13 +335,13 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
>
{{ getImportStatusChoice(scope.obj.import_status).label }}
</a>
<button
class="ui tiny basic icon button"
<Button
class="tiny"
icon="bi-question-circle"
:title="sharedLabels.fields.import_status.label"
@click="detailedUpload = scope.obj; showUploadDetailModal = true"
>
<i class="question circle outline icon" />
</button>
</Button>
</td>
<td>
<span v-if="scope.obj.size">{{ humanSize(scope.obj.size) }}</span>

10
front/src/components/manage/moderation/InstancePolicyModal.vue
View File

@ -9,6 +9,7 @@ import { useI18n } from 'vue-i18n'
import InstancePolicyForm from '~/components/manage/moderation/InstancePolicyForm.vue'
import InstancePolicyCard from '~/components/manage/moderation/InstancePolicyCard.vue'
import SemanticModal from '~/components/semantic/Modal.vue'
import Button from '~/components/ui/Button.vue'
interface Props {
target: string
@ -59,8 +60,7 @@ const fetchData = async () => {
</script>
<template>
<button
class="ui button"
<Button
@click.prevent="show = !show"
>
<i class="shield icon" />&nbsp;
@ -105,10 +105,10 @@ const fetchData = async () => {
<div class="ui hidden divider" />
</div>
<div class="actions">
<button class="ui deny button">
<Button color="secondary">
{{ t('components.manage.moderation.InstancePolicyModal.button.close') }}
</button>
</Button>
</div>
</semantic-modal>
</button>
</Button>
</template>

13
front/src/components/playlists/Widget.vue
View File

@ -11,6 +11,7 @@ import axios from 'axios'
import useErrorHandler from '~/composables/useErrorHandler'
import PlaylistCard from '~/components/playlists/Card.vue'
import Button from '~/components/ui/Button.vue'
interface Props {
filters: Record<string, unknown>
@ -84,24 +85,22 @@ watch(
<i class="list icon" />
{{ t('components.playlists.Widget.placeholder.noPlaylists') }}
</div>
<button
<Button
v-if="store.state.auth.authenticated"
class="ui success icon labeled button"
icon="bi-card-list"
@click="store.commit('playlists/chooseTrack', null)"
>
<i class="list icon" />
{{ t('components.playlists.Widget.button.create') }}
</button>
</Button>
</div>
<template v-if="nextPage">
<div class="ui hidden divider" />
<button
<Button
v-if="nextPage"
:class="['ui', 'basic', 'button']"
@click="fetchData(nextPage)"
>
{{ t('components.playlists.Widget.button.more') }}
</button>
</Button>
</template>
</div>
</template>

34
front/src/components/semantic/Modal.vue
View File

@ -1,26 +1,15 @@
<script setup lang="ts">
import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
import { computed, onBeforeUnmount, ref, watchEffect } from 'vue'
import { useVModel } from '@vueuse/core'
import { ref } from 'vue'
import { computed } from 'vue'
import { useStore } from '~/store'
import Modal from '~/components/ui/Modal.vue'
interface Events {
(e: 'update:show', show: boolean): void
(e: 'approved'): void
(e: 'deny'): void
(e: 'show'): void
(e: 'hide'): void
}
interface Props {
show: boolean
fullscreen?: boolean
scrolling?: boolean
additionalClasses?: string[]
}
const emit = defineEmits<Events>()
const props = withDefaults(defineProps<Props>(), {
fullscreen: true,
scrolling: false,
@ -34,20 +23,17 @@ const classes = computed(() => [
'overlay fullscreen': props.fullscreen && ['phone', 'tablet'].includes(store.getters['ui/windowSize'])
}
])
const isOpen = ref(false)
</script>
<template>
<!-- TODO: Replace this file with `components/ui/Modal` -->
<!-- <Modal
:model-value="show"
@update:model-value="(value) => emit('update:show', value)"
:class="classes"
@approve="emit('approved')"
@deny="emit('deny')"
@show="emit('show')"
@hide="emit('hide')"
<Modal <!-- :isOpen="props.show" -->
title="props.title"
:class="classes"
>
<slot />
<template v-if="$slots.actions" #actions>
</template>
</Modal> -->
</template>

8
front/src/views/Search.vue
View File

@ -17,6 +17,7 @@ import Pagination from '~/components/vui/Pagination.vue'
import RadioButton from '~/components/radios/Button.vue'
import RadioCard from '~/components/radios/Card.vue'
import TagsList from '~/components/tags/List.vue'
import Button from '~/components/ui/Button.vue'
import useErrorHandler from '~/composables/useErrorHandler'
import useLogger from '~/composables/useLogger'
@ -260,13 +261,12 @@ const radioConfig = computed(() => {
name="query"
type="text"
>
<button
<Button
:aria-label="labels.submitSearch"
type="submit"
class="ui icon button"
icon="bi-search"
>
<i class="search icon" />
</button>
</Button>
</div>
</div>
</form>

12
front/src/views/channels/SubscriptionsList.vue
View File

@ -9,6 +9,7 @@ import axios from 'axios'
import ChannelsWidget from '~/components/audio/ChannelsWidget.vue'
import RemoteSearchForm from '~/components/RemoteSearchForm.vue'
import SemanticModal from '~/components/semantic/Modal.vue'
import Button from '~/components/ui/Button.vue'
import useErrorHandler from '~/composables/useErrorHandler'
@ -91,17 +92,16 @@ const showSubscribeModal = ref(false)
/>
</div>
<div class="actions">
<button class="ui basic deny button">
<Button color="secondary">
{{ t('views.channels.SubscriptionsList.button.cancel') }}
</button>
<button
</Button>
<Button
form="remote-search"
type="submit"
class="ui primary button"
icon="bi-bookmark-check-fill"
>
<i class="bookmark icon" />
{{ t('views.channels.SubscriptionsList.button.subscribe') }}
</button>
</Button>
</div>
</semantic-modal>

19
front/src/views/playlists/List.vue
View File

@ -16,6 +16,7 @@ import $ from 'jquery'
import PlaylistCardList from '~/components/playlists/CardList.vue'
import Pagination from '~/components/vui/Pagination.vue'
import Button from '~/components/ui/Button.vue'
import useSharedLabels from '~/composables/locale/useSharedLabels'
import useOrdering from '~/composables/navigation/useOrdering'
@ -114,12 +115,11 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
{{ t('views.playlists.List.header.browse') }}
</h2>
<template v-if="store.state.auth.authenticated">
<button
class="ui success button"
<Button
@click="store.commit('playlists/showModal', true)"
>
{{ t('views.playlists.List.button.manage') }}
</button>
</Button>
<div class="ui hidden divider" />
</template>
<form
@ -137,13 +137,13 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
name="search"
:placeholder="labels.searchPlaceholder"
>
<button
class="ui icon button"
<Button
type="submit"
icon="bi-search"
:aria-label="t('views.playlists.List.button.search')"
>
<i class="search icon" />
</button>
</Button>
</div>
</div>
<div class="field">
@ -209,14 +209,13 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
<i class="list icon" />
{{ t('views.playlists.List.empty.noResults') }}
</div>
<button
<Button
v-if="store.state.auth.authenticated"
class="ui success button labeled icon"
icon="bi-list"
@click="store.commit('playlists/showModal', true)"
>
<i class="list icon" />
{{ t('views.playlists.List.button.create') }}
</button>
</Button>
</div>
<div class="ui center aligned basic segment">
<pagination