Pull request #68: Add/Edit dictionary & Assign member dialog updates
Merge in RED/ui from add-edit-dict to master * commit 'e4b34f69291769d23df3f70d5db37ecf61e6471b': More cancel styles, save and add members button with icon Change text in create project dialog Cancel style Project due date Manage project team dialog fixes Add / edit dictionary dialog update
This commit is contained in:
Timo Bejan
commit
b0804f1738
@ -17,6 +17,7 @@ import { TranslateHttpLoader } from '@ngx-translate/http-loader';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { languageInitializer } from './i18n/language.initializer';
|
||||
import { LanguageService } from './i18n/language.service';
|
||||
import { MomentDateAdapter } from '@angular/material-moment-adapter';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { IconsModule } from './icons/icons.module';
|
||||
import { AddEditProjectDialogComponent } from './dialogs/add-edit-project-dialog/add-edit-project-dialog.component';
|
||||
@ -55,7 +56,7 @@ import { RedRoleGuard } from './auth/red-role.guard';
|
||||
import { MatListModule } from '@angular/material/list';
|
||||
import { AssignOwnerDialogComponent } from './dialogs/assign-owner-dialog/assign-owner-dialog.component';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatNativeDateModule } from '@angular/material/core';
|
||||
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatNativeDateModule } from '@angular/material/core';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { HumanizePipe } from './utils/humanize.pipe';
|
||||
import { CommentsComponent } from './components/comments/comments.component';
|
||||
@ -315,6 +316,15 @@ const matImports = [
|
||||
multi: true,
|
||||
useFactory: languageInitializer,
|
||||
deps: [LanguageService]
|
||||
},
|
||||
{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
|
||||
{
|
||||
provide: MAT_DATE_FORMATS,
|
||||
useValue: {
|
||||
display: {
|
||||
dateInput: 'DD/MM/YY'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
bootstrap: [AppComponent]
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<button mat-button [class.overlay]="showDot" [class.primary]="primary" (click)="action.emit($event)" [class.link-button]="linkButton" [disabled]="disabled">
|
||||
<button mat-button [class.overlay]="showDot" [class.primary]="primary" (click)="action.emit($event)" [class.show-bg]="type === 'show-bg'" [disabled]="disabled">
|
||||
<mat-icon [svgIcon]="icon" *ngIf="icon"></mat-icon>
|
||||
<span [translate]="text"></span>
|
||||
</button>
|
||||
|
||||
@ -3,17 +3,11 @@
|
||||
button {
|
||||
padding: 0 14px 0 10px;
|
||||
|
||||
&.show-bg {
|
||||
background-color: $grey-6;
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
width: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.link-button {
|
||||
text-transform: uppercase;
|
||||
opacity: 0.7;
|
||||
color: $accent;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0;
|
||||
line-height: 14px;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
@ -10,8 +10,8 @@ export class IconButtonComponent implements OnInit {
|
||||
@Input() text: string;
|
||||
@Input() showDot = false;
|
||||
@Input() primary = false;
|
||||
@Input() linkButton = false;
|
||||
@Input() disabled = false;
|
||||
@Input() type: 'default' | 'show-bg' = 'default';
|
||||
@Output() action = new EventEmitter<any>();
|
||||
|
||||
constructor() {}
|
||||
|
||||
@ -36,6 +36,6 @@
|
||||
|
||||
<div *ngIf="addingComment" class="comment-actions-container">
|
||||
<redaction-circle-button (action)="addComment()" [disabled]="!commentForm.value.comment" icon="red:check-alt" type="primary"></redaction-circle-button>
|
||||
<div (click)="toggleAddingComment($event)" class="all-caps-label" translate="comments.cancel"></div>
|
||||
<div (click)="toggleAddingComment($event)" class="all-caps-label cancel" translate="comments.cancel"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -13,9 +13,9 @@
|
||||
|
||||
<div class="red-input-group" *ngIf="!project">
|
||||
<mat-form-field floatLabel="always">
|
||||
<mat-label>{{ 'project-listing.add-edit-dialog.form.rule-set' | translate }}</mat-label>
|
||||
<mat-select value="EFSA 1 (Authors by vertebrates)" style="width: 100%;">
|
||||
<mat-option *ngFor="let type of ['EFSA 1 (Authors by vertebrates)']" [value]="type">
|
||||
<mat-label>{{ 'project-listing.add-edit-dialog.form.template' | translate }}</mat-label>
|
||||
<mat-select value="EFSA 1 (Vertebrate Authors)" style="width: 100%;">
|
||||
<mat-option *ngFor="let type of ['EFSA 1 (Vertebrate Authors)']" [value]="type">
|
||||
{{ type }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
@ -27,32 +27,38 @@
|
||||
<textarea formControlName="description" name="description" type="text" rows="5"></textarea>
|
||||
</div>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>{{ 'project-listing.add-edit-dialog.form.due-date' | translate }}</mat-label>
|
||||
<input matInput [matDatepicker]="picker" formControlName="dueDate" />
|
||||
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #picker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<div class="due-date">
|
||||
<mat-checkbox [checked]="hasDueDate" (change)="hasDueDate = !hasDueDate" class="filter-menu-checkbox" color="primary">
|
||||
{{ 'project-listing.add-edit-dialog.form.due-date' | translate }}
|
||||
</mat-checkbox>
|
||||
|
||||
<div class="red-input-group datepicker-wrapper" *ngIf="hasDueDate">
|
||||
<input placeholder="dd/mm/yy" [matDatepicker]="picker" formControlName="dueDate" />
|
||||
<mat-datepicker-toggle matSuffix [for]="picker">
|
||||
<mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
|
||||
</mat-datepicker-toggle>
|
||||
<mat-datepicker #picker></mat-datepicker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dialog-actions">
|
||||
<button
|
||||
[disabled]="projectForm.invalid"
|
||||
[disabled]="disabled || !changed"
|
||||
color="primary"
|
||||
mat-flat-button
|
||||
translate="project-listing.add-edit-dialog.actions.save"
|
||||
type="submit"
|
||||
></button>
|
||||
|
||||
<button
|
||||
[disabled]="projectForm.invalid"
|
||||
(click)="saveProjectAndAddMembers()"
|
||||
<redaction-icon-button
|
||||
[disabled]="disabled || !changed"
|
||||
(action)="saveProjectAndAddMembers()"
|
||||
*ngIf="!project?.projectId"
|
||||
color="primary"
|
||||
mat-flat-button
|
||||
translate="project-listing.add-edit-dialog.actions.save-and-add-members"
|
||||
type="button"
|
||||
></button>
|
||||
text="project-listing.add-edit-dialog.actions.save-and-add-members"
|
||||
icon="red:assign"
|
||||
type="show-bg"
|
||||
></redaction-icon-button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
@ -0,0 +1,14 @@
|
||||
@import '../../../assets/styles/red-variables';
|
||||
|
||||
.due-date {
|
||||
margin-top: 16px;
|
||||
min-height: 34px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
mat-checkbox {
|
||||
width: fit-content;
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
@ -1,31 +1,61 @@
|
||||
import { Component, Inject, OnInit } from '@angular/core';
|
||||
import { Component, Inject } from '@angular/core';
|
||||
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
|
||||
import { Project } from '@redaction/red-ui-http';
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
import { AppStateService } from '../../state/app-state.service';
|
||||
import { ProjectWrapper } from '../../state/model/project.wrapper';
|
||||
import * as moment from 'moment';
|
||||
|
||||
@Component({
|
||||
selector: 'redaction-add-edit-project-dialog',
|
||||
templateUrl: './add-edit-project-dialog.component.html',
|
||||
styleUrls: ['./add-edit-project-dialog.component.scss']
|
||||
})
|
||||
export class AddEditProjectDialogComponent implements OnInit {
|
||||
projectForm: FormGroup;
|
||||
export class AddEditProjectDialogComponent {
|
||||
public projectForm: FormGroup;
|
||||
public hasDueDate = true;
|
||||
|
||||
constructor(
|
||||
private readonly _appStateService: AppStateService,
|
||||
private readonly _formBuilder: FormBuilder,
|
||||
public dialogRef: MatDialogRef<AddEditProjectDialogComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public project: ProjectWrapper
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
) {
|
||||
this.projectForm = this._formBuilder.group({
|
||||
projectName: [this.project?.projectName, Validators.required],
|
||||
description: [this.project?.description],
|
||||
dueDate: [this.project?.dueDate]
|
||||
});
|
||||
this.hasDueDate = !!this.project?.dueDate;
|
||||
}
|
||||
|
||||
public get changed() {
|
||||
if (!this.project) {
|
||||
return true;
|
||||
}
|
||||
|
||||
for (const key of Object.keys(this.projectForm.getRawValue())) {
|
||||
if (key === 'dueDate') {
|
||||
if (this.hasDueDate !== !!this.project.dueDate) {
|
||||
return true;
|
||||
}
|
||||
if (this.hasDueDate && !moment(this.project.dueDate).isSame(moment(this.projectForm.get(key).value))) {
|
||||
return true;
|
||||
}
|
||||
} else if (this.project[key] !== this.projectForm.get(key).value) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
public get disabled() {
|
||||
if (this.hasDueDate && this.projectForm.get('dueDate').value === null) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return this.projectForm.invalid;
|
||||
}
|
||||
|
||||
async saveProject() {
|
||||
@ -47,7 +77,7 @@ export class AddEditProjectDialogComponent implements OnInit {
|
||||
return {
|
||||
projectName: this.projectForm.get('projectName').value,
|
||||
description: this.projectForm.get('description').value,
|
||||
dueDate: this.projectForm.get('dueDate').value
|
||||
dueDate: this.hasDueDate ? this.projectForm.get('dueDate').value : undefined
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<ng-container *ngIf="data.type === 'project'">
|
||||
<div class="all-caps-label" [translate]="'assign-' + data.type + '-owner.dialog.members'"></div>
|
||||
<div class="all-caps-label mt-10" [translate]="'assign-' + data.type + '-owner.dialog.members'"></div>
|
||||
<redaction-team-members
|
||||
[memberIds]="selectedUserList"
|
||||
[canAdd]="false"
|
||||
@ -22,6 +22,9 @@
|
||||
[canRemove]="true"
|
||||
(remove)="toggleSelected($event)"
|
||||
></redaction-team-members>
|
||||
|
||||
<pre *ngIf="selectedUserList.length === 0" class="info" [innerHTML]="'assign-' + data.type + '-owner.dialog.no-members' | translate"></pre>
|
||||
|
||||
<form [formGroup]="searchForm">
|
||||
<div class="red-input-group search-container">
|
||||
<input
|
||||
@ -49,7 +52,7 @@
|
||||
{{ 'assign-' + data.type + '-owner.dialog.save' | translate }}
|
||||
</button>
|
||||
|
||||
<div class="all-caps-label pointer" [translate]="'assign-' + data.type + '-owner.dialog.cancel'" mat-dialog-close></div>
|
||||
<div class="all-caps-label pointer cancel" [translate]="'assign-' + data.type + '-owner.dialog.cancel'" mat-dialog-close></div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
@import '../../../assets/styles/red-mixins';
|
||||
|
||||
.dialog-content {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
width: 560px;
|
||||
margin-top: 16px;
|
||||
@ -65,3 +69,11 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.mt-10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@ -18,7 +18,6 @@ export class IconsModule {
|
||||
'arrow-right',
|
||||
'assign',
|
||||
'assign-me',
|
||||
'back-arrow',
|
||||
'calendar',
|
||||
'check',
|
||||
'close',
|
||||
|
||||
@ -5,26 +5,41 @@
|
||||
</div>
|
||||
|
||||
<div class="dialog-content">
|
||||
<div class="red-input-group required w-300" *ngIf="!dictionary">
|
||||
<label translate="add-edit-dictionary.form.type"></label>
|
||||
<input formControlName="type" name="type" type="text" placeholder="{{ 'add-edit-dictionary.form.type-placeholder' | translate }}" />
|
||||
<div class="first-row">
|
||||
<div class="red-input-group required w-300">
|
||||
<label translate="add-edit-dictionary.form.name"></label>
|
||||
<input
|
||||
formControlName="type"
|
||||
name="type"
|
||||
type="text"
|
||||
[attr.disabled]="!!dictionary || null"
|
||||
placeholder="{{ 'add-edit-dictionary.form.name-placeholder' | translate }}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="red-input-group required w-150">
|
||||
<label translate="add-edit-dictionary.form.color"></label>
|
||||
<input
|
||||
class="hex-color-input"
|
||||
formControlName="hexColor"
|
||||
name="hexColor"
|
||||
type="text"
|
||||
placeholder="{{ 'add-edit-dictionary.form.color-placeholder' | translate }}"
|
||||
/>
|
||||
<div
|
||||
class="input-icon"
|
||||
[style.background]="dictionaryForm.get('hexColor').value"
|
||||
[colorPicker]="dictionaryForm.get('hexColor').value"
|
||||
[cpOutputFormat]="'hex'"
|
||||
(colorPickerChange)="dictionaryForm.get('hexColor').setValue($event)"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="red-input-group required w-150">
|
||||
<label translate="add-edit-dictionary.form.rank"></label>
|
||||
<input formControlName="rank" name="rank" type="number" placeholder="{{ 'add-edit-dictionary.form.rank-placeholder' | translate }}" />
|
||||
</div>
|
||||
<div class="red-input-group required w-150">
|
||||
<label translate="add-edit-dictionary.form.color"></label>
|
||||
<input formControlName="hexColor" name="hexColor" type="text" placeholder="{{ 'add-edit-dictionary.form.color-placeholder' | translate }}" />
|
||||
<div
|
||||
class="input-icon"
|
||||
[colorPicker]="dictionaryForm.get('hexColor').value"
|
||||
[cpOutputFormat]="'hex'"
|
||||
(colorPickerChange)="dictionaryForm.get('hexColor').setValue($event)"
|
||||
>
|
||||
<mat-icon svgIcon="red:color-picker"></mat-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="red-input-group slider-row">
|
||||
<mat-button-toggle-group name="hint" formControlName="hint" appearance="legacy">
|
||||
@ -34,18 +49,16 @@
|
||||
</div>
|
||||
|
||||
<div class="red-input-group">
|
||||
<mat-checkbox formControlName="caseSensitive" color="primary">
|
||||
<mat-checkbox name="caseSensitive" formControlName="caseSensitive" color="primary">
|
||||
{{ 'add-edit-dictionary.form.case-sensitive' | translate }}
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dialog-actions">
|
||||
<button [disabled]="dictionaryForm.invalid" color="primary" mat-flat-button translate="add-edit-dictionary.save" type="submit"></button>
|
||||
<button [disabled]="dictionaryForm.invalid || !changed" color="primary" mat-flat-button translate="add-edit-dictionary.save" type="submit"></button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<button (click)="dialogRef.close()" class="dialog-close" mat-icon-button>
|
||||
<mat-icon svgIcon="red:close"></mat-icon>
|
||||
</button>
|
||||
<redaction-circle-button icon="red:close" mat-dialog-close class="dialog-close"></redaction-circle-button>
|
||||
</section>
|
||||
|
||||
@ -2,21 +2,30 @@
|
||||
|
||||
.w-300 {
|
||||
max-width: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.w-150 {
|
||||
max-width: 150px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.first-row {
|
||||
display: flex;
|
||||
|
||||
> *:not(last-child) {
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.red-input-group {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.slider-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
> mat-slide-toggle {
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-button-toggle-checked {
|
||||
@ -24,3 +33,7 @@
|
||||
transition: background-color 0.25s ease;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.hex-color-input {
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
@ -12,7 +12,7 @@ import { TranslateService } from '@ngx-translate/core';
|
||||
templateUrl: './add-edit-dictionary-dialog.component.html',
|
||||
styleUrls: ['./add-edit-dictionary-dialog.component.scss']
|
||||
})
|
||||
export class AddEditDictionaryDialogComponent implements OnInit {
|
||||
export class AddEditDictionaryDialogComponent {
|
||||
dictionaryForm: FormGroup;
|
||||
|
||||
constructor(
|
||||
@ -23,21 +23,34 @@ export class AddEditDictionaryDialogComponent implements OnInit {
|
||||
private readonly _translateService: TranslateService,
|
||||
public dialogRef: MatDialogRef<AddEditDictionaryDialogComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public dictionary: TypeValue
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
) {
|
||||
this.dictionaryForm = this._formBuilder.group({
|
||||
type: [this.dictionary?.type, Validators.required],
|
||||
rank: [this.dictionary?.rank, Validators.required],
|
||||
hexColor: [this.dictionary?.hexColor, Validators.required],
|
||||
hexColor: [this.dictionary?.hexColor, [Validators.required, Validators.minLength(7)]],
|
||||
hint: [!!this.dictionary?.hint],
|
||||
caseSensitive: [this.dictionary ? !this.dictionary.caseInsensitive : false]
|
||||
caseSensitive: [this.dictCaseSensitive]
|
||||
});
|
||||
}
|
||||
|
||||
// edit mode, cannot change type value
|
||||
if (!!this.dictionary) {
|
||||
this.dictionaryForm.get('type').disable();
|
||||
public get dictCaseSensitive() {
|
||||
return this.dictionary ? !this.dictionary.caseInsensitive : false;
|
||||
}
|
||||
|
||||
public get changed(): boolean {
|
||||
if (!this.dictionary) return true;
|
||||
|
||||
for (const key of Object.keys(this.dictionaryForm.getRawValue())) {
|
||||
if (key === 'caseSensitive') {
|
||||
if (this.dictCaseSensitive !== this.dictionaryForm.get(key).value) {
|
||||
return true;
|
||||
}
|
||||
} else if (this.dictionary[key] !== this.dictionaryForm.get(key).value) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
async saveDictionary() {
|
||||
|
||||
@ -99,12 +99,7 @@
|
||||
text="dictionary-overview.save-changes"
|
||||
[primary]="true"
|
||||
></redaction-icon-button>
|
||||
<redaction-icon-button
|
||||
*ngIf="permissionsService.isAdmin()"
|
||||
(action)="revert()"
|
||||
text="dictionary-overview.revert-changes"
|
||||
[linkButton]="true"
|
||||
></redaction-icon-button>
|
||||
<div class="all-caps-label cancel" *ngIf="permissionsService.isAdmin()" (click)="revert()" translate="dictionary-overview.revert-changes"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -54,12 +54,7 @@
|
||||
text="rules-screen.save-changes"
|
||||
[primary]="true"
|
||||
></redaction-icon-button>
|
||||
<redaction-icon-button
|
||||
*ngIf="permissionsService.isAdmin()"
|
||||
(action)="revert()"
|
||||
text="rules-screen.revert-changes"
|
||||
[linkButton]="true"
|
||||
></redaction-icon-button>
|
||||
<div *ngIf="permissionsService.isAdmin()" (click)="revert()" translate="rules-screen.revert-changes" class="all-caps-label cancel"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
{{ 'watermark-screen.action.save' | translate }}
|
||||
</button>
|
||||
|
||||
<div class="all-caps-label pointer" (click)="revert()" [translate]="'watermark-screen.action.revert'"></div>
|
||||
<div class="all-caps-label pointer cancel" (click)="revert()" [translate]="'watermark-screen.action.revert'"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -46,7 +46,7 @@ export class WatermarkScreenComponent implements OnInit {
|
||||
this._loadViewer();
|
||||
}
|
||||
|
||||
public get changed() {
|
||||
public get changed(): boolean {
|
||||
for (const key of Object.keys(this._initialConfig)) {
|
||||
if (this._initialConfig[key] !== this.configForm.get(key).value) {
|
||||
return true;
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
*ngIf="settingsView"
|
||||
[routerLinkActiveOptions]="{ exact: true }"
|
||||
>
|
||||
<mat-icon svgIcon="red:collapse" class="transform-180"></mat-icon>
|
||||
<mat-icon svgIcon="red:expand"></mat-icon>
|
||||
{{ 'top-bar.navigation-items.back-to-projects' | translate }}
|
||||
</a>
|
||||
<mat-icon *ngIf="appStateService.activeProject" svgIcon="red:arrow-right"></mat-icon>
|
||||
|
||||
@ -103,7 +103,7 @@
|
||||
"description": "Description",
|
||||
"name": "Name",
|
||||
"due-date": "Due Date",
|
||||
"rule-set": "Rule Set"
|
||||
"template": "Project Template"
|
||||
},
|
||||
"actions": {
|
||||
"save": "Save",
|
||||
@ -358,7 +358,8 @@
|
||||
"members": "Members",
|
||||
"save": "Save Changes",
|
||||
"cancel": "Cancel",
|
||||
"search": "Search..."
|
||||
"search": "Search...",
|
||||
"no-members": "No members yet.\nSelect from the list below."
|
||||
}
|
||||
},
|
||||
"project-member-guard": {
|
||||
@ -487,8 +488,8 @@
|
||||
"new": "Create Dictionary"
|
||||
},
|
||||
"form": {
|
||||
"type": "Type",
|
||||
"type-placeholder": "Enter Type Name",
|
||||
"name": "Dictionary Name",
|
||||
"name-placeholder": "Enter Name",
|
||||
"rank": "Rank",
|
||||
"rank-placeholder": "1000",
|
||||
"color": "Hex Color",
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
<svg id="Capa_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
||||
viewBox="0 0 477.862 477.862" xml:space="preserve">
|
||||
<g fill="currentColor">
|
||||
<path d="M187.722,102.856V17.062C187.719,7.636,180.076-0.003,170.65,0c-4.834,0.001-9.44,2.053-12.676,5.644L4.375,176.311
|
||||
c-5.617,6.256-5.842,15.67-0.529,22.187l153.6,187.733c5.968,7.295,16.72,8.371,24.016,2.403c3.952-3.233,6.249-8.066,6.26-13.172
|
||||
v-85.043c134.827,4.386,218.965,62.02,256.888,175.787c2.326,6.96,8.841,11.653,16.179,11.656c0.92,0.003,1.84-0.072,2.748-0.222
|
||||
c8.256-1.347,14.319-8.479,14.319-16.845C477.855,259.818,356.87,112.174,187.722,102.856z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 641 B |
@ -22,8 +22,7 @@
|
||||
align-items: center;
|
||||
|
||||
mat-icon {
|
||||
margin-right: 4px;
|
||||
color: $primary;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -18,6 +18,10 @@
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&.mat-button-disabled {
|
||||
background-color: $grey-6 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.cdk-program-focused .mat-button-focus-overlay {
|
||||
|
||||
@ -36,7 +36,3 @@
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.transform-180 {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
@ -17,11 +17,11 @@
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
padding: 32px 32px 16px 32px;
|
||||
padding: 32px 32px 0 32px;
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
padding: 0 32px;
|
||||
padding: 24px 32px 40px;
|
||||
}
|
||||
|
||||
.dialog-actions {
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
.red-input-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 13px;
|
||||
margin-top: 24px;
|
||||
position: relative;
|
||||
|
||||
.input-icon {
|
||||
@ -12,14 +12,11 @@
|
||||
right: 1px;
|
||||
bottom: 1px;
|
||||
background: $grey-5;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border: 1px solid $grey-5;
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
border-left: 1px solid $grey-5;
|
||||
border-top-right-radius: 7px;
|
||||
border-bottom-right-radius: 7px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.25s ease;
|
||||
|
||||
@ -126,4 +123,36 @@
|
||||
content: ' *';
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
&.datepicker-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin-top: 0;
|
||||
width: 120px;
|
||||
|
||||
.mat-datepicker-input {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.mat-datepicker-toggle {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
color: $accent;
|
||||
|
||||
&.mat-datepicker-toggle-active {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.mat-icon-button {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
width: 14px;
|
||||
height: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,6 +11,11 @@ a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: Inter, sans-serif;
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
.heading-xl {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
@ -29,6 +34,12 @@ a {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.info {
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
@ -44,6 +55,11 @@ a {
|
||||
font-weight: 600;
|
||||
letter-spacing: 0;
|
||||
line-height: 14px;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
&.cancel:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.small-label {
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
@import 'red-list';
|
||||
@import 'red-checkbox';
|
||||
@import 'red-toggle';
|
||||
@import 'red-toggle-button';
|
||||
@import 'red-menu';
|
||||
@import 'red-media-queries';
|
||||
@import 'red-tables';
|
||||
|
||||
14
apps/red-ui/src/assets/styles/red-toggle-button.scss
Normal file
14
apps/red-ui/src/assets/styles/red-toggle-button.scss
Normal file
@ -0,0 +1,14 @@
|
||||
@import './red-variables';
|
||||
|
||||
.mat-button-toggle-standalone,
|
||||
.mat-button-toggle-group {
|
||||
border-radius: 100px !important;
|
||||
box-shadow: none;
|
||||
|
||||
.mat-button-toggle:not(.mat-button-toggle-checked) {
|
||||
.mat-button-toggle-button {
|
||||
background: $grey-6;
|
||||
color: $grey-7;
|
||||
}
|
||||
}
|
||||
}
|
||||
207
package.json
207
package.json
@ -1,106 +1,107 @@
|
||||
{
|
||||
"name": "redaction",
|
||||
"version": "0.0.230",
|
||||
"private": true,
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"affected": "nx affected",
|
||||
"affected:apps": "nx affected:apps",
|
||||
"affected:build": "nx affected:build",
|
||||
"affected:dep-graph": "nx affected:dep-graph",
|
||||
"affected:e2e": "nx affected:e2e",
|
||||
"affected:libs": "nx affected:libs",
|
||||
"affected:lint": "nx affected:lint",
|
||||
"affected:test": "nx affected:test",
|
||||
"build": "nx build",
|
||||
"build-lint-all": "ng lint --project=red-ui-http --fix && ng build --project=red-ui-http && ng lint --project=red-ui --fix && ng build --project=red-ui --prod",
|
||||
"dep-graph": "nx dep-graph",
|
||||
"e2e": "nx e2e",
|
||||
"format": "nx format:write",
|
||||
"format:check": "nx format:check",
|
||||
"format:write": "nx format:write",
|
||||
"help": "nx help",
|
||||
"postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points",
|
||||
"lint": "nx workspace-lint && nx lint",
|
||||
"nx": "nx",
|
||||
"start": "nx serve",
|
||||
"test": "nx test",
|
||||
"update": "nx migrate latest",
|
||||
"workspace-schematic": "nx workspace-schematic"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "pretty-quick --staged && ng lint --project=red-ui-http && ng lint --project=red-ui --fix"
|
||||
"name": "redaction",
|
||||
"version": "0.0.230",
|
||||
"private": true,
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"affected": "nx affected",
|
||||
"affected:apps": "nx affected:apps",
|
||||
"affected:build": "nx affected:build",
|
||||
"affected:dep-graph": "nx affected:dep-graph",
|
||||
"affected:e2e": "nx affected:e2e",
|
||||
"affected:libs": "nx affected:libs",
|
||||
"affected:lint": "nx affected:lint",
|
||||
"affected:test": "nx affected:test",
|
||||
"build": "nx build",
|
||||
"build-lint-all": "ng lint --project=red-ui-http --fix && ng build --project=red-ui-http && ng lint --project=red-ui --fix && ng build --project=red-ui --prod",
|
||||
"dep-graph": "nx dep-graph",
|
||||
"e2e": "nx e2e",
|
||||
"format": "nx format:write",
|
||||
"format:check": "nx format:check",
|
||||
"format:write": "nx format:write",
|
||||
"help": "nx help",
|
||||
"postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points",
|
||||
"lint": "nx workspace-lint && nx lint",
|
||||
"nx": "nx",
|
||||
"start": "nx serve",
|
||||
"test": "nx test",
|
||||
"update": "nx migrate latest",
|
||||
"workspace-schematic": "nx workspace-schematic"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "pretty-quick --staged && ng lint --project=red-ui-http && ng lint --project=red-ui --fix"
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular/animations": "~11.0.1",
|
||||
"@angular/cdk": "~11.0.1",
|
||||
"@angular/common": "~11.0.1",
|
||||
"@angular/compiler": "~11.0.1",
|
||||
"@angular/core": "~11.0.1",
|
||||
"@angular/forms": "~11.0.1",
|
||||
"@angular/material": "~11.0.1",
|
||||
"@angular/material-moment-adapter": "^11.0.2",
|
||||
"@angular/platform-browser": "~11.0.1",
|
||||
"@angular/platform-browser-dynamic": "~11.0.1",
|
||||
"@angular/router": "~11.0.1",
|
||||
"@angular/service-worker": "~11.0.1",
|
||||
"@ngx-translate/core": "^13.0.0",
|
||||
"@ngx-translate/http-loader": "^6.0.0",
|
||||
"@nrwl/angular": "^10.2.0",
|
||||
"@pdftron/webviewer": "^7.0.1",
|
||||
"file-saver": "^2.0.2",
|
||||
"jwt-decode": "^3.0.0",
|
||||
"keycloak-angular": "^8.0.1",
|
||||
"keycloak-js": "10.0.2",
|
||||
"lint-staged": "^10.5.0",
|
||||
"ng2-ace-editor": "^0.3.9",
|
||||
"ng2-file-upload": "^1.4.0",
|
||||
"ngp-sort-pipe": "^0.0.4",
|
||||
"ngx-color-picker": "^10.1.0",
|
||||
"ngx-dropzone": "^2.2.2",
|
||||
"ngx-toastr": "^13.0.0",
|
||||
"rxjs": "~6.6.0",
|
||||
"scroll-into-view-if-needed": "^2.2.26",
|
||||
"tslib": "^2.0.0",
|
||||
"zone.js": "~0.10.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "~0.1100.2",
|
||||
"@angular-devkit/build-ng-packagr": "~0.1002.0",
|
||||
"@angular/cli": "~11.0.2",
|
||||
"@angular/compiler": "~11.0.1",
|
||||
"@angular/compiler-cli": "~11.0.1",
|
||||
"@angular/language-service": "~11.0.2",
|
||||
"@nrwl/cypress": "10.2.0",
|
||||
"@nrwl/jest": "10.2.0",
|
||||
"@nrwl/workspace": "10.2.0",
|
||||
"@types/cypress": "^1.1.3",
|
||||
"@types/jasmine": "~3.6.0",
|
||||
"@types/jest": "26.0.8",
|
||||
"@types/node": "^12.11.1",
|
||||
"codelyzer": "^6.0.0",
|
||||
"cypress": "^5.6.0",
|
||||
"cypress-file-upload": "^4.1.1",
|
||||
"cypress-keycloak": "^1.5.0",
|
||||
"cypress-keycloak-commands": "^1.2.0",
|
||||
"cypress-localstorage-commands": "^1.2.4",
|
||||
"dotenv": "6.2.0",
|
||||
"eslint": "6.8.0",
|
||||
"google-translate-api-browser": "^1.1.71",
|
||||
"husky": "^4.3.0",
|
||||
"jest": "26.2.2",
|
||||
"jest-preset-angular": "8.2.1",
|
||||
"lodash": "^4.17.20",
|
||||
"moment": "^2.29.1",
|
||||
"ng-packagr": "^10.1.2",
|
||||
"prettier": "2.0.4",
|
||||
"pretty-quick": "^3.1.0",
|
||||
"superagent": "^6.1.0",
|
||||
"superagent-promise": "^1.1.0",
|
||||
"ts-jest": "26.1.4",
|
||||
"ts-node": "~8.3.0",
|
||||
"tslint": "~6.1.0",
|
||||
"typescript": "~4.0.2"
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular/animations": "~11.0.1",
|
||||
"@angular/cdk": "~11.0.1",
|
||||
"@angular/common": "~11.0.1",
|
||||
"@angular/compiler": "~11.0.1",
|
||||
"@angular/core": "~11.0.1",
|
||||
"@angular/forms": "~11.0.1",
|
||||
"@angular/material": "~11.0.1",
|
||||
"@angular/platform-browser": "~11.0.1",
|
||||
"@angular/platform-browser-dynamic": "~11.0.1",
|
||||
"@angular/router": "~11.0.1",
|
||||
"@angular/service-worker": "~11.0.1",
|
||||
"@ngx-translate/core": "^13.0.0",
|
||||
"@ngx-translate/http-loader": "^6.0.0",
|
||||
"@nrwl/angular": "^10.2.0",
|
||||
"@pdftron/webviewer": "^7.0.1",
|
||||
"file-saver": "^2.0.2",
|
||||
"jwt-decode": "^3.0.0",
|
||||
"keycloak-angular": "^8.0.1",
|
||||
"keycloak-js": "10.0.2",
|
||||
"lint-staged": "^10.5.0",
|
||||
"ng2-ace-editor": "^0.3.9",
|
||||
"ng2-file-upload": "^1.4.0",
|
||||
"ngp-sort-pipe": "^0.0.4",
|
||||
"ngx-color-picker": "^10.1.0",
|
||||
"ngx-dropzone": "^2.2.2",
|
||||
"ngx-toastr": "^13.0.0",
|
||||
"rxjs": "~6.6.0",
|
||||
"scroll-into-view-if-needed": "^2.2.26",
|
||||
"tslib": "^2.0.0",
|
||||
"zone.js": "~0.10.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "~0.1100.2",
|
||||
"@angular-devkit/build-ng-packagr": "~0.1002.0",
|
||||
"@angular/cli": "~11.0.2",
|
||||
"@angular/compiler": "~11.0.1",
|
||||
"@angular/compiler-cli": "~11.0.1",
|
||||
"@angular/language-service": "~11.0.2",
|
||||
"@nrwl/cypress": "10.2.0",
|
||||
"@nrwl/jest": "10.2.0",
|
||||
"@nrwl/workspace": "10.2.0",
|
||||
"@types/cypress": "^1.1.3",
|
||||
"@types/jasmine": "~3.6.0",
|
||||
"@types/jest": "26.0.8",
|
||||
"@types/node": "^12.11.1",
|
||||
"codelyzer": "^6.0.0",
|
||||
"cypress": "^5.6.0",
|
||||
"cypress-file-upload": "^4.1.1",
|
||||
"cypress-keycloak": "^1.5.0",
|
||||
"cypress-keycloak-commands": "^1.2.0",
|
||||
"cypress-localstorage-commands": "^1.2.4",
|
||||
"dotenv": "6.2.0",
|
||||
"eslint": "6.8.0",
|
||||
"google-translate-api-browser": "^1.1.71",
|
||||
"husky": "^4.3.0",
|
||||
"jest": "26.2.2",
|
||||
"jest-preset-angular": "8.2.1",
|
||||
"lodash": "^4.17.20",
|
||||
"moment": "^2.29.1",
|
||||
"ng-packagr": "^10.1.2",
|
||||
"prettier": "2.0.4",
|
||||
"pretty-quick": "^3.1.0",
|
||||
"superagent": "^6.1.0",
|
||||
"superagent-promise": "^1.1.0",
|
||||
"ts-jest": "26.1.4",
|
||||
"ts-node": "~8.3.0",
|
||||
"tslint": "~6.1.0",
|
||||
"typescript": "~4.0.2"
|
||||
}
|
||||
}
|
||||
|
||||
@ -286,6 +286,13 @@
|
||||
resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-11.0.2.tgz#b9a97a9bdd3d10ac2335eb94bacf8ab5514aeeb5"
|
||||
integrity sha512-Cfam/NEP8hKkcqBVGlkBVuPkojZukmVOxdtsFIkIjJW/mywad2lIfjHR/0rZ43jD1bPb7s+tyYcJBgNg42p2ng==
|
||||
|
||||
"@angular/material-moment-adapter@^11.0.2":
|
||||
version "11.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@angular/material-moment-adapter/-/material-moment-adapter-11.0.2.tgz#73afa45174385ece6a1cc9228ebf59ef78963cd2"
|
||||
integrity sha512-/GkNJJuNziFEKU+fC6BJQmXGuWMgJcRalVA5oLotinbaVg1+GgH3eagbB2lVmSpxTDWTecr3D+K1H0ckTAeHRA==
|
||||
dependencies:
|
||||
tslib "^2.0.0"
|
||||
|
||||
"@angular/material@~11.0.1":
|
||||
version "11.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@angular/material/-/material-11.0.1.tgz#add0e87d3e01d7d20484ea5a90d15439ec31a1d6"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user