Skip to content

Commit 36ed8eb

Browse files
nodefulnodeful
committed
ui fixes and tweaks
1 parent e6d205c commit 36ed8eb

37 files changed

Lines changed: 97 additions & 62 deletions

‎.vscode/settings.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
{
2+
}

‎modules/components/src/components/checkbox/checkbox.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<ng-template #label>
2-
<eqm-label style="margin: 0 5px;" [clickable]="enabled">
2+
<eqm-label style="margin: 0 5px;" [clickable]="enabled" [color]="labelColor">
33
<ng-content></ng-content>
44
</eqm-label>
55
</ng-template>
66

77
<div *ngIf="labelSide === 'left'" #content>
88
<ng-container *ngTemplateOutlet="label"></ng-container>
99
</div>
10-
<eqm-container>
11-
<eqm-icon name="checkbox" [size]="10" [color]="checked ? '#4f8d71' : 'transparent'"></eqm-icon>
10+
<eqm-container [color]="bgColor">
11+
<eqm-icon name="checkbox" [size]="10" [color]="checked ? color : 'transparent'"></eqm-icon>
1212
</eqm-container>
1313
<div *ngIf="labelSide === 'right'" #content>
1414
<ng-container *ngTemplateOutlet="label"></ng-container>

‎modules/components/src/components/checkbox/checkbox.component.ts‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { Component, Input, Output, EventEmitter, HostBinding, HostListener, ViewChild, ElementRef, ContentChild, ChangeDetectionStrategy } from '@angular/core'
1+
import { Component, Input, Output, EventEmitter, HostBinding, HostListener, ViewChild, ElementRef, ContentChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'
2+
import { ColorsService } from '../../services/colors.service'
23

34
@Component({
45
selector: 'eqm-checkbox',
@@ -8,16 +9,24 @@ import { Component, Input, Output, EventEmitter, HostBinding, HostListener, View
89
})
910
export class CheckboxComponent {
1011
@Input() labelSide: 'left' | 'right'
12+
@Input() labelColor = ColorsService.light
1113
@Input() interactive: boolean = true
1214
@Input() checked: boolean = false
13-
@Output() checkedChanged = new EventEmitter<boolean>()
15+
@Output() checkedChange = new EventEmitter<boolean>()
16+
@Input() color = ColorsService.accent
17+
@Input() bgColor = ColorsService.dark
1418
@HostBinding('class.enabled') @Input() enabled = true
1519

20+
constructor (
21+
private readonly change: ChangeDetectorRef
22+
) {}
23+
1624
@HostListener('click')
1725
toggle () {
1826
if (this.interactive && this.enabled) {
1927
this.checked = !this.checked
20-
this.checkedChanged.emit(this.checked)
28+
this.checkedChange.emit(this.checked)
29+
this.change.detectChanges()
2130
}
2231
}
2332
}

‎modules/components/src/components/container/container.component.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
margin: 2px;
66
color: $accent;
77
border-radius: 2px;
8-
background-color: $text-medium;
98
box-shadow: 0 0 0 1px #000,
109
0 0 0 2px rgb(70, 74, 77);
1110
background-size: 6px 6px;

‎modules/components/src/components/container/container.component.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Component, OnInit, HostBinding, Input, ChangeDetectionStrategy } from '@angular/core'
2+
import { ColorsService } from '../../services/colors.service'
23

34
@Component({
45
selector: 'eqm-container',
@@ -7,7 +8,7 @@ import { Component, OnInit, HostBinding, Input, ChangeDetectionStrategy } from '
78
})
89
export class ContainerComponent implements OnInit {
910
@HostBinding('class.enabled') @Input() enabled = true
10-
11+
@Input() @HostBinding('style.background-color') color = ColorsService.dark
1112
ngOnInit () {
1213
}
1314
}

‎modules/components/src/components/dropdown/dropdown.component.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@
22
class="container">
33
<div class="item">
44

5-
<eqm-icon *ngIf="selectedItem && selectedItem.icon" [name]="selectedItem.icon" [rotate]="selectedItem.iconRotate || 0" class="icon" [color]="selectedItem.iconColor || '#4f8d71'"></eqm-icon>
6-
<eqm-label color="#4f8d71"> {{(searchText || (items.length ? (selectedItem ? selectedItem[labelParam] : placeholder) : noItemsPlaceholder))}} </eqm-label>
5+
<eqm-icon *ngIf="selectedItem && selectedItem.icon" [name]="selectedItem.icon" [rotate]="selectedItem.iconRotate || 0" class="icon" [color]="selectedItem.iconColor || colors.accent"></eqm-icon>
6+
<eqm-label [color]="colors.accent"> {{(searchText || (items.length ? (selectedItem ? selectedItem[labelParam] : placeholder) : noItemsPlaceholder))}} </eqm-label>
77
</div>
88

99
<div class="right" *ngIf="searchText" (click)="searchText = undefined">
10-
<eqm-icon [name]="'cross'" [height]="16" [width]="16" color="#4f8d71"></eqm-icon>
10+
<eqm-icon [name]="'cross'" [height]="16" [width]="16" [color]="colors.accent"></eqm-icon>
1111
</div>
1212
<div class="right" *ngIf="!searchText" (click)="editable ? toggle($event) : undefined">
13-
<eqm-icon [name]="'triangle'" [height]="8" [width]="8" [color]="items.length ? '#4f8d71' : '#555'" [rotate]="-90">
13+
<eqm-icon [name]="'triangle'" [height]="8" [width]="8" [color]="items.length ? colors.accent : '#555'" [rotate]="-90">
1414
</eqm-icon>
15-
<eqm-icon [name]="'triangle'" [height]="8" [width]="8" [color]="items.length ? '#4f8d71' : '#555'" [rotate]="90">
15+
<eqm-icon [name]="'triangle'" [height]="8" [width]="8" [color]="items.length ? colors.accent : '#555'" [rotate]="90">
1616
</eqm-icon>
1717
</div>
1818
</eqm-container>

‎modules/components/src/components/dropdown/dropdown.component.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ $animation-duration: .2s;
3232

3333
.items-select-box{
3434
position: fixed;
35-
z-index: 999;
35+
z-index: 4;
3636
box-shadow: 0px 8px 77px 2px rgba(0,0,0,0.56);
3737
}
3838

‎modules/components/src/components/dropdown/dropdown.component.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Component, OnInit, Input, ViewChild, ElementRef, EventEmitter, Output,
22
import { SelectBoxComponent } from '../select-box/select-box.component'
33
import { UtilitiesService } from '../../services/utilities.service'
44
import { FadeInOutAnimation } from '../../animations'
5+
import { ColorsService } from '../../services/colors.service'
56

67
@Component({
78
selector: 'eqm-dropdown',
@@ -14,7 +15,8 @@ export class DropdownComponent implements OnInit {
1415
constructor (
1516
public utils: UtilitiesService,
1617
public zone: NgZone,
17-
public ref: ElementRef
18+
public ref: ElementRef,
19+
public colors: ColorsService
1820
) {
1921
}
2022

‎modules/components/src/components/flat-slider/flat-slider.component.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
} from '../../services/utilities.service'
1818
import { FadeInOutAnimation } from '../../animations'
1919
import { DomSanitizer } from '@angular/platform-browser'
20+
import { ColorsService } from '../../services/colors.service'
2021

2122
export interface FlatSliderValueChangedEvent {
2223
value: number
@@ -35,7 +36,8 @@ export class FlatSliderComponent implements OnInit, OnDestroy {
3536
public utils: UtilitiesService,
3637
public elem: ElementRef<HTMLElement>,
3738
public sanitizer: DomSanitizer,
38-
private readonly changeRef: ChangeDetectorRef
39+
private readonly changeRef: ChangeDetectorRef,
40+
public colors: ColorsService
3941
) {}
4042

4143
@Input() scale: 'logarithmic' | 'linear' = 'linear'
@@ -63,7 +65,7 @@ export class FlatSliderComponent implements OnInit, OnDestroy {
6365
return typeof this.middle === 'number' ? this.middle : (this.min + this.max) / 2
6466
}
6567

66-
public defaultColor = '#4f8d71'
68+
public defaultColor = ColorsService.accent
6769
public _enabled = true
6870

6971
@HostBinding('class.enabled')

‎modules/components/src/components/icon/icons.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ export const svgs = {
1313
<polygon points="5,17.1 5,71.1 16.166,71.1 22.389,63.9 12.2,63.9 12.2,24.3 87.8,24.3 87.8,63.9 78.076,63.9 84.291,71.1 95,71.1 95,17.1 "/>
1414
</svg>
1515
`,
16+
arrow: /* html */`
17+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M112 328l144-144 144 144"/></svg>
18+
`,
1619
avatar: /* html */`
1720
<svg viewBox="0 0 512 512">
1821
<path d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm-50.22 116.82C218.45 151.39 236.28 144 256 144s37.39 7.44 50.11 20.94c12.89 13.68 19.16 32.06 17.68 51.82C320.83 256 290.43 288 256 288s-64.89-32-67.79-71.25c-1.47-19.92 4.79-38.36 17.57-51.93zM256 432a175.49 175.49 0 01-126-53.22 122.91 122.91 0 0135.14-33.44C190.63 329 222.89 320 256 320s65.37 9 90.83 25.34A122.87 122.87 0 01382 378.78 175.45 175.45 0 01256 432z"/>

0 commit comments

Comments
 (0)