e2net/iceshrimp-legacy
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Activity

🎨

Browse source
This commit is contained in:
syuilo 2018-06-21 01:46:35 +09:00
parent eb0c378138
commit 46d7cee639
4 changed files with 126 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
locales/ja.yml
View file

@ -727,7 +727,7 @@ desktop/views/pages/user/user.friends.vue:
loading: "読み込み中" loading: "読み込み中"
no-users: "よく話すユーザーはいません" no-users: "よく話すユーザーはいません"
desktop/views/pages/user/user.header.vue: desktop/views/pages/user/user.vue:
is-suspended: "このユーザーは凍結されています。" is-suspended: "このユーザーは凍結されています。"
is-remote: "このユーザーはリモートユーザーです。" is-remote: "このユーザーはリモートユーザーです。"
view-remote: "正確な情報を見る" view-remote: "正確な情報を見る"

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

@ -1,7 +1,5 @@
<template> <template>
<div class="header" :data-is-dark-background="user.bannerUrl != null"> <div class="header" :data-is-dark-background="user.bannerUrl != null">
<div class="is-suspended" v-if="user.isSuspended"><p>%fa:exclamation-triangle% %i18n:@is-suspended%</p></div>
<div class="is-remote" v-if="user.host != null"><p>%fa:exclamation-triangle% %i18n:@is-remote%<a :href="user.url || user.uri" target="_blank">%i18n:@view-remote%</a></p></div>
<div class="banner-container" :style="style"> <div class="banner-container" :style="style">
<div class="banner" ref="banner" :style="style" @click="onBannerClick"></div> <div class="banner" ref="banner" :style="style" @click="onBannerClick"></div>
<div class="fade"></div> <div class="fade"></div>
@ -34,16 +32,16 @@ export default Vue.extend({
}, },
mounted() { mounted() {
if (this.user.bannerUrl) { if (this.user.bannerUrl) {
window.addEventListener('load', this.onScroll); //window.addEventListener('load', this.onScroll);
window.addEventListener('scroll', this.onScroll, { passive: true }); //window.addEventListener('scroll', this.onScroll, { passive: true });
window.addEventListener('resize', this.onScroll); //window.addEventListener('resize', this.onScroll);
} }
}, },
beforeDestroy() { beforeDestroy() {
if (this.user.bannerUrl) { if (this.user.bannerUrl) {
window.removeEventListener('load', this.onScroll); //window.removeEventListener('load', this.onScroll);
window.removeEventListener('scroll', this.onScroll); //window.removeEventListener('scroll', this.onScroll);
window.removeEventListener('resize', this.onScroll); //window.removeEventListener('resize', this.onScroll);
} }
}, },
methods: { methods: {
@ -80,25 +78,6 @@ root(isDark)
border-radius 6px border-radius 6px
overflow hidden overflow hidden
> .is-suspended
> .is-remote
&.is-suspended
color #570808
background #ffdbdb
&.is-remote
color #573c08
background #fff0db
> p
margin 0 auto
padding 14px 16px
max-width 1200px
font-size 14px
> a
font-weight bold
&[data-is-dark-background] &[data-is-dark-background]
> .banner-container > .banner-container
> .banner > .banner

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

@ -1,9 +1,9 @@
<template> <template>
<div class="timeline"> <div class="oh5y2r7l5lx8j6jj791ykeiwgihheguk">
<header> <header>
<span :data-active="mode == 'default'" @click="mode = 'default'">%i18n:@default%</span> <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'">%i18n:@with-replies%</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'">%i18n:@with-media%</span> <span :data-active="mode == 'with-media'" @click="mode = 'with-media'">%fa:images% %i18n:@with-media%</span>
</header> </header>
<div class="loading" v-if="fetching"> <div class="loading" v-if="fetching">
<mk-ellipsis-icon/> <mk-ellipsis-icon/>
@ -114,25 +114,44 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' @import '~const.styl'
.timeline root(isDark)
background #fff background isDark ? #282C37 : #fff
> header > header
padding 8px 16px padding 0 8px
border-bottom solid 1px #eee z-index 10
background isDark ? #313543 : #fff
border-radius 6px 6px 0 0
box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08)
> span > span
margin-right 16px display inline-block
line-height 27px padding 0 10px
font-size 18px line-height 42px
color #555 font-size 12px
user-select none
&[data-active]
color $theme-color
cursor default
font-weight bold
&:before
content ""
display block
position absolute
bottom 0
left -8px
width calc(100% + 16px)
height 2px
background $theme-color
&:not([data-active]) &:not([data-active])
color $theme-color color isDark ? #9aa2a7 : #6f7477
cursor pointer cursor pointer
&:hover &:hover
text-decoration underline color isDark ? #d9dcde : #525a5f
> .loading > .loading
padding 64px 0 padding 64px 0
@ -151,4 +170,10 @@ export default Vue.extend({
font-size 3em font-size 3em
color #ccc color #ccc
.oh5y2r7l5lx8j6jj791ykeiwgihheguk[data-darkmode]
root(true)
.oh5y2r7l5lx8j6jj791ykeiwgihheguk:not([data-darkmode])
root(false)
</style> </style>

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

@ -1,21 +1,25 @@
<template> <template>
<mk-ui> <mk-ui>
<div class="zwwan0di1v4356rmdbjmwnn32tptpdp2" v-if="!fetching"> <div class="zwwan0di1v4356rmdbjmwnn32tptpdp2" v-if="!fetching" :data-darkmode="$store.state.device.darkmode">
<div class="main"> <div class="is-suspended" v-if="user.isSuspended || true">%fa:exclamation-triangle% %i18n:@is-suspended%</div>
<x-header :user="user"/> <div class="is-remote" v-if="user.host != null || true">%fa:exclamation-triangle% %i18n:@is-remote%<a :href="user.url || user.uri" target="_blank">%i18n:@view-remote%</a></div>
<mk-note-detail v-if="user.pinnedNote" :note="user.pinnedNote" :compact="true"/> <main>
<x-timeline class="timeline" ref="tl" :user="user"/> <div class="main">
</div> <x-header :user="user"/>
<div class="side"> <mk-note-detail v-if="user.pinnedNote" :note="user.pinnedNote" :compact="true"/>
<x-profile :user="user"/> <x-timeline class="timeline" ref="tl" :user="user"/>
<mk-calendar @chosen="warp" :start="new Date(user.createdAt)"/> </div>
<mk-activity :user="user"/> <div class="side">
<x-photos :user="user"/> <x-profile :user="user"/>
<x-friends :user="user"/> <mk-calendar @chosen="warp" :start="new Date(user.createdAt)"/>
<x-followers-you-know v-if="$store.getters.isSignedIn && $store.state.i.id != user.id" :user="user"/> <mk-activity :user="user"/>
<div class="nav"><mk-nav/></div> <x-photos :user="user"/>
<p v-if="user.host === null">%i18n:@last-used-at%: <b><mk-time :time="user.lastUsedAt"/></b></p> <x-friends :user="user"/>
</div> <x-followers-you-know v-if="$store.getters.isSignedIn && $store.state.i.id != user.id" :user="user"/>
<div class="nav"><mk-nav/></div>
<p v-if="user.host === null">%i18n:@last-used-at%: <b><mk-time :time="user.lastUsedAt"/></b></p>
</div>
</main>
</div> </div>
</mk-ui> </mk-ui>
</template> </template>
@ -73,50 +77,77 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.zwwan0di1v4356rmdbjmwnn32tptpdp2 root(isDark)
display flex
justify-content center
width 980px width 980px
padding 16px padding 16px
margin 0 auto margin 0 auto
> .main > .is-suspended
> .side > .is-remote
> *:not(:last-child) margin-bottom 16px
margin-bottom 16px padding 14px 16px
font-size 14px
border-radius 6px
> .main &.is-suspended
flex 1 color isDark ? #ffb4b4 : #570808
margin-right 16px background isDark ? #611d1d : #ffdbdb
border solid 1px isDarl ? #d64a4a : #e09696
> .timeline &.is-remote
border 1px solid rgba(#000, 0.075) color isDark ? #ffbd3e : #573c08
border-radius 6px background isDark ? #42321c : #fff0db
border solid 1px isDark ? #90733c : #dcbb7b
> .side > a
width 275px font-weight bold
> p > main
display block display flex
margin 0 justify-content center
padding 0 12px
text-align center
font-size 0.8em
color #aaa
> .nav > .main
padding 16px > .side
font-size 12px > *:not(:last-child)
color #aaa margin-bottom 16px
background #fff
border solid 1px rgba(#000, 0.075)
border-radius 6px
a > .main
color #999 flex 1
margin-right 16px
i > .timeline
color #ccc border 1px solid rgba(#000, 0.075)
border-radius 6px
> .side
width 275px
> p
display block
margin 0
padding 0 12px
text-align center
font-size 0.8em
color #aaa
> .nav
padding 16px
font-size 12px
color #aaa
background #fff
border solid 1px rgba(#000, 0.075)
border-radius 6px
a
color #999
i
color #ccc
.zwwan0di1v4356rmdbjmwnn32tptpdp2[data-darkmode]
root(true)
.zwwan0di1v4356rmdbjmwnn32tptpdp2:not([data-darkmode])
root(false)
</style> </style>