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

added overlay to floating column

This commit is contained in:
Nicolas Constant 2018-11-07 23:31:47 -05:00
parent fda762f50d
commit 94ac8128a1
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
5 changed files with 38 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,11 +1,13 @@
<div class="floating-column"> <div class="floating-column">
<div class="floating-column__header"> <app-stream-overlay class="stream-overlay" *ngIf="overlayActive" (closeOverlay)="closeOverlay()" [browseAccount]="overlayAccountToBrowse" [browseHashtag]="overlayHashtagToBrowse"></app-stream-overlay>
<a class="close-button" href (click)="closePanel()" title="close">x</a>
</div>
<app-manage-account *ngIf="openPanel === 'manageAccount'" [account]="userAccountUsed"></app-manage-account> <div class="floating-column__header">
<app-add-new-status *ngIf="openPanel === 'createNewStatus'"></app-add-new-status> <a class="close-button" href (click)="closePanel()" title="close">x</a>
<app-add-new-account *ngIf="openPanel === 'addNewAccount'"></app-add-new-account> </div>
<app-search *ngIf="openPanel === 'search'"></app-search>
<app-settings *ngIf="openPanel === 'settings'"></app-settings> <app-manage-account *ngIf="openPanel === 'manageAccount'" [account]="userAccountUsed"></app-manage-account>
<app-add-new-status *ngIf="openPanel === 'createNewStatus'"></app-add-new-status>
<app-add-new-account *ngIf="openPanel === 'addNewAccount'"></app-add-new-account>
<app-search *ngIf="openPanel === 'search'"></app-search>
<app-settings *ngIf="openPanel === 'settings'"></app-settings>
</div> </div>

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

@ -3,7 +3,7 @@
.floating-column { .floating-column {
width: calc(100%); width: calc(100%);
max-width: 330px; width: 330px;
background-color: $color-secondary; background-color: $color-secondary;
overflow: hidden; overflow: hidden;
@ -13,12 +13,26 @@
bottom: $stream-selector-height; bottom: $stream-selector-height;
padding: 0; padding: 0;
&__header { // &__header {
// @include clearfix; // }
}
} }
.stream-overlay {
// margin-left: 5px;
// z-index: 50;
// opacity: 0.5;
position: absolute;
// left: 10px;
z-index: 50;
// width: $stream-column-width;
width: 330px;
height: calc(100%);
outline: 1px
}
.close-button { .close-button {
// display: inline-block; // display: inline-block;

6
src/app/components/floating-column/floating-column.component.ts
View File

@ -8,6 +8,7 @@ import { AccountWrapper } from '../../models/account.models';
styleUrls: ['./floating-column.component.scss'] styleUrls: ['./floating-column.component.scss']
}) })
export class FloatingColumnComponent implements OnInit { export class FloatingColumnComponent implements OnInit {
overlayActive: boolean;
userAccountUsed: AccountWrapper; userAccountUsed: AccountWrapper;
openPanel: string; openPanel: string;
@ -48,4 +49,9 @@ export class FloatingColumnComponent implements OnInit {
return false; return false;
} }
closeOverlay(): boolean {
this.overlayActive = false;
return false;
}
} }

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

@ -1,13 +1,9 @@
@import "variables"; @import "variables";
@import "commons"; @import "commons";
.stream-overlay { .stream-overlay {
// position: absolute; // width: $stream-column-width;
// z-index: 50;
width: $stream-column-width;
height: calc(100%); height: calc(100%);
background-color: $column-color; // margin: 0 0 0 $stream-column-separator; background-color: $column-color;
// outline: 1px red solid;
// float: left;
&__header { &__header {
width: calc(100%); width: calc(100%);
height: 30px; height: 30px;
@ -16,7 +12,7 @@
& a { & a {
color: whitesmoke; color: whitesmoke;
font-size: 0.8em; font-size: 0.8em;
font-weight: normal; // margin: 0; font-weight: normal;
} }
} }
&__title { &__title {

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

@ -32,74 +32,10 @@
} }
} }
// .flexcroll {
// scrollbar-face-color: #08090d;
// scrollbar-shadow-color: #08090d;
// scrollbar-highlight-color: #08090d;
// scrollbar-3dlight-color: #08090d;
// scrollbar-darkshadow-color: #08090d;
// scrollbar-track-color: #08090d;
// scrollbar-arrow-color: #08090d;
// &::-webkit-scrollbar {
// width: 7px;
// }
// &::-webkit-scrollbar-thumb {
// -webkit-border-radius: 0px;
// border-radius: 0px;
// // background: #08090d;
// background: lighten($color-primary, 5);
// // -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
// }
// }
.stream-overlay { .stream-overlay {
position: absolute; position: absolute;
z-index: 50; z-index: 50;
width: $stream-column-width; width: $stream-column-width;
height: calc(100%); height: calc(100%);
}
// background-color: rgba(#ff0000, 0.3);
// // margin: 0 0 0 $stream-column-separator;
// // outline: 1px red solid;
// // float: left;
// &__header {
// width: calc(100%);
// height: 30px;
// background-color: $column-header-background-color;
// padding: 6px 10px 0 10px;
// & a {
// color: whitesmoke;
// font-size: 0.8em;
// font-weight: normal;
// margin: 0;
// }
// }
// &__title {
// width: calc(100%);
// height: 30px;
// background-color: $column-header-background-color;
// border-top: 1px solid whitesmoke;
// border-bottom: 1px solid whitesmoke;
// padding: 3px 10px 0 10px;
// }
}
// .overlay-previous {
// display: block;
// float: left;
// }
// .overlay-next {
// display: block;
// float: right;
// padding-right: 20px;
// }
// .overlay-close {
// display: block;
// float: right;
// }