sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use tabler icons (#9354)

Browse Source 
* wip

* wip

* wip

* Update style.scss

* wip

* wip

* wip

* wip
This commit is contained in:
syuilo
2022-12-19 19:01:30 +09:00
committed by GitHub
parent e3b8482891
commit 917ef465a5
240 changed files with 981 additions and 947 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
packages/client/src/ui/_common_/navbar-for-mobile.vue
View File

@@ -9,30 +9,30 @@
</div>
<div class="middle">
<MkA v-click-anime class="item index" active-class="active" to="/" exact>
<i class="icon fas fa-home fa-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
<i class="icon ti ti-home ti-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
</MkA>
<template v-for="item in menu">
<div v-if="item === '-'" class="divider"></div>
<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="[item, { active: navbarItemDef[item].active }]" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
<i class="icon fa-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ i18n.ts[navbarItemDef[item].title] }}</span>
<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="icon fas fa-circle"></i></span>
<i class="icon ti-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ i18n.ts[navbarItemDef[item].title] }}</span>
<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="icon _indicatorCircle"></i></span>
</component>
</template>
<div class="divider"></div>
<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin">
<i class="icon fas fa-door-open fa-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
<i class="icon ti ti-dashboard ti-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
</MkA>
<button v-click-anime class="item _button" @click="more">
<i class="icon fa fa-ellipsis-h fa-fw"></i><span class="text">{{ i18n.ts.more }}</span>
<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon fas fa-circle"></i></span>
<i class="icon ti ti-grid-dots ti-fw"></i><span class="text">{{ i18n.ts.more }}</span>
<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon _indicatorCircle"></i></span>
</button>
<MkA v-click-anime class="item" active-class="active" to="/settings">
<i class="icon fas fa-cog fa-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
<i class="icon ti ti-settings ti-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
</MkA>
</div>
<div class="bottom">
<button class="item _button post" data-cy-open-post-form @click="os.post">
<i class="icon fas fa-pencil-alt fa-fw"></i><span class="text">{{ i18n.ts.note }}</span>
<i class="icon ti ti-pencil ti-fw"></i><span class="text">{{ i18n.ts.note }}</span>
</button>
<button v-click-anime class="item _button account" @click="openAccountMenu">
<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
@@ -75,40 +75,40 @@ function openInstanceMenu(ev: MouseEvent) {
}, {
type: 'link',
text: i18n.ts.instanceInfo,
icon: 'fas fa-info-circle',
icon: 'ti ti-info-circle',
to: '/about',
}, {
type: 'link',
text: i18n.ts.customEmojis,
icon: 'fas fa-laugh',
icon: 'ti ti-mood-happy',
to: '/about#emojis',
}, {
type: 'link',
text: i18n.ts.federation,
icon: 'fas fa-globe',
icon: 'ti ti-whirl',
to: '/about#federation',
}, null, {
type: 'parent',
text: i18n.ts.help,
icon: 'fas fa-question-circle',
icon: 'ti ti-question-circle',
children: [{
type: 'link',
to: '/mfm-cheat-sheet',
text: i18n.ts._mfm.cheatSheet,
icon: 'fas fa-code',
icon: 'ti ti-code',
}, {
type: 'link',
to: '/scratchpad',
text: i18n.ts.scratchpad,
icon: 'fas fa-terminal',
icon: 'ti ti-terminal-2',
}, {
type: 'link',
to: '/api-console',
text: 'API Console',
icon: 'fas fa-terminal',
icon: 'ti ti-terminal-2',
}, null, {
text: i18n.ts.document,
icon: 'fas fa-question-circle',
icon: 'ti ti-question-circle',
action: () => {
window.open('https://misskey-hub.net/help.html', '_blank');
},

32
packages/client/src/ui/_common_/navbar.vue
View File

@@ -9,7 +9,7 @@
</div>
<div class="middle">
<MkA v-click-anime v-tooltip.noDelay.right="i18n.ts.timeline" class="item index" active-class="active" to="/" exact>
<i class="icon fas fa-home fa-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
<i class="icon ti ti-home ti-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
</MkA>
<template v-for="item in menu">
<div v-if="item === '-'" class="divider"></div>
@@ -24,25 +24,25 @@
:to="navbarItemDef[item].to"
v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}"
>
<i class="icon fa-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ i18n.ts[navbarItemDef[item].title] }}</span>
<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="icon fas fa-circle"></i></span>
<i class="icon ti-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ i18n.ts[navbarItemDef[item].title] }}</span>
<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="icon _indicatorCircle"></i></span>
</component>
</template>
<div class="divider"></div>
<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime v-tooltip.noDelay.right="i18n.ts.controlPanel" class="item" active-class="active" to="/admin">
<i class="icon fas fa-door-open fa-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
<i class="icon ti ti-dashboard ti-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
</MkA>
<button v-click-anime class="item _button" @click="more">
<i class="icon fa fa-ellipsis-h fa-fw"></i><span class="text">{{ i18n.ts.more }}</span>
<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon fas fa-circle"></i></span>
<i class="icon ti ti-grid-dots ti-fw"></i><span class="text">{{ i18n.ts.more }}</span>
<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon _indicatorCircle"></i></span>
</button>
<MkA v-click-anime v-tooltip.noDelay.right="i18n.ts.settings" class="item" active-class="active" to="/settings">
<i class="icon fas fa-cog fa-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
<i class="icon ti ti-settings ti-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
</MkA>
</div>
<div class="bottom">
<button v-tooltip.noDelay.right="i18n.ts.note" class="item _button post" data-cy-open-post-form @click="os.post">
<i class="icon fas fa-pencil-alt fa-fw"></i><span class="text">{{ i18n.ts.note }}</span>
<i class="icon ti ti-pencil ti-fw"></i><span class="text">{{ i18n.ts.note }}</span>
</button>
<button v-click-anime v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="item _button account" @click="openAccountMenu">
<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
@@ -98,40 +98,40 @@ function openInstanceMenu(ev: MouseEvent) {
}, {
type: 'link',
text: i18n.ts.instanceInfo,
icon: 'fas fa-info-circle',
icon: 'ti ti-info-circle',
to: '/about',
}, {
type: 'link',
text: i18n.ts.customEmojis,
icon: 'fas fa-laugh',
icon: 'ti ti-mood-happy',
to: '/about#emojis',
}, {
type: 'link',
text: i18n.ts.federation,
icon: 'fas fa-globe',
icon: 'ti ti-whirl',
to: '/about#federation',
}, null, {
type: 'parent',
text: i18n.ts.help,
icon: 'fas fa-question-circle',
icon: 'ti ti-question-circle',
children: [{
type: 'link',
to: '/mfm-cheat-sheet',
text: i18n.ts._mfm.cheatSheet,
icon: 'fas fa-code',
icon: 'ti ti-code',
}, {
type: 'link',
to: '/scratchpad',
text: i18n.ts.scratchpad,
icon: 'fas fa-terminal',
icon: 'ti ti-terminal-2',
}, {
type: 'link',
to: '/api-console',
text: 'API Console',
icon: 'fas fa-terminal',
icon: 'ti ti-terminal-2',
}, null, {
text: i18n.ts.document,
icon: 'fas fa-question-circle',
icon: 'ti ti-question-circle',
action: () => {
window.open('https://misskey-hub.net/help.html', '_blank');
},

16
packages/client/src/ui/classic.header.vue
View File

@@ -3,34 +3,34 @@
<div class="body">
<div class="left">
<MkA v-click-anime v-tooltip="$ts.timeline" class="item index" active-class="active" to="/" exact>
<i class="fas fa-home fa-fw"></i>
<i class="ti ti-home ti-fw"></i>
</MkA>
<template v-for="item in menu">
<div v-if="item === '-'" class="divider"></div>
<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime v-tooltip="$ts[navbarItemDef[item].title]" class="item _button" :class="item" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
<i class="fa-fw" :class="navbarItemDef[item].icon"></i>
<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
<i class="ti-fw" :class="navbarItemDef[item].icon"></i>
<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="_indicatorCircle"></i></span>
</component>
</template>
<div class="divider"></div>
<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime v-tooltip="$ts.controlPanel" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null">
<i class="fas fa-door-open fa-fw"></i>
<i class="ti ti-dashboard ti-fw"></i>
</MkA>
<button v-click-anime class="item _button" @click="more">
<i class="fas fa-ellipsis-h fa-fw"></i>
<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
<i class="ti ti-dots ti-fw"></i>
<span v-if="otherNavItemIndicated" class="indicator"><i class="_indicatorCircle"></i></span>
</button>
</div>
<div class="right">
<MkA v-click-anime v-tooltip="$ts.settings" class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
<i class="fas fa-cog fa-fw"></i>
<i class="ti ti-settings ti-fw"></i>
</MkA>
<button v-click-anime class="item _button account" @click="openAccountMenu">
<MkAvatar :user="$i" class="avatar"/><MkAcct class="acct" :user="$i"/>
</button>
<div class="post" @click="post">
<MkButton class="button" gradate full rounded>
<i class="fas fa-pencil-alt fa-fw"></i>
<i class="ti ti-pencil ti-fw"></i>
</MkButton>
</div>
</div>

16
packages/client/src/ui/classic.sidebar.vue
View File

@@ -5,30 +5,30 @@
</button>
<div class="post" data-cy-open-post-form @click="post">
<MkButton class="button" gradate full rounded>
<i class="fas fa-pencil-alt fa-fw"></i><span v-if="!iconOnly" class="text">{{ $ts.note }}</span>
<i class="ti ti-pencil ti-fw"></i><span v-if="!iconOnly" class="text">{{ $ts.note }}</span>
</MkButton>
</div>
<div class="divider"></div>
<MkA v-click-anime class="item index" active-class="active" to="/" exact>
<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
<i class="ti ti-home ti-fw"></i><span class="text">{{ $ts.timeline }}</span>
</MkA>
<template v-for="item in menu">
<div v-if="item === '-'" class="divider"></div>
<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="item" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
<i class="fa-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ $ts[navbarItemDef[item].title] }}</span>
<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
<i class="ti-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ $ts[navbarItemDef[item].title] }}</span>
<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="_indicatorCircle"></i></span>
</component>
</template>
<div class="divider"></div>
<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null">
<i class="fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
<i class="ti ti-dashboard ti-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
</MkA>
<button v-click-anime class="item _button" @click="more">
<i class="fas fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
<i class="ti ti-dots ti-fw"></i><span class="text">{{ $ts.more }}</span>
<span v-if="otherNavItemIndicated" class="indicator"><i class="_indicatorCircle"></i></span>
</button>
<MkA v-click-anime class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
<i class="ti ti-settings ti-fw"></i><span class="text">{{ $ts.settings }}</span>
</MkA>
<div class="divider"></div>
<div class="about">

2
packages/client/src/ui/classic.vue
View File

@@ -110,7 +110,7 @@ function onContextmenu(ev: MouseEvent) {
fullView = !fullView;
},
}, {
icon: 'fas fa-window-maximize',
icon: 'ti ti-window-maximize',
text: i18n.ts.openInWindow,
action: () => {
os.pageWindow(path);

4
packages/client/src/ui/classic.widgets.vue
View File

@@ -3,8 +3,8 @@
<XWidgets class="widgets" :edit="editMode" :widgets="$store.reactiveState.widgets.value.filter(w => w.place === place)" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
<MkAd class="a" :prefer="['square']"/>
<button v-if="editMode" class="_textButton edit" style="font-size: 0.9em;" @click="editMode = false"><i class="fas fa-check"></i> {{ $ts.editWidgetsExit }}</button>
<button v-else class="_textButton edit" style="font-size: 0.9em;" @click="editMode = true"><i class="fas fa-pencil-alt"></i> {{ $ts.editWidgets }}</button>
<button v-if="editMode" class="_textButton edit" style="font-size: 0.9em;" @click="editMode = false"><i class="ti ti-check"></i> {{ $ts.editWidgetsExit }}</button>
<button v-else class="_textButton edit" style="font-size: 0.9em;" @click="editMode = true"><i class="ti ti-pencil"></i> {{ $ts.editWidgets }}</button>
</div>
</template>

18
packages/client/src/ui/deck.vue
View File

@@ -34,24 +34,24 @@
</div>
<div class="sideMenu">
<div class="top">
<button v-tooltip.noDelay.left="`${i18n.ts._deck.profile}: ${deckStore.state.profile}`" class="_button button" @click="changeProfile"><i class="fas fa-caret-down"></i></button>
<button v-tooltip.noDelay.left="i18n.ts._deck.deleteProfile" class="_button button" @click="deleteProfile"><i class="fas fa-trash-can"></i></button>
<button v-tooltip.noDelay.left="`${i18n.ts._deck.profile}: ${deckStore.state.profile}`" class="_button button" @click="changeProfile"><i class="ti ti-caret-down"></i></button>
<button v-tooltip.noDelay.left="i18n.ts._deck.deleteProfile" class="_button button" @click="deleteProfile"><i class="ti ti-trash"></i></button>
</div>
<div class="middle">
<button v-tooltip.noDelay.left="i18n.ts._deck.addColumn" class="_button button" @click="addColumn"><i class="fas fa-plus"></i></button>
<button v-tooltip.noDelay.left="i18n.ts._deck.addColumn" class="_button button" @click="addColumn"><i class="ti ti-plus"></i></button>
</div>
<div class="bottom">
<button v-tooltip.noDelay.left="i18n.ts.settings" class="_button button settings" @click="showSettings"><i class="fas fa-cog"></i></button>
<button v-tooltip.noDelay.left="i18n.ts.settings" class="_button button settings" @click="showSettings"><i class="ti ti-settings"></i></button>
</div>
</div>
</div>
</div>
<div v-if="isMobile" class="buttons">
<button class="button nav _button" @click="drawerMenuShowing = true"><i class="fas fa-bars"></i><span v-if="menuIndicated" class="indicator"><i class="fas fa-circle"></i></span></button>
<button class="button home _button" @click="mainRouter.push('/')"><i class="fas fa-home"></i></button>
<button class="button notifications _button" @click="mainRouter.push('/my/notifications')"><i class="fas fa-bell"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button>
<button class="button post _button" @click="os.post()"><i class="fas fa-pencil-alt"></i></button>
<button class="button nav _button" @click="drawerMenuShowing = true"><i class="ti ti-menu-2"></i><span v-if="menuIndicated" class="indicator"><i class="_indicatorCircle"></i></span></button>
<button class="button home _button" @click="mainRouter.push('/')"><i class="ti ti-home"></i></button>
<button class="button notifications _button" @click="mainRouter.push('/my/notifications')"><i class="ti ti-bell"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="_indicatorCircle"></i></span></button>
<button class="button post _button" @click="os.post()"><i class="ti ti-pencil"></i></button>
</div>
<transition :name="$store.state.animation ? 'menu-back' : ''">
@@ -194,7 +194,7 @@ function changeProfile(ev: MouseEvent) {
},
}))), null, {
text: i18n.ts._deck.newProfile,
icon: 'fas fa-plus',
icon: 'ti ti-plus',
action: async () => {
const { canceled, result: name } = await os.inputText({
title: i18n.ts._deck.profile,

4
packages/client/src/ui/deck/antenna-column.vue
View File

@@ -1,7 +1,7 @@
<template>
<XColumn :menu="menu" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
<template #header>
<i class="fas fa-satellite"></i><span style="margin-left: 8px;">{{ column.name }}</span>
<i class="ti ti-antenna"></i><span style="margin-left: 8px;">{{ column.name }}</span>
</template>
<XTimeline v-if="column.antennaId" ref="timeline" src="antenna" :antenna="column.antennaId" @after="() => emit('loaded')"/>
@@ -50,7 +50,7 @@ async function setAntenna() {
}
const menu = [{
icon: 'fas fa-pencil-alt',
icon: 'ti ti-pencil',
text: i18n.ts.selectAntenna,
action: setAntenna,
}];

24
packages/client/src/ui/deck/column.vue
View File

@@ -16,14 +16,14 @@
@contextmenu.prevent.stop="onContextmenu"
>
<button v-if="isStacked && !isMainColumn" class="toggleActive _button" @click="toggleActive">
<template v-if="active"><i class="fas fa-angle-up"></i></template>
<template v-else><i class="fas fa-angle-down"></i></template>
<template v-if="active"><i class="ti ti-chevron-up"></i></template>
<template v-else><i class="ti ti-chevron-down"></i></template>
</button>
<div class="action">
<slot name="action"></slot>
</div>
<span class="header"><slot name="header"></slot></span>
<button v-tooltip="i18n.ts.settings" class="menu _button" @click.stop="showSettingsMenu"><i class="fas fa-ellipsis"></i></button>
<button v-tooltip="i18n.ts.settings" class="menu _button" @click.stop="showSettingsMenu"><i class="ti ti-dots"></i></button>
</header>
<div v-show="active" ref="body">
<slot></slot>
@@ -105,7 +105,7 @@ function toggleActive() {
function getMenu() {
let items = [{
icon: 'fas fa-cog',
icon: 'ti ti-settings',
text: i18n.ts._deck.configureColumn,
action: async () => {
const { canceled, result } = await os.form(props.column.name, {
@@ -131,46 +131,46 @@ function getMenu() {
}, {
type: 'parent',
text: i18n.ts.move + '...',
icon: 'fas fa-arrows-up-down-left-right',
icon: 'ti ti-arrows-move',
children: [{
icon: 'fas fa-arrow-left',
icon: 'ti ti-arrow-left',
text: i18n.ts._deck.swapLeft,
action: () => {
swapLeftColumn(props.column.id);
},
}, {
icon: 'fas fa-arrow-right',
icon: 'ti ti-arrow-right',
text: i18n.ts._deck.swapRight,
action: () => {
swapRightColumn(props.column.id);
},
}, props.isStacked ? {
icon: 'fas fa-arrow-up',
icon: 'ti ti-arrow-up',
text: i18n.ts._deck.swapUp,
action: () => {
swapUpColumn(props.column.id);
},
} : undefined, props.isStacked ? {
icon: 'fas fa-arrow-down',
icon: 'ti ti-arrow-down',
text: i18n.ts._deck.swapDown,
action: () => {
swapDownColumn(props.column.id);
},
} : undefined],
}, {
icon: 'fas fa-window-restore',
icon: 'ti ti-stack-2',
text: i18n.ts._deck.stackLeft,
action: () => {
stackLeftColumn(props.column.id);
},
}, props.isStacked ? {
icon: 'fas fa-window-maximize',
icon: 'ti ti-window-maximize',
text: i18n.ts._deck.popRight,
action: () => {
popRightColumn(props.column.id);
},
} : undefined, null, {
icon: 'fas fa-trash-alt',
icon: 'ti ti-trash',
text: i18n.ts.remove,
danger: true,
action: () => {

2
packages/client/src/ui/deck/direct-column.vue
View File

@@ -1,6 +1,6 @@
<template>
<XColumn :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
<template #header><i class="fas fa-envelope" style="margin-right: 8px;"></i>{{ column.name }}</template>
<template #header><i class="ti ti-mail" style="margin-right: 8px;"></i>{{ column.name }}</template>
<XNotes :pagination="pagination"/>
</XColumn>

4
packages/client/src/ui/deck/list-column.vue
View File

@@ -1,7 +1,7 @@
<template>
<XColumn :menu="menu" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
<template #header>
<i class="fas fa-list-ul"></i><span style="margin-left: 8px;">{{ column.name }}</span>
<i class="ti ti-list"></i><span style="margin-left: 8px;">{{ column.name }}</span>
</template>
<XTimeline v-if="column.listId" ref="timeline" src="list" :list="column.listId" @after="() => emit('loaded')"/>
@@ -48,7 +48,7 @@ async function setList() {
}
const menu = [{
icon: 'fas fa-pencil-alt',
icon: 'ti ti-pencil',
text: i18n.ts.selectList,
action: setList,
}];

2
packages/client/src/ui/deck/main-column.vue
View File

@@ -58,7 +58,7 @@ function onContextmenu(ev: MouseEvent) {
type: 'label',
text: path,
}, {
icon: 'fas fa-window-maximize',
icon: 'ti ti-window-maximize',
text: i18n.ts.openInWindow,
action: () => {
os.pageWindow(path);

2
packages/client/src/ui/deck/mentions-column.vue
View File

@@ -1,6 +1,6 @@
<template>
<XColumn :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
<template #header><i class="fas fa-at" style="margin-right: 8px;"></i>{{ column.name }}</template>
<template #header><i class="ti ti-at" style="margin-right: 8px;"></i>{{ column.name }}</template>
<XNotes :pagination="pagination"/>
</XColumn>

4
packages/client/src/ui/deck/notifications-column.vue
View File

@@ -1,6 +1,6 @@
<template>
<XColumn :column="column" :is-stacked="isStacked" :menu="menu" @parent-focus="$event => emit('parent-focus', $event)">
<template #header><i class="fas fa-bell" style="margin-right: 8px;"></i>{{ column.name }}</template>
<template #header><i class="ti ti-bell" style="margin-right: 8px;"></i>{{ column.name }}</template>
<XNotifications :include-types="column.includingTypes"/>
</XColumn>
@@ -37,7 +37,7 @@ function func() {
}
const menu = [{
icon: 'fas fa-pencil-alt',
icon: 'ti ti-pencil',
text: i18n.ts.notificationSetting,
action: func,
}];

12
packages/client/src/ui/deck/tl-column.vue
View File

@@ -1,16 +1,16 @@
<template>
<XColumn :menu="menu" :column="column" :is-stacked="isStacked" :indicated="indicated" @change-active-state="onChangeActiveState" @parent-focus="$event => emit('parent-focus', $event)">
<template #header>
<i v-if="column.tl === 'home'" class="fas fa-home"></i>
<i v-else-if="column.tl === 'local'" class="fas fa-comments"></i>
<i v-else-if="column.tl === 'social'" class="fas fa-share-alt"></i>
<i v-else-if="column.tl === 'global'" class="fas fa-globe"></i>
<i v-if="column.tl === 'home'" class="ti ti-home"></i>
<i v-else-if="column.tl === 'local'" class="ti ti-messages"></i>
<i v-else-if="column.tl === 'social'" class="ti ti-share"></i>
<i v-else-if="column.tl === 'global'" class="ti ti-world"></i>
<span style="margin-left: 8px;">{{ column.name }}</span>
</template>
<div v-if="disabled" class="iwaalbte">
<p>
<i class="fas fa-minus-circle"></i>
<i class="ti ti-minus-circle"></i>
{{ $t('disabled-timeline.title') }}
</p>
<p class="desc">{{ $t('disabled-timeline.description') }}</p>
@@ -98,7 +98,7 @@ function onChangeActiveState(state) {
}
const menu = [{
icon: 'fas fa-pencil-alt',
icon: 'ti ti-pencil',
text: i18n.ts.timeline,
action: setType,
}];

2
packages/client/src/ui/deck/widgets-column.vue
View File

@@ -48,7 +48,7 @@ function func() {
}
const menu = [{
icon: 'fas fa-pencil-alt',
icon: 'ti ti-pencil',
text: i18n.ts.editWidgets,
action: func,
}];

14
packages/client/src/ui/universal.vue
View File

@@ -16,14 +16,14 @@
<XWidgets @mounted="attachSticky"/>
</div>
<button v-if="!isDesktop && !isMobile" class="widgetButton _button" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
<button v-if="!isDesktop && !isMobile" class="widgetButton _button" @click="widgetsShowing = true"><i class="ti ti-layout-list"></i></button>
<div v-if="isMobile" class="buttons">
<button class="button nav _button" @click="drawerMenuShowing = true"><i class="fas fa-bars"></i><span v-if="menuIndicated" class="indicator"><i class="fas fa-circle"></i></span></button>
<button class="button home _button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/')"><i class="fas fa-home"></i></button>
<button class="button notifications _button" @click="mainRouter.push('/my/notifications')"><i class="fas fa-bell"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button>
<button class="button widget _button" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
<button class="button post _button" @click="os.post()"><i class="fas fa-pencil-alt"></i></button>
<button class="button nav _button" @click="drawerMenuShowing = true"><i class="ti ti-menu-2"></i><span v-if="menuIndicated" class="indicator"><i class="_indicatorCircle"></i></span></button>
<button class="button home _button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/')"><i class="ti ti-home"></i></button>
<button class="button notifications _button" @click="mainRouter.push('/my/notifications')"><i class="ti ti-bell"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="_indicatorCircle"></i></span></button>
<button class="button widget _button" @click="widgetsShowing = true"><i class="ti ti-layout-list"></i></button>
<button class="button post _button" @click="os.post()"><i class="ti ti-pencil"></i></button>
</div>
<transition :name="$store.state.animation ? 'menuDrawer-back' : ''">
@@ -149,7 +149,7 @@ const onContextmenu = (ev) => {
type: 'label',
text: path,
}, {
icon: 'fas fa-window-maximize',
icon: 'ti ti-window-maximize',
text: i18n.ts.openInWindow,
action: () => {
os.pageWindow(path);

4
packages/client/src/ui/universal.widgets.vue
View File

@@ -2,8 +2,8 @@
<div class="efzpzdvf">
<XWidgets :edit="editMode" :widgets="defaultStore.reactiveState.widgets.value" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
<button v-if="editMode" class="_textButton" style="font-size: 0.9em;" @click="editMode = false"><i class="fas fa-check"></i> {{ i18n.ts.editWidgetsExit }}</button>
<button v-else class="_textButton mk-widget-edit" style="font-size: 0.9em;" @click="editMode = true"><i class="fas fa-pencil-alt"></i> {{ i18n.ts.editWidgets }}</button>
<button v-if="editMode" class="_textButton" style="font-size: 0.9em;" @click="editMode = false"><i class="ti ti-check"></i> {{ i18n.ts.editWidgetsExit }}</button>
<button v-else class="_textButton mk-widget-edit" style="font-size: 0.9em;" @click="editMode = true"><i class="ti ti-pencil"></i> {{ i18n.ts.editWidgets }}</button>
</div>
</template>

6
packages/client/src/ui/visitor/b.vue
View File

@@ -32,10 +32,10 @@
<transition :name="$store.state.animation ? 'tray' : ''">
<div v-if="showMenu" class="menu">
<MkA to="/" class="link" active-class="active"><i class="fas fa-home icon"></i>{{ $ts.home }}</MkA>
<MkA to="/explore" class="link" active-class="active"><i class="fas fa-hashtag icon"></i>{{ $ts.explore }}</MkA>
<MkA to="/" class="link" active-class="active"><i class="ti ti-home icon"></i>{{ $ts.home }}</MkA>
<MkA to="/explore" class="link" active-class="active"><i class="ti ti-hash icon"></i>{{ $ts.explore }}</MkA>
<MkA to="/featured" class="link" active-class="active"><i class="fas fa-fire-alt icon"></i>{{ $ts.featured }}</MkA>
<MkA to="/channels" class="link" active-class="active"><i class="fas fa-satellite-dish icon"></i>{{ $ts.channel }}</MkA>
<MkA to="/channels" class="link" active-class="active"><i class="ti ti-device-tv icon"></i>{{ $ts.channel }}</MkA>
<div class="action">
<button class="_buttonPrimary" @click="signup()">{{ $ts.signup }}</button>
<button class="_button" @click="signin()">{{ $ts.login }}</button>

20
packages/client/src/ui/visitor/header.vue
View File

@@ -2,10 +2,10 @@
<div class="sqxihjet">
<div v-if="narrow === false" class="wide">
<div class="content">
<MkA to="/" class="link" active-class="active"><i class="fas fa-home icon"></i>{{ $ts.home }}</MkA>
<MkA to="/explore" class="link" active-class="active"><i class="fas fa-hashtag icon"></i>{{ $ts.explore }}</MkA>
<MkA to="/" class="link" active-class="active"><i class="ti ti-home icon"></i>{{ $ts.home }}</MkA>
<MkA to="/explore" class="link" active-class="active"><i class="ti ti-hash icon"></i>{{ $ts.explore }}</MkA>
<MkA to="/featured" class="link" active-class="active"><i class="fas fa-fire-alt icon"></i>{{ $ts.featured }}</MkA>
<MkA to="/channels" class="link" active-class="active"><i class="fas fa-satellite-dish icon"></i>{{ $ts.channel }}</MkA>
<MkA to="/channels" class="link" active-class="active"><i class="ti ti-device-tv icon"></i>{{ $ts.channel }}</MkA>
<div v-if="info" class="page active link">
<div class="title">
<i v-if="info.icon" class="icon" :class="info.icon"></i>
@@ -16,7 +16,7 @@
<button v-if="info.action" class="_button action" @click.stop="info.action.handler"><!-- TODO --></button>
</div>
<div class="right">
<button class="_button search" @click="search()"><i class="fas fa-search icon"></i><span>{{ $ts.search }}</span></button>
<button class="_button search" @click="search()"><i class="ti ti-search icon"></i><span>{{ $ts.search }}</span></button>
<button class="_buttonPrimary signup" @click="signup()">{{ $ts.signup }}</button>
<button class="_button login" @click="signin()">{{ $ts.login }}</button>
</div>
@@ -24,7 +24,7 @@
</div>
<div v-else-if="narrow === true" class="narrow">
<button class="menu _button" @click="$parent.showMenu = true">
<i class="fas fa-bars icon"></i>
<i class="ti ti-menu-2 icon"></i>
</button>
<div v-if="info" class="title">
<i v-if="info.icon" class="icon" :class="info.icon"></i>
@@ -49,7 +49,7 @@ import { search } from '@/scripts/search';
export default defineComponent({
props: {
info: {
required: true
required: true,
},
},
@@ -67,18 +67,18 @@ export default defineComponent({
methods: {
signin() {
os.popup(XSigninDialog, {
autoSet: true
autoSet: true,
}, {}, 'closed');
},
signup() {
os.popup(XSignupDialog, {
autoSet: true
autoSet: true,
}, {}, 'closed');
},
search
}
search,
},
});
</script>