合并官方更新升级到0.5.3

合并后有一些小BUG
trheyi · Oct 21, 2014 · 6961483 · 6961483
2 parents b32030a + e5b1f19
commit 6961483
Show file tree

Hide file tree

Showing 37 changed files with 823 additions and 418 deletions.
diff --git a/.gitignore b/.gitignore
@@ -43,8 +43,7 @@ Session.vim
 .tmp
 
 /core/server/data/export/exported*
-/docs
-/_site
+/core/client/docs/_site
 /content/tmp/*
 /content/data/*
 /content/apps/**/*

diff --git a/Gruntfile.js b/Gruntfile.js
@@ -336,9 +336,13 @@ var _              = require('lodash'),
                     map: true, // Use and update the sourcemap
                     browsers: ['last 2 versions', '> 1%', 'Explorer 10']
                 },
-                single_file: {
+                ghost: {
                     src: 'core/client/assets/css/<%= pkg.name %>.min.css',
                     dest: 'core/client/assets/css/<%= pkg.name %>.min.css'
+                },
+                docs: {
+                    src: 'core/client/docs/dist/css/<%= pkg.name %>.min.css',
+                    dest: 'core/client/docs/dist/css/<%= pkg.name %>.min.css'
                 }
             },
 

diff --git a/core/client/assets/sass/components/dropdowns.scss b/core/client/assets/sass/components/dropdowns.scss
@@ -258,52 +258,52 @@
 
 %dropdown-triangle-top {
     &:before {
-        @include triangle(($dropdown_triangle * 2), #fff, up);
+        @include triangle($dropdown_triangle, #fff, up);
         top: -$dropdown_triangle;
     }
     &:after {
-        @include triangle(($dropdown_triangle * 2) + 2, darken($lightgrey, 15%), up);
-        top: -($dropdown_triangle + 1);
+        @include triangle($dropdown_triangle + 2, darken($lightgrey, 15%), up);
+        top: -($dropdown_triangle + 2);
     }
 }
 %dropdown-triangle-bottom {
     &:before {
-        @include triangle(($dropdown_triangle * 2), #fff, down);
+        @include triangle($dropdown_triangle, #fff, down);
         bottom: -$dropdown_triangle;
     }
     &:after {
-        @include triangle(($dropdown_triangle * 2) + 2, darken($lightgrey, 15%), down);
-        bottom: -($dropdown_triangle + 1);
+        @include triangle($dropdown_triangle + 2, darken($lightgrey, 15%), down);
+        bottom: -($dropdown_triangle + 2);
     }
 }
 %dropdown-triangle-center {
     &:before {
         left: 50%;
-        margin-left: (-$dropdown_triangle);
+        margin-left: -($dropdown_triangle / 2);
     }
     &:after {
         left: 50%;
-        margin-left: -($dropdown_triangle + 1);
+        margin-left: -($dropdown_triangle / 2 + 2);
     }
 }
 
 // TODO: Make the values here use the $dropdown_triangle var
 %dropdown-triangle-left {
     &:before {
-        left: ($dropdown_triangle + 2);
+        left: ($dropdown_triangle / 2 + 2);
     }
     &:after {
-        left: ($dropdown_triangle + 1);
+        left: ($dropdown_triangle / 2);
     }
 }
 %dropdown-triangle-right {
     &:before {
         left: auto;
-        right: ($dropdown_triangle + 2);
+        right: ($dropdown_triangle / 2 + 2);
     }
     &:after {
         left: auto;
-        right: ($dropdown_triangle + 1);
+        right: ($dropdown_triangle / 2);
     }
 }
 

diff --git a/core/client/assets/sass/components/navigation.scss b/core/client/assets/sass/components/navigation.scss
@@ -19,7 +19,8 @@
         width: 16px;
     }
 
-    body.right-outlet-expanded & {
+    // This selector ends up being `body.settings-menu-expanded .global-nav`
+    body.settings-menu-expanded & {
         transform: translate3d(-350px, 0px, 0px);
     }
 

diff --git a/core/client/assets/sass/components/notifications.scss b/core/client/assets/sass/components/notifications.scss
@@ -12,7 +12,9 @@
         z-index: 980;
         width: 300px;
         transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1);
-        body.right-outlet-expanded & {
+
+        // This selector ends up being `body.settings-menu-expanded .notifications`
+        body.settings-menu-expanded & {
             transform: translate3d(350px, 0px, 0px);
         }
     }
@@ -24,7 +26,9 @@
         right: 0;
         z-index: 9999;
         transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1);
-        body.right-outlet-expanded & {    
+
+        // This selector ends up being `body.settings-menu-expanded .notifications`
+        body.settings-menu-expanded & {
             transform: translate3d(100%, 0px, 0px);
         }
     }

diff --git a/core/client/assets/sass/components/popovers.scss b/core/client/assets/sass/components/popovers.scss
@@ -0,0 +1,265 @@
+//
+// Popovers
+// --------------------------------------------------
+
+.popover-item {
+    position: relative;
+    display: inline-block;
+    padding: 11px 26px 13px 16px;
+    background: $darkgrey;
+    min-width: 300px;
+    max-width: 400px;
+    border-radius: 6px;
+    font-size: 1.2rem;
+    color: $midgrey;
+}
+.popover-title {
+    font-size: 1.4rem;
+    font-weight: 300;
+    color: #fff;
+}
+.popover-desc {
+    margin-top: -4px;
+}
+.popover-body {
+    margin-top: 11px;
+    line-height: 1.7;
+    b {
+        color: #fff;
+    }
+    > *:last-child {
+        margin: 0;
+    }
+}
+
+//
+// Popover triangles
+// --------------------------------------------------
+
+// Placeholders
+%popover-triangle {
+    &:before {
+        content: '';
+        position: absolute;
+        display: block;
+    } // :before
+}
+
+// The triangle itself
+%popover-triangle-vertical-top {
+    &:before {
+        @include triangle($popover_triangle, $darkgrey, up, shallow);
+        top: -(floor($popover_triangle * $popover_triangle_shallow_multiplier));
+    }
+}
+%popover-triangle-vertical-bottom {
+    &:before {
+        @include triangle($popover_triangle, $darkgrey, down, shallow);
+        bottom: -(floor($popover_triangle * $popover_triangle_shallow_multiplier));
+    }
+}
+%popover-triangle-horizontal-left {
+    &:before {
+        @include triangle($popover_triangle, $darkgrey, left, shallow);
+        left: -(floor($popover_triangle * $popover_triangle_shallow_multiplier));
+    }
+}
+%popover-triangle-horizontal-right {
+    &:before {
+        @include triangle($popover_triangle, $darkgrey, right, shallow);
+        right: -(floor($popover_triangle * $popover_triangle_shallow_multiplier));
+    }
+}
+
+// Triangle positions
+%popover-triangle-vertical-center {
+    &:before {
+        left: 50%;
+        margin-left: -($popover_triangle / 2);
+    }
+}
+%popover-triangle-vertical-left {
+    &:before {
+        left: $popover_triangle;
+    }
+}
+%popover-triangle-vertical-right {
+    &:before {
+        left: auto;
+        right: $popover_triangle;
+    }
+}
+%popover-triangle-horizontal-center {
+    &:before {
+        top: 50%;
+        margin-top: -$popover_triangle;
+    }
+}
+%popover-triangle-horizontal-top {
+    &:before {
+        top: $popover_triangle;
+    }
+}
+%popover-triangle-horizontal-bottom {
+    &:before {
+        top: auto;
+        bottom: $popover_triangle;
+    }
+}
+
+// Usable classes
+.popover-triangle-top {
+    transform-origin: top center;
+    @extend %popover-triangle;
+    @extend %popover-triangle-vertical-top;
+    @extend %popover-triangle-vertical-center;
+}
+.popover-triangle-top-left {
+    transform-origin: top left;
+    @extend %popover-triangle;
+    @extend %popover-triangle-vertical-top;
+    @extend %popover-triangle-vertical-left;
+}
+.popover-triangle-top-right {
+    transform-origin: top right;
+    @extend %popover-triangle;
+    @extend %popover-triangle-vertical-top;
+    @extend %popover-triangle-vertical-right;
+}
+.popover-triangle-bottom {
+    transform-origin: bottom center;
+    @extend %popover-triangle;
+    @extend %popover-triangle-vertical-bottom;
+    @extend %popover-triangle-vertical-center;
+}
+.popover-triangle-bottom-left {
+    transform-origin: bottom left;
+    @extend %popover-triangle;
+    @extend %popover-triangle-vertical-bottom;
+    @extend %popover-triangle-vertical-left;
+}
+.popover-triangle-bottom-right {
+    transform-origin: bottom right;
+    @extend %popover-triangle;
+    @extend %popover-triangle-vertical-bottom;
+    @extend %popover-triangle-vertical-right;
+}
+.popover-triangle-left {
+    transform-origin: left center;
+    @extend %popover-triangle;
+    @extend %popover-triangle-horizontal-left;
+    @extend %popover-triangle-horizontal-center;
+}
+.popover-triangle-left-top {
+    transform-origin: left top;
+    @extend %popover-triangle;
+    @extend %popover-triangle-horizontal-left;
+    @extend %popover-triangle-horizontal-top;
+}
+.popover-triangle-left-bottom {
+    transform-origin: left bottom;
+    @extend %popover-triangle;
+    @extend %popover-triangle-horizontal-left;
+    @extend %popover-triangle-horizontal-bottom;
+}
+.popover-triangle-right {
+    transform-origin: right center;
+    @extend %popover-triangle;
+    @extend %popover-triangle-horizontal-right;
+    @extend %popover-triangle-horizontal-center;
+}
+.popover-triangle-right-top {
+    transform-origin: right top;
+    @extend %popover-triangle;
+    @extend %popover-triangle-horizontal-right;
+    @extend %popover-triangle-horizontal-top;
+}
+.popover-triangle-right-bottom {
+    transform-origin: right bottom;
+    @extend %popover-triangle;
+    @extend %popover-triangle-horizontal-right;
+    @extend %popover-triangle-horizontal-bottom;
+}
+
+// Show/hide popover
+// Position relative to the position of the triangle
+// So... `popover-triangle-left-top` opens on the right of the button
+// because the triangle is on the top left, poitning to the top right of the button
+//
+// |------|  |-----------------|
+// |Button| <  Popover content |
+// |------|  | Lorem ipsum dol |
+//           |-----------------|
+.popover {
+    position: relative;
+    display: inline-block;
+
+    .popover-item {
+        position: absolute;
+        z-index: 20;
+
+        &.open {
+            display: block;
+        }
+        &.closed {
+            display: none;
+        }
+    }
+
+    .popover-item.popover-triangle-bottom {
+        bottom: calc(100% + 16px);
+        left: 50%;
+        transform: translateX(-50%);
+    }
+    .popover-item.popover-triangle-bottom-left {
+        bottom: calc(100% + 16px);
+        left: 0;
+    }
+    .popover-item.popover-triangle-bottom-right {
+        bottom: calc(100% + 16px);
+        right: 0;
+    }
+    .popover-item.popover-triangle-top {
+        top: calc(100% + 16px);
+        left: 50%;
+        transform: translateX(-50%);
+    }
+    .popover-item.popover-triangle-top-left {
+        top: calc(100% + 16px);
+        left: 0;
+    }
+    .popover-item.popover-triangle-top-right {
+        top: calc(100% + 16px);
+        right: 0;
+    }
+    .popover-item.popover-triangle-left {
+        left: calc(100% + 16px);
+        top: 50%;
+        transform: translateY(-50%);
+    }
+    .popover-item.popover-triangle-left-top {
+        left: calc(100% + 16px);
+        top: 50%;
+        transform: translateY(-($popover_triangle * 2));
+    }
+    .popover-item.popover-triangle-left-bottom {
+        left: calc(100% + 16px);
+        top: 50%;
+        transform: translateY(calc(-100% + #{($popover_triangle * 2)}));
+    }
+    .popover-item.popover-triangle-right {
+        right: calc(100% + 16px);
+        top: 50%;
+        transform: translateY(-50%);
+    }
+    .popover-item.popover-triangle-right-top {
+        right: calc(100% + 16px);
+        top: 50%;
+        transform: translateY(-($popover_triangle * 2));
+    }
+    .popover-item.popover-triangle-right-bottom {
+        right: calc(100% + 16px);
+        top: 50%;
+        transform: translateY(calc(-100% + #{($popover_triangle * 2)}));
+    }
+}//.popover