mirror of
https://github.com/NicolasConstant/sengi
synced 2025-02-08 07:58:47 +01:00
better section switching
This commit is contained in:
Nicolas Constant
parent
ff02dea006
commit
d5e78dec0b
@ -1,6 +1,6 @@
|
||||
@import "variables";
|
||||
@import "commons";
|
||||
$stream-header-height: 40px;
|
||||
|
||||
.stream-edition {
|
||||
width: $stream-column-width;
|
||||
position: absolute;
|
||||
|
||||
@ -101,10 +101,10 @@
|
||||
|
||||
<div *ngIf="displayedAccount">
|
||||
<div class="profile-name">
|
||||
<h2 class="profile-name__link profile-name__display-name" innerHTML="{{displayedAccount | accountEmoji }}"
|
||||
title="{{displayedAccount.display_name}}"></h2>
|
||||
<h2 class="profile-name__link profile-name__fullhandle"><a href="{{displayedAccount.url}}" target="_blank"
|
||||
title="{{displayedAccount.acct}}">@{{displayedAccount.acct}}</a></h2>
|
||||
<h2 class="profile-name__link profile-name__display-name"
|
||||
innerHTML="{{displayedAccount | accountEmoji }}" title="{{displayedAccount.display_name}}"></h2>
|
||||
<h2 class="profile-name__link profile-name__fullhandle"><a href="{{displayedAccount.url}}"
|
||||
target="_blank" title="{{displayedAccount.acct}}">@{{displayedAccount.acct}}</a></h2>
|
||||
</div>
|
||||
|
||||
<!-- <div class="profile__extra-info">
|
||||
@ -192,23 +192,24 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngFor="let statusWrapper of statuses">
|
||||
<div *ngIf="statusSection !== 'media'">
|
||||
<app-status [statusWrapper]="statusWrapper" (browseHashtagEvent)="browseHashtag($event)"
|
||||
(browseAccountEvent)="browseAccount($event)" (browseThreadEvent)="browseThread($event)">
|
||||
</app-status>
|
||||
</div>
|
||||
<div *ngIf="statusSection === 'media'" class="status-media">
|
||||
<div *ngFor="let media of statusWrapper.status.media_attachments">
|
||||
<a href title="open" (click)="openAttachment(media)">
|
||||
<img class="status-media__image" src="{{media.preview_url}}" />
|
||||
</a>
|
||||
<div [class.profile__status-switching-section]="isSwitchingSection">
|
||||
<div *ngFor="let statusWrapper of statuses">
|
||||
<div *ngIf="statusSection !== 'media'">
|
||||
<app-status [statusWrapper]="statusWrapper" (browseHashtagEvent)="browseHashtag($event)"
|
||||
(browseAccountEvent)="browseAccount($event)" (browseThreadEvent)="browseThread($event)">
|
||||
</app-status>
|
||||
</div>
|
||||
<div *ngIf="statusSection === 'media'" class="status-media">
|
||||
<div *ngFor="let media of statusWrapper.status.media_attachments">
|
||||
<a href title="open" (click)="openAttachment(media)">
|
||||
<img class="status-media__image" src="{{media.preview_url}}" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="clear: both;"></div>
|
||||
|
||||
<app-waiting-animation *ngIf="statusLoading" class="waiting-icon"></app-waiting-animation>
|
||||
<div style="clear: both;"></div>
|
||||
<app-waiting-animation *ngIf="statusLoading" class="waiting-icon"></app-waiting-animation>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -6,6 +6,7 @@ $validated-background: #164109;
|
||||
$header-height: 140px;
|
||||
$full-alias-color: rgb(201, 201, 201);
|
||||
$full-alias-color-hover: white;
|
||||
$floating-header-height: 60px;
|
||||
|
||||
.outer-profile {
|
||||
height: calc(100%);
|
||||
@ -24,7 +25,7 @@ $full-alias-color-hover: white;
|
||||
transition: all .2s;
|
||||
transition-timing-function: ease-in;
|
||||
|
||||
height: 60px;
|
||||
height: $floating-header-height;
|
||||
width: calc(100% - 7px);
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
@ -42,7 +43,7 @@ $full-alias-color-hover: white;
|
||||
|
||||
&__inner {
|
||||
overflow: hidden;
|
||||
height: 60px;
|
||||
height: $floating-header-height;
|
||||
background-color: rgba(0, 0, 0, .45);
|
||||
}
|
||||
|
||||
@ -57,8 +58,8 @@ $full-alias-color-hover: white;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
width: calc(#{$floating-header-height} - 14px);
|
||||
height: calc(#{$floating-header-height} - 14px);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
@ -69,7 +70,7 @@ $full-alias-color-hover: white;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
height: 46px;
|
||||
height: calc(#{$floating-header-height} - 14px);
|
||||
width: calc(100% - 44px - 65px);
|
||||
padding: 3px 5px 0px 3px;
|
||||
|
||||
@ -342,6 +343,10 @@ $full-alias-color-hover: white;
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
&__status-switching-section {
|
||||
height: calc(100vh - 35px - #{$floating-header-height} - #{$stream-header-height} - #{$stream-selector-height});
|
||||
}
|
||||
|
||||
&-no-toots {
|
||||
text-align: center;
|
||||
margin: 15px;
|
||||
|
||||
@ -118,6 +118,7 @@ export class UserProfileComponent implements OnInit {
|
||||
this.displayedAccount = null;
|
||||
this.isLoading = true;
|
||||
this.showFloatingHeader = false;
|
||||
this.isSwitchingSection = false;
|
||||
|
||||
this.lastAccountName = accountName;
|
||||
this.currentlyUsedAccount = this.toolsService.getSelectedAccounts()[0];
|
||||
@ -275,7 +276,7 @@ export class UserProfileComponent implements OnInit {
|
||||
this.showFloatingHeader = false;
|
||||
}
|
||||
|
||||
const menuPosition = element.scrollHeight - this.profilestatuses.nativeElement.offsetHeight - 30;
|
||||
const menuPosition = element.scrollHeight - this.profilestatuses.nativeElement.offsetHeight - 30 - 31;
|
||||
if (element.scrollTop > menuPosition) {
|
||||
this.showFloatingStatusMenu = true;
|
||||
} else {
|
||||
@ -320,25 +321,39 @@ export class UserProfileComponent implements OnInit {
|
||||
return false;
|
||||
}
|
||||
|
||||
isSwitchingSection: boolean;
|
||||
switchStatusSection(section: 'status' | 'replies' | 'media'): boolean {
|
||||
this.isSwitchingSection = true;
|
||||
|
||||
this.statusSection = section;
|
||||
this.statuses.length = 0;
|
||||
this.maxId = null;
|
||||
|
||||
this.showFloatingHeader = false;
|
||||
this.showFloatingStatusMenu = false;
|
||||
// this.showFloatingHeader = false;
|
||||
// this.showFloatingStatusMenu = false;
|
||||
|
||||
let promise: Promise<any>;
|
||||
switch (section) {
|
||||
case "status":
|
||||
this.getStatuses(this.currentlyUsedAccount, this.displayedAccount, false, true, this.maxId);
|
||||
promise = this.getStatuses(this.currentlyUsedAccount, this.displayedAccount, false, true, this.maxId);
|
||||
break;
|
||||
case "replies":
|
||||
this.getStatuses(this.currentlyUsedAccount, this.displayedAccount, false, false, this.maxId);
|
||||
promise = this.getStatuses(this.currentlyUsedAccount, this.displayedAccount, false, false, this.maxId);
|
||||
break;
|
||||
case "media":
|
||||
this.getStatuses(this.currentlyUsedAccount, this.displayedAccount, true, true, this.maxId);
|
||||
promise = this.getStatuses(this.currentlyUsedAccount, this.displayedAccount, true, true, this.maxId);
|
||||
break;
|
||||
}
|
||||
if (promise) {
|
||||
promise
|
||||
.catch(err => {
|
||||
})
|
||||
.then(() => {
|
||||
this.isSwitchingSection = false;
|
||||
});
|
||||
} else {
|
||||
this.isSwitchingSection = false;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
@ -12,25 +12,17 @@ $content-warning-background-color: #0a0c13;
|
||||
$content-warning-background-color: black;
|
||||
$content-warning-font-color: $font-link-primary-hover;
|
||||
|
||||
|
||||
|
||||
$default-font-size: 15px;
|
||||
$small-font-size: 12px;
|
||||
// $btn-primary-color: #515a62;
|
||||
// $btn-primary-color: #254d6f;
|
||||
$btn-primary-color: #444f74;
|
||||
$btn-primary-color-hover: darken($btn-primary-color, 10);
|
||||
$btn-primary-font-color: white;
|
||||
// TEST 1
|
||||
$status-primary-color: #fff;
|
||||
// $status-secondary-color: #353e64;
|
||||
$status-secondary-color: #4e5572;
|
||||
$status-links-color: #d9e1e8;
|
||||
// $status-primary-color : #8f93a2;
|
||||
// $status-primary-color : lighten(#8f93a2, 30);
|
||||
// $status-links-color : #b2ccd6;
|
||||
$boost-color : #5098eb;
|
||||
$favorite-color: #ffc16f;
|
||||
|
||||
// Block dispositions
|
||||
$stream-selector-height: 30px;
|
||||
$stream-column-separator: 7px;
|
||||
@ -38,6 +30,8 @@ $stream-column-width: 320px;
|
||||
$floating-column-size: 330px;
|
||||
$avatar-column-space: 70px;
|
||||
|
||||
$stream-header-height: 40px;
|
||||
|
||||
//Bootstrap cuistomization
|
||||
$enable-rounded: false;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user