モバイルのドライブダイアログがおかしいのを修正 & ダークモード対応

This commit is contained in:
syuilo 2018-09-02 18:23:47 +09:00
parent e31921151e
commit ef630195fa
1 changed files with 13 additions and 6 deletions

View File

@ -1,12 +1,12 @@
<template> <template>
<div class="mk-drive-file-chooser"> <div class="cdxzvcfawjxdyxsekbxbfgtplebnoneb">
<div class="body"> <div class="body">
<header> <header>
<h1>%i18n:@select-file%<span class="count" v-if="files.length > 0">({{ files.length }})</span></h1> <h1>%i18n:@select-file%<span class="count" v-if="files.length > 0">({{ files.length }})</span></h1>
<button class="close" @click="cancel">%fa:times%</button> <button class="close" @click="cancel">%fa:times%</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" <mk-drive class="drive" ref="browser"
:select-file="true" :select-file="true"
:multiple="multiple" :multiple="multiple"
@change-selection="onChangeSelection" @change-selection="onChangeSelection"
@ -46,7 +46,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-drive-file-chooser root(isDark)
position fixed position fixed
z-index 20000 z-index 20000
top 0 top 0
@ -59,10 +59,11 @@ export default Vue.extend({
> .body > .body
width 100% width 100%
height 100% height 100%
background #fff background isDark ? #282c37 : #fff
> header > header
border-bottom solid 1px #eee border-bottom solid 1px isDark ? #1b1f29 : #eee
color isDark ? #fff : #111
> h1 > h1
margin 0 margin 0
@ -90,9 +91,15 @@ export default Vue.extend({
line-height 42px line-height 42px
width 42px width 42px
> .mk-drive > .drive
height calc(100% - 42px) height calc(100% - 42px)
overflow scroll overflow scroll
-webkit-overflow-scrolling touch -webkit-overflow-scrolling touch
.cdxzvcfawjxdyxsekbxbfgtplebnoneb[data-darkmode]
root(true)
.cdxzvcfawjxdyxsekbxbfgtplebnoneb:not([data-darkmode])
root(false)
</style> </style>