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

nodeful · nodeful · commit 38125b189ee9 · 2021-03-11T19:12:27.000+02:00
diff --git a/ui/src/app/components/options/options.component.html b/ui/src/app/components/options/options.component.html
@@ -4,16 +4,17 @@
         <!-- 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 -->
         <eqm-button *ngIf="option.type === 'button'" 
         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>
 
diff --git a/ui/src/app/components/options/options.component.scss b/ui/src/app/components/options/options.component.scss
@@ -8,4 +8,5 @@
 
 .clickable {
   cursor: pointer !important;
+  text-decoration: underline;
 }
diff --git a/ui/src/app/modules/eqmac-components/components/breadcrumbs/breadcrumbs.component.html b/ui/src/app/modules/eqmac-components/components/breadcrumbs/breadcrumbs.component.html
@@ -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>
diff --git a/ui/src/app/modules/eqmac-components/components/breadcrumbs/breadcrumbs.component.scss b/ui/src/app/modules/eqmac-components/components/breadcrumbs/breadcrumbs.component.scss
@@ -8,4 +8,12 @@
 
 .crumb-part {
   margin-right: 5px;
+}
+
+.underline {
+  text-decoration: underline;
+}
+
+.pointer {
+  cursor: pointer !important;
 }
diff --git a/ui/src/app/modules/eqmac-components/components/breadcrumbs/breadcrumbs.component.ts b/ui/src/app/modules/eqmac-components/components/breadcrumbs/breadcrumbs.component.ts
@@ -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() { }
 
diff --git a/ui/src/app/modules/eqmac-components/components/button/button.component.scss b/ui/src/app/modules/eqmac-components/components/button/button.component.scss
@@ -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;
+  }
 }
diff --git a/ui/src/app/modules/eqmac-components/components/checkbox/checkbox.component.scss b/ui/src/app/modules/eqmac-components/components/checkbox/checkbox.component.scss
@@ -2,4 +2,11 @@
   display: flex;
   justify-content: center;
   align-items: center;
-}
+  cursor: default;
+  filter: grayscale(80%)
+}
+
+:host.enabled {
+  filter: none;
+  cursor: pointer;
+}
diff --git a/ui/src/app/modules/eqmac-components/components/checkbox/checkbox.component.ts b/ui/src/app/modules/eqmac-components/components/checkbox/checkbox.component.ts
@@ -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)
     }
   }
 }
diff --git a/ui/src/app/modules/eqmac-components/components/dropdown/dropdown.component.html b/ui/src/app/modules/eqmac-components/components/dropdown/dropdown.component.html
@@ -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>
diff --git a/ui/src/app/modules/eqmac-components/components/dropdown/dropdown.component.scss b/ui/src/app/modules/eqmac-components/components/dropdown/dropdown.component.scss
@@ -19,7 +19,7 @@
   transform: translateX(-2px);
 }
 
-.arrows {
+.right {
   width: 20px;
   display: inline-flex;
   flex-direction: column;
diff --git a/ui/src/app/modules/eqmac-components/components/dropdown/dropdown.component.ts b/ui/src/app/modules/eqmac-components/components/dropdown/dropdown.component.ts
@@ -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
+    }
+  }
 }
diff --git a/ui/src/app/modules/eqmac-components/components/label/label.component.scss b/ui/src/app/modules/eqmac-components/components/label/label.component.scss
@@ -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;
+}
diff --git a/ui/src/app/modules/eqmac-components/components/label/label.component.ts b/ui/src/app/modules/eqmac-components/components/label/label.component.ts
@@ -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'
+  }
 }
diff --git a/ui/src/app/modules/eqmac-components/components/toggle/toggle.component.scss b/ui/src/app/modules/eqmac-components/components/toggle/toggle.component.scss
@@ -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,

Original file line number	Diff line number	Diff line change
`@@ -8,4 +8,5 @@`
`8`	`8`
`9`	`9`	`.clickable {`
`10`	`10`	`cursor: pointer !important;`
	`11`	`+ text-decoration: underline;`
`11`	`12`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'`
	`1`	`+import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core'`
`2`	`2`
`3`	`3`	`@Component({`
`4`	`4`	`selector: 'eqm-checkbox',`
`@@ -9,11 +9,12 @@ export class CheckboxComponent {`
`9`	`9`	`@Input() interactive: boolean = true`
`10`	`10`	`@Input() checked: boolean = false`
`11`	`11`	`@Output() checkedChanged = new EventEmitter<boolean>()`
	`12`	`+ @HostBinding('class.enabled') @Input() enabled = true`
`12`	`13`
`13`	`14`	`toggle () {`
`14`		`- if (this.interactive) {`
	`15`	`+ if (this.interactive && this.enabled) {`
`15`	`16`	`this.checked = !this.checked`
`16`		`- this.checkedChanged.emit()`
	`17`	`+ this.checkedChanged.emit(this.checked)`
`17`	`18`	`}`
`18`	`19`	`}`
`19`	`20`	`}`
Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@`
`19`	`19`	`transform: translateX(-2px);`
`20`	`20`	`}`
`21`	`21`
`22`		`-.arrows {`
	`22`	`+.right {`
`23`	`23`	`width: 20px;`
`24`	`24`	`display: inline-flex;`
`25`	`25`	`flex-direction: column;`