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

[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
190 changed files with 924 additions and 865 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/client/app/admin/views/announcements.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="cdeuzmsthagexbkpofbmatmugjuvogfb">
<ui-card>
<div slot="title">%fa:broadcast-tower% %i18n:@announcements%</div>
<div slot="title"><fa icon="broadcast-tower"/> %i18n:@announcements%</div>
<section v-for="(announcement, i) in announcements" class="fit-top">
<ui-input v-model="announcement.title" @change="save">
<span>%i18n:@title%</span>
@@ -15,7 +15,7 @@
</ui-horizon-group>
</section>
<section>
<ui-button @click="add">%fa:plus% %i18n:@add%</ui-button>
<ui-button @click="add"><fa icon="plus"/> %i18n:@add%</ui-button>
</section>
</ui-card>
</div>

8
src/client/app/admin/views/ap-log.vue
View File

@@ -3,10 +3,10 @@
<table>
<thead>
<tr>
<th>%fa:exchange-alt% In/Out</th>
<th>%fa:server% Host</th>
<th>%fa:bolt% Activity</th>
<th>%fa:user% Actor</th>
<th><fa icon="exchange-alt"/> In/Out</th>
<th><fa icon="server"/> Host</th>
<th><fa icon="bolt"/> Activity</th>
<th><fa icon="user"/> Actor</th>
</tr>
</thead>
<tbody>

2
src/client/app/admin/views/charts.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="qvgidhudpqhjttdhxubzuyrhyzgslujw">
<header>
<b>%fa:chart-bar R% %i18n:@title%:</b>
<b><fa :icon="['far', 'chart-bar']"/> %i18n:@title%:</b>
<select v-model="src">
<optgroup label="%i18n:@federation%">
<option value="federation-instances">%i18n:@charts.federation-instances%</option>

4
src/client/app/admin/views/cpu-memory.vue
View File

@@ -2,14 +2,14 @@
<div class="zyknedwtlthezamcjlolyusmipqmjgxz">
<div>
<header>
<span>%fa:microchip% CPU <span>{{ cpuP }}%</span></span>
<span><fa icon="microchip"/> CPU <span>{{ cpuP }}%</span></span>
<span v-if="meta">{{ meta.cpu.model }}</span>
</header>
<div ref="cpu"></div>
</div>
<div>
<header>
<span>%fa:memory% MEM <span>{{ memP }}%</span></span>
<span><fa icon="memory"/> MEM <span>{{ memP }}%</span></span>
<span v-if="meta"></span>
</header>
<div ref="mem"></div>

24
src/client/app/admin/views/dashboard.vue
View File

@@ -11,54 +11,54 @@
<div v-if="stats" class="stats">
<div>
<div>
<div>%fa:user%</div>
<div><fa icon="user"/></div>
<div>
<span>%i18n:@accounts%</span>
<b class="primary">{{ stats.originalUsersCount | number }}</b>
</div>
</div>
<div>
<span>%fa:home% %i18n:@this-instance%</span>
<span @click="setChartSrc('users')">%fa:chart-bar R%</span>
<span><fa icon="home"/> %i18n:@this-instance%</span>
<span @click="setChartSrc('users')"><fa :icon="['far', 'chart-bar']"/></span>
</div>
</div>
<div>
<div>
<div>%fa:pencil-alt%</div>
<div><fa icon="pencil-alt"/></div>
<div>
<span>%i18n:@notes%</span>
<b class="primary">{{ stats.originalNotesCount | number }}</b>
</div>
</div>
<div>
<span>%fa:home% %i18n:@this-instance%</span>
<span @click="setChartSrc('notes')">%fa:chart-bar R%</span>
<span><fa icon="home"/> %i18n:@this-instance%</span>
<span @click="setChartSrc('notes')"><fa :icon="['far', 'chart-bar']"/></span>
</div>
</div>
<div>
<div>
<div>%fa:database%</div>
<div><fa icon="database"/></div>
<div>
<span>%i18n:@drive%</span>
<b>{{ stats.driveUsageLocal | bytes }}</b>
</div>
</div>
<div>
<span>%fa:home% %i18n:@this-instance%</span>
<span @click="setChartSrc('drive')">%fa:chart-bar R%</span>
<span><fa icon="home"/> %i18n:@this-instance%</span>
<span @click="setChartSrc('drive')"><fa :icon="['far', 'chart-bar']"/></span>
</div>
</div>
<div>
<div>
<div>%fa:hdd R%</div>
<div><fa :icon="['far', 'hdd']"/></div>
<div>
<span>%i18n:@instances%</span>
<b>{{ stats.instances | number }}</b>
</div>
</div>
<div>
<span>%fa:globe% %i18n:@federated%</span>
<span @click="setChartSrc('federation-instances-total')">%fa:chart-bar R%</span>
<span><fa icon="globe"/> %i18n:@federated%</span>
<span @click="setChartSrc('federation-instances-total')"><fa :icon="['far', 'chart-bar']"/></span>
</div>
</div>
</div>

8
src/client/app/admin/views/emoji.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="tumhkfkmgtvzljezfvmgkeurkfncshbe">
<ui-card>
<div slot="title">%fa:plus% %i18n:@add-emoji.title%</div>
<div slot="title"><fa icon="plus"/> %i18n:@add-emoji.title%</div>
<section class="fit-top">
<ui-horizon-group inputs>
<ui-input v-model="name">
@@ -22,7 +22,7 @@
</ui-card>
<ui-card>
<div slot="title">%fa:grin R% %i18n:@emojis.title%</div>
<div slot="title"><fa :icon="['far', 'grin']"/> %i18n:@emojis.title%</div>
<section v-for="emoji in emojis">
<img :src="emoji.url" :alt="emoji.name" style="width: 64px;"/>
<ui-horizon-group inputs>
@@ -37,8 +37,8 @@
<span>%i18n:@add-emoji.url%</span>
</ui-input>
<ui-horizon-group>
<ui-button @click="updateEmoji(emoji)">%fa:save R% %i18n:@emojis.update%</ui-button>
<ui-button @click="removeEmoji(emoji)">%fa:trash-alt R% %i18n:@emojis.remove%</ui-button>
<ui-button @click="updateEmoji(emoji)"><fa :icon="['far', 'save']"/> %i18n:@emojis.update%</ui-button>
<ui-button @click="removeEmoji(emoji)"><fa :icon="['far', 'trash-alt']"/> %i18n:@emojis.remove%</ui-button>
</ui-horizon-group>
</section>
</ui-card>

24
src/client/app/admin/views/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="mk-admin" :class="{ isMobile }">
<header v-show="isMobile">
<button class="nav" @click="navOpend = true">%fa:bars%</button>
<button class="nav" @click="navOpend = true"><fa icon="bars"/></button>
<span>MisskeyMyAdmin</span>
</header>
<div class="nav-backdrop"
@@ -18,18 +18,18 @@
<p class="name">{{ $store.state.i | userName }}</p>
</div>
<ul>
<li @click="nav('dashboard')" :class="{ active: page == 'dashboard' }">%fa:home .fw%%i18n:@dashboard%</li>
<li @click="nav('instance')" :class="{ active: page == 'instance' }">%fa:cog .fw%%i18n:@instance%</li>
<li @click="nav('users')" :class="{ active: page == 'users' }">%fa:users .fw%%i18n:@users%</li>
<li @click="nav('emoji')" :class="{ active: page == 'emoji' }">%fa:grin R .fw%%i18n:@emoji%</li>
<li @click="nav('announcements')" :class="{ active: page == 'announcements' }">%fa:broadcast-tower .fw%%i18n:@announcements%</li>
<li @click="nav('hashtags')" :class="{ active: page == 'hashtags' }">%fa:hashtag .fw%%i18n:@hashtags%</li>
<li @click="nav('dashboard')" :class="{ active: page == 'dashboard' }"><fa icon="home" fixed-width/>%i18n:@dashboard%</li>
<li @click="nav('instance')" :class="{ active: page == 'instance' }"><fa icon="cog" fixed-width/>%i18n:@instance%</li>
<li @click="nav('users')" :class="{ active: page == 'users' }"><fa icon="users" fixed-width/>%i18n:@users%</li>
<li @click="nav('emoji')" :class="{ active: page == 'emoji' }"><fa icon="grin R" fixed-width/>%i18n:@emoji%</li>
<li @click="nav('announcements')" :class="{ active: page == 'announcements' }"><fa icon="broadcast-tower" fixed-width/>%i18n:@announcements%</li>
<li @click="nav('hashtags')" :class="{ active: page == 'hashtags' }"><fa icon="hashtag" fixed-width/>%i18n:@hashtags%</li>
<!-- <li @click="nav('drive')" :class="{ active: page == 'drive' }">%fa:cloud .fw%%i18n:common.drive%</li> -->
<!-- <li @click="nav('drive')" :class="{ active: page == 'drive' }"><fa icon="cloud" fixed-width/>%i18n:common.drive%</li> -->
<!-- <li @click="nav('update')" :class="{ active: page == 'update' }">%i18n:@update%</li> -->
</ul>
<div class="back-to-misskey">
<a href="/">%fa:arrow-left% %i18n:@back-to-misskey%</a>
<a href="/"><fa icon="arrow-left"/> %i18n:@back-to-misskey%</a>
</div>
<div class="version">
<small>Misskey {{ version }}</small>
@@ -126,7 +126,7 @@ export default Vue.extend({
line-height $headerHeight
border-right solid 1px rgba(#000, 0.1)
> [data-fa]
> [data-icon]
transition all 0.2s ease
> nav
@@ -188,7 +188,7 @@ export default Vue.extend({
&:hover
color #fff
> [data-fa]
> [data-icon]
margin-right 6px
> .version
@@ -218,7 +218,7 @@ export default Vue.extend({
&:hover
color #fff
> [data-fa]
> [data-icon]
margin-right 6px
&.active