graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-12-23 20:13:09 +02:00
Code Issues Projects Releases Packages Wiki Activity

wip

Browse source
This commit is contained in:
syuilo 2017-12-08 13:10:31 +09:00
parent b68a9f7ea4
commit 25068f12f5
34 changed files with 68 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
gulpfile.ts
View file

@ -20,11 +20,15 @@ import * as mocha from 'gulp-mocha';
import * as replace from 'gulp-replace'; import * as replace from 'gulp-replace';
import * as htmlmin from 'gulp-htmlmin'; import * as htmlmin from 'gulp-htmlmin';
const uglifyes = require('uglify-es'); const uglifyes = require('uglify-es');
const fontawesome = require('@fortawesome/fontawesome'); import * as fontawesome from '@fortawesome/fontawesome';
const solid = require('@fortawesome/fontawesome-free-solid'); import * as regular from '@fortawesome/fontawesome-free-regular';
import * as solid from '@fortawesome/fontawesome-free-solid';
import * as brands from '@fortawesome/fontawesome-free-brands';
// Adds all the icons from the Solid style into our library for easy lookup // Add icons
fontawesome.library.add(regular);
fontawesome.library.add(solid); fontawesome.library.add(solid);
fontawesome.library.add(brands);
import version from './src/version'; import version from './src/version';

2
package.json
View file

@ -23,6 +23,8 @@
}, },
"dependencies": { "dependencies": {
"@fortawesome/fontawesome": "^1.0.0", "@fortawesome/fontawesome": "^1.0.0",
"@fortawesome/fontawesome-free-brands": "^5.0.0",
"@fortawesome/fontawesome-free-regular": "^5.0.0",
"@fortawesome/fontawesome-free-solid": "^5.0.0", "@fortawesome/fontawesome-free-solid": "^5.0.0",
"@prezzemolo/rap": "0.1.2", "@prezzemolo/rap": "0.1.2",
"@prezzemolo/zip": "0.0.3", "@prezzemolo/zip": "0.0.3",

2
src/web/app/common/tags/messaging/form.tag
View file

@ -9,7 +9,7 @@
%fa:upload% %fa:upload%
</button> </button>
<button class="attach-from-drive" type="button" title="%i18n:common.tags.mk-messaging-form.attach-from-drive%"> <button class="attach-from-drive" type="button" title="%i18n:common.tags.mk-messaging-form.attach-from-drive%">
%fa:folder-open% %fa:R folder-open%
</button> </button>
<input name="file" type="file" accept="image/*"/> <input name="file" type="file" accept="image/*"/>
<style> <style>

2
src/web/app/common/tags/nav-links.tag
View file

@ -1,5 +1,5 @@
<mk-nav-links> <mk-nav-links>
<a href={ _ABOUT_URL_ }>%i18n:common.tags.mk-nav-links.about%</a><i>・</i><a href={ _STATS_URL_ }>%i18n:common.tags.mk-nav-links.stats%</a><i>・</i><a href={ _STATUS_URL_ }>%i18n:common.tags.mk-nav-links.status%</a><i>・</i><a href="http://zawazawa.jp/misskey/">%i18n:common.tags.mk-nav-links.wiki%</a><i>・</i><a href="https://github.com/syuilo/misskey/blob/master/DONORS.md">%i18n:common.tags.mk-nav-links.donors%</a><i>・</i><a href="https://github.com/syuilo/misskey">%i18n:common.tags.mk-nav-links.repository%</a><i>・</i><a href={ _DEV_URL_ }>%i18n:common.tags.mk-nav-links.develop%</a><i>・</i><a href="https://twitter.com/misskey_xyz" target="_blank">Follow us on %fa:twitter%</a> <a href={ _ABOUT_URL_ }>%i18n:common.tags.mk-nav-links.about%</a><i>・</i><a href={ _STATS_URL_ }>%i18n:common.tags.mk-nav-links.stats%</a><i>・</i><a href={ _STATUS_URL_ }>%i18n:common.tags.mk-nav-links.status%</a><i>・</i><a href="http://zawazawa.jp/misskey/">%i18n:common.tags.mk-nav-links.wiki%</a><i>・</i><a href="https://github.com/syuilo/misskey/blob/master/DONORS.md">%i18n:common.tags.mk-nav-links.donors%</a><i>・</i><a href="https://github.com/syuilo/misskey">%i18n:common.tags.mk-nav-links.repository%</a><i>・</i><a href={ _DEV_URL_ }>%i18n:common.tags.mk-nav-links.develop%</a><i>・</i><a href="https://twitter.com/misskey_xyz" target="_blank">Follow us on %fa:B twitter%</a>
<style> <style>
:scope :scope
display inline display inline

4
src/web/app/common/tags/stream-indicator.tag
View file

@ -1,10 +1,10 @@
<mk-stream-indicator> <mk-stream-indicator>
<p if={ connection.state == 'initializing' }> <p if={ connection.state == 'initializing' }>
%fa:spinner .spin% %fa:spinner .spin .pulse%
<span>%i18n:common.tags.mk-stream-indicator.connecting%<mk-ellipsis/></span> <span>%i18n:common.tags.mk-stream-indicator.connecting%<mk-ellipsis/></span>
</p> </p>
<p if={ connection.state == 'reconnecting' }> <p if={ connection.state == 'reconnecting' }>
%fa:spinner .spin% %fa:spinner .spin .pulse%
<span>%i18n:common.tags.mk-stream-indicator.reconnecting%<mk-ellipsis/></span> <span>%i18n:common.tags.mk-stream-indicator.reconnecting%<mk-ellipsis/></span>
</p> </p>
<p if={ connection.state == 'connected' }> <p if={ connection.state == 'connected' }>

4
src/web/app/desktop/tags/drive/base-contextmenu.tag
View file

@ -2,13 +2,13 @@
<mk-contextmenu ref="ctx"> <mk-contextmenu ref="ctx">
<ul> <ul>
<li onclick={ parent.createFolder }> <li onclick={ parent.createFolder }>
<p>%fa:folder-o%%i18n:desktop.tags.mk-drive-browser-base-contextmenu.create-folder%</p> <p>%fa:R folder%%i18n:desktop.tags.mk-drive-browser-base-contextmenu.create-folder%</p>
</li> </li>
<li onclick={ parent.upload }> <li onclick={ parent.upload }>
<p>%fa:upload%%i18n:desktop.tags.mk-drive-browser-base-contextmenu.upload%</p> <p>%fa:upload%%i18n:desktop.tags.mk-drive-browser-base-contextmenu.upload%</p>
</li> </li>
<li onclick={ parent.urlUpload }> <li onclick={ parent.urlUpload }>
<p>%fa:cloud-upload%%i18n:desktop.tags.mk-drive-browser-base-contextmenu.url-upload%</p> <p>%fa:cloud-upload-alt%%i18n:desktop.tags.mk-drive-browser-base-contextmenu.url-upload%</p>
</li> </li>
</ul> </ul>
</mk-contextmenu> </mk-contextmenu>

2
src/web/app/desktop/tags/drive/file-contextmenu.tag
View file

@ -10,7 +10,7 @@
<li><a href={ parent.file.url + '?download' } download={ parent.file.name } onclick={ parent.download }>%fa:download%%i18n:desktop.tags.mk-drive-browser-file-contextmenu.download%</a></li> <li><a href={ parent.file.url + '?download' } download={ parent.file.name } onclick={ parent.download }>%fa:download%%i18n:desktop.tags.mk-drive-browser-file-contextmenu.download%</a></li>
<li class="separator"></li> <li class="separator"></li>
<li onclick={ parent.delete }> <li onclick={ parent.delete }>
<p>%fa:trash-o%%i18n:common.delete%</p> <p>%fa:R trash-alt%%i18n:common.delete%</p>
</li> </li>
<li class="separator"></li> <li class="separator"></li>
<li class="has-child"> <li class="has-child">

4
src/web/app/desktop/tags/drive/folder-contextmenu.tag
View file

@ -5,7 +5,7 @@
<p>%fa:arrow-right%%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.move-to-this-folder%</p> <p>%fa:arrow-right%%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.move-to-this-folder%</p>
</li> </li>
<li onclick={ parent.newWindow }> <li onclick={ parent.newWindow }>
<p>%fa:share-square-o%%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.show-in-new-window%</p> <p>%fa:R window-restore%%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.show-in-new-window%</p>
</li> </li>
<li class="separator"></li> <li class="separator"></li>
<li onclick={ parent.rename }> <li onclick={ parent.rename }>
@ -13,7 +13,7 @@
</li> </li>
<li class="separator"></li> <li class="separator"></li>
<li onclick={ parent.delete }> <li onclick={ parent.delete }>
<p>%fa:trash-o%%i18n:common.delete%</p> <p>%fa:R trash-alt%%i18n:common.delete%</p>
</li> </li>
</ul> </ul>
</mk-contextmenu> </mk-contextmenu>

2
src/web/app/desktop/tags/drive/folder.tag
View file

@ -1,5 +1,5 @@
<mk-drive-browser-folder data-is-contextmenu-showing={ isContextmenuShowing.toString() } data-draghover={ draghover.toString() } onclick={ onclick } onmouseover={ onmouseover } onmouseout={ onmouseout } ondragover={ ondragover } ondragenter={ ondragenter } ondragleave={ ondragleave } ondrop={ ondrop } oncontextmenu={ oncontextmenu } draggable="true" ondragstart={ ondragstart } ondragend={ ondragend } title={ title }> <mk-drive-browser-folder data-is-contextmenu-showing={ isContextmenuShowing.toString() } data-draghover={ draghover.toString() } onclick={ onclick } onmouseover={ onmouseover } onmouseout={ onmouseout } ondragover={ ondragover } ondragenter={ ondragenter } ondragleave={ ondragleave } ondrop={ ondrop } oncontextmenu={ oncontextmenu } draggable="true" ondragstart={ ondragstart } ondragend={ ondragend } title={ title }>
<p class="name"><virtual if={ hover }>%fa:folder-open .fw%</virtual><virtual if={ !hover }>%fa:folder .fw%</virtual>{ folder.name }</p> <p class="name"><virtual if={ hover }>%fa:R folder-open .fw%</virtual><virtual if={ !hover }>%fa:R folder .fw%</virtual>{ folder.name }</p>
<style> <style>
:scope :scope
display block display block

4
src/web/app/desktop/tags/home-widgets/recommended-polls.tag
View file

@ -1,7 +1,7 @@
<mk-recommended-polls-home-widget> <mk-recommended-polls-home-widget>
<virtual if={ !data.compact }> <virtual if={ !data.compact }>
<p class="title">%fa:pie-chart%%i18n:desktop.tags.mk-recommended-polls-home-widget.title%</p> <p class="title">%fa:chart-pie%%i18n:desktop.tags.mk-recommended-polls-home-widget.title%</p>
<button onclick={ fetch } title="%i18n:desktop.tags.mk-recommended-polls-home-widget.refresh%">%fa:refresh%</button> <button onclick={ fetch } title="%i18n:desktop.tags.mk-recommended-polls-home-widget.refresh%">%fa:sync%</button>
</virtual> </virtual>
<div class="poll" if={ !loading && poll != null }> <div class="poll" if={ !loading && poll != null }>
<p if={ poll.text }><a href="/{ poll.user.username }/{ poll.id }">{ poll.text }</a></p> <p if={ poll.text }><a href="/{ poll.user.username }/{ poll.id }">{ poll.text }</a></p>

2
src/web/app/desktop/tags/home-widgets/trends.tag
View file

@ -1,7 +1,7 @@
<mk-trends-home-widget> <mk-trends-home-widget>
<virtual if={ !data.compact }> <virtual if={ !data.compact }>
<p class="title">%fa:fire%%i18n:desktop.tags.mk-trends-home-widget.title%</p> <p class="title">%fa:fire%%i18n:desktop.tags.mk-trends-home-widget.title%</p>
<button onclick={ fetch } title="%i18n:desktop.tags.mk-trends-home-widget.refresh%">%fa:refresh%</button> <button onclick={ fetch } title="%i18n:desktop.tags.mk-trends-home-widget.refresh%">%fa:sync%</button>
</virtual> </virtual>
<div class="post" if={ !loading && post != null }> <div class="post" if={ !loading && post != null }>
<p class="text"><a href="/{ post.user.username }/{ post.id }">{ post.text }</a></p> <p class="text"><a href="/{ post.user.username }/{ post.id }">{ post.text }</a></p>

2
src/web/app/desktop/tags/home-widgets/user-recommendation.tag
View file

@ -1,7 +1,7 @@
<mk-user-recommendation-home-widget> <mk-user-recommendation-home-widget>
<virtual if={ !data.compact }> <virtual if={ !data.compact }>
<p class="title">%fa:users%%i18n:desktop.tags.mk-user-recommendation-home-widget.title%</p> <p class="title">%fa:users%%i18n:desktop.tags.mk-user-recommendation-home-widget.title%</p>
<button onclick={ refresh } title="%i18n:desktop.tags.mk-user-recommendation-home-widget.refresh%">%fa:refresh%</button> <button onclick={ refresh } title="%i18n:desktop.tags.mk-user-recommendation-home-widget.refresh%">%fa:sync%</button>
</virtual> </virtual>
<div class="user" if={ !loading && users.length != 0 } each={ _user in users }> <div class="user" if={ !loading && users.length != 0 } each={ _user in users }>
<a class="avatar-anchor" href={ '/' + _user.username }> <a class="avatar-anchor" href={ '/' + _user.username }>

2
src/web/app/desktop/tags/notifications.tag
View file

@ -56,7 +56,7 @@
<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/> <img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
</a> </a>
<div class="text"> <div class="text">
<p>%fa:pie-chart%<a href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p><a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a> <p>%fa:chart-pie%<a href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p><a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
</div> </div>
</virtual> </virtual>
</div> </div>

2
src/web/app/desktop/tags/post-form.tag
View file

@ -17,7 +17,7 @@
<button ref="upload" title="%i18n:desktop.tags.mk-post-form.attach-media-from-local%" onclick={ selectFile }>%fa:upload%</button> <button ref="upload" title="%i18n:desktop.tags.mk-post-form.attach-media-from-local%" onclick={ selectFile }>%fa:upload%</button>
<button ref="drive" title="%i18n:desktop.tags.mk-post-form.attach-media-from-drive%" onclick={ selectFileFromDrive }>%fa:cloud%</button> <button ref="drive" title="%i18n:desktop.tags.mk-post-form.attach-media-from-drive%" onclick={ selectFileFromDrive }>%fa:cloud%</button>
<button class="kao" title="%i18n:desktop.tags.mk-post-form.insert-a-kao%" onclick={ kao }>%fa:R smile%</button> <button class="kao" title="%i18n:desktop.tags.mk-post-form.insert-a-kao%" onclick={ kao }>%fa:R smile%</button>
<button class="poll" title="%i18n:desktop.tags.mk-post-form.create-poll%" onclick={ addPoll }>%fa:pie-chart%</button> <button class="poll" title="%i18n:desktop.tags.mk-post-form.create-poll%" onclick={ addPoll }>%fa:chart-pie%</button>
<p class="text-count { over: refs.text.value.length > 1000 }">{ '%i18n:desktop.tags.mk-post-form.text-remain%'.replace('{}', 1000 - refs.text.value.length) }</p> <p class="text-count { over: refs.text.value.length > 1000 }">{ '%i18n:desktop.tags.mk-post-form.text-remain%'.replace('{}', 1000 - refs.text.value.length) }</p>
<button class={ wait: wait } ref="submit" disabled={ wait || (refs.text.value.length == 0 && files.length == 0 && !poll　&& !repost) } onclick={ post }> <button class={ wait: wait } ref="submit" disabled={ wait || (refs.text.value.length == 0 && files.length == 0 && !poll　&& !repost) } onclick={ post }>
{ wait ? '%i18n:desktop.tags.mk-post-form.posting%' : submitText }<mk-ellipsis if={ wait }/> { wait ? '%i18n:desktop.tags.mk-post-form.posting%' : submitText }<mk-ellipsis if={ wait }/>

2
src/web/app/desktop/tags/select-file-from-drive-window.tag
View file

@ -138,7 +138,7 @@
this.files = []; this.files = [];
this.multiple = this.opts.multiple != null ? this.opts.multiple : false; this.multiple = this.opts.multiple != null ? this.opts.multiple : false;
this.title = this.opts.title || '%fa:file-o%ファイルを選択'; this.title = this.opts.title || '%fa:R file%ファイルを選択';
this.on('mount', () => { this.on('mount', () => {
this.refs.window.refs.browser.on('selected', file => { this.refs.window.refs.browser.on('selected', file => {

2
src/web/app/desktop/tags/select-folder-from-drive-window.tag
View file

@ -92,7 +92,7 @@
<script> <script>
this.files = []; this.files = [];
this.title = this.opts.title || '%fa:folder-o%フォルダを選択'; this.title = this.opts.title || '%fa:R folder%フォルダを選択';
this.on('mount', () => { this.on('mount', () => {
this.refs.window.on('closed', () => { this.refs.window.on('closed', () => {

4
src/web/app/desktop/tags/settings.tag
View file

@ -5,8 +5,8 @@
<p class={ active: page == 'notification' } onmousedown={ setPage.bind(null, 'notification') }>%fa:R bell .fw%通知</p> <p class={ active: page == 'notification' } onmousedown={ setPage.bind(null, 'notification') }>%fa:R bell .fw%通知</p>
<p class={ active: page == 'drive' } onmousedown={ setPage.bind(null, 'drive') }>%fa:cloud .fw%ドライブ</p> <p class={ active: page == 'drive' } onmousedown={ setPage.bind(null, 'drive') }>%fa:cloud .fw%ドライブ</p>
<p class={ active: page == 'apps' } onmousedown={ setPage.bind(null, 'apps') }>%fa:puzzle-piece .fw%アプリ</p> <p class={ active: page == 'apps' } onmousedown={ setPage.bind(null, 'apps') }>%fa:puzzle-piece .fw%アプリ</p>
<p class={ active: page == 'twitter' } onmousedown={ setPage.bind(null, 'twitter') }>%fa:twitter .fw%Twitter</p> <p class={ active: page == 'twitter' } onmousedown={ setPage.bind(null, 'twitter') }>%fa:B twitter .fw%Twitter</p>
<p class={ active: page == 'signin' } onmousedown={ setPage.bind(null, 'signin') }>%fa:sign-in .fw%ログイン履歴</p> <p class={ active: page == 'signin' } onmousedown={ setPage.bind(null, 'signin') }>%fa:sign-in-alt .fw%ログイン履歴</p>
<p class={ active: page == 'password' } onmousedown={ setPage.bind(null, 'password') }>%fa:unlock-alt .fw%%i18n:desktop.tags.mk-settings.password%</p> <p class={ active: page == 'password' } onmousedown={ setPage.bind(null, 'password') }>%fa:unlock-alt .fw%%i18n:desktop.tags.mk-settings.password%</p>
<p class={ active: page == 'api' } onmousedown={ setPage.bind(null, 'api') }>%fa:key .fw%API</p> <p class={ active: page == 'api' } onmousedown={ setPage.bind(null, 'api') }>%fa:key .fw%API</p>
</div> </div>

4
src/web/app/desktop/tags/timeline.tag
View file

@ -142,8 +142,8 @@
%fa:ellipsis-h% %fa:ellipsis-h%
</button> </button>
<button onclick={ toggleDetail } title="%i18n:desktop.tags.mk-timeline-post.detail"> <button onclick={ toggleDetail } title="%i18n:desktop.tags.mk-timeline-post.detail">
<i class="fa fa-caret-down" if={ !isDetailOpened }></i> <virtual if={ !isDetailOpened }>%fa:caret-down%</virtual>
<i class="fa fa-caret-up" if={ isDetailOpened }></i> <virtual if={ isDetailOpened }>%fa:caret-up%</virtual>
</button> </button>
</footer> </footer>
</div> </div>

7
src/web/app/desktop/tags/ui.tag
View file

@ -245,7 +245,7 @@
&:active &:active
color darken(#9eaba8, 30%) color darken(#9eaba8, 30%)
> [data-fa].icon > [data-fa].bell
font-size 1.2em font-size 1.2em
line-height 48px line-height 48px
@ -455,7 +455,6 @@
> [data-fa]:last-child > [data-fa]:last-child
margin-left 5px margin-left 5px
vertical-align super
font-size 10px font-size 10px
color $theme-color color $theme-color
@ -756,10 +755,10 @@
* *
pointer-events none pointer-events none
> i:first-of-type > [data-fa]:first-of-type
margin-right 6px margin-right 6px
> i:last-of-type > [data-fa]:last-of-type
display block display block
position absolute position absolute
top 0 top 0

4
src/web/app/desktop/tags/user.tag
View file

@ -53,7 +53,7 @@
<footer> <footer>
<a href={ '/' + user.username } data-active={ parent.page == 'home' }>%fa:home%概要</a> <a href={ '/' + user.username } data-active={ parent.page == 'home' }>%fa:home%概要</a>
<a href={ '/' + user.username + '/media' } data-active={ parent.page == 'media' }>%fa:image%メディア</a> <a href={ '/' + user.username + '/media' } data-active={ parent.page == 'media' }>%fa:image%メディア</a>
<a href={ '/' + user.username + '/graphs' } data-active={ parent.page == 'graphs' }>%fa:bar-chart%グラフ</a> <a href={ '/' + user.username + '/graphs' } data-active={ parent.page == 'graphs' }>%fa:chart-bar%グラフ</a>
</footer> </footer>
</div> </div>
<style> <style>
@ -233,7 +233,7 @@
<p>%fa:birthday-cake%{ user.profile.birthday.replace('-', '年').replace('-', '月') + '日' } ({ age(user.profile.birthday) }歳)</p> <p>%fa:birthday-cake%{ user.profile.birthday.replace('-', '年').replace('-', '月') + '日' } ({ age(user.profile.birthday) }歳)</p>
</div> </div>
<div class="twitter" if={ user.twitter }> <div class="twitter" if={ user.twitter }>
<p>%fa:twitter%<a href={ 'https://twitter.com/' + user.twitter.screen_name } target="_blank">@{ user.twitter.screen_name }</a></p> <p>%fa:B twitter%<a href={ 'https://twitter.com/' + user.twitter.screen_name } target="_blank">@{ user.twitter.screen_name }</a></p>
</div> </div>
<div class="status"> <div class="status">
<p class="posts-count">%fa:angle-right%<a>{ user.posts_count }</a><b>ポスト</b></p> <p class="posts-count">%fa:angle-right%<a>{ user.posts_count }</a><b>ポスト</b></p>

2
src/web/app/desktop/tags/widgets/activity.tag
View file

@ -1,6 +1,6 @@
<mk-activity-widget data-melt={ design == 2 }> <mk-activity-widget data-melt={ design == 2 }>
<virtual if={ design == 0 }> <virtual if={ design == 0 }>
<p class="title">%fa:bar-chart%%i18n:desktop.tags.mk-activity-widget.title%</p> <p class="title">%fa:chart-bar%%i18n:desktop.tags.mk-activity-widget.title%</p>
<button onclick={ toggle } title="%i18n:desktop.tags.mk-activity-widget.toggle%">%fa:sort%</button> <button onclick={ toggle } title="%i18n:desktop.tags.mk-activity-widget.toggle%">%fa:sort%</button>
</virtual> </virtual>
<p class="initializing" if={ initializing }>%fa:spinner .pluse .fw%%i18n:common.loading%<mk-ellipsis/></p> <p class="initializing" if={ initializing }>%fa:spinner .pluse .fw%%i18n:common.loading%<mk-ellipsis/></p>

2
src/web/app/desktop/tags/window.tag
View file

@ -5,7 +5,7 @@
<header ref="header" onmousedown={ onHeaderMousedown }> <header ref="header" onmousedown={ onHeaderMousedown }>
<h1 data-yield="header"><yield from="header"/></h1> <h1 data-yield="header"><yield from="header"/></h1>
<div> <div>
<button class="popout" if={ popoutUrl } onmousedown={ repelMove } onclick={ popout } title="ポップアウト">%fa:window-restore%</button> <button class="popout" if={ popoutUrl } onmousedown={ repelMove } onclick={ popout } title="ポップアウト">%fa:R window-restore%</button>
<button class="close" if={ canClose } onmousedown={ repelMove } onclick={ close } title="閉じる">%fa:times%</button> <button class="close" if={ canClose } onmousedown={ repelMove } onclick={ close } title="閉じる">%fa:times%</button>
</div> </div>
</header> </header>

2
src/web/app/mobile/tags/drive/file-viewer.tag
View file

@ -35,7 +35,7 @@
%fa:pencil-alt%%i18n:mobile.tags.mk-drive-file-viewer.rename% %fa:pencil-alt%%i18n:mobile.tags.mk-drive-file-viewer.rename%
</button> </button>
<button onclick={ move }> <button onclick={ move }>
%fa:folder-open%%i18n:mobile.tags.mk-drive-file-viewer.move% %fa:R folder-open%%i18n:mobile.tags.mk-drive-file-viewer.move%
</button> </button>
</div> </div>
</div> </div>

2
src/web/app/mobile/tags/notification-preview.tag
View file

@ -43,7 +43,7 @@
<virtual if={ notification.type == 'poll_vote' }> <virtual if={ notification.type == 'poll_vote' }>
<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/> <img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
<div class="text"> <div class="text">
<p>%fa:pie-chart%{ notification.user.name }</p> <p>%fa:chart-pie%{ notification.user.name }</p>
<p class="post-ref">{ getPostSummary(notification.post) }</p> <p class="post-ref">{ getPostSummary(notification.post) }</p>
</div> </div>
</virtual> </virtual>

2
src/web/app/mobile/tags/notification.tag
View file

@ -77,7 +77,7 @@
</a> </a>
<div class="text"> <div class="text">
<p> <p>
%fa:pie-chart% %fa:chart-pie%
<a href={ '/' + notification.user.username }>{ notification.user.name }</a> <a href={ '/' + notification.user.username }>{ notification.user.name }</a>
</p> </p>
<a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a> <a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>

2
src/web/app/mobile/tags/page/drive.tag
View file

@ -50,7 +50,7 @@
document.title = title; document.title = title;
// TODO: escape html characters in folder.name // TODO: escape html characters in folder.name
ui.trigger('title', '%fa:folder-open%' + folder.name); ui.trigger('title', '%fa:R folder-open%' + folder.name);
}); });
this.refs.ui.refs.browser.on('open-file', (file, silent) => { this.refs.ui.refs.browser.on('open-file', (file, silent) => {

2
src/web/app/mobile/tags/page/post.tag
View file

@ -55,7 +55,7 @@
this.on('mount', () => { this.on('mount', () => {
document.title = 'Misskey'; document.title = 'Misskey';
ui.trigger('title', '%fa:sticky-note-o%%i18n:mobile.tags.mk-post-page.title%'); ui.trigger('title', '%fa:R sticky-note%%i18n:mobile.tags.mk-post-page.title%');
document.documentElement.style.background = '#313a42'; document.documentElement.style.background = '#313a42';
Progress.start(); Progress.start();

8
src/web/app/mobile/tags/page/settings.tag
View file

@ -22,8 +22,8 @@
<ul> <ul>
<li><a href="./settings/profile">%fa:user%%i18n:mobile.tags.mk-settings-page.profile%%fa:angle-right%</a></li> <li><a href="./settings/profile">%fa:user%%i18n:mobile.tags.mk-settings-page.profile%%fa:angle-right%</a></li>
<li><a href="./settings/authorized-apps">%fa:puzzle-piece%%i18n:mobile.tags.mk-settings-page.applications%%fa:angle-right%</a></li> <li><a href="./settings/authorized-apps">%fa:puzzle-piece%%i18n:mobile.tags.mk-settings-page.applications%%fa:angle-right%</a></li>
<li><a href="./settings/twitter">%fa:twitter%%i18n:mobile.tags.mk-settings-page.twitter-integration%%fa:angle-right%</a></li> <li><a href="./settings/twitter">%fa:B twitter%%i18n:mobile.tags.mk-settings-page.twitter-integration%%fa:angle-right%</a></li>
<li><a href="./settings/signin-history">%fa:sign-in%%i18n:mobile.tags.mk-settings-page.signin-history%%fa:angle-right%</a></li> <li><a href="./settings/signin-history">%fa:sign-in-alt%%i18n:mobile.tags.mk-settings-page.signin-history%%fa:angle-right%</a></li>
<li><a href="./settings/api">%fa:key%%i18n:mobile.tags.mk-settings-page.api%%fa:angle-right%</a></li> <li><a href="./settings/api">%fa:key%%i18n:mobile.tags.mk-settings-page.api%%fa:angle-right%</a></li>
</ul> </ul>
<ul> <ul>
@ -78,10 +78,10 @@
line-height $height line-height $height
color #4d635e color #4d635e
> i:nth-of-type(1) > [data-fa]:nth-of-type(1)
margin-right 4px margin-right 4px
> i:nth-of-type(2) > [data-fa]:nth-of-type(2)
display block display block
position absolute position absolute
top 0 top 0

2
src/web/app/mobile/tags/page/settings/signin.tag
View file

@ -11,7 +11,7 @@
this.on('mount', () => { this.on('mount', () => {
document.title = 'Misskey | %i18n:mobile.tags.mk-signin-history-page.signin-history%'; document.title = 'Misskey | %i18n:mobile.tags.mk-signin-history-page.signin-history%';
ui.trigger('title', '%fa:sign-in%%i18n:mobile.tags.mk-signin-history-page.signin-history%'); ui.trigger('title', '%fa:sign-in-alt%%i18n:mobile.tags.mk-signin-history-page.signin-history%');
}); });
</script> </script>
</mk-signin-history-page> </mk-signin-history-page>

2
src/web/app/mobile/tags/page/settings/twitter.tag
View file

@ -11,7 +11,7 @@
this.on('mount', () => { this.on('mount', () => {
document.title = 'Misskey | %i18n:mobile.tags.mk-twitter-setting-page.twitter-integration%'; document.title = 'Misskey | %i18n:mobile.tags.mk-twitter-setting-page.twitter-integration%';
ui.trigger('title', '%fa:twitter%%i18n:mobile.tags.mk-twitter-setting-page.twitter-integration%'); ui.trigger('title', '%fa:B twitter%%i18n:mobile.tags.mk-twitter-setting-page.twitter-integration%');
}); });
</script> </script>
</mk-twitter-setting-page> </mk-twitter-setting-page>

2
src/web/app/mobile/tags/post-form.tag
View file

@ -22,7 +22,7 @@
<button ref="upload" onclick={ selectFile }>%fa:upload%</button> <button ref="upload" onclick={ selectFile }>%fa:upload%</button>
<button ref="drive" onclick={ selectFileFromDrive }>%fa:cloud%</button> <button ref="drive" onclick={ selectFileFromDrive }>%fa:cloud%</button>
<button class="kao" onclick={ kao }>%fa:R smile%</button> <button class="kao" onclick={ kao }>%fa:R smile%</button>
<button class="poll" onclick={ addPoll }>%fa:pie-chart%</button> <button class="poll" onclick={ addPoll }>%fa:chart-pie%</button>
<input ref="file" type="file" accept="image/*" multiple="multiple" onchange={ changeFile }/> <input ref="file" type="file" accept="image/*" multiple="multiple" onchange={ changeFile }/>
</div> </div>
<style> <style>

8
src/web/app/mobile/tags/ui.tag
View file

@ -99,8 +99,7 @@
overflow hidden overflow hidden
text-overflow ellipsis text-overflow ellipsis
> [data-fa] [data-fa]
> .icon
margin-right 8px margin-right 8px
> img > img
@ -124,7 +123,7 @@
> [data-fa] > [data-fa]
transition all 0.2s ease transition all 0.2s ease
> [data-fa] > [data-fa].circle
position absolute position absolute
top 8px top 8px
left 8px left 8px
@ -326,9 +325,8 @@
> [data-fa]:first-child > [data-fa]:first-child
margin-right 0.5em margin-right 0.5em
> .i > [data-fa].circle
margin-left 6px margin-left 6px
vertical-align super
font-size 10px font-size 10px
color $theme-color color $theme-color

2
src/web/app/mobile/tags/user.tag
View file

@ -229,7 +229,7 @@
</div> </div>
</section> </section>
<section class="activity"> <section class="activity">
<h2>%fa:bar-chart%%i18n:mobile.tags.mk-user-overview.activity%</h2> <h2>%fa:chart-bar%%i18n:mobile.tags.mk-user-overview.activity%</h2>
<div> <div>
<mk-user-overview-activity-chart user={ user }/> <mk-user-overview-activity-chart user={ user }/>
</div> </div>

22
webpack/module/rules/fa.ts
View file

@ -4,11 +4,15 @@
const StringReplacePlugin = require('string-replace-webpack-plugin'); const StringReplacePlugin = require('string-replace-webpack-plugin');
const fontawesome = require('@fortawesome/fontawesome'); import * as fontawesome from '@fortawesome/fontawesome';
const solid = require('@fortawesome/fontawesome-free-solid'); import * as regular from '@fortawesome/fontawesome-free-regular';
import * as solid from '@fortawesome/fontawesome-free-solid';
import * as brands from '@fortawesome/fontawesome-free-brands';
// Adds all the icons from the Solid style into our library for easy lookup // Add icons
fontawesome.library.add(regular);
fontawesome.library.add(solid); fontawesome.library.add(solid);
fontawesome.library.add(brands);
export default () => ({ export default () => ({
enforce: 'pre', enforce: 'pre',
@ -19,18 +23,19 @@ export default () => ({
pattern: /%fa:(.+?)%/g, replacement: (_, key) => { pattern: /%fa:(.+?)%/g, replacement: (_, key) => {
const args = key.split(' '); const args = key.split(' ');
let prefix = 'fas'; let prefix = 'fas';
let klass = ''; const classes = [];
let transform = ''; let transform = '';
let name; let name;
args.forEach(arg => { args.forEach(arg => {
if (arg == 'R' || arg == 'S') { if (arg == 'R' || arg == 'S' || arg == 'B') {
prefix = prefix =
arg == 'R' ? 'far' : arg == 'R' ? 'far' :
arg == 'S' ? 'fas' : arg == 'S' ? 'fas' :
arg == 'B' ? 'fab' :
''; '';
} else if (arg[0] == '.') { } else if (arg[0] == '.') {
klass += arg.substr(1) + ' '; classes.push('fa-' + arg.substr(1));
} else if (arg[0] == '-') { } else if (arg[0] == '-') {
transform = arg.substr(1).split('|').join(' '); transform = arg.substr(1).split('|').join(' ');
} else { } else {
@ -38,10 +43,11 @@ export default () => ({
} }
}); });
const icon = fontawesome.icon({ prefix, iconName: name }); const icon = fontawesome.icon({ prefix, iconName: name }, {
classes: classes
});
if (icon) { if (icon) {
icon.class = klass;
icon.transform = fontawesome.parse.transform(transform); icon.transform = fontawesome.parse.transform(transform);
return `<i data-fa style="display:inline-block" class="${name}">${icon.html[0]}</i>`; return `<i data-fa style="display:inline-block" class="${name}">${icon.html[0]}</i>`;
} else { } else {