SWREI/switched
0
0
Fork 0
Code

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

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

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

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

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

@ -1,5 +1,5 @@
<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="thumbnail" :style="thumbnail"></div>
<div class="body">
@ -7,20 +7,12 @@
<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>
</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>
<span class="type"><mk-file-type-icon :type="file.type"/>{{ file.type }}</span>
<span class="separator"></span>
<span class="data-size">{{ file.datasize | bytes }}</span>
<span class="separator"></span>
<span class="created-at">
%fa:R clock%<mk-time :time="file.createdAt"/>
</span>
<span class="created-at">%fa:R clock%<mk-time :time="file.createdAt"/></span>
<template v-if="file.isSensitive">
<span class="separator"></span>
<span class="nsfw">%fa:eye-slash% %i18n:@nsfw%</span>
@ -73,7 +65,7 @@ export default Vue.extend({
<style lang="stylus" scoped>
@import '~const.styl'
.file
root(isDark)
display block
text-decoration none !important
@ -111,7 +103,7 @@ export default Vue.extend({
padding 0
font-size 0.9em
font-weight bold
color #555
color isDark ? #fff : #555
text-overflow ellipsis
overflow-wrap break-word
@ -138,7 +130,6 @@ export default Vue.extend({
> .separator
padding 0 4px
color #CDCDCD
> .type
color #9D9D9D
@ -164,4 +155,10 @@ export default Vue.extend({
&, *
color #fff !important
.vupkuhvjnjyqaqhsiogfbywvjxynrgsm[data-darkmode]
root(true)
.vupkuhvjnjyqaqhsiogfbywvjxynrgsm:not([data-darkmode])
root(false)
</style>

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

@ -1,5 +1,5 @@
<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">
<p class="name">%fa:folder%{{ folder.name }}</p>%fa:angle-right%
</div>
@ -24,9 +24,9 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
.root.folder
root(isDark)
display block
color #777
color isDark ? #fff : #777
text-decoration none !important
*
@ -55,4 +55,10 @@ export default Vue.extend({
> *
height 100%
.jvwxssxsytqlqvrpiymarjlzlsxskqsr[data-darkmode]
root(true)
.jvwxssxsytqlqvrpiymarjlzlsxskqsr:not([data-darkmode])
root(false)
</style>

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

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

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

@ -11,7 +11,7 @@
:init-folder="initFolder"
:init-file="initFile"
:is-naked="true"
:top="48"
:top="$store.state.uiHeaderHeight"
@begin-fetch="Progress.start()"
@fetched-mid="Progress.set(0.5)"
@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 v-if="multiple" class="ok" @click="ok">%fa:check%</button>
</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>
</template>