🎨
This commit is contained in:
syuilo
parent
2334b41375
commit
5ae576bad1
@ -1,21 +1,23 @@
|
|||||||
<template>
|
<template>
|
||||||
<mk-window ref="window" is-modal width="800px" height="500px" @closed="destroyDom">
|
<mk-window ref="window" is-modal width="800px" height="500px" @closed="destroyDom">
|
||||||
<span slot="header">
|
<span slot="header" class="jqiaciqv">
|
||||||
<span :class="$style.title">{{ $t('choose-prompt') }}</span>
|
<span class="title">{{ $t('choose-prompt') }}</span>
|
||||||
<span :class="$style.count" v-if="multiple && files.length > 0">({{ $t('chosen-files', { count: files.length }) }})</span>
|
<span class="count" v-if="multiple && files.length > 0">({{ $t('chosen-files', { count: files.length }) }})</span>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<x-drive
|
<div class="rqsvbumu">
|
||||||
ref="browser"
|
<x-drive
|
||||||
:class="$style.browser"
|
ref="browser"
|
||||||
:multiple="multiple"
|
class="browser"
|
||||||
@selected="onSelected"
|
:multiple="multiple"
|
||||||
@change-selection="onChangeSelection"
|
@selected="onSelected"
|
||||||
/>
|
@change-selection="onChangeSelection"
|
||||||
<div :class="$style.footer">
|
/>
|
||||||
<button :class="$style.upload" :title="$t('title')" @click="upload"><fa icon="upload"/></button>
|
<div class="footer">
|
||||||
<button :class="$style.cancel" @click="cancel">{{ $t('cancel') }}</button>
|
<button class="upload" :title="$t('title')" @click="upload"><fa icon="upload"/></button>
|
||||||
<button :class="$style.ok" :disabled="multiple && files.length == 0" @click="ok">{{ $t('ok') }}</button>
|
<ui-button inline @click="cancel" style="margin-right:16px;">{{ $t('cancel') }}</ui-button>
|
||||||
|
<ui-button inline primary :disabled="multiple && files.length == 0" @click="ok">{{ $t('ok') }}</ui-button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</mk-window>
|
</mk-window>
|
||||||
</template>
|
</template>
|
||||||
@ -60,120 +62,67 @@ export default Vue.extend({
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" module>
|
<style lang="stylus" scoped>
|
||||||
.title
|
.jqiaciqv
|
||||||
> [data-icon]
|
.title
|
||||||
margin-right 4px
|
> [data-icon]
|
||||||
|
margin-right 4px
|
||||||
|
|
||||||
.count
|
.count
|
||||||
margin-left 8px
|
margin-left 8px
|
||||||
opacity 0.7
|
|
||||||
|
|
||||||
.browser
|
|
||||||
height calc(100% - 72px)
|
|
||||||
|
|
||||||
.footer
|
|
||||||
height 72px
|
|
||||||
background var(--primaryLighten95)
|
|
||||||
|
|
||||||
.upload
|
|
||||||
display inline-block
|
|
||||||
position absolute
|
|
||||||
top 8px
|
|
||||||
left 16px
|
|
||||||
cursor pointer
|
|
||||||
padding 0
|
|
||||||
margin 8px 4px 0 0
|
|
||||||
width 40px
|
|
||||||
height 40px
|
|
||||||
font-size 1em
|
|
||||||
color var(--primaryAlpha05)
|
|
||||||
background transparent
|
|
||||||
outline none
|
|
||||||
border solid 1px transparent
|
|
||||||
border-radius 4px
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background transparent
|
|
||||||
border-color var(--primaryAlpha03)
|
|
||||||
|
|
||||||
&:active
|
|
||||||
color var(--primaryAlpha06)
|
|
||||||
background transparent
|
|
||||||
border-color var(--primaryAlpha05)
|
|
||||||
//box-shadow 0 2px 4px rgba(var(--primaryDarken50), 0.15) inset
|
|
||||||
|
|
||||||
&:focus
|
|
||||||
&:after
|
|
||||||
content ""
|
|
||||||
pointer-events none
|
|
||||||
position absolute
|
|
||||||
top -5px
|
|
||||||
right -5px
|
|
||||||
bottom -5px
|
|
||||||
left -5px
|
|
||||||
border 2px solid var(--primaryAlpha03)
|
|
||||||
border-radius 8px
|
|
||||||
|
|
||||||
.ok
|
|
||||||
.cancel
|
|
||||||
display block
|
|
||||||
position absolute
|
|
||||||
bottom 16px
|
|
||||||
cursor pointer
|
|
||||||
padding 0
|
|
||||||
margin 0
|
|
||||||
width 120px
|
|
||||||
height 40px
|
|
||||||
font-size 1em
|
|
||||||
outline none
|
|
||||||
border-radius 4px
|
|
||||||
|
|
||||||
&:focus
|
|
||||||
&:after
|
|
||||||
content ""
|
|
||||||
pointer-events none
|
|
||||||
position absolute
|
|
||||||
top -5px
|
|
||||||
right -5px
|
|
||||||
bottom -5px
|
|
||||||
left -5px
|
|
||||||
border 2px solid var(--primaryAlpha03)
|
|
||||||
border-radius 8px
|
|
||||||
|
|
||||||
&:disabled
|
|
||||||
opacity 0.7
|
opacity 0.7
|
||||||
cursor default
|
|
||||||
|
|
||||||
.ok
|
.rqsvbumu
|
||||||
right 16px
|
display flex
|
||||||
color var(--primaryForeground)
|
flex-direction column
|
||||||
background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
|
height 100%
|
||||||
border solid 1px var(--primaryLighten15)
|
|
||||||
|
|
||||||
&:not(:disabled)
|
.browser
|
||||||
font-weight bold
|
flex 1
|
||||||
|
overflow auto
|
||||||
|
|
||||||
&:hover:not(:disabled)
|
.footer
|
||||||
background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
|
padding 16px
|
||||||
border-color var(--primary)
|
background var(--desktopPostFormBg)
|
||||||
|
text-align right
|
||||||
|
|
||||||
&:active:not(:disabled)
|
.upload
|
||||||
background var(--primary)
|
display inline-block
|
||||||
border-color var(--primary)
|
position absolute
|
||||||
|
top 8px
|
||||||
|
left 16px
|
||||||
|
cursor pointer
|
||||||
|
padding 0
|
||||||
|
margin 8px 4px 0 0
|
||||||
|
width 40px
|
||||||
|
height 40px
|
||||||
|
font-size 1em
|
||||||
|
color var(--primaryAlpha05)
|
||||||
|
background transparent
|
||||||
|
outline none
|
||||||
|
border solid 1px transparent
|
||||||
|
border-radius 4px
|
||||||
|
|
||||||
.cancel
|
&:hover
|
||||||
right 148px
|
background transparent
|
||||||
color #888
|
border-color var(--primaryAlpha03)
|
||||||
background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
|
|
||||||
border solid 1px #e2e2e2
|
|
||||||
|
|
||||||
&:hover
|
&:active
|
||||||
background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
|
color var(--primaryAlpha06)
|
||||||
border-color #dcdcdc
|
background transparent
|
||||||
|
border-color var(--primaryAlpha05)
|
||||||
|
//box-shadow 0 2px 4px rgba(var(--primaryDarken50), 0.15) inset
|
||||||
|
|
||||||
&:active
|
&:focus
|
||||||
background #ececec
|
&:after
|
||||||
border-color #dcdcdc
|
content ""
|
||||||
|
pointer-events none
|
||||||
|
position absolute
|
||||||
|
top -5px
|
||||||
|
right -5px
|
||||||
|
bottom -5px
|
||||||
|
left -5px
|
||||||
|
border 2px solid var(--primaryAlpha03)
|
||||||
|
border-radius 8px
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,17 +1,19 @@
|
|||||||
<template>
|
<template>
|
||||||
<mk-window ref="window" is-modal width="800px" height="500px" @closed="destroyDom">
|
<mk-window ref="window" is-modal width="800px" height="500px" @closed="destroyDom">
|
||||||
<span slot="header">
|
<span slot="header">
|
||||||
<span :class="$style.title">{{ $t('choose-prompt') }}</span>
|
<span>{{ $t('choose-prompt') }}</span>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<x-drive
|
<div class="hllkpxxu">
|
||||||
ref="browser"
|
<x-drive
|
||||||
:class="$style.browser"
|
ref="browser"
|
||||||
:multiple="false"
|
class="browser"
|
||||||
/>
|
:multiple="false"
|
||||||
<div :class="$style.footer">
|
/>
|
||||||
<button :class="$style.cancel" @click="cancel">{{ $t('cancel') }}</button>
|
<div class="footer">
|
||||||
<button :class="$style.ok" @click="ok">{{ $t('ok') }}</button>
|
<ui-button inline @click="cancel" style="margin-right:16px;">{{ $t('cancel') }}</ui-button>
|
||||||
|
<ui-button inline @click="ok" primary>{{ $t('ok') }}</ui-button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</mk-window>
|
</mk-window>
|
||||||
</template>
|
</template>
|
||||||
@ -36,79 +38,19 @@ export default Vue.extend({
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" module>
|
<style lang="stylus" scoped>
|
||||||
|
.hllkpxxu
|
||||||
|
display flex
|
||||||
|
flex-direction column
|
||||||
|
height 100%
|
||||||
|
|
||||||
|
.browser
|
||||||
|
flex 1
|
||||||
|
overflow auto
|
||||||
|
|
||||||
.title
|
.footer
|
||||||
> [data-icon]
|
padding 16px
|
||||||
margin-right 4px
|
background var(--desktopPostFormBg)
|
||||||
|
text-align right
|
||||||
.browser
|
|
||||||
height calc(100% - 72px)
|
|
||||||
|
|
||||||
.footer
|
|
||||||
height 72px
|
|
||||||
background var(--primaryLighten95)
|
|
||||||
|
|
||||||
.ok
|
|
||||||
.cancel
|
|
||||||
display block
|
|
||||||
position absolute
|
|
||||||
bottom 16px
|
|
||||||
cursor pointer
|
|
||||||
padding 0
|
|
||||||
margin 0
|
|
||||||
width 120px
|
|
||||||
height 40px
|
|
||||||
font-size 1em
|
|
||||||
outline none
|
|
||||||
border-radius 4px
|
|
||||||
|
|
||||||
&:focus
|
|
||||||
&:after
|
|
||||||
content ""
|
|
||||||
pointer-events none
|
|
||||||
position absolute
|
|
||||||
top -5px
|
|
||||||
right -5px
|
|
||||||
bottom -5px
|
|
||||||
left -5px
|
|
||||||
border 2px solid var(--primaryAlpha03)
|
|
||||||
border-radius 8px
|
|
||||||
|
|
||||||
&:disabled
|
|
||||||
opacity 0.7
|
|
||||||
cursor default
|
|
||||||
|
|
||||||
.ok
|
|
||||||
right 16px
|
|
||||||
color var(--primaryForeground)
|
|
||||||
background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
|
|
||||||
border solid 1px var(--primaryLighten15)
|
|
||||||
|
|
||||||
&:not(:disabled)
|
|
||||||
font-weight bold
|
|
||||||
|
|
||||||
&:hover:not(:disabled)
|
|
||||||
background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
|
|
||||||
border-color var(--primary)
|
|
||||||
|
|
||||||
&:active:not(:disabled)
|
|
||||||
background var(--primary)
|
|
||||||
border-color var(--primary)
|
|
||||||
|
|
||||||
.cancel
|
|
||||||
right 148px
|
|
||||||
color #888
|
|
||||||
background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
|
|
||||||
border solid 1px #e2e2e2
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
|
|
||||||
border-color #dcdcdc
|
|
||||||
|
|
||||||
&:active
|
|
||||||
background #ececec
|
|
||||||
border-color #dcdcdc
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user