mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-12-14 22:59:35 +09:00
Code

wip

Browse Source
This commit is contained in:
こぴなたみぽ 2018-02-13 18:13:31 +09:00
parent c0c8b0e269
commit 02def5c3dd
3 changed files with 94 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
src/web/app/desktop/-tags/progress-dialog.tag
View File

@ -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
View 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>

4
src/web/app/desktop/views/components/settings-window.vue
View File

@ -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>