Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Table] Fix interaction-bar styles #1163

Merged
merged 4 commits into from Jun 8, 2017
Merged

[Table] Fix interaction-bar styles #1163

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4e4c951
Show grab cursor on interaction bar
cmslewis May 31, 2017
2ac9c06
Fix header menu styles when selection disabled
cmslewis May 31, 2017
8b5614d
Merge branch 'master' into cl/table-interaction-bar-styles
cmslewis Jun 1, 2017
784527b
Fix grabbing style when :active
cmslewis Jun 1, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
86 changes: 64 additions & 22 deletions packages/table/src/headers/_headers.scss
View file
Open in desktop
Expand Up @@ -5,6 +5,26 @@
@import "../cell/common";
@import "./common";

@function menu-background($color) {
@return linear-gradient(90deg, rgba($color, 0) 0%, $color 50%);
}

// when selection is disabled, header background color doesn't change on hover.
$header-menu-hover-background:
menu-background($header-background-color);
$dark-header-menu-hover-background:
menu-background($dark-header-background-color);

// when selection is enabled, background color changes on hover; need to match that.
$selectable-header-menu-hover-background:
menu-background($header-hover-background-color);
$selectable-header-menu-selected-background:
menu-background(mix($pt-intent-primary, $header-hover-background-color, 10%));
$dark-selectable-header-menu-hover-background:
menu-background($dark-header-hover-background-color);
$dark-selectable-header-menu-selected-background:
menu-background(mix($pt-intent-primary, $dark-header-hover-background-color, 10%));

.bp-table-header {
flex: 1 1 auto;
align-items: flex-start;
Expand Down Expand Up @@ -69,45 +89,45 @@
}

.bp-table-th-menu-container-background {
@function menu-background($color) {
@return linear-gradient(90deg, rgba($color, 0) 0%, $color 50%);
}

$menu-hover-background: menu-background($header-hover-background-color);
$menu-selected-background: menu-background(
mix($pt-intent-primary, $header-hover-background-color, 10%)
);
$dark-menu-hover-background: menu-background($dark-header-hover-background-color);
$dark-menu-selected-background: menu-background(
mix($pt-intent-primary, $dark-header-hover-background-color, 10%)
);

position: absolute;
top: 0;
right: 0;
width: $column-header-min-height + $pt-grid-size * 2;
height: $column-header-min-height;
pointer-events: none; // don't swallow clicks meant for the underlying header cell

.bp-table-interaction-bar & {
height: $interaction-bar-height;
}

// background doesn't change on hover when selection is disabled; match the default background

.bp-table-header:hover &,
.bp-table-header-active & {
background-image: $menu-hover-background;
background-image: $header-menu-hover-background;

.pt-dark & {
background-image: $dark-menu-hover-background;
background-image: $dark-header-menu-hover-background;
}
}

.bp-table-header.bp-table-header-selected & {
background-image: $menu-selected-background;
// background changes on hover/select when selection is enabled; need to match the new background

.bp-table-selection-enabled .bp-table-header:hover &,
.bp-table-selection-enabled .bp-table-header-active & {
background-image: $selectable-header-menu-hover-background;

.pt-dark & {
background-image: $dark-menu-selected-background;
background-image: $dark-selectable-header-menu-hover-background;
}
}

.bp-table-interaction-bar & {
height: $interaction-bar-height;
.bp-table-selection-enabled .bp-table-header.bp-table-header-selected & {
background-image: $selectable-header-menu-selected-background;

.pt-dark & {
background-image: $dark-selectable-header-menu-selected-background;
}
}
}

Expand Down Expand Up @@ -138,14 +158,36 @@
margin-right: $icon-offset;
border-radius: $pt-border-radius;
box-shadow: inset 0 0 0 1px rgba($black, $pt-drop-shadow-opacity);
background-color: $header-hover-background-color;
background-color: $header-background-color;
color: $pt-icon-color;

// light theme

.bp-table-selection-enabled & {
background-color: $header-hover-background-color;
}

.bp-table-selection-enabled .bp-table-header.bp-table-header-selected & {
background-color: $selectable-header-menu-selected-background;
}

// dark theme

.pt-dark & {
box-shadow: inset 0 0 0 1px rgba($white, $pt-drop-shadow-opacity);
background-color: $dark-header-hover-background-color;
background-color: $dark-header-background-color;
color: $pt-dark-icon-color;
}

.pt-dark .bp-table-selection-enabled & {
background-color: $dark-header-hover-background-color;
}

// need to use a long selector here to properly scope the style
// stylelint-disable-next-line selector-max-compound-selectors
.pt-dark .bp-table-selection-enabled .bp-table-header.bp-table-header-selected & {
background-color: $dark-selectable-header-menu-selected-background;
}
}

&:hover .pt-icon-standard {
Expand Down
14 changes: 11 additions & 3 deletions packages/table/src/interactions/_interactions.scss
View file
Open in desktop
Expand Up @@ -8,12 +8,20 @@ $resize-handle-padding: $pt-grid-size / 2 !default;
$resize-handle-color: $pt-intent-primary !default;
$resize-handle-dragging-color: $pt-intent-primary !default;

@mixin grabbable() {
cursor: grab;

&:active {
cursor: grabbing;
}
}

@mixin reorderable-header() {
&.bp-table-header-reorderable {
cursor: grab;
@include grabbable();

&:active {
cursor: grabbing;
.bp-table-interaction-bar {
@include grabbable();
}
}
}
Expand Down