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

added sliding columns on floating column

This commit is contained in:
Nicolas Constant 2019-08-13 00:35:15 -04:00
parent f7f5678526
commit 1c6b0784db
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
5 changed files with 103 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/app/components/floating-column/floating-column.component.html
View File

@ -1,28 +1,30 @@
<div class="floating-column">
<app-stream-overlay class="stream-overlay" *ngIf="overlayActive" (closeOverlay)="closeOverlay()"
[browseAccountData]="overlayAccountToBrowse"
[browseHashtagData]="overlayHashtagToBrowse"
[browseThreadData]="overlayThreadToBrowse"></app-stream-overlay>
<div class="floating-column__inner">
<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>
<div class="floating-column__header">
<a class="close-button" href (click)="closePanel()" title="close">
<fa-icon [icon]="faTimes"></fa-icon>
</a>
<div class="floating-column__inner--left">
<div class="floating-column__header">
<a class="close-button" href (click)="closePanel()" title="close">
<fa-icon [icon]="faTimes"></fa-icon>
</a>
</div>
<app-manage-account *ngIf="openPanel === 'manageAccount'" [account]="userAccountUsed"
(browseAccountEvent)="browseAccount($event)" (browseHashtagEvent)="browseHashtag($event)"
(browseThreadEvent)="browseThread($event)"></app-manage-account>
<app-add-new-status *ngIf="openPanel === 'createNewStatus'" [isDirectMention]="isDirectMention"
[userHandle]="userHandle" [redraftedStatus]="redraftedStatus"></app-add-new-status>
<app-add-new-account *ngIf="openPanel === 'addNewAccount'"></app-add-new-account>
<app-search *ngIf="openPanel === 'search'" (browseAccountEvent)="browseAccount($event)"
(browseHashtagEvent)="browseHashtag($event)" (browseThreadEvent)="browseThread($event)">
</app-search>
<app-settings *ngIf="openPanel === 'settings'"></app-settings>
</div>
</div>
</div>
<app-manage-account *ngIf="openPanel === 'manageAccount'"
[account]="userAccountUsed"
(browseAccountEvent)="browseAccount($event)"
(browseHashtagEvent)="browseHashtag($event)"
(browseThreadEvent)="browseThread($event)"></app-manage-account>
<app-add-new-status *ngIf="openPanel === 'createNewStatus'"
[isDirectMention]="isDirectMention"
[userHandle]="userHandle"
[redraftedStatus]="redraftedStatus"></app-add-new-status>
<app-add-new-account *ngIf="openPanel === 'addNewAccount'"></app-add-new-account>
<app-search *ngIf="openPanel === 'search'"
(browseAccountEvent)="browseAccount($event)"
(browseHashtagEvent)="browseHashtag($event)"
(browseThreadEvent)="browseThread($event)"></app-search>
<app-settings *ngIf="openPanel === 'settings'"></app-settings>
</div>

42
src/app/components/floating-column/floating-column.component.scss
View File

@ -1,10 +1,10 @@
@import "variables";
@import "mixins";
@import "panel";
.floating-column {
width: calc(100%);
width: $floating-column-size;
// width: $floating-column-size;
background-color: $color-secondary;
overflow: hidden;
@ -16,17 +16,43 @@
white-space: normal;
&__inner {
position: relative;
width: $stream-column-width;
height: calc(100%);
margin: 0 0 0 $stream-column-separator;
overflow: hidden;
&--left {
width: $stream-column-width;
}
}
// &__header {
// }
}
.stream-overlay {
position: absolute;
z-index: 50;
width: $floating-column-size;
height: calc(100%);
}
// .stream-overlay {
// position: absolute;
// top:0;
// bottom: $stream-selector-height;
// right: 0;
// // float: right;
// width: $stream-column-width;
// // height: calc(100%);
// }
// .stream-overlay {
// position: absolute;
// z-index: 50;
// width: $floating-column-size;
// height: calc(100%);
// }
.close-button {
display: block;

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

@ -1,7 +1,9 @@
<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"
<app-stream-overlay class="stream-overlay" *ngIf="overlayActive"
(closeOverlay)="closeOverlay()"
[browseAccountData]="overlayAccountToBrowse"
[browseHashtagData]="overlayHashtagToBrowse"
[browseThreadData]="overlayThreadToBrowse"></app-stream-overlay>
<!-- <div> -->

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

@ -1,5 +1,6 @@
@import "variables";
@import "commons";
@import "panel";
.stream-edition {
width: $stream-column-width;
@ -7,22 +8,6 @@
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;
@ -94,6 +79,14 @@
width: 320px;
}
// .stream-overlay {
// float: right;
// width: $stream-column-width;
// height: calc(100%);
// }
// .stream-toots {
// height: calc(100% - 30px);
// width: 320px;
@ -103,10 +96,10 @@
// border-width: 0 0 1px 0;
// }
// }
.stream-overlay {
// position: absolute;
float: right;
//z-index: 100;
width: $stream-column-width;
height: calc(100%);
}
// .stream-overlay {
// // position: absolute;
// float: right;
// //z-index: 100;
// width: $stream-column-width;
// height: calc(100%);
// }

24
src/sass/_panel.scss
View File

@ -10,4 +10,26 @@
text-transform: uppercase;
margin: 4px 0 12px 5px;
}
}
}
.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-overlay {
float: right;
width: $stream-column-width;
height: calc(100%);
}