Merge pull request #156 from NicolasConstant/develop

0.15.0 Merge
NicolasConstant · Aug 17, 2019 · 5cd5539 · 5cd5539
2 parents 2bedbd6 + b332955
commit 5cd5539
Show file tree

Hide file tree

Showing 26 changed files with 430 additions and 249 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "sengi",
-    "version": "0.14.0",
+    "version": "0.15.0",
     "license": "AGPL-3.0-or-later",
     "main": "main-electron.js",
     "description": "A multi-account desktop client for Mastodon and Pleroma",
@@ -129,7 +129,9 @@
             "category": "Network"
         },
         "snap": {
-            "publish": ["github"]
+            "publish": [
+                "github"
+            ]
         }
     }
 }
diff --git a/src/app/components/create-status/create-status.component.html b/src/app/components/create-status/create-status.component.html
@@ -21,7 +21,7 @@
         (suggestionSelectedEvent)="suggestionSelected($event)" (hasSuggestionsEvent)="suggestionsChanged($event)">
     </app-autosuggest>
 
-    <div class="status-editor__footer">
+    <div class="status-editor__footer" #footer>
         <button type="submit" title="reply" class="status-editor__footer--send-button" *ngIf="statusReplyingToWrapper">
             <span *ngIf="!isSending">REPLY!</span>
             <app-waiting-animation class="waiting-icon" *ngIf="isSending"></app-waiting-animation>

diff --git a/src/app/components/create-status/create-status.component.scss b/src/app/components/create-status/create-status.component.scss
@@ -30,6 +30,7 @@ $counter-width: 90px;
 .status-editor {
     position: relative;
     font-size: $default-font-size;
+    margin-bottom: 5px;
 
     &__title {
         background-color: $status-editor-title-background;

diff --git a/src/app/components/create-status/create-status.component.ts b/src/app/components/create-status/create-status.component.ts
@@ -111,6 +111,7 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
     @Output() onClose = new EventEmitter();
     @ViewChild('reply') replyElement: ElementRef;
     @ViewChild('fileInput') fileInputElement: ElementRef;
+    @ViewChild('footer') footerElement: ElementRef;
     @ViewChild(ContextMenuComponent) public contextMenu: ContextMenuComponent;
 
     private _isDirectMention: boolean;
@@ -223,7 +224,7 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
     }
 
     private getWordByPos(str, pos) {
-        str = str.replace(/(\r\n|\n|\r)/gm,"");
+        str = str.replace(/(\r\n|\n|\r)/gm, "");
         var left = str.substr(0, pos);
         var right = str.substr(pos);
 
@@ -512,7 +513,7 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
         let mentionExtraChars = 0;
         let links = status.split(' ').filter(x => x.startsWith('http://') || x.startsWith('https://'));
         for (let link of links) {
-            if(link.length > 23){
+            if (link.length > 23) {
                 mentionExtraChars += link.length - 23;
             }
         }
@@ -610,11 +611,24 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
         let scrolling = (this.replyElement.nativeElement.scrollHeight);
 
         if (scrolling > 110) {
-            this.replyElement.nativeElement.style.height = `0px`;
+            const isVisible = this.checkVisible(this.footerElement.nativeElement);            
+            //this.replyElement.nativeElement.style.height = `0px`;
             this.replyElement.nativeElement.style.height = `${this.replyElement.nativeElement.scrollHeight}px`;
+
+            if (isVisible) {
+                setTimeout(() => {
+                    this.footerElement.nativeElement.scrollIntoViewIfNeeded({ behavior: 'instant', block: 'end', inline: 'start' });
+                }, 0);
+            }
         }
     }
 
+    private checkVisible(elm) {
+        var rect = elm.getBoundingClientRect();
+        var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
+        return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
+    }
+
     public onContextMenu($event: MouseEvent): void {
         this.contextMenuService.show.next({
             // Optional - if unspecified, all context menu components will open

diff --git a/src/app/components/floating-column/floating-column.component.html b/src/app/components/floating-column/floating-column.component.html
@@ -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>
+            <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>
+                <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>
 </div>
diff --git a/src/app/components/floating-column/floating-column.component.scss b/src/app/components/floating-column/floating-column.component.scss
@@ -1,11 +1,8 @@
 @import "variables";
 @import "mixins";
+@import "panel";
 
-
-.floating-column {
-    width: calc(100%);
-    width: $floating-column-size;
-
+.floating-column {    
     background-color: $color-secondary;
     overflow: hidden;
     z-index: 200;
@@ -16,16 +13,19 @@
 
     white-space: normal;
 
-    // &__header {
-
-    // }
-}
+    &__inner {
+        position: relative;
+        width: $stream-column-width;
+        height: calc(100%);
 
-.stream-overlay {
-    position: absolute;
-    z-index: 50;
-    width: $floating-column-size;
-    height: calc(100%);
+        margin: 0 0 0 $stream-column-separator;
+        overflow: hidden;
+
+        &--left {
+            width: $stream-column-width;
+            height: calc(100%);
+        }
+    }
 }
 
 .close-button {
@@ -34,27 +34,4 @@
     font-size: 14px;
     color: white;
     margin: 10px 16px 0 0;
-
-    // display: inline-block;
-    // background-color: $color-primary;
-    // color: darken(white, 30);
-    // border-radius: 999px;
-    // width: 26px;
-    // height: 26px;
-    // text-align: center;
-    // text-decoration: none;
-    // padding: 1px;
-
-    // z-index: 9999;
-    // float: right;
-    // margin: 10px;
-
-    // transition: all .2s;
-
-    // &:hover {
-    //     background-color: lighten($color-primary, 20);
-    //     color: white;
-    //     // transform: scale(1.2);
-    // }
-
 }
diff --git a/src/app/components/stream/hashtag/hashtag.component.ts b/src/app/components/stream/hashtag/hashtag.component.ts
@@ -1,5 +1,5 @@
-import { Component, OnInit, Output, EventEmitter, Input, ViewChild } from '@angular/core';
-import { Subject } from 'rxjs';
+import { Component, OnInit, Output, EventEmitter, Input, ViewChild, OnDestroy } from '@angular/core';
+import { Subject, Subscription } from 'rxjs';
 import { Store } from '@ngxs/store';
 
 import { StreamElement, StreamTypeEnum, AddStream } from '../../../states/streams.state';
@@ -12,8 +12,10 @@ import { AccountInfo } from '../../../states/accounts.state';
     templateUrl: './hashtag.component.html',
     styleUrls: ['./hashtag.component.scss']
 })
-export class HashtagComponent implements OnInit {
-
+export class HashtagComponent implements OnInit, OnDestroy {
+    @Input() refreshEventEmitter: EventEmitter<any>;
+    @Input() goToTopEventEmitter: EventEmitter<any>;
+
     @Output() browseAccountEvent = new EventEmitter<string>();
     @Output() browseHashtagEvent = new EventEmitter<string>();
     @Output() browseThreadEvent = new EventEmitter<OpenThreadEvent>();
@@ -27,18 +29,37 @@ export class HashtagComponent implements OnInit {
     get hashtagElement(): StreamElement{
         return this._hashtagElement;
     }
+
 
     @ViewChild('appStreamStatuses') appStreamStatuses: StreamStatusesComponent;
 
     goToTopSubject: Subject<void> = new Subject<void>();
 
     private lastUsedAccount: AccountInfo;
+    private refreshSubscription: Subscription;
+    private goToTopSubscription: Subscription;
 
     constructor(
         private readonly store: Store,
         private readonly toolsService: ToolsService) { }
 
     ngOnInit() {
+        if(this.refreshEventEmitter) {
+            this.refreshSubscription = this.refreshEventEmitter.subscribe(() => {
+                this.refresh();
+            })
+        }
+
+        if(this.goToTopEventEmitter) {
+            this.goToTopSubscription = this.goToTopEventEmitter.subscribe(() => {
+                this.goToTop();
+            })
+        }
+    }
+
+    ngOnDestroy(): void {
+        if(this.refreshSubscription) this.refreshSubscription.unsubscribe();
+        if (this.goToTopSubscription) this.goToTopSubscription.unsubscribe();
     }
 
     goToTop(): boolean {
@@ -66,6 +87,8 @@ export class HashtagComponent implements OnInit {
     }
 
     browseHashtag(hashtag: string) {
+        if(this.hashtagElement.tag === hashtag) return false;
+
         this.browseHashtagEvent.next(hashtag);
     }
 

diff --git a/...s/stream/status/action-bar/status-user-context-menu/status-user-context-menu.component.ts b/...s/stream/status/action-bar/status-user-context-menu/status-user-context-menu.component.ts
@@ -49,20 +49,19 @@ export class StatusUserContextMenuComponent implements OnInit, OnDestroy {
 
     ngOnInit() {       
         if (this.statusWrapper) {
-
             const status = this.statusWrapper.status;
             if (status.reblog) {
                 this.displayedStatus = status.reblog;
             } else {
                 this.displayedStatus = status;
-            }
-
-            this.accountSub = this.accounts$.subscribe((accounts: AccountInfo[]) => {
-                this.loadedAccounts = accounts;
-                this.checkStatus(accounts);
-            });
+            }           
         }
 
+        this.accountSub = this.accounts$.subscribe((accounts: AccountInfo[]) => {
+            this.loadedAccounts = accounts;
+            if (this.statusWrapper) this.checkStatus(accounts);
+        });
+
         let account: Account;
         if(this.statusWrapper) {
             account = this.displayedStatus.account;

diff --git a/src/app/components/stream/status/databinded-text/databinded-text.component.html b/src/app/components/stream/status/databinded-text/databinded-text.component.html
@@ -1 +1 @@
-<div #content class="content" [class.selectable]="textIsSelectable" innerHTML="{{processedText}}" (click)="selectText()"></div>
+<div #content class="content" [class.selectable]="textIsSelectable" innerHTML="{{processedText}}" (click)="selectText($event)"></div>
diff --git a/src/app/components/stream/status/databinded-text/databinded-text.component.ts b/src/app/components/stream/status/databinded-text/databinded-text.component.ts
@@ -238,8 +238,10 @@ export class DatabindedTextComponent implements OnInit {
         this.hashtagSelected.next(hashtag);
     }
 
-    selectText() {
-        this.textSelected.next();
+    selectText(event) {
+        if (event.view.getSelection().toString().length === 0) {
+            this.textSelected.next();
+        }
     }
 
 }
diff --git a/src/app/components/stream/status/status.component.html b/src/app/components/stream/status/status.component.html
@@ -1,4 +1,4 @@
-<div class="status-wrapper" [class.direct-message]="isDirectMessage">
+<div class="status-wrapper" [class.direct-message]="isDirectMessage" [class.status-selected]="isSelected">
     <div class="reblog" *ngIf="reblog">
         <a class="reblog__profile-link" href title="{{ status.account.acct }}" 
             (click)="openAccount(status.account)"

diff --git a/src/app/components/stream/status/status.component.scss b/src/app/components/stream/status/status.component.scss
@@ -33,6 +33,13 @@
     background-color: $direct-message-background;
 }
 
+.status-selected {
+    background-color: #0f111a;
+    background-color: desaturate(lighten(#0f111a, 5%), 4%);
+    background-color: #0a0a10;
+    background-color: #1e2734;
+}
+
 .status {
     margin: 0;
     padding: 0;

diff --git a/src/app/components/stream/status/status.component.ts b/src/app/components/stream/status/status.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from "@angular/core";
+import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ElementRef } from "@angular/core";
 import { faStar, faRetweet, faList, faThumbtack } from "@fortawesome/free-solid-svg-icons";
 
 import { Status, Account } from "../../../services/models/mastodon.interfaces";
@@ -36,6 +36,7 @@ export class StatusComponent implements OnInit {
     hasReply: boolean;
     contentWarningText: string;
     isDirectMessage: boolean;
+    isSelected: boolean;
 
     @Output() browseAccountEvent = new EventEmitter<string>();
     @Output() browseHashtagEvent = new EventEmitter<string>();
@@ -49,6 +50,7 @@ export class StatusComponent implements OnInit {
 
     private _statusWrapper: StatusWrapper;
     status: Status;
+
     @Input('statusWrapper')
     set statusWrapper(value: StatusWrapper) {
         this._statusWrapper = value;
@@ -85,6 +87,7 @@ export class StatusComponent implements OnInit {
     }
 
     constructor(
+        public elem: ElementRef,
         private readonly toolsService: ToolsService) { }
 
     ngOnInit() {
@@ -163,6 +166,8 @@ export class StatusComponent implements OnInit {
     }
 
     textSelected(): boolean {
+        if(this.isSelected) return false;
+
         const status = this._statusWrapper.status;
         const accountInfo = this._statusWrapper.provider;
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<div #content class="content" [class.selectable]="textIsSelectable" innerHTML="{{processedText}}" (click)="selectText()"></div>
		<div #content class="content" [class.selectable]="textIsSelectable" innerHTML="{{processedText}}" (click)="selectText($event)"></div>