MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

description overview refactor for accessibility, remove unused style

This commit is contained in:
mchouliara 2024-09-24 12:14:47 +03:00
parent 88903a0ee8
commit 23e8d64ace
6 changed files with 20 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/app/ui/dashboard/dashboard.component.scss
View File

@ -183,19 +183,6 @@ input[type="text"] {
line-height: 2.4;
}
.description-label {
width: auto;
height: 37px;
background: var(--secondary-color) 0% 0% no-repeat padding-box;
border-radius: 4px 0px;
text-align: left;
line-height: 2.8;
font-size: 0.875rem;
letter-spacing: 0px;
color: var(--dark-gray);
font-weight: 400;
}
.icon-align {
display: inline-flex;
vertical-align: middle;

2
frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.scss
View File

@ -130,7 +130,7 @@ input[type="text"] {
font-size: 0.875rem;
font-weight: 400;
letter-spacing: 0px;
color: var(--dark-gray);
color: var(--secondary-text);
}
.plan-title,

24
frontend/src/app/ui/description/overview/description-overview.component.html
View File

@ -47,24 +47,24 @@
<div class="row mb-4 pb-3">
<div class="col-auto pr-0">
@if(isActive && (canEdit || canAnnotate) && isDraftDescription(description) && !isLocked){
<button (click)="editClicked(description)" mat-mini-fab class="mr-3 actions-btn" matTooltip="{{'DESCRIPTION-OVERVIEW.ACTIONS.EDIT' | translate}}" matTooltipPosition="above">
<button (click)="editClicked(description)" mat-mini-fab class="mr-3 actions-btn" matTooltip="{{'DESCRIPTION-OVERVIEW.ACTIONS.EDIT' | translate}}" matTooltipPosition="above" [attr.aria-label]="'DESCRIPTION-OVERVIEW.ACTIONS.EDIT' | translate">
<mat-icon class="mat-mini-fab-icon">create</mat-icon>
</button>
}@else {
@if(!isPublicView){
<button (click)="editClicked(description)" mat-mini-fab class="mr-3 actions-btn" matTooltip="{{'DESCRIPTION-OVERVIEW.ACTIONS.PREVIEW' | translate}}" matTooltipPosition="above">
<button (click)="editClicked(description)" mat-mini-fab class="mr-3 actions-btn" matTooltip="{{'DESCRIPTION-OVERVIEW.ACTIONS.PREVIEW' | translate}}" matTooltipPosition="above" [attr.aria-label]="'DESCRIPTION-OVERVIEW.ACTIONS.PREVIEW' | translate">
<mat-icon class="mat-mini-fab-icon">visibility</mat-icon>
</button>
}
}
</div>
<div *ngIf="canCopy" class="col-auto pr-0">
<button (click)="openCopyToPlanDialog()" mat-mini-fab class="mr-3 actions-btn" matTooltip="{{'DESCRIPTION-OVERVIEW.ACTIONS.CLONE' | translate}}" matTooltipPosition="above">
<button (click)="openCopyToPlanDialog()" mat-mini-fab class="mr-3 actions-btn" matTooltip="{{'DESCRIPTION-OVERVIEW.ACTIONS.CLONE' | translate}}" matTooltipPosition="above" [attr.aria-label]="'DESCRIPTION-OVERVIEW.ACTIONS.CLONE' | translate">
<mat-icon class="mat-mini-fab-icon">content_copy</mat-icon>
</button>
</div>
<div *ngIf="canDelete && !isLocked" class="col-auto pr-0">
<button (click)="deleteClicked()" mat-mini-fab class="mr-3 actions-btn" matTooltip="{{'DESCRIPTION-OVERVIEW.ACTIONS.DELETE' | translate}}" matTooltipPosition="above">
<button (click)="deleteClicked()" mat-mini-fab class="mr-3 actions-btn" matTooltip="{{'DESCRIPTION-OVERVIEW.ACTIONS.DELETE' | translate}}" matTooltipPosition="above" [attr.aria-label]="'DESCRIPTION-OVERVIEW.ACTIONS.DELETE' | translate">
<mat-icon class="mat-mini-fab-icon">delete</mat-icon>
</button>
</div>
@ -78,7 +78,7 @@
<div class="plan-btn-label">
{{ this.description.plan.label }}
</div>
<div class="w-auto">
<div class="w-auto" aria-hidden>
<mat-icon>launch</mat-icon>
</div>
</button>
@ -137,7 +137,7 @@
<ng-container *ngIf="canFinalize && isDraftDescription(description) && !isLocked">
<div class="row align-items-center" (click)="finalize(description)">
<div class="col-auto pr-0">
<button mat-mini-fab class="finalize-btn">
<button mat-mini-fab class="finalize-btn" [attr.aria-label]="'DESCRIPTION-OVERVIEW.ACTIONS.FINALIZE' | translate">
<mat-icon class="mat-mini-fab-icon check-icon">check</mat-icon>
</button>
</div>
@ -154,7 +154,7 @@
<ng-container *ngIf="hasReversableStatus(description)">
<div class="row mb-3 align-items-center" (click)="reverseFinalization(description)">
<div class="col-auto pr-0">
<button mat-mini-fab class="frame-btn">
<button mat-mini-fab class="frame-btn" [attr.aria-label]="'DESCRIPTION-OVERVIEW.ACTIONS.REVERSE' | translate">
<mat-icon class="mat-mini-fab-icon">unarchive</mat-icon>
</button>
</div>
@ -166,18 +166,18 @@
<ng-container *ngIf="fileTransformerService.availableFormatsFor(fileTransformerEntityTypeEnum.Description).length > 0">
<div class="row mb-3 align-items-center">
<div class="col-auto pr-0">
<button mat-mini-fab class="frame-btn" [matMenuTriggerFor]="exportMenu">
<button mat-mini-fab class="frame-btn" [matMenuTriggerFor]="exportMenu" [attr.aria-label]="'DESCRIPTION-OVERVIEW.ACTIONS.EXPORT' | translate">
<mat-icon class="mat-mini-fab-icon">open_in_new</mat-icon>
</button>
</div>
<div class="col-auto pl-0">
<p class="mb-0 mr-0 pl-2 frame-txt" [matMenuTriggerFor]="exportMenu">{{ 'DESCRIPTION-OVERVIEW.ACTIONS.EXPORT' | translate }}</p>
<div role="button" class="col-auto pl-0" [matMenuTriggerFor]="exportMenu">
<p class="mb-0 mr-0 pl-2 frame-txt">{{ 'DESCRIPTION-OVERVIEW.ACTIONS.EXPORT' | translate }}</p>
</div>
</div>
</ng-container>
<mat-menu #exportMenu="matMenu" xPosition="before">
<button mat-menu-item *ngFor='let fileTransformer of fileTransformerService.availableFormatsFor(fileTransformerEntityTypeEnum.Description)' (click)="fileTransformerService.exportDescription(description.id, fileTransformer.repositoryId, fileTransformer.format, isPublicView)">
<i class="fa pr-2" [ngClass]="fileTransformer.icon ? fileTransformer.icon : 'fa-file-o'"></i>
<i class="fa pr-2" [ngClass]="fileTransformer.icon ? fileTransformer.icon : 'fa-file-o'" aria-hidden></i>
<span>{{'GENERAL.FILE-TRANSFORMER.' + fileTransformer.format.toUpperCase() | translate}}</span>
</button>
</mat-menu>
@ -199,7 +199,7 @@
/>
<div *ngIf="canInvitePlanUsers" class="col-12 d-flex justify-content-center mt-2">
<button mat-raised-button class="invite-btn" (click)="openShareDialog()">
<mat-icon>group_add</mat-icon>
<mat-icon aria-hidden>group_add</mat-icon>
{{'DESCRIPTION-OVERVIEW.ACTIONS.INVITE-SHORT' | translate}}
</button>
</div>

10
frontend/src/app/ui/description/overview/description-overview.component.scss
View File

@ -6,7 +6,7 @@
// ********ICONS********
.back-icon {
opacity: 0.4;
opacity: 0.6;
}
.mat-mini-fab {
@ -28,7 +28,7 @@
}
.status-icon {
color: #a7a7a7;
color: var(--gray);
}
.check-icon {
@ -139,7 +139,7 @@
.label-txt,
.label2-txt {
color: var(--gray);
color: #4b4a4a;
font-weight: 400;
}
@ -167,13 +167,13 @@
.description-label,
.header {
font-size: 1.25em;
color: var(--dark-gray);
color: #000000;
}
.desc-txt {
width: 48.25em;
font-size: 1em;
color: var(--dark-gray);
color: #4b4a4a;
margin-bottom: 1.875em;
}

2
frontend/src/app/ui/plan/overview/plan-overview.component.scss
View File

@ -8,7 +8,7 @@
// ********ICONS********
.back-icon {
opacity: 0.4;
opacity: 0.6;
}
.mat-mdc-mini-fab {

2
frontend/src/app/ui/plan/plan-authors/plan-authors.component.html
View File

@ -19,7 +19,7 @@
</div>
</div>
@if(removeUser() && planUser.role != planUserRoleEnum.Owner){
<button (click)="removeUserFromPlan(planUser)" mat-mini-fab class="secondary ml-auto" matTooltip="{{ 'PLAN-OVERVIEW.ACTIONS.REMOVE-AUTHOR' | translate}}" matTooltipPosition="above">
<button (click)="removeUserFromPlan(planUser)" mat-mini-fab class="secondary ml-auto" matTooltip="{{ 'PLAN-OVERVIEW.ACTIONS.REMOVE-AUTHOR' | translate}}" matTooltipPosition="above" [attr.aria-label]="'PLAN-OVERVIEW.ACTIONS.REMOVE-AUTHOR' | translate">
<mat-icon>delete</mat-icon>
</button>
}