Merge pull request #637 from NicolasConstant/topic_refine-css-zones
Topic refine css zones
This commit is contained in:
commit
702e4daa44
|
@ -10,7 +10,7 @@
|
|||
<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>
|
||||
<fa-icon class="close-button__icon" [icon]="faTimes"></fa-icon>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -29,9 +29,20 @@
|
|||
}
|
||||
|
||||
.close-button {
|
||||
// outline: 1px dotted orange;
|
||||
|
||||
display: block;
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
margin: 10px 16px 0 0;
|
||||
margin: 5px 5px 0 0;
|
||||
|
||||
width: 40px;
|
||||
height: 34px;
|
||||
|
||||
&__icon {
|
||||
position: relative;
|
||||
top: 6px;
|
||||
left: 17px;
|
||||
}
|
||||
}
|
|
@ -122,6 +122,17 @@ export class MyAccountComponent implements OnInit, OnDestroy {
|
|||
}
|
||||
}
|
||||
})
|
||||
.then(_ => {
|
||||
this.availableLists.sort((a,b) => {
|
||||
if (a.name < b.name) {
|
||||
return -1;
|
||||
}
|
||||
if (a.name > b.name) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
this.notificationService.notifyHttpError(err, this.account.info);
|
||||
});
|
||||
|
|
|
@ -1,5 +1,8 @@
|
|||
<div class="image">
|
||||
<div class="image__alt" *ngIf="displayAltLabel">ALT</div>
|
||||
<div class="image__alt" *ngIf="displayAltLabel && attachment.description" title="{{ attachment.description }}">ALT</div>
|
||||
<a *ngIf="status" href class="image__status" (click)="openStatus()" (auxclick)="openStatus()" title="open status">
|
||||
<fa-icon class="image__status--icon" [icon]="faExternalLinkAlt"></fa-icon>
|
||||
</a>
|
||||
<a href class="image__link" (click)="openExternal()" (auxclick)="openExternal()" title="open image">
|
||||
<fa-icon class="image__link--icon" [icon]="faLink"></fa-icon>
|
||||
</a>
|
||||
|
|
|
@ -25,11 +25,31 @@
|
|||
// }
|
||||
}
|
||||
|
||||
&__status {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 25px;
|
||||
padding: 5px 5px 8px 8px;
|
||||
transition: all .2s;
|
||||
opacity: 0;
|
||||
color: white;
|
||||
|
||||
&--icon {
|
||||
filter: drop-shadow(0 0 3px rgb(78, 78, 78));
|
||||
}
|
||||
}
|
||||
|
||||
&:hover &__link {
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:hover &__status {
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__alt {
|
||||
display: inline;
|
||||
color: white;
|
||||
|
|
|
@ -1,8 +1,10 @@
|
|||
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
|
||||
import { faLink } from "@fortawesome/free-solid-svg-icons";
|
||||
import { faLink, faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
import { SettingsService } from '../../../../../services/settings.service';
|
||||
import { Attachment } from '../../../../../services/models/mastodon.interfaces';
|
||||
import { StatusWrapper } from '../../../../../models/common.model';
|
||||
import { OpenThreadEvent } from '../../../../../services/tools.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-attachement-image',
|
||||
|
@ -11,10 +13,13 @@ import { Attachment } from '../../../../../services/models/mastodon.interfaces';
|
|||
})
|
||||
export class AttachementImageComponent implements OnInit {
|
||||
faLink = faLink;
|
||||
faExternalLinkAlt = faExternalLinkAlt;
|
||||
displayAltLabel: boolean;
|
||||
|
||||
@Input() attachment: Attachment;
|
||||
@Input() status: StatusWrapper;
|
||||
@Output() openEvent = new EventEmitter();
|
||||
@Output() browseThreadEvent = new EventEmitter<OpenThreadEvent>();
|
||||
|
||||
constructor(
|
||||
private readonly settingsService: SettingsService
|
||||
|
@ -34,4 +39,13 @@ export class AttachementImageComponent implements OnInit {
|
|||
window.open(this.attachment.url, '_blank');
|
||||
return false;
|
||||
}
|
||||
|
||||
openStatus(): boolean {
|
||||
if(!this.status) return false;
|
||||
|
||||
const openThreadEvent = new OpenThreadEvent(this.status.status, this.status.provider);
|
||||
this.browseThreadEvent.next(openThreadEvent);
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,9 +1,5 @@
|
|||
<div class="overlay">
|
||||
<div class="overlay__header">
|
||||
<a href class="overlay__button overlay-close" title="close" (click)="close()">
|
||||
<fa-icon class="overlay-close__icon" [icon]="faTimes"></fa-icon>
|
||||
</a>
|
||||
|
||||
<a href class="overlay__button overlay-previous"
|
||||
[ngClass]="{'overlay__button--focus': hasPreviousElements }" title="previous" (click)="previous()">
|
||||
<fa-icon class="overlay-previous__icon" [icon]="faAngleLeft"></fa-icon>
|
||||
|
@ -12,13 +8,17 @@
|
|||
title="refresh" (click)="refresh()">
|
||||
<fa-icon class="overlay-refresh__icon" [icon]="faRedoAlt"></fa-icon>
|
||||
</a>
|
||||
|
||||
<a href class="overlay__button overlay-next" [ngClass]="{'overlay__button--focus': hasNextElements }"
|
||||
title="next" (click)="next()">
|
||||
<fa-icon class="overlay-next__icon" [icon]="faAngleRight"></fa-icon>
|
||||
</a>
|
||||
|
||||
<a href title="return to top" class="overlay-gototop" (click)="goToTop()">
|
||||
</a>
|
||||
|
||||
<a href class="overlay__button overlay-next" [ngClass]="{'overlay__button--focus': hasNextElements }"
|
||||
title="next" (click)="next()">
|
||||
<fa-icon class="overlay-next__icon" [icon]="faAngleRight"></fa-icon>
|
||||
<a href class="overlay__button overlay-close" title="close" (click)="close()">
|
||||
<fa-icon class="overlay-close__icon" [icon]="faTimes"></fa-icon>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -11,7 +11,9 @@ $header-content-height: 40px;
|
|||
width: calc(100%);
|
||||
height: $header-content-height;
|
||||
background-color: $column-header-background-color;
|
||||
border-bottom: 1px solid #222736;
|
||||
border-bottom: 1px solid #222736;
|
||||
|
||||
display: flex;
|
||||
}
|
||||
&__content-wrapper {
|
||||
transition: all .2s;
|
||||
|
@ -44,11 +46,17 @@ $header-content-height: 40px;
|
|||
}
|
||||
|
||||
&__button {
|
||||
// outline: 1px dotted orange;
|
||||
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
|
||||
width: $header-content-height;
|
||||
height: $header-content-height;
|
||||
|
||||
color: #354060;
|
||||
transition: all .2s;
|
||||
margin: 8px 0 0 8px;
|
||||
|
||||
&:hover {
|
||||
color: #536599;
|
||||
color: #7a8dc7;
|
||||
|
@ -68,19 +76,8 @@ $header-content-height: 40px;
|
|||
|
||||
&__icon {
|
||||
position: relative;
|
||||
left: 7px;
|
||||
top: -1px
|
||||
}
|
||||
}
|
||||
&-next {
|
||||
display: block;
|
||||
float: left;
|
||||
font-size: 18px;
|
||||
|
||||
&__icon {
|
||||
position: relative;
|
||||
left: 8px;
|
||||
top: -1px
|
||||
left: 17px;
|
||||
top: 7px
|
||||
}
|
||||
}
|
||||
&-refresh {
|
||||
|
@ -90,29 +87,38 @@ $header-content-height: 40px;
|
|||
|
||||
&__icon {
|
||||
position: relative;
|
||||
left: 5px;
|
||||
top: 1px
|
||||
left: 13px;
|
||||
top: 9px
|
||||
}
|
||||
}
|
||||
&-next {
|
||||
display: block;
|
||||
float: left;
|
||||
font-size: 18px;
|
||||
|
||||
&__icon {
|
||||
position: relative;
|
||||
left: 13px;
|
||||
top: 7px
|
||||
}
|
||||
}
|
||||
&-gototop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 110px;
|
||||
right: 40px;
|
||||
// outline: 1px dotted orange;
|
||||
|
||||
flex-grow: 1;
|
||||
|
||||
display: block;
|
||||
height: $header-content-height;
|
||||
}
|
||||
&-close {
|
||||
display: block;
|
||||
float: right;
|
||||
font-size: 13px;
|
||||
color: white;
|
||||
margin-right: 8px;
|
||||
|
||||
&__icon {
|
||||
position: relative;
|
||||
left: 7px;
|
||||
top: 1px
|
||||
left: 15px;
|
||||
top: 9px
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -166,39 +166,27 @@
|
|||
|
||||
<div class="profile__extra-info profile__extra-info__preparefloating" *ngIf="!isLoading"
|
||||
[class.profile__extra-info__floating]="showFloatingStatusMenu">
|
||||
<div class="profile__extra-info__section">
|
||||
<a href class="profile__extra-info__links" (click)="switchStatusSection('status')" title="Status"
|
||||
<a href class="profile__extra-info__section profile__extra-info__links" (click)="switchStatusSection('status')" title="Status"
|
||||
[class.profile__extra-info__links--selected]="statusSection === 'status'">Status</a>
|
||||
</div>
|
||||
<div class="profile__extra-info__section">
|
||||
<a href class="profile__extra-info__links" (click)="switchStatusSection('replies')"
|
||||
<a href class="profile__extra-info__section profile__extra-info__links" (click)="switchStatusSection('replies')"
|
||||
title="Status & Replies"
|
||||
[class.profile__extra-info__links--selected]="statusSection === 'replies'">Status &
|
||||
Replies</a>
|
||||
</div>
|
||||
<div class="profile__extra-info__section">
|
||||
<a href class="profile__extra-info__links" (click)="switchStatusSection('media')" title="Media"
|
||||
<a href class="profile__extra-info__section profile__extra-info__links" (click)="switchStatusSection('media')" title="Media"
|
||||
[class.profile__extra-info__links--selected]="statusSection === 'media'">Media</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="profile-statuses" #profilestatuses>
|
||||
<div class="profile__extra-info" *ngIf="!isLoading">
|
||||
<div class="profile__extra-info__section">
|
||||
<a href class="profile__extra-info__links" (click)="switchStatusSection('status')"
|
||||
<a href class="profile__extra-info__section profile__extra-info__links" (click)="switchStatusSection('status')"
|
||||
title="Status"
|
||||
[class.profile__extra-info__links--selected]="statusSection === 'status'">Status</a>
|
||||
</div>
|
||||
<div class="profile__extra-info__section">
|
||||
<a href class="profile__extra-info__links" (click)="switchStatusSection('replies')"
|
||||
<a href class="profile__extra-info__section profile__extra-info__links" (click)="switchStatusSection('replies')"
|
||||
title="Status & Replies"
|
||||
[class.profile__extra-info__links--selected]="statusSection === 'replies'">Status &
|
||||
Replies</a>
|
||||
</div>
|
||||
<div class="profile__extra-info__section">
|
||||
<a href class="profile__extra-info__links" (click)="switchStatusSection('media')" title="Media"
|
||||
<a href class="profile__extra-info__section profile__extra-info__links" (click)="switchStatusSection('media')" title="Media"
|
||||
[class.profile__extra-info__links--selected]="statusSection === 'media'">Media</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div [class.profile__status-switching-section]="isSwitchingSection">
|
||||
|
@ -222,7 +210,7 @@
|
|||
</div>
|
||||
<div *ngIf="statusSection === 'media'" class="status-media">
|
||||
<div *ngFor="let media of statusWrapper.status.media_attachments">
|
||||
<app-attachement-image *ngIf="media.type === 'image' || media.type === 'gifv'" class="status-media__image" [attachment]="media" (openEvent)="openAttachment(media)"></app-attachement-image>
|
||||
<app-attachement-image *ngIf="media.type === 'image' || media.type === 'gifv'" class="status-media__image" [attachment]="media" [status]="statusWrapper" (openEvent)="openAttachment(media)" (browseThreadEvent)="browseThread($event)"></app-attachement-image>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -275,14 +275,15 @@ $floating-header-height: 60px;
|
|||
&-follows {
|
||||
width: calc(100%);
|
||||
font-size: 13px;
|
||||
border-bottom: 1px solid #0f111a;;
|
||||
border-bottom: 1px solid #0f111a;
|
||||
|
||||
display: flex;
|
||||
|
||||
&__link {
|
||||
color: white;
|
||||
width: calc(50%);
|
||||
flex-grow: 1;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
background-color: #1a1f2e;
|
||||
transition: all .2s;
|
||||
|
||||
|
@ -311,15 +312,15 @@ $floating-header-height: 60px;
|
|||
font-size: 13px;
|
||||
transition: all .4s;
|
||||
|
||||
&__section {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
width: calc(33.333% - 5px);
|
||||
padding: 5px 0 7px 0;
|
||||
display: flex;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
&__section {
|
||||
// outline: 1px dotted orange;
|
||||
|
||||
flex-grow: 1;
|
||||
|
||||
text-align: center;
|
||||
padding: 5px 0 7px 0;
|
||||
}
|
||||
|
||||
&__preparefloating {
|
||||
|
|
|
@ -398,11 +398,13 @@ export class MastodonService {
|
|||
uploadMediaAttachment(account: AccountInfo, file: File, description: string): Promise<Attachment> {
|
||||
let input = new FormData();
|
||||
input.append('file', file);
|
||||
|
||||
if (description !== null && description !== undefined) {
|
||||
input.append('description', description);
|
||||
} else {
|
||||
input.append('description', '');
|
||||
}
|
||||
|
||||
const route = `https://${account.instance}${this.apiRoutes.uploadMediaAttachment}`;
|
||||
const headers = new HttpHeaders({ 'Authorization': `Bearer ${account.token.access_token}` });
|
||||
return this.httpClient.post<Attachment>(route, input, { headers: headers }).toPromise();
|
||||
|
@ -411,7 +413,13 @@ export class MastodonService {
|
|||
//TODO: add focus support
|
||||
updateMediaAttachment(account: AccountInfo, mediaId: string, description: string): Promise<Attachment> {
|
||||
let input = new FormData();
|
||||
input.append('description', description);
|
||||
|
||||
if (description !== null && description !== undefined) {
|
||||
input.append('description', description);
|
||||
} else {
|
||||
input.append('description', '');
|
||||
}
|
||||
|
||||
const route = `https://${account.instance}${this.apiRoutes.updateMediaAttachment.replace('{0}', mediaId)}`;
|
||||
const headers = new HttpHeaders({ 'Authorization': `Bearer ${account.token.access_token}` });
|
||||
return this.httpClient.put<Attachment>(route, input, { headers: headers }).toPromise();
|
||||
|
|
Loading…
Reference in New Issue