Merge branch 'develop'

spring-raining · May 10, 2016 · 0ca49ee · 0ca49ee
2 parents 1ea2cb5 + c5785eb
commit 0ca49ee
Show file tree

Hide file tree

Showing 25 changed files with 790 additions and 405 deletions.
diff --git a/css/_defs.scss b/css/_defs.scss
@@ -74,16 +74,19 @@ $color-render-gif-modal-download-body:          $color-white;
 $color-render-gif-modal-download-bg:            rgba(0, 0, 0, 0.6);
 $color-scroll-bar-bg:               rgba(0, 0, 0, 0.1);
 $color-scroll-bar-slider-bg:        rgba(255, 255, 255, 0.2);
+$color-alert-popup-bg:              $color-giraf;
+$color-alert-popup-body:            $color-black;
 
 /*
  *  Lists of z-index order.
  *  A later tag will make upper than an early tag.
  */
-$z-order-global:                    base timeline modal menu anyway;
+$z-order-global:                    base timeline modal alert menu anyway;
 $z-order: (
         anyway:                     base,
         menu:                       base,
-        modal:                      wall body,
+        alert:                      base,
+        modal:                      base wall body,
         timeline:                   base timetable left header summary scale-scroller
                                     timetable-entity-handle timetable-layer-handle,
         base:                       base,
@@ -137,8 +140,8 @@ $create-video-layer-modal-info-height:    150px;
   }
 }
 
-@mixin giraf-anime($property: all, $duration: 0.2s) {
-  @include transition($property $duration cubic-bezier(0.4, 0, 0.2, 1));
+@mixin giraf-anime($property: all, $duration: 0.2s, $delay: 0s) {
+  @include transition($property $duration cubic-bezier(0.4, 0, 0.2, 1) $delay);
 }
 
 @mixin giraf-shadow($height: 1) {

diff --git a/css/_giraf.scss b/css/_giraf.scss
@@ -11,3 +11,4 @@
 @import "elements/menu";
 @import "elements/scroll";
 @import "elements/modal";
+@import "elements/alert";
diff --git a/css/elements/_alert.scss b/css/elements/_alert.scss
@@ -0,0 +1,53 @@
+@import "../defs";
+
+.alert {
+  width: 250px;
+}
+
+.alert-transition-enter {
+  @include calculate-z-index(alert, base);
+  @include giraf-anime(all, 0.2s);
+  @include transform(translate3d(0, 15px, 0));
+  opacity: 0.01;
+
+  &.alert-transition-enter-active {
+    @include transform(translate3d(0, 0, 0));
+    opacity: 1;
+  }
+}
+
+.alert-transition-leave {
+  @include calculate-z-index(alert, base);
+  @include giraf-anime(all, 0.2s);
+  @include transform(translate3d(0, 0, 0));
+  opacity: 1;
+
+  &.alert-transition-leave-active {
+    @include transform(translate3d(0, 15px, 0));
+    opacity: 0.01;
+  }
+}
+
+.alert__popup {
+  @include giraf-card(2);
+  @include font-smoothing();
+  @include calculate-z-index(alert, base);
+  position: relative;
+  width: 100%;
+  min-height: 42px;
+  margin: 20px;
+  padding: 10px;
+  color: $color-alert-popup-body;
+  background-color: $color-alert-popup-bg;
+}
+
+.alert__popup__delete-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  opacity: 0;
+
+  .alert__popup:hover & {
+    opacity: 1;
+  }
+}
diff --git a/css/elements/_app.scss b/css/elements/_app.scss
@@ -19,6 +19,12 @@
     position: relative;
   }
 
+  .app__alert {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
+
   .app__modal {
     position: absolute;
     top: 0;

diff --git a/css/elements/_menu.scss b/css/elements/_menu.scss
@@ -3,19 +3,7 @@
 .menu {
   position: fixed;
   @include calculate-z-index(menu, base);
-  @include giraf-anime(all, 0.1s);
   @include font-smoothing();
-  @include reveal(menu, 0.1s) {
-    0% {
-      opacity: 0;
-      @include transform(translate3d(-10px, 0 , 0));
-    }
-
-    100% {
-      opacity: 1;
-      @include transform(translate3d(0, 0, 0));
-    }
-  }
 
   .menu__li > & {
     position: absolute;
@@ -64,4 +52,16 @@
   .menu__disabled {
     color: $color-menu-disabled;
   }
-}
+}
+
+.menu-transition-appear {
+  @include calculate-z-index(menu, base);
+  @include giraf-anime(all, 0.1s);
+  @include transform(translate3d(-10px, 0 , 0));
+  opacity: 0;
+
+  &.menu-transition-appear-active {
+    @include transform(translate3d(0, 0, 0));
+    opacity: 1;
+  }
+}
diff --git a/css/elements/_modal.scss b/css/elements/_modal.scss
@@ -6,16 +6,6 @@
   height: 100%;
   position: absolute;
   background-color: $color-modal-wall-bg;
-
-  @include reveal(modal__wall) {
-    0% {
-      opacity: 0;
-    }
-
-    100% {
-      opacity: 1;
-    }
-  }
 }
 
 .modal {
@@ -45,20 +35,46 @@
     max-width: 600px;
     max-height: 500px;
   }
+}
 
-  @include reveal(modal) {
-    0% {
-      opacity: 0;
-      @include transform(scale(0.9, 0.7));
-    }
+.modal-transition-enter {
+  @include calculate-z-index(modal, base);
+  @include giraf-anime(opacity, 0.2s);
+  opacity: 0.01;
+
+  .modal {
+    @include giraf-anime(all, 0.2s);
+    @include transform(scale(0.9, 0.7));
+  }
 
-    100% {
-      opacity: 1;
+  &.modal-transition-enter-active {
+    opacity: 1;
+
+    .modal {
       @include transform(scale(1));
     }
   }
 }
 
+.modal-transition-leave {
+  @include calculate-z-index(modal, base);
+  @include giraf-anime(opacity, 0.15s);
+  opacity: 1;
+
+  .modal {
+    @include giraf-anime(all, 0.1s);
+    @include transform(translate3d(0, 0, 0));
+  }
+
+  &.modal-transition-leave-active {
+    opacity: 0.01;
+
+    .modal {
+      @include transform(translate3d(0, 10px, 0));
+    }
+  }
+}
+
 .modal__title {
   @include flex-basis($modal-title-height);
   @include flex-shrink(0);

diff --git a/css/elements/_timeline.scss b/css/elements/_timeline.scss
@@ -31,31 +31,40 @@
     width: 200px;
     background-color: $color-timeline-drophere-border;
     text-align: center;
+  }
+}
 
-    @include reveal(timeline-drophere-card, 0.2s, block, 0.2s) {
-      0% {
-        opacity: 0;
-        @include transform(translate3d(0, 20px , 0));
-      }
+.timeline__drophere-transition-enter {
+  @include calculate-z-index(anyway, base);
+  @include giraf-anime(opacity, 0.2s);
+  opacity: 0;
 
-      100% {
-        opacity: 1;
-        @include transform(translate3d(0, 0, 0));
-      }
-    }
+  .timeline__drophere__card {
+    @include giraf-anime(all, 0.2s, 0.2s);
+    @include transform(translate3d(0, 20px, 0));
+    opacity: 0;
   }
 
-  @include reveal(timeline-drophere, 0.2s) {
-    0% {
-      opacity: 0;
-    }
+  &.timeline__drophere-transition-enter-active {
+    opacity: 1;
 
-    100% {
+    .timeline__drophere__card {
+      @include transform(translate3d(0, 0, 0));
       opacity: 1;
     }
   }
 }
 
+.timeline__drophere-transition-leave {
+  @include calculate-z-index(anyway, base);
+  @include giraf-anime(opacity, 0.2s);
+  opacity: 1;
+
+  &.timeline__drophere-transition-leave-active {
+    opacity: 0;
+  }
+}
+
 .timeline__summary {
   @include giraf-shadow(1);
   @include calculate-z-index(timeline, summary);

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "giraf",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Powerful & Free GIF Creator",
   "main": "main.js",
   "scripts": {
@@ -50,6 +50,7 @@
     "mousetrap": "^1.5.3",
     "react": "^0.14.3",
     "react-ace": "^3.1.0",
+    "react-addons-css-transition-group": "^0.14.3",
     "react-dom": "^0.14.3",
     "react-inlinesvg": "~0.4.2",
     "react-intl": "^2.0.1",