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

wip

Browse Source
This commit is contained in:
syuilo
2018-09-27 15:19:11 +09:00
parent 7b8a2aef0f
commit 9e319006f3
7 changed files with 27 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/client/app/desktop/views/components/ui.header.account.vue
View File

@@ -134,7 +134,7 @@ root(isDark)
display block
margin 0
padding 0
color #9eaba8
color var(--desktopHeaderFg)
border none
background transparent
cursor pointer
@@ -144,14 +144,11 @@ root(isDark)
&:hover
&[data-active='true']
color isDark ? #fff : darken(#9eaba8, 20%)
color var(--desktopHeaderHoverFg)
> .avatar
filter saturate(150%)
&:active
color isDark ? #fff : darken(#9eaba8, 30%)
> .username
display block
float left

14
src/client/app/desktop/views/components/ui.header.nav.vue
View File

@@ -95,9 +95,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
root(isDark)
.nav
display inline-block
margin 0
padding 0
@@ -129,7 +127,7 @@ root(isDark)
padding 0 24px
font-size 13px
font-variant small-caps
color isDark ? #b8c5ca : #9eaba8
color var(--desktopHeaderFg)
text-decoration none
transition none
cursor pointer
@@ -138,7 +136,7 @@ root(isDark)
pointer-events none
&:hover
color isDark ? #fff : darken(#9eaba8, 20%)
color var(--desktopHeaderHoverFg)
text-decoration none
> [data-fa]:first-child
@@ -162,10 +160,4 @@ root(isDark)
@media (max-width 700px)
padding 0 12px
.nav[data-darkmode]
root(true)
.nav:not([data-darkmode])
root(false)
</style>

18
src/client/app/desktop/views/components/ui.header.notifications.vue
View File

@@ -61,16 +61,13 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
root(isDark)
.notifications
> button
display block
margin 0
padding 0
width 32px
color #9eaba8
color var(--desktopHeaderFg)
border none
background transparent
cursor pointer
@@ -80,10 +77,7 @@ root(isDark)
&:hover
&[data-active='true']
color isDark ? #fff : darken(#9eaba8, 20%)
&:active
color isDark ? #fff : darken(#9eaba8, 30%)
color var(--desktopHeaderHoverFg)
> [data-fa].bell
font-size 1.2em
@@ -135,10 +129,4 @@ root(isDark)
font-size 1rem
overflow auto
.notifications[data-darkmode]
root(true)
.notifications:not([data-darkmode])
root(false)
</style>

19
src/client/app/desktop/views/components/ui.header.search.vue
View File

@@ -28,8 +28,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
root(isDark)
.search
> [data-fa]
display block
position absolute
@@ -38,7 +37,7 @@ root(isDark)
width 48px
text-align center
line-height 48px
color #9eaba8
color var(--desktopHeaderFg)
pointer-events none
> *
@@ -52,26 +51,20 @@ root(isDark)
width 14em
height 32px
font-size 1em
background rgba(#000, 0.05)
background var(--desktopHeaderSearchBg)
outline none
//border solid 1px #ddd
border none
border-radius 16px
transition color 0.5s ease, border 0.5s ease
color isDark ? #fff : #000
color var(--desktopHeaderSearchFg)
&::placeholder
color #9eaba8
color var(--desktopHeaderFg)
&:hover
background isDark ? rgba(#fff, 0.04) : rgba(#000, 0.08)
background var(--desktopHeaderSearchHoverBg)
&:focus
box-shadow 0 0 0 2px var(--primaryAlpha05) !important
.search[data-darkmode]
root(true)
.search:not([data-darkmode])
root(false)
</style>

63
src/client/app/desktop/views/components/ui.header.vue
View File

@@ -5,7 +5,6 @@
<div class="main" ref="main">
<div class="backdrop"></div>
<div class="main">
<p ref="welcomeback" v-if="$store.getters.isSignedIn">%i18n:@welcome-back%<b>{{ $store.state.i | userName }}</b>%i18n:@adjective%</p>
<div class="container" ref="mainContainer">
<div class="left">
<x-nav/>
@@ -64,55 +63,6 @@ export default Vue.extend({
mounted() {
this.$store.commit('setUiHeaderHeight', this.$el.offsetHeight);
if (this.$store.getters.isSignedIn) {
const ago = (new Date().getTime() - new Date(this.$store.state.i.lastUsedAt).getTime()) / 1000;
const isHisasiburi = ago >= 3600;
this.$store.state.i.lastUsedAt = new Date();
if (isHisasiburi) {
(this.$refs.welcomeback as any).style.display = 'block';
(this.$refs.main as any).style.overflow = 'hidden';
anime({
targets: this.$refs.welcomeback,
top: '0',
opacity: 1,
delay: 1000,
duration: 500,
easing: 'easeOutQuad'
});
anime({
targets: this.$refs.mainContainer,
opacity: 0,
delay: 1000,
duration: 500,
easing: 'easeOutQuad'
});
setTimeout(() => {
anime({
targets: this.$refs.welcomeback,
top: '-48px',
opacity: 0,
duration: 500,
complete: () => {
(this.$refs.welcomeback as any).style.display = 'none';
(this.$refs.main as any).style.overflow = 'initial';
},
easing: 'easeInQuad'
});
anime({
targets: this.$refs.mainContainer,
opacity: 1,
duration: 500,
easing: 'easeInQuad'
});
}, 2500);
}
}
},
methods: {
@@ -161,17 +111,6 @@ root(isDark)
font-size 0.9rem
user-select none
> p
display none
position absolute
top 48px
width 100%
line-height 48px
margin 0
text-align center
color isDark ? #fff : #888
opacity 0
> .container
display flex
width 100%
@@ -190,7 +129,7 @@ root(isDark)
display block
width 48px
height 48px
background-image isDark ? url('/assets/desktop/header-icon.dark.svg') : url('/assets/desktop/header-icon.light.svg')
background-image var(--desktopHeaderIcon)
background-size 24px
background-position center
background-repeat no-repeat