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

starting making overlay navigation pretty

This commit is contained in:
Nicolas Constant 2019-02-21 00:52:24 -05:00
parent b7b4fc5d57
commit 9fa5e30b6d
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
3 changed files with 83 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/app/components/stream/stream-overlay/stream-overlay.component.html
View File

@ -1,24 +1,32 @@
<div class="stream-overlay">
<div class="stream-overlay__header">
<a href class="overlay-close" (click)="close()">CLOSE</a>
<button class="overlay__button overlay-close" title="close" (click)="close()">
<fa-icon [icon]="faTimes"></fa-icon>
</button>
<button class="overlay__button overlay-previous" title="previous" (click)="previous()">
<fa-icon [icon]="faAngleLeft"></fa-icon>
</button>
<button class="overlay__button overlay-refresh" *ngIf="canRefresh" title="refresh" (click)="refresh()">
<fa-icon [icon]="faRedoAlt"></fa-icon>
</button>
<button class="overlay__button overlay-next" title="next" (click)="next()">
<fa-icon [icon]="faAngleRight"></fa-icon>
</button>
<!-- <a href class="overlay-close" (click)="close()">CLOSE</a>
<a href class="overlay-previous" (click)="previous()">PREV</a>
<a href class="overlay-refresh" *ngIf="canRefresh" (click)="refresh()">REFRESH</a>
<a href class="overlay-next" *ngIf="canGoForward" (click)="next()">NEXT</a>
<a href class="overlay-refresh" *ngIf="canRefresh" (click)="refresh()">REFRESH</a>
<a href class="overlay-next" *ngIf="canGoForward" (click)="next()">NEXT</a> -->
</div>
<app-user-profile #appUserProfile *ngIf="accountName" [currentAccount]="accountName"
class="stream-overlay__content"
(browseAccountEvent)="browseAccount($event)"
(browseHashtagEvent)="browseHashtag($event)"
<app-user-profile #appUserProfile *ngIf="accountName" [currentAccount]="accountName" class="stream-overlay__content"
(browseAccountEvent)="browseAccount($event)" (browseHashtagEvent)="browseHashtag($event)"
(browseThreadEvent)="browseThread($event)"></app-user-profile>
<app-hashtag #appHashtag *ngIf="hashtagElement" [hashtagElement]="hashtagElement"
class="stream-overlay__content"
(browseAccountEvent)="browseAccount($event)"
(browseHashtagEvent)="browseHashtag($event)"
<app-hashtag #appHashtag *ngIf="hashtagElement" [hashtagElement]="hashtagElement" class="stream-overlay__content"
(browseAccountEvent)="browseAccount($event)" (browseHashtagEvent)="browseHashtag($event)"
(browseThreadEvent)="browseThread($event)"></app-hashtag>
<app-thread #appThread *ngIf="browseThread" [currentThread]="thread"
class="stream-overlay__content"
(browseAccountEvent)="browseAccount($event)"
(browseHashtagEvent)="browseHashtag($event)"
<app-thread #appThread *ngIf="browseThread" [currentThread]="thread" class="stream-overlay__content"
(browseAccountEvent)="browseAccount($event)" (browseHashtagEvent)="browseHashtag($event)"
(browseThreadEvent)="browseThread($event)"></app-thread>
</div>

59
src/app/components/stream/stream-overlay/stream-overlay.component.scss
View File

@ -1,18 +1,24 @@
@import "variables";
@import "mixins";
@import "commons";
$header-content: 30px;
$header-content: 40px;
.stream-overlay {
// width: $stream-column-width;
height: calc(100%);
background-color: $column-color;
&__header {
width: calc(100%);
height: $header-content;
background-color: $column-header-background-color;
padding: 6px 10px 0 10px;
// padding: 6px 10px 0 10px;
border-bottom: 1px solid #222736;
& a {
color: whitesmoke;
font-size: 0.8em;
@ -37,23 +43,66 @@ $header-content: 30px;
.overlay {
margin: 0;
&__button {
@include clearButton;
width: 25px;
height: 25px;
// border-radius: 50%;
// background-color: $button-background-color;
// background-color: #303031;
// background-color: greenyellow;
color: #252c42;
color: #2e3752;
color: #354060;
transition: all .2s;
margin: 8px 0 0 8px;
&:hover {
// background-color: $button-background-color-hover;
// color: $button-color-hover;
color: white;
}
}
&-previous {
display: block;
float: left;
font-size: 18px;
& fa-icon{
position: relative;
left: -1px;
}
}
&-refresh {
display: block;
float: left;
margin-left: 65px;
font-size: 14px;
// & fa-icon{
// position: relative;
// top: 1px;
// }
}
&-next {
display: block;
float: right;
padding-right: 20px;
float: left;
font-size: 18px;
// padding-right: 20px;
}
&-close {
display: block;
float: right;
font-size: 14px;
color: white;
margin-right: 8px;
}
}

5
src/app/components/stream/stream-overlay/stream-overlay.component.ts
View File

@ -1,4 +1,5 @@
import { Component, OnInit, Output, EventEmitter, Input, ViewChild } from '@angular/core';
import { faAngleLeft, faAngleRight, faTimes, faRedoAlt } from "@fortawesome/free-solid-svg-icons";
import { ToolsService, OpenThreadEvent } from '../../../services/tools.service';
import { StreamElement, StreamTypeEnum } from '../../../states/streams.state';
@ -12,6 +13,10 @@ import { HashtagComponent } from '../hashtag/hashtag.component';
styleUrls: ['./stream-overlay.component.scss']
})
export class StreamOverlayComponent implements OnInit {
faAngleLeft = faAngleLeft;
faAngleRight = faAngleRight;
faTimes = faTimes;
faRedoAlt = faRedoAlt;
private previousElements: OverlayBrowsing[] = [];
private nextElements: OverlayBrowsing[] = [];