Skip to content
Snippets Groups Projects
Commit 87e073a3 authored by こぴなたみぽ's avatar こぴなたみぽ
Browse files

wip

parent 09a388de
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/web/app/desktop/-tags/select-file-from-drive-window.tag deleted 100644 → 0
+ 0
− 173
View file @ 09a388de
<mk-select-file-from-drive-window>
<mk-window ref="window" is-modal={ true } width={ '800px' } height={ '500px' }>
<yield to="header">
<mk-raw content={ parent.title }/>
<span class="count" v-if="parent.multiple && parent.files.length > 0">({ parent.files.length }ファイル選択中)</span>
</yield>
<yield to="content">
<mk-drive-browser ref="browser" multiple={ parent.multiple }/>
<div>
<button class="upload" title="PCからドライブにファイルをアップロード" @click="parent.upload">%fa:upload%</button>
<button class="cancel" @click="parent.close">キャンセル</button>
<button class="ok" disabled={ parent.multiple && parent.files.length == 0 } @click="parent.ok">決定</button>
</div>
</yield>
</mk-window>
<style lang="stylus" scoped>
:scope
> mk-window
[data-yield='header']
> mk-raw
> [data-fa]
margin-right 4px
.count
margin-left 8px
opacity 0.7
[data-yield='content']
> mk-drive-browser
height calc(100% - 72px)
> div
height 72px
background lighten($theme-color, 95%)
> .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 rgba($theme-color, 0.5)
background transparent
outline none
border solid 1px transparent
border-radius 4px
&:hover
background transparent
border-color rgba($theme-color, 0.3)
&:active
color rgba($theme-color, 0.6)
background transparent
border-color rgba($theme-color, 0.5)
box-shadow 0 2px 4px rgba(darken($theme-color, 50%), 0.15) inset
&:focus
&:after
content ""
pointer-events none
position absolute
top -5px
right -5px
bottom -5px
left -5px
border 2px solid rgba($theme-color, 0.3)
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 rgba($theme-color, 0.3)
border-radius 8px
&:disabled
opacity 0.7
cursor default
> .ok
right 16px
color $theme-color-foreground
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
border solid 1px lighten($theme-color, 15%)
&:not(:disabled)
font-weight bold
&:hover:not(:disabled)
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
border-color $theme-color
&:active:not(:disabled)
background $theme-color
border-color $theme-color
> .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>
<script lang="typescript">
this.files = [];
this.multiple = this.opts.multiple != null ? this.opts.multiple : false;
this.title = this.opts.title || '%fa:R file%ファイルを選択';
this.on('mount', () => {
this.$refs.window.refs.browser.on('selected', file => {
this.files = [file];
this.ok();
});
this.$refs.window.refs.browser.on('change-selection', files => {
this.update({
files: files
});
});
this.$refs.window.on('closed', () => {
this.$destroy();
});
});
this.close = () => {
this.$refs.window.close();
};
this.upload = () => {
this.$refs.window.refs.browser.selectLocalFile();
};
this.ok = () => {
this.$emit('selected', this.multiple ? this.files : this.files[0]);
this.$refs.window.close();
};
</script>
</mk-select-file-from-drive-window>
src/web/app/desktop/views/components/choose-file-from-drive-window.vue 0 → 100644
+ 175
− 0
View file @ 87e073a3
<template>
<mk-window ref="window" is-modal width='800px' height='500px' @closed="$destroy">
<span slot="header">
<span v-html="title" :class="$style.title"></span>
<span :class="$style.count" v-if="multiple && files.length > 0">({{ files.length }}ファイル選択中)</span>
</span>
<mk-drive
ref="browser"
:class="$style.browser"
:multiple="multiple"
@selected="onSelected"
@change-selection="onChangeSelection"
/>
<div :class="$style.footer">
<button :class="$style.upload" title="PCからドライブにファイルをアップロード" @click="upload">%fa:upload%</button>
<button :class="$style.cancel" @click="close">キャンセル</button>
<button :class="$style.ok" :disabled="multiple && files.length == 0" @click="ok">決定</button>
</div>
</mk-window>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: {
multiple: {
default: false
},
title: {
default: '%fa:R file%ファイルを選択'
}
},
data() {
return {
files: []
};
},
methods: {
onSelected(file) {
this.files = [file];
this.ok();
},
onChangeselection(files) {
this.files = files;
},
upload() {
(this.$refs.browser as any).selectLocalFile();
},
ok() {
this.$emit('selected', this.multiple ? this.files : this.files[0]);
(this.$refs.window as any).close();
}
}
});
</script>
<style lang="stylus" module>
.title
> [data-fa]
margin-right 4px
.count
margin-left 8px
opacity 0.7
.browser
height calc(100% - 72px)
.footer
height 72px
background lighten($theme-color, 95%)
.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 rgba($theme-color, 0.5)
background transparent
outline none
border solid 1px transparent
border-radius 4px
&:hover
background transparent
border-color rgba($theme-color, 0.3)
&:active
color rgba($theme-color, 0.6)
background transparent
border-color rgba($theme-color, 0.5)
box-shadow 0 2px 4px rgba(darken($theme-color, 50%), 0.15) inset
&:focus
&:after
content ""
pointer-events none
position absolute
top -5px
right -5px
bottom -5px
left -5px
border 2px solid rgba($theme-color, 0.3)
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 rgba($theme-color, 0.3)
border-radius 8px
&:disabled
opacity 0.7
cursor default
.ok
right 16px
color $theme-color-foreground
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
border solid 1px lighten($theme-color, 15%)
&:not(:disabled)
font-weight bold
&:hover:not(:disabled)
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
border-color $theme-color
&:active:not(:disabled)
background $theme-color
border-color $theme-color
.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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment