jeder/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages Wiki Activity

Refactoring

Browse source
This commit is contained in:
syuilo 2020-11-03 20:36:12 +09:00
parent 7353d729d7
commit 3c59c6fc9b
69 changed files with 157 additions and 285 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/client/pages/_error_.vue
View file

@ -22,10 +22,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('error'),
icon: faExclamationTriangle
}]
title: this.$t('error'),
icon: faExclamationTriangle
},
faExclamationTriangle
};

6
src/client/pages/about-misskey.vue
View file

@ -87,10 +87,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('aboutMisskey'),
icon: null
}]
title: this.$t('aboutMisskey'),
icon: null
},
version,
faInfoCircle

6
src/client/pages/about.vue
View file

@ -37,10 +37,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('about'),
icon: faInfoCircle
}]
title: this.$t('about'),
icon: faInfoCircle
},
version,
serverInfo: null,

6
src/client/pages/announcements.vue
View file

@ -31,10 +31,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('announcements'),
icon: faBroadcastTower
}]
title: this.$t('announcements'),
icon: faBroadcastTower
},
pagination: {
endpoint: 'announcements',

6
src/client/pages/api-console.vue
View file

@ -41,10 +41,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: 'API console',
icon: faTerminal
}]
title: 'API console',
icon: faTerminal
},
endpoint: '',

6
src/client/pages/apps.vue
View file

@ -51,10 +51,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('installedApps'),
icon: faPlug,
}],
title: this.$t('installedApps'),
icon: faPlug,
},
pagination: {
endpoint: 'i/apps',

12
src/client/pages/channel-editor.vue
View file

@ -46,15 +46,11 @@ export default defineComponent({
data() {
return {
INFO: computed(() => this.channelId ? {
header: [{
title: this.$t('_channel.edit'),
icon: faSatelliteDish,
}],
title: this.$t('_channel.edit'),
icon: faSatelliteDish,
} : {
header: [{
title: this.$t('_channel.create'),
icon: faSatelliteDish,
}],
title: this.$t('_channel.create'),
icon: faSatelliteDish,
}),
channel: null,
name: null,

6
src/client/pages/channel.vue
View file

@ -54,10 +54,8 @@ export default defineComponent({
data() {
return {
INFO: computed(() => this.channel ? {
header: [{
title: this.channel.name,
icon: faSatelliteDish,
}],
title: this.channel.name,
icon: faSatelliteDish,
} : null),
channel: null,
showBanner: true,

6
src/client/pages/channels.vue
View file

@ -43,10 +43,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('channel'),
icon: faSatelliteDish
}]
title: this.$t('channel'),
icon: faSatelliteDish
},
tab: 'featured',
featuredPagination: {

6
src/client/pages/doc.vue
View file

@ -43,10 +43,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.title,
icon: faFileAlt
}],
title: this.title,
icon: faFileAlt
},
faFileAlt,
title: '',

6
src/client/pages/docs.vue
View file

@ -21,10 +21,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('help'),
icon: faQuestionCircle
}],
title: this.$t('help'),
icon: faQuestionCircle
},
docs: [],
faQuestionCircle

6
src/client/pages/drive.vue
View file

@ -18,10 +18,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: computed(() => this.folder ? this.folder.name : this.$t('drive')),
icon: faCloud,
}],
title: computed(() => this.folder ? this.folder.name : this.$t('drive')),
icon: faCloud,
action: {
icon: faEllipsisH,
handler: this.menu

6
src/client/pages/explore.vue
View file

@ -93,10 +93,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('explore'),
icon: faHashtag
}],
title: this.$t('explore'),
icon: faHashtag
},
pinnedUsers: { endpoint: 'pinned-users' },
popularUsers: { endpoint: 'users', limit: 10, noPaging: true, params: {

6
src/client/pages/favorites.vue
View file

@ -19,10 +19,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('favorites'),
icon: faStar
}]
title: this.$t('favorites'),
icon: faStar
},
pagination: {
endpoint: 'i/favorites',

6
src/client/pages/featured.vue
View file

@ -18,10 +18,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('featured'),
icon: faFireAlt
}],
title: this.$t('featured'),
icon: faFireAlt
},
pagination: {
endpoint: 'notes/featured',

6
src/client/pages/follow-requests.vue
View file

@ -44,10 +44,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('followRequests'),
icon: faUserClock,
}],
title: this.$t('followRequests'),
icon: faUserClock,
},
pagination: {
endpoint: 'following/requests/list',

6
src/client/pages/instance/abuses.vue
View file

@ -84,10 +84,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('abuseReports'),
icon: faExclamationCircle
}],
title: this.$t('abuseReports'),
icon: faExclamationCircle
},
searchUsername: '',
searchHost: '',

6
src/client/pages/instance/announcements.vue
View file

@ -45,10 +45,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('announcements'),
icon: faBroadcastTower
}]
title: this.$t('announcements'),
icon: faBroadcastTower
},
announcements: [],
faBroadcastTower, faSave, faTrashAlt, faPlus

6
src/client/pages/instance/emojis.vue
View file

@ -68,10 +68,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('customEmojis'),
icon: faLaugh
}],
title: this.$t('customEmojis'),
icon: faLaugh,
action: {
icon: faPlus,
handler: this.add

6
src/client/pages/instance/federation.vue
View file

@ -79,10 +79,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('federation'),
icon: faGlobe
}],
title: this.$t('federation'),
icon: faGlobe
},
host: '',
state: 'federating',

6
src/client/pages/instance/files.vue
View file

@ -84,10 +84,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('files'),
icon: faCloud
}],
title: this.$t('files'),
icon: faCloud
},
q: null,
origin: 'local',

2
src/client/pages/instance/index.vue
View file

@ -86,7 +86,7 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
tabs: [{
id: 'index',
title: null,
tooltip: this.$t('instance'),

6
src/client/pages/instance/logs.vue
View file

@ -49,10 +49,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('serverLogs'),
icon: faStream
}]
title: this.$t('serverLogs'),
icon: faStream
},
logs: [],
logLevel: 'all',

6
src/client/pages/instance/queue.vue
View file

@ -31,10 +31,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('jobQueue'),
icon: faExchangeAlt,
}],
title: this.$t('jobQueue'),
icon: faExchangeAlt,
},
connection: os.stream.useSharedConnection('queueStats'),
faExchangeAlt, faTrashAlt

6
src/client/pages/instance/relays.vue
View file

@ -38,10 +38,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('relays'),
icon: faProjectDiagram,
}],
title: this.$t('relays'),
icon: faProjectDiagram,
},
relays: [],
inbox: '',

6
src/client/pages/instance/settings.vue
View file

@ -257,10 +257,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('instance'),
icon: faCog,
}],
title: this.$t('instance'),
icon: faCog,
},
url,
proxyAccount: null,

6
src/client/pages/instance/users.vue
View file

@ -101,10 +101,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('users'),
icon: faUsers
}],
title: this.$t('users'),
icon: faUsers,
action: {
icon: faSearch,
handler: this.searchUser

6
src/client/pages/mentions.vue
View file

@ -18,10 +18,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('mentions'),
icon: faAt
}],
title: this.$t('mentions'),
icon: faAt
},
pagination: {
endpoint: 'notes/mentions',

6
src/client/pages/messages.vue
View file

@ -18,10 +18,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('directNotes'),
icon: faEnvelope
}],
title: this.$t('directNotes'),
icon: faEnvelope
},
pagination: {
endpoint: 'notes/mentions',

6
src/client/pages/messaging/index.vue
View file

@ -53,10 +53,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('messaging'),
icon: faComments
}]
title: this.$t('messaging'),
icon: faComments
},
fetching: true,
moreFetching: false,

12
src/client/pages/messaging/messaging-room.vue
View file

@ -62,19 +62,15 @@ const Component = defineComponent({
data() {
return {
INFO: computed(() => !this.fetching ? this.user ? {
header: [{
userName: this.user,
avatar: this.user,
}],
userName: this.user,
avatar: this.user,
action: {
icon: faEllipsisH,
handler: this.menu,
},
} : {
header: [{
title: this.group.name,
icon: faUsers
}],
title: this.group.name,
icon: faUsers,
action: {
icon: faEllipsisH,
handler: this.menu,

6
src/client/pages/my-antennas/index.vue
View file

@ -29,10 +29,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('manageAntennas'),
icon: faSatellite
}],
title: this.$t('manageAntennas'),
icon: faSatellite,
action: {
icon: faPlus,
handler: this.create

6
src/client/pages/my-groups/group.vue
View file

@ -48,10 +48,8 @@ export default defineComponent({
data() {
return {
INFO: computed(() => this.group ? {
header: [{
title: this.group.name,
icon: faUsers,
}],
title: this.group.name,
icon: faUsers,
} : null),
group: null,
users: [],

6
src/client/pages/my-groups/index.vue
View file

@ -63,10 +63,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('groups'),
icon: faUsers
}],
title: this.$t('groups'),
icon: faUsers
},
tab: 'owned',
ownedPagination: {

6
src/client/pages/my-lists/index.vue
View file

@ -26,10 +26,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('manageLists'),
icon: faListUl
}],
title: this.$t('manageLists'),
icon: faListUl,
action: {
icon: faPlus,
handler: this.create

6
src/client/pages/my-lists/list.vue
View file

@ -47,10 +47,8 @@ export default defineComponent({
data() {
return {
INFO: computed(() => this.list ? {
header: [{
title: this.list.name,
icon: faListUl,
}],
title: this.list.name,
icon: faListUl,
} : null),
list: null,
users: [],

6
src/client/pages/not-found.vue
View file

@ -16,10 +16,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('notFound'),
icon: faExclamationTriangle
}]
title: this.$t('notFound'),
icon: faExclamationTriangle
},
}
},

6
src/client/pages/note.vue
View file

@ -51,10 +51,8 @@ export default defineComponent({
data() {
return {
INFO: computed(() => this.note ? {
header: [{
title: this.$t('note'),
avatar: this.note.user,
}],
title: this.$t('note'),
avatar: this.note.user,
} : null),
note: null,
hasPrev: false,

6
src/client/pages/notifications.vue
View file

@ -21,10 +21,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('notifications'),
icon: faBell
}]
title: this.$t('notifications'),
icon: faBell
},
};
},

6
src/client/pages/page.vue
View file

@ -57,10 +57,8 @@ export default defineComponent({
data() {
return {
INFO: computed(() => this.page ? {
header: [{
title: computed(() => this.page.title || this.page.name),
avatar: this.page.user,
}],
title: computed(() => this.page.title || this.page.name),
avatar: this.page.user,
} : null),
page: null,
faHeartS, faHeartR

6
src/client/pages/pages.vue
View file

@ -35,10 +35,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('pages'),
icon: faStickyNote
}],
title: this.$t('pages'),
icon: faStickyNote,
action: {
icon: faPlus,
handler: this.create

6
src/client/pages/reversi/game.vue
View file

@ -27,10 +27,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('_reversi.reversi'),
icon: faGamepad
}]
title: this.$t('_reversi.reversi'),
icon: faGamepad
},
game: null,
connection: null,

6
src/client/pages/reversi/index.vue
View file

@ -76,10 +76,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('_reversi.reversi'),
icon: faGamepad
}]
title: this.$t('_reversi.reversi'),
icon: faGamepad
},
games: [],
gamesFetching: true,

6
src/client/pages/room/room.vue
View file

@ -82,10 +82,8 @@ export default defineComponent({
data() {
return {
INFO: computed(() => this.user ? {
header: [{
title: this.$t('room'),
avatar: this.user,
}],
title: this.$t('room'),
avatar: this.user,
} : null),
user: null,
objectSelected: false,

6
src/client/pages/scratchpad.vue
View file

@ -44,10 +44,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('scratchpad'),
icon: faTerminal,
}],
title: this.$t('scratchpad'),
icon: faTerminal,
},
code: '',
logs: [],

6
src/client/pages/search.vue
View file

@ -20,10 +20,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('searchWith', { q: this.$route.query.q }),
icon: faSearch
}],
title: this.$t('searchWith', { q: this.$route.query.q }),
icon: faSearch
},
pagination: {
endpoint: 'notes/search',

6
src/client/pages/settings/api.vue
View file

@ -28,10 +28,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: 'API',
icon: faKey
}]
title: 'API',
icon: faKey
},
isDesktop: window.innerWidth >= 1100,
};

6
src/client/pages/settings/general.vue
View file

@ -107,10 +107,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('general'),
icon: faCogs
}]
title: this.$t('general'),
icon: faCogs
},
langs,
lang: localStorage.getItem('lang'),

6
src/client/pages/settings/index.vue
View file

@ -55,10 +55,8 @@ export default defineComponent({
setup(props, context) {
const INFO = ref({
header: [{
title: i18n.global.t('settings'),
icon: faCog
}]
title: i18n.global.t('settings'),
icon: faCog
});
const narrow = ref(false);
const view = ref(null);

6
src/client/pages/settings/integration.vue
View file

@ -41,10 +41,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('integration'),
icon: faShareAlt
}]
title: this.$t('integration'),
icon: faShareAlt
},
apiUrl,
twitterForm: null,

6
src/client/pages/settings/mute-block.vue
View file

@ -49,10 +49,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('muteAndBlock'),
icon: faBan
}]
title: this.$t('muteAndBlock'),
icon: faBan
},
tab: 'mute',
mutingPagination: {

6
src/client/pages/settings/notifications.vue
View file

@ -40,10 +40,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('notifications'),
icon: faBell
}]
title: this.$t('notifications'),
icon: faBell
},
faCog
}

6
src/client/pages/settings/other.vue
View file

@ -42,10 +42,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('other'),
icon: faEllipsisH
}]
title: this.$t('other'),
icon: faEllipsisH
},
debug
}

6
src/client/pages/settings/privacy.vue
View file

@ -38,10 +38,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('privacy'),
icon: faLockOpen
}]
title: this.$t('privacy'),
icon: faLockOpen
},
isLocked: false,
autoAcceptFollowed: false,

6
src/client/pages/settings/profile.vue
View file

@ -81,10 +81,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('profile'),
icon: faUser
}]
title: this.$t('profile'),
icon: faUser
},
host,
name: null,

6
src/client/pages/settings/reaction.vue
View file

@ -37,10 +37,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('reaction'),
icon: faLaugh
}]
title: this.$t('reaction'),
icon: faLaugh
},
reactions: this.$store.state.settings.reactions.join(''),
changed: false,

6
src/client/pages/settings/regedit.vue
View file

@ -46,10 +46,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: 'RegEdit',
icon: faCode
}]
title: 'RegEdit',
icon: faCode
},
settings: JSON5.stringify(this.$store.state.settings, null, '\t'),

6
src/client/pages/settings/security.vue
View file

@ -31,10 +31,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('security'),
icon: faLock
}]
title: this.$t('security'),
icon: faLock
},
faLock, faSyncAlt
}

6
src/client/pages/settings/sidebar.vue
View file

@ -43,10 +43,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('sidebar'),
icon: faListUl
}]
title: this.$t('sidebar'),
icon: faListUl
},
menuDef: sidebarDef,
items: '',

6
src/client/pages/settings/theme.vue
View file

@ -105,10 +105,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('theme'),
icon: faPalette
}]
title: this.$t('theme'),
icon: faPalette
},
builtinThemes,
installThemeCode: null,

6
src/client/pages/settings/word-mute.vue
View file

@ -48,10 +48,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('wordMute'),
icon: faCommentSlash
}]
title: this.$t('wordMute'),
icon: faCommentSlash
},
tab: 'soft',
softMutedWords: '',

6
src/client/pages/share.vue
View file

@ -27,10 +27,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('share'),
icon: faShareAlt
}],
title: this.$t('share'),
icon: faShareAlt
},
title: null,
text: null,

6
src/client/pages/tag.vue
View file

@ -25,10 +25,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.tag,
icon: faHashtag
}],
title: this.tag,
icon: faHashtag
},
pagination: {
endpoint: 'notes/search-by-tag',

6
src/client/pages/test.vue
View file

@ -152,10 +152,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: 'TEST',
icon: faExclamationTriangle
}]
title: 'TEST',
icon: faExclamationTriangle
},
dialogTitle: 'Hello',
dialogBody: 'World!',

6
src/client/pages/theme-editor.vue
View file

@ -121,10 +121,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: this.$t('themeEditor'),
icon: faPalette,
}],
title: this.$t('themeEditor'),
icon: faPalette,
},
theme: [] as ThemeViewModel,
name: '',

12
src/client/pages/timeline.vue
View file

@ -50,7 +50,7 @@ export default defineComponent({
queue: 0,
width: 0,
INFO: computed(() => {
const header = [{
const tabs = [{
id: 'home',
title: null,
tooltip: this.$t('_timelines.home'),
@ -60,7 +60,7 @@ export default defineComponent({
}];
if (!this.$store.state.instance.meta.disableLocalTimeline || this.$store.state.i.isModerator || this.$store.state.i.isAdmin) {
header.push({
tabs.push({
id: 'local',
title: null,
tooltip: this.$t('_timelines.local'),
@ -69,7 +69,7 @@ export default defineComponent({
selected: computed(() => this.src === 'local')
});
header.push({
tabs.push({
id: 'social',
title: null,
tooltip: this.$t('_timelines.social'),
@ -80,7 +80,7 @@ export default defineComponent({
}
if (!this.$store.state.instance.meta.disableGlobalTimeline || this.$store.state.i.isModerator || this.$store.state.i.isAdmin) {
header.push({
tabs.push({
id: 'global',
title: null,
tooltip: this.$t('_timelines.global'),
@ -90,7 +90,7 @@ export default defineComponent({
});
}
header.push({
tabs.push({
id: 'other',
title: null,
icon: faEllipsisH,
@ -99,7 +99,7 @@ export default defineComponent({
});
return {
header,
tabs,
action: {
icon: faPencilAlt,
handler: () => os.post()

6
src/client/pages/user/index.vue
View file

@ -160,10 +160,8 @@ export default defineComponent({
data() {
return {
INFO: computed(() => this.user ? {
header: [{
userName: this.user,
avatar: this.user,
}],
userName: this.user,
avatar: this.user,
action: {
icon: faEllipsisH,
handler: this.menu

6
src/client/pages/welcome.vue
View file

@ -20,10 +20,8 @@ export default defineComponent({
data() {
return {
INFO: {
header: [{
title: instanceName || 'Misskey',
icon: null
}]
title: instanceName || 'Misskey',
icon: null
},
}
},

20
src/client/ui/_common_/header.vue
View file

@ -5,12 +5,20 @@
</transition>
<template v-if="info">
<div class="titleContainer">
<div class="title" v-for="header in info.header" :key="header.id" :class="{ _button: header.onClick, selected: header.selected }" @click="header.onClick" v-tooltip="header.tooltip">
<Fa v-if="header.icon" :icon="header.icon" :key="header.icon" class="icon"/>
<MkAvatar v-else-if="header.avatar" class="avatar" :user="header.avatar" :disable-preview="true"/>
<span v-if="header.title" class="text">{{ header.title }}</span>
<MkUserName v-else-if="header.userName" :user="header.userName" :nowrap="false" class="text"/>
</div>
<template v-if="info.tabs">
<div class="title" v-for="tab in info.tabs" :key="tab.id" :class="{ _button: tab.onClick, selected: tab.selected }" @click="tab.onClick" v-tooltip="tab.tooltip">
<Fa v-if="tab.icon" :icon="tab.icon" :key="tab.icon" class="icon"/>
<span v-if="tab.title" class="text">{{ tab.title }}</span>
</div>
</template>
<template v-else>
<div class="title">
<Fa v-if="info.icon" :icon="info.icon" :key="info.icon" class="icon"/>
<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true"/>
<span v-if="info.title" class="text">{{ info.title }}</span>
<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
</div>
</template>
</div>
<button class="_button action" v-if="info.action" @click="info.action.handler"><Fa :icon="info.action.icon" :key="info.action.icon"/></button>
</template>