#39 Add settings module

src/browser/app.scss

@@ -10,6 +10,7 @@
 @import "app/all-theme";
 @import "note/all-theme";
 @import "vcs/all-theme";
+@import "settings/all-theme";
 
 @include ui-core();
 
@@ -18,11 +19,13 @@
     @include gd-ui-all-theme($basic-light-theme);
     @include gd-note-all-theme($basic-light-theme);
     @include gd-vcs-all-theme($basic-light-theme);
+    @include gd-settings-all-theme($basic-light-theme);
 }
 
 .BasicDarkTheme {
     @include gd-app-all-theme($basic-dark-theme);
     @include gd-ui-all-theme($basic-dark-theme);
     @include gd-note-all-theme($basic-dark-theme);
     @include gd-vcs-all-theme($basic-dark-theme);
+    @include gd-settings-all-theme($basic-dark-theme);
 }

src/browser/settings/_all-theme.scss

@@ -0,0 +1,5 @@
+@import "./settings-dialog/settings-dialog-theme";
+
+@mixin gd-settings-all-theme($theme) {
+    @include gd-settings-dialog-theme($theme);
+}

src/browser/settings/index.ts

@@ -0,0 +1,5 @@
+export * from './settings.module';
+export * from './settings-context';
+export * from './settings-registry';
+export * from './settings-dialog/settings-dialog.component';
+export * from './settings-dialog/settings-dialog';

src/browser/settings/settings-dialog/_settings-dialog-theme.scss

@@ -0,0 +1,11 @@
+@import "../../ui/style/theming";
+
+@mixin gd-settings-dialog-theme($theme) {
+    $foreground: map-get($theme, foreground);
+
+    .SettingsDialog {
+        &__content > gd-tab-group {
+            border-bottom: 1px solid gd-color($foreground, divider);
+        }
+    }
+}

src/browser/settings/settings-dialog/settings-dialog-data.ts

@@ -0,0 +1,3 @@
+export interface SettingsDialogData {
+    initialSettingId?: string;
+}

src/browser/settings/settings-dialog/settings-dialog.component.html

@@ -0,0 +1,17 @@
+<gd-dialog-header fxLayout fxLayoutAlign="space-between center">
+    <h1 gdDialogTitle>{{ title }}</h1>
+    <button gd-icon-button aria-label="Close settings" (click)="closeThisDialog()" id="settings-dialog-close-button">
+        <gd-icon name="close"></gd-icon>
+    </button>
+</gd-dialog-header>
+
+<gd-dialog-content class="SettingsDialog__content">
+    <gd-tab-group [tabControl]="tabControl"></gd-tab-group>
+    <div [ngSwitch]="tabControl.activateTab?.value" class="SettingsDialog__container">
+        <ng-container *ngFor="let context of settingContexts">
+            <div *ngSwitchCase="context.id" class="SettingsDialog__tabContent">
+                <ng-container *ngComponentOutlet="context.component; injector: _injector"></ng-container>
+            </div>
+        </ng-container>
+    </div>
+</gd-dialog-content>

src/browser/settings/settings-dialog/settings-dialog.component.scss

@@ -0,0 +1,14 @@
+@import "../../ui/style/spacing";
+
+.SettingsDialog {
+    &__content {
+        padding: 0 !important;
+    }
+
+    &__container {
+        padding: $spacing;
+    }
+
+    &__tabContent {
+    }
+}

src/browser/settings/settings-dialog/settings-dialog.component.spec.ts

@@ -0,0 +1,108 @@
+import { NgModule } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { fastTestSetup, NoopComponent } from '../../../../test/helpers';
+import { MockDialog, MockDialogRef } from '../../../../test/mocks/browser';
+import { DialogRef } from '../../ui/dialog';
+import { UiModule } from '../../ui/ui.module';
+import { SettingsContext } from '../settings-context';
+import { SETTINGS_REGISTRATION, SettingsRegistry } from '../settings-registry';
+import { SettingsDialogData } from './settings-dialog-data';
+import { SettingsDialogComponent } from './settings-dialog.component';
+
+
+describe('browser.settings.SettingsDialogComponent', () => {
+    let component: SettingsDialogComponent;
+    let fixture: ComponentFixture<SettingsDialogComponent>;
+
+    let mockDialogRef: MockDialogRef<SettingsDialogComponent, SettingsDialogData, void>;
+
+    let registry: SettingsRegistry;
+    const registration: SettingsContext<any>[] = [
+        {
+            id: 'settings-1',
+            tabName: 'Settings1',
+            component: NoopComponent,
+        },
+        {
+            id: 'settings-2',
+            tabName: 'Settings2',
+            component: NoopComponent,
+        },
+        {
+            id: 'settings-3',
+            tabName: 'Settings3',
+            component: NoopComponent,
+        },
+    ];
+
+    @NgModule({
+        declarations: [NoopComponent],
+        entryComponents: [NoopComponent],
+        exports: [NoopComponent],
+    })
+    class NoopModuleWithEntries {
+    }
+
+    fastTestSetup();
+
+    beforeAll(async () => {
+        mockDialogRef = new MockDialogRef(new MockDialog(), SettingsDialogComponent);
+
+        await TestBed
+            .configureTestingModule({
+                imports: [
+                    UiModule,
+                    NoopModuleWithEntries,
+                ],
+                providers: [
+                    SettingsRegistry,
+                    { provide: SETTINGS_REGISTRATION, useValue: registration },
+                    { provide: DialogRef, useValue: mockDialogRef },
+                ],
+                declarations: [
+                    SettingsDialogComponent,
+                ],
+            })
+            .compileComponents();
+    });
+
+    beforeEach(() => {
+        registry = TestBed.get(SettingsRegistry);
+
+        fixture = TestBed.createComponent(SettingsDialogComponent);
+        component = fixture.componentInstance;
+        component.data = {};
+    });
+
+    afterEach(() => {
+        registry.ngOnDestroy();
+    });
+
+    it('should select first tab by default.', () => {
+        fixture.detectChanges();
+        expect(component.tabControl.activateTab.value).toEqual('settings-1');
+    });
+
+    it('should select initial setting id if it provided.', () => {
+        component.data = { initialSettingId: 'settings-3' };
+        fixture.detectChanges();
+
+        expect(component.tabControl.activateTab.value).toEqual('settings-3');
+    });
+
+    it('should close dialog when click close button.', () => {
+        const closeCallback = jasmine.createSpy('close callback');
+        const subscription = mockDialogRef.afterClosed().subscribe(closeCallback);
+
+        fixture.detectChanges();
+
+        const closeButtonEl = fixture.debugElement.query(
+            By.css('button#settings-dialog-close-button'),
+        ).nativeElement as HTMLButtonElement;
+        closeButtonEl.click();
+
+        expect(closeCallback).toHaveBeenCalled();
+        subscription.unsubscribe();
+    });
+});

src/browser/settings/settings-dialog/settings-dialog.component.ts

@@ -0,0 +1,45 @@
+import { Component, Inject, Injector, OnInit, Optional } from '@angular/core';
+import { __DARWIN__ } from '../../../libs/platform';
+import { DIALOG_DATA, DialogRef } from '../../ui/dialog';
+import { TabControl } from '../../ui/tabs/tab-control';
+import { SettingsContext } from '../settings-context';
+import { SettingsRegistry } from '../settings-registry';
+import { SettingsDialogData } from './settings-dialog-data';
+
+
+@Component({
+    selector: 'gd-settings-dialog',
+    templateUrl: './settings-dialog.component.html',
+    styleUrls: ['./settings-dialog.component.scss'],
+})
+export class SettingsDialogComponent implements OnInit {
+    readonly title = __DARWIN__ ? 'Preferences' : 'Settings';
+    readonly settingContexts: SettingsContext<any>[];
+    readonly tabControl: TabControl;
+
+    constructor(
+        public _injector: Injector,
+        @Optional() @Inject(DIALOG_DATA) public data: SettingsDialogData,
+        private registry: SettingsRegistry,
+        private dialogRef: DialogRef<SettingsDialogComponent, void>,
+    ) {
+        this.settingContexts = this.registry.getSettings();
+        this.tabControl = new TabControl(this.settingContexts.map(context => ({
+            id: context.id,
+            name: context.tabName,
+            value: context.id,
+        })));
+    }
+
+    ngOnInit(): void {
+        if (this.data && this.data.initialSettingId) {
+            this.tabControl.selectTabByValue(this.data.initialSettingId);
+        } else {
+            this.tabControl.selectFirstTab();
+        }
+    }
+
+    closeThisDialog(): void {
+        this.dialogRef.close();
+    }
+}

src/browser/settings/settings-dialog/settings-dialog.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { Dialog, DialogRef } from '../../ui/dialog';
+import { SettingsDialogData } from './settings-dialog-data';
+import { SettingsDialogComponent } from './settings-dialog.component';
+
+
+@Injectable()
+export class SettingsDialog {
+    constructor(private dialog: Dialog) {
+    }
+
+    open(data?: SettingsDialogData): DialogRef<SettingsDialogComponent, void> {
+        return this.dialog.open<SettingsDialogComponent,
+            SettingsDialogData,
+            void>(
+            SettingsDialogComponent,
+            {
+                width: '500px',
+                maxHeight: '75vh',
+                disableBackdropClickClose: true,
+                data,
+            },
+        );
+    }
+}

src/browser/settings/settings.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { UiModule } from '../ui/ui.module';
+import { SettingsDialog } from './settings-dialog/settings-dialog';
+import { SettingsDialogComponent } from './settings-dialog/settings-dialog.component';
+import { SettingsRegistry } from './settings-registry';
+
+
+@NgModule({
+    imports: [
+        UiModule,
+    ],
+    declarations: [SettingsDialogComponent],
+    entryComponents: [
+        SettingsDialogComponent,
+    ],
+    providers: [
+        SettingsDialog,
+        SettingsRegistry,
+    ],
+    exports: [SettingsDialogComponent],
+})
+export class SettingsModule {
+}