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

Pull request #45: Ui updates

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

* commit '488b430a21bd1acbe51bd51c8087e96142475e17':
  Last reviewer, page numbers
  Filters grid
  Sorting
  Filter indeterminate behaviour
This commit is contained in:
Timo Bejan 2020-11-25 18:54:29 +01:00
commit 3a8dbc18d2
18 changed files with 142 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -47,7 +47,7 @@ import { LogoComponent } from './logo/logo.component';
import { CompositeRouteGuard } from './utils/composite-route.guard';
import { AppStateGuard } from './state/app-state.guard';
import { SimpleDoughnutChartComponent } from './components/simple-doughnut-chart/simple-doughnut-chart.component';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MAT_CHECKBOX_CLICK_ACTION, MatCheckboxModule } from '@angular/material/checkbox';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { AnnotationIconComponent } from './components/annotation-icon/annotation-icon.component';
import { AuthGuard } from './auth/auth.guard';
@ -253,7 +253,8 @@ export function HttpLoaderFactory(httpClient: HttpClient) {
multi: true,
useFactory: languageInitializer,
deps: [LanguageService]
}
},
{ provide: MAT_CHECKBOX_CLICK_ACTION, useValue: 'noop' }
],
bootstrap: [AppComponent]
})

2
apps/red-ui/src/app/common/file-actions/file-actions.component.html
View File

@ -46,7 +46,7 @@
*ngIf="permissionsService.canAssignReviewer(fileStatus)"
[tooltipPosition]="tooltipPosition"
[tooltip]="permissionsService.isManagerAndOwner() ? 'project-overview.assign' : 'project-overview.assign-me'"
[icon]="permissionsService.isManagerAndOwner() ? 'red:assign' : 'red-assign-me'"
[icon]="permissionsService.isManagerAndOwner() ? 'red:assign' : 'red:assign-me'"
[type]="buttonType"
>
</redaction-circle-button>

6
apps/red-ui/src/app/common/filter/filter.component.html
View File

@ -25,8 +25,7 @@
<mat-checkbox
[checked]="filter.checked"
[indeterminate]="filter.indeterminate"
(click)="$event.stopPropagation()"
(change)="filterCheckboxClicked($event, filter)"
(click)="filterCheckboxClicked($event, filter); $event.stopPropagation()"
class="filter-menu-checkbox"
color="primary"
>
@ -37,8 +36,7 @@
<div *ngFor="let subFilter of filter.filters" class="padding-left mat-menu-item" (click)="$event.stopPropagation()">
<mat-checkbox
[checked]="subFilter.checked"
(click)="$event.stopPropagation()"
(change)="filterCheckboxClicked($event, subFilter, filter)"
(click)="filterCheckboxClicked($event, subFilter, filter); $event.stopPropagation()"
color="primary"
>
<ng-template *ngTemplateOutlet="filterTemplate ? filterTemplate : defaultFilterTemplate; context: { filter: subFilter }">

2
apps/red-ui/src/app/common/filter/filter.component.scss
View File

@ -3,7 +3,7 @@
.filter-menu-header {
display: flex;
justify-content: space-between;
padding: 7px 15px 15px;
padding: 8px 16px 16px 16px;
width: 350px;
.actions {

3
apps/red-ui/src/app/common/filter/filter.component.ts
View File

@ -29,6 +29,9 @@ export class FilterComponent {
if (parent) {
handleCheckedValue(parent);
} else {
if (filter.indeterminate) {
filter.checked = false;
}
filter.indeterminate = false;
filter.filters?.forEach((f) => (f.checked = filter.checked));
}

8
apps/red-ui/src/app/components/table-col-name/table-col-name.component.html
View File

@ -1,7 +1,7 @@
<div (click)="withSort && toggleSort.emit(column)" [class.pointer]="withSort" [ngClass]="class">
<span [translate]="label" class="small-label"></span>
<div class="sort-arrows-container" *ngIf="withSort">
<mat-icon [color]="arrowColor.up" svgIcon="red:arrow-up"></mat-icon>
<mat-icon [color]="arrowColor.down" svgIcon="red:arrow-down"></mat-icon>
<span [translate]="label" class="all-caps-label"></span>
<div class="sort-arrows-container" *ngIf="withSort" [class.force-display]="activeSortingOption.column === column">
<mat-icon *ngIf="activeSortingOption?.order === 'asc'" svgIcon="red:sort-asc"></mat-icon>
<mat-icon *ngIf="activeSortingOption?.order === 'desc'" svgIcon="red:sort-desc"></mat-icon>
</div>
</div>

26
apps/red-ui/src/app/components/table-col-name/table-col-name.component.scss
View File

@ -3,21 +3,37 @@
:host {
display: flex;
border-bottom: 1px solid $separator;
height: 30px;
> div {
align-items: center;
text-transform: uppercase;
display: flex;
font-weight: 600;
width: 100%;
line-height: 11px;
gap: 8px;
padding: 8px 24px;
padding: 0 24px;
}
.flex-end {
min-width: 58px;
}
.sort-arrows-container {
display: none;
color: $primary;
mat-icon {
display: block;
height: 14px;
width: 6px;
height: 11px;
}
}
&:hover {
.sort-arrows-container {
display: initial;
}
}
.sort-arrows-container.force-display {
display: initial;
}
}

6
apps/red-ui/src/app/components/table-col-name/table-col-name.component.ts
View File

@ -17,10 +17,4 @@ export class TableColNameComponent implements OnInit {
constructor() {}
ngOnInit(): void {}
public get arrowColor(): { up: string; down: string } {
const up = this.activeSortingOption.order === 'desc' && this.activeSortingOption.column === this.column ? 'primary' : 'accent';
const down = this.activeSortingOption.order === 'asc' && this.activeSortingOption.column === this.column ? 'primary' : 'accent';
return { up, down };
}
}

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

@ -2,28 +2,28 @@
<div class="page-header">
<div class="flex-1">
<div
class="fit-content"
[matTooltip]="(canNotSwitchToRedactedView ? 'file-preview.cannot-show-redacted-view' : 'file-preview.show-redacted-view') | translate"
class="fit-content"
>
<mat-slide-toggle [(ngModel)]="redactedView" color="primary" labelPosition="after" [disabled]="canNotSwitchToRedactedView">
<mat-slide-toggle [(ngModel)]="redactedView" [disabled]="canNotSwitchToRedactedView" color="primary" labelPosition="after">
{{ 'file-preview.view-toggle' | translate }}
</mat-slide-toggle>
</div>
</div>
<div class="page-title">
<span *ngIf="!permissionsService.canPerformAnnotationActions()" class="pill" translate="readonly-pill"></span>
</div>
<!-- <div class="page-title">-->
<!-- <span *ngIf="!permissionsService.canPerformAnnotationActions()" class="pill" translate="readonly-pill"></span>-->
<!-- </div>-->
<div class="flex-1 actions-container" *ngIf="viewReady">
<div *ngIf="viewReady" class="flex-1 actions-container">
<redaction-status-bar
[small]="true"
[config]="[
{
length: 1,
color: appStateService.activeFile.status
}
]"
[small]="true"
>
</redaction-status-bar>
<div class="all-caps-label mr-16 ml-8">{{ appStateService.activeFile.status.toLowerCase().replace('_', '-') | translate }}</div>
@ -32,41 +32,46 @@
[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"
(click)="assignReviewer()"
></div>
<div class="assign-actions-wrapper" *ngIf="permissionsService.canAssignReviewer(appStateService.activeFile)">
<div *ngIf="permissionsService.canAssignReviewer(appStateService.activeFile)" class="assign-actions-wrapper">
<redaction-circle-button
tooltipPosition="below"
tooltip="project-overview.assign.action"
*ngIf="permissionsService.canAssignReviewer(appStateService.activeFile) && appStateService.activeFile.currentReviewer"
(action)="assignReviewer()"
*ngIf="permissionsService.canAssignReviewer(appStateService.activeFile) && appStateService.activeFile.currentReviewer"
icon="red:edit"
tooltip="project-overview.assign.action"
tooltipPosition="below"
>
</redaction-circle-button>
<redaction-circle-button
tooltipPosition="below"
tooltip="file-preview.assign-me"
*ngIf="permissionsService.canAssignReviewer(appStateService.activeFile) && !permissionsService.isFileReviewer()"
(action)="assignToMe()"
*ngIf="permissionsService.canAssignReviewer(appStateService.activeFile) && !permissionsService.isFileReviewer()"
icon="red:assign-me"
tooltip="file-preview.assign-me"
tooltipPosition="below"
>
</redaction-circle-button>
</div>
<ng-container *ngIf="!!appStateService.activeFile.fileStatus.lastReviewer">
<div class="vertical-line"></div>
<div class="all-caps-label mr-16 ml-8" translate="file-preview.last-reviewer"></div>
<redaction-initials-avatar [userId]="appStateService.activeFile.fileStatus.lastReviewer" [withName]="true"></redaction-initials-avatar>
</ng-container>
<div class="vertical-line"></div>
<redaction-file-actions (actionPerformed)="fileActionPerformed($event)" *ngIf="viewReady"></redaction-file-actions>
<redaction-circle-button
class="ml-8"
[routerLink]="['/ui/projects/' + appStateService.activeProjectId]"
class="ml-8"
icon="red:close"
tooltip="common.close"
tooltipPosition="before"
icon="red:close"
></redaction-circle-button>
</div>
</div>
@ -74,13 +79,13 @@
<div class="flex red-content-inner">
<div class="left-container">
<redaction-pdf-viewer
[canPerformActions]="canPerformAnnotationActions"
[fileData]="displayData"
[fileStatus]="appStateService.activeFile"
(annotationSelected)="handleAnnotationSelected($event)"
(manualAnnotationRequested)="openManualRedactionDialog($event)"
(pageChanged)="viewerPageChanged($event)"
(viewerReady)="viewerReady($event)"
[canPerformActions]="canPerformAnnotationActions"
[fileData]="displayData"
[fileStatus]="appStateService.activeFile"
></redaction-pdf-viewer>
</div>
@ -88,9 +93,9 @@
<div class="right-title heading" translate="file-preview.tabs.annotations.label">
<redaction-filter
(filtersChanged)="filtersChanged($event)"
[chevron]="true"
[filterTemplate]="annotationFilterTemplate"
[filters]="annotationFilters"
[chevron]="true"
></redaction-filter>
</div>
@ -104,11 +109,11 @@
tabindex="0"
>
<redaction-page-indicator
*ngFor="let pageNumber of displayedPages"
(pageSelected)="pageSelectedByClick($event)"
[viewedPages]="fileData.viewedPages"
[number]="pageNumber"
*ngFor="let pageNumber of displayedPages"
[active]="pageNumber === activeViewerPage"
[number]="pageNumber"
[viewedPages]="fileData.viewedPages"
>
</redaction-page-indicator>
</div>
@ -123,13 +128,13 @@
>
<!-- <div *ngFor="let page of displayedPages">-->
<div attr.anotation-page-header="{{ activeViewerPage }}" class="page-separator">
<span class="all-caps-label" *ngIf="!!activeViewerPage"
<span *ngIf="!!activeViewerPage" class="all-caps-label"
><span translate="page"></span> {{ activeViewerPage }} - {{ displayedAnnotations[activeViewerPage]?.annotations?.length || 0 }}
<span [translate]="displayedAnnotations[activeViewerPage]?.annotations?.length === 1 ? 'annotation' : 'annotations'"></span
></span>
</div>
<div class="heading-l no-annotations" *ngIf="!displayedAnnotations[activeViewerPage]">
<div *ngIf="!displayedAnnotations[activeViewerPage]" class="heading-l no-annotations">
{{ 'file-preview.no-annotations-for-page' | translate }}
</div>
@ -157,9 +162,9 @@
</div>
<redaction-comments [annotation]="annotation"></redaction-comments>
<redaction-annotation-actions
(annotationsChanged)="annotationsChangedByReviewAction(annotation)"
[annotation]="annotation"
[canPerformAnnotationActions]="canPerformAnnotationActions"
(annotationsChanged)="annotationsChangedByReviewAction(annotation)"
></redaction-annotation-actions>
</div>
</div>
@ -169,7 +174,7 @@
</div>
</section>
<redaction-full-page-loading-indicator [message]="loadingMessage" [displayed]="!viewReady"></redaction-full-page-loading-indicator>
<redaction-full-page-loading-indicator [displayed]="!viewReady" [message]="loadingMessage"></redaction-full-page-loading-indicator>
<ng-template #annotationFilterTemplate let-filter="filter">
<redaction-type-filter *ngIf="filter.topLevelFilter" [filter]="filter"></redaction-type-filter>

13
apps/red-ui/src/app/screens/file/page-indicator/page-indicator.component.scss
View File

@ -5,14 +5,14 @@
position: relative;
padding: 12px;
cursor: pointer;
border-left: 1px solid transparent;
border-left: 2px solid transparent;
&:hover {
background-color: $grey-6;
background-color: $grey-2;
}
&.active {
border-left: 1px solid $red-1;
border-left: 2px solid $red-1;
}
mat-icon {
@ -28,12 +28,17 @@
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
font-size: 11px;
line-height: 11px;
position: absolute;
background: transparent;
}
&.read {
color: $grey-5;
.text {
color: $grey-1;
}
}
}

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

@ -245,7 +245,8 @@
"reviewer": "Assigned to",
"unassigned": "Unassigned",
"assign-reviewer": "Assign Reviewer",
"assign-me": "Assign to me"
"assign-me": "Assign to me",
"last-reviewer": "Last Reviewed by:"
},
"annotation-actions": {
"message": {

10
apps/red-ui/src/assets/icons/general/arrow-right.svg
View File

@ -1,3 +1,7 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 300 450" width="300" height="450"><defs><path d="M0 -0.76L0 449.24L300 224.24L0 -0.76Z" id="bbDgPANXr"></path></defs><g><g><g><use xlink:href="#bbDgPANXr" opacity="1" fill-opacity="1"></use><g><use xlink:href="#bbDgPANXr" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g></g></g></svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>right_expandable</title>
<g id="right_expandable" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon id="Fill-1" fill="currentColor" transform="translate(7.000000, 7.000000) rotate(-90.000000) translate(-7.000000, -7.000000) " points="7 9 10 5 4 5"></polygon>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 633 B

After

Width:  |  Height:  |  Size: 505 B

10
apps/red-ui/src/assets/icons/general/arrow-up.svg
View File

@ -1,3 +1,7 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 426.67" width="640" height="426.67"><defs><path d="M0 427.67L640 427.67L320 1L0 427.67Z" id="bjTkd31yo"></path></defs><g><g><g><use xlink:href="#bjTkd31yo" opacity="1" fill-opacity="1"></use><g><use xlink:href="#bjTkd31yo" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g></g></g></svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="6px" height="6px" viewBox="0 0 6 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>sort-up</title>
<g id="sort-up" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon id="Fill-1" fill="currentColor" transform="translate(3.000000, 3.000000) rotate(-180.000000) translate(-3.000000, -3.000000) " points="3 5 6 1 -1.33216355e-14 1"></polygon>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 638 B

After

Width:  |  Height:  |  Size: 497 B

9
apps/red-ui/src/assets/icons/general/right.svg Normal file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="6px" height="6px" viewBox="0 0 6 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>right</title>
<g id="right" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="down" fill="#283241">
<polygon id="Fill-1" transform="translate(3.000000, 3.000000) rotate(-90.000000) translate(-3.000000, -3.000000) " points="3 5 6 1 -1.33216355e-14 1"></polygon>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 525 B

30
apps/red-ui/src/assets/icons/general/sort-asc.svg
View File

@ -1,22 +1,10 @@
<svg height="612px" id="Capa_1" style="enable-background:new 0 0 612 612;" version="1.1"
viewBox="0 0 612 612"
width="612px" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" y="0px">
<g>
<g id="_x39__27_">
<g>
<path d="M590.905,559.173H295.58c-11.644,0-21.095,9.408-21.095,21.073c0,11.666,9.451,21.116,21.095,21.116h295.326
c11.645,0,21.095-9.45,21.095-21.116C612,568.581,602.57,559.173,590.905,559.173z M331.166,215.266
c8.27-8.312,8.27-21.77,0-30.061L184.727,16.68c-4.409-4.43-10.273-6.308-16.032-6.012c-5.78-0.296-11.623,1.582-16.032,6.012
L6.202,185.185c-8.269,8.312-8.269,21.77,0,30.06c8.27,8.29,21.686,8.312,29.955,0L147.938,86.63v514.712h42.189V87.41
l111.105,127.855C309.48,223.556,322.896,223.556,331.166,215.266z M337.769,95.089h253.137c11.645,0,21.095-10.02,21.095-21.686
c0-11.665-9.45-21.115-21.095-21.115H337.769c-11.645,0-21.095,9.45-21.095,21.115C316.674,85.069,326.124,95.089,337.769,95.089
z M590.905,432.415H295.58c-11.644,0-21.095,9.45-21.095,21.115c0,11.666,9.451,21.116,21.095,21.116h295.326
c11.645,0,21.095-9.45,21.095-21.116C612,441.865,602.57,432.415,590.905,432.415z M590.905,305.698H295.58
c-11.644,0-21.095,9.451-21.095,21.116c0,11.666,9.451,21.116,21.095,21.116h295.326c11.645,0,21.095-9.45,21.095-21.116
C612,315.149,602.57,305.698,590.905,305.698z M590.905,178.982l-168.758,0.464c-11.645,0-21.095,8.986-21.095,20.652
c0,11.665,9.45,21.537,21.095,21.537l168.758-0.422c11.645,0,21.095-9.45,21.095-21.115
C612,188.433,602.57,178.982,590.905,178.982z"/>
</g>
</g>
</g>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="6px" height="14px" viewBox="0 0 6 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>sort-asc</title>
<g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" transform="translate(-1212.000000, -325.000000)" >
<polygon id="Fill-1" fill="currentColor" points="1215 338 1218 334 1212 334"></polygon>
<polygon id="Fill-1" fill="#28324180" transform="translate(1215.000000, 328.000000) rotate(-180.000000) translate(-1215.000000, -328.000000) " points="1215 330 1218 326 1212 326"></polygon>
</g>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 699 B

33
apps/red-ui/src/assets/icons/general/sort-desc.svg
View File

@ -1,25 +1,10 @@
<svg height="612.021px" id="Capa_1" style="enable-background:new 0 0 612.021 612.021;" version="1.1"
viewBox="0 0 612.021 612.021"
width="612.021px" x="0px" xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
y="0px">
<g>
<g id="_x38__37_">
<g>
<path d="M590.927,517.491H337.79c-11.645,0-21.095,9.45-21.095,21.116c0,11.665,9.45,21.115,21.095,21.115l253.137-0.611
c11.645,0,21.095-8.839,21.095-20.504C612.021,526.941,602.592,517.491,590.927,517.491z M295.601,52.88l295.326-0.042
c11.645,0,21.095-9.408,21.095-21.074s-9.45-21.116-21.095-21.116H295.601c-11.645,0-21.095,9.45-21.095,21.116
S283.956,52.88,295.601,52.88z M331.188,396.745c-8.27-8.312-21.686-8.312-29.955,0L190.127,524.6V10.648h-42.189v514.711
L36.156,396.745c-8.269-8.312-21.686-8.312-29.954,0c-8.27,8.312-8.27,21.77,0,30.06l146.439,168.526
c4.409,4.43,10.273,6.307,16.032,6.012c5.779,0.295,11.623-1.582,16.031-6.012l146.44-168.526
C339.457,418.515,339.457,405.057,331.188,396.745z M590.927,137.364H295.601c-11.645,0-21.095,9.451-21.095,21.116
c0,11.666,9.45,20.926,21.095,20.926h295.326c11.645,0,21.095-9.261,21.095-20.926
C612.021,146.815,602.592,137.364,590.927,137.364z M590.927,264.059H295.601c-11.645,0-21.095,9.451-21.095,21.116
c0,11.666,9.45,20.778,21.095,20.778l295.326,0.338c11.645,0,21.095-9.451,21.095-21.116
C612.021,273.531,602.592,264.059,590.927,264.059z M590.927,390.775H422.169c-11.645,0-21.095,9.45-21.095,21.115
c0,11.666,9.45,20.652,21.095,20.652h168.758c11.645,0,21.095-8.986,21.095-20.652
C612.021,400.226,602.592,390.775,590.927,390.775z"/>
</g>
</g>
</g>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="6px" height="14px" viewBox="0 0 6 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>sort-desc</title>
<g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" transform="translate(-1212.000000, -325.000000)" >
<polygon id="Fill-1" fill="#28324180" points="1215 338 1218 334 1212 334"></polygon>
<polygon id="Fill-1" fill="currentColor" transform="translate(1215.000000, 328.000000) rotate(-180.000000) translate(-1215.000000, -328.000000) " points="1215 330 1218 326 1212 326"></polygon>
</g>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 700 B

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

@ -24,6 +24,6 @@
display: flex;
align-items: center;
gap: 4px;
gap: 8px;
}
}

26
apps/red-ui/src/assets/styles/red-menu.scss
View File

@ -5,12 +5,21 @@
box-shadow: 0 2px 6px 0 rgba(40, 50, 65, 0.3);
max-width: none !important;
min-width: 180px !important;
margin-top: 4px;
margin-top: 10px;
.mat-menu-content:not(:empty) {
padding-top: 8px;
padding-bottom: 24px;
}
.mat-menu-item {
font-family: 'Inter', sans-serif;
font-size: 13px;
color: $accent;
padding: 0 8px;
margin: 0 8px 2px 8px;
border-radius: 4px;
width: -webkit-fill-available;
display: flex;
align-items: center;
@ -18,18 +27,25 @@
.arrow-wrapper {
width: 16px;
margin-right: 8px;
text-align: center;
mat-icon {
width: 9px;
height: 9px;
width: 16px;
height: 16px;
margin: 0;
}
}
&.padding-left {
padding-left: 64px;
padding-left: 56px;
}
&:last-of-type {
margin-bottom: 0;
}
&:hover {
background-color: rgba($primary, 0.1);
}
}
}