style playing

lineupjs · Dec 14, 2018 · d64e4a7 · d64e4a7
1 parent e1c7aec
commit d64e4a7
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 82 deletions.
diff --git a/src/renderer/AggregateGroupRenderer.ts b/src/renderer/AggregateGroupRenderer.ts
@@ -15,7 +15,7 @@ export default class AggregateGroupRenderer implements ICellRendererFactory {
   create(col: AggregateGroupColumn, context: IRenderContext) {
     const width = context.colWidth(col);
     return {
-      template: `<div></div>`,
+      template: `<div><div></div></div>`,
       update(node: HTMLElement, _row: IDataRow, _i: number, _group: IGroup, meta: IGroupMeta) {
         if (!meta) {
           delete node.dataset.meta;

diff --git a/src/styles/_vars.scss b/src/styles/_vars.scss
@@ -64,9 +64,11 @@ $lu_side_panel_font_size: 14px !default;
 $lu_side_panel_toolbar_font_size: 9pt !default;
 $lu_side_panel_separator_color: #dedede !default;
 
-$lu_aggregate_square_bracket_width: 4px !default;
+$lu_aggregate_square_bracket_width: 8px !default;
 $lu_aggregate_square_bracket_stroke_color: #000 !default;
-$lu_aggregate_square_bracket_stroke_width: 1px !default;
+$lu_aggregate_square_bracket_stroke_width: 2px !default;
+$lu_aggregate_hierarchy_width: 4px !default;
+$lu_aggregate_hierarchy_stroke_width: 1px !default;
 
 $lu_taggle_border_color: #6d6c6c !default;
 

diff --git a/src/styles/renderer/_aggregate.scss b/src/styles/renderer/_aggregate.scss
@@ -3,19 +3,40 @@
 
 .#{$lu_css_prefix}-renderer-aggregate {
   text-align: center;
-  overflow-x: unset;
+
+  &.#{$engine_css_prefix}-td {
+    overflow: visible;
+  }
 }
 
-.#{$lu_css_prefix}-renderer-aggregate[data-meta~=first] {
+.#{$engine_css_prefix}-td.#{$lu_css_prefix}-renderer-aggregate[data-meta]::before {
+  // square bracket around
+  content: '';
+  pointer-events: none;
+  position: absolute;
+  left: 2px;
+  top: -2px;
+  bottom: 0px;
+  width: $lu_aggregate_square_bracket_width;
+
+  border-left: $lu_aggregate_square_bracket_stroke_width solid $lu_aggregate_square_bracket_stroke_color;
+}
 
+.#{$engine_css_prefix}-td.#{$lu_css_prefix}-renderer-aggregate[data-meta~=first] {
+  &::before {
+    top: 0;
+    border-top: $lu_aggregate_square_bracket_stroke_width solid $lu_aggregate_square_bracket_stroke_color;
+  }
+}
+
+.#{$lu_css_prefix}-renderer-aggregate[data-meta~=first] {
   > :first-child {
     cursor: pointer;
 
     &::before {
       @include lu_icons();
 
       content: $lu_icon_caret_down;
-      padding-right: $lu_aggregate_square_bracket_width;
     }
   }
 
@@ -27,7 +48,6 @@
 
       content: $lu_icon_expand;
       transform: rotate(-45deg);
-      padding-right: $lu_aggregate_square_bracket_width;
     }
   }
 }
@@ -42,13 +62,18 @@
   }
 }
 
+.#{$lu_css_prefix}-renderer-aggregate[data-meta~='last'] {
+  &::before {
+    border-bottom: $lu_aggregate_square_bracket_stroke_width solid $lu_aggregate_square_bracket_stroke_color;
+  }
+}
+
 .#{$lu_css_prefix}-renderer-aggregate[data-meta='first'] {
   > :last-child::before {
     content: $lu_icon_compress;
   }
 }
 
-
 .#{$lu_css_prefix}-summary.#{$lu_css_prefix}-renderer-aggregate {
   font-size: medium;
 
@@ -57,17 +82,16 @@
   }
 }
 
-.#{$lu_css_prefix}-renderer-aggregate[data-meta='inner'] {
-  &::before {
+.#{$engine_css_prefix}-td.#{$lu_css_prefix}-renderer-aggregate[data-meta='inner'] {
+  > :first-child {
     content: '';
     position: absolute;
     pointer-events: none;
     top: 50%;
-    width: $lu_aggregate_square_bracket_width;
+    width: $lu_aggregate_hierarchy_width;
     left: 50%;
-    margin-left: -2px;
     height: 1px;
-    border-bottom: $lu_aggregate_square_bracket_stroke_width solid $lu_aggregate_square_bracket_stroke_color;
+    border-bottom: $lu_aggregate_hierarchy_stroke_width solid $lu_aggregate_square_bracket_stroke_color;
     box-sizing: border-box;
   }
 
@@ -76,87 +100,25 @@
     position: absolute;
     pointer-events: none;
     top: -2px; // FIXME right padding
-    width: $lu_aggregate_square_bracket_width;
+    width: $lu_aggregate_hierarchy_width;
     left: 50%;
-    margin-left: -2px;
     bottom: 0;
-    border-left: $lu_aggregate_square_bracket_stroke_width solid $lu_aggregate_square_bracket_stroke_color;
+    border-left: $lu_aggregate_hierarchy_stroke_width solid $lu_aggregate_square_bracket_stroke_color;
     box-sizing: border-box;
   }
 }
 
-.#{$lu_css_prefix}-renderer-aggregate[data-meta='last'] {
-  &::before {
+.#{$engine_css_prefix}-td.#{$lu_css_prefix}-renderer-aggregate[data-meta='last'] {
+  > :first-child {
     content: '';
     position: absolute;
     pointer-events: none;
     top: -2px;
-    width: $lu_aggregate_square_bracket_width;
+    width: $lu_aggregate_hierarchy_width;
     left: 50%;
-    margin-left: -2px;
     bottom: 50%;
-    border-left: $lu_aggregate_square_bracket_stroke_width solid $lu_aggregate_square_bracket_stroke_color;
-    border-bottom: $lu_aggregate_square_bracket_stroke_width solid $lu_aggregate_square_bracket_stroke_color;
+    border-left: $lu_aggregate_hierarchy_stroke_width solid $lu_aggregate_square_bracket_stroke_color;
+    border-bottom: $lu_aggregate_hierarchy_stroke_width solid $lu_aggregate_square_bracket_stroke_color;
     box-sizing: border-box;
   }
 }
-
-// .#{$engine-css_prefix}-tr[data-meta~='first'] {
-//   border-top: $lu_aggregate_square_bracket_stroke_width solid $lu_aggregate_square_bracket_stroke_color;
-//   border-left: $lu_aggregate_square_bracket_stroke_width solid $lu_aggregate_square_bracket_stroke_color;
-//   border-right: $lu_aggregate_square_bracket_stroke_width solid $lu_aggregate_square_bracket_stroke_color;
-// }
-
-// .#{$engine-css_prefix}-tr[data-meta~='last'] {
-//   border-bottom: $lu_aggregate_square_bracket_stroke_width solid $lu_aggregate_square_bracket_stroke_color;
-//   border-left: $lu_aggregate_square_bracket_stroke_width solid $lu_aggregate_square_bracket_stroke_color;
-//   border-right: $lu_aggregate_square_bracket_stroke_width solid $lu_aggregate_square_bracket_stroke_color;
-// }
-
-// .#{$engine-css_prefix}-tr[data-meta='inner'] {
-//   border-left: $lu_aggregate_square_bracket_stroke_width solid $lu_aggregate_square_bracket_stroke_color;
-//   border-right: $lu_aggregate_square_bracket_stroke_width solid $lu_aggregate_square_bracket_stroke_color;
-// }
-// &::after {
-//   // content: '';
-//   position: absolute;
-//   pointer-events: none;
-//   top: -2px; // FIXME right padding
-//   width: $lu_aggregate_square_bracket_width;
-//   right: 0;
-//   bottom: 0;
-//   border-left: $lu_aggregate_square_bracket_stroke_width solid $lu_aggregate_square_bracket_stroke_color;
-//   box-sizing: border-box;
-// }
-
-// .#{$lu_css_prefix}-renderer-aggregate.#{$lu_css_prefix}-low::after {
-//   content: unset;
-// }
-// &::after {
-//   top: 0;
-//   border-top: $lu_aggregate_square_bracket_stroke_width solid $lu_aggregate_square_bracket_stroke_color;
-// }
-
-// .#{$lu_css_prefix}-renderer-aggregate[data-meta=last] {
-//   &::after {
-//     border-bottom: $lu_aggregate_square_bracket_stroke_width solid $lu_aggregate_square_bracket_stroke_color;
-//   }
-// }
-
-// .#{$lu_css_prefix}-renderer-aggregate[data-meta=inner] {
-//   &::after {
-//     border-bottom: $lu_aggregate_square_bracket_stroke_width solid $lu_aggregate_square_bracket_stroke_color;
-//   }
-// }
-
-
-// .#{$lu_css_prefix}-renderer-aggregate[data-meta='first last'] {
-//   padding-right: $lu_aggregate_square_bracket_width;
-//   cursor: pointer;
-
-//   // &::after {
-//   //   top: 0;
-//   //   border-top: $lu_aggregate_square_bracket_stroke_width solid $lu_aggregate_square_bracket_stroke_color;
-//   //   border-bottom: $lu_aggregate_square_bracket_stroke_width solid $lu_aggregate_square_bracket_stroke_color;
-//   // }
-// }