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

Small UI fixes

Browse Source
This commit is contained in:
Adina Țeudan 2021-04-09 00:29:54 +03:00
parent c7ac26ab1c
commit 57586eac9f
7 changed files with 63 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
apps/red-ui/src/app/components/base-screen/base-screen.component.html
View File

@ -1,18 +1,17 @@
<div class='red-top-bar'>
<div class='top-bar-row'>
<div class='menu-placeholder' *ngIf='!permissionsService.isUser()'></div>
<div class='menu visible-lt-lg' *ngIf='permissionsService.isUser()'>
<button [matMenuTriggerFor]='menuNav' mat-flat-button>
<mat-icon svgIcon='red:menu'></mat-icon>
<div class="red-top-bar">
<div class="top-bar-row">
<div class="menu-placeholder" *ngIf="!permissionsService.isUser()"></div>
<div class="menu visible-lt-lg" *ngIf="permissionsService.isUser()">
<button [matMenuTriggerFor]="menuNav" mat-flat-button>
<mat-icon svgIcon="red:menu"></mat-icon>
</button>
<mat-menu #menuNav='matMenu'>
<button mat-menu-item routerLink='/ui/projects' translate='top-bar.navigation-items.projects'></button>
<button *ngIf='appStateService.activeProject'
[routerLink]="'/ui/projects/' + appStateService.activeProjectId" mat-menu-item>
<mat-menu #menuNav="matMenu">
<button mat-menu-item routerLink="/ui/projects" translate="top-bar.navigation-items.projects"></button>
<button *ngIf="appStateService.activeProject" [routerLink]="'/ui/projects/' + appStateService.activeProjectId" mat-menu-item>
{{ appStateService.activeProject.project.projectName }}
</button>
<button
*ngIf='appStateService.activeFile'
*ngIf="appStateService.activeFile"
[routerLink]="'/ui/projects/' + appStateService.activeProjectId + '/file/' + appStateService.activeFile.fileId"
mat-menu-item
>
@ -20,97 +19,91 @@
</button>
</mat-menu>
</div>
<div class='menu flex-2 visible-lg breadcrumbs-container' *ngIf='permissionsService.isUser()'>
<div class="menu flex-2 visible-lg breadcrumbs-container" *ngIf="permissionsService.isUser()">
<a
class='breadcrumb'
routerLink='/ui/projects'
translate='top-bar.navigation-items.projects'
routerLinkActive='active'
*ngIf='projectsView'
[routerLinkActiveOptions]='{ exact: true }'
class="breadcrumb"
routerLink="/ui/projects"
translate="top-bar.navigation-items.projects"
routerLinkActive="active"
*ngIf="projectsView"
[routerLinkActiveOptions]="{ exact: true }"
></a>
<a
class='breadcrumb back-to-projects'
routerLink='/ui/projects'
routerLinkActive='active'
*ngIf='settingsView'
[routerLinkActiveOptions]='{ exact: true }'
class="breadcrumb back-to-projects"
routerLink="/ui/projects"
routerLinkActive="active"
*ngIf="settingsView"
[routerLinkActiveOptions]="{ exact: true }"
>
<mat-icon svgIcon='red:expand'></mat-icon>
<mat-icon svgIcon="red:expand"></mat-icon>
{{ 'top-bar.navigation-items.back-to-projects' | translate }}
</a>
<ng-container *ngIf='projectsView'>
<mat-icon class='primary' *ngIf='!appStateService.activeProject' svgIcon='red:arrow-down'></mat-icon>
<mat-icon *ngIf='appStateService.activeProject' svgIcon='red:arrow-right'></mat-icon>
<ng-container *ngIf="projectsView">
<mat-icon class="primary" *ngIf="!appStateService.activeProject" svgIcon="red:arrow-down"></mat-icon>
<mat-icon *ngIf="appStateService.activeProject" svgIcon="red:arrow-right"></mat-icon>
<a
*ngIf='appStateService.activeProject'
class='breadcrumb'
*ngIf="appStateService.activeProject"
class="breadcrumb"
[routerLink]="'/ui/projects/' + appStateService.activeProjectId"
routerLinkActive='active'
[routerLinkActiveOptions]='{ exact: true }'
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>
{{ appStateService.activeProject.project.projectName }}
</a>
<mat-icon svgIcon='red:arrow-right' *ngIf='appStateService.activeFile'></mat-icon>
<mat-icon svgIcon="red:arrow-right" *ngIf="appStateService.activeFile"></mat-icon>
<a
*ngIf='appStateService.activeFile'
class='breadcrumb'
*ngIf="appStateService.activeFile"
class="breadcrumb"
[routerLink]="'/ui/projects/' + appStateService.activeProjectId + '/file/' + appStateService.activeFile.fileId"
routerLinkActive='active'
routerLinkActive="active"
>
{{ appStateService.activeFile.filename }}
</a>
</ng-container>
</div>
<div class='center flex-1'>
<redaction-hidden-action (action)='userPreferenceService.toggleDevFeatures()'>
<div class="center flex-1">
<redaction-hidden-action (action)="userPreferenceService.toggleDevFeatures()">
<redaction-logo></redaction-logo>
</redaction-hidden-action>
<div class='app-name'>{{ titleService.getTitle() }}</div>
<span class='dev-mode' *ngIf='userPreferenceService.areDevFeaturesEnabled' translate='dev-mode'></span>
<div class="app-name">{{ titleService.getTitle() }}</div>
<span class="dev-mode" *ngIf="userPreferenceService.areDevFeaturesEnabled" translate="dev-mode"></span>
</div>
<div class='menu right flex-2'>
<redaction-notifications class='mr-8'
*ngIf='userPreferenceService.areDevFeaturesEnabled'></redaction-notifications>
<redaction-user-button [user]='user' [matMenuTriggerFor]='userMenu'
[showDot]='showPendingDownloadsDot'></redaction-user-button>
<mat-menu #userMenu='matMenu'>
<div class="menu right flex-2">
<redaction-notifications class="mr-8" *ngIf="userPreferenceService.areDevFeaturesEnabled"></redaction-notifications>
<redaction-user-button [user]="user" [matMenuTriggerFor]="userMenu" [showDot]="showPendingDownloadsDot"></redaction-user-button>
<mat-menu #userMenu="matMenu" class="user-menu" xPosition="before">
<button
*ngIf='permissionsService.isUser()'
*ngIf="permissionsService.isUser()"
[routerLink]="'/ui/my-profile'"
mat-menu-item
translate='top-bar.navigation-items.my-account.children.my-profile'
translate="top-bar.navigation-items.my-account.children.my-profile"
></button>
<button
*ngIf='permissionsService.isManager()'
(click)='appStateService.reset()'
*ngIf="permissionsService.isManager()"
(click)="appStateService.reset()"
[routerLink]="'/ui/admin'"
mat-menu-item
translate='top-bar.navigation-items.my-account.children.admin'
translate="top-bar.navigation-items.my-account.children.admin"
></button>
<button
*ngIf='permissionsService.isUser()'
*ngIf="permissionsService.isUser()"
[routerLink]="'/ui/downloads'"
mat-menu-item
translate='top-bar.navigation-items.my-account.children.downloads'
translate="top-bar.navigation-items.my-account.children.downloads"
></button>
<button [matMenuTriggerFor]='language' mat-menu-item
translate='top-bar.navigation-items.my-account.children.language.label'></button>
<mat-menu #language='matMenu'>
<button
*ngFor='let lang of languages'
(click)='changeLanguage(lang)'
mat-menu-item
translate
>top-bar.navigation-items.my-account.children.language.{{lang}}</button>
<button [matMenuTriggerFor]="language" mat-menu-item translate="top-bar.navigation-items.my-account.children.language.label"></button>
<mat-menu #language="matMenu">
<button *ngFor="let lang of languages" (click)="changeLanguage(lang)" mat-menu-item translate>
top-bar.navigation-items.my-account.children.language.{{ lang }}
</button>
</mat-menu>
<button (click)='logout()' mat-menu-item>
<mat-icon svgIcon='red:logout'></mat-icon>
<span translate='top-bar.navigation-items.my-account.children.logout'> </span>
<button (click)="logout()" mat-menu-item>
<mat-icon svgIcon="red:logout"></mat-icon>
<span translate="top-bar.navigation-items.my-account.children.logout"> </span>
</button>
</mat-menu>
</div>
</div>
<div class='divider'></div>
<div class="divider"></div>
</div>
<router-outlet></router-outlet>

2
apps/red-ui/src/app/components/notifications/notifications.component.html
View File

@ -1,5 +1,5 @@
<redaction-circle-button [matMenuTriggerFor]="overlay" icon="red:notification" [showDot]="hasUnread"></redaction-circle-button>
<mat-menu #overlay="matMenu" class="notifications-menu" backdropClass="notifications-backdrop">
<mat-menu #overlay="matMenu" class="notifications-menu" backdropClass="notifications-backdrop" xPosition="before">
<div *ngFor="let group of groupedNotifications | sortBy: 'desc':'dateString'">
<div class="all-caps-label">{{ day(group) }}</div>
<div

1
apps/red-ui/src/app/components/notifications/notifications.component.scss
View File

@ -10,6 +10,7 @@
.notifications-menu {
min-width: 400px !important;
padding: 0 8px 16px;
margin-right: 8px;
max-height: calc(100vh - 200px);
.all-caps-label {

6
apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.html
View File

@ -123,11 +123,7 @@
<ng-template #annotationFilterActionTemplate let-filter="filter">
<ng-container *ngIf="filter.key === 'skipped'">
<redaction-circle-button
[icon]="hideSkipped ? 'red:visibility-off' : 'red:visibility'"
(action)="toggleSkipped.emit($event)"
class="skipped-toggle-button"
>
<redaction-circle-button [icon]="hideSkipped ? 'red:visibility-off' : 'red:visibility'" (action)="toggleSkipped.emit($event)" type="dark-bg">
</redaction-circle-button>
</ng-container>
</ng-template>

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

@ -203,13 +203,6 @@ redaction-dictionary-annotation-icon {
margin-left: 2px;
}
.skipped-toggle-button {
position: absolute;
right: 0;
justify-content: center;
align-items: center;
}
.analysis-progress {
padding: 12px 20px;
max-width: 400px;

1
apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.scss
View File

@ -3,6 +3,7 @@
:host {
height: 34px;
width: 34px;
align-items: center;
}
button {

2
apps/red-ui/src/app/modules/shared/components/filter/filter.component.html
View File

@ -36,7 +36,7 @@
</mat-checkbox>
<ng-template *ngTemplateOutlet="actionsTemplate ? actionsTemplate : null; context: { filter: filter }"> </ng-template>
</div>
<div *ngIf="filter.filters && filter.expanded">
<div *ngIf="filter.filters?.length && filter.expanded">
<div *ngFor="let subFilter of filter.filters" class="padding-left mat-menu-item" (click)="$event.stopPropagation()">
<mat-checkbox
[checked]="subFilter.checked"