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

added sliding column in TLs

This commit is contained in:
Nicolas Constant 2019-08-10 20:40:51 -04:00
parent 877449cd4b
commit eb66cb7760
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
3 changed files with 51 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/components/stream/stream-edition/stream-edition.component.scss
View File

@ -3,7 +3,8 @@
@import "mixins";
.stream-edition {
width: 100%;
width: calc(100%);
width: $stream-column-width;
// min-height: 50px;
background-color: #222736;
border-bottom: 1px solid $color-secondary;

50
src/app/components/stream/stream.component.html
View File

@ -1,30 +1,30 @@
<div class="stream-column">
<div class="sliding-column" [class.sliding-column__right-display]="overlayActive">
<app-stream-overlay class="stream-overlay" *ngIf="overlayActive" (closeOverlay)="closeOverlay()"
[browseAccountData]="overlayAccountToBrowse" [browseHashtagData]="overlayHashtagToBrowse"
[browseThreadData]="overlayThreadToBrowse"></app-stream-overlay>
<app-stream-overlay class="stream-overlay" *ngIf="overlayActive" (closeOverlay)="closeOverlay()"
[browseAccountData]="overlayAccountToBrowse" [browseHashtagData]="overlayHashtagToBrowse"
[browseThreadData]="overlayThreadToBrowse"></app-stream-overlay>
<!-- <div> -->
<div class="stream-column__stream-header">
<a class="stream-column__stream-selector" href title="return to top" (click)="goToTop()">
<fa-icon class="stream-column__stream-selector--icon" [icon]="columnFaIcon"></fa-icon>
<h1 class="stream-column__stream-selector--title">{{ streamElement.name.toUpperCase() }}</h1>
<span class="stream-column__stream-selector--subtitle"
*ngIf="streamElement.instance">{{ streamElement.instance.toLowerCase() }}</span>
</a>
<a class="stream-column__open-menu" href title="edit column" (click)="openEditionMenu()">
<fa-icon class="stream-column__open-menu--icon" [icon]="menuFaIcon"></fa-icon>
</a>
</div>
<div class="stream-column__stream-header">
<a class="stream-column__stream-selector" href title="return to top" (click)="goToTop()">
<fa-icon class="stream-column__stream-selector--icon" [icon]="columnFaIcon"></fa-icon>
<h1 class="stream-column__stream-selector--title">{{ streamElement.name.toUpperCase() }}</h1>
<span class="stream-column__stream-selector--subtitle"
*ngIf="streamElement.instance">{{ streamElement.instance.toLowerCase() }}</span>
</a>
<a class="stream-column__open-menu" href title="edit column" (click)="openEditionMenu()">
<fa-icon class="stream-column__open-menu--icon" [icon]="menuFaIcon"></fa-icon>
</a>
<app-stream-edition class="stream-edition" *ngIf="editionPanelIsOpen" [streamElement]="streamElement"
(closed)="streamEditionClosed()">
</app-stream-edition>
<app-stream-statuses class="stream-statuses" [streamElement]="streamElement"
[goToTop]="goToTopSubject.asObservable()" (browseAccountEvent)="browseAccount($event)"
(browseHashtagEvent)="browseHashtag($event)" (browseThreadEvent)="browseThread($event)">
</app-stream-statuses>
<!-- </div> -->
</div>
<app-stream-edition class="stream-edition" *ngIf="editionPanelIsOpen"
[streamElement]="streamElement"
(closed)="streamEditionClosed()">
</app-stream-edition>
<app-stream-statuses class="stream-statuses"
[streamElement]="streamElement"
[goToTop]="goToTopSubject.asObservable()"
(browseAccountEvent)="browseAccount($event)"
(browseHashtagEvent)="browseHashtag($event)"
(browseThreadEvent)="browseThread($event)"></app-stream-statuses>
</div>

27
src/app/components/stream/stream.component.scss
View File

@ -7,13 +7,33 @@
z-index: 50;
}
.sliding-column {
transition: all .25s;
transition-timing-function: ease-out;
width: calc(2 * #{$stream-column-width});
height: calc(100%);
position: relative;
left: 0;
&__right-display {
transition-timing-function: ease-out;
position: relative;
left: -$stream-column-width;
}
}
.stream-column {
position: relative;
width: $stream-column-width;
height: calc(100%);
overflow: hidden;
background-color: $column-color;
margin: 0 0 0 $stream-column-separator;
&__stream-header {
position: relative;
width: $stream-column-width;
border-bottom: 1px solid #222736;
}
&__open-menu {
@ -37,7 +57,7 @@
}
&__stream-selector {
display: block;
width: calc(100%);
width: $stream-column-width;
height: $stream-header-height;
background-color: $column-header-background-color;
text-decoration: none;
@ -84,8 +104,9 @@
// }
// }
.stream-overlay {
position: absolute;
z-index: 100;
// position: absolute;
float: right;
//z-index: 100;
width: $stream-column-width;
height: calc(100%);
}