summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/app/mobile/views/components/drive.file-detail.vue49
-rw-r--r--src/client/app/mobile/views/components/drive.file.vue23
-rw-r--r--src/client/app/mobile/views/components/drive.folder.vue12
-rw-r--r--src/client/app/mobile/views/components/drive.vue35
-rw-r--r--src/client/app/mobile/views/pages/drive.vue2
-rw-r--r--src/client/app/mobile/views/pages/selectdrive.vue2
6 files changed, 68 insertions, 55 deletions
diff --git a/src/client/app/mobile/views/components/drive.file-detail.vue b/src/client/app/mobile/views/components/drive.file-detail.vue
index deb9941be8..43867211e9 100644
--- a/src/client/app/mobile/views/components/drive.file-detail.vue
+++ b/src/client/app/mobile/views/components/drive.file-detail.vue
@@ -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>
diff --git a/src/client/app/mobile/views/components/drive.file.vue b/src/client/app/mobile/views/components/drive.file.vue
index 6dec4b9f4f..4375cfdd7b 100644
--- a/src/client/app/mobile/views/components/drive.file.vue
+++ b/src/client/app/mobile/views/components/drive.file.vue
@@ -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>
diff --git a/src/client/app/mobile/views/components/drive.folder.vue b/src/client/app/mobile/views/components/drive.folder.vue
index 22ff38fecb..f76ecba6ad 100644
--- a/src/client/app/mobile/views/components/drive.folder.vue
+++ b/src/client/app/mobile/views/components/drive.folder.vue
@@ -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>
diff --git a/src/client/app/mobile/views/components/drive.vue b/src/client/app/mobile/views/components/drive.vue
index c313d225e4..36a6ea2f40 100644
--- a/src/client/app/mobile/views/components/drive.vue
+++ b/src/client/app/mobile/views/components/drive.vue
@@ -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>
diff --git a/src/client/app/mobile/views/pages/drive.vue b/src/client/app/mobile/views/pages/drive.vue
index c7cbe0f72e..657f43c7c3 100644
--- a/src/client/app/mobile/views/pages/drive.vue
+++ b/src/client/app/mobile/views/pages/drive.vue
@@ -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()"
diff --git a/src/client/app/mobile/views/pages/selectdrive.vue b/src/client/app/mobile/views/pages/selectdrive.vue
index 1a162b346c..c098b8c65e 100644
--- a/src/client/app/mobile/views/pages/selectdrive.vue
+++ b/src/client/app/mobile/views/pages/selectdrive.vue
@@ -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>
generated by cgit v1.2.3-freya (git 2.53.0.84.g453e7b744a) at 2026-04-25 16:19:08 +0000