Minimal PeertubeModalService to open settings from "can be redefined..." (#3923)

* Minimal PeertubeModalService to open settings from "can be redefined..."

* Linter changes

* Removed unused parameter, made Subject type reflect this, and formatting

client/src/app/menu/menu.component.ts

@@ -10,6 +10,7 @@ import { LanguageChooserComponent } from '@app/menu/language-chooser.component'
 import { QuickSettingsModalComponent } from '@app/modal/quick-settings-modal.component'
 import { ServerConfig, UserRight, VideoConstant } from '@shared/models'
 import { NgbDropdown, NgbDropdownConfig } from '@ng-bootstrap/ng-bootstrap'
+import { PeertubeModalService } from '@app/shared/shared-main/peertube-modal/peertube-modal.service'
 
 const logger = debug('peertube:menu:MenuComponent')
 
@@ -54,6 +55,7 @@ export class MenuComponent implements OnInit {
     private hotkeysService: HotkeysService,
     private screenService: ScreenService,
     private menuService: MenuService,
+    private modalService: PeertubeModalService,
     private dropdownConfig: NgbDropdownConfig,
     private router: Router
   ) {
@@ -130,6 +132,9 @@ export class MenuComponent implements OnInit {
         this.authService.userInformationLoaded
           .subscribe(() => this.buildUserLanguages())
       })
+
+    this.modalService.openQuickSettingsSubject
+      .subscribe(() => this.openQuickSettings())
   }
 
   isRegistrationAllowed () {

client/src/app/shared/shared-instance/instance-features-table.component.html

@@ -11,7 +11,7 @@
     <tr>
       <th i18n class="label" scope="row">
         <div>Default NSFW/sensitive videos policy</div>
-        <div class="more-info">can be redefined by the users</div>
+        <div class="c-hand more-info" (click)="openQuickSettingsHighlight()">can be redefined by the users</div>
       </th>
 
       <td class="value">{{ buildNSFWLabel() }}</td>

client/src/app/shared/shared-instance/instance-features-table.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core'
 import { ServerService } from '@app/core'
 import { ServerConfig } from '@shared/models'
+import { PeertubeModalService } from '../shared-main/peertube-modal/peertube-modal.service'
 
 @Component({
   selector: 'my-instance-features-table',
@@ -11,7 +12,10 @@ export class InstanceFeaturesTableComponent implements OnInit {
   quotaHelpIndication = ''
   serverConfig: ServerConfig
 
-  constructor (private serverService: ServerService) { }
+  constructor (
+    private serverService: ServerService,
+    private modalService: PeertubeModalService
+  ) { }
 
   get initialUserVideoQuota () {
     return this.serverConfig.user.videoQuota
@@ -56,6 +60,10 @@ export class InstanceFeaturesTableComponent implements OnInit {
     return this.serverService.getServerVersionAndCommit()
   }
 
+  openQuickSettingsHighlight () {
+    this.modalService.openQuickSettingsSubject.next()
+  }
+
   private getApproximateTime (seconds: number) {
     const hours = Math.floor(seconds / 3600)
     let pluralSuffix = ''

client/src/app/shared/shared-main/peertube-modal/index.ts

@@ -0,0 +1 @@
+export * from './peertube-modal.service'

client/src/app/shared/shared-main/peertube-modal/peertube-modal.service.ts

@@ -0,0 +1,7 @@
+import { Injectable } from '@angular/core'
+import { Subject } from 'rxjs'
+
+@Injectable({ providedIn: 'root' })
+export class PeertubeModalService {
+  openQuickSettingsSubject = new Subject<void>()
+}