bitgapp/eqMac
1
1
Fork 0
mirror of https://github.com/bitgapp/eqMac.git synced 2024-11-22 22:32:17 +03:00
Code Issues Projects Releases Wiki Activity

a lot of change to cursor/pointer and extra options for components

Browse Source
This commit is contained in:
Nodeful 2021-03-11 19:12:27 +02:00
parent 95fbca5b75
commit 38125b189e
14 changed files with 103 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui/src/app/components/options/options.component.html
View File

@ -4,8 +4,9 @@
<!-- Checkbox -->
<div *ngIf="option.type === 'checkbox'"
fxLayout="row" fxLayoutAlign="center center" fxFill fxLayoutGap="10px"
class="pointer"
(click)="toggleCheckbox(option)">
<eqm-checkbox [interactive]="false" [checked]="option.value"></eqm-checkbox><eqm-label>{{option.label}}</eqm-label>
<eqm-checkbox [interactive]="false" [checked]="option.value"></eqm-checkbox><eqm-label [clickable]="true">{{option.label}}</eqm-label>
</div>
<!-- Button -->
@ -13,7 +14,7 @@
fxFill type="narrow"
[disabled]="!!option.isEnabled && option.isEnabled() === false"
(pressed)="option.action()" [hoverable]="option.hasOwnProperty('hoverable') ? option.hoverable : true">
<eqm-label>{{option.label}}</eqm-label>
<eqm-label [clickable]="true">{{option.label}}</eqm-label>
</eqm-button>
<!-- Select -->
@ -25,7 +26,7 @@
[disabled]="!!option.isEnabled && option.isEnabled() === false"
[depressable]="false" [toggle]="true" type="narrow" [state]="option.selectedId === selectOption.id" (pressed)="selectedOption(option, selectOption)"
>
<eqm-label>{{selectOption.label}}</eqm-label>
<eqm-label [clickable]="true">{{selectOption.label}}</eqm-label>
</eqm-button>
</div>
</div>
@ -37,11 +38,10 @@
<!-- Label -->
<div *ngIf="option.type === 'label'"
[class]="option.url ? 'clickable' : ''"
(click)="openUrl(option.url)"
fxLayout="row" fxLayoutGap="5px" fxLayoutAlign="center center"
>
<eqm-label>{{option.label}}</eqm-label>
<eqm-label [clickable]="!!option.url" [class]="option.url ? 'clickable' : ''">{{option.label}}</eqm-label>
<eqm-question *ngIf="option.tooltip" [eqmTooltip]="option.tooltip"></eqm-question>
</div>

1
ui/src/app/components/options/options.component.scss
View File

@ -8,4 +8,5 @@
.clickable {
cursor: pointer !important;
text-decoration: underline;
}

2
ui/src/app/modules/eqmac-components/components/breadcrumbs/breadcrumbs.component.html
View File

@ -1,6 +1,6 @@
<div class="row">
<div *ngFor="let crumb of crumbs; index as i" class="row">
<eqm-icon class="crumb-part" *ngIf="i !== 0" name="triangle" [rotate]="0" [width]="8" [height]="8"></eqm-icon>
<eqm-label class="crumb-part" (click)="crumbClicked.emit({ crumb: crumb, index: i })">{{crumb}}</eqm-label>
<eqm-label [class]="'crumb-part pointer' + (underline ? ' underline' : '')" (click)="crumbClicked.emit({ crumb: crumb, index: i })">{{crumb}}</eqm-label>
</div>
</div>

8
ui/src/app/modules/eqmac-components/components/breadcrumbs/breadcrumbs.component.scss
View File

@ -8,4 +8,12 @@
.crumb-part {
margin-right: 5px;
}
.underline {
text-decoration: underline;
}
.pointer {
cursor: pointer !important;
}

1
ui/src/app/modules/eqmac-components/components/breadcrumbs/breadcrumbs.component.ts
View File

@ -7,6 +7,7 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
})
export class BreadcrumbsComponent implements OnInit {
@Input() crumbs: string[]
@Input() underline = true
@Output() crumbClicked = new EventEmitter<{ crumb: string, index: number }>()
constructor() { }

10
ui/src/app/modules/eqmac-components/components/button/button.component.scss
View File

@ -15,6 +15,11 @@
transition-property: filter;
transition-duration: .5s;
border-radius: 3px; // font-size: 20px;
cursor: pointer !important;
& * {
cursor: pointer !important;
}
}
.transparent {
@ -65,4 +70,9 @@
.disabled {
// box-shadow: 0 0 0 1px black, 0 0 0 1px rgba(gray, .1) inset, 0 0 15px 10px rgba(black, .3) inset;
filter: grayscale(80%) brightness(80%);
cursor: default !important;
& * {
cursor: default !important;
}
}

9
ui/src/app/modules/eqmac-components/components/checkbox/checkbox.component.scss
View File

@ -2,4 +2,11 @@
display: flex;
justify-content: center;
align-items: center;
}
cursor: default;
filter: grayscale(80%)
}
:host.enabled {
filter: none;
cursor: pointer;
}

7
ui/src/app/modules/eqmac-components/components/checkbox/checkbox.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core'
@Component({
selector: 'eqm-checkbox',
@ -9,11 +9,12 @@ export class CheckboxComponent {
@Input() interactive: boolean = true
@Input() checked: boolean = false
@Output() checkedChanged = new EventEmitter<boolean>()
@HostBinding('class.enabled') @Input() enabled = true
toggle () {
if (this.interactive) {
if (this.interactive && this.enabled) {
this.checked = !this.checked
this.checkedChanged.emit()
this.checkedChanged.emit(this.checked)
}
}
}

11
ui/src/app/modules/eqmac-components/components/dropdown/dropdown.component.html
View File

@ -3,16 +3,19 @@
<div class="item">
<eqm-icon *ngIf="selectedItem && selectedItem.icon" [name]="selectedItem.icon" class="icon" color="#4f8d71"></eqm-icon>
<eqm-label color="#4f8d71"> {{(items.length ? (selectedItem ? selectedItem[labelParam] : placeholder) : noItemsPlaceholder)}} </eqm-label>
<eqm-label color="#4f8d71"> {{(searchText || (items.length ? (selectedItem ? selectedItem[labelParam] : placeholder) : noItemsPlaceholder))}} </eqm-label>
</div>
<div class="arrows" (click)="editable ? toggle($event) : undefined">
<div class="right" *ngIf="searchText" (click)="searchText = null">
<eqm-icon [name]="'cross'" [height]="16" [width]="16" color="#4f8d71"></eqm-icon>
</div>
<div class="right" *ngIf="!searchText" (click)="editable ? toggle($event) : undefined">
<eqm-icon [name]="'triangle'" [height]="8" [width]="8" [color]="items.length ? '#4f8d71' : '#555'" rotate="-90">
</eqm-icon>
<eqm-icon [name]="'triangle'" [height]="8" [width]="8" [color]="items.length ? '#4f8d71' : '#555'" rotate="90">
</eqm-icon>
</div>
</eqm-container>
<eqm-select-box [numberOfVisibleItems]="numberOfVisibleItems" (clickedOutside)="close()" #box [hidden]="!shown"
[class]="'items-select-box' + (direction === 'down' ? ' down' : ' up')" [items]="items" [labelParam]="labelParam"
<eqm-select-box [numberOfVisibleItems]="numberOfVisibleItems" (clickedOutside)="close()" #box [hidden]="!shown || (filteredItems.length === 0)"
[class]="'items-select-box' + (direction === 'down' ? ' down' : ' up')" [items]="filteredItems" [labelParam]="labelParam"
[selectedItem]="selectedItem" (itemSelected)="selectItem($event)" [style.top.px]="yCoordinate"></eqm-select-box>

2
ui/src/app/modules/eqmac-components/components/dropdown/dropdown.component.scss
View File

@ -19,7 +19,7 @@
transform: translateX(-2px);
}
.arrows {
.right {
width: 20px;
display: inline-flex;
flex-direction: column;

42
ui/src/app/modules/eqmac-components/components/dropdown/dropdown.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit, Input, ViewChild, ElementRef, EventEmitter, Output, NgZone, HostBinding } from '@angular/core'
import { Component, OnInit, Input, ViewChild, ElementRef, EventEmitter, Output, NgZone, HostBinding, HostListener } from '@angular/core'
import { SelectBoxComponent } from '../select-box/select-box.component'
import { UtilitiesService } from '../../services/utilities.service'
import { InputFieldComponent } from '../input-field/input-field.component'
@ -26,6 +26,7 @@ export class DropdownComponent implements OnInit {
}
set items (newItems) {
if (!newItems || !Array.isArray(newItems)) return
this.searchText = null
this._items = newItems
}
@Output() refChanged = new EventEmitter<DropdownComponent>()
@ -36,6 +37,7 @@ export class DropdownComponent implements OnInit {
@Input() placeholder = 'Select item'
@Input() noItemsPlaceholder = 'No items'
@Input() closeOnSelect = true
@Input() searchable = true
@Output() itemSelected = new EventEmitter()
@ViewChild('container', { read: ElementRef, static: true }) container: ElementRef
@ -103,7 +105,7 @@ export class DropdownComponent implements OnInit {
}
async open () {
if (!this.disabled && !this.shown && this.items.length > 1) {
if (!this.disabled && !this.shown && this.items.length) {
this.calculateYCoordinate()
this.setDimensions()
this.shown = true
@ -113,6 +115,7 @@ export class DropdownComponent implements OnInit {
async close () {
if (!this.disabled && this.shown) {
this.shown = false
this.searchText = null
}
}
@ -123,4 +126,39 @@ export class DropdownComponent implements OnInit {
this.close()
}
}
searchText: string
@HostListener('document:keypress', ['$event'])
keypress (event: KeyboardEvent) {
if (!this.disabled && this.shown && this.searchable) {
switch (event.key) {
case 'Backspace': {
if (this.searchText.length) {
this.searchText = this.searchText.slice(0, this.searchText.length - 1)
}
break
}
case 'Escape': {
this.close()
break
}
case 'Enter': {
break
}
default: {
if (/^[+a-zA-Z0-9_.-\s]$/.test(event.key)) {
this.searchText = (this.searchText ?? '') + event.key
}
}
}
}
}
get filteredItems () {
if (this.searchable && this.searchText) {
return this.items.filter(item => item[this.labelParam].toLowerCase().includes(this.searchText.toLowerCase()))
} else {
return this.items
}
}
}

8
ui/src/app/modules/eqmac-components/components/label/label.component.scss
View File

@ -6,9 +6,15 @@
flex-direction: column;
align-items: center;
justify-content: center;
cursor: default;
& * {
cursor: default;
}
}
.label {
font-family: SF Pro Text;
font-size: 12px;
color: #c9cdd0;
}
// cursor: default;
}

10
ui/src/app/modules/eqmac-components/components/label/label.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit, Input } from '@angular/core'
import { Component, OnInit, Input, HostBinding } from '@angular/core'
@Component({
selector: 'eqm-label',
@ -8,12 +8,18 @@ import { Component, OnInit, Input } from '@angular/core'
export class LabelComponent {
@Input() fontSize: number
@Input() color: string
@Input() clickable = false
constructor () { }
get style () {
return {
...(this.color && { color: this.color }),
...(this.fontSize && { fontSize: `${this.fontSize}px` })
...(this.fontSize && { fontSize: `${this.fontSize}px` }),
...(this.clickable && { cursor: 'pointer' })
}
}
@HostBinding('style.cursor') get cursor () {
return this.clickable ? 'pointer' : 'inherit'
}
}

3
ui/src/app/modules/eqmac-components/components/toggle/toggle.component.scss
View File

@ -6,7 +6,8 @@
background-color: $text-medium;
border-radius: 9px;
position: relative;
cursor: pointer;
box-shadow:
0 0 0 1px rgb(70, 74, 77) inset,
// 0 0 0 3px rgba(43, 44, 48, .5) inset,