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

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

@ -10,6 +10,7 @@
.notifications-menu { .notifications-menu {
min-width: 400px !important; min-width: 400px !important;
padding: 0 8px 16px; padding: 0 8px 16px;
margin-right: 8px;
max-height: calc(100vh - 200px); max-height: calc(100vh - 200px);
.all-caps-label { .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-template #annotationFilterActionTemplate let-filter="filter">
<ng-container *ngIf="filter.key === 'skipped'"> <ng-container *ngIf="filter.key === 'skipped'">
<redaction-circle-button <redaction-circle-button [icon]="hideSkipped ? 'red:visibility-off' : 'red:visibility'" (action)="toggleSkipped.emit($event)" type="dark-bg">
[icon]="hideSkipped ? 'red:visibility-off' : 'red:visibility'"
(action)="toggleSkipped.emit($event)"
class="skipped-toggle-button"
>
</redaction-circle-button> </redaction-circle-button>
</ng-container> </ng-container>
</ng-template> </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; margin-left: 2px;
} }
.skipped-toggle-button {
position: absolute;
right: 0;
justify-content: center;
align-items: center;
}
.analysis-progress { .analysis-progress {
padding: 12px 20px; padding: 12px 20px;
max-width: 400px; 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 { :host {
height: 34px; height: 34px;
width: 34px; width: 34px;
align-items: center;
} }
button { button {

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

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