This commit is contained in:
tamaina 2019-03-19 17:35:50 +09:00 committed by syuilo
parent 8ca1fe3f0a
commit 87c5a9d9a6
3 changed files with 62 additions and 65 deletions

View file

@ -3,12 +3,14 @@
<ol v-if="uploads.length > 0"> <ol v-if="uploads.length > 0">
<li v-for="ctx in uploads" :key="ctx.id"> <li v-for="ctx in uploads" :key="ctx.id">
<div class="img" :style="{ backgroundImage: `url(${ ctx.img })` }"></div> <div class="img" :style="{ backgroundImage: `url(${ ctx.img })` }"></div>
<p class="name"><fa icon="spinner" pulse/>{{ ctx.name }}</p> <div class="top">
<p class="status"> <p class="name"><fa icon="spinner" pulse/>{{ ctx.name }}</p>
<span class="initing" v-if="ctx.progress == undefined">{{ $t('waiting') }}<mk-ellipsis/></span> <p class="status">
<span class="kb" v-if="ctx.progress != undefined">{{ String(Math.floor(ctx.progress.value / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i> / {{ String(Math.floor(ctx.progress.max / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i></span> <span class="initing" v-if="ctx.progress == undefined">{{ $t('waiting') }}<mk-ellipsis/></span>
<span class="percentage" v-if="ctx.progress != undefined">{{ Math.floor((ctx.progress.value / ctx.progress.max) * 100) }}</span> <span class="kb" v-if="ctx.progress != undefined">{{ String(Math.floor(ctx.progress.value / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i> / {{ String(Math.floor(ctx.progress.max / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i></span>
</p> <span class="percentage" v-if="ctx.progress != undefined">{{ Math.floor((ctx.progress.value / ctx.progress.max) * 100) }}</span>
</p>
</div>
<progress v-if="ctx.progress != undefined && ctx.progress.value != ctx.progress.max" :value="ctx.progress.value" :max="ctx.progress.max"></progress> <progress v-if="ctx.progress != undefined && ctx.progress.value != ctx.progress.max" :value="ctx.progress.value" :max="ctx.progress.max"></progress>
<div class="progress initing" v-if="ctx.progress == undefined"></div> <div class="progress initing" v-if="ctx.progress == undefined"></div>
<div class="progress waiting" v-if="ctx.progress != undefined && ctx.progress.value == ctx.progress.max"></div> <div class="progress waiting" v-if="ctx.progress != undefined && ctx.progress.value == ctx.progress.max"></div>
@ -116,12 +118,17 @@ export default Vue.extend({
list-style none list-style none
> li > li
display block display grid
margin 8px 0 0 0 margin 8px 0 0 0
padding 0 padding 0
height 36px height 36px
width: 100%
box-shadow 0 -1px 0 var(--primaryAlpha01) box-shadow 0 -1px 0 var(--primaryAlpha01)
border-top solid 8px transparent border-top solid 8px transparent
grid-template-columns 36px calc(100% - 44px)
grid-template-rows 1fr 8px
column-gap 8px
box-sizing content-box
&:first-child &:first-child
margin 0 margin 0
@ -130,68 +137,62 @@ export default Vue.extend({
> .img > .img
display block display block
position absolute
top 0
left 0
width 36px
height 36px
background-size cover background-size cover
background-position center center background-position center center
grid-column 1 / 2
grid-row 1 / 3
> .name > .top
display block display flex
position absolute grid-column 2 / 3
top 0 grid-row 1 / 2
left 44px
margin 0
padding 0
max-width 256px
font-size 0.8em
color var(--primaryAlpha07)
white-space nowrap
text-overflow ellipsis
overflow hidden
> [data-icon]
margin-right 4px
> .status
display block
position absolute
top 0
right 0
margin 0
padding 0
font-size 0.8em
> .initing
color var(--primaryAlpha05)
> .kb
color var(--primaryAlpha05)
> .percentage
display inline-block
width 48px
text-align right
> .name
display block
padding 0 8px 0 0
margin 0
font-size 0.8em
color var(--primaryAlpha07) color var(--primaryAlpha07)
white-space nowrap
text-overflow ellipsis
overflow hidden
flex-shrink 1
&:after > [data-icon]
content '%' margin-right 4px
> .status
display block
margin 0 0 0 auto
padding 0
font-size 0.8em
flex-shrink 0
> .initing
color var(--primaryAlpha05)
> .kb
color var(--primaryAlpha05)
> .percentage
display inline-block
width 48px
text-align right
color var(--primaryAlpha07)
&:after
content '%'
> progress > progress
display block display block
position absolute
bottom 0
right 0
margin 0
width calc(100% - 44px)
height 8px
background transparent background transparent
border none border none
border-radius 4px border-radius 4px
overflow hidden overflow hidden
grid-column 2 / 3
grid-row 2 / 3
z-index 2
&::-webkit-progress-value &::-webkit-progress-value
background var(--primary) background var(--primary)
@ -201,12 +202,6 @@ export default Vue.extend({
> .progress > .progress
display block display block
position absolute
bottom 0
right 0
margin 0
width calc(100% - 44px)
height 8px
border none border none
border-radius 4px border-radius 4px
background linear-gradient( background linear-gradient(
@ -221,6 +216,9 @@ export default Vue.extend({
) )
background-size 32px 32px background-size 32px 32px
animation bg 1.5s linear infinite animation bg 1.5s linear infinite
grid-column 2 / 3
grid-row 2 / 3
z-index 1
&.initing &.initing
opacity 0.3 opacity 0.3

View file

@ -205,7 +205,7 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
.gvfdktuvdgwhmztnuekzkswkjygptfcv .gvfdktuvdgwhmztnuekzkswkjygptfcv
padding 8px 0 0 0 padding 8px 0 0 0
height 180px min-height 180px
border-radius 4px border-radius 4px
&, * &, *

View file

@ -101,8 +101,7 @@ export default Vue.extend({
font-size 0.9em font-size 0.9em
font-weight bold font-weight bold
color var(--text) color var(--text)
text-overflow ellipsis word-break break-word
overflow-wrap break-word
> .ext > .ext
opacity 0.5 opacity 0.5