Lens restructure (#540)

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/components/spinner/cube-spinner.scss

@@ -0,0 +1,86 @@
+// http://tobiasahlin.com/spinkit/
+
+.CubeSpinner {
+  --size: 70px;
+
+  .sk-cube-grid {
+    $size: 70px;
+    width: $size;
+    height: $size;
+    transform: rotate(45deg);
+    margin: $margin * 4 auto;
+    border-bottom-left-radius: $radius;
+    border-top-right-radius: $radius;
+    overflow: hidden;
+  }
+
+  .sk-cube-grid .sk-cube {
+    width: 33%;
+    height: 33%;
+    float: left;
+    -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
+    animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
+  }
+
+  .sk-cube-grid .sk-cube1 {
+    -webkit-animation-delay: 0.2s;
+    animation-delay: 0.2s;
+  }
+
+  .sk-cube-grid .sk-cube2 {
+    -webkit-animation-delay: 0.3s;
+    animation-delay: 0.3s;
+  }
+
+  .sk-cube-grid .sk-cube3 {
+    -webkit-animation-delay: 0.4s;
+    animation-delay: 0.4s;
+  }
+
+  .sk-cube-grid .sk-cube4 {
+    -webkit-animation-delay: 0.1s;
+    animation-delay: 0.1s;
+  }
+
+  .sk-cube-grid .sk-cube5 {
+    -webkit-animation-delay: 0.2s;
+    animation-delay: 0.2s;
+  }
+
+  .sk-cube-grid .sk-cube6 {
+    -webkit-animation-delay: 0.3s;
+    animation-delay: 0.3s;
+  }
+
+  .sk-cube-grid .sk-cube7 {
+    -webkit-animation-delay: 0s;
+    animation-delay: 0s;
+  }
+
+  .sk-cube-grid .sk-cube8 {
+    -webkit-animation-delay: 0.1s;
+    animation-delay: 0.1s;
+  }
+
+  .sk-cube-grid .sk-cube9 {
+    -webkit-animation-delay: 0.2s;
+    animation-delay: 0.2s;
+  }
+
+  @keyframes sk-cubeGridScaleDelay {
+    0%, 35% {
+      background-color: #36393e;
+    }
+    0%, 70%, 100% {
+      -webkit-transform: scale3D(1, 1, 1);
+      transform: scale3D(1, 1, 1);
+    }
+    35% {
+      -webkit-transform: scale3D(0, 0, 1);
+      transform: scale3D(0, 0, 1);
+    }
+    100% {
+      background-color: #3389ca;
+    }
+  }
+}

src/renderer/components/spinner/cube-spinner.tsx

@@ -0,0 +1,28 @@
+import './cube-spinner.scss'
+import React from 'react'
+import { cssNames } from "../../utils";
+
+interface Props {
+  className?: string;
+}
+
+export class CubeSpinner extends React.PureComponent<Props> {
+  render() {
+    const { className } = this.props;
+    return (
+      <div className={cssNames("CubeSpinner ", className)}>
+        <div className="sk-cube-grid">
+          <div className="sk-cube sk-cube1"></div>
+          <div className="sk-cube sk-cube2"></div>
+          <div className="sk-cube sk-cube3"></div>
+          <div className="sk-cube sk-cube4"></div>
+          <div className="sk-cube sk-cube5"></div>
+          <div className="sk-cube sk-cube6"></div>
+          <div className="sk-cube sk-cube7"></div>
+          <div className="sk-cube sk-cube8"></div>
+          <div className="sk-cube sk-cube9"></div>
+        </div>
+      </div>
+    )
+  }
+}

src/renderer/components/spinner/index.ts

@@ -0,0 +1,2 @@
+export * from './spinner'
+export * from './cube-spinner'

src/renderer/components/spinner/spinner.scss

@@ -0,0 +1,65 @@
+
+.Spinner {
+  --spinner-size: 24px;
+  --spinner-border: calc(var(--spinner-size) / 6);
+
+  $duration: 1s;
+  $rotateAnimation: rotate $duration linear infinite;
+  $colorAnimation: colors $duration*4 ease-in-out infinite;
+
+  @mixin spinner-color($color) {
+    border-color: $color;
+    border-left-color: transparent;
+    border-right-color: transparent;
+  }
+
+  width: var(--spinner-size);
+  height: var(--spinner-size);
+  border: var(--spinner-border) solid transparent;
+  border-radius: 50%;
+  display: inline-block;
+
+  &:not(.singleColor) {
+    animation: $rotateAnimation, $colorAnimation;
+  }
+
+  &.singleColor {
+    @include spinner-color($textColorPrimary);
+    animation: $rotateAnimation;
+  }
+
+  &.center {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    margin-left: calc(var(--spinner-size) / -2);
+    margin-top: calc(var(--spinner-size) / -2);
+  }
+
+  @keyframes rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes colors {
+    0% {
+      @include spinner-color(#4285F4);
+    }
+    25% {
+      @include spinner-color(#DE3E35);
+    }
+    50% {
+      @include spinner-color(#F7C223);
+    }
+    75% {
+      @include spinner-color(#1B9A59);
+    }
+    100% {
+      @include spinner-color(#4285F4);
+    }
+  }
+}

src/renderer/components/spinner/spinner.tsx

@@ -0,0 +1,28 @@
+import './spinner.scss'
+
+import React from 'react'
+import { cssNames } from "../../utils";
+
+interface Props extends React.HTMLProps<any> {
+  singleColor?: boolean;
+  center?: boolean;
+}
+
+export class Spinner extends React.Component<Props, {}> {
+  private elem: HTMLElement;
+
+  static defaultProps = {
+    singleColor: true,
+    center: false,
+  };
+
+  render() {
+    const { center, singleColor, ...props } = this.props;
+    let { className } = this.props;
+    className = cssNames('Spinner', className, {
+      singleColor: singleColor,
+      center: center,
+    });
+    return <div {...props} className={className} ref={e => this.elem = e}/>;
+  }
+}