Skip to content

Commit

Permalink
feat(styling): material theme, replace all built-in Font char to SVG
Browse files Browse the repository at this point in the history
  • Loading branch information
ghiscoding committed May 8, 2020
1 parent 1c5f341 commit ed25d6a
Show file tree
Hide file tree
Showing 9 changed files with 169 additions and 36 deletions.
3 changes: 2 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,8 @@ npm run test:watch
- [ ] Eventually add Unit Tests as a PreBundle task
- [ ] Remove any Deprecated code
- [ ] Create a [Migration Guide](https://github.com/ghiscoding/slickgrid-universal/wiki/Migration-for-Angular-Aurelia-Slickgrid) for Angular/Aurelia
- [ ] Add Typings for Grid & DataView objects
- [x] Add simple input bindings in the demo (e.g. pinned rows input)
- [x] Add possibility to use SVG instead of Font Family
- [ ] Add Typings for Grid & DataView objects
- [ ] Cannot copy text from cell since it's not selectable
- [ ] Remove all Service init 2nd argument (we can get DataView from the Grid object)
1 change: 1 addition & 0 deletions packages/common/src/styles/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -365,6 +365,7 @@ $header-menu-button-icon: "\f13a" !default;
$header-menu-button-icon-color: inherit !default;
$header-menu-button-icon-font-size: 14px !default;
$header-menu-button-icon-font-weight: normal !default;
$header-menu-button-icon-width: 14px !default;
$header-menu-button-padding: 0px !default;
$header-menu-button-margin-right: 3px !default;
$header-menu-border-radius: 2px !default;
Expand Down
4 changes: 4 additions & 0 deletions packages/common/src/styles/slick-bootstrap.scss
Original file line number Diff line number Diff line change
Expand Up @@ -208,15 +208,19 @@
cursor: pointer;

&.expanded:before {
display: inline-block;
content: $icon-group-expanded;
font-family: $icon-font-family;
font-size: $icon-group-font-size;
width: $icon-group-width;
}

&.collapsed:before {
display: inline-block;
content: $icon-group-collapsed;
font-family: $icon-font-family;
font-size: $icon-group-font-size;
width: $icon-group-width;
}
}
}
Expand Down
4 changes: 3 additions & 1 deletion packages/common/src/styles/slick-plugins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -288,10 +288,12 @@
width: $header-menu-button-width;
}
.slick-header-menubutton:before {
display: inline-block;
content: $header-menu-button-icon;
font-family: $icon-font-family;
font-size: $header-menu-button-icon-font-size;
font-weight: $header-menu-button-icon-font-weight;
content: $header-menu-button-icon;
width: $header-menu-button-icon-width;
}

.slick-header-column {
Expand Down
106 changes: 106 additions & 0 deletions packages/common/src/styles/slickgrid-theme-material-with-font.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
$font-family: Roboto, "Helvetica Neue", sans-serif;
$font-size-base-value: 14;
$icon-font-family: "Material Design Icons";
$icon-font-size: 20px;
$group-totals-formatter-color: #666666;
$cell-border-top: none;
$cell-font-weight: 400;
$cell-padding-top-bottom: 8px;
$cell-padding-right-left: 7px;
$cell-odd-background-color: #f5f5f5;
$cell-text-color: rgba(0, 0, 0, 0.87);
$header-row-filter-padding: 8px 4px;
$header-font-size: 12px;
$header-font-weight: 700;
$header-text-color: rgba(0, 0, 0, 0.87);
$header-border-bottom: transparent;
$header-filter-row-border-bottom: 1px solid #d0d0d0;
$header-resizable-hover: 2px solid lighten(#48c774, 15%);
$header-resizable-hover-border-bottom: $header-resizable-hover;
$header-resizable-hover-border-left: $header-resizable-hover;
$header-resizable-hover-border-right: $header-resizable-hover;
$header-resizable-hover-border-top: $header-resizable-hover;
$header-resizable-hover-width: 4px;
$header-resizable-hover-border-radius: 8px;
$header-resizable-hover-right: 0;
$header-resizable-hover-opacity: 0.4;
$slick-pane-top-border-top: 1px solid #d0d0d0;
$container-border-top: 1px solid #ccc;
$container-border-bottom: 1px solid #ccc;
$container-border-left: 1px solid #ccc;
$container-border-right: 1px solid #ccc;
$icon-sort-asc: "\F0360";
$icon-sort-desc: "\F035D";
$icon-sort-font-size: 22px;
$icon-sort-position-right: 18px;
$checkbox-selector-size: 22px;
$checkbox-selector-icon-font-weight: normal;
$checkbox-selector-icon-checked: "\F0132";
$checkbox-selector-icon-unchecked: "\F0131";
$checkbox-selector-opacity: 1;
$checkbox-selector-opacity-hover: 0.9;
$cell-menu-icon-margin-right: 6px;
$column-picker-checkbox-size: 18px;
$column-picker-checkbox-font-weight: normal;
$column-picker-checkbox-icon-checked: "\F012c";
$column-picker-checkbox-icon-unchecked: "\F012c";
$column-picker-checkbox-width: 18px;
$column-picker-title-font-size: 18px;
$context-menu-item-font-size: 16px;
$context-menu-icon-font-size: 16px;
$icon-group-collapsed: "\F0142";
$icon-group-expanded: "\F0140";
$icon-group-font-weight: normal;
$icon-group-margin-right: 8px;
$draggable-group-drop-width: 100%;
$draggable-group-drop-radius: 0;
$draggable-group-toggle-collapsed-icon: "\F0142";
$draggable-group-toggle-expanded-icon: "\F0140";
$draggable-group-title-height: 24px;
$draggable-group-title-line-height: 24px;
$draggable-group-title-vertical-align: top;
$grid-menu-checkbox-size: 18px;
$grid-menu-checkbox-font-weight: normal;
$grid-menu-checkbox-icon-checked: "\F012c";
$grid-menu-checkbox-icon-unchecked: "\F012c";
$grid-menu-checkbox-width: 18px;
$grid-menu-icon-font-size: 20px;
$grid-menu-icon-width: 20px;
$grid-menu-icon-top-margin: 8px;
$grid-menu-title-font-size: 18px;
$header-menu-button-icon-font-size: 20px;
$header-menu-icon-font-size: 18px;
$header-menu-icon-width: 18px;
$header-menu-button-icon: "\F0140";
$header-menu-button-margin-right: 6px;
$header-menu-display: inline-block;
$multiselect-icon-arrow-font-size: $icon-font-size - 4px;
$multiselect-icon-checked: "\F0132";
$multiselect-icon-unchecked: "\F0131";
$multiselect-icon-radio-checked: "\F043E";
$multiselect-icon-radio-unchecked: "\F0130";
$multiselect-unchecked-opacity: 0.8;
$preheader-border-right: 1px solid #e2e2e2;
// $preheader-border-bottom: 1px solid #e2e2e2;
$row-move-plugin-cursor: grab;
$row-move-plugin-icon: "\F0278";
$slider-editor-height: 26px;
$primary-color: #009530;
$row-mouse-hover-color: #ebfaef;
$row-selected-color: #d4f6d7; /*rgba(0, 149, 48, 0.2);*/

@import './roboto-font';
@import './slick-default-theme';
@import './slick-without-bootstrap-min-styling';
@import './slick-grid';
@import './slick-controls';
@import './slick-editors';
@import './slick-plugins';
@import './slick-pagination';
@import './slick-footer';
@import './slickgrid-examples';
@import './slick-bootstrap';
@import './bootstrap-jquery-ui-autocomplete';

$link-color: $primary-color;
@import './extra-styling.scss';
67 changes: 42 additions & 25 deletions packages/common/src/styles/slickgrid-theme-material.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
@import './sass-utilities';

$primary-color: #009530;
$dark-gray: #3f3e3e;
$font-family: Roboto, "Helvetica Neue", sans-serif;
$font-size-base-value: 14;
$icon-font-family: "Material Design Icons";
Expand Down Expand Up @@ -29,65 +33,78 @@ $container-border-top: 1px solid #ccc;
$container-border-bottom: 1px solid #ccc;
$container-border-left: 1px solid #ccc;
$container-border-right: 1px solid #ccc;
$icon-sort-asc: "\F0360";
$icon-sort-desc: "\F035D";
$icon-sort-font-size: 22px;
$icon-sort-position-right: 18px;
$icon-sort-asc: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($primary-color)}" viewBox="0 0 24 24"><path d="M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z"></path></svg>');
$icon-sort-desc: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($primary-color)}" viewBox="0 0 24 24"><path d="M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z"></path></svg>');
$icon-sort-font-size: 16px;
$icon-sort-position-right: 14px;
$icon-sort-width: 16px;
$checkbox-selector-size: 22px;
$checkbox-selector-icon-font-weight: normal;
$checkbox-selector-icon-checked: "\F0132";
$checkbox-selector-icon-unchecked: "\F0131";
$checkbox-selector-color: $primary-color;
$checkbox-selector-icon-width: $checkbox-selector-size;
$checkbox-selector-icon-checked: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($checkbox-selector-color)}" viewBox="0 0 24 24"><path d="M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z"></path></svg>');
$checkbox-selector-icon-unchecked: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($checkbox-selector-color)}" viewBox="0 0 24 24"><path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z"></path></svg>');
$checkbox-selector-opacity: 1;
$checkbox-selector-opacity-hover: 0.9;
$cell-menu-icon-margin-right: 6px;
$column-picker-checkbox-size: 18px;
$column-picker-checkbox-font-weight: normal;
$column-picker-checkbox-icon-checked: "\F012c";
$column-picker-checkbox-icon-unchecked: "\F012c";
$column-picker-checkbox-icon-checked: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($primary-color)}" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg>');
$column-picker-checkbox-icon-unchecked: $column-picker-checkbox-icon-checked;
$column-picker-checkbox-width: 18px;
$column-picker-title-font-size: 18px;
$context-menu-item-font-size: 16px;
$context-menu-icon-font-size: 16px;
$icon-group-collapsed: "\F0142";
$icon-group-expanded: "\F0140";
$icon-group-width: 22px;
$icon-group-collapsed: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($dark-gray)}" viewBox="0 0 24 24"><path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"></path></svg>');
$icon-group-expanded: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($dark-gray)}" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></path></svg>');
$icon-group-font-weight: normal;
$icon-group-margin-right: 8px;
$icon-group-margin-right: 0;
$draggable-group-drop-width: 100%;
$draggable-group-drop-radius: 0;
$draggable-group-toggle-collapsed-icon: "\F0142";
$draggable-group-toggle-expanded-icon: "\F0140";
$draggable-group-toggle-collapsed-icon: $icon-group-collapsed;
$draggable-group-toggle-expanded-icon: $icon-group-expanded;
$draggable-group-title-height: 24px;
$draggable-group-title-line-height: 24px;
$draggable-group-title-vertical-align: top;
$grid-menu-checkbox-size: 18px;
$grid-menu-checkbox-font-weight: normal;
$grid-menu-checkbox-icon-checked: "\F012c";
$grid-menu-checkbox-icon-unchecked: "\F012c";
$grid-menu-checkbox-icon-checked: $column-picker-checkbox-icon-checked;
$grid-menu-checkbox-icon-unchecked: $column-picker-checkbox-icon-checked;
$grid-menu-checkbox-width: 18px;
$grid-menu-icon-font-size: 20px;
$grid-menu-icon-width: 20px;
$grid-menu-icon-top-margin: 8px;
$grid-menu-title-font-size: 18px;
$header-menu-button-icon-font-size: 20px;
$header-menu-icon-font-size: 18px;
$header-menu-icon-width: 18px;
$header-menu-button-icon: "\F0140";
$header-menu-button-icon: $icon-group-expanded;
$header-menu-button-icon-font-size: 22px;
$header-menu-button-icon-width: 22px;
$header-menu-button-margin-right: 6px;
$header-menu-display: inline-block;
$multiselect-icon-arrow-font-size: $icon-font-size - 4px;
$multiselect-icon-checked: "\F0132";
$multiselect-icon-unchecked: "\F0131";
$multiselect-icon-radio-checked: "\F043E";
$multiselect-icon-radio-unchecked: "\F0130";
$multiselect-icon-arrow-font-size: 16px;
$multiselect-icon-height: 16px;
$multiselect-icon-width: 16px;
$multiselect-icon-margin: 0px 4px 0 0;
$multiselect-icon-checked: $checkbox-selector-icon-checked;
$multiselect-icon-unchecked: $checkbox-selector-icon-unchecked;
$multiselect-icon-radio-checked: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($primary-color)}" viewBox="0 0 22 22"><path d="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7Z"></path></svg>');
$multiselect-icon-radio-unchecked: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($primary-color)}" viewBox="0 0 22 22"><path d="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>');
$multiselect-unchecked-opacity: 0.8;
$preheader-border-right: 1px solid #e2e2e2;
// $preheader-border-bottom: 1px solid #e2e2e2;
$row-move-plugin-cursor: grab;
$row-move-plugin-icon: "\F0278";
$row-move-plugin-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($dark-gray)}" viewBox="0 0 24 24"><path d="M10,13H22V11H10M10,19H22V17H10M10,7H22V5H10M6,7H8.5L5,3.5L1.5,7H4V17H1.5L5,20.5L8.5,17H6V7Z"></path></svg>');
$slider-editor-height: 26px;
$primary-color: #009530;
$row-mouse-hover-color: #ebfaef;
$row-selected-color: #d4f6d7; /*rgba(0, 149, 48, 0.2);*/
$detail-view-icon-collapse: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($primary-color)}" viewBox="0 0 24 24"><path d="M17,13H7V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>');
$detail-view-icon-expand: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($primary-color)}" viewBox="0 0 24 24"><path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>');
$pagination-icon-seek-first: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($primary-color)}" viewBox="0 0 24 24"><path d="M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z"></path></svg>');
$pagination-icon-seek-end: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($primary-color)}" viewBox="0 0 24 24"><path d="M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z"></path></svg>');
$pagination-icon-seek-next: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($primary-color)}" viewBox="0 0 24 24"><path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"></path></svg>');
$pagination-icon-seek-prev: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($primary-color)}" viewBox="0 0 24 24"> <path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"></path></svg>');


@import './roboto-font';
@import './slick-default-theme';
Expand Down
Loading

0 comments on commit ed25d6a

Please sign in to comment.