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