Mastodon/Sengi-Windows-MacOS-Linux
1
0
Fork 0
mirror of https://github.com/NicolasConstant/sengi synced 2025-02-09 00:18:44 +01:00
Code Issues Releases Wiki Activity

tunning TL header depending of settings

Browse Source
This commit is contained in:
Nicolas Constant 2020-04-20 02:06:42 -04:00
parent 5860422d83
commit 51f048bfd5
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
4 changed files with 67 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,19 +7,20 @@
<!-- <div> -->
<div class="stream-column__stream-header">
<a class="stream-column__stream-selector" href title="return to top" (click)="goToTop()">
<img *ngIf="timelineHeader === 3 || timelineHeader === 4" class="stream-column__stream-selector--avatar" src="{{avatar}}" />
<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>
<span class="stream-column__stream-selector--text">
<h1 class="stream-column__stream-selector--title" [class.stream-column__stream-selector--title--only]="timelineHeader === 4 || timelineHeader === 5">{{ streamElement.name.toUpperCase() }}</h1>
<span class="stream-column__stream-selector--subtitle" *ngIf="streamElement.instance && timelineHeader !== 4 && timelineHeader !== 5"><span *ngIf="timelineHeader === 2">{{account.username}}@</span>{{ streamElement.instance.toLowerCase() }}</span>
</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>
<app-stream-edition class="stream-edition" *ngIf="editionPanelIsOpen"
[streamElement]="streamElement" [displayingNotifications]="displayingNotifications"
(closed)="streamEditionClosed()">
<app-stream-edition class="stream-edition" *ngIf="editionPanelIsOpen" [streamElement]="streamElement"
[displayingNotifications]="displayingNotifications" (closed)="streamEditionClosed()">
</app-stream-edition>
<app-stream-statuses *ngIf="!displayingNotifications" class="stream-statuses" [streamElement]="streamElement"
@ -27,9 +28,10 @@
(browseHashtagEvent)="browseHashtag($event)" (browseThreadEvent)="browseThread($event)">
</app-stream-statuses>
<app-stream-notifications *ngIf="displayingNotifications" class="stream-statuses" [streamElement]="streamElement"
[goToTop]="goToTopSubject.asObservable()" (browseAccountEvent)="browseAccount($event)"
(browseHashtagEvent)="browseHashtag($event)" (browseThreadEvent)="browseThread($event)">
<app-stream-notifications *ngIf="displayingNotifications" class="stream-statuses"
[streamElement]="streamElement" [goToTop]="goToTopSubject.asObservable()"
(browseAccountEvent)="browseAccount($event)" (browseHashtagEvent)="browseHashtag($event)"
(browseThreadEvent)="browseThread($event)">
</app-stream-notifications>
<!-- </div> -->

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

@ -48,27 +48,58 @@
text-decoration: none;
color: whitesmoke;
position: relative;
&--avatar {
width: 20px;
float: left;
margin-left: 11px;
position: relative;
// left: 11px;
top: 9px;
}
&--icon {
float: left;
margin-left: 11px;
position: relative;
left: 11px;
// left: 11px;
top: 9px;
}
&--text {
float: left;
margin-left: 9px;
}
&--title {
font-size: 0.8em;
font-weight: normal;
position: absolute;
// float: left;
// margin-left: 10px;
// position: absolute;
position: relative;
top: 9px;
left: 35px;
}
// left: 35px;
&--only {
top: 13px;
}
}
&--subtitle {
color: $font-link-primary-hover;
font-size: 0.7em;
font-weight: normal;
font-style: italic;
position: absolute;
top: 21px;
left: 35px;;
// position: absolute;
position: relative;
top: -2px;
// top: 21px;
// top: 10px;
// left: 35px;;
// outline: 1px solid greenyellow;
display: inline-block;
white-space: nowrap;
max-width: 240px;
text-overflow: ellipsis;
overflow: hidden;
padding-right: 5px;
}
}
}

23
src/app/components/stream/stream.component.ts
View File

@ -3,9 +3,11 @@ import { Subject } from "rxjs";
import { faHome, faGlobe, faUser, faHashtag, faListUl, faBars, IconDefinition, faBell } from "@fortawesome/free-solid-svg-icons";
import { StreamElement, StreamTypeEnum } from "../../states/streams.state";
import { OpenThreadEvent } from "../../services/tools.service";
import { OpenThreadEvent, ToolsService } from "../../services/tools.service";
import { StreamStatusesComponent } from './stream-statuses/stream-statuses.component';
import { StreamNotificationsComponent } from './stream-notifications/stream-notifications.component';
import { TimeLineHeaderEnum } from '../../states/settings.state';
import { AccountInfo } from '../../states/accounts.state';
@Component({
selector: "app-stream",
@ -21,6 +23,10 @@ export class StreamComponent implements OnInit {
overlayHashtagToBrowse: string;
overlayThreadToBrowse: OpenThreadEvent;
timelineHeader: TimeLineHeaderEnum;
account: AccountInfo;
avatar: string;
displayingNotifications: boolean;
goToTopSubject: Subject<void> = new Subject<void>();
@ -48,26 +54,33 @@ export class StreamComponent implements OnInit {
case StreamTypeEnum.list:
this.columnFaIcon = faListUl;
break;
case StreamTypeEnum.activity:
case StreamTypeEnum.activity:
this.columnFaIcon = faBell;
this.displayingNotifications = true;
break;
}
this._streamElement = stream;
this.account = this.toolsService.getAccountById(stream.accountId);
this.toolsService.getAvatar(this.account)
.then(a => {
this.avatar = a;
})
.catch(err => { });
}
get streamElement(): StreamElement {
return this._streamElement;
}
constructor() { }
constructor(private toolsService: ToolsService) { }
ngOnInit() {
let settings = this.toolsService.getSettings();
this.timelineHeader = settings.timelineHeader;
}
focus(): boolean {
if(this.overlayActive) return false;
if (this.overlayActive) return false;
if (!this.displayingNotifications) {
this.streamStatusesComponent.focus();

1
src/app/services/tools.service.ts
View File

@ -6,7 +6,6 @@ import { MastodonWrapperService } from './mastodon-wrapper.service';
import { Account, Results, Status, Emoji } from "./models/mastodon.interfaces";
import { StatusWrapper } from '../models/common.model';
import { AccountSettings, SaveAccountSettings, GlobalSettings, SaveSettings, ContentWarningPolicy, SaveContentWarningPolicy, ContentWarningPolicyEnum, TimeLineModeEnum, TimeLineHeaderEnum } from '../states/settings.state';
import { AppInfo, RegisteredAppsStateModel } from '../states/registered-apps.state';
@Injectable({
providedIn: 'root'