Merge pull request #604 from NicolasConstant/develop

1.5.0 PR

package.json

@@ -1,6 +1,6 @@
 {
     "name": "sengi",
-    "version": "1.4.0",
+    "version": "1.5.0",
     "license": "AGPL-3.0-or-later",
     "main": "main-electron.js",
     "description": "A multi-account desktop client for Mastodon and Pleroma",
@@ -20,8 +20,8 @@
         "test": "ng test",
         "test-nowatch": "ng test --watch=false",
         "lint": "ng lint",
-        "e2e": "ng e2e",        
-        "dist": "npm run build"        
+        "e2e": "ng e2e",
+        "dist": "npm run build"
     },
     "private": true,
     "dependencies": {

src/app/app.module.ts

@@ -5,8 +5,7 @@ import { HttpModule } from "@angular/http";
 import { HttpClientModule } from '@angular/common/http';
 import { NgModule, APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
-
-// import { NgxElectronModule } from "ngx-electron";
+// import { NgxElectronModule } from 'ngx-electron';
 
 import { NgxsModule } from '@ngxs/store';
 import { NgxsStoragePluginModule } from '@ngxs/storage-plugin';
@@ -90,6 +89,7 @@ import { TutorialEnhancedComponent } from './components/tutorial-enhanced/tutori
 import { NotificationsTutorialComponent } from './components/tutorial-enhanced/notifications-tutorial/notifications-tutorial.component';
 import { LabelsTutorialComponent } from './components/tutorial-enhanced/labels-tutorial/labels-tutorial.component';
 import { ThankyouTutorialComponent } from './components/tutorial-enhanced/thankyou-tutorial/thankyou-tutorial.component';
+import { StatusTranslateComponent } from './components/stream/status/status-translate/status-translate.component';
 
 const routes: Routes = [
     { path: "", component: StreamsMainDisplayComponent },
@@ -159,7 +159,8 @@ const routes: Routes = [
         TutorialEnhancedComponent,
         NotificationsTutorialComponent,
         LabelsTutorialComponent,
-        ThankyouTutorialComponent
+        ThankyouTutorialComponent,
+        StatusTranslateComponent
     ],
     entryComponents: [
         EmojiPickerComponent
@@ -176,6 +177,7 @@ const routes: Routes = [
         OwlDateTimeModule,
         OwlNativeDateTimeModule,
         OverlayModule,
+        // NgxElectronModule,
         RouterModule.forRoot(routes),
 
         NgxsModule.forRoot([

src/app/components/create-status/create-status.component.html

@@ -1,16 +1,23 @@
 <form class="status-editor" (ngSubmit)="onSubmit()">
-    <input [(ngModel)]="title" type="text" class="form-control form-control-sm status-editor__title" name="title" 
-        autocomplete="off" placeholder="Title, Content Warning (optional)" title="title, content warning (optional)" dir="auto" />
+    <input #mytitle [(ngModel)]="title" type="text" class="form-control form-control-sm status-editor__title" 
+        name="title" autocomplete="off" placeholder="Title, Content Warning (optional)" 
+        title="title, content warning (optional)" dir="auto" 
+        (keydown.escape)="mytitle.blur()" />
 
         <a class="status-editor__emoji" title="Insert Emoji"
             #emojiButton href (click)="openEmojiPicker($event)">
             <img class="status-editor__emoji--image" src="/assets/emoji/72x72/1f636.png">
         </a>
 
-    <textarea #reply [(ngModel)]="status" name="status" class="form-control form-control-sm status-editor__content" (paste)="onPaste($event)"
+        <a class="status-editor__lang" title="Change language" href *ngIf="configuredLanguages && configuredLanguages.length > 1" (click)="onLangContextMenu($event)">
+            {{ selectedLanguage.iso639 }}
+        </a>
+
+    <textarea #reply [(ngModel)]="status" name="status" class="form-control form-control-sm status-editor__content" (paste)="onPaste($event)"         
         rows="5" required title="content" placeholder="What's on your mind?" 
         (keydown.control.enter)="onCtrlEnter()"
         (keydown.meta.enter)="onCtrlEnter()"
+        (keydown.escape)="reply.blur()"
         (keydown)="handleKeyDown($event)" (blur)="statusTextEditorLostFocus()" dir="auto">
     </textarea>
 
@@ -23,7 +30,7 @@
         (suggestionSelectedEvent)="suggestionSelected($event)" (hasSuggestionsEvent)="suggestionsChanged($event)">
     </app-autosuggest>
 
-    <app-poll-editor *ngIf="instanceSupportsPoll && pollIsActive"></app-poll-editor>
+    <app-poll-editor *ngIf="instanceSupportsPoll && pollIsActive" [oldPoll]="oldPoll"></app-poll-editor>
 
     <app-status-scheduler class="scheduler" *ngIf="instanceSupportsScheduling && scheduleIsActive"></app-status-scheduler>
 
@@ -68,6 +75,10 @@
             <fa-icon [icon]="faClock"></fa-icon>
         </a>
     </div>
+
+    <div class="language-warning" *ngIf="!configuredLanguages || configuredLanguages.length === 0">
+        You haven't set your language(s) yet, please <a href class="language-warning__link" (click)="onNavigateToSettings()">go in the settings</a> to provide it.
+    </div>
 
     <context-menu #contextMenu>
         <ng-template contextMenuItem (execute)="changePrivacy('Public')">
@@ -83,5 +94,12 @@
             <fa-icon [icon]="faEnvelope" class="context-menu-icon"></fa-icon> Direct
         </ng-template>
     </context-menu>
+
+    <context-menu #langContextMenu>
+        <ng-template contextMenuItem (execute)="setLanguage(l)" *ngFor="let l of configuredLanguages">
+            {{ l.name }}
+        </ng-template>        
+    </context-menu>
+
     <app-media></app-media>
 </form>

src/app/components/create-status/create-status.component.scss

@@ -70,6 +70,32 @@ $counter-width: 90px;
         }
     }
 
+    &__lang {
+        position: absolute;
+        top: 64px;
+        right: 12px;
+
+        font-weight: bolder;
+        font-size: 12px;
+        color: #a5a5a5;
+        text-decoration: none;
+
+        display: block;
+        width: 20px;
+        height: 19px;
+        border-radius: 2px;
+        background-color: rgba(255, 255, 255, 0);
+
+        padding: 1px 0 0 2px;
+        text-transform: uppercase;
+
+        &:hover {
+            text-decoration: none;
+            color:black;
+            background-color: #e6e6e6;
+        }
+    }
+
     &__content {
         border-width: 0;
         background-color: $status-editor-background;
@@ -207,6 +233,20 @@ $counter-width: 90px;
     border-bottom: 1px solid whitesmoke;
 }
 
+.language-warning {
+    padding: 5px 10px;
+    color: orange;
+
+    &__link {
+        text-decoration: underline;
+        color: #f0d124;
+
+        &:hover {
+            color: #d18800;
+        }
+    }
+}
+
 @import '~@angular/cdk/overlay-prebuilt.css';
 // ::ng-deep .cdk-overlay-backdrop  {
 //     // width: 100%;

src/app/components/create-status/create-status.component.ts

@@ -11,7 +11,7 @@ import { ContextMenuService, ContextMenuComponent } from 'ngx-contextmenu';
 
 import { VisibilityEnum, PollParameters } from '../../services/mastodon.service';
 import { MastodonWrapperService } from '../../services/mastodon-wrapper.service';
-import { Status, Attachment } from '../../services/models/mastodon.interfaces';
+import { Status, Attachment, Poll } from '../../services/models/mastodon.interfaces';
 import { ToolsService, InstanceInfo, InstanceType } from '../../services/tools.service';
 import { NotificationService } from '../../services/notification.service';
 import { StatusWrapper } from '../../models/common.model';
@@ -25,6 +25,9 @@ import { StatusSchedulerComponent } from './status-scheduler/status-scheduler.co
 import { ScheduledStatusService } from '../../services/scheduled-status.service';
 import { StatusesStateService } from '../../services/statuses-state.service';
 import { SettingsService } from '../../services/settings.service';
+import { LanguageService } from '../../services/language.service';
+import { ILanguage } from '../../states/settings.state';
+import { LeftPanelType, NavigationService } from '../../services/navigation.service';
 
 @Component({
     selector: 'app-create-status',
@@ -140,9 +143,19 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
                         this.isSending = false;
                     });
             }
+
+            if(value.status.poll){
+                this.pollIsActive = true;
+                this.oldPoll = value.status.poll;
+                // setTimeout(() => {
+                //     if(this.pollEditor) this.pollEditor.loadPollParameters(value.status.poll);
+                // }, 250);
+            }
         }
     }
 
+    oldPoll: Poll;
+
     private maxCharLength: number;
     charCountLeft: number;
     postCounts: number = 1;
@@ -153,6 +166,8 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
     instanceSupportsScheduling = true;
     isEditing: boolean;
     editingStatusId: string;
+    configuredLanguages: ILanguage[] = [];
+    selectedLanguage: ILanguage;
     private statusLoaded: boolean;
     private hasSuggestions: boolean;
 
@@ -162,6 +177,7 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
     @ViewChild('fileInput') fileInputElement: ElementRef;
     @ViewChild('footer') footerElement: ElementRef;
     @ViewChild(ContextMenuComponent) public contextMenu: ContextMenuComponent;
+    @ViewChild('langContextMenu') public langContextMenu: ContextMenuComponent;
     @ViewChild(PollEditorComponent) pollEditor: PollEditorComponent;
     @ViewChild(StatusSchedulerComponent) statusScheduler: StatusSchedulerComponent;
 
@@ -196,11 +212,15 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
 
     private accounts$: Observable<AccountInfo[]>;
     private accountSub: Subscription;
+    private langSub: Subscription;
+    private selectLangSub: Subscription;
     private selectedAccount: AccountInfo;
 
     constructor(
+        private readonly navigationService: NavigationService,
+        private readonly languageService: LanguageService,
         private readonly settingsService: SettingsService,
-        private statusStateService: StatusesStateService,
+        private readonly statusStateService: StatusesStateService,
         private readonly scheduledStatusService: ScheduledStatusService,
         private readonly contextMenuService: ContextMenuService,
         private readonly store: Store,
@@ -216,7 +236,35 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
         this.accounts$ = this.store.select(state => state.registeredaccounts.accounts);
     }
 
+    private initLanguages(){
+        this.configuredLanguages = this.languageService.getConfiguredLanguages();
+        this.selectedLanguage = this.languageService.getSelectedLanguage();
+        this.langSub = this.languageService.configuredLanguagesChanged.subscribe(l => {
+            this.configuredLanguages = l;
+            // if(this.configuredLanguages.length > 0 
+            //     && this.selectedLanguage
+            //     && this.configuredLanguages.findIndex(x => x.iso639 === this.selectedLanguage.iso639)){
+            //         this.languageService.setSelectedLanguage(this.configuredLanguages[0]);
+            // }
+        });
+        this.selectLangSub = this.languageService.selectedLanguageChanged.subscribe(l => {
+            this.selectedLanguage = l;
+        });
+        if(!this.selectedLanguage && this.configuredLanguages.length > 0){
+            this.languageService.setSelectedLanguage(this.configuredLanguages[0]);            
+        }
+    }
+
+    setLanguage(lang: ILanguage): boolean {
+        if(lang){
+            this.languageService.setSelectedLanguage(lang);
+        }
+        return false;
+    }
+
     ngOnInit() {
+        this.initLanguages();
+
         if (!this.isRedrafting) {
             this.status = this.statusStateService.getStatusContent(this.statusReplyingToWrapper);
         }
@@ -263,6 +311,13 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
         }
 
         this.accountSub.unsubscribe();
+        this.langSub.unsubscribe();
+        this.selectLangSub.unsubscribe();
+    }
+
+    onNavigateToSettings(): boolean {
+        this.navigationService.openPanel(LeftPanelType.Settings);
+        return false;
     }
 
     onPaste(e: any) {
@@ -613,6 +668,14 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
         return false;
     }
 
+    private currentLang(): string  {
+        if(this.selectedLanguage){
+            return this.selectedLanguage.iso639;
+        }
+        return null;
+    }
+
+
     private sendStatus(account: AccountInfo, status: string, visibility: VisibilityEnum, title: string, previousStatus: Status, attachments: Attachment[], poll: PollParameters, scheduledAt: string, editingStatusId: string): Promise<Status> {
         let parsedStatus = this.parseStatus(status);
         let resultPromise = Promise.resolve(previousStatus);
@@ -630,9 +693,9 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
                         let postPromise: Promise<Status>;
 
                         if (this.isEditing) {
-                            postPromise = this.mastodonService.editStatus(account, editingStatusId, s, visibility, title, inReplyToId, attachments, poll, scheduledAt);
+                            postPromise = this.mastodonService.editStatus(account, editingStatusId, s, visibility, title, inReplyToId, attachments, poll, scheduledAt, this.currentLang());
                         } else {
-                            postPromise = this.mastodonService.postNewStatus(account, s, visibility, title, inReplyToId, attachments.map(x => x.id), poll, scheduledAt);
+                            postPromise = this.mastodonService.postNewStatus(account, s, visibility, title, inReplyToId, attachments.map(x => x.id), poll, scheduledAt, this.currentLang());
                         }
 
                         return postPromise
@@ -642,9 +705,9 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
                             });
                     } else {
                         if (this.isEditing) {
-                            return this.mastodonService.editStatus(account, editingStatusId, s, visibility, title, inReplyToId, [], null, scheduledAt);
+                            return this.mastodonService.editStatus(account, editingStatusId, s, visibility, title, inReplyToId, [], null, scheduledAt, this.currentLang());
                         } else {
-                            return this.mastodonService.postNewStatus(account, s, visibility, title, inReplyToId, [], null, scheduledAt);
+                            return this.mastodonService.postNewStatus(account, s, visibility, title, inReplyToId, [], null, scheduledAt, this.currentLang());
                         }
                     }
                 })
@@ -887,6 +950,17 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
         $event.stopPropagation();
     }
 
+    public onLangContextMenu($event: MouseEvent): void {
+        this.contextMenuService.show.next({
+            // Optional - if unspecified, all context menu components will open
+            contextMenu: this.langContextMenu,
+            event: $event,
+            item: null
+        });
+        $event.preventDefault();
+        $event.stopPropagation();
+    }
+
     //https://stackblitz.com/edit/overlay-demo
     @ViewChild('emojiButton') emojiButtonElement: ElementRef;
     overlayRef: OverlayRef;