bubble style tweaks and new shpitz

chunsli · Apr 8, 2016 · bb82347 · bb82347
1 parent 21c81ae
commit bb82347
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 26 deletions.
diff --git a/src/client/components/bubble-menu/bubble-menu.scss b/src/client/components/bubble-menu/bubble-menu.scss
@@ -1,6 +1,7 @@
 @import '../../imports';
 
-$shpitz-size: 10px;
+$shpitz-size: 12px;
+$shpitz-clip-size: 60px;
 
 .bubble-menu {
   @extend %menu-cont;
@@ -13,40 +14,67 @@ $shpitz-size: 10px;
 
   .shpitz {
     position: absolute;
+    width: $shpitz-clip-size;
+    height: $shpitz-clip-size;
+    overflow: hidden;
     pointer-events: none;
 
-    &:before,
     &:after {
       content: '';
       position: absolute;
+      width: $shpitz-size;
+      height: $shpitz-size;
+      transform: rotate(45deg);
+      background: $white;
+      box-shadow: 0 0 4px 0 rgba($black, 0.35);
     }
   }
 
-  &.right .shpitz {
-    &:before {
-      @include triangle(left, $shpitz-size, $shpitz-size, hsla(0, 0, 0, 0.12));
-      left: -1 * $shpitz-size;
-      margin-top: -1 * $shpitz-size;
-    }
+  &.up .shpitz {
+    margin-bottom: $shpitz-clip-size * -1;
+    margin-left: $shpitz-clip-size * -0.5;
 
     &:after {
-      @include triangle(left, $shpitz-size, $shpitz-size, $white);
-      left: -1 * $shpitz-size + 1;
-      margin-top: -1 * $shpitz-size;
+      top: 0;
+      left: 50%;
+      margin-left: $shpitz-size * -0.5;
+      margin-top: $shpitz-size * -0.5;
     }
   }
 
   &.down .shpitz {
-    &:before {
-      @include triangle(up, $shpitz-size, $shpitz-size, hsla(0, 0, 0, 0.12));
-      top: -1 * $shpitz-size;
-      margin-left: -1 * $shpitz-size;
+    margin-top: $shpitz-clip-size * -1;
+    margin-left: $shpitz-clip-size * -0.5;
+
+    &:after {
+      bottom: 0;
+      left: 50%;
+      margin-left: $shpitz-size * -0.5;
+      margin-bottom: $shpitz-size * -0.5;
+    }
+  }
+
+  &.left .shpitz {
+    margin-right: $shpitz-clip-size * -1;
+    margin-top: $shpitz-clip-size * -0.5;
+
+    &:after {
+      left: 0;
+      top: 50%;
+      margin-top: $shpitz-size * -0.5;
+      margin-left: $shpitz-size * -0.5;
     }
+  }
+
+  &.right .shpitz {
+    margin-left: $shpitz-clip-size * -1;
+    margin-top: $shpitz-clip-size * -0.5;
 
     &:after {
-      @include triangle(up, $shpitz-size, $shpitz-size, $white);
-      top: -1 * $shpitz-size + 1;
-      margin-left: -1 * $shpitz-size;
+      right: 0;
+      top: 50%;
+      margin-top: $shpitz-size * -0.5;
+      margin-right: $shpitz-size * -0.5;
     }
   }
 

diff --git a/src/client/components/button/button.scss b/src/client/components/button/button.scss
@@ -12,13 +12,13 @@
 
   &.mini {
     height: $input-height-mini;
-    padding-left: 8px;
-    padding-right: 8px;
+    padding-left: 10px;
+    padding-right: 10px;
     min-width: 40px;
   }
 
   &.icon {
-    min-width: 25px;
+    min-width: 27px;
     padding: 2px 0;
 
     svg {

diff --git a/src/client/components/segment-bubble/segment-bubble.scss b/src/client/components/segment-bubble/segment-bubble.scss
@@ -6,7 +6,7 @@ $shpitz-size: 7px;
   @extend %menu-cont;
   position: absolute;
   background: rgba($white, 0.9);
-  padding: 8px;
+  padding: 10px;
   text-align: center;
   transform: translate(-50%, -100%);
   max-width: 400px;

diff --git a/src/client/config/constants.ts b/src/client/config/constants.ts
@@ -10,7 +10,6 @@ export const CORE_ITEM_GAP = 8;
 export const BAR_TITLE_WIDTH = 66;
 
 export const PIN_TITLE_HEIGHT = 36;
-export const SEARCH_BOX_HEIGHT = 30;
 export const PIN_ITEM_HEIGHT = 25;
 export const PIN_PADDING_BOTTOM = 12;
 export const VIS_H_PADDING = 10;

diff --git a/src/client/utils/_variables.scss b/src/client/utils/_variables.scss
@@ -42,7 +42,7 @@ $highlight:               darken($hover, 7%);
 $highlight-border:        darken($brand, 8%);
 
 $input-height:            30px;
-$input-height-mini:       26px;
+$input-height-mini:       28px;
 $form-spacing-compact:    14px;
 
 // dimension items

diff --git a/src/client/visualizations/bar-chart/bar-chart.scss b/src/client/visualizations/bar-chart/bar-chart.scss
@@ -67,7 +67,7 @@
       position: absolute;
       width: 100px;
       height: 20px;
-      top: 1px;
+      top: 3px;
       transform: rotate(-43deg);
       transform-origin: right top;
       text-align: right;

diff --git a/src/client/visualizations/bar-chart/bar-chart.tsx b/src/client/visualizations/bar-chart/bar-chart.tsx
@@ -16,7 +16,7 @@ import { QueryError } from '../../components/query-error/query-error';
 import { SegmentBubble } from '../../components/segment-bubble/segment-bubble';
 
 const TEXT_SPACER = 36;
-const X_AXIS_HEIGHT = 80;
+const X_AXIS_HEIGHT = 84;
 const Y_AXIS_WIDTH = 60;
 const MIN_CHART_HEIGHT = 200;
 const MAX_STEP_WIDTH = 140; // Note that the step is bar + empty space around it. The width of the rectangle is step * BAR_PROPORTION