monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests Activity

wip

Browse source
This commit is contained in:
syuilo 2018-09-27 15:19:11 +09:00
parent 7b8a2aef0f
commit 9e319006f3
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
7 changed files with 27 additions and 106 deletions
Show stats 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 display block
margin 0 margin 0
padding 0 padding 0
color #9eaba8 color var(--desktopHeaderFg)
border none border none
background transparent background transparent
cursor pointer cursor pointer
@ -144,14 +144,11 @@ root(isDark)
&:hover &:hover
&[data-active='true'] &[data-active='true']
color isDark ? #fff : darken(#9eaba8, 20%) color var(--desktopHeaderHoverFg)
> .avatar > .avatar
filter saturate(150%) filter saturate(150%)
&:active
color isDark ? #fff : darken(#9eaba8, 30%)
> .username > .username
display block display block
float left float left

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

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

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

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

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

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

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

@ -5,7 +5,6 @@
<div class="main" ref="main"> <div class="main" ref="main">
<div class="backdrop"></div> <div class="backdrop"></div>
<div class="main"> <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="container" ref="mainContainer">
<div class="left"> <div class="left">
<x-nav/> <x-nav/>
@ -64,55 +63,6 @@ export default Vue.extend({
mounted() { mounted() {
this.$store.commit('setUiHeaderHeight', this.$el.offsetHeight); 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: { methods: {
@ -161,17 +111,6 @@ root(isDark)
font-size 0.9rem font-size 0.9rem
user-select none 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 > .container
display flex display flex
width 100% width 100%
@ -190,7 +129,7 @@ root(isDark)
display block display block
width 48px width 48px
height 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-size 24px
background-position center background-position center
background-repeat no-repeat background-repeat no-repeat

6
src/client/theme/dark.json
View file

@ -49,6 +49,12 @@
"cwButtonHoverBg": "#707b97", "cwButtonHoverBg": "#707b97",
"reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)", "reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)",
"desktopHeaderBg": "#313543", "desktopHeaderBg": "#313543",
"desktopHeaderFg": "#b8c5ca",
"desktopHeaderHoverFg": "#fff",
"desktopHeaderIcon": "url('/assets/desktop/header-icon.dark.svg')",
"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.05)",
"desktopHeaderSearchHoverBg": "rgba(255, 255, 255, 0.04)",
"desktopHeaderSearchFg": "#fff",
"desktopPostFormBg": "@face", "desktopPostFormBg": "@face",
"desktopPostFormTextareaBg": "rgba(0, 0, 0, 0.25)", "desktopPostFormTextareaBg": "rgba(0, 0, 0, 0.25)",
"desktopPostFormTextareaFg": "#fff", "desktopPostFormTextareaFg": "#fff",

6
src/client/theme/light.json
View file

@ -49,6 +49,12 @@
"cwButtonHoverBg": "#bbc4ce", "cwButtonHoverBg": "#bbc4ce",
"reactionPickerButtonHoverBg": "#eee", "reactionPickerButtonHoverBg": "#eee",
"desktopHeaderBg": "#f7f7f7", "desktopHeaderBg": "#f7f7f7",
"desktopHeaderFg": "#9eaba8",
"desktopHeaderHoverFg": "#7b8c88",
"desktopHeaderIcon": "url('/assets/desktop/header-icon.light.svg')",
"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.05)",
"desktopHeaderSearchHoverBg": "rgba(0, 0, 0, 0.08)",
"desktopHeaderSearchFg": "#000",
"desktopPostFormBg": "#fff6f6", "desktopPostFormBg": "#fff6f6",
"desktopPostFormTextareaBg": "#fff", "desktopPostFormTextareaBg": "#fff",
"desktopPostFormTextareaFg": "#333", "desktopPostFormTextareaFg": "#333",