Skip to content

Commit

Permalink
feat(stark-ui): implementation of minimap component
Browse files Browse the repository at this point in the history 
ISSUES CLOSED: #758t pu
  • Loading branch information
@Mallikki
Mallikki committed Oct 9, 2018
1 parent 06f945e commit e3ad003
Show file tree
Hide file tree
Showing 9 changed files with 600 additions and 0 deletions.
1 change: 1 addition & 0 deletions packages/stark-ui/src/modules.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export * from "./modules/date-range-picker";
export * from "./modules/dropdown";
export * from "./modules/keyboard-directives";
export * from "./modules/language-selector";
export * from "./modules/minimap";
export * from "./modules/pagination";
export * from "./modules/pretty-print";
export * from "./modules/session-ui";
Expand Down
2 changes: 2 additions & 0 deletions packages/stark-ui/src/modules/minimap.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export * from "./minimap/minimap.module";
export * from "./minimap/components";
2 changes: 2 additions & 0 deletions packages/stark-ui/src/modules/minimap/components.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export * from "./components/minimap.component";
export * from "./components/item-properties.intf";
229 changes: 229 additions & 0 deletions packages/stark-ui/src/modules/minimap/components/_minimap.component.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,229 @@
/* ============================================================================== */
/* S t a r k M i n i m a p */
/* ============================================================================== */
/* stark-ui: src/modules/minimap/components/minimap.component.scss */

.stark-minimap {
display: flex;
flex-flow: row wrap;
flex-grow: 1;
align-items: flex-start;
justify-content: flex-end;
padding-top: 8px;
margin: 0 15px;
& .stark-minimap-dots {
& ul {
margin: 0 8px 0 0;
padding: 0;
}
& li {
display: inline-block;
margin: 0;
padding: 0 3px 0;
line-height: 18px;
vertical-align: top;
}
& i {
display: inline-block;
width: 4px;
height: 4px;
background-color: mat-color($primary-dark-text-color);
opacity: 0.2;
}
& li.selected i {
opacity: 1;
}
}
& .stark-minimap-dropdown-toggle {
position: relative;
margin: 0;
padding-top: 0;
& .stark-minimap-dropdown-toggle-menu {
font-size: 14px;
border: 0;
box-shadow: $elevation-4;
min-width: 180px;
& mat-checkbox.mat-checked .mat-icon {
background-color: $md-accent;
}
& mat-checkbox .mat-label {
margin-left: 40px;
font-size: 12px;
}
}
& .mat-button.mat-icon-button {
height: auto;
padding: 10px;
margin: 0;
transform: translateY(-8px);
& svg {
fill: mat-color($primary-dark-text-color);
}
}
& mat-icon {
fill: $md-primary;
}
& .mat-icon-button .up {
display: none;
}
&.visible {
& .stark-minimap-dropdown-toggle-menu {
display: block;
}
& .down {
display: none;
}
& .up {
display: inline-block;
}
}
& .stark-minimap-dropdown-toggle-button {
width: auto;
height: auto;
min-height: 0;
margin: 0;
padding: 0 2px 0 0;
}
& .stark-minimap-dropdown-toggle-menu {
position: absolute;
z-index: 1;
top: 27px;
right: 0;
display: none;
padding: 0;
border-radius: 2px;
box-shadow: 0 1px 2px mat-color($grey-palette, 900);
font-size: 16px;
background-color: #fff;
& mat-checkbox {
display: block;
width: 100%;
min-width: 0;
min-height: 0;
margin: 0;
padding: 4px 8px 5px;
&:hover {
background: mat-color($primary-palette, 600);
}
& .mat-form-field {
width: var(--checkbox-size);
height: var(--checkbox-size);
top: 13px;
left: 8px;
}
& .mat-icon {
width: var(--checkbox-size);
height: var(--checkbox-size);
top: 5px;
&::after {
border-color: #fff;
}
}
& .mat-label {
width: 100%;
margin: 0;
padding: 0 0 0 20px;
& span {
display: block;
max-width: 260px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
&.mat-checked .mat-icon::after {
width: 6px;
height: 8px;
top: 3px;
left: 4px;
}
&:first-child {
margin-top: 4px;
}
&:last-child {
margin-bottom: 4px;
}
}
& .stark-minimap-dropdown {
& .mat-form-field {
left: 16px;
}
& mat-checkbox.stark-minimap-column-checkbox {
& .mat-icon {
border-width: 1px;
}
&.mat-checked .mat-icon {
background-color: $md-primary-alpha-87;
}
}
}
}
}

@media #{$desktop-query} {
& .stark-minimap-dropdown-toggle-menu {
font-size: 16px;
& mat-checkbox {
padding: 3px 16px;
& .mat-form-field {
width: var(--checkbox-size);
height: var(--checkbox-size);
top: 10px;
left: 16px;
}
& .mat-icon {
width: var(--checkbox-size);
height: var(--checkbox-size);
}
& .mat-label {
width: 100%;
padding: 0 0 0 26px;
font-size: 12px;
& span {
max-width: 400px;
}
}
&.mat-checked .mat-icon::after {
width: 8px;
height: 10px;
top: 2px;
left: 4px;
}
&:first-child {
margin-top: 8px;
}
&:last-child {
margin-bottom: 8px;
}
}
}
}
}

.stark-table {
& .stark-minimap-dropdown-toggle-menu {
padding-right: 16px;
}
& .stark-table-action-bar {
& .stark-minimap-dropdown-toggle-button {
& mat-icon {
width: 20px;
height: 20px;
}
}
}
& .stark-minimap {
padding-top: 0;
& .stark-minimap-dropdown-toggle .mat-button.mat-icon-button {
transform: none;
}
& .stark-minimap-dropdown-toggle .stark-minimap-dropdown-toggle-menu {
font-size: 14px;
border: 0;
box-shadow: $elevation-2;
min-width: 180px;
}
}
}

/* END stark: src/ui/components/minimap/minimap.component.pcss */
14 changes: 14 additions & 0 deletions packages/stark-ui/src/modules/minimap/components/item-properties.intf.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
/**
* Represents the properties of an item inside the Stark Minimap component.
*/
export interface StarkMinimapItemProperties {
/**
* The name of the item
*/
name: string;

/**
* The label of the item (optional). If not provided, then the name of the item will be used.
*/
label?: string;
}
32 changes: 32 additions & 0 deletions packages/stark-ui/src/modules/minimap/components/minimap.component.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<div class="stark-minimap">
<div class="stark-minimap-dots">
<ul>
<li *ngFor="let item of items; trackBy: $index"
[ngClass]="{'selected':isItemVisible(item)}">
<i></i>
</li>
</ul>
</div>
<div class="stark-minimap-dropdown-toggle"
[ngClass]="{'visible':isDisplayedMenu}">
<button mat-button class="md-icon-button stark-minimap-dropdown-toggle-button"
(click)="toggleDropdownMenu()"
aria-label="Toggle columns"
matTooltip="'STARK.TABLE.TOGGLE_COLUMNS'"
[matTooltipPosition]="below"
translate>
<mat-icon class="down" svgIcon="menu-down"></mat-icon>
<mat-icon class="up" svgIcon="menu-up"></mat-icon>
</button>
<div class="stark-minimap-dropdown-toggle-menu">
<div class="stark-minimap-dropdown">
<mat-checkbox *ngFor="let item of items; trackBy : $index"
[checkec]="isItemVisible(item)"
(click)="triggerShowHideItem(item)"
class="stark-minimap-column-checkbox">
<span translate>{{ getItemLabel(item) }}</span>
</mat-checkbox>
</div>
</div>
</div>
</div>
Loading

0 comments on commit e3ad003

Please sign in to comment.