tcjlj/PicList
1
0
Fork 0
mirror of https://github.com/Kuingsmile/PicList.git synced 2025-02-02 11:08:13 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added: transition for gallery handle-bar

Browse Source
This commit is contained in:
Molunerfinn 2018-07-05 20:21:43 +08:00
parent 61a2a047c7
commit 8785218b0d
2 changed files with 75 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/renderer/components/SettingView/Gallery.vue
View File

@ -1,32 +1,38 @@
<template>
<div id="gallery-view">
<div class="view-title">
相册 - {{ filterList.length }}
相册 - {{ filterList.length }} <i class="el-icon-caret-bottom" @click="toggleHandleBar" :class="{'active': handleBarActive}"></i>
</div>
<el-row class="gallery-list">
<transition name="el-zoom-in-center">
<el-row v-show="handleBarActive">
<el-col :span="20" :offset="2" :class="{ 'long-list': filterList.length > 4 }">
<el-row class="handle-bar" :gutter="16">
<el-col :span="6" v-for="item in $picBed" :key="item.type">
<div class="pic-bed-item" @click="choosePicBed(item.type)" :class="{active: choosedPicBed.indexOf(item.type) !== -1}">
{{ item.name }}
</div>
</el-col>
</el-row>
<el-row class="handle-bar" :gutter="16">
<el-col :span="12">
<el-input placeholder="搜索" size="mini" v-model="searchText"></el-input>
</el-col>
<el-col :span="6">
<div class="item-base" @click="cleanSearch">
清空搜索
</div>
</el-col>
<el-col :span="6">
<div class="item-base delete" :class="{ active: isMultiple(choosedList)}" @click="multiDelete">
<i class="el-icon-delete"></i> 批量删除
</div>
</el-col>
</el-row>
</el-col>
</el-row>
</transition>
<el-row class="gallery-list" :class="{ small: handleBarActive }">
<el-col :span="20" :offset="2">
<el-row class="handle-bar" :gutter="16">
<el-col :span="6" v-for="item in $picBed" :key="item.type">
<div class="pic-bed-item" @click="choosePicBed(item.type)" :class="{active: choosedPicBed.indexOf(item.type) !== -1}">
{{ item.name }}
</div>
</el-col>
</el-row>
<el-row class="handle-bar" :gutter="16">
<el-col :span="12">
<el-input placeholder="搜索" size="mini" v-model="searchText"></el-input>
</el-col>
<el-col :span="6">
<div class="item-base" @click="cleanSearch">
清空搜索
</div>
</el-col>
<el-col :span="6">
<div class="item-base delete" :class="{ active: isMultiple(choosedList)}" @click="multiDelete">
<i class="el-icon-delete"></i> 批量删除
</div>
</el-col>
</el-row>
<el-row :gutter="16">
<gallerys
:images="images"
@ -45,7 +51,7 @@
<i class="el-icon-document" @click="copy(item.imgUrl)"></i>
<i class="el-icon-edit-outline" @click="openDialog(item)"></i>
<i class="el-icon-delete" @click="remove(item.id)"></i>
<el-checkbox v-model="choosedList[item.id]" class="pull-right"></el-checkbox>
<el-checkbox v-model="choosedList[item.id]" class="pull-right" @change=" handleBarActive = true"></el-checkbox>
</div>
</el-col>
</el-row>
@ -89,7 +95,8 @@ export default {
},
choosedList: {},
choosedPicBed: [],
searchText: ''
searchText: '',
handleBarActive: false
}
},
created () {
@ -231,6 +238,9 @@ export default {
return true
})
}
},
toggleHandleBar () {
this.handleBarActive = !this.handleBarActive
}
}
}
@ -243,6 +253,11 @@ export default {
margin 10px auto
.sub-title
font-size 14px
.el-icon-caret-bottom
cursor: pointer
transition all .2s ease-in-out
&.active
transform: rotate(180deg)
.item-base
background #2E2E2E
text-align center
@ -258,7 +273,10 @@ export default {
cursor pointer
background #F15140
color #fff
.long-list
width: calc(83.3333333% - 6px)
#gallery-view
position relative
.pull-right
float right
.gallery-list
@ -267,6 +285,12 @@ export default {
padding 8px 0
overflow-y auto
overflow-x hidden
position absolute
top: 38px
transition all .2s ease-in-out .1s
&.small
height: 245px
top: 152px
&__img
height 150px
position relative

36
yarn.lock
View File

@ -392,8 +392,8 @@ async-exit-hook@^2.0.1:
resolved "https://registry.yarnpkg.com/async-exit-hook/-/async-exit-hook-2.0.1.tgz#8bd8b024b0ec9b1c01cccb9af9db29bd717dfaf3"
async-validator@~1.8.1:
version "1.8.1"
resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-1.8.1.tgz#6665788ca39269af770e5ee02f0e557f2438d2ca"
version "1.8.2"
resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-1.8.2.tgz#b77597226e96242f8d531c0d46ae295f62422ba4"
dependencies:
babel-runtime "6.x"
@ -671,8 +671,8 @@ babel-helper-to-multiple-sequence-expressions@^0.2.0:
resolved "https://registry.yarnpkg.com/babel-helper-to-multiple-sequence-expressions/-/babel-helper-to-multiple-sequence-expressions-0.2.0.tgz#d1a419634c6cb301f27858c659167cfee0a9d318"
babel-helper-vue-jsx-merge-props@^2.0.0:
version "2.0.2"
resolved "https://registry.yarnpkg.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.2.tgz#aceb1c373588279e2755ea1cfd35c22394fd33f8"
version "2.0.3"
resolved "https://registry.yarnpkg.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz#22aebd3b33902328e513293a8e4992b384f9f1b6"
babel-helpers@^6.24.1:
version "6.24.1"
@ -2290,10 +2290,14 @@ copy-webpack-plugin@^4.0.1:
minimatch "^3.0.4"
node-dir "^0.1.10"
core-js@^2.2.0, core-js@^2.4.0, core-js@^2.5.0:
core-js@^2.2.0, core-js@^2.5.0:
version "2.5.1"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.1.tgz#ae6874dc66937789b80754ff5428df66819ca50b"
core-js@^2.4.0:
version "2.5.7"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.7.tgz#f972608ff0cead68b841a16a932d0b183791814e"
core-util-is@1.0.2, core-util-is@^1.0.2, core-util-is@~1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@ -3073,12 +3077,14 @@ electron@^1.7.5:
extract-zip "^1.0.3"
element-ui@^2.0.5:
version "2.0.5"
resolved "https://registry.yarnpkg.com/element-ui/-/element-ui-2.0.5.tgz#e001cb3514d8303a54f2b7d893b916acfc9ac57d"
version "2.4.3"
resolved "https://registry.yarnpkg.com/element-ui/-/element-ui-2.4.3.tgz#17a09ba6332b17a90002d86070697dcdb88fe0a5"
dependencies:
async-validator "~1.8.1"
babel-helper-vue-jsx-merge-props "^2.0.0"
deepmerge "^1.2.0"
normalize-wheel "^1.0.1"
resize-observer-polyfill "^1.5.0"
throttle-debounce "^1.0.1"
elliptic@^6.0.0:
@ -5835,6 +5841,10 @@ normalize-url@^1.4.0:
query-string "^4.1.0"
sort-keys "^1.0.0"
normalize-wheel@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz#aec886affdb045070d856447df62ecf86146ec45"
npm-install-package@~2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/npm-install-package/-/npm-install-package-2.1.0.tgz#d7efe3cfcd7ab00614b896ea53119dc9ab259125"
@ -7045,8 +7055,8 @@ regenerator-runtime@^0.10.0:
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658"
regenerator-runtime@^0.11.0:
version "0.11.0"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.0.tgz#7e54fe5b5ccd5d6624ea6255c3473be090b802e1"
version "0.11.1"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
regenerator-transform@^0.10.0:
version "0.10.1"
@ -7233,6 +7243,10 @@ requires-port@1.0.x, requires-port@1.x.x, requires-port@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
resize-observer-polyfill@^1.5.0:
version "1.5.0"
resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz#660ff1d9712a2382baa2cad450a4716209f9ca69"
resolve-cwd@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@ -8041,8 +8055,8 @@ thenify-all@^1.0.0:
any-promise "^1.0.0"
throttle-debounce@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-1.0.1.tgz#dad0fe130f9daf3719fdea33dc36a8e6ba7f30b5"
version "1.1.0"
resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-1.1.0.tgz#51853da37be68a155cb6e827b3514a3c422e89cd"
throttleit@0.0.2:
version "0.0.2"