Change picture selection animation

Author: xnerhu

3-panel/src/views/Pages/Gallery/components/PicturesDialog/components/Picture/index.js

@@ -36,34 +36,26 @@ export default class Picture extends Component {
   }
 
   select (flag) {
-    const picturesDialog = this.props.getPicturesDialog()
-
     const selectContainer = this.elements.selectContainer
     const img = this.elements.img
-    const icon = this.elements.icon
-
-    const size = (flag) ? (picturesDialog.elements.container.classList.contains('vertical') ? img.clientHeight : img.clientWidth) : 0
 
-    selectContainer.style.borderRadius = (flag) ? '0%' : '100%'
-
-    setTimeout(function () {
-      selectContainer.style.width = size + 'px'
-      selectContainer.style.height = size + 'px'
-    }, 10)
+    selectContainer.style.width = img.clientWidth + 1 + 'px'
+    selectContainer.style.height = img.clientHeight + 'px'
 
-    icon.style[(flag) ? 'display' : 'opacity'] = (flag) ? 'block' : '0'
+    selectContainer.style[(flag) ? 'display' : 'opacity'] = (flag) ? 'block' : '0'
 
     setTimeout(function () {
-      icon.style[(flag) ? 'opacity' : 'display'] = (flag) ? '1' : 'none'
-    }, (flag) ? 10 : 150)
+      selectContainer.style[(flag) ? 'opacity' : 'display'] = (flag) ? '1' : 'none'
+    }, (flag) ? 20 : 150)
   }
 
   render () {
     return (
       <div className='picture' ref='root' onClick={this.onClick}>
         <img ref='img' />
-        <div className='select-container' ref='selectContainer' />
-        <div className='icon' ref='icon' />
+        <div className='select-container' ref='selectContainer'>
+          <div className='icon' />
+        </div>
       </div>
     )
   }

3-panel/src/views/Pages/Gallery/components/PicturesDialog/style.scss

@@ -6,6 +6,8 @@
   margin-right: auto;
 
   & .picture {
+    width: auto;
+    height: auto;
     position: relative;
     cursor: pointer;
     opacity: 0;
@@ -15,30 +17,34 @@
     & img {
       width: 100%;
       height: auto;
+      position: relative;
+      z-index: 0;
+      min-height: 0;
     }
 
     & .select-container {
-      width: 0px;
-      height: 0px;
-      position: absolute;
-      @include center;
-      background-color: rgba(63, 81, 181, 0.5);
-      border-radius: 100%;
-      transition: 1s border-radius, 0.3s width ease, 0.3s height ease;
-    }
-
-    & .icon {
       width: 100%;
       height: 100%;
       position: absolute;
       top: 0;
       left: 0;
-      background-image: url(images/Toolbar/exit.png);
-      opacity: 0;
-      display: none;
+      right: 0;
+      margin: 0 auto;
+      background-color: rgba(63, 81, 181, 0.5);
       transition: 0.3s opacity;
-      @include image-center(32px, auto);
-      @include invert-colors;
+      display: none;
+      opacity: 0;
+
+      & .icon {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background-image: url(images/Toolbar/exit.png);
+        @include image-center(32px, auto);
+        @include invert-colors;
+      }
     }
   }