Skip to content

Commit

Permalink
feat(styling): change Column Picker & Grid Menu styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@ghiscoding-SE
ghiscoding-SE committed Jan 6, 2020
1 parent d91086b commit b9dc977
Show file tree
Hide file tree
Showing 4 changed files with 110 additions and 85 deletions.
12 changes: 12 additions & 0 deletions src/app/examples/grid-menu.component.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
$column-picker-checkbox-icon-unchecked: "\f00c" !default;
$column-picker-checkbox-icon-checked: "\f00c" !default;
$column-picker-checkbox-opacity: 0.2 !default;
$column-picker-checkbox-opacity-hover: 0.35 !default;

$grid-menu-checkbox-icon-unchecked: "\f096";
$grid-menu-checkbox-icon-checked: "\f046";
$grid-menu-checkbox-opacity: 0.7;
$grid-menu-checkbox-opacity-hover: 1;

/* make sure to add the @import the SlickGrid Bootstrap Theme AFTER the variables changes */
@import '../modules/angular-slickgrid/styles/slickgrid-theme-bootstrap.scss';
9 changes: 6 additions & 3 deletions src/app/examples/grid-menu.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { Component, OnInit, Injectable } from '@angular/core';
import { AngularGridInstance, Column, FieldType, Filters, Formatters, GridOption, OperatorType, ExtensionName } from './../modules/angular-slickgrid';
import { Component, Injectable, OnInit, ViewEncapsulation } from '@angular/core';
import { AngularGridInstance, Column, ExtensionName, FieldType, Filters, Formatters, GridOption } from './../modules/angular-slickgrid';
import { TranslateService } from '@ngx-translate/core';

@Component({
templateUrl: './grid-menu.component.html'
templateUrl: './grid-menu.component.html',
styleUrls: ['./grid-menu.component.scss'],
encapsulation: ViewEncapsulation.None,
})
@Injectable()
export class GridMenuComponent implements OnInit {
Expand All @@ -17,6 +19,7 @@ export class GridMenuComponent implements OnInit {
<li>By default the Grid Menu shows all columns which you can show/hide them</li>
<li>You can configure multiple custom "commands" to show up in the Grid Menu and use the "onGridMenuCommand()" callback</li>
<li>Doing a "right + click" over any column header will also provide a way to show/hide a column (via the Column Picker Plugin)</li>
<li>You can change the icons of both picker via SASS variables as shown in this demo (check all SASS variables)</li>
<li><i class="fa fa-arrow-down"></i> You can also show the Grid Menu anywhere on your page</li>
</ul>
`;
Expand Down
164 changes: 84 additions & 80 deletions src/app/modules/angular-slickgrid/styles/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,22 +141,24 @@ $column-picker-border-radius: 2px !default;
$column-picker-box-shadow: 1px 1px 1px silver !default;
$column-picker-checkbox-color: $primary-color !default;
$column-picker-checkbox-size: 13px !default;
$column-picker-checkbox-icon: "\f00c" !default;
$column-picker-checkbox-icon-unchecked: "\f00c" !default;
$column-picker-checkbox-icon-checked: "\f00c" !default;
$column-picker-checkbox-opacity: 0.15 !default;
$column-picker-checkbox-opacity-hover: 0.35 !default;
$column-picker-checkbox-width: 13px !default;
$column-picker-close-bg-color: #ffffff !default;
$column-picker-close-border: 0px solid #9c9c9c !default;
$column-picker-close-height: 21px !default;
$column-picker-close-width: 15px !default;
$column-picker-close-margin: 1px !default;
$column-picker-close-padding: 0px !default;
$column-picker-close-opacity: 0.9 !default;
$column-picker-item-border: 1px solid transparent !default;
$column-picker-item-border-radius: 0px !default;
$column-picker-item-disabled-color: silver !default;
$column-picker-item-padding: 2px 4px !default;
$column-picker-item-hover-border: 1px solid #BFBDBD !default;
$column-picker-item-hover-color: #fafafa !default;
$column-picker-item-border: 1px solid transparent !default;
$column-picker-item-border-radius: 0px !default;
$column-picker-item-disabled-color: silver !default;
$column-picker-item-padding: 2px 4px !default;
$column-picker-item-hover-border: 1px solid #BFBDBD !default;
$column-picker-item-hover-color: #fafafa !default;
$column-picker-label-margin: 4px !default;
$column-picker-label-font-weight: normal !default;
$column-picker-link-background-color: #ffffff !default;
Expand All @@ -183,9 +185,11 @@ $grid-menu-border-radius: 2px !default;
$grid-menu-box-shadow: 1px 1px 1px silver !default;
$grid-menu-checkbox-color: $primary-color !default;
$grid-menu-checkbox-size: 13px !default;
$grid-menu-checkbox-icon: "\f00c" !default;
$grid-menu-checkbox-icon-unchecked: "\f00c" !default;
$grid-menu-checkbox-icon-checked: "\f00c" !default;
$grid-menu-checkbox-opacity: 0.15 !default;
$grid-menu-checkbox-opacity-hover: 0.35 !default;
$grid-menu-checkbox-width: 13px !default;
$grid-menu-close-bg-color: #ffffff !default;
$grid-menu-close-border: 0px solid #9c9c9c !default;
$grid-menu-close-height: 21px !default;
Expand All @@ -196,87 +200,87 @@ $grid-menu-close-opacity: 0.9 !default;
$grid-menu-label-margin: 4px !default;
$grid-menu-label-font-weight: normal !default;
$grid-menu-link-background-color: #ffffff !default;
$grid-menu-item-border: 1px solid transparent !default;
$grid-menu-item-border-radius: 0px !default;
$grid-menu-item-disabled-color: silver !default;
$grid-menu-item-padding: 2px 4px !default;
$grid-menu-item-hover-border: 1px solid #BFBDBD !default;
$grid-menu-item-hover-color: #fafafa !default;
$grid-menu-item-border: 1px solid transparent !default;
$grid-menu-item-border-radius: 0px !default;
$grid-menu-item-disabled-color: silver !default;
$grid-menu-item-padding: 2px 4px !default;
$grid-menu-item-hover-border: 1px solid #BFBDBD !default;
$grid-menu-item-hover-color: #fafafa !default;
$grid-menu-icon-font-size: 14px !default;
$grid-menu-divider-height: 1px !default;
$grid-menu-divider-margin: 8px 3px !default;
$grid-menu-divider-color: #d8d8d8 !default;
$grid-menu-z-index: 500 !default;

/* (Action) Cell Menu Plugin */
$cell-menu-bg-color: #ffffff !default;
$cell-menu-border: 1px solid #BFBDBD !default;
$cell-menu-border-radius: 2px !default;
$cell-menu-close-bg-color: #ffffff !default;
$cell-menu-close-border: 0px solid #9c9c9c !default;
$cell-menu-close-height: 21px !default;
$cell-menu-close-width: 15px !default;
$cell-menu-close-margin: 1px !default;
$cell-menu-close-padding: 0px !default;
$cell-menu-close-opacity: 0.9 !default;
$cell-menu-min-width: 175px !default;
$cell-menu-padding: 6px !default;
$cell-menu-item-border: 1px solid transparent !default;
$cell-menu-item-border-radius: 0px !default;
$cell-menu-item-disabled-color: silver !default;
$cell-menu-item-font-size: $icon-font-size !default;
$cell-menu-item-hover-border: 1px solid #BFBDBD !default;
$cell-menu-item-hover-color: #fafafa !default;
$cell-menu-item-padding: 2px 4px !default;
$cell-menu-item-width: 100% !default;
$cell-menu-item-width-when-button: calc(100% - #{$cell-menu-close-width} - 3px) !default;
$cell-menu-icon-height: 16px !default;
$cell-menu-icon-margin-right: 4px !default;
$cell-menu-icon-width: 16px !default;
$cell-menu-divider-height: 1px !default;
$cell-menu-divider-margin: 8px 3px !default;
$cell-menu-divider-color: #e5e5e5 !default;
$cell-menu-option-list-margin-bottom: 10px !default;
$cell-menu-title-border-bottom: solid 1px #d6d6d6 !default;
$cell-menu-title-font-size: ($cell-menu-item-font-size + 2px) !default;
$cell-menu-title-font-weight: normal !default;
$cell-menu-title-margin-bottom: 10px !default;
$cell-menu-title-width: calc(100% - #{$cell-menu-close-width} - 10px) !default;
$cell-menu-bg-color: #ffffff !default;
$cell-menu-border: 1px solid #BFBDBD !default;
$cell-menu-border-radius: 2px !default;
$cell-menu-close-bg-color: #ffffff !default;
$cell-menu-close-border: 0px solid #9c9c9c !default;
$cell-menu-close-height: 21px !default;
$cell-menu-close-width: 15px !default;
$cell-menu-close-margin: 1px !default;
$cell-menu-close-padding: 0px !default;
$cell-menu-close-opacity: 0.9 !default;
$cell-menu-min-width: 175px !default;
$cell-menu-padding: 6px !default;
$cell-menu-item-border: 1px solid transparent !default;
$cell-menu-item-border-radius: 0px !default;
$cell-menu-item-disabled-color: silver !default;
$cell-menu-item-font-size: $icon-font-size !default;
$cell-menu-item-hover-border: 1px solid #BFBDBD !default;
$cell-menu-item-hover-color: #fafafa !default;
$cell-menu-item-padding: 2px 4px !default;
$cell-menu-item-width: 100% !default;
$cell-menu-item-width-when-button: calc(100% - #{$cell-menu-close-width} - 3px) !default;
$cell-menu-icon-height: 16px !default;
$cell-menu-icon-margin-right: 4px !default;
$cell-menu-icon-width: 16px !default;
$cell-menu-divider-height: 1px !default;
$cell-menu-divider-margin: 8px 3px !default;
$cell-menu-divider-color: #e5e5e5 !default;
$cell-menu-option-list-margin-bottom: 10px !default;
$cell-menu-title-border-bottom: solid 1px #d6d6d6 !default;
$cell-menu-title-font-size: ($cell-menu-item-font-size + 2px) !default;
$cell-menu-title-font-weight: normal !default;
$cell-menu-title-margin-bottom: 10px !default;
$cell-menu-title-width: calc(100% - #{$cell-menu-close-width} - 10px) !default;

/* Context Menu Plugin */
$context-menu-bg-color: #ffffff !default;
$context-menu-border: 1px solid #BFBDBD !default;
$context-menu-border-radius: 2px !default;
$context-menu-close-bg-color: #ffffff !default;
$context-menu-close-border: 0px solid #9c9c9c !default;
$context-menu-close-height: 21px !default;
$context-menu-close-width: 15px !default;
$context-menu-close-margin: 1px !default;
$context-menu-close-padding: 0px !default;
$context-menu-close-opacity: 0.9 !default;
$context-menu-min-width: 175px !default;
$context-menu-padding: 6px !default;
$context-menu-item-border: 1px solid transparent !default;
$context-menu-item-border-radius: 0px !default;
$context-menu-item-disabled-color: silver !default;
$context-menu-item-font-size: $icon-font-size !default;
$context-menu-item-hover-border: 1px solid #BFBDBD !default;
$context-menu-item-hover-color: #fafafa !default;
$context-menu-item-padding: 2px 4px !default;
$context-menu-item-width: 100% !default;
$context-menu-item-width-when-button: calc(100% - #{$context-menu-close-width} - 3px) !default;
$context-menu-icon-height: 16px !default;
$context-menu-icon-margin-right: 4px !default;
$context-menu-icon-width: 16px !default;
$context-menu-divider-height: 1px !default;
$context-menu-divider-margin: 8px 3px !default;
$context-menu-divider-color: #e5e5e5 !default;
$context-menu-option-list-margin-bottom: 10px !default;
$context-menu-title-border-bottom: solid 1px #d6d6d6 !default;
$context-menu-title-font-size: ($context-menu-item-font-size + 2px) !default;
$context-menu-title-font-weight: normal !default;
$context-menu-title-margin-bottom: 10px !default;
$context-menu-title-width: calc(100% - #{$context-menu-close-width} - 10px) !default;
$context-menu-bg-color: #ffffff !default;
$context-menu-border: 1px solid #BFBDBD !default;
$context-menu-border-radius: 2px !default;
$context-menu-close-bg-color: #ffffff !default;
$context-menu-close-border: 0px solid #9c9c9c !default;
$context-menu-close-height: 21px !default;
$context-menu-close-width: 15px !default;
$context-menu-close-margin: 1px !default;
$context-menu-close-padding: 0px !default;
$context-menu-close-opacity: 0.9 !default;
$context-menu-min-width: 175px !default;
$context-menu-padding: 6px !default;
$context-menu-item-border: 1px solid transparent !default;
$context-menu-item-border-radius: 0px !default;
$context-menu-item-disabled-color: silver !default;
$context-menu-item-font-size: $icon-font-size !default;
$context-menu-item-hover-border: 1px solid #BFBDBD !default;
$context-menu-item-hover-color: #fafafa !default;
$context-menu-item-padding: 2px 4px !default;
$context-menu-item-width: 100% !default;
$context-menu-item-width-when-button: calc(100% - #{$context-menu-close-width} - 3px) !default;
$context-menu-icon-height: 16px !default;
$context-menu-icon-margin-right: 4px !default;
$context-menu-icon-width: 16px !default;
$context-menu-divider-height: 1px !default;
$context-menu-divider-margin: 8px 3px !default;
$context-menu-divider-color: #e5e5e5 !default;
$context-menu-option-list-margin-bottom: 10px !default;
$context-menu-title-border-bottom: solid 1px #d6d6d6 !default;
$context-menu-title-font-size: ($context-menu-item-font-size + 2px) !default;
$context-menu-title-font-weight: normal !default;
$context-menu-title-margin-bottom: 10px !default;
$context-menu-title-width: calc(100% - #{$context-menu-close-width} - 10px) !default;

/* Header Menu Plugin */
$header-menu-bg-color: #ffffff !default;
Expand Down
10 changes: 8 additions & 2 deletions src/app/modules/angular-slickgrid/styles/slick-controls.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,14 +102,15 @@

input[type=checkbox] + label:before {
cursor: pointer;
content: $column-picker-checkbox-icon;
content: $column-picker-checkbox-icon-unchecked;
color: $column-picker-checkbox-color;
display: inline-block;
font-weight: bold;
font-family: $icon-font-family;
font-size: $column-picker-checkbox-size;
opacity: $column-picker-checkbox-opacity; /* unchecked icon */
margin-right: 4px;
width: $column-picker-checkbox-width;
}

input[type=checkbox] + label:hover:before {
Expand All @@ -118,6 +119,8 @@

input[type=checkbox]:checked + label:before {
opacity: 1; /* checked icon */
content: $column-picker-checkbox-icon-checked;
width: $column-picker-checkbox-width;
}
}

Expand Down Expand Up @@ -291,22 +294,25 @@

input[type=checkbox] + label:before {
cursor: pointer;
content: $grid-menu-checkbox-icon;
content: $grid-menu-checkbox-icon-unchecked;
color: $grid-menu-checkbox-color;
display: inline-block;
font-weight: bold;
font-family: $icon-font-family;
font-size: $grid-menu-checkbox-size;
opacity: $grid-menu-checkbox-opacity; /* unchecked icon */
margin-right: 4px;
width: $grid-menu-checkbox-width;
}

input[type=checkbox] + label:hover:before {
opacity: $grid-menu-checkbox-opacity-hover;
}

input[type=checkbox]:checked + label:before {
content: $grid-menu-checkbox-icon-checked;
opacity: 1; /* checked icon */
width: $grid-menu-checkbox-width;
}
}

Expand Down

0 comments on commit b9dc977

Please sign in to comment.