sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Use FontAwesome as web font instead of vue component (#7469)

Browse Source 
* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update yarn.lock

* wip

* wip
This commit is contained in:
syuilo
2021-04-20 23:22:59 +09:00
committed by GitHub
parent 8bb6ed625b
commit 11349561d6
245 changed files with 1156 additions and 1775 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/client/ui/_common_/header.vue
View File

@ -1,12 +1,12 @@
<template>
<div class="fdidabkb" :class="{ center }" :style="`--height:${height};`" :key="key">
<transition :name="$store.state.animation ? 'header' : ''" mode="out-in" appear>
<button class="_button back" v-if="withBack && canBack" @click.stop="back()" v-tooltip="$ts.goBack"><Fa :icon="faChevronLeft"/></button>
<button class="_button back" v-if="withBack && canBack" @click.stop="back()" v-tooltip="$ts.goBack"><i class="fas fa-chevron-left"></i></button>
</transition>
<template v-if="info">
<div class="titleContainer">
<div class="title">
<Fa v-if="info.icon" :icon="info.icon" :key="info.icon" class="icon"/>
<i v-if="info.icon" class="icon" :class="info.icon"></i>
<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
<MkUserName v-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
<span v-else-if="info.title" class="text">{{ info.title }}</span>
@ -14,9 +14,9 @@
</div>
<div class="buttons">
<template v-if="info.actions && showActions">
<button v-for="action in info.actions" class="_button button" @click.stop="action.handler" v-tooltip="action.text"><Fa :icon="action.icon"/></button>
<button v-for="action in info.actions" class="_button button" @click.stop="action.handler" v-tooltip="action.text"><i :class="action.icon"></i></button>
</template>
<button v-if="showMenu" class="_button button" @click.stop="menu"><Fa :icon="faEllipsisH"/></button>
<button v-if="showMenu" class="_button button" @click.stop="menu"><i class="fas fa-ellipsis-h"></i></button>
</div>
</template>
</div>
@ -24,7 +24,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { faChevronLeft, faCircle, faShareAlt, faEllipsisH } from '@fortawesome/free-solid-svg-icons';
import { modalMenu } from '@client/os';
import { url } from '@client/config';
@ -51,7 +50,6 @@ export default defineComponent({
showActions: false,
height: 0,
key: 0,
faChevronLeft, faCircle, faShareAlt, faEllipsisH,
};
},
@ -111,7 +109,7 @@ export default defineComponent({
if (menu.length > 0) menu.push(null);
menu.push({
text: this.$ts.share,
icon: faShareAlt,
icon: 'fas fa-share-alt',
action: this.share
});
}

51
src/client/ui/_common_/sidebar.vue
View File

@ -15,28 +15,28 @@
<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
</button>
<MkA class="item index" active-class="active" to="/" exact>
<Fa :icon="faHome" fixed-width/><span class="text">{{ $ts.timeline }}</span>
<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
</MkA>
<template v-for="item in menu">
<div v-if="item === '-'" class="divider"></div>
<component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="item" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to">
<Fa :icon="menuDef[item].icon" fixed-width/><span class="text">{{ $ts[menuDef[item].title] }}</span>
<i v-if="menuDef[item].indicated"><Fa :icon="faCircle"/></i>
<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
</component>
</template>
<div class="divider"></div>
<button class="item _button" :class="{ active: $route.path === '/instance' || $route.path.startsWith('/instance/') }" v-if="$i.isAdmin || $i.isModerator" @click="oepnInstanceMenu">
<Fa :icon="faServer" fixed-width/><span class="text">{{ $ts.instance }}</span>
<i class="fas fa-server fa-fw"></i><span class="text">{{ $ts.instance }}</span>
</button>
<button class="item _button" @click="more">
<Fa :icon="faEllipsisH" fixed-width/><span class="text">{{ $ts.more }}</span>
<i v-if="otherNavItemIndicated"><Fa :icon="faCircle"/></i>
<i class="fa 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>
</button>
<MkA class="item" active-class="active" to="/settings">
<Fa :icon="faCog" fixed-width/><span class="text">{{ $ts.settings }}</span>
<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
</MkA>
<button class="item _button post" @click="post">
<Fa :icon="faPencilAlt" fixed-width/><span class="text">{{ $ts.note }}</span>
<i class="fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
</button>
</div>
</nav>
@ -46,8 +46,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { faGripVertical, faChevronLeft, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faListUl, faPlus, faUserClock, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer, faInfoCircle, faQuestionCircle, faProjectDiagram, faStream, faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
import { faBell, faEnvelope, faLaugh, faComments } from '@fortawesome/free-regular-svg-icons';
import { host } from '@client/config';
import { search } from '@client/scripts/search';
import * as os from '@client/os';
@ -72,7 +70,6 @@ export default defineComponent({
menuDef: sidebarDef,
iconOnly: false,
hidden: this.defaultHidden,
faGripVertical, faChevronLeft, faComments, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faBell, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faEnvelope, faListUl, faPlus, faUserClock, faLaugh, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer, faProjectDiagram
};
},
@ -159,7 +156,7 @@ export default defineComponent({
to: `/@${ this.$i.username }`,
avatar: this.$i,
}, null, ...accountItemPromises, {
icon: faPlus,
icon: 'fas fa-plus',
text: this.$ts.addAcount,
action: () => {
os.modalMenu([{
@ -180,57 +177,57 @@ export default defineComponent({
type: 'link',
text: this.$ts.dashboard,
to: '/instance',
icon: faTachometerAlt,
icon: 'fas fa-tachometer-alt',
}, null, this.$i.isAdmin ? {
type: 'link',
text: this.$ts.settings,
to: '/instance/settings',
icon: faCog,
icon: 'fas fa-cog',
} : undefined, {
type: 'link',
text: this.$ts.customEmojis,
to: '/instance/emojis',
icon: faLaugh,
icon: 'fas fa-laugh',
}, {
type: 'link',
text: this.$ts.users,
to: '/instance/users',
icon: faUsers,
icon: 'fas fa-users',
}, {
type: 'link',
text: this.$ts.files,
to: '/instance/files',
icon: faCloud,
icon: 'fas fa-cloud',
}, {
type: 'link',
text: this.$ts.jobQueue,
to: '/instance/queue',
icon: faExchangeAlt,
icon: 'fas fa-exchange-alt',
}, {
type: 'link',
text: this.$ts.federation,
to: '/instance/federation',
icon: faGlobe,
icon: 'fas fa-globe',
}, {
type: 'link',
text: this.$ts.relays,
to: '/instance/relays',
icon: faProjectDiagram,
icon: 'fas fa-project-diagram',
}, {
type: 'link',
text: this.$ts.announcements,
to: '/instance/announcements',
icon: faBroadcastTower,
icon: 'fas fa-broadcast-tower',
}, {
type: 'link',
text: this.$ts.abuseReports,
to: '/instance/abuses',
icon: faExclamationCircle,
icon: 'fas fa-exclamation-circle',
}, {
type: 'link',
text: this.$ts.logs,
to: '/instance/logs',
icon: faStream,
icon: 'fas fa-stream',
}], ev.currentTarget || ev.target);
},
@ -330,7 +327,7 @@ export default defineComponent({
font-size: $ui-font-size * 1.1;
line-height: 3.7rem;
> [data-icon],
> i,
> .avatar {
margin-right: 0;
}
@ -397,11 +394,11 @@ export default defineComponent({
box-sizing: border-box;
color: var(--navFg);
> [data-icon] {
> i {
width: 32px;
}
> [data-icon],
> i,
> .avatar {
margin-right: $avatar-margin;
}
@ -412,7 +409,7 @@ export default defineComponent({
vertical-align: middle;
}
> i {
> .indicator {
position: absolute;
top: 0;
left: 20px;

6
src/client/ui/_common_/upload.vue
View File

@ -4,7 +4,7 @@
<li v-for="ctx in uploads" :key="ctx.id">
<div class="img" :style="{ backgroundImage: `url(${ ctx.img })` }"></div>
<div class="top">
<p class="name"><Fa :icon="faSpinner" pulse/>{{ ctx.name }}</p>
<p class="name"><i class="fas fa-spinner fa-pulse"></i>{{ ctx.name }}</p>
<p class="status">
<span class="initing" v-if="ctx.progressValue === undefined">{{ $ts.waiting }}<MkEllipsis/></span>
<span class="kb" v-if="ctx.progressValue !== undefined">{{ String(Math.floor(ctx.progressValue / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i> / {{ String(Math.floor(ctx.progressMax / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i></span>
@ -19,14 +19,12 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { faSpinner } from '@fortawesome/free-solid-svg-icons';
import * as os from '@client/os';
export default defineComponent({
data() {
return {
uploads: os.uploads,
faSpinner
};
},
});
@ -92,7 +90,7 @@ export default defineComponent({
overflow: hidden;
flex-shrink: 1;
}
.mk-uploader > ol > li > .top > .name > [data-icon] {
.mk-uploader > ol > li > .top > .name > i {
margin-right: 4px;
}
.mk-uploader > ol > li > .top > .status {

12
src/client/ui/chat/date-separated-list.vue
View File

@ -1,7 +1,5 @@
<script lang="ts">
import { defineComponent, h, TransitionGroup } from 'vue';
import { faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
export default defineComponent({
props: {
@ -57,17 +55,15 @@ export default defineComponent({
class: 'date'
}, [
h('span', [
h(FontAwesomeIcon, {
class: 'icon',
icon: faAngleUp,
h('i', {
class: 'fas fa-angle-up icon',
}),
getDateText(item.createdAt)
]),
h('span', [
getDateText(this.items[i + 1].createdAt),
h(FontAwesomeIcon, {
class: 'icon',
icon: faAngleDown,
h('i', {
class: 'fas fa-angle-down icon',
})
])
]));

73
src/client/ui/chat/index.vue
View File

@ -10,63 +10,63 @@
</button>
</div>
<div class="right">
<MkA class="item" to="/my/messaging" v-tooltip="$ts.messaging"><Fa class="icon" :icon="faComments"/><i v-if="$i.hasUnreadMessagingMessage"><Fa :icon="faCircle"/></i></MkA>
<MkA class="item" to="/my/messages" v-tooltip="$ts.directNotes"><Fa class="icon" :icon="faEnvelope"/><i v-if="$i.hasUnreadSpecifiedNotes"><Fa :icon="faCircle"/></i></MkA>
<MkA class="item" to="/my/mentions" v-tooltip="$ts.mentions"><Fa class="icon" :icon="faAt"/><i v-if="$i.hasUnreadMentions"><Fa :icon="faCircle"/></i></MkA>
<MkA class="item" to="/my/notifications" v-tooltip="$ts.notifications"><Fa class="icon" :icon="faBell"/><i v-if="$i.hasUnreadNotification"><Fa :icon="faCircle"/></i></MkA>
<MkA class="item" to="/my/messaging" v-tooltip="$ts.messaging"><i class="fas fa-comments icon"></i><span v-if="$i.hasUnreadMessagingMessage" class="indicator"><i class="fas fa-circle"></i></span></MkA>
<MkA class="item" to="/my/messages" v-tooltip="$ts.directNotes"><i class="fas fa-envelope icon"></i><span v-if="$i.hasUnreadSpecifiedNotes" class="indicator"><i class="fas fa-circle"></i></span></MkA>
<MkA class="item" to="/my/mentions" v-tooltip="$ts.mentions"><i class="fas fa-at icon"></i><span v-if="$i.hasUnreadMentions" class="indicator"><i class="fas fa-circle"></i></span></MkA>
<MkA class="item" to="/my/notifications" v-tooltip="$ts.notifications"><i class="fas fa-bell icon"></i><span v-if="$i.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></MkA>
</div>
</header>
<div class="body">
<div class="container">
<div class="header">{{ $ts.timeline }}</div>
<div class="body">
<MkA to="/timeline/home" class="item" :class="{ active: tl === 'home' }"><Fa :icon="faHome" class="icon"/>{{ $ts._timelines.home }}</MkA>
<MkA to="/timeline/local" class="item" :class="{ active: tl === 'local' }"><Fa :icon="faComments" class="icon"/>{{ $ts._timelines.local }}</MkA>
<MkA to="/timeline/social" class="item" :class="{ active: tl === 'social' }"><Fa :icon="faShareAlt" class="icon"/>{{ $ts._timelines.social }}</MkA>
<MkA to="/timeline/global" class="item" :class="{ active: tl === 'global' }"><Fa :icon="faGlobe" class="icon"/>{{ $ts._timelines.global }}</MkA>
<MkA to="/timeline/home" class="item" :class="{ active: tl === 'home' }"><i class="fas fa-home icon"></i>{{ $ts._timelines.home }}</MkA>
<MkA to="/timeline/local" class="item" :class="{ active: tl === 'local' }"><i class="fas fa-comments icon"></i>{{ $ts._timelines.local }}</MkA>
<MkA to="/timeline/social" class="item" :class="{ active: tl === 'social' }"><i class="fas fa-share-alt icon"></i>{{ $ts._timelines.social }}</MkA>
<MkA to="/timeline/global" class="item" :class="{ active: tl === 'global' }"><i class="fas fa-globe icon"></i>{{ $ts._timelines.global }}</MkA>
</div>
</div>
<div class="container" v-if="followedChannels">
<div class="header">{{ $ts.channel }} ({{ $ts.following }})<button class="_button add" @click="addChannel"><Fa :icon="faPlus"/></button></div>
<div class="header">{{ $ts.channel }} ({{ $ts.following }})<button class="_button add" @click="addChannel"><i class="fas fa-plus"></i></button></div>
<div class="body">
<MkA v-for="channel in followedChannels" :key="channel.id" :to="`/channels/${ channel.id }`" class="item" :class="{ active: tl === `channel:${ channel.id }`, read: !channel.hasUnreadNote }"><Fa :icon="faSatelliteDish" class="icon"/>{{ channel.name }}</MkA>
<MkA v-for="channel in followedChannels" :key="channel.id" :to="`/channels/${ channel.id }`" class="item" :class="{ active: tl === `channel:${ channel.id }`, read: !channel.hasUnreadNote }"><i class="fas fa-satellite-dish icon"></i>{{ channel.name }}</MkA>
</div>
</div>
<div class="container" v-if="featuredChannels">
<div class="header">{{ $ts.channel }}<button class="_button add" @click="addChannel"><Fa :icon="faPlus"/></button></div>
<div class="header">{{ $ts.channel }}<button class="_button add" @click="addChannel"><i class="fas fa-plus"></i></button></div>
<div class="body">
<MkA v-for="channel in featuredChannels" :key="channel.id" :to="`/channels/${ channel.id }`" class="item" :class="{ active: tl === `channel:${ channel.id }` }"><Fa :icon="faSatelliteDish" class="icon"/>{{ channel.name }}</MkA>
<MkA v-for="channel in featuredChannels" :key="channel.id" :to="`/channels/${ channel.id }`" class="item" :class="{ active: tl === `channel:${ channel.id }` }"><i class="fas fa-satellite-dish icon"></i>{{ channel.name }}</MkA>
</div>
</div>
<div class="container" v-if="lists">
<div class="header">{{ $ts.lists }}<button class="_button add" @click="addList"><Fa :icon="faPlus"/></button></div>
<div class="header">{{ $ts.lists }}<button class="_button add" @click="addList"><i class="fas fa-plus"></i></button></div>
<div class="body">
<MkA v-for="list in lists" :key="list.id" :to="`/my/list/${ list.id }`" class="item" :class="{ active: tl === `list:${ list.id }` }"><Fa :icon="faListUl" class="icon"/>{{ list.name }}</MkA>
<MkA v-for="list in lists" :key="list.id" :to="`/my/list/${ list.id }`" class="item" :class="{ active: tl === `list:${ list.id }` }"><i class="fas fa-list-ul icon"></i>{{ list.name }}</MkA>
</div>
</div>
<div class="container" v-if="antennas">
<div class="header">{{ $ts.antennas }}<button class="_button add" @click="addAntenna"><Fa :icon="faPlus"/></button></div>
<div class="header">{{ $ts.antennas }}<button class="_button add" @click="addAntenna"><i class="fas fa-plus"></i></button></div>
<div class="body">
<MkA v-for="antenna in antennas" :key="antenna.id" :to="`/my/antenna/${ antenna.id }`" class="item" :class="{ active: tl === `antenna:${ antenna.id }` }"><Fa :icon="faSatellite" class="icon"/>{{ antenna.name }}</MkA>
<MkA v-for="antenna in antennas" :key="antenna.id" :to="`/my/antenna/${ antenna.id }`" class="item" :class="{ active: tl === `antenna:${ antenna.id }` }"><i class="fas fa-satellite icon"></i>{{ antenna.name }}</MkA>
</div>
</div>
<div class="container">
<div class="body">
<MkA to="/my/favorites" class="item"><Fa :icon="faStar" class="icon"/>{{ $ts.favorites }}</MkA>
<MkA to="/my/favorites" class="item"><i class="fas fa-star icon"></i>{{ $ts.favorites }}</MkA>
</div>
</div>
</div>
<footer class="footer">
<div class="left">
<button class="_button menu" @click="showMenu">
<Fa class="icon" :icon="faBars"/>
<i class="fas fa-bars icon"></i>
</button>
</div>
<div class="right">
<button class="_button item search" @click="search" v-tooltip="$ts.search">
<Fa :icon="faSearch"/>
<i class="fas fa-search"></i>
</button>
<MkA class="item" to="/settings" v-tooltip="$ts.settings"><Fa class="icon" :icon="faCog"/></MkA>
<MkA class="item" to="/settings" v-tooltip="$ts.settings"><i class="fas fa-cog icon"></i></MkA>
</div>
</footer>
</div>
@ -75,23 +75,23 @@
<header class="header" ref="header" @click="onHeaderClick">
<div class="left">
<template v-if="tl === 'home'">
<Fa :icon="faHome" class="icon"/>
<i class="fas fa-home icon"></i>
<div class="title">{{ $ts._timelines.home }}</div>
</template>
<template v-else-if="tl === 'local'">
<Fa :icon="faComments" class="icon"/>
<i class="fas fa-comments icon"></i>
<div class="title">{{ $ts._timelines.local }}</div>
</template>
<template v-else-if="tl === 'social'">
<Fa :icon="faShareAlt" class="icon"/>
<i class="fas fa-share-alt icon"></i>
<div class="title">{{ $ts._timelines.social }}</div>
</template>
<template v-else-if="tl === 'global'">
<Fa :icon="faGlobe" class="icon"/>
<i class="fas fa-globe icon"></i>
<div class="title">{{ $ts._timelines.global }}</div>
</template>
<template v-else-if="tl.startsWith('channel:')">
<Fa :icon="faSatelliteDish" class="icon"/>
<i class="fas fa-satellite-dish icon"></i>
<div class="title" v-if="currentChannel">{{ currentChannel.name }}<div class="description">{{ currentChannel.description }}</div></div>
</template>
</div>
@ -100,20 +100,20 @@
<div class="instance">{{ instanceName }}</div>
<XHeaderClock class="clock"/>
<button class="_button button timetravel" @click="timetravel" v-tooltip="$ts.jumpToSpecifiedDate">
<Fa :icon="faCalendarAlt"/>
<i class="fas fa-calendar-alt"></i>
</button>
<button class="_button button search" v-if="tl.startsWith('channel:') && currentChannel" @click="inChannelSearch" v-tooltip="$ts.inChannelSearch">
<Fa :icon="faSearch"/>
<i class="fas fa-search"></i>
</button>
<button class="_button button search" v-else @click="search" v-tooltip="$ts.search">
<Fa :icon="faSearch"/>
<i class="fas fa-search"></i>
</button>
<button class="_button button follow" v-if="tl.startsWith('channel:') && currentChannel" :class="{ followed: currentChannel.isFollowing }" @click="toggleChannelFollow" v-tooltip="currentChannel.isFollowing ? $ts.unfollow : $ts.follow">
<Fa v-if="currentChannel.isFollowing" :icon="faStar"/>
<Fa v-else :icon="farStar"/>
<i v-if="currentChannel.isFollowing" class="fas fa-star"></i>
<i v-else class="far fa-star"></i>
</button>
<button class="_button button menu" v-if="tl.startsWith('channel:') && currentChannel" @click="openChannelMenu">
<Fa :icon="faEllipsisH"/>
<i class="fas fa-ellipsis-h"></i>
</button>
</div>
</header>
@ -133,8 +133,6 @@
<script lang="ts">
import { defineComponent, defineAsyncComponent } from 'vue';
import { faLayerGroup, faBars, faHome, faCircle, faWindowMaximize, faColumns, faPencilAlt, faShareAlt, faSatelliteDish, faListUl, faSatellite, faCog, faSearch, faPlus, faStar, faAt, faLink, faEllipsisH, faGlobe } from '@fortawesome/free-solid-svg-icons';
import { faBell, faStar as farStar, faEnvelope, faComments, faCalendarAlt } from '@fortawesome/free-regular-svg-icons';
import { instanceName, url } from '@client/config';
import XSidebar from '@client/ui/_common_/sidebar.vue';
import XWidgets from './widgets.vue';
@ -195,7 +193,6 @@ export default defineComponent({
menuDef: sidebarDef,
sideViewOpening: false,
instanceName,
faLayerGroup, faBars, faBell, faHome, faCircle, faPencilAlt, faShareAlt, faSatelliteDish, faListUl, faSatellite, faCog, faSearch, faPlus, faStar, farStar, faAt, faLink, faEllipsisH, faGlobe, faComments, faEnvelope, faCalendarAlt,
};
},
@ -293,7 +290,7 @@ export default defineComponent({
openChannelMenu(ev) {
os.modalMenu([{
text: this.$ts.copyUrl,
icon: faLink,
icon: 'fas fa-link',
action: () => {
copyToClipboard(`${url}/channels/${this.currentChannel.id}`);
}
@ -323,13 +320,13 @@ export default defineComponent({
type: 'label',
text: path,
}, {
icon: faColumns,
icon: 'fas fa-columns',
text: this.$ts.openInSideView,
action: () => {
this.$refs.side.navigate(path);
}
}, {
icon: faWindowMaximize,
icon: 'fas fa-window-maximize',
text: this.$ts.openInWindow,
action: () => {
os.pageWindow(path);
@ -398,7 +395,7 @@ export default defineComponent({
margin: auto;
}
> i {
> .indicator {
position: absolute;
top: 8px;
right: 8px;

17
src/client/ui/chat/note-header.vue
View File

@ -5,27 +5,25 @@
</MkA>
<span class="is-bot" v-if="note.user.isBot">bot</span>
<span class="username"><MkAcct :user="note.user"/></span>
<span class="admin" v-if="note.user.isAdmin"><Fa :icon="faBookmark"/></span>
<span class="moderator" v-if="!note.user.isAdmin && note.user.isModerator"><Fa :icon="farBookmark"/></span>
<span class="admin" v-if="note.user.isAdmin"><i class="fas fa-bookmark"></i></span>
<span class="moderator" v-if="!note.user.isAdmin && note.user.isModerator"><i class="far fa-bookmark"></i></span>
<div class="info">
<span class="mobile" v-if="note.viaMobile"><Fa :icon="faMobileAlt"/></span>
<span class="mobile" v-if="note.viaMobile"><i class="fas fa-mobile-alt"></i></span>
<MkA class="created-at" :to="notePage(note)">
<MkTime :time="note.createdAt"/>
</MkA>
<span class="visibility" v-if="note.visibility !== 'public'">
<Fa v-if="note.visibility === 'home'" :icon="faHome"/>
<Fa v-if="note.visibility === 'followers'" :icon="faUnlock"/>
<Fa v-if="note.visibility === 'specified'" :icon="faEnvelope"/>
<i v-if="note.visibility === 'home'" class="fas fa-home"></i>
<i v-else-if="note.visibility === 'followers'" class="fas fa-unlock"></i>
<i v-else-if="note.visibility === 'specified'" class="fas fa-envelope"></i>
</span>
<span class="localOnly" v-if="note.localOnly"><Fa :icon="faBiohazard"/></span>
<span class="localOnly" v-if="note.localOnly"><i class="fas fa-biohazard"></i></span>
</div>
</header>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { faHome, faUnlock, faEnvelope, faMobileAlt, faBookmark, faBiohazard } from '@fortawesome/free-solid-svg-icons';
import { faBookmark as farBookmark } from '@fortawesome/free-regular-svg-icons';
import notePage from '@client/filters/note';
import { userPage } from '@client/filters/user';
import * as os from '@client/os';
@ -40,7 +38,6 @@ export default defineComponent({
data() {
return {
faHome, faUnlock, faEnvelope, faMobileAlt, faBookmark, farBookmark, faBiohazard
};
},

97
src/client/ui/chat/note.vue
View File

@ -8,12 +8,12 @@
v-hotkey="keymap"
>
<XSub :note="appearNote.reply" class="reply-to" v-if="appearNote.reply"/>
<div class="info" v-if="pinned"><Fa :icon="faThumbtack"/> {{ $ts.pinnedNote }}</div>
<div class="info" v-if="appearNote._prId_"><Fa :icon="faBullhorn"/> {{ $ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ $ts.hideThisNote }} <Fa :icon="faTimes"/></button></div>
<div class="info" v-if="appearNote._featuredId_"><Fa :icon="faBolt"/> {{ $ts.featured }}</div>
<div class="info" v-if="pinned"><i class="fas fa-thumbtack"></i> {{ $ts.pinnedNote }}</div>
<div class="info" v-if="appearNote._prId_"><i class="fas fa-bullhorn"></i> {{ $ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ $ts.hideThisNote }} <i class="fas fa-times"></i></button></div>
<div class="info" v-if="appearNote._featuredId_"><i class="fas fa-bolt"></i> {{ $ts.featured }}</div>
<div class="renote" v-if="isRenote">
<MkAvatar class="avatar" :user="note.user"/>
<Fa :icon="faRetweet"/>
<i class="fas fa-retweet"></i>
<I18n :src="$ts.renotedBy" tag="span">
<template #user>
<MkA class="name" :to="userPage(note.user)" v-user-preview="note.userId">
@ -23,15 +23,15 @@
</I18n>
<div class="info">
<button class="_button time" @click="showRenoteMenu()" ref="renoteTime">
<Fa class="dropdownIcon" v-if="isMyRenote" :icon="faEllipsisH"/>
<i v-if="isMyRenote" class="fas fa-ellipsis-h dropdownIcon"></i>
<MkTime :time="note.createdAt"/>
</button>
<span class="visibility" v-if="note.visibility !== 'public'">
<Fa v-if="note.visibility === 'home'" :icon="faHome"/>
<Fa v-if="note.visibility === 'followers'" :icon="faUnlock"/>
<Fa v-if="note.visibility === 'specified'" :icon="faEnvelope"/>
<i v-if="note.visibility === 'home'" class="fas fa-home"></i>
<i v-else-if="note.visibility === 'followers'" class="fas fa-unlock"></i>
<i v-else-if="note.visibility === 'specified'" class="fas fa-envelope"></i>
</span>
<span class="localOnly" v-if="note.localOnly"><Fa :icon="faBiohazard"/></span>
<span class="localOnly" v-if="note.localOnly"><i class="fas fa-biohazard"></i></span>
</div>
</div>
<article class="article" @contextmenu.stop="onContextmenu">
@ -47,7 +47,7 @@
<div class="content" :class="{ collapsed }" v-show="appearNote.cw == null || showContent">
<div class="text">
<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ $ts.private }})</span>
<MkA class="reply" v-if="appearNote.replyId" :to="`/notes/${appearNote.replyId}`"><Fa :icon="faReply"/></MkA>
<MkA class="reply" v-if="appearNote.replyId" :to="`/notes/${appearNote.replyId}`"><i class="fas fa-reply"></i></MkA>
<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
<a class="rp" v-if="appearNote.renote != null">RN:</a>
</div>
@ -61,29 +61,29 @@
<span>{{ $ts.showMore }}</span>
</button>
</div>
<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><Fa :icon="faSatelliteDish"/> {{ appearNote.channel.name }}</MkA>
<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="fas fa-satellite-dish"></i> {{ appearNote.channel.name }}</MkA>
</div>
<XReactionsViewer :note="appearNote" ref="reactionsViewer"/>
<footer class="footer _panel">
<button @click="reply()" class="button _button" v-tooltip="$ts.reply">
<template v-if="appearNote.reply"><Fa :icon="faReplyAll"/></template>
<template v-else><Fa :icon="faReply"/></template>
<template v-if="appearNote.reply"><i class="fas fa-reply-all"></i></template>
<template v-else><i class="fas fa-reply"></i></template>
<p class="count" v-if="appearNote.repliesCount > 0">{{ appearNote.repliesCount }}</p>
</button>
<button v-if="canRenote" @click="renote()" class="button _button" ref="renoteButton" v-tooltip="$ts.renote">
<Fa :icon="faRetweet"/><p class="count" v-if="appearNote.renoteCount > 0">{{ appearNote.renoteCount }}</p>
<i class="fas fa-retweet"></i><p class="count" v-if="appearNote.renoteCount > 0">{{ appearNote.renoteCount }}</p>
</button>
<button v-else class="button _button">
<Fa :icon="faBan"/>
<i class="fas fa-ban"></i>
</button>
<button v-if="appearNote.myReaction == null" class="button _button" @click="react()" ref="reactButton" v-tooltip="$ts.reaction">
<Fa :icon="faPlus"/>
<i class="fas fa-plus"></i>
</button>
<button v-if="appearNote.myReaction != null" class="button _button reacted" @click="undoReact(appearNote)" ref="reactButton" v-tooltip="$ts.reaction">
<Fa :icon="faMinus"/>
<i class="fas fa-minus"></i>
</button>
<button class="button _button" @click="menu()" ref="menuButton">
<Fa :icon="faEllipsisH"/>
<i class="fas fa-ellipsis-h"></i>
</button>
</footer>
</div>
@ -102,8 +102,6 @@
<script lang="ts">
import { defineAsyncComponent, defineComponent, markRaw } from 'vue';
import { faSatelliteDish, faBolt, faTimes, faBullhorn, faStar, faLink, faExternalLinkSquareAlt, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faQuoteRight, faInfoCircle, faBiohazard, faPlug, faExclamationCircle, faPaperclip, faShareAlt } from '@fortawesome/free-solid-svg-icons';
import { faCopy, faTrashAlt, faEdit, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
import * as mfm from 'mfm-js';
import { sum } from '../../../prelude/array';
import XSub from './note.sub.vue';
@ -124,14 +122,6 @@ import { noteActions, noteViewInterruptors } from '@client/store';
import { reactionPicker } from '@client/scripts/reaction-picker';
import { extractUrlFromMfm } from '@/misc/extract-url-from-mfm';
function markRawAll(...xs) {
for (const x of xs) {
markRaw(x);
}
}
markRawAll(faEdit, faBolt, faTimes, faBullhorn, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faBiohazard, faPlug, faSatelliteDish);
export default defineComponent({
components: {
XSub,
@ -174,7 +164,6 @@ export default defineComponent({
isDeleted: false,
muted: false,
operating: false,
faEdit, faBolt, faTimes, faBullhorn, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faBiohazard, faPlug, faSatelliteDish
};
},
@ -445,7 +434,7 @@ export default defineComponent({
this.blur();
os.modalMenu([{
text: this.$ts.renote,
icon: faRetweet,
icon: 'fas fa-retweet',
action: () => {
os.api('notes/create', {
renoteId: this.appearNote.id
@ -453,7 +442,7 @@ export default defineComponent({
}
}, {
text: this.$ts.quote,
icon: faQuoteRight,
icon: 'fas fa-quote-right',
action: () => {
os.post({
renote: this.appearNote,
@ -593,62 +582,62 @@ export default defineComponent({
});
menu = [{
icon: faCopy,
icon: 'fas fa-copy',
text: this.$ts.copyContent,
action: this.copyContent
}, {
icon: faLink,
icon: 'fas fa-link',
text: this.$ts.copyLink,
action: this.copyLink
}, (this.appearNote.url || this.appearNote.uri) ? {
icon: faExternalLinkSquareAlt,
icon: 'fas fa-external-link-square-alt',
text: this.$ts.showOnRemote,
action: () => {
window.open(this.appearNote.url || this.appearNote.uri, '_blank');
}
} : undefined,
{
icon: faShareAlt,
icon: 'fas fa-share-alt',
text: this.$ts.share,
action: this.share
},
null,
statePromise.then(state => state.isFavorited ? {
icon: faStar,
icon: 'fas fa-star',
text: this.$ts.unfavorite,
action: () => this.toggleFavorite(false)
} : {
icon: faStar,
icon: 'fas fa-star',
text: this.$ts.favorite,
action: () => this.toggleFavorite(true)
}),
{
icon: faPaperclip,
icon: 'fas fa-paperclip',
text: this.$ts.clip,
action: () => this.clip()
},
(this.appearNote.userId != this.$i.id) ? statePromise.then(state => state.isWatching ? {
icon: faEyeSlash,
icon: 'fas fa-eye-slash',
text: this.$ts.unwatch,
action: () => this.toggleWatch(false)
} : {
icon: faEye,
icon: 'fas fa-eye',
text: this.$ts.watch,
action: () => this.toggleWatch(true)
}) : undefined,
this.appearNote.userId == this.$i.id ? (this.$i.pinnedNoteIds || []).includes(this.appearNote.id) ? {
icon: faThumbtack,
icon: 'fas fa-thumbtack',
text: this.$ts.unpin,
action: () => this.togglePin(false)
} : {
icon: faThumbtack,
icon: 'fas fa-thumbtack',
text: this.$ts.pin,
action: () => this.togglePin(true)
} : undefined,
...(this.$i.isModerator || this.$i.isAdmin ? [
null,
{
icon: faBullhorn,
icon: 'fas fa-bullhorn',
text: this.$ts.promote,
action: this.promote
}]
@ -657,7 +646,7 @@ export default defineComponent({
...(this.appearNote.userId != this.$i.id ? [
null,
{
icon: faExclamationCircle,
icon: 'fas fa-exclamation-circle',
text: this.$ts.reportAbuse,
action: () => {
const u = `${url}/notes/${this.appearNote.id}`;
@ -672,12 +661,12 @@ export default defineComponent({
...(this.appearNote.userId == this.$i.id || this.$i.isModerator || this.$i.isAdmin ? [
null,
this.appearNote.userId == this.$i.id ? {
icon: faEdit,
icon: 'fas fa-edit',
text: this.$ts.deleteAndEdit,
action: this.delEdit
} : undefined,
{
icon: faTrashAlt,
icon: 'fas fa-trash-alt',
text: this.$ts.delete,
danger: true,
action: this.del
@ -687,15 +676,15 @@ export default defineComponent({
.filter(x => x !== undefined);
} else {
menu = [{
icon: faCopy,
icon: 'fas fa-copy',
text: this.$ts.copyContent,
action: this.copyContent
}, {
icon: faLink,
icon: 'fas fa-link',
text: this.$ts.copyLink,
action: this.copyLink
}, (this.appearNote.url || this.appearNote.uri) ? {
icon: faExternalLinkSquareAlt,
icon: 'fas fa-external-link-square-alt',
text: this.$ts.showOnRemote,
action: () => {
window.open(this.appearNote.url || this.appearNote.uri, '_blank');
@ -706,7 +695,7 @@ export default defineComponent({
if (noteActions.length > 0) {
menu = menu.concat([null, ...noteActions.map(action => ({
icon: faPlug,
icon: 'fas fa-plug',
text: action.title,
action: () => {
action.handler(this.appearNote);
@ -749,7 +738,7 @@ export default defineComponent({
if (!this.isMyRenote) return;
os.modalMenu([{
text: this.$ts.unrenote,
icon: faTrashAlt,
icon: 'fas fa-trash-alt',
danger: true,
action: () => {
os.api('notes/delete', {
@ -792,7 +781,7 @@ export default defineComponent({
async clip() {
const clips = await os.api('clips/list');
os.modalMenu([{
icon: faPlus,
icon: 'fas fa-plus',
text: this.$ts.createNew,
action: async () => {
const { canceled, result } = await os.form(this.$ts.createNewClip, {
@ -914,7 +903,7 @@ export default defineComponent({
white-space: pre;
color: #d28a3f;
> [data-icon] {
> i {
margin-right: 4px;
}
@ -952,7 +941,7 @@ export default defineComponent({
border-radius: 6px;
}
> [data-icon] {
> i {
margin-right: 4px;
}

35
src/client/ui/chat/post-form.vue
View File

@ -6,15 +6,15 @@
@drop.stop="onDrop"
>
<div class="form">
<div class="with-quote" v-if="quoteId"><Fa icon="quote-left"/> {{ $ts.quoteAttached }}<button @click="quoteId = null"><Fa icon="times"/></button></div>
<div class="with-quote" v-if="quoteId"><i class="fas fa-quote-left"></i> {{ $ts.quoteAttached }}<button @click="quoteId = null"><i class="fas fa-times"></i></button></div>
<div v-if="visibility === 'specified'" class="to-specified">
<span style="margin-right: 8px;">{{ $ts.recipient }}</span>
<div class="visibleUsers">
<span v-for="u in visibleUsers" :key="u.id">
<MkAcct :user="u"/>
<button class="_button" @click="removeVisibleUser(u)"><Fa :icon="faTimes"/></button>
<button class="_button" @click="removeVisibleUser(u)"><i class="fas fa-times"></i></button>
</span>
<button @click="addVisibleUser" class="_buttonPrimary"><Fa :icon="faPlus" fixed-width/></button>
<button @click="addVisibleUser" class="_buttonPrimary"><i class="fas fa-plus fa-fw"></i></button>
</div>
</div>
<input v-show="useCw" ref="cw" class="cw" v-model="cw" :placeholder="$ts.annotation" @keydown="onKeydown">
@ -23,23 +23,23 @@
<XPollEditor v-if="poll" :poll="poll" @destroyed="poll = null" @updated="onPollUpdate"/>
<footer>
<div class="left">
<button class="_button" @click="chooseFileFrom" v-tooltip="$ts.attachFile"><Fa :icon="faPhotoVideo"/></button>
<button class="_button" @click="togglePoll" :class="{ active: poll }" v-tooltip="$ts.poll"><Fa :icon="faPollH"/></button>
<button class="_button" @click="useCw = !useCw" :class="{ active: useCw }" v-tooltip="$ts.useCw"><Fa :icon="faEyeSlash"/></button>
<button class="_button" @click="insertMention" v-tooltip="$ts.mention"><Fa :icon="faAt"/></button>
<button class="_button" @click="insertEmoji" v-tooltip="$ts.emoji"><Fa :icon="faLaughSquint"/></button>
<button class="_button" @click="showActions" v-tooltip="$ts.plugin" v-if="postFormActions.length > 0"><Fa :icon="faPlug"/></button>
<button class="_button" @click="chooseFileFrom" v-tooltip="$ts.attachFile"><i class="fas fa-photo-video"></i></button>
<button class="_button" @click="togglePoll" :class="{ active: poll }" v-tooltip="$ts.poll"><i class="fas fa-poll-h"></i></button>
<button class="_button" @click="useCw = !useCw" :class="{ active: useCw }" v-tooltip="$ts.useCw"><i class="fas fa-eye-slash"></i></button>
<button class="_button" @click="insertMention" v-tooltip="$ts.mention"><i class="fas fa-at"></i></button>
<button class="_button" @click="insertEmoji" v-tooltip="$ts.emoji"><i class="fas fa-laugh-squint"></i></button>
<button class="_button" @click="showActions" v-tooltip="$ts.plugin" v-if="postFormActions.length > 0"><i class="fas fa-plug"></i></button>
</div>
<div class="right">
<span class="text-count" :class="{ over: textLength > max }">{{ max - textLength }}</span>
<span class="local-only" v-if="localOnly"><Fa :icon="faBiohazard"/></span>
<span class="local-only" v-if="localOnly"><i class="fas fa-biohazard"></i></span>
<button class="_button visibility" @click="setVisibility" ref="visibilityButton" v-tooltip="$ts.visibility" :disabled="channel != null">
<span v-if="visibility === 'public'"><Fa :icon="faGlobe"/></span>
<span v-if="visibility === 'home'"><Fa :icon="faHome"/></span>
<span v-if="visibility === 'followers'"><Fa :icon="faUnlock"/></span>
<span v-if="visibility === 'specified'"><Fa :icon="faEnvelope"/></span>
<span v-if="visibility === 'public'"><i class="fas fa-globe"></i></span>
<span v-if="visibility === 'home'"><i class="fas fa-home"></i></span>
<span v-if="visibility === 'followers'"><i class="fas fa-unlock"></i></span>
<span v-if="visibility === 'specified'"><i class="fas fa-envelope"></i></span>
</button>
<button class="submit _buttonPrimary" :disabled="!canPost" @click="post">{{ submitText }}<Fa :icon="reply ? faReply : renote ? faQuoteRight : faPaperPlane"/></button>
<button class="submit _buttonPrimary" :disabled="!canPost" @click="post">{{ submitText }}<i :class="reply ? 'fas fa-reply' : renote ? 'fas fa-quote-right' : 'fas fa-paper-plane'"></i></button>
</div>
</footer>
</div>
@ -48,8 +48,6 @@
<script lang="ts">
import { defineComponent, defineAsyncComponent } from 'vue';
import { faReply, faQuoteRight, faPaperPlane, faTimes, faUpload, faPollH, faGlobe, faHome, faUnlock, faEnvelope, faPlus, faPhotoVideo, faAt, faBiohazard, faPlug } from '@fortawesome/free-solid-svg-icons';
import { faEyeSlash, faLaughSquint } from '@fortawesome/free-regular-svg-icons';
import insertTextAtCursor from 'insert-text-at-cursor';
import { length } from 'stringz';
import { toASCII } from 'punycode/';
@ -138,7 +136,6 @@ export default defineComponent({
}
}),
postFormActions,
faReply, faQuoteRight, faPaperPlane, faTimes, faUpload, faPollH, faGlobe, faHome, faUnlock, faEnvelope, faEyeSlash, faLaughSquint, faPlus, faPhotoVideo, faAt, faBiohazard, faPlug
};
},
@ -767,7 +764,7 @@ export default defineComponent({
opacity: 0.7;
}
> [data-icon] {
> i {
margin-left: 6px;
}
}

14
src/client/ui/chat/side.vue
View File

@ -1,9 +1,9 @@
<template>
<div class="mrajymqm _narrow_" v-if="component">
<header class="header" @contextmenu.prevent.stop="onContextmenu">
<button class="_button" @click="back()" v-if="history.length > 0"><Fa :icon="faChevronLeft"/></button>
<button class="_button" @click="back()" v-if="history.length > 0"><i class="fas fa-chevron-left"></i></button>
<XHeader class="title" :info="pageInfo" :with-back="false" :center="false"/>
<button class="_button" @click="close()"><Fa :icon="faTimes"/></button>
<button class="_button" @click="close()"><i class="fas fa-times"></i></button>
</header>
<component :is="component" v-bind="props" :ref="changePage"/>
</div>
@ -11,7 +11,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { faTimes, faChevronLeft, faExpandAlt, faWindowMaximize, faExternalLinkAlt, faLink } from '@fortawesome/free-solid-svg-icons';
import XHeader from '../_common_/header.vue';
import * as os from '@client/os';
import copyToClipboard from '@client/scripts/copy-to-clipboard';
@ -39,7 +38,6 @@ export default defineComponent({
props: {},
pageInfo: null,
history: [],
faTimes, faChevronLeft,
};
},
@ -82,28 +80,28 @@ export default defineComponent({
type: 'label',
text: this.path,
}, {
icon: faExpandAlt,
icon: 'fas fa-expand-alt',
text: this.$ts.showInPage,
action: () => {
this.$router.push(this.path);
this.close();
}
}, {
icon: faWindowMaximize,
icon: 'fas fa-window-maximize',
text: this.$ts.openInWindow,
action: () => {
os.pageWindow(this.path);
this.close();
}
}, null, {
icon: faExternalLinkAlt,
icon: 'fas fa-external-link-alt',
text: this.$ts.openInNewTab,
action: () => {
window.open(this.url, '_blank');
this.close();
}
}, {
icon: faLink,
icon: 'fas fa-link',
text: this.$ts.copyLink,
action: () => {
copyToClipboard(this.url);

4
src/client/ui/chat/sub-note-content.vue
View File

@ -3,7 +3,7 @@
<div class="body">
<span v-if="note.isHidden" style="opacity: 0.5">({{ $ts.private }})</span>
<span v-if="note.deletedAt" style="opacity: 0.5">({{ $ts.deleted }})</span>
<MkA class="reply" v-if="note.replyId" :to="`/notes/${note.replyId}`"><Fa :icon="faReply"/></MkA>
<MkA class="reply" v-if="note.replyId" :to="`/notes/${note.replyId}`"><i class="fas fa-reply"></i></MkA>
<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
<MkA class="rp" v-if="note.renoteId" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
</div>
@ -20,7 +20,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { faReply } from '@fortawesome/free-solid-svg-icons';
import XPoll from '@client/components/poll.vue';
import XMediaList from '@client/components/media-list.vue';
import * as os from '@client/os';
@ -38,7 +37,6 @@ export default defineComponent({
},
data() {
return {
faReply
};
}
});

9
src/client/ui/deck.vue
View File

@ -22,8 +22,8 @@
/>
</template>
<button v-if="$i" class="nav _button" @click="showNav()"><Fa :icon="faBars"/><i v-if="navIndicated"><Fa :icon="faCircle"/></i></button>
<button v-if="$i" class="post _buttonPrimary" @click="post()"><Fa :icon="faPencilAlt"/></button>
<button v-if="$i" class="nav _button" @click="showNav()"><i class="fas fa-bars"></i><span v-if="navIndicated" class="indicator"><i class="fas fa-circle"></i></span></button>
<button v-if="$i" class="post _buttonPrimary" @click="post()"><i class="fas fa-pencil-alt"></i></button>
<XCommon/>
</div>
@ -31,8 +31,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { faPlus, faPencilAlt, faChevronLeft, faBars, faCircle } from '@fortawesome/free-solid-svg-icons';
import { } from '@fortawesome/free-regular-svg-icons';
import { v4 as uuid } from 'uuid';
import { host } from '@client/config';
import DeckColumnCore from '@client/ui/deck/column-core.vue';
@ -64,7 +62,6 @@ export default defineComponent({
host: host,
menuDef: sidebarDef,
wallpaper: localStorage.getItem('wallpaper') != null,
faPlus, faPencilAlt, faChevronLeft, faBars, faCircle
};
},
@ -219,7 +216,7 @@ export default defineComponent({
background: var(--X2);
}
> i {
> .indicator {
position: absolute;
top: 0;
left: 0;

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

@ -1,7 +1,7 @@
<template>
<XColumn :func="{ handler: setAntenna, title: $ts.selectAntenna }" :column="column" :is-stacked="isStacked">
<template #header>
<Fa :icon="faSatellite"/><span style="margin-left: 8px;">{{ column.name }}</span>
<i class="fas fa-satellite"></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')"/>
@ -10,7 +10,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { faSatellite, faCog } from '@fortawesome/free-solid-svg-icons';
import XColumn from './column.vue';
import XTimeline from '@client/components/timeline.vue';
import * as os from '@client/os';
@ -35,7 +34,6 @@ export default defineComponent({
data() {
return {
faSatellite
};
},

25
src/client/ui/deck/column.vue
View File

@ -15,14 +15,14 @@
@contextmenu.prevent.stop="onContextmenu"
>
<button class="toggleActive _button" @click="toggleActive" v-if="isStacked && !isMainColumn">
<template v-if="active"><Fa :icon="faAngleUp"/></template>
<template v-else><Fa :icon="faAngleDown"/></template>
<template v-if="active"><i class="fas fa-angle-up"></i></template>
<template v-else><i class="fas fa-angle-down"></i></template>
</button>
<div class="action">
<slot name="action"></slot>
</div>
<span class="header"><slot name="header"></slot></span>
<button v-if="func" class="menu _button" v-tooltip="func.title" @click.stop="func.handler"><Fa :icon="func.icon || faCog"/></button>
<button v-if="func" class="menu _button" v-tooltip="func.title" @click.stop="func.handler"><i :class="func.icon || 'fas fa-cog'"></i></button>
</header>
<div ref="body" v-show="active">
<slot></slot>
@ -32,8 +32,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown, faArrowRight, faArrowLeft, faPencilAlt, faCog } from '@fortawesome/free-solid-svg-icons';
import { faWindowMaximize, faTrashAlt, faWindowRestore } from '@fortawesome/free-regular-svg-icons';
import * as os from '@client/os';
import { updateColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownColumn, stackLeftColumn, popRightColumn, removeColumn, swapColumn } from './deck-store';
import { deckStore } from './deck-store';
@ -73,7 +71,6 @@ export default defineComponent({
dragging: false,
draghover: false,
dropready: false,
faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown, faCog,
};
},
@ -134,7 +131,7 @@ export default defineComponent({
getMenu() {
const items = [{
icon: faPencilAlt,
icon: 'fas fa-pencil-alt',
text: this.$ts.edit,
action: async () => {
const { canceled, result } = await os.form(this.column.name, {
@ -158,43 +155,43 @@ export default defineComponent({
updateColumn(this.column.id, result);
}
}, null, {
icon: faArrowLeft,
icon: 'fas fa-arrow-left',
text: this.$ts._deck.swapLeft,
action: () => {
swapLeftColumn(this.column.id);
}
}, {
icon: faArrowRight,
icon: 'fas fa-arrow-right',
text: this.$ts._deck.swapRight,
action: () => {
swapRightColumn(this.column.id);
}
}, this.isStacked ? {
icon: faArrowUp,
icon: 'fas fa-arrow-up',
text: this.$ts._deck.swapUp,
action: () => {
swapUpColumn(this.column.id);
}
} : undefined, this.isStacked ? {
icon: faArrowDown,
icon: 'fas fa-arrow-down',
text: this.$ts._deck.swapDown,
action: () => {
swapDownColumn(this.column.id);
}
} : undefined, null, {
icon: faWindowRestore,
icon: 'fas fa-window-restore',
text: this.$ts._deck.stackLeft,
action: () => {
stackLeftColumn(this.column.id);
}
}, this.isStacked ? {
icon: faWindowMaximize,
icon: 'fas fa-window-maximize',
text: this.$ts._deck.popRight,
action: () => {
popRightColumn(this.column.id);
}
} : undefined, null, {
icon: faTrashAlt,
icon: 'fas fa-trash-alt',
text: this.$ts.remove,
danger: true,
action: () => {

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

@ -1,6 +1,6 @@
<template>
<XColumn :column="column" :is-stacked="isStacked">
<template #header><Fa :icon="faEnvelope" style="margin-right: 8px;"/>{{ column.name }}</template>
<template #header><i class="fas fa-envelope" style="margin-right: 8px;"></i>{{ column.name }}</template>
<XNotes :pagination="pagination" @before="before()" @after="after()"/>
</XColumn>
@ -8,7 +8,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
import Progress from '@client/scripts/loading';
import XColumn from './column.vue';
import XNotes from '@client/components/notes.vue';
@ -40,7 +39,6 @@ export default defineComponent({
visibility: 'specified'
})
},
faEnvelope
}
},

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

@ -1,7 +1,7 @@
<template>
<XColumn :func="{ handler: setList, title: $ts.selectList }" :column="column" :is-stacked="isStacked">
<template #header>
<Fa :icon="faListUl"/><span style="margin-left: 8px;">{{ column.name }}</span>
<i class="fas fa-list-ul"></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')"/>
@ -10,7 +10,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { faListUl, faCog } from '@fortawesome/free-solid-svg-icons';
import XColumn from './column.vue';
import XTimeline from '@client/components/timeline.vue';
import * as os from '@client/os';
@ -35,7 +34,6 @@ export default defineComponent({
data() {
return {
faListUl
};
},

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

@ -16,7 +16,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { faWindowMaximize } from '@fortawesome/free-solid-svg-icons';
import XColumn from './column.vue';
import XNotes from '@client/components/notes.vue';
import XHeader from '@client/ui/_common_/header.vue';
@ -72,7 +71,7 @@ export default defineComponent({
type: 'label',
text: path,
}, {
icon: faWindowMaximize,
icon: 'fas fa-window-maximize',
text: this.$ts.openInWindow,
action: () => {
os.pageWindow(path);

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

@ -1,6 +1,6 @@
<template>
<XColumn :column="column" :is-stacked="isStacked">
<template #header><Fa :icon="faAt" style="margin-right: 8px;"/>{{ column.name }}</template>
<template #header><i class="fas fa-at" style="margin-right: 8px;"></i>{{ column.name }}</template>
<XNotes :pagination="pagination" @before="before()" @after="after()"/>
</XColumn>
@ -8,7 +8,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { faAt } from '@fortawesome/free-solid-svg-icons';
import Progress from '@client/scripts/loading';
import XColumn from './column.vue';
import XNotes from '@client/components/notes.vue';

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

@ -1,6 +1,6 @@
<template>
<XColumn :column="column" :is-stacked="isStacked" :func="{ handler: func, title: $ts.notificationSetting }">
<template #header><Fa :icon="faBell" style="margin-right: 8px;"/>{{ column.name }}</template>
<template #header><i class="fas fa-bell" style="margin-right: 8px;"></i>{{ column.name }}</template>
<XNotifications :include-types="column.includingTypes"/>
</XColumn>
@ -8,8 +8,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { faCog } from '@fortawesome/free-solid-svg-icons';
import { faBell } from '@fortawesome/free-regular-svg-icons';
import XColumn from './column.vue';
import XNotifications from '@client/components/notifications.vue';
import * as os from '@client/os';
@ -34,7 +32,6 @@ export default defineComponent({
data() {
return {
faBell
}
},

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

@ -1,16 +1,16 @@
<template>
<XColumn :func="{ handler: setType, title: $ts.timeline }" :column="column" :is-stacked="isStacked" :indicated="indicated" @change-active-state="onChangeActiveState">
<template #header>
<Fa v-if="column.tl === 'home'" :icon="faHome"/>
<Fa v-else-if="column.tl === 'local'" :icon="faComments"/>
<Fa v-else-if="column.tl === 'social'" :icon="faShareAlt"/>
<Fa v-else-if="column.tl === 'global'" :icon="faGlobe"/>
<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>
<span style="margin-left: 8px;">{{ column.name }}</span>
</template>
<div class="iwaalbte" v-if="disabled">
<p>
<Fa :icon="faMinusCircle"/>
<i class="fas fa-minus-circle"></i>
{{ $t('disabled-timeline.title') }}
</p>
<p class="desc">{{ $t('disabled-timeline.description') }}</p>
@ -21,7 +21,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { faMinusCircle, faHome, faComments, faShareAlt, faGlobe, faCog } from '@fortawesome/free-solid-svg-icons';
import XColumn from './column.vue';
import XTimeline from '@client/components/timeline.vue';
import * as os from '@client/os';
@ -49,7 +48,6 @@ export default defineComponent({
disabled: false,
indicated: false,
columnActive: true,
faMinusCircle, faHome, faComments, faShareAlt, faGlobe,
};
},

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

@ -1,6 +1,6 @@
<template>
<XColumn :func="{ handler: func, title: $ts.editWidgets }" :naked="true" :column="column" :is-stacked="isStacked">
<template #header><Fa :icon="faWindowMaximize" style="margin-right: 8px;"/>{{ column.name }}</template>
<template #header><i class="fas fa-window-maximize" style="margin-right: 8px;"></i>{{ column.name }}</template>
<div class="wtdtxvec">
<XWidgets :edit="edit" :widgets="column.widgets" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="edit = false"/>
@ -10,7 +10,6 @@
<script lang="ts">
import { defineComponent, defineAsyncComponent } from 'vue';
import { faWindowMaximize, faTimes, faCog, faPlus } from '@fortawesome/free-solid-svg-icons';
import XWidgets from '@client/components/widgets.vue';
import XColumn from './column.vue';
import { addColumnWidget, removeColumnWidget, setColumnWidgets, updateColumnWidget } from './deck-store';
@ -35,7 +34,6 @@ export default defineComponent({
data() {
return {
edit: false,
faWindowMaximize, faTimes, faPlus
};
},

14
src/client/ui/default.side.vue
View File

@ -2,10 +2,10 @@
<div class="qvzfzxam _narrow_" v-if="component">
<div class="container">
<header class="header" @contextmenu.prevent.stop="onContextmenu">
<button class="_button" @click="back()" v-if="history.length > 0"><Fa :icon="faChevronLeft"/></button>
<button class="_button" @click="back()" v-if="history.length > 0"><i class="fas fa-chevron-left"></i></button>
<button class="_button" style="pointer-events: none;" v-else><!-- マージンのバランスを取るためのダミー --></button>
<XHeader class="title" :info="pageInfo" :with-back="false"/>
<button class="_button" @click="close()"><Fa :icon="faTimes"/></button>
<button class="_button" @click="close()"><i class="fas fa-times"></i></button>
</header>
<component :is="component" v-bind="props" :ref="changePage"/>
</div>
@ -14,7 +14,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { faTimes, faChevronLeft, faExpandAlt, faWindowMaximize, faExternalLinkAlt, faLink } from '@fortawesome/free-solid-svg-icons';
import XHeader from './_common_/header.vue';
import * as os from '@client/os';
import copyToClipboard from '@client/scripts/copy-to-clipboard';
@ -42,7 +41,6 @@ export default defineComponent({
props: {},
pageInfo: null,
history: [],
faTimes, faChevronLeft,
};
},
@ -83,28 +81,28 @@ export default defineComponent({
type: 'label',
text: this.path,
}, {
icon: faExpandAlt,
icon: 'fas fa-expand-alt',
text: this.$ts.showInPage,
action: () => {
this.$router.push(this.path);
this.close();
}
}, {
icon: faWindowMaximize,
icon: 'fas fa-window-maximize',
text: this.$ts.openInWindow,
action: () => {
os.pageWindow(this.path);
this.close();
}
}, null, {
icon: faExternalLinkAlt,
icon: 'fas fa-external-link-alt',
text: this.$ts.openInNewTab,
action: () => {
window.open(this.url, '_blank');
this.close();
}
}, {
icon: faLink,
icon: 'fas fa-link',
text: this.$ts.copyLink,
action: () => {
copyToClipboard(this.url);

51
src/client/ui/default.sidebar.vue
View File

@ -5,30 +5,30 @@
</button>
<div class="post" @click="post">
<MkButton class="button" primary full>
<Fa :icon="faPencilAlt" fixed-width/><span class="text" v-if="!iconOnly">{{ $ts.note }}</span>
<i class="fas fa-pencil-alt fa-fw"></i><span class="text" v-if="!iconOnly">{{ $ts.note }}</span>
</MkButton>
</div>
<div class="divider"></div>
<MkA class="item index" active-class="active" to="/" exact>
<Fa :icon="faHome" fixed-width/><span class="text">{{ $ts.timeline }}</span>
<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
</MkA>
<template v-for="item in menu">
<div v-if="item === '-'" class="divider"></div>
<component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="item" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to">
<Fa :icon="menuDef[item].icon" fixed-width/><span class="text">{{ $ts[menuDef[item].title] }}</span>
<i v-if="menuDef[item].indicated"><Fa :icon="faCircle"/></i>
<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
</component>
</template>
<div class="divider"></div>
<button class="item _button" :class="{ active: $route.path === '/instance' || $route.path.startsWith('/instance/') }" v-if="$i.isAdmin || $i.isModerator" @click="oepnInstanceMenu">
<Fa :icon="faServer" fixed-width/><span class="text">{{ $ts.instance }}</span>
<i class="fas fa-server fa-fw"></i><span class="text">{{ $ts.instance }}</span>
</button>
<button class="item _button" @click="more">
<Fa :icon="faEllipsisH" fixed-width/><span class="text">{{ $ts.more }}</span>
<i v-if="otherNavItemIndicated"><Fa :icon="faCircle"/></i>
<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>
</button>
<MkA class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
<Fa :icon="faCog" fixed-width/><span class="text">{{ $ts.settings }}</span>
<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
</MkA>
<div class="divider"></div>
<div class="foo">
@ -40,8 +40,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { faGripVertical, faChevronLeft, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faListUl, faPlus, faUserClock, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer, faInfoCircle, faQuestionCircle, faProjectDiagram, faStream, faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
import { faBell, faEnvelope, faLaugh, faComments } from '@fortawesome/free-regular-svg-icons';
import { host } from '@client/config';
import { search } from '@client/scripts/search';
import * as os from '@client/os';
@ -65,7 +63,6 @@ export default defineComponent({
menuDef: sidebarDef,
iconOnly: false,
settingsWindowed: false,
faGripVertical, faChevronLeft, faComments, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faBell, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faEnvelope, faListUl, faPlus, faUserClock, faLaugh, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer, faProjectDiagram
};
},
@ -143,7 +140,7 @@ export default defineComponent({
to: `/@${ this.$i.username }`,
avatar: this.$i,
}, null, ...accountItemPromises, {
icon: faPlus,
icon: 'fas fa-plus',
text: this.$ts.addAcount,
action: () => {
os.modalMenu([{
@ -164,57 +161,57 @@ export default defineComponent({
type: 'link',
text: this.$ts.dashboard,
to: '/instance',
icon: faTachometerAlt,
icon: 'fas fa-tachometer-alt',
}, null, this.$i.isAdmin ? {
type: 'link',
text: this.$ts.settings,
to: '/instance/settings',
icon: faCog,
icon: 'fas fa-cog',
} : undefined, {
type: 'link',
text: this.$ts.customEmojis,
to: '/instance/emojis',
icon: faLaugh,
icon: 'fas fa-laugh',
}, {
type: 'link',
text: this.$ts.users,
to: '/instance/users',
icon: faUsers,
icon: 'fas fa-users',
}, {
type: 'link',
text: this.$ts.files,
to: '/instance/files',
icon: faCloud,
icon: 'fas fa-cloud',
}, {
type: 'link',
text: this.$ts.jobQueue,
to: '/instance/queue',
icon: faExchangeAlt,
icon: 'fas fa-exchange-alt',
}, {
type: 'link',
text: this.$ts.federation,
to: '/instance/federation',
icon: faGlobe,
icon: 'fas fa-globe',
}, {
type: 'link',
text: this.$ts.relays,
to: '/instance/relays',
icon: faProjectDiagram,
icon: 'fas fa-project-diagram',
}, {
type: 'link',
text: this.$ts.announcements,
to: '/instance/announcements',
icon: faBroadcastTower,
icon: 'fas fa-broadcast-tower',
}, {
type: 'link',
text: this.$ts.abuseReports,
to: '/instance/abuses',
icon: faExclamationCircle,
icon: 'fas fa-exclamation-circle',
}, {
type: 'link',
text: this.$ts.logs,
to: '/instance/logs',
icon: faStream,
icon: 'fas fa-stream',
}], ev.currentTarget || ev.target);
},
@ -289,7 +286,7 @@ export default defineComponent({
font-size: $ui-font-size * 1.1;
line-height: 3.7rem;
> [data-icon],
> i,
> .avatar {
margin-right: 0;
}
@ -344,11 +341,11 @@ export default defineComponent({
text-align: left;
box-sizing: border-box;
> [data-icon] {
> i {
width: 32px;
}
> [data-icon],
> i,
> .avatar {
margin-right: $avatar-margin;
}
@ -359,7 +356,7 @@ export default defineComponent({
vertical-align: middle;
}
> i {
> .indicator {
position: absolute;
top: 0;
left: 20px;

19
src/client/ui/default.vue
View File

@ -26,11 +26,11 @@
</div>
<div class="buttons" v-if="isMobile">
<button class="button nav _button" @click="showDrawerNav" ref="navButton"><Fa :icon="faBars"/><i v-if="navIndicated"><Fa :icon="faCircle"/></i></button>
<button class="button home _button" @click="$route.name === 'index' ? top() : $router.push('/')"><Fa :icon="faHome"/></button>
<button class="button notifications _button" @click="$router.push('/my/notifications')"><Fa :icon="faBell"/><i v-if="$i.hasUnreadNotification"><Fa :icon="faCircle"/></i></button>
<button class="button widget _button" @click="widgetsShowing = true"><Fa :icon="faLayerGroup"/></button>
<button class="button post _button" @click="post"><Fa :icon="faPencilAlt"/></button>
<button class="button nav _button" @click="showDrawerNav" ref="navButton"><i class="fas fa-bars"></i><span v-if="navIndicated" class="indicator"><i class="fas fa-circle"></i></span></button>
<button class="button home _button" @click="$route.name === 'index' ? top() : $router.push('/')"><i class="fas fa-home"></i></button>
<button class="button notifications _button" @click="$router.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="post"><i class="fas fa-pencil-alt"></i></button>
</div>
<XDrawerSidebar ref="drawerNav" class="sidebar" v-if="isMobile"/>
@ -53,8 +53,6 @@
<script lang="ts">
import { defineComponent, defineAsyncComponent } from 'vue';
import { faLayerGroup, faBars, faHome, faCircle, faWindowMaximize, faExpand, faPencilAlt, faCompress } from '@fortawesome/free-solid-svg-icons';
import { faBell } from '@fortawesome/free-regular-svg-icons';
import { instanceName } from '@client/config';
import { StickySidebar } from '@client/scripts/sticky-sidebar';
import XSidebar from './default.sidebar.vue';
@ -86,7 +84,6 @@ export default defineComponent({
widgetsShowing: false,
fullView: false,
wallpaper: localStorage.getItem('wallpaper') != null,
faLayerGroup, faBars, faBell, faHome, faCircle, faPencilAlt,
};
},
@ -175,13 +172,13 @@ export default defineComponent({
type: 'label',
text: path,
}, {
icon: this.fullView ? faCompress : faExpand,
icon: this.fullView ? 'fas fa-compress' : 'fas fa-expand',
text: this.fullView ? this.$ts.quitFullView : this.$ts.fullView,
action: () => {
this.fullView = !this.fullView;
}
}, {
icon: faWindowMaximize,
icon: 'fas fa-window-maximize',
text: this.$ts.openInWindow,
action: () => {
os.pageWindow(path);
@ -372,7 +369,7 @@ export default defineComponent({
background: var(--X2);
}
> i {
> .indicator {
position: absolute;
top: 0;
left: 0;

6
src/client/ui/default.widgets.vue
View File

@ -2,14 +2,13 @@
<div class="efzpzdvf">
<XWidgets class="widgets" :edit="editMode" :widgets="$store.reactiveState.widgets.value" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
<button v-if="editMode" @click="editMode = false" class="_textButton edit" style="font-size: 0.9em;"><Fa :icon="faCheck"/> {{ $ts.editWidgetsExit }}</button>
<button v-else @click="editMode = true" class="_textButton edit" style="font-size: 0.9em;"><Fa :icon="faPencilAlt"/> {{ $ts.editWidgets }}</button>
<button v-if="editMode" @click="editMode = false" class="_textButton edit" style="font-size: 0.9em;"><i class="fas fa-check"></i> {{ $ts.editWidgetsExit }}</button>
<button v-else @click="editMode = true" class="_textButton edit" style="font-size: 0.9em;"><i class="fas fa-pencil-alt"></i> {{ $ts.editWidgets }}</button>
</div>
</template>
<script lang="ts">
import { defineComponent, defineAsyncComponent } from 'vue';
import { faPencilAlt, faPlus, faBars, faTimes, faCheck } from '@fortawesome/free-solid-svg-icons';
import XWidgets from '@client/components/widgets.vue';
import * as os from '@client/os';
@ -23,7 +22,6 @@ export default defineComponent({
data() {
return {
editMode: false,
faPencilAlt, faPlus, faBars, faTimes, faCheck,
};
},

21
src/client/ui/universal.vue
View File

@ -27,14 +27,14 @@
</div>
<div class="buttons" :class="{ navHidden }">
<button class="button nav _button" @click="showNav" ref="navButton"><Fa :icon="faBars"/><i v-if="navIndicated"><Fa :icon="faCircle"/></i></button>
<button class="button home _button" @click="$route.name === 'index' ? top() : $router.push('/')"><Fa :icon="faHome"/></button>
<button class="button notifications _button" @click="$router.push('/my/notifications')"><Fa :icon="faBell"/><i v-if="$i.hasUnreadNotification"><Fa :icon="faCircle"/></i></button>
<button class="button widget _button" @click="widgetsShowing = true"><Fa :icon="faLayerGroup"/></button>
<button class="button post _button" @click="post"><Fa :icon="faPencilAlt"/></button>
<button class="button nav _button" @click="showNav" ref="navButton"><i class="fas fa-bars"></i><span v-if="navIndicated" class="indicator"><i class="fas fa-circle"></i></span></button>
<button class="button home _button" @click="$route.name === 'index' ? top() : $router.push('/')"><i class="fas fa-home"></i></button>
<button class="button notifications _button" @click="$router.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="post"><i class="fas fa-pencil-alt"></i></button>
</div>
<button class="widgetButton _button" :class="{ navHidden }" @click="widgetsShowing = true"><Fa :icon="faLayerGroup"/></button>
<button class="widgetButton _button" :class="{ navHidden }" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
<transition name="tray-back">
<div class="tray-back _modalBg"
@ -54,8 +54,6 @@
<script lang="ts">
import { defineComponent, defineAsyncComponent } from 'vue';
import { faLayerGroup, faBars, faHome, faCircle, faWindowMaximize, faColumns, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
import { faBell } from '@fortawesome/free-regular-svg-icons';
import { instanceName } from '@client/config';
import { StickySidebar } from '@client/scripts/sticky-sidebar';
import XSidebar from '@client/ui/_common_/sidebar.vue';
@ -93,7 +91,6 @@ export default defineComponent({
navHidden: false,
widgetsShowing: false,
wallpaper: localStorage.getItem('wallpaper') != null,
faLayerGroup, faBars, faBell, faHome, faCircle, faPencilAlt,
};
},
@ -201,13 +198,13 @@ export default defineComponent({
type: 'label',
text: path,
}, {
icon: faColumns,
icon: 'fas fa-columns',
text: this.$ts.openInSideView,
action: () => {
this.$refs.side.navigate(path);
}
}, {
icon: faWindowMaximize,
icon: 'fas fa-window-maximize',
text: this.$ts.openInWindow,
action: () => {
os.pageWindow(path);
@ -378,7 +375,7 @@ export default defineComponent({
background: var(--X2);
}
> i {
> .indicator {
position: absolute;
top: 0;
left: 0;

6
src/client/ui/universal.widgets.vue
View File

@ -2,14 +2,13 @@
<div class="efzpzdvf">
<XWidgets :edit="editMode" :widgets="$store.reactiveState.widgets.value" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
<button v-if="editMode" @click="editMode = false" class="_textButton" style="font-size: 0.9em;"><Fa :icon="faCheck"/> {{ $ts.editWidgetsExit }}</button>
<button v-else @click="editMode = true" class="_textButton" style="font-size: 0.9em;"><Fa :icon="faPencilAlt"/> {{ $ts.editWidgets }}</button>
<button v-if="editMode" @click="editMode = false" class="_textButton" style="font-size: 0.9em;"><i class="fas fa-check"></i> {{ $ts.editWidgetsExit }}</button>
<button v-else @click="editMode = true" class="_textButton" style="font-size: 0.9em;"><i class="fas fa-pencil-alt"></i> {{ $ts.editWidgets }}</button>
</div>
</template>
<script lang="ts">
import { defineComponent, defineAsyncComponent } from 'vue';
import { faPencilAlt, faPlus, faBars, faTimes, faCheck } from '@fortawesome/free-solid-svg-icons';
import XWidgets from '@client/components/widgets.vue';
import * as os from '@client/os';
@ -23,7 +22,6 @@ export default defineComponent({
data() {
return {
editMode: false,
faPencilAlt, faPlus, faBars, faTimes, faCheck,
};
},

1
src/client/ui/visitor/a.vue
View File

@ -41,7 +41,6 @@
<script lang="ts">
import { defineComponent, defineAsyncComponent } from 'vue';
import { } from '@fortawesome/free-solid-svg-icons';
import { host, instanceName } from '@client/config';
import { search } from '@client/scripts/search';
import * as os from '@client/os';

9
src/client/ui/visitor/b.vue
View File

@ -35,10 +35,10 @@
<transition name="tray">
<div v-if="showMenu" class="menu">
<MkA to="/" class="link" active-class="active"><Fa :icon="faHome" class="icon"/>{{ $ts.home }}</MkA>
<MkA to="/explore" class="link" active-class="active"><Fa :icon="faHashtag" class="icon"/>{{ $ts.explore }}</MkA>
<MkA to="/featured" class="link" active-class="active"><Fa :icon="faFireAlt" class="icon"/>{{ $ts.featured }}</MkA>
<MkA to="/channels" class="link" active-class="active"><Fa :icon="faSatelliteDish" class="icon"/>{{ $ts.channel }}</MkA>
<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="/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>
<div class="action">
<button class="_buttonPrimary" @click="signup()">{{ $ts.signup }}</button>
<button class="_button" @click="signin()">{{ $ts.login }}</button>
@ -50,7 +50,6 @@
<script lang="ts">
import { defineComponent, defineAsyncComponent } from 'vue';
import { } from '@fortawesome/free-solid-svg-icons';
import { host, instanceName } from '@client/config';
import { search } from '@client/scripts/search';
import * as os from '@client/os';

22
src/client/ui/visitor/header.vue
View File

@ -2,21 +2,21 @@
<div class="sqxihjet">
<div class="wide" v-if="narrow === false">
<div class="content">
<MkA to="/" class="link" active-class="active"><Fa :icon="faHome" class="icon"/>{{ $ts.home }}</MkA>
<MkA to="/explore" class="link" active-class="active"><Fa :icon="faHashtag" class="icon"/>{{ $ts.explore }}</MkA>
<MkA to="/featured" class="link" active-class="active"><Fa :icon="faFireAlt" class="icon"/>{{ $ts.featured }}</MkA>
<MkA to="/channels" class="link" active-class="active"><Fa :icon="faSatelliteDish" class="icon"/>{{ $ts.channel }}</MkA>
<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="/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>
<div class="page active link" v-if="info">
<div class="title">
<Fa v-if="info.icon" :icon="info.icon" :key="info.icon" class="icon"/>
<i v-if="info.icon" class="icon" :class="info.icon"></i>
<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="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>
<button class="_button action" v-if="info.action" @click.stop="info.action.handler"><Fa :icon="info.action.icon" :key="info.action.icon"/></button>
<button class="_button action" v-if="info.action" @click.stop="info.action.handler"><!-- TODO --></button>
</div>
<div class="right">
<button class="_button search" @click="search()"><Fa :icon="faSearch" class="icon"/><span>{{ $ts.search }}</span></button>
<button class="_button search" @click="search()"><i class="fas fa-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,16 +24,16 @@
</div>
<div class="narrow" v-else-if="narrow === true">
<button class="menu _button" @click="$parent.showMenu = true">
<Fa :icon="faBars" class="icon"/>
<i class="fas fa-bars icon"></i>
</button>
<div class="title" v-if="info">
<Fa v-if="info.icon" :icon="info.icon" :key="info.icon" class="icon"/>
<i v-if="info.icon" class="icon" :class="info.icon"></i>
<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="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>
<button class="action _button" v-if="info && info.action" @click.stop="info.action.handler">
<Fa :icon="info.action.icon" :key="info.action.icon" class="icon"/>
<!-- TODO -->
</button>
</div>
</div>
@ -41,7 +41,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { faSearch, faHome, faFireAlt, faHashtag, faSatelliteDish, faBars } from '@fortawesome/free-solid-svg-icons';
import XSigninDialog from '@client/components/signin-dialog.vue';
import XSignupDialog from '@client/components/signup-dialog.vue';
import * as os from '@client/os';
@ -58,7 +57,6 @@ export default defineComponent({
return {
narrow: null,
showMenu: false,
faSearch, faHome, faFireAlt, faHashtag, faSatelliteDish, faBars,
};
},

1
src/client/ui/visitor/kanban.vue
View File

@ -38,7 +38,6 @@
<script lang="ts">
import { defineComponent, defineAsyncComponent } from 'vue';
import { } from '@fortawesome/free-solid-svg-icons';
import { host, instanceName } from '@client/config';
import * as os from '@client/os';
import MkPagination from '@client/components/ui/pagination.vue';

3
src/client/ui/zen.vue
View File

@ -23,8 +23,6 @@
<script lang="ts">
import { defineComponent, defineAsyncComponent } from 'vue';
import { faLayerGroup, faBars, faHome, faCircle } from '@fortawesome/free-solid-svg-icons';
import { faBell } from '@fortawesome/free-regular-svg-icons';
import { host } from '@client/config';
import XHeader from './_common_/header.vue';
import XCommon from './_common_/common.vue';
@ -40,7 +38,6 @@ export default defineComponent({
return {
host: host,
pageInfo: null,
faLayerGroup, faBars, faBell, faHome, faCircle,
};
},