puniko/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix #97, Fix #2943 (#4533)

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

122
src/client/app/common/views/components/uploader.vue
View file

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

2
src/client/app/desktop/views/components/drive.file.vue
View file

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

3
src/client/app/mobile/views/components/drive.file.vue
View file

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