displaying post quotes

Author: NicolasConstant

AGENTS.md

@@ -6,7 +6,8 @@ Sengi is a multi-account Mastodon/Pleroma desktop client built with Angular 7, T
 
 When editing colors, use css variables following the current themes implementation.
 The themes colors are stored in the *.ts files in the `/src/app/themes/implementations` folder, they MUST be updated accordingly.
-And don't forget to update the `/src/sass/_variables.scss` file when doing so.
+
+You MUST update the `/src/sass/_variables.scss` file accordingly, when updating theme's variables.
 
 ## Commands
 

src/app/components/floating-column/settings/settings.component.ts

@@ -290,11 +290,7 @@ export class SettingsComponent implements OnInit, OnDestroy {
 
     onThemeChange(themeId: number) {
         const castedType = <ThemeTypeEnum>themeId;
-        console.warn(themeId);
-        console.warn(this.themeList);
-
         const newTheme = this.themeList.find(x => x.theme_type == castedType);
-        console.warn(newTheme);
 
         if(newTheme) this.themeService.setTheme(newTheme);
     }

src/app/components/stream/status/quote/quote.component.html

@@ -1,6 +1,5 @@
 <div class="quote" *ngIf="quoteState == 'accepted' && displayStatus">
-  <a href class="quote__open-quote-btn" title="Open Status"
-    (click)="textSelected()">
+  <a href class="quote__open-quote-btn" title="Open Status" (click)="textSelected()">
     <fa-icon [icon]="faCircle"></fa-icon>
   </a>
   <a href class="quote__profile-link" title="{{displayStatus.account.acct}}"
@@ -12,10 +11,13 @@
     </span>
   </a>
   <app-databinded-text #databindedtext class="quote__content" [text]="statusContent"
-    (accountSelected)="accountSelected($event)" 
-    (hashtagSelected)="hashtagSelected($event)"
+    (accountSelected)="accountSelected($event)" (hashtagSelected)="hashtagSelected($event)"
     (textSelected)="textSelected()"></app-databinded-text>
-  <app-attachements *ngIf="displayStatus.media_attachments" class="quote__attachments"
+
+  <app-poll class="quote__poll" *ngIf="displayStatus.poll" [poll]="displayStatus.poll"
+    [statusWrapper]="displayStatusWrapper"></app-poll>
+
+  <app-attachements *ngIf="displayStatus.media_attachments && displayStatus.media_attachments.length > 0" class="quote__attachments"
     [attachments]="displayStatus.media_attachments">
   </app-attachements>
   <div *ngIf="displayStatus.quote" class="quote__sub-quote">
@@ -24,4 +26,7 @@
 </div>
 <div class="quote quote__unaccepted" *ngIf="quoteState != 'accepted'">
   {{ getReadableStatus(quoteState) }}
+</div>
+<div class="quote quote__unaccepted" *ngIf="error">
+  {{ error }}
 </div>

src/app/components/stream/status/quote/quote.component.scss

@@ -2,14 +2,14 @@
 @import "commons";
 
 .quote {
-    border: 1px solid orange;
+    border: 1px solid $quote-border-color;
     border-radius: 3px;
     padding: 3px;
     margin: 15px 2px 0 $avatar-column-space;
     position: relative;
 
     &__unaccepted {
-        color: orangered;
+        color: $quote-unaccepted-color;
         text-align: center;
         font-size: 12px;
         padding: 5px 10px;
@@ -84,9 +84,14 @@
     &__sub-quote {
         margin: 5px 0 0 0;
         padding: 2px 0 2px 5px;
-        color: purple;
-        background-color: aqua;
+        color: $quote-sub-quote-color;
+        background-color: $quote-sub-quote-background;
         border-radius: 3px;
     }
+
+    &__poll {
+        display: block;
+        margin-top: 5px;
+    }
 }
 

src/app/components/stream/status/quote/quote.component.ts

@@ -7,6 +7,7 @@ import { OpenThreadEvent, ToolsService } from '../../../../services/tools.servic
 import { SettingsService } from '../../../../services/settings.service';
 import { AccountInfo } from '../../../../states/accounts.state';
 import { MastodonWrapperService } from '../../../../services/mastodon-wrapper.service';
+import { StatusWrapper } from '../../../../models/common.model';
 
 @Component({
   selector: 'app-quote',
@@ -18,7 +19,9 @@ export class QuoteComponent implements OnInit {
   faCircle = faCircle;
 
   displayStatus: Status;
+  displayStatusWrapper: StatusWrapper;
   quoteState: 'pending' | 'accepted' | 'rejected' | 'revoked' | 'deleted' | 'unauthorized' | 'blocked_account' | 'blocked_domain' | 'muted_account';
+  error: string;
 
   private quote: Quote;
   private shallowQuote: ShallowQuote;
@@ -27,10 +30,6 @@ export class QuoteComponent implements OnInit {
   @Output() browseHashtagEvent = new EventEmitter<string>();
   @Output() browseThreadEvent = new EventEmitter<OpenThreadEvent>();
 
-  // @Output() accountSelected = new EventEmitter<string>();
-  // @Output() hashtagSelected = new EventEmitter<string>();
-  // @Output() textSelected = new EventEmitter();
-
   @Input() accountInfo: AccountInfo;
 
   @Input('quote')
@@ -57,14 +56,17 @@ export class QuoteComponent implements OnInit {
       this.shallowQuote = <ShallowQuote>value;
       this.mastodonService.getStatus(this.accountInfo, this.shallowQuote.quoted_status_id)
         .then(status => {
-
-          console.warn('accountInfo');
-          console.warn(this.accountInfo);
           this.displayStatus = status;
           this.appRef.tick();
         })
-        .catch(err => console.error(err));
+        .catch(err => {
+          console.error(err);
+          this.error = "Error retrieving status.";
+          this.appRef.tick();
+        });
     }
+
+    this.displayStatusWrapper = new StatusWrapper(this.displayStatus, this.accountInfo, false, false);
   }
 
   statusContent: string;
@@ -135,10 +137,6 @@ export class QuoteComponent implements OnInit {
     }
 
     const openThread = new OpenThreadEvent(status, accountInfo);
-
-    console.warn('openThread');
-    console.warn(openThread);
-
     this.browseThreadEvent.next(openThread);
     return false;
   }
@@ -153,7 +151,7 @@ export class QuoteComponent implements OnInit {
 
   openAccount(account: Account): boolean {
     let accountName = this.toolsService.getAccountFullHandle(account);
-    this.browseAccountEvent.emit(account.acct);
+    this.browseAccountEvent.emit(accountName);
     return false;
   }
 

src/app/services/instances-info.service.ts

@@ -31,7 +31,7 @@ export class InstancesInfoService {
                         const instanceV1 = <Instancev1>instance;
                         if (instanceV1 && instanceV1.max_toot_chars)
                             return instanceV1.max_toot_chars;
-                        if(instanceV1 && instanceV1.configuration && instanceV1.configuration.statuses && instanceV1.configuration.statuses.max_characters)
+                        if (instanceV1 && instanceV1.configuration && instanceV1.configuration.statuses && instanceV1.configuration.statuses.max_characters)
                             return instanceV1.configuration.statuses.max_characters;
                     }
 
@@ -74,16 +74,18 @@ export class InstancesInfoService {
         if (!this.cachedTranslationAvailability[instance]) {
             this.cachedTranslationAvailability[instance] = this.mastodonService.getInstance(instance)
                 .then((instance: Instance) => {
-                    if (+instance.version.split('.')[0] >= 4) {
-                        const instanceV2 = <Instancev2>instance;
-                        if (instanceV2
-                            && instanceV2.configuration
-                            && instanceV2.configuration.translation)
-                            return instanceV2.configuration.translation.enabled;
-                    } else {
-                        const instanceV1 = <Instancev1>instance;
-                        if (instanceV1 && instanceV1.max_toot_chars)
-                            return false;
+                    if (instance) {
+                        if (+instance.version.split('.')[0] >= 4) {
+                            const instanceV2 = <Instancev2>instance;
+                            if (instanceV2
+                                && instanceV2.configuration
+                                && instanceV2.configuration.translation)
+                                return instanceV2.configuration.translation.enabled;
+                        } else {
+                            const instanceV1 = <Instancev1>instance;
+                            if (instanceV1 && instanceV1.max_toot_chars)
+                                return false;
+                        }
                     }
 
                     return false;

src/app/services/media.service.ts

@@ -85,7 +85,7 @@ export class MediaService {
                     this.mediaSubject.next(medias);
                 })
                 .catch((err) => {
-                    console.warn('failing update');
+                    console.error('failing update');
                     this.notificationService.notifyHttpError(err, account);
                 });
         }

src/app/themes/implementations/default.ts

@@ -325,6 +325,11 @@ export const defaultTheme: Theme = {
 
         "--attachment-icon-overlay": "#ffffff",
         "--attachment-icon-shadow": "#4e4e4e",
-        "--attachment-icon-shadow-hover": "#4e4e4e"
+        "--attachment-icon-shadow-hover": "#4e4e4e",
+
+        "--quote-border-color": "#222736",
+        "--quote-unaccepted-color": "#e46161",
+        "--quote-sub-quote-color": "#4e5572",
+        "--quote-sub-quote-background": "#0c0c10"
     }
 };

src/app/themes/implementations/light.ts

@@ -333,6 +333,11 @@ export const lightTheme: Theme = {
 
         "--attachment-icon-overlay": "#2d3134",
         "--attachment-icon-shadow": "#9ca3af",
-        "--attachment-icon-shadow-hover": "#6b7280"
+        "--attachment-icon-shadow-hover": "#6b7280",
+
+        "--quote-border-color": "#9ca7b3",
+        "--quote-unaccepted-color": "#e00b0b",
+        "--quote-sub-quote-color": "#ffffff",
+        "--quote-sub-quote-background": "#bdc1ca"
     }
 };

src/sass/_variables.scss

@@ -294,6 +294,10 @@
     --attachment-icon-shadow: #4e4e4e;
     --attachment-icon-shadow-hover: #4e4e4e;
 
+    --quote-border-color: orange;
+    --quote-unaccepted-color: orangered;
+    --quote-sub-quote-color: purple;
+    --quote-sub-quote-background: aqua;
 
     --color-primary-lighter-5: hsl(from var(var(--color-primary)) h s calc(l + 5%));
     --color-primary-lighter-15: hsl(from var(var(--color-primary)) h s calc(l + 15%));
@@ -515,4 +519,9 @@ $media-icon: var(--media-button-color);
 
 $attachment-icon-overlay: var(--attachment-icon-overlay);
 $attachment-icon-shadow: var(--attachment-icon-shadow);
-$attachment-icon-shadow-hover: var(--attachment-icon-shadow-hover);
+$attachment-icon-shadow-hover: var(--attachment-icon-shadow-hover);
+
+$quote-border-color: var(--quote-border-color);
+$quote-unaccepted-color: var(--quote-unaccepted-color);
+$quote-sub-quote-color: var(--quote-sub-quote-color);
+$quote-sub-quote-background: var(--quote-sub-quote-background);