From a16c23b6f6bcca4c2220541c055a6f48509f12e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=93=E3=81=B4=E3=81=AA=E3=81=9F=E3=81=BF=E3=81=BD?=
<syuilotan@yahoo.co.jp>
Date: Fri, 16 Feb 2018 14:22:34 +0900
Subject: [PATCH] wip
---
.../app/desktop/-tags/pages/selectdrive.tag | 161 ----------------
.../app/desktop/views/pages/selectdrive.vue | 175 ++++++++++++++++++
2 files changed, 175 insertions(+), 161 deletions(-)
delete mode 100644 src/web/app/desktop/-tags/pages/selectdrive.tag
create mode 100644 src/web/app/desktop/views/pages/selectdrive.vue
diff --git a/src/web/app/desktop/-tags/pages/selectdrive.tag b/src/web/app/desktop/-tags/pages/selectdrive.tag
deleted file mode 100644
index dd4d30f412..0000000000
--- a/src/web/app/desktop/-tags/pages/selectdrive.tag
+++ /dev/null
@@ -1,161 +0,0 @@
-<mk-selectdrive-page>
- <mk-drive-browser ref="browser" multiple={ multiple }/>
- <div>
- <button class="upload" title="%i18n:desktop.tags.mk-selectdrive-page.upload%" @click="upload">%fa:upload%</button>
- <button class="cancel" @click="close">%i18n:desktop.tags.mk-selectdrive-page.cancel%</button>
- <button class="ok" @click="ok">%i18n:desktop.tags.mk-selectdrive-page.ok%</button>
- </div>
-
- <style lang="stylus" scoped>
- :scope
- display block
- position fixed
- width 100%
- height 100%
- background #fff
-
- > mk-drive-browser
- height calc(100% - 72px)
-
- > div
- position fixed
- bottom 0
- left 0
- width 100%
- 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">
- const q = (new URL(location)).searchParams;
- this.multiple = q.get('multiple') == 'true' ? true : false;
-
- this.on('mount', () => {
- document.title = '%i18n:desktop.tags.mk-selectdrive-page.title%';
-
- this.$refs.browser.on('selected', file => {
- this.files = [file];
- this.ok();
- });
-
- this.$refs.browser.on('change-selection', files => {
- this.update({
- files: files
- });
- });
- });
-
- this.upload = () => {
- this.$refs.browser.selectLocalFile();
- };
-
- this.close = () => {
- window.close();
- };
-
- this.ok = () => {
- window.opener.cb(this.multiple ? this.files : this.files[0]);
- window.close();
- };
- </script>
-</mk-selectdrive-page>
diff --git a/src/web/app/desktop/views/pages/selectdrive.vue b/src/web/app/desktop/views/pages/selectdrive.vue
new file mode 100644
index 0000000000..da31ef8f0a
--- /dev/null
+++ b/src/web/app/desktop/views/pages/selectdrive.vue
@@ -0,0 +1,175 @@
+<template>
+<div class="mk-selectdrive">
+ <mk-drive ref="browser"
+ :multiple="multiple"
+ @selected="onSelected"
+ @change-selection="onChangeSelection"
+ />
+ <div>
+ <button class="upload" title="%i18n:desktop.tags.mk-selectdrive-page.upload%" @click="upload">%fa:upload%</button>
+ <button class="cancel" @click="close">%i18n:desktop.tags.mk-selectdrive-page.cancel%</button>
+ <button class="ok" @click="ok">%i18n:desktop.tags.mk-selectdrive-page.ok%</button>
+ </div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+ data() {
+ return {
+ files: []
+ };
+ },
+ computed: {
+ multiple(): boolean {
+ const q = (new URL(location.toString())).searchParams;
+ return q.get('multiple') == 'true';
+ }
+ },
+ mounted() {
+ document.title = '%i18n:desktop.tags.mk-selectdrive-page.title%';
+ },
+ methods: {
+ onSelected(file) {
+ this.files = [file];
+ this.ok();
+ },
+ onChangeSelection(files) {
+ this.files = files;
+ },
+ upload() {
+ (this.$refs.browser as any).selectLocalFile();
+ },
+ close() {
+ window.close();
+ },
+ ok() {
+ window.opener.cb(this.multiple ? this.files : this.files[0]);
+ this.close();
+ }
+ }
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-selectdrive
+ display block
+ position fixed
+ width 100%
+ height 100%
+ background #fff
+
+ > .mk-drive
+ height calc(100% - 72px)
+
+ > div
+ position fixed
+ bottom 0
+ left 0
+ width 100%
+ 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>
--
GitLab