From 02def5c3dd9cdae0ce3d00123ee0e048555e0960 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: Tue, 13 Feb 2018 18:13:31 +0900 Subject: [PATCH] wip --- src/web/app/desktop/-tags/progress-dialog.tag | 97 ------------------- .../views/components/progress-dialog.vue | 92 ++++++++++++++++++ .../views/components/settings-window.vue | 4 +- 3 files changed, 94 insertions(+), 99 deletions(-) delete mode 100644 src/web/app/desktop/-tags/progress-dialog.tag create mode 100644 src/web/app/desktop/views/components/progress-dialog.vue diff --git a/src/web/app/desktop/-tags/progress-dialog.tag b/src/web/app/desktop/-tags/progress-dialog.tag deleted file mode 100644 index 5df5d7f57a..0000000000 --- a/src/web/app/desktop/-tags/progress-dialog.tag +++ /dev/null @@ -1,97 +0,0 @@ -<mk-progress-dialog> - <mk-window ref="window" is-modal={ false } can-close={ false } width={ '500px' }> - <yield to="header">{ parent.title }<mk-ellipsis/></yield> - <yield to="content"> - <div class="body"> - <p class="init" v-if="isNaN(parent.value)">待機中<mk-ellipsis/></p> - <p class="percentage" v-if="!isNaN(parent.value)">{ Math.floor((parent.value / parent.max) * 100) }</p> - <progress v-if="!isNaN(parent.value) && parent.value < parent.max" value={ isNaN(parent.value) ? 0 : parent.value } max={ parent.max }></progress> - <div class="progress waiting" v-if="parent.value >= parent.max"></div> - </div> - </yield> - </mk-window> - <style lang="stylus" scoped> - :scope - display block - - > mk-window - [data-yield='content'] - - > .body - padding 18px 24px 24px 24px - - > .init - display block - margin 0 - text-align center - color rgba(#000, 0.7) - - > .percentage - display block - margin 0 0 4px 0 - text-align center - line-height 16px - color rgba($theme-color, 0.7) - - &:after - content '%' - - > progress - > .progress - display block - margin 0 - width 100% - height 10px - background transparent - border none - border-radius 4px - overflow hidden - - &::-webkit-progress-value - background $theme-color - - &::-webkit-progress-bar - background rgba($theme-color, 0.1) - - > .progress - background linear-gradient( - 45deg, - lighten($theme-color, 30%) 25%, - $theme-color 25%, - $theme-color 50%, - lighten($theme-color, 30%) 50%, - lighten($theme-color, 30%) 75%, - $theme-color 75%, - $theme-color - ) - background-size 32px 32px - animation progress-dialog-tag-progress-waiting 1.5s linear infinite - - @keyframes progress-dialog-tag-progress-waiting - from {background-position: 0 0;} - to {background-position: -64px 32px;} - - </style> - <script lang="typescript"> - this.title = this.opts.title; - this.value = parseInt(this.opts.value, 10); - this.max = parseInt(this.opts.max, 10); - - this.on('mount', () => { - this.$refs.window.on('closed', () => { - this.$destroy(); - }); - }); - - this.updateProgress = (value, max) => { - this.update({ - value: parseInt(value, 10), - max: parseInt(max, 10) - }); - }; - - this.close = () => { - this.$refs.window.close(); - }; - </script> -</mk-progress-dialog> diff --git a/src/web/app/desktop/views/components/progress-dialog.vue b/src/web/app/desktop/views/components/progress-dialog.vue new file mode 100644 index 0000000000..9a925d5b1d --- /dev/null +++ b/src/web/app/desktop/views/components/progress-dialog.vue @@ -0,0 +1,92 @@ +<template> +<mk-window ref="window" :is-modal="false" :can-close="false" width="500px" @closed="$destroy"> + <span to="header">{{ title }}<mk-ellipsis/></span> + <div to="content"> + <div :class="$style.body"> + <p :class="$style.init" v-if="isNaN(value)">待機中<mk-ellipsis/></p> + <p :class="$style.percentage" v-if="!isNaN(value)">{{ Math.floor((value / max) * 100) }}</p> + <progress :class="$style.progress" + v-if="!isNaN(value) && value < max" + :value="isNaN(value) ? 0 : value" + :max="max" + ></progress> + <div :class="[$style.progress, $style.waiting]" v-if="value >= max"></div> + </div> + </div> +</mk-window> +</template> + +<script lang="ts"> +import Vue from 'vue'; +export default Vue.extend({ + props: ['title', 'initValue', 'initMax'], + data() { + return { + value: this.initValue, + max: this.initMax + }; + }, + methods: { + update(value, max) { + this.value = parseInt(value, 10); + this.max = parseInt(max, 10); + } + } +}); +</script> + +<style lang="stylus" module> +.body + padding 18px 24px 24px 24px + +.init + display block + margin 0 + text-align center + color rgba(#000, 0.7) + +.percentage + display block + margin 0 0 4px 0 + text-align center + line-height 16px + color rgba($theme-color, 0.7) + + &:after + content '%' + +.progress + display block + margin 0 + width 100% + height 10px + background transparent + border none + border-radius 4px + overflow hidden + + &::-webkit-progress-value + background $theme-color + + &::-webkit-progress-bar + background rgba($theme-color, 0.1) + +.waiting + background linear-gradient( + 45deg, + lighten($theme-color, 30%) 25%, + $theme-color 25%, + $theme-color 50%, + lighten($theme-color, 30%) 50%, + lighten($theme-color, 30%) 75%, + $theme-color 75%, + $theme-color + ) + background-size 32px 32px + animation progress-dialog-tag-progress-waiting 1.5s linear infinite + + @keyframes progress-dialog-tag-progress-waiting + from {background-position: 0 0;} + to {background-position: -64px 32px;} + +</style> diff --git a/src/web/app/desktop/views/components/settings-window.vue b/src/web/app/desktop/views/components/settings-window.vue index 56d839851f..074bd2e240 100644 --- a/src/web/app/desktop/views/components/settings-window.vue +++ b/src/web/app/desktop/views/components/settings-window.vue @@ -1,7 +1,7 @@ <template> -<mk-window ref="window" is-modal width='700px' height='550px' @closed="$destroy"> +<mk-window is-modal width='700px' height='550px' @closed="$destroy"> <span slot="header" :class="$style.header">%fa:cog%設定</span> - <div to="content"> + <div slot="content"> <mk-settings/> </div> </mk-window>