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

Pull request #73: Ui updates

Browse Source 
Merge in RED/ui from ui-updates to master

* commit '9981bedce5f0145f2abeef464c3af95de3ad3c54':
  Assign file reviewer updates
  UI updates
This commit is contained in:
Timo Bejan 2020-12-17 08:42:59 +01:00
commit 5577f74807
19 changed files with 261 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html
View File

@ -6,7 +6,7 @@
></div>
<div class="dialog-content">
<div class="red-input-group required">
<div class="red-input-group required w-300">
<label translate="project-listing.add-edit-dialog.form.name.label"></label>
<input
formControlName="projectName"
@ -16,7 +16,7 @@
/>
</div>
<div class="red-input-group required">
<div class="red-input-group required w-400">
<mat-form-field floatLabel="always">
<mat-label>{{ 'project-listing.add-edit-dialog.form.template' | translate }}</mat-label>
<mat-select value="EFSA 1 (Vertebrate Authors)" style="width: 100%;" [disabled]="project?.hasFiles">
@ -27,7 +27,7 @@
</mat-form-field>
</div>
<div class="red-input-group">
<div class="red-input-group w-400">
<label translate="project-listing.add-edit-dialog.form.description.label"></label>
<textarea
redactionHasScrollbar

4
apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.html
View File

@ -3,10 +3,10 @@
<form (submit)="saveUsers()" [formGroup]="usersForm">
<div class="dialog-content" [class.no-padding-bottom]="data.type === 'project'">
<div class="red-input-group">
<div class="red-input-group w-300">
<mat-form-field floatLabel="always">
<mat-label>{{ 'assign-' + data.type + '-owner.dialog.single-user' | translate }}</mat-label>
<mat-select formControlName="singleUser" class="w-300">
<mat-select formControlName="singleUser">
<mat-option *ngFor="let userId of singleUsersSelectOptions" [value]="userId">
{{ userService.getNameForId(userId) }}
</mat-option>

10
apps/red-ui/src/app/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
View File

@ -16,7 +16,7 @@
</div>
</ng-container>
<div class="red-input-group required" *ngIf="!isDictionaryRequest">
<div class="red-input-group required w-400" *ngIf="!isDictionaryRequest">
<label translate="manual-annotation.dialog.content.reason"></label>
<mat-select formControlName="reason" class="full-width" [placeholder]="'manual-annotation.dialog.content.reason-placeholder' | translate">
<mat-option *ngFor="let option of legalOptions" [value]="option">
@ -25,17 +25,17 @@
</mat-select>
</div>
<div class="red-input-group" *ngIf="!isDictionaryRequest">
<div class="red-input-group w-400" *ngIf="!isDictionaryRequest">
<label translate="manual-annotation.dialog.content.legalBasis"></label>
<input type="text" [value]="redactionForm.get('reason').value?.legalBasis" disabled />
</div>
<div class="red-input-group" [class.required]="!isDocumentAdmin">
<div class="red-input-group w-300" [class.required]="!isDocumentAdmin">
<label translate="manual-annotation.dialog.content.comment"></label>
<textarea redactionHasScrollbar class="w-300" formControlName="comment" name="comment" type="text" rows="4"></textarea>
<textarea redactionHasScrollbar formControlName="comment" name="comment" type="text" rows="4"></textarea>
</div>
<div class="red-input-group required" *ngIf="isDictionaryRequest && !isFalsePositiveRequest">
<div class="red-input-group required w-300" *ngIf="isDictionaryRequest && !isFalsePositiveRequest">
<label translate="manual-annotation.dialog.content.dictionary"></label>
<mat-select formControlName="dictionary">

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

@ -1,9 +1,9 @@
<section class="dialog">
<form (submit)="saveDictionary()" [formGroup]="dictionaryForm">
<div class="dialog-header heading-l">
{{ (dictionary ? 'add-edit-dictionary.title.edit' : 'add-edit-dictionary.title.new') | translate: { name: dictionary?.type | humanize } }}
</div>
<div class="dialog-header heading-l">
{{ (dictionary ? 'add-edit-dictionary.title.edit' : 'add-edit-dictionary.title.new') | translate: { name: dictionary?.type | humanize } }}
</div>
<form (submit)="saveDictionary()" [formGroup]="dictionaryForm">
<div class="dialog-content">
<ng-container *ngIf="!!dictionary">
<div class="red-input-group mb-14">
@ -19,15 +19,9 @@
<span class="hint" translate="add-edit-dictionary.form.name-hint"></span>
</div>
<div class="red-input-group required">
<div class="red-input-group required w-75">
<label translate="add-edit-dictionary.form.rank"></label>
<input
formControlName="rank"
class="w-75"
name="rank"
type="number"
placeholder="{{ 'add-edit-dictionary.form.rank-placeholder' | translate }}"
/>
<input formControlName="rank" name="rank" type="number" placeholder="{{ 'add-edit-dictionary.form.rank-placeholder' | translate }}" />
</div>
<div class="red-input-group required">

47
apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html
View File

@ -52,30 +52,37 @@
<div class="flex red-content-inner">
<div class="left-container">
<div class="red-input-group">
<input
[class.with-matches]="searchText.length > 0"
type="text"
[(ngModel)]="searchText"
(keyup)="searchChanged(searchText)"
#inputElement
placeholder="{{ 'dictionary-overview.search' | translate }}"
/>
<div class="actions-bar">
<div class="red-input-group flex-1 mr-32">
<input
[class.with-matches]="searchText.length > 0"
type="text"
[(ngModel)]="searchText"
(keyup)="searchChanged(searchText)"
#inputElement
placeholder="{{ 'dictionary-overview.search' | translate }}"
/>
<div class="input-icons">
<div class="no-input" *ngIf="searchText.length === 0">
<mat-icon svgIcon="red:search"></mat-icon>
</div>
<div class="with-input" *ngIf="searchText.length > 0">
<div class="search-match-text">
{{ currentMatch + '/' + searchPositions.length }}
<div class="input-icons">
<div class="no-input" *ngIf="searchText.length === 0">
<mat-icon svgIcon="red:search"></mat-icon>
</div>
<div class="with-input" *ngIf="searchText.length > 0">
<div class="search-match-text">
{{ currentMatch + '/' + searchPositions.length }}
</div>
<mat-icon svgIcon="red:arrow-up" class="pointer" (click)="previousSearchMatch()"></mat-icon>
<mat-icon svgIcon="red:arrow-down" class="pointer" (click)="nextSearchMatch()"></mat-icon>
<mat-icon svgIcon="red:close" (click)="searchChanged(''); inputElement.focus()" class="pointer"></mat-icon>
</div>
<mat-icon svgIcon="red:arrow-up" class="pointer" (click)="previousSearchMatch()"></mat-icon>
<mat-icon svgIcon="red:arrow-down" class="pointer" (click)="nextSearchMatch()"></mat-icon>
<mat-icon svgIcon="red:close" (click)="searchChanged(''); inputElement.focus()" class="pointer"></mat-icon>
</div>
</div>
<div class="red-input-group mr-16">
<mat-checkbox [(ngModel)]="compareActive" color="primary"> {{ 'dictionary-overview.compare' | translate }} </mat-checkbox>
</div>
<div class="flex-1"></div>
</div>
<div class="editor-container">
<ace-editor
#editorComponent
@ -94,7 +101,7 @@
<div class="changes-box" *ngIf="hasChanges">
<redaction-icon-button
*ngIf="permissionsService.isAdmin()"
icon="red:check"
icon="red:check-alt"
(action)="saveEntries()"
text="dictionary-overview.save-changes"
type="primary"

80
apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.scss
View File

@ -13,6 +13,52 @@
width: calc(100vw - 353px);
padding: 15px;
@include inset-shadow;
.actions-bar {
display: flex;
align-items: center;
margin-bottom: 16px;
.mr-32 {
margin-right: 32px;
}
.mr-16 {
margin-right: 16px;
//opacity: 0; // TODO: Hidden for now
}
.red-input-group {
input {
padding-right: 32px;
&.with-matches {
padding-right: 108px;
}
}
.input-icons {
position: absolute;
right: 12px;
top: 8px;
color: $grey-1;
.with-input {
display: flex;
justify-content: center;
align-items: center;
.search-match-text {
}
}
mat-icon {
max-width: 14px;
margin-left: 8px;
}
}
}
}
}
.right-container {
@ -42,37 +88,3 @@
margin-right: 8px;
}
}
.red-input-group {
margin-bottom: 16px;
max-width: 300px;
input {
padding-right: 32px;
&.with-matches {
padding-right: 108px;
}
}
.input-icons {
position: absolute;
right: 12px;
top: 8px;
color: $grey-1;
.with-input {
display: flex;
justify-content: center;
align-items: center;
.search-match-text {
}
}
mat-icon {
max-width: 14px;
margin-left: 8px;
}
}
}

1
apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.ts
View File

@ -20,6 +20,7 @@ declare var ace;
})
export class DictionaryOverviewScreenComponent {
static readonly MIN_WORD_LENGTH: number = 3;
public compareActive = false;
@ViewChild('editorComponent')
editorComponent: AceEditorComponent;

10
apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html
View File

@ -23,7 +23,7 @@
<div class="right-container">
<div class="heading-xl" [translate]="'watermark-screen.title'"></div>
<form [formGroup]="configForm" (keyup)="configChanged()">
<div class="red-input-group required">
<div class="red-input-group required w-300">
<label translate="watermark-screen.form.text"></label>
<textarea
redactionHasScrollbar
@ -58,14 +58,14 @@
</div>
</div>
<div class="red-input-group required">
<div class="red-input-group required w-75">
<label translate="watermark-screen.form.opacity"></label>
<input class="w-75" formControlName="opacity" name="opacity" type="number" (change)="configChanged()" />
<input formControlName="opacity" name="opacity" type="number" (change)="configChanged()" />
</div>
<div class="red-input-group required">
<div class="red-input-group required w-75">
<label translate="watermark-screen.form.font-size"></label>
<input class="w-75" formControlName="fontSize" name="fontSize" type="number" (change)="configChanged()" />
<input formControlName="fontSize" name="fontSize" type="number" (change)="configChanged()" />
</div>
</form>

74
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
View File

@ -26,31 +26,77 @@
[small]="true"
>
</redaction-status-bar>
<div class="all-caps-label mr-16 ml-8">{{ appStateService.activeFile.status.toLowerCase().replace('_', '-') | translate }}</div>
<redaction-initials-avatar
[userId]="appStateService.activeFile.currentReviewer"
[withName]="!!appStateService.activeFile.currentReviewer"
></redaction-initials-avatar>
<div
(click)="assignReviewer()"
*ngIf="!appStateService.activeFile.currentReviewer && permissionsService.canAssignReviewer(appStateService.activeFile)"
class="assign-reviewer pointer"
translate="file-preview.assign-reviewer"
></div>
<div class="all-caps-label mr-16 ml-8">
{{ appStateService.activeFile.status.toLowerCase().replace('_', '-') | translate }}
<span *ngIf="appStateService.activeFile.status === 'UNDER_REVIEW' || appStateService.activeFile.status === 'UNDER_APPROVAL'"
>{{ 'by' | translate }}:</span
>
</div>
<ng-container *ngIf="!editingReviewer">
<redaction-initials-avatar
*ngIf="!editingReviewer"
[userId]="appStateService.activeFile.currentReviewer"
[withName]="!!appStateService.activeFile.currentReviewer"
></redaction-initials-avatar>
<div
(click)="editingReviewer = true"
*ngIf="!editingReviewer && !appStateService.activeFile.currentReviewer && permissionsService.canAssignReviewer(appStateService.activeFile)"
class="assign-reviewer pointer"
translate="file-preview.assign-reviewer"
></div>
</ng-container>
<ng-container *ngIf="editingReviewer">
<form [formGroup]="reviewerForm">
<div class="red-input-group w-250">
<mat-select formControlName="reviewer">
<mat-select-trigger>
<redaction-initials-avatar
size="small"
[userId]="reviewerForm.get('reviewer').value"
[withName]="true"
></redaction-initials-avatar>
</mat-select-trigger>
<mat-option *ngFor="let reviewerId of this.appStateService.activeProject.memberIds" [value]="reviewerId">
<redaction-initials-avatar size="small" [userId]="reviewerId" [withName]="true"></redaction-initials-avatar>
</mat-option>
</mat-select>
</div>
</form>
</ng-container>
<div *ngIf="permissionsService.canAssignReviewer(appStateService.activeFile)" class="assign-actions-wrapper">
<redaction-circle-button
(action)="assignReviewer()"
*ngIf="permissionsService.canAssignReviewer(appStateService.activeFile) && appStateService.activeFile.currentReviewer"
(action)="editingReviewer = true"
*ngIf="!editingReviewer && permissionsService.canAssignReviewer(appStateService.activeFile) && appStateService.activeFile.currentReviewer"
icon="red:edit"
tooltip="file-preview.assign-reviewer"
tooltipPosition="below"
>
</redaction-circle-button>
<redaction-circle-button
(action)="assignReviewer()"
*ngIf="editingReviewer"
icon="red:check-alt"
tooltip="file-preview.save-assign-reviewer"
tooltipPosition="below"
>
</redaction-circle-button>
<redaction-circle-button
(action)="editingReviewer = false; resetReviewerForm()"
*ngIf="editingReviewer"
icon="red:close"
tooltip="file-preview.cancel-assign-reviewer"
tooltipPosition="below"
>
</redaction-circle-button>
<redaction-circle-button
(action)="assignToMe()"
*ngIf="permissionsService.canAssignReviewer(appStateService.activeFile) && !permissionsService.isFileReviewer()"
*ngIf="!editingReviewer && permissionsService.canAssignReviewer(appStateService.activeFile) && !permissionsService.isFileReviewer()"
icon="red:assign-me"
tooltip="file-preview.assign-me"
tooltipPosition="below"

1
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
View File

@ -17,6 +17,7 @@
display: flex;
justify-content: flex-end;
align-items: center;
min-width: fit-content;
}
.left-container {

39
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
View File

@ -25,6 +25,9 @@ import { PermissionsService } from '../../../common/service/permissions.service'
import { Subscription, timer } from 'rxjs';
import { processFilters } from '../../../common/filter/utils/filter-utils';
import { UserPreferenceService } from '../../../common/service/user-preference.service';
import { UserService } from '../../../user/user.service';
import { FormBuilder, FormGroup } from '@angular/forms';
import { StatusControllerService } from '@redaction/red-ui-http';
const KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'f', 'F'];
@ -39,6 +42,8 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
private instance: WebViewerInstance;
private _dialogRef: MatDialogRef<any>;
public fullScreen = false;
public editingReviewer = false;
public reviewerForm: FormGroup;
@ViewChild(PdfViewerComponent) private _viewerComponent: PdfViewerComponent;
@ViewChild('annotationsElement') private _annotationsElement: ElementRef;
@ -61,6 +66,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
public readonly appStateService: AppStateService,
public readonly permissionsService: PermissionsService,
public readonly userPreferenceService: UserPreferenceService,
public readonly userService: UserService,
private readonly _changeDetectorRef: ChangeDetectorRef,
private readonly _activatedRoute: ActivatedRoute,
private readonly _dialogService: DialogService,
@ -72,12 +78,18 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
private readonly _fileActionService: FileActionService,
private readonly _manualAnnotationService: ManualAnnotationService,
private readonly _fileDownloadService: FileDownloadService,
private readonly _formBuilder: FormBuilder,
private readonly _statusControllerService: StatusControllerService,
private ngZone: NgZone
) {
this._activatedRoute.params.subscribe((params) => {
this.projectId = params.projectId;
this.fileId = params.fileId;
this.appStateService.activateFile(this.projectId, this.fileId);
this.reviewerForm = this._formBuilder.group({
reviewer: [this.appStateService.activeFile.currentReviewer]
});
});
}
@ -501,16 +513,31 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
return this.fileData ? (this.redactedView ? this.fileData.redactedFileData : this.fileData.annotatedFileData) : null;
}
public assignReviewer() {
this._fileActionService.assignProjectReviewer(this.fileData.fileStatus, async () => {
public async assignToMe() {
await this._fileActionService.assignToMe(this.fileData.fileStatus, async () => {
await this.appStateService.reloadActiveFile();
this.resetReviewerForm();
this._updateCanPerformActions();
});
}
public async assignToMe() {
await this._fileActionService.assignToMe(this.fileData.fileStatus, async () => {
this._updateCanPerformActions();
});
public assignReviewer() {
const reviewerId = this.reviewerForm.get('reviewer').value;
this._statusControllerService
.assignProjectOwner(this.fileData.fileStatus.projectId, this.fileData.fileStatus.fileId, reviewerId)
.subscribe(async () => {
this._notificationService.showToastNotification(
'Successfully assigned ' + this.userService.getNameForId(reviewerId) + ' to file: ' + this.fileData.fileStatus.filename
);
await this.appStateService.reloadActiveFile();
this._updateCanPerformActions();
this.editingReviewer = false;
});
}
public resetReviewerForm() {
this.reviewerForm.setValue({ reviewer: this.appStateService.activeFile.currentReviewer });
}
pageSelectedByClick($event: number) {

4
apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
View File

@ -22,8 +22,8 @@
[icon]="'red:needs-work'"
></redaction-filter>
<form [formGroup]="searchForm">
<div class="red-input-group">
<input [placeholder]="'project-listing.search' | translate" class="w-250 with-icon mt-0" formControlName="query" name="query" type="text" />
<div class="red-input-group w-250">
<input [placeholder]="'project-listing.search' | translate" class="with-icon mt-0" formControlName="query" name="query" type="text" />
<mat-icon class="icon-right" svgIcon="red:search"></mat-icon>
</div>
</form>

2
apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts
View File

@ -64,6 +64,7 @@ export class ProjectListingScreenComponent implements OnInit, OnDestroy {
private readonly _formBuilder: FormBuilder,
private readonly _fileManagementControllerService: FileManagementControllerService
) {
this.appStateService.reset();
this.searchForm = this._formBuilder.group({
query: ['']
});
@ -72,7 +73,6 @@ export class ProjectListingScreenComponent implements OnInit, OnDestroy {
}
public ngOnInit(): void {
this.appStateService.reset();
this.projectAutoUpdateTimer = timer(0, 10000)
.pipe(
tap(async () => {

10
apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
View File

@ -22,14 +22,8 @@
[icon]="'red:needs-work'"
></redaction-filter>
<form [formGroup]="searchForm">
<div class="red-input-group">
<input
[placeholder]="'project-overview.search' | translate"
formControlName="query"
name="query"
type="text"
class="w-250 with-icon mt-0"
/>
<div class="red-input-group w-250">
<input [placeholder]="'project-overview.search' | translate" formControlName="query" name="query" type="text" class="with-icon mt-0" />
<mat-icon class="icon-right" svgIcon="red:search"></mat-icon>
</div>
</form>

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

@ -274,6 +274,8 @@
"reviewer": "Assigned to",
"unassigned": "Unassigned",
"assign-reviewer": "Assign Reviewer",
"cancel-assign-reviewer": "Cancel",
"save-assign-reviewer": "Save",
"assign-me": "Assign to me",
"last-reviewer": "Last Reviewed by:",
"fullscreen": "Full Screen (F)",
@ -402,6 +404,7 @@
"unassigned": "Unassigned",
"under-review": "Under Review",
"under-approval": "Under Approval",
"by": "by",
"efsa": "EFSA Approval",
"finished": "Finished",
"approved": "Approved",
@ -560,7 +563,8 @@
},
"search": "Search...",
"save-changes": "Save Changes",
"revert-changes": "Revert"
"revert-changes": "Revert",
"compare": "Compare"
},
"dictionary-listing": {
"action": {

20
apps/red-ui/src/assets/icons/general/case-sensitive.svg
View File

@ -1,10 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Case Sensitive</title>
<g id="Case-Sensitive" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-3" transform="translate(0.000000, 18.000000)" fill="currentColor">
<polygon id="Fill-1" points="100 8.36744942 79.9984 8.36744942 79.9984 64 69.4984 64 69.4984 8.36744942 55 8.36744942 55 0 100 0"></polygon>
<polygon id="Fill-2" points="45 8.36744942 29.9999996 8.36744942 29.9999996 64 19.4999993 64 19.4999993 8.36744942 0 8.36744942 0 0 45 0"></polygon>
<svg width="10px" height="10px" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>5331E3A6-DD6D-43B9-9CA0-C8B876D10B59</title>
<g id="Settings" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="02.3-Dictionary-Details" transform="translate(-1111.000000, -204.000000)">
<rect x="0" y="0" width="1440" height="705"></rect>
<g id="Group-9" transform="translate(1086.000000, 111.000000)" fill="currentColor" opacity="0.5">
<g id="Group-8" transform="translate(25.000000, 69.000000)">
<g id="Group-19" transform="translate(0.000000, 22.000000)">
<g id="status" transform="translate(0.000000, 2.000000)">
<path d="M6.72413793,0.7 C7.00968966,0.7 7.24137931,0.931689655 7.24137931,1.21724138 L7.24137931,1.21724138 L7.24137931,2.76896552 L6.20689655,2.76896552 L6.20689655,1.73448276 L4.13793103,1.73448276 L4.13793103,8.2862069 L5.51724138,8.2862069 L5.51724138,9.32068966 L1.72413793,9.32068966 L1.72413793,8.2862069 L3.10344828,8.2862069 L3.10344828,1.73448276 L1.03448276,1.73448276 L1.03448276,2.76896552 L7.01660952e-15,2.76896552 L7.01660952e-15,1.21724138 C7.01660952e-15,0.931689655 0.231689655,0.7 0.517241379,0.7 L0.517241379,0.7 Z M8.27586207,4.14834483 L8.27586207,5.52765517 L9.82758621,5.52765517 L9.82758621,6.56213793 L8.27586207,6.56213793 L8.27586207,7.90844828 C8.27586207,8.11722931 8.44491379,8.28627586 8.65368966,8.28627586 L8.65368966,8.28627586 L10,8.28627586 L10,9.32075862 L8.65368966,9.32075862 C7.8737931,9.32075862 7.24137931,8.68834483 7.24137931,7.90844828 L7.24137931,7.90844828 L7.24137931,6.56213793 L5.86206897,6.56213793 L5.86206897,5.52765517 L7.24137931,5.52765517 L7.24137931,4.14834483 L8.27586207,4.14834483 Z" id="Combined-Shape"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 744 B

After

Width:  |  Height:  |  Size: 2.0 KiB

8
apps/red-ui/src/assets/styles/red-editor.scss
View File

@ -3,7 +3,7 @@
.changed-row-marker {
position: absolute;
background: rgba($orange-1, 0.4);
background: rgba($primary, 0.1);
z-index: 20;
}
@ -83,8 +83,12 @@
justify-content: space-between;
bottom: 40px;
border-radius: 8px;
padding: 16px;
padding: 16px 32px 16px 16px;
background-color: $white;
box-shadow: 0 2px 6px 0 rgba(40, 50, 65, 0.3);
z-index: 5000;
> *:not(last-child) {
margin-right: 24px;
}
}

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

@ -1,10 +1,15 @@
@import 'red-variables';
@import 'red-mixins';
form {
.red-input-group:not(first-of-type) {
margin-top: 24px;
}
}
.red-input-group {
display: flex;
flex-direction: column;
margin-top: 24px;
position: relative;
height: fit-content;
@ -96,42 +101,14 @@
color: $grey-1;
opacity: 0.7;
}
&.w-75 {
width: 75px;
max-width: 75px;
}
&.w-250 {
width: 250px;
max-width: 250px;
}
&.w-300 {
width: 300px;
max-width: 300px;
}
&.w-full {
width: 100%;
max-width: 100%;
}
}
input {
max-width: 300px;
width: 300px;
&.hex-color-input {
width: 150px;
max-width: 150px;
}
.hex-color-input {
width: 150px;
max-width: 150px;
}
mat-select {
width: 400px;
max-width: 400px;
.mat-select-trigger {
height: 32px;
}
@ -146,8 +123,6 @@
padding-top: 7px;
padding-bottom: 7px;
@include scroll-bar;
width: 400px;
max-width: 400px;
&.has-scrollbar {
border-top-right-radius: 0;
@ -165,6 +140,7 @@
&.mat-checkbox-layout {
opacity: 1;
margin-bottom: 0;
}
}
@ -205,4 +181,34 @@
}
}
}
&.w-75 {
width: 75px;
max-width: 75px;
}
&.w-250 {
width: 250px;
max-width: 250px;
}
&.w-300 {
width: 300px;
max-width: 300px;
}
&.w-400 {
width: 400px;
max-width: 400px;
}
&.w-450 {
width: 450px;
max-width: 450px;
}
&.w-full {
width: 100%;
max-width: 100%;
}
}

2
apps/red-ui/src/assets/styles/red-text-styles.scss
View File

@ -58,6 +58,8 @@ pre {
transition: opacity 0.2s;
&.cancel {
cursor: pointer;
&:hover {
opacity: 1;
}