wip
This commit is contained in:
こぴなたみぽ
parent
c0c8b0e269
commit
02def5c3dd
|
|
@ -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>
|
||||
92
src/web/app/desktop/views/components/progress-dialog.vue
Normal file
92
src/web/app/desktop/views/components/progress-dialog.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue