forked from FoundKeyGang/FoundKey
モバイルのドライブをダークモード対応した
This commit is contained in:
parent
359da9a5a1
commit
4d6b9f62e5
6 changed files with 68 additions and 55 deletions
|
@ -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"
|
||||||
|
@ -25,7 +25,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<div>
|
<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="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>
|
||||||
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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()"
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue