mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-09-17 14:21:14 +00:00
[desktop] settings dialog (#360)
* settings route * settings component * translate strings * use 'www' output folder for electron builds
This commit is contained in:
Denys Vuika
committed by
Cilibiu Bogdan
Cilibiu Bogdan
parent
122f26e015
commit
bda89943a8
43
src/app/components/settings/settings.component.html
Normal file
43
src/app/components/settings/settings.component.html
Normal file
@@ -0,0 +1,43 @@
|
||||
<adf-toolbar class="app-menu" [style.background-color]="backgroundColor">
|
||||
<adf-toolbar-title>
|
||||
<a class="app-menu__title" title="{{ appName }}" [routerLink]="[ '/' ]">
|
||||
<img [src]="logo" alt="{{ appName }}" />
|
||||
</a>
|
||||
</adf-toolbar-title>
|
||||
</adf-toolbar>
|
||||
|
||||
<form [formGroup]="form" novalidate (ngSubmit)="apply(form.value, form.valid)">
|
||||
<mat-accordion multi="true" displayMode="flat">
|
||||
<mat-expansion-panel [expanded]="true">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>{{ 'APP.SETTINGS.REPOSITORY-SETTINGS' | translate }}</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
|
||||
<div>
|
||||
<mat-form-field class="settings-input">
|
||||
<input matInput
|
||||
formControlName="ecmHost"
|
||||
type="text"
|
||||
tabindex="2"
|
||||
placeholder="ACS Repository URL">
|
||||
<mat-error *ngIf="form.get('ecmHost').hasError('pattern')">
|
||||
{{ 'APP.SETTINGS.INVALID-VALUE-FORMAT' | translate }}
|
||||
</mat-error>
|
||||
<mat-error *ngIf="form.get('ecmHost').hasError('required')">
|
||||
{{ 'APP.SETTINGS.REQUIRED-FIELD' | translate }}
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="settings-buttons">
|
||||
<button mat-button (click)="reset()">
|
||||
{{ 'APP.SETTINGS.RESET' | translate }}
|
||||
</button>
|
||||
<button mat-button color="primary" type="submit" [disabled]="!form.valid">
|
||||
{{ 'APP.SETTINGS.APPLY' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
</form>
|
||||
69
src/app/components/settings/settings.component.scss
Normal file
69
src/app/components/settings/settings.component.scss
Normal file
@@ -0,0 +1,69 @@
|
||||
@import 'variables';
|
||||
|
||||
.app-settings {
|
||||
.settings-input {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.settings-buttons {
|
||||
text-align: right;
|
||||
|
||||
.mat-button {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
$app-menu-height: 64px;
|
||||
|
||||
.app-menu {
|
||||
height: $app-menu-height;
|
||||
|
||||
&.adf-toolbar {
|
||||
.mat-toolbar {
|
||||
background-color: inherit;
|
||||
font-family: inherit;
|
||||
min-height: $app-menu-height;
|
||||
height: $app-menu-height;
|
||||
|
||||
.mat-toolbar-layout {
|
||||
height: $app-menu-height;
|
||||
|
||||
.mat-toolbar-row {
|
||||
height: $app-menu-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-toolbar-divider {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
|
||||
& > div {
|
||||
background-color: $alfresco-white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-toolbar-title {
|
||||
color: $alfresco-white;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.app-menu__title {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
margin-left: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
|
||||
&> img {
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
88
src/app/components/settings/settings.component.ts
Normal file
88
src/app/components/settings/settings.component.ts
Normal file
@@ -0,0 +1,88 @@
|
||||
/*!
|
||||
* @license
|
||||
* Alfresco Example Content Application
|
||||
*
|
||||
* Copyright (C) 2005 - 2018 Alfresco Software Limited
|
||||
*
|
||||
* This file is part of the Alfresco Example Content Application.
|
||||
* If the software was purchased under a paid Alfresco license, the terms of
|
||||
* the paid license agreement will prevail. Otherwise, the software is
|
||||
* provided under the following open source license terms:
|
||||
*
|
||||
* The Alfresco Example Content Application is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Lesser General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* The Alfresco Example Content Application is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Lesser General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Lesser General Public License
|
||||
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { Component, ViewEncapsulation, SecurityContext, OnInit } from '@angular/core';
|
||||
import { AppConfigService, StorageService, SettingsService } from '@alfresco/adf-core';
|
||||
import { DomSanitizer } from '@angular/platform-browser';
|
||||
import { Validators, FormGroup, FormBuilder } from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
selector: 'app-settings',
|
||||
templateUrl: './settings.component.html',
|
||||
styleUrls: ['./settings.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
// tslint:disable-next-line:use-host-property-decorator
|
||||
host: { class: 'app-settings' }
|
||||
})
|
||||
export class SettingsComponent implements OnInit {
|
||||
|
||||
private defaultPath = '/assets/images/alfresco-logo-white.svg';
|
||||
private defaultBackgroundColor = '#2196F3';
|
||||
|
||||
form: FormGroup;
|
||||
|
||||
constructor(
|
||||
private appConfig: AppConfigService,
|
||||
private sanitizer: DomSanitizer,
|
||||
private settingsService: SettingsService,
|
||||
private storage: StorageService,
|
||||
private fb: FormBuilder) {
|
||||
|
||||
}
|
||||
|
||||
get appName(): string {
|
||||
return <string>this.appConfig.get('application.name');
|
||||
}
|
||||
|
||||
get logo() {
|
||||
return this.appConfig.get('application.logo', this.defaultPath);
|
||||
}
|
||||
|
||||
get backgroundColor() {
|
||||
const color = this.appConfig.get('headerColor', this.defaultBackgroundColor);
|
||||
return this.sanitizer.sanitize(SecurityContext.STYLE, color);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.form = this.fb.group({
|
||||
ecmHost: ['', [Validators.required, Validators.pattern('^(http|https):\/\/.*[^/]$')]]
|
||||
});
|
||||
|
||||
this.reset();
|
||||
}
|
||||
|
||||
apply(model: any, isValid: boolean) {
|
||||
if (isValid) {
|
||||
this.storage.setItem('ecmHost', model.ecmHost);
|
||||
// window.location.reload(true);
|
||||
}
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.form.reset({
|
||||
ecmHost: this.storage.getItem('ecmHost') || this.settingsService.ecmHost
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user