Mastodon
/
Sengi-Windows-MacOS-Linux
mirror of https://github.com/NicolasConstant/sengi
1
0
Fork 0
Code Issues Releases Wiki Activity

added column selection and animation

This commit is contained in:
Nicolas Constant 2019-09-28 00:02:59 -04:00
parent 252724aa7d
commit 68367a783a
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
3 changed files with 42 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/streams-selection-footer/streams-selection-footer.component.html
View File

@ -1,5 +1,5 @@
<div class="streams-selection-footer">
<a class="stream-selection" *ngFor="let str of streams; let i=index" href (click)="onColumnSelection(i)" title="open {{getDisplayableName(str)}}">
<span class="stream-selection__column-reprensentation"></span>
<span class="stream-selection__column-reprensentation" [class.stream-selection__column-reprensentation--selected]="str.isSelected"></span>
</a>
</div>

46
src/app/components/streams-selection-footer/streams-selection-footer.component.scss
View File

@ -1,29 +1,37 @@
@import "variables";
.streams-selection-footer {
width: calc(100%);
height: $stream-selector-height;
text-align: center;
width: calc(100%);
height: $stream-selector-height;
text-align: center;
background-color: $color-secondary;
background-color: $color-secondary;
}
.stream-selection {
display: inline-block;
width: 9px;
padding: 4px 5px 0 5px;
height: $stream-selector-height;
&__column-reprensentation {
display: inline-block;
width: 5px;
height: $stream-selector-height - 8px;
background-color:$font-link-primary;
width: 9px;
padding: 4px 5px 0 5px;
height: $stream-selector-height;
}
&__column-reprensentation {
transition: all .2s;
display: inline-block;
width: 5px;
height: $stream-selector-height - 8px;
background-color: $font-link-primary;
&:hover &__column-reprensentation{
background-color:$font-link-primary-hover;
}
}
&--selected {
height: ($stream-selector-height - 8px)/1.75;
background-color: rgb(168, 168, 168);
}
}
&:hover &__column-reprensentation {
background-color: $font-link-primary-hover;
&--selected {
background-color: rgb(255, 255, 255);
}
}
}

16
src/app/components/streams-selection-footer/streams-selection-footer.component.ts
View File

@ -10,7 +10,7 @@ import { NavigationService } from '../../services/navigation.service';
styleUrls: ['./streams-selection-footer.component.scss']
})
export class StreamsSelectionFooterComponent implements OnInit {
streams: StreamElement[] = [];
streams: SelectableStream[] = [];
private streams$: Observable<StreamElement[]>;
constructor(
@ -21,11 +21,16 @@ export class StreamsSelectionFooterComponent implements OnInit {
ngOnInit() {
this.streams$.subscribe((streams: StreamElement[]) => {
this.streams = streams;
this.streams = streams.map(x => new SelectableStream(x));
});
}
onColumnSelection(index: number): boolean {
this.streams.forEach(x => x.isSelected = false);
const selectedStream = this.streams[index];
selectedStream.isSelected = true;
this.navigationService.columnSelected(index);
return false;
}
@ -52,3 +57,10 @@ export class StreamsSelectionFooterComponent implements OnInit {
return `${prefix}@${stream.instance}`;
}
}
class SelectableStream {
constructor(public readonly stream: StreamElement){
}
isSelected: boolean;
}