TSK-1276 Replaced checkboxes with radiobuttons in workbasket filter
This commit is contained in:
parent
89641ecdf9
commit
5416de4dd0
|
@ -118,4 +118,4 @@
|
|||
"prefix": "app"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,35 +1,37 @@
|
|||
<div class="dropdown">
|
||||
<button class="btn btn-default" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<span class="material-icons md-20 blue {{sort.sortDirection === 'asc'? '' : 'flip' }}" data-toggle="tooltip"
|
||||
title="{{sort.sortDirection === 'asc'? 'A-Z' : 'Z-A' }}">sort</span>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-{{menuPosition}} sortby-dropdown popup" aria-labelledby="sortingDropdown">
|
||||
<div>
|
||||
<div class="col-xs-6">
|
||||
<h5>Sort By</h5>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button id="sort-by-direction-asc" type="button" (click)="changeOrder('asc')" data-toggle="tooltip"
|
||||
title="A-Z" class="btn btn-default {{sort.sortDirection === 'asc'? 'selected' : '' }}">
|
||||
<span class="material-icons md-20 blue ">sort</span>
|
||||
</button>
|
||||
<button id="sort-by-direction-desc" type="button" (click)="changeOrder('desc')" data-toggle="tooltip"
|
||||
title="Z-A" class="btn btn-default {{sort.sortDirection === 'desc'? 'selected' : '' }}">
|
||||
<span class="material-icons md-20 blue flip">sort</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div role="separator" class="divider"></div>
|
||||
<ul>
|
||||
<li id="sort-by-{{sortingField.key}}" (click)="changeSortBy(sortingField.key)" *ngFor="let sortingField of sortingFields | mapValues">
|
||||
<a>
|
||||
<label>
|
||||
<span class="material-icons md-20 blue ">{{sort.sortBy === sortingField.key?
|
||||
'check_box': 'check_box_outline_blank'}} </span>
|
||||
<span> {{sortingField.value}} </span>
|
||||
</label>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<button class="btn btn-default" type="button" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="true">
|
||||
<span class="material-icons md-20 blue {{sort.sortDirection === 'asc'? '' : 'flip' }}"
|
||||
data-toggle="tooltip"
|
||||
title="{{sort.sortDirection === 'asc'? 'A-Z' : 'Z-A' }}">sort</span>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-{{menuPosition}} sortby-dropdown popup"
|
||||
aria-labelledby="sortingDropdown">
|
||||
<div>
|
||||
<div class="col-xs-6">
|
||||
<h5>Sort By</h5>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button id="sort-by-direction-asc" type="button" (click)="changeOrder('asc')"
|
||||
data-toggle="tooltip"
|
||||
title="A-Z"
|
||||
class="btn btn-default {{sort.sortDirection === 'asc'? 'selected' : '' }}">
|
||||
<span class="material-icons md-20 blue ">sort</span>
|
||||
</button>
|
||||
<button id="sort-by-direction-desc" type="button" (click)="changeOrder('desc')"
|
||||
data-toggle="tooltip"
|
||||
title="Z-A"
|
||||
class="btn btn-default {{sort.sortDirection === 'desc'? 'selected' : '' }}">
|
||||
<span class="material-icons md-20 blue flip">sort</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="separator" class="divider"></div>
|
||||
<mat-radio-group name="sort" color="accent" class="radio-group">
|
||||
<mat-radio-button *ngFor="let sortingField of sortingFields | mapValues"
|
||||
name="sort" id="sort-by-{{sortingField.key}}" [checked]="sortingField.key === defaultSortBy"
|
||||
(change)="changeSortBy(sortingField.key)" [value]="sortingField.value"> {{ sortingField.value }}</mat-radio-button>
|
||||
<!--TODO make sortingby the default checked and change theme colors to use taskana colors-->
|
||||
</mat-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -9,3 +9,9 @@ ul {
|
|||
color: #337ab7;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0rem 2.5rem;
|
||||
}
|
||||
|
|
|
@ -42,7 +42,7 @@ describe('SortComponent', () => {
|
|||
component.sortingFields = new Map<string, string>([['name', 'Name']]);
|
||||
fixture.detectChanges();
|
||||
expect(component.sort.sortBy).toBe('key');
|
||||
debugElement.querySelector('#sort-by-name').click();
|
||||
debugElement.querySelector('#sort-by-name-input').click();
|
||||
expect(component.sort.sortBy).toBe('name');
|
||||
});
|
||||
});
|
||||
|
|
|
@ -1,5 +1,13 @@
|
|||
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
|
||||
import { Component,
|
||||
ElementRef,
|
||||
EventEmitter,
|
||||
Input,
|
||||
OnInit,
|
||||
Output,
|
||||
ViewChild, ViewChildren,
|
||||
ViewRef } from '@angular/core';
|
||||
import { Direction, Sorting } from 'app/shared/models/sorting';
|
||||
import { MatRadioButton } from '@angular/material/radio';
|
||||
|
||||
@Component({
|
||||
selector: 'taskana-sort',
|
||||
|
|
|
@ -2,7 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core';
|
|||
|
||||
@Pipe({ name: 'mapValues' })
|
||||
export class MapValuesPipe implements PipeTransform {
|
||||
transform(value: any, args?: any[]): Object[] {
|
||||
transform<T, V>(value: Map<T, V>, args?: any[]): { key: T, value: V }[] {
|
||||
const returnArray = [];
|
||||
|
||||
if (!value) {
|
||||
|
|
|
@ -24,6 +24,7 @@ import { FieldErrorDisplayComponent } from 'app/shared/components/field-error-di
|
|||
import { MatSnackBarModule } from '@angular/material/snack-bar';
|
||||
import { MatDialogModule } from '@angular/material/dialog';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatRadioModule } from '@angular/material/radio';
|
||||
import { SortComponent } from './components/sort/sort.component';
|
||||
import { PaginationComponent } from './components/pagination/pagination.component';
|
||||
import { NumberPickerComponent } from './components/number-picker/number-picker.component';
|
||||
|
@ -97,7 +98,8 @@ const DECLARATIONS = [
|
|||
@NgModule({
|
||||
declarations: DECLARATIONS,
|
||||
imports: [
|
||||
MODULES
|
||||
MODULES,
|
||||
MatRadioModule
|
||||
],
|
||||
exports: DECLARATIONS,
|
||||
providers: [
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
@import 'variables';
|
||||
@import '../../node_modules/angular-tree-component/dist/angular-tree-component.css';
|
||||
@import '../../node_modules/ngx-bootstrap/datepicker/bs-datepicker';
|
||||
@import 'material_icons';
|
||||
@import 'material_styles';
|
||||
@import 'site';
|
||||
@import 'forms';
|
||||
@import 'tree';
|
||||
|
|
|
@ -50,3 +50,10 @@
|
|||
/* Rules for using icons as white on a dark background. */
|
||||
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
|
||||
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
|
||||
|
||||
/** styling of mat-radio overwrites the default colors of the radio TODO needs to be removed when migrating to material*/
|
||||
.mat-radio-button.mat-accent .mat-radio-inner-circle{background-color: $blue;}
|
||||
.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {border-color: $blue;}
|
||||
.mat-radio-button.mat-accent .mat-radio-inner-circle, .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple), .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-persistent-ripple, .mat-radio-button.mat-accent:active .mat-radio-persistent-ripple {background-color: $blue;}
|
||||
.mat-radio-outer-circle {border-color: $blue;}
|
||||
.mat-radio-label-content {color: $blue;}
|
Loading…
Reference in New Issue