Mizah/Sharkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WIP] Use FontAwesome Component for Vue (#3127)

Browse source 
* wip

* Rename

* Clean up

* Clean up

* wip

* wip

* Enable tree shaking

* ✌️

* ✌️

* wip

* wip

* Clean up
This commit is contained in:
syuilo 2018-11-06 01:40:11 +09:00 • committed by GitHub
parent e640dbc501
commit 9f5dc2c0df
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
190 changed files with 924 additions and 865 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/client/app/desktop/views/pages/deck/deck.column.vue
View file

@ -11,13 +11,13 @@
@dragend="onDragend"
@contextmenu.prevent.stop="onContextmenu">
<button class="toggleActive" @click="toggleActive" v-if="isStacked">
<template v-if="active">%fa:angle-up%</template>
<template v-else>%fa:angle-down%</template>
<template v-if="active"><fa icon="angle-up"/></template>
<template v-else><fa icon="angle-down"/></template>
</button>
<slot name="header"></slot>
<span class="count" v-if="count > 0">({{ count }})</span>
<button v-if="!isTemporaryColumn" class="menu" ref="menu" @click.stop="showMenu">%fa:caret-down%</button>
<button v-else class="close" @click.stop="close">%fa:times%</button>
<button v-if="!isTemporaryColumn" class="menu" ref="menu" @click.stop="showMenu"><fa icon="caret-down"/></button>
<button v-else class="close" @click.stop="close"><fa icon="times"/></button>
</header>
<div ref="body" v-show="active">
<slot></slot>
@ -163,7 +163,7 @@ export default Vue.extend({
getMenu() {
const items = [{
icon: '%fa:pencil-alt%',
icon: 'pencil-alt',
text: '%i18n:common.deck.rename%',
action: () => {
(this as any).apis.input({
@ -175,43 +175,43 @@ export default Vue.extend({
});
}
}, null, {
icon: '%fa:arrow-left%',
icon: 'arrow-left',
text: '%i18n:common.deck.swap-left%',
action: () => {
this.$store.dispatch('settings/swapLeftDeckColumn', this.column.id);
}
}, {
icon: '%fa:arrow-right%',
icon: 'arrow-right',
text: '%i18n:common.deck.swap-right%',
action: () => {
this.$store.dispatch('settings/swapRightDeckColumn', this.column.id);
}
}, this.isStacked ? {
icon: '%fa:arrow-up%',
icon: 'arrow-up',
text: '%i18n:common.deck.swap-up%',
action: () => {
this.$store.dispatch('settings/swapUpDeckColumn', this.column.id);
}
} : undefined, this.isStacked ? {
icon: '%fa:arrow-down%',
icon: 'arrow-down',
text: '%i18n:common.deck.swap-down%',
action: () => {
this.$store.dispatch('settings/swapDownDeckColumn', this.column.id);
}
} : undefined, null, {
icon: '%fa:window-restore R%',
icon: ['far', 'window-restore'],
text: '%i18n:common.deck.stack-left%',
action: () => {
this.$store.dispatch('settings/stackLeftDeckColumn', this.column.id);
}
}, this.isStacked ? {
icon: '%fa:window-maximize R%',
icon: ['far', 'window-maximize'],
text: '%i18n:common.deck.pop-right%',
action: () => {
this.$store.dispatch('settings/popRightDeckColumn', this.column.id);
}
} : undefined, null, {
icon: '%fa:trash-alt R%',
icon: ['far', 'trash-alt'],
text: '%i18n:common.deck.remove%',
action: () => {
this.$store.dispatch('settings/removeDeckColumn', this.column.id);
@ -382,7 +382,7 @@ export default Vue.extend({
box-shadow 0 3px 0 0 var(--primary)
> span
[data-fa]
[data-icon]
margin-right 8px
> .count

2
src/client/app/desktop/views/pages/deck/deck.direct-column.vue
View file

@ -1,6 +1,6 @@
<template>
<x-column :name="name" :column="column" :is-stacked="isStacked">
<span slot="header">%fa:envelope R%{{ name }}</span>
<span slot="header"><fa :icon="['far', 'envelope']"/>{{ name }}</span>
<x-direct/>
</x-column>

2
src/client/app/desktop/views/pages/deck/deck.hashtag-column.vue
View file

@ -1,7 +1,7 @@
<template>
<x-column>
<span slot="header">
%fa:hashtag%<span>{{ tag }}</span>
<fa icon="hashtag"/><span>{{ tag }}</span>
</span>
<div class="xroyrflcmhhtmlwmyiwpfqiirqokfueb">

2
src/client/app/desktop/views/pages/deck/deck.mentions-column.vue
View file

@ -1,6 +1,6 @@
<template>
<x-column :name="name" :column="column" :is-stacked="isStacked">
<span slot="header">%fa:at%{{ name }}</span>
<span slot="header"><fa icon="at"/>{{ name }}</span>
<x-mentions ref="tl"/>
</x-column>

4
src/client/app/desktop/views/pages/deck/deck.note-column.vue
View file

@ -1,13 +1,13 @@
<template>
<x-column>
<span slot="header">
%fa:comment-alt R%<span>{{ title }}</span>
<fa :icon="['far', 'comment-alt']"/><span>{{ title }}</span>
</span>
<div class="rvtscbadixhhbsczoorqoaygovdeecsx" v-if="note">
<div class="is-remote" v-if="note.user.host != null">
<details>
<summary>%fa:exclamation-triangle% %i18n:common.is-remote-post%</summary>
<summary><fa icon="exclamation-triangle"/> %i18n:common.is-remote-post%</summary>
<a :href="note.url || note.uri" target="_blank">%i18n:common.view-on-remote%</a>
</details>
</div>

8
src/client/app/desktop/views/pages/deck/deck.notes.vue
View file

@ -21,8 +21,8 @@
:media-view="mediaView"
:mini="true"/>
<p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
<span>%fa:angle-up%{{ note._datetext }}</span>
<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
<span><fa icon="angle-up"/>{{ note._datetext }}</span>
<span><fa icon="angle-down"/>{{ _notes[i + 1]._datetext }}</span>
</p>
</template>
</div>
@ -31,7 +31,7 @@
<footer v-if="more">
<button @click="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
<template v-if="!moreFetching">%i18n:@load-more%</template>
<template v-if="moreFetching">%fa:spinner .pulse .fw%</template>
<template v-if="moreFetching"><fa icon="spinner .pulse" fixed-width/></template>
</button>
</footer>
</div>
@ -236,7 +236,7 @@ export default Vue.extend({
span
margin 0 16px
[data-fa]
[data-icon]
margin-right 8px
> footer

18
src/client/app/desktop/views/pages/deck/deck.notification.vue
View file

@ -9,8 +9,8 @@
<mk-time :time="notification.createdAt"/>
</header>
<router-link class="note-ref" :to="notification.note | notePage">
%fa:quote-left%{{ getNoteSummary(notification.note) }}
%fa:quote-right%
<fa icon="quote-left"/>{{ getNoteSummary(notification.note) }}
<fa icon="quote-right"/>
</router-link>
</div>
</div>
@ -19,12 +19,12 @@
<mk-avatar class="avatar" :user="notification.user"/>
<div>
<header>
%fa:retweet%
<fa icon="retweet"/>
<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
<mk-time :time="notification.createdAt"/>
</header>
<router-link class="note-ref" :to="notification.note | notePage">
%fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right%
<fa icon="quote-left"/>{{ getNoteSummary(notification.note.renote) }}<fa icon="quote-right"/>
</router-link>
</div>
</div>
@ -33,7 +33,7 @@
<mk-avatar class="avatar" :user="notification.user"/>
<div>
<header>
%fa:user-plus%
<fa icon="user-plus"/>
<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
<mk-time :time="notification.createdAt"/>
</header>
@ -44,7 +44,7 @@
<mk-avatar class="avatar" :user="notification.user"/>
<div>
<header>
%fa:user-clock%
<fa icon="user-clock"/>
<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
<mk-time :time="notification.createdAt"/>
</header>
@ -55,12 +55,12 @@
<mk-avatar class="avatar" :user="notification.user"/>
<div>
<header>
%fa:chart-pie%
<fa icon="chart-pie"/>
<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
<mk-time :time="notification.createdAt"/>
</header>
<router-link class="note-ref" :to="notification.note | notePage">
%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
<fa icon="quote-left"/>{{ getNoteSummary(notification.note) }}<fa icon="quote-right"/>
</router-link>
</div>
</div>
@ -151,7 +151,7 @@ export default Vue.extend({
> .note-ref
color var(--noteText)
[data-fa]
[data-icon]
font-size 1em
font-weight normal
font-style normal

2
src/client/app/desktop/views/pages/deck/deck.notifications-column.vue
View file

@ -1,6 +1,6 @@
<template>
<x-column :name="name" :column="column" :is-stacked="isStacked">
<span slot="header">%fa:bell R%{{ name }}</span>
<span slot="header"><fa :icon="['far', 'bell']"/>{{ name }}</span>
<x-notifications/>
</x-column>

10
src/client/app/desktop/views/pages/deck/deck.notifications.vue
View file

@ -11,13 +11,13 @@
<template v-for="(notification, i) in _notifications">
<x-notification class="notification" :notification="notification" :key="notification.id"/>
<p class="date" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date" :key="notification.id + '-time'">
<span>%fa:angle-up%{{ notification._datetext }}</span>
<span>%fa:angle-down%{{ _notifications[i + 1]._datetext }}</span>
<span><fa icon="angle-up"/>{{ notification._datetext }}</span>
<span><fa icon="angle-down"/>{{ _notifications[i + 1]._datetext }}</span>
</p>
</template>
</component>
<button class="more" :class="{ fetching: fetchingMoreNotifications }" v-if="moreNotifications" @click="fetchMoreNotifications" :disabled="fetchingMoreNotifications">
<template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template>{{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:@more%' }}
<template v-if="fetchingMoreNotifications"><fa icon="spinner .pulse" fixed-width/></template>{{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:@more%' }}
</button>
<p class="empty" v-if="notifications.length == 0 && !fetching">%i18n:@empty%</p>
</div>
@ -188,7 +188,7 @@ export default Vue.extend({
span
margin 0 16px
i
[data-icon]
margin-right 8px
> .more
@ -207,7 +207,7 @@ export default Vue.extend({
&.fetching
cursor wait
> [data-fa]
> [data-icon]
margin-right 4px
> .empty

14
src/client/app/desktop/views/pages/deck/deck.tl-column.vue
View file

@ -1,12 +1,12 @@
<template>
<x-column :menu="menu" :name="name" :column="column" :is-stacked="isStacked">
<span slot="header">
<template v-if="column.type == 'home'">%fa:home%</template>
<template v-if="column.type == 'local'">%fa:R comments%</template>
<template v-if="column.type == 'hybrid'">%fa:share-alt%</template>
<template v-if="column.type == 'global'">%fa:globe%</template>
<template v-if="column.type == 'list'">%fa:list%</template>
<template v-if="column.type == 'hashtag'">%fa:hashtag%</template>
<template v-if="column.type == 'home'"><fa icon="home"/></template>
<template v-if="column.type == 'local'"><fa :icon="['far', 'comments']"/></template>
<template v-if="column.type == 'hybrid'"><fa icon="share-alt"/></template>
<template v-if="column.type == 'global'"><fa icon="globe"/></template>
<template v-if="column.type == 'list'"><fa icon="list"/></template>
<template v-if="column.type == 'hashtag'"><fa icon="hashtag"/></template>
<span>{{ name }}</span>
</span>
@ -66,7 +66,7 @@ export default Vue.extend({
return {
edit: false,
menu: [{
icon: '%fa:cog%',
icon: 'cog',
text: '%i18n:@edit%',
action: () => {
this.edit = !this.edit;

28
src/client/app/desktop/views/pages/deck/deck.user-column.vue
View file

@ -1,19 +1,19 @@
<template>
<x-column>
<span slot="header">
%fa:user%<span>{{ title }}</span>
<fa icon="user"/><span>{{ title }}</span>
</span>
<div class="zubukjlciycdsyynicqrnlsmdwmymzqu" v-if="user">
<div class="is-remote" v-if="user.host != null">
<details>
<summary>%fa:exclamation-triangle% %i18n:common.is-remote-user%</summary>
<summary><fa icon="exclamation-triangle"/> %i18n:common.is-remote-user%</summary>
<a :href="user.url || user.uri" target="_blank">%i18n:common.view-on-remote%</a>
</details>
</div>
<header :style="bannerStyle">
<div>
<button class="menu" @click="menu" ref="menu">%fa:ellipsis-h%</button>
<button class="menu" @click="menu" ref="menu"><fa icon="ellipsis-h"/></button>
<mk-follow-button v-if="$store.getters.isSignedIn && user.id != $store.state.i.id" :user="user" class="follow"/>
<mk-avatar class="avatar" :user="user" :disable-preview="true"/>
<span class="name">{{ user | userName }}</span>
@ -40,17 +40,17 @@
</div>
</div>
<div class="pinned" v-if="user.pinnedNotes && user.pinnedNotes.length > 0">
<p class="caption" @click="toggleShowPinned">%fa:thumbtack% %i18n:@pinned-notes%</p>
<span class="angle" v-if="showPinned">%fa:angle-up%</span>
<span class="angle" v-else>%fa:angle-down%</span>
<p class="caption" @click="toggleShowPinned"><fa icon="thumbtack"/> %i18n:@pinned-notes%</p>
<span class="angle" v-if="showPinned"><fa icon="angle-up"/></span>
<span class="angle" v-else><fa icon="angle-down"/></span>
<div class="notes" v-show="showPinned">
<x-note v-for="n in user.pinnedNotes" :key="n.id" :note="n" :mini="true"/>
</div>
</div>
<div class="images" v-if="images.length > 0">
<p class="caption" @click="toggleShowImages">%fa:images R% %i18n:@images%</p>
<span class="angle" v-if="showImages">%fa:angle-up%</span>
<span class="angle" v-else>%fa:angle-down%</span>
<p class="caption" @click="toggleShowImages"><fa :icon="['far', 'images']"/> %i18n:@images%</p>
<span class="angle" v-if="showImages"><fa icon="angle-up"/></span>
<span class="angle" v-else><fa icon="angle-down"/></span>
<div v-show="showImages">
<router-link v-for="image in images"
:style="`background-image: url(${image.thumbnailUrl})`"
@ -61,15 +61,15 @@
</div>
</div>
<div class="activity">
<p class="caption" @click="toggleShowActivity">%fa:chart-bar R% %i18n:@activity%</p>
<span class="angle" v-if="showActivity">%fa:angle-up%</span>
<span class="angle" v-else>%fa:angle-down%</span>
<p class="caption" @click="toggleShowActivity"><fa :icon="['far', 'chart-bar']"/> %i18n:@activity%</p>
<span class="angle" v-if="showActivity"><fa icon="angle-up"/></span>
<span class="angle" v-else><fa icon="angle-down"/></span>
<div v-show="showActivity">
<div ref="chart"></div>
</div>
</div>
<div class="tl">
<p class="caption">%fa:comment-alt R% %i18n:@timeline%</p>
<p class="caption"><fa :icon="['far', 'comment-alt']"/> %i18n:@timeline%</p>
<div>
<x-notes ref="timeline" :more="existMore ? fetchMoreNotes : null"/>
</div>
@ -294,7 +294,7 @@ export default Vue.extend({
menu() {
let menu = [{
icon: '%fa:list%',
icon: 'list',
text: '%i18n:@push-to-a-list%',
action: () => {
const w = (this as any).os.new(MkUserListsWindow);

22
src/client/app/desktop/views/pages/deck/deck.vue
View file

@ -14,7 +14,7 @@
<x-note-column v-else-if="temporaryColumn.type == 'note'" :note-id="temporaryColumn.noteId" :key="temporaryColumn.noteId"/>
<x-hashtag-column v-else-if="temporaryColumn.type == 'tag'" :tag="temporaryColumn.tag" :key="temporaryColumn.tag"/>
</template>
<button ref="add" @click="add" title="%i18n:common.deck.add-column%">%fa:plus%</button>
<button ref="add" @click="add" title="%i18n:common.deck.add-column%"><fa icon="plus"/></button>
</div>
</mk-ui>
</template>
@ -182,7 +182,7 @@ export default Vue.extend({
source: this.$refs.add,
compact: true,
items: [{
icon: '%fa:home%',
icon: 'home',
text: '%i18n:common.deck.home%',
action: () => {
this.$store.dispatch('settings/addDeckColumn', {
@ -191,7 +191,7 @@ export default Vue.extend({
});
}
}, {
icon: '%fa:comments R%',
icon: ['far', 'comments'],
text: '%i18n:common.deck.local%',
action: () => {
this.$store.dispatch('settings/addDeckColumn', {
@ -200,7 +200,7 @@ export default Vue.extend({
});
}
}, {
icon: '%fa:share-alt%',
icon: 'share-alt',
text: '%i18n:common.deck.hybrid%',
action: () => {
this.$store.dispatch('settings/addDeckColumn', {
@ -209,7 +209,7 @@ export default Vue.extend({
});
}
}, {
icon: '%fa:globe%',
icon: 'globe',
text: '%i18n:common.deck.global%',
action: () => {
this.$store.dispatch('settings/addDeckColumn', {
@ -218,7 +218,7 @@ export default Vue.extend({
});
}
}, {
icon: '%fa:at%',
icon: 'at',
text: '%i18n:common.deck.mentions%',
action: () => {
this.$store.dispatch('settings/addDeckColumn', {
@ -227,7 +227,7 @@ export default Vue.extend({
});
}
}, {
icon: '%fa:envelope R%',
icon: ['far', 'envelope'],
text: '%i18n:common.deck.direct%',
action: () => {
this.$store.dispatch('settings/addDeckColumn', {
@ -236,7 +236,7 @@ export default Vue.extend({
});
}
}, {
icon: '%fa:list%',
icon: 'list',
text: '%i18n:common.deck.list%',
action: () => {
const w = (this as any).os.new(MkUserListsWindow);
@ -250,7 +250,7 @@ export default Vue.extend({
});
}
}, {
icon: '%fa:hashtag%',
icon: 'hashtag',
text: '%i18n:common.deck.hashtag%',
action: () => {
(this as any).apis.input({
@ -264,7 +264,7 @@ export default Vue.extend({
});
}
}, {
icon: '%fa:bell R%',
icon: ['far', 'bell'],
text: '%i18n:common.deck.notifications%',
action: () => {
this.$store.dispatch('settings/addDeckColumn', {
@ -273,7 +273,7 @@ export default Vue.extend({
});
}
}, {
icon: '%fa:calculator%',
icon: 'calculator',
text: '%i18n:common.deck.widgets%',
action: () => {
this.$store.dispatch('settings/addDeckColumn', {

6
src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
View file

@ -1,6 +1,6 @@
<template>
<x-column :menu="menu" :naked="true" :narrow="true" :name="name" :column="column" :is-stacked="isStacked" class="wtdtxvecapixsepjtcupubtsmometobz">
<span slot="header">%fa:calculator%{{ name }}</span>
<span slot="header"><fa icon="calculator"/>{{ name }}</span>
<div class="gqpwvtwtprsbmnssnbicggtwqhmylhnq">
<template v-if="edit">
@ -37,7 +37,7 @@
@sort="onWidgetSort"
>
<div v-for="widget in column.widgets" class="customize-container" :key="widget.id" @contextmenu.stop.prevent="widgetFunc(widget.id)">
<button class="remove" @click="removeWidget(widget)">%fa:times%</button>
<button class="remove" @click="removeWidget(widget)"><fa icon="times"/></button>
<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" platform="deck"/>
</div>
</x-draggable>
@ -89,7 +89,7 @@ export default Vue.extend({
created() {
this.menu = [{
icon: '%fa:cog%',
icon: 'cog',
text: '%i18n:@edit%',
action: () => {
this.edit = !this.edit;

4
src/client/app/desktop/views/pages/note.vue
View file

@ -3,8 +3,8 @@
<main v-if="!fetching">
<mk-note-detail :note="note"/>
<footer>
<router-link v-if="note.next" :to="note.next">%fa:angle-left% %i18n:@next%</router-link>
<router-link v-if="note.prev" :to="note.prev">%i18n:@prev% %fa:angle-right%</router-link>
<router-link v-if="note.next" :to="note.next"><fa icon="angle-left"/> %i18n:@next%</router-link>
<router-link v-if="note.prev" :to="note.prev">%i18n:@prev% <fa icon="angle-right"/></router-link>
</footer>
</main>
</mk-ui>

7
src/client/app/desktop/views/pages/search.vue
View file

@ -4,7 +4,7 @@
<h1>{{ q }}</h1>
</header>
<p :class="$style.notAvailable" v-if="!fetching && notAvailable">%i18n:@not-available%</p>
<p :class="$style.empty" v-if="!fetching && empty">%fa:search% {{ '%i18n:not-found%'.split('{}')[0] }}{{ q }}{{ '%i18n:not-found%'.split('{}')[1] }}</p>
<p :class="$style.empty" v-if="!fetching && empty"><fa icon="search"/> {{ '%i18n:not-found%'.split('{}')[0] }}{{ q }}{{ '%i18n:not-found%'.split('{}')[1] }}</p>
<mk-notes ref="timeline" :class="$style.notes" :more="existMore ? more : null"/>
</mk-ui>
</template>
@ -124,13 +124,12 @@ export default Vue.extend({
text-align center
color #999
> [data-fa]
> [data-icon]
display block
margin-bottom 16px
font-size 3em
color #ccc
.notAvailable
display block
margin 0 auto
@ -139,7 +138,7 @@ export default Vue.extend({
text-align center
color #999
> [data-fa]
> [data-icon]
display block
margin-bottom 16px
font-size 3em

2
src/client/app/desktop/views/pages/selectdrive.vue
View file

@ -6,7 +6,7 @@
@change-selection="onChangeSelection"
/>
<footer>
<button class="upload" title="%i18n:@upload%" @click="upload">%fa:upload%</button>
<button class="upload" title="%i18n:@upload%" @click="upload"><fa icon="upload"/></button>
<button class="cancel" @click="close">%i18n:@cancel%</button>
<button class="ok" @click="ok">%i18n:@ok%</button>
</footer>

2
src/client/app/desktop/views/pages/share.vue
View file

@ -4,7 +4,7 @@
<div>
<mk-signin v-if="!$store.getters.isSignedIn"/>
<mk-post-form v-else-if="!posted" :initial-text="text" :instant="true" @posted="posted = true"/>
<p v-if="posted" class="posted">%fa:check%</p>
<p v-if="posted" class="posted"><fa icon="check"/></p>
</div>
<button v-if="posted" class="ui button" @click="close">%i18n:common.close%</button>
</div>

4
src/client/app/desktop/views/pages/tag.vue
View file

@ -3,7 +3,7 @@
<header :class="$style.header">
<h1>#{{ $route.params.tag }}</h1>
</header>
<p :class="$style.empty" v-if="!fetching && empty">%fa:search% {{ '%i18n:no-posts-found%'.split('{}')[0] }}{{ q }}{{ '%i18n:no-posts-found%'.split('{}')[1] }}</p>
<p :class="$style.empty" v-if="!fetching && empty"><fa icon="search"/> {{ '%i18n:no-posts-found%'.split('{}')[0] }}{{ q }}{{ '%i18n:no-posts-found%'.split('{}')[1] }}</p>
<mk-notes ref="timeline" :class="$style.notes" :more="existMore ? more : null"/>
</mk-ui>
</template>
@ -113,7 +113,7 @@ export default Vue.extend({
text-align center
color #999
> [data-fa]
> [data-icon]
display block
margin-bottom 16px
font-size 3em

4
src/client/app/desktop/views/pages/user/user.followers-you-know.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="vahgrswmbzfdlmomxnqftuueyvwaafth">
<p class="title">%fa:users%%i18n:@title%</p>
<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:@loading%<mk-ellipsis/></p>
<p class="title"><fa icon="users"/>%i18n:@title%</p>
<p class="initializing" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:@loading%<mk-ellipsis/></p>
<div v-if="!fetching && users.length > 0">
<router-link v-for="user in users" :to="user | userPage" :key="user.id">
<img :src="user.avatarUrl" :alt="user | userName" v-user-preview="user.id"/>

4
src/client/app/desktop/views/pages/user/user.friends.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="hozptpaliadatkehcmcayizwzwwctpbc">
<p class="title">%fa:users%%i18n:@title%</p>
<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:@loading%<mk-ellipsis/></p>
<p class="title"><fa icon="users"/>%i18n:@title%</p>
<p class="initializing" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:@loading%<mk-ellipsis/></p>
<template v-if="!fetching && users.length != 0">
<div class="user" v-for="friend in users">
<mk-avatar class="avatar" :user="friend"/>

2
src/client/app/desktop/views/pages/user/user.github.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="aqooishiizumijmihokohinatamihoaz">
<span>%fa:B github%<a :href="`https://github.com/${user.github.login}`" target="_blank">@{{ user.github.login }}</a></span>
<span><fa :icon="['fab', 'github']"/><a :href="`https://github.com/${user.github.login}`" target="_blank">@{{ user.github.login }}</a></span>
</div>
</template>

6
src/client/app/desktop/views/pages/user/user.header.vue
View file

@ -7,7 +7,7 @@
<p class="name">{{ user | userName }}</p>
<div>
<span class="username"><mk-acct :user="user" :detail="true" /></span>
<span v-if="user.isBot" title="%i18n:@is-bot%">%fa:robot%</span>
<span v-if="user.isBot" title="%i18n:@is-bot%"><fa icon="robot"/></span>
</div>
</div>
</div>
@ -17,8 +17,8 @@
<misskey-flavored-markdown v-if="user.description" :text="user.description" :i="$store.state.i"/>
</div>
<div class="info">
<span class="location" v-if="user.host === null && user.profile.location">%fa:map-marker% {{ user.profile.location }}</span>
<span class="birthday" v-if="user.host === null && user.profile.birthday">%fa:birthday-cake% {{ user.profile.birthday.replace('-', '%i18n:@year%').replace('-', '%i18n:@month%') + '%i18n:@day%' }} ({{ age }}%i18n:@years-old%)</span>
<span class="location" v-if="user.host === null && user.profile.location"><fa icon="map-marker"/> {{ user.profile.location }}</span>
<span class="birthday" v-if="user.host === null && user.profile.birthday"><fa icon="birthday-cake"/> {{ user.profile.birthday.replace('-', '%i18n:@year%').replace('-', '%i18n:@month%') + '%i18n:@day%' }} ({{ age }}%i18n:@years-old%)</span>
</div>
<div class="status">
<span class="notes-count"><b>{{ user.notesCount | number }}</b>%i18n:@posts%</span>

4
src/client/app/desktop/views/pages/user/user.photos.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="dzsuvbsrrrwobdxifudxuefculdfiaxd">
<p class="title">%fa:camera%%i18n:@title%</p>
<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:@loading%<mk-ellipsis/></p>
<p class="title"><fa icon="camera"/>%i18n:@title%</p>
<p class="initializing" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:@loading%<mk-ellipsis/></p>
<div class="stream" v-if="!fetching && images.length > 0">
<div v-for="image in images" class="img"
:style="`background-image: url(${image.thumbnailUrl})`"

14
src/client/app/desktop/views/pages/user/user.profile.vue
View file

@ -4,20 +4,20 @@
<mk-follow-button :user="user" size="big"/>
<p class="followed" v-if="user.isFollowed">%i18n:@follows-you%</p>
<p class="stalk" v-if="user.isFollowing">
<span v-if="user.isStalking">%i18n:@stalking% <a @click="unstalk">%fa:meh% %i18n:@unstalk%</a></span>
<span v-if="!user.isStalking"><a @click="stalk">%fa:user-secret% %i18n:@stalk%</a></span>
<span v-if="user.isStalking">%i18n:@stalking% <a @click="unstalk"><fa icon="meh"/> %i18n:@unstalk%</a></span>
<span v-if="!user.isStalking"><a @click="stalk"><fa icon="user-secret"/> %i18n:@stalk%</a></span>
</p>
</div>
<div class="action-form">
<ui-button @click="user.isMuted ? unmute() : mute()" v-if="$store.state.i.id != user.id">
<span v-if="user.isMuted">%fa:eye% %i18n:@unmute%</span>
<span v-else>%fa:eye-slash% %i18n:@mute%</span>
<span v-if="user.isMuted"><fa icon="eye"/> %i18n:@unmute%</span>
<span v-else><fa icon="eye-slash"/> %i18n:@mute%</span>
</ui-button>
<ui-button @click="user.isBlocking ? unblock() : block()" v-if="$store.state.i.id != user.id">
<span v-if="user.isBlocking">%fa:user% %i18n:@unblock%</span>
<span v-else>%fa:user-slash% %i18n:@block%</span>
<span v-if="user.isBlocking"><fa icon="user"/> %i18n:@unblock%</span>
<span v-else><fa icon="user-slash"/> %i18n:@block%</span>
</ui-button>
<ui-button @click="list">%fa:list% %i18n:@push-to-a-list%</ui-button>
<ui-button @click="list"><fa icon="list"/> %i18n:@push-to-a-list%</ui-button>
</div>
</div>
</template>

10
src/client/app/desktop/views/pages/user/user.timeline.vue
View file

@ -1,12 +1,12 @@
<template>
<div class="oh5y2r7l5lx8j6jj791ykeiwgihheguk">
<header>
<span :data-active="mode == 'default'" @click="mode = 'default'">%fa:comment-alt R% %i18n:@default%</span>
<span :data-active="mode == 'with-replies'" @click="mode = 'with-replies'">%fa:comments% %i18n:@with-replies%</span>
<span :data-active="mode == 'with-media'" @click="mode = 'with-media'">%fa:images% %i18n:@with-media%</span>
<span :data-active="mode == 'default'" @click="mode = 'default'"><fa :icon="['far', 'comment-alt']"/> %i18n:@default%</span>
<span :data-active="mode == 'with-replies'" @click="mode = 'with-replies'"><fa icon="comments"/> %i18n:@with-replies%</span>
<span :data-active="mode == 'with-media'" @click="mode = 'with-media'"><fa icon="images"/> %i18n:@with-media%</span>
</header>
<mk-notes ref="timeline" :more="existMore ? more : null">
<p class="empty" slot="empty">%fa:R comments%%i18n:@empty%</p>
<p class="empty" slot="empty"><fa :icon="['far', 'comments']"/>%i18n:@empty%</p>
</mk-notes>
</div>
</template>
@ -157,7 +157,7 @@ export default Vue.extend({
text-align center
color #999
> [data-fa]
> [data-icon]
display block
margin-bottom 16px
font-size 3em

2
src/client/app/desktop/views/pages/user/user.twitter.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="adsvaidqfznoartcbplullnejvxjphcn">
<span>%fa:B twitter%<a :href="`https://twitter.com/${user.twitter.screenName}`" target="_blank">@{{ user.twitter.screenName }}</a></span>
<span><fa :icon="['fab', 'twitter']"/><a :href="`https://twitter.com/${user.twitter.screenName}`" target="_blank">@{{ user.twitter.screenName }}</a></span>
</div>
</template>

4
src/client/app/desktop/views/pages/user/user.vue
View file

@ -1,8 +1,8 @@
<template>
<mk-ui>
<div class="xygkxeaeontfaokvqmiblezmhvhostak" v-if="!fetching">
<div class="is-suspended" v-if="user.isSuspended">%fa:exclamation-triangle% %i18n:@is-suspended%</div>
<div class="is-remote" v-if="user.host">%fa:exclamation-triangle% %i18n:common.is-remote-user%<a :href="user.url || user.uri" target="_blank">%i18n:common.view-on-remote%</a></div>
<div class="is-suspended" v-if="user.isSuspended"><fa icon="exclamation-triangle"/> %i18n:@is-suspended%</div>
<div class="is-remote" v-if="user.host != null"><fa icon="exclamation-triangle"/> %i18n:common.is-remote-user%<a :href="user.url || user.uri" target="_blank">%i18n:common.view-on-remote%</a></div>
<main>
<div class="main">
<x-header :user="user"/>

16
src/client/app/desktop/views/pages/welcome.vue
View file

@ -3,8 +3,8 @@
<div class="banner" :style="{ backgroundImage: banner ? `url(${banner})` : null }"></div>
<button @click="dark">
<template v-if="$store.state.device.darkmode">%fa:moon%</template>
<template v-else>%fa:R moon%</template>
<template v-if="$store.state.device.darkmode"><fa icon="moon"/></template>
<template v-else><fa :icon="['far', 'moon']"/></template>
</button>
<mk-forkit class="forkit"/>
@ -19,8 +19,8 @@
<div class="info">
<span><b>{{ host }}</b> - <span v-html="'%i18n:@powered-by-misskey%'"></span></span>
<span class="stats" v-if="stats">
<span>%fa:user% {{ stats.originalUsersCount | number }}</span>
<span>%fa:pencil-alt% {{ stats.originalNotesCount | number }}</span>
<span><fa icon="user"/> {{ stats.originalUsersCount | number }}</span>
<span><fa icon="pencil-alt"/> {{ stats.originalNotesCount | number }}</span>
</span>
</div>
@ -40,7 +40,7 @@
</div>
<div class="announcements block">
<header>%fa:broadcast-tower% %i18n:@announcements%</header>
<header><fa icon="broadcast-tower"/> %i18n:@announcements%</header>
<div v-if="announcements && announcements.length > 0">
<div v-for="announcement in announcements">
<h1 v-html="announcement.title"></h1>
@ -50,7 +50,7 @@
</div>
<div class="photos block">
<header>%fa:images% %i18n:@photos%</header>
<header><fa icon="images"/> %i18n:@photos%</header>
<div>
<div v-for="photo in photos" :style="`background-image: url(${photo.thumbnailUrl})`"></div>
</div>
@ -76,14 +76,14 @@
</div>
<div class="tl block">
<header>%fa:comment-alt R% %i18n:@timeline%</header>
<header><fa :icon="['far', 'comment-alt']"/> %i18n:@timeline%</header>
<div>
<mk-welcome-timeline class="tl" :max="20"/>
</div>
</div>
<div class="info block">
<header>%fa:info-circle% %i18n:@info%</header>
<header><fa icon="info-circle"/> %i18n:@info%</header>
<div>
<div v-if="meta" class="body">
<p>Version: <b>{{ meta.version }}</b></p>