Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

Add / edit dictionary dialog update

Browse Source
This commit is contained in:
Adina Țeudan 2020-12-11 16:19:15 +02:00
parent 5c284096af
commit 430807b487
14 changed files with 100 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/red-ui/src/app/icons/icons.module.ts
View File

@ -18,7 +18,6 @@ export class IconsModule {
'arrow-right',
'assign',
'assign-me',
'back-arrow',
'calendar',
'check',
'close',

53
apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html
View File

@ -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>

23
apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss
View File

@ -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;
}

31
apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts
View File

@ -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() {

2
apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.ts
View File

@ -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;

2
apps/red-ui/src/app/screens/base-screen/base-screen.component.html
View File

@ -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>

4
apps/red-ui/src/assets/i18n/en.json
View File

@ -487,8 +487,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",

9
apps/red-ui/src/assets/icons/general/back-arrow.svg
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 641 B

3
apps/red-ui/src/assets/styles/red-breadcrumbs.scss
View File

@ -22,8 +22,7 @@
align-items: center;
mat-icon {
margin-right: 4px;
color: $primary;
margin-right: 8px;
}
}

4
apps/red-ui/src/assets/styles/red-controls.scss
View File

@ -36,7 +36,3 @@
width: 10px;
height: 10px;
}
.transform-180 {
transform: rotate(180deg);
}

4
apps/red-ui/src/assets/styles/red-dialog.scss
View File

@ -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 {

13
apps/red-ui/src/assets/styles/red-input.scss
View File

@ -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;

1
apps/red-ui/src/assets/styles/red-theme.scss
View File

@ -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
View 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;
}
}
}