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

モバイルのドライブをダークモード対応した

Browse source
This commit is contained in:
syuilo 2018-09-01 12:05:25 +09:00
parent 359da9a5a1
commit 4d6b9f62e5
6 changed files with 68 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
src/client/app/mobile/views/components/drive.file-detail.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="file-detail"> <div class="pyvicwrksnfyhpfgkjwqknuururpaztw">
<div class="preview"> <div class="preview">
<img v-if="kind == 'image'" ref="img" <img v-if="kind == 'image'" ref="img"
:src="file.url" :src="file.url"
@ -134,11 +134,10 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.file-detail root(isDark)
> .preview > .preview
padding 8px padding 8px
background #f0f0f0 background isDark ? #191b22 : #f0f0f0
> img > img
display block display block
@ -150,7 +149,7 @@ export default Vue.extend({
> footer > footer
padding 8px 8px 0 8px padding 8px 8px 0 8px
font-size 0.8em font-size 0.8em
color #888 color isDark ? #606984 : #888
text-align center text-align center
> .separator > .separator
@ -179,25 +178,17 @@ export default Vue.extend({
> .info > .info
padding 14px padding 14px
font-size 0.8em font-size 0.8em
border-top solid 1px #dfdfdf border-top solid 1px isDark ? #1c2023 : #dfdfdf
> div > div
max-width 500px max-width 500px
margin 0 auto margin 0 auto
color isDark ? #9397a2 : #9d9d9d
> .separator > .separator
padding 0 4px padding 0 4px
color #cdcdcd
> .type
> .data-size
color #9d9d9d
> mk-file-type-icon
margin-right 4px
> .created-at > .created-at
color #bdbdbd
> [data-fa] > [data-fa]
margin-right 2px margin-right 2px
@ -207,7 +198,7 @@ export default Vue.extend({
> .menu > .menu
padding 14px padding 14px
border-top solid 1px #dfdfdf border-top solid 1px isDark ? #1c2023 : #dfdfdf
> div > div
max-width 500px max-width 500px
@ -218,14 +209,14 @@ export default Vue.extend({
width 100% width 100%
padding 10px 16px padding 10px 16px
margin 0 0 12px 0 margin 0 0 12px 0
color #333 color isDark ? #dfe3e8 : #333
font-size 0.9em font-size 0.9em
text-align center text-align center
text-decoration none text-decoration none
text-shadow 0 1px 0 rgba(255, 255, 255, 0.9) text-shadow 0 1px 0 isDark ? rgba(0, 0, 0, 0.9) : rgba(255, 255, 255, 0.9)
background-image linear-gradient(#fafafa, #eaeaea) background-image isDark ? linear-gradient(#292f3c, #1b2025) : linear-gradient(#fafafa, #eaeaea)
border 1px solid #ddd border 1px solid isDark ? #121417 : #ddd
border-bottom-color #cecece border-bottom-color isDark ? #060606 : #cecece
border-radius 3px border-radius 3px
&:last-child &:last-child
@ -242,7 +233,7 @@ export default Vue.extend({
> .hash > .hash
padding 14px padding 14px
border-top solid 1px #dfdfdf border-top solid 1px isDark ? #1c2023 : #dfdfdf
> div > div
max-width 500px max-width 500px
@ -252,7 +243,7 @@ export default Vue.extend({
display block display block
margin 0 margin 0
padding 0 padding 0
color #555 color isDark ? #a8b7d0 : #555
font-size 0.9em font-size 0.9em
> [data-fa] > [data-fa]
@ -273,7 +264,7 @@ export default Vue.extend({
> .exif > .exif
padding 14px padding 14px
border-top solid 1px #dfdfdf border-top solid 1px isDark ? #1c2023 : #dfdfdf
> div > div
max-width 500px max-width 500px
@ -283,7 +274,7 @@ export default Vue.extend({
display block display block
margin 0 margin 0
padding 0 padding 0
color #555 color isDark ? #a8b7d0 : #555
font-size 0.9em font-size 0.9em
> [data-fa] > [data-fa]
@ -301,4 +292,10 @@ export default Vue.extend({
border-radius 2px border-radius 2px
background #f5f5f5 background #f5f5f5
.pyvicwrksnfyhpfgkjwqknuururpaztw[data-darkmode]
root(true)
.pyvicwrksnfyhpfgkjwqknuururpaztw:not([data-darkmode])
root(false)
</style> </style>

23
src/client/app/mobile/views/components/drive.file.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<a class="file" @click.prevent="onClick" :href="`/i/drive/file/${ file.id }`" :data-is-selected="isSelected"> <a class="vupkuhvjnjyqaqhsiogfbywvjxynrgsm" @click.prevent="onClick" :href="`/i/drive/file/${ file.id }`" :data-is-selected="isSelected">
<div class="container"> <div class="container">
<div class="thumbnail" :style="thumbnail"></div> <div class="thumbnail" :style="thumbnail"></div>
<div class="body"> <div class="body">
@ -7,20 +7,12 @@
<span>{{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }}</span> <span>{{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }}</span>
<span class="ext" v-if="file.name.lastIndexOf('.') != -1">{{ file.name.substr(file.name.lastIndexOf('.')) }}</span> <span class="ext" v-if="file.name.lastIndexOf('.') != -1">{{ file.name.substr(file.name.lastIndexOf('.')) }}</span>
</p> </p>
<!--
if file.tags.length > 0
ul.tags
each tag in file.tags
li.tag(style={background: tag.color, color: contrast(tag.color)})= tag.name
-->
<footer> <footer>
<span class="type"><mk-file-type-icon :type="file.type"/>{{ file.type }}</span> <span class="type"><mk-file-type-icon :type="file.type"/>{{ file.type }}</span>
<span class="separator"></span> <span class="separator"></span>
<span class="data-size">{{ file.datasize | bytes }}</span> <span class="data-size">{{ file.datasize | bytes }}</span>
<span class="separator"></span> <span class="separator"></span>
<span class="created-at"> <span class="created-at">%fa:R clock%<mk-time :time="file.createdAt"/></span>
%fa:R clock%<mk-time :time="file.createdAt"/>
</span>
<template v-if="file.isSensitive"> <template v-if="file.isSensitive">
<span class="separator"></span> <span class="separator"></span>
<span class="nsfw">%fa:eye-slash% %i18n:@nsfw%</span> <span class="nsfw">%fa:eye-slash% %i18n:@nsfw%</span>
@ -73,7 +65,7 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' @import '~const.styl'
.file root(isDark)
display block display block
text-decoration none !important text-decoration none !important
@ -111,7 +103,7 @@ export default Vue.extend({
padding 0 padding 0
font-size 0.9em font-size 0.9em
font-weight bold font-weight bold
color #555 color isDark ? #fff : #555
text-overflow ellipsis text-overflow ellipsis
overflow-wrap break-word overflow-wrap break-word
@ -138,7 +130,6 @@ export default Vue.extend({
> .separator > .separator
padding 0 4px padding 0 4px
color #CDCDCD
> .type > .type
color #9D9D9D color #9D9D9D
@ -164,4 +155,10 @@ export default Vue.extend({
&, * &, *
color #fff !important color #fff !important
.vupkuhvjnjyqaqhsiogfbywvjxynrgsm[data-darkmode]
root(true)
.vupkuhvjnjyqaqhsiogfbywvjxynrgsm:not([data-darkmode])
root(false)
</style> </style>

12
src/client/app/mobile/views/components/drive.folder.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<a class="root folder" @click.prevent="onClick" :href="`/i/drive/folder/${ folder.id }`"> <a class="jvwxssxsytqlqvrpiymarjlzlsxskqsr" @click.prevent="onClick" :href="`/i/drive/folder/${ folder.id }`">
<div class="container"> <div class="container">
<p class="name">%fa:folder%{{ folder.name }}</p>%fa:angle-right% <p class="name">%fa:folder%{{ folder.name }}</p>%fa:angle-right%
</div> </div>
@ -24,9 +24,9 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.root.folder root(isDark)
display block display block
color #777 color isDark ? #fff : #777
text-decoration none !important text-decoration none !important
* *
@ -55,4 +55,10 @@ export default Vue.extend({
> * > *
height 100% height 100%
.jvwxssxsytqlqvrpiymarjlzlsxskqsr[data-darkmode]
root(true)
.jvwxssxsytqlqvrpiymarjlzlsxskqsr:not([data-darkmode])
root(false)
</style> </style>

35
src/client/app/mobile/views/components/drive.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="mk-drive"> <div class="kmmwchoexgckptowjmjgfsygeltxfeqs">
<nav ref="nav"> <nav ref="nav">
<a @click.prevent="goRoot()" href="/i/drive">%fa:cloud%%i18n:@drive%</a> <a @click.prevent="goRoot()" href="/i/drive">%fa:cloud%%i18n:@drive%</a>
<template v-for="folder in hierarchyFolders"> <template v-for="folder in hierarchyFolders">
@ -26,11 +26,11 @@
</p> </p>
</div> </div>
<div class="folders" v-if="folders.length > 0"> <div class="folders" v-if="folders.length > 0">
<x-folder v-for="folder in folders" :key="folder.id" :folder="folder"/> <x-folder class="folder" v-for="folder in folders" :key="folder.id" :folder="folder"/>
<p v-if="moreFolders">%i18n:@load-more%</p> <p v-if="moreFolders">%i18n:@load-more%</p>
</div> </div>
<div class="files" v-if="files.length > 0"> <div class="files" v-if="files.length > 0">
<x-file v-for="file in files" :key="file.id" :file="file"/> <x-file class="file" v-for="file in files" :key="file.id" :file="file"/>
<button class="more" v-if="moreFiles" @click="fetchMoreFiles"> <button class="more" v-if="moreFiles" @click="fetchMoreFiles">
{{ fetchingMoreFiles ? '%i18n:common.loading%' : '%i18n:@load-more%' }} {{ fetchingMoreFiles ? '%i18n:common.loading%' : '%i18n:@load-more%' }}
</button> </button>
@ -94,6 +94,13 @@ export default Vue.extend({
return this.selectFile; return this.selectFile;
} }
}, },
watch: {
top() {
if (this.isNaked) {
(this.$refs.nav as any).style.top = `${this.top}px`;
}
}
},
mounted() { mounted() {
this.connection = (this as any).os.streams.driveStream.getConnection(); this.connection = (this as any).os.streams.driveStream.getConnection();
this.connectionId = (this as any).os.streams.driveStream.use(); this.connectionId = (this as any).os.streams.driveStream.use();
@ -466,8 +473,8 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-drive root(isDark)
background #fff background isDark ? #282c37 : #fff
> nav > nav
display block display block
@ -480,10 +487,10 @@ export default Vue.extend({
overflow auto overflow auto
white-space nowrap white-space nowrap
font-size 0.9em font-size 0.9em
color rgba(#000, 0.67) color rgba(isDark ? #fff : #000, 0.67)
-webkit-backdrop-filter blur(12px) -webkit-backdrop-filter blur(12px)
backdrop-filter blur(12px) backdrop-filter blur(12px)
background-color rgba(#fff, 0.75) background-color rgba(isDark ? #313543 : #fff, 0.75)
border-bottom solid 1px rgba(#000, 0.13) border-bottom solid 1px rgba(#000, 0.13)
> p > p
@ -509,7 +516,7 @@ export default Vue.extend({
opacity 0.5 opacity 0.5
> .info > .info
border-bottom solid 1px #eee border-bottom solid 1px isDark ? #1c2023 : #eee
&:empty &:empty
display none display none
@ -520,15 +527,15 @@ export default Vue.extend({
margin 0 auto margin 0 auto
padding 4px 16px padding 4px 16px
font-size 10px font-size 10px
color #777 color isDark ? #606984 : #777
> .folders > .folders
> .folder > .folder
border-bottom solid 1px #eee border-bottom solid 1px isDark ? #1c2023 : #eee
> .files > .files
> .file > .file
border-bottom solid 1px #eee border-bottom solid 1px isDark ? #1c2023 : #eee
> .more > .more
display block display block
@ -584,4 +591,10 @@ export default Vue.extend({
> .file > .file
display none display none
.kmmwchoexgckptowjmjgfsygeltxfeqs[data-darkmode]
root(true)
.kmmwchoexgckptowjmjgfsygeltxfeqs:not([data-darkmode])
root(false)
</style> </style>

2
src/client/app/mobile/views/pages/drive.vue
View file

@ -11,7 +11,7 @@
:init-folder="initFolder" :init-folder="initFolder"
:init-file="initFile" :init-file="initFile"
:is-naked="true" :is-naked="true"
:top="48" :top="$store.state.uiHeaderHeight"
@begin-fetch="Progress.start()" @begin-fetch="Progress.start()"
@fetched-mid="Progress.set(0.5)" @fetched-mid="Progress.set(0.5)"
@fetched="Progress.done()" @fetched="Progress.done()"

2
src/client/app/mobile/views/pages/selectdrive.vue
View file

@ -5,7 +5,7 @@
<button class="upload" @click="upload">%fa:upload%</button> <button class="upload" @click="upload">%fa:upload%</button>
<button v-if="multiple" class="ok" @click="ok">%fa:check%</button> <button v-if="multiple" class="ok" @click="ok">%fa:check%</button>
</header> </header>
<mk-drive ref="browser" select-file :multiple="multiple" is-naked :top="42"/> <mk-drive ref="browser" select-file :multiple="multiple" is-naked :top="$store.state.uiHeaderHeight"/>
</div> </div>
</template> </template>