Skip to content

Commit

Permalink
Merge pull request #1309 from UUDigitalHumanitieslab/feature/minor-ac…
Browse files Browse the repository at this point in the history
…cessibility-changes

Feature/minor accessibility changes
  • Loading branch information
lukavdplas authored Nov 8, 2023
2 parents 98f3a9b + 29f82f8 commit a363af7
Show file tree
Hide file tree
Showing 18 changed files with 119 additions and 129 deletions.
6 changes: 3 additions & 3 deletions frontend/src/app/corpus-header/corpus-header.component.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<section class="section title-section">
<div class="container is-readable">
<div class="level" *ngIf="corpus">
<div class="level-right">
<div class="level-left">
<div class="level-item">
<h1 class="title">
<span *ngIf="currentPage === 'search'">Search</span>
Expand All @@ -12,7 +12,7 @@ <h1 class="title">
</h1>
</div>
</div>
<div class="level-left">
<nav class="level-right" aria-label="secondary navigation">
<div class="field has-addons">
<div class="control">
<a class="button is-medium" [routerLink]="['/search', corpus.name]"
Expand Down Expand Up @@ -42,7 +42,7 @@ <h1 class="title">
</a>
</div>
</div>
</div>
</nav>
</div>
</div>
</section>
38 changes: 19 additions & 19 deletions frontend/src/app/corpus-info/corpus-info.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -21,28 +21,28 @@
</section>

<section class="section" style="padding-top: 0;" [class.is-loading]="!corpus">
<div class="container is-readable" *ngIf="corpus">
<div class="tabs is-boxed">
<ul>
<li *ngFor="let tab of tabs" [class.is-active]="currentTab.value === tab.name">
<a *ngIf="corpus[tab.property]"
role="button" (click)="currentTab.next(tab.name)">
{{tab.title}}
</a>
</li>
</ul>
</div>

<ng-container *ngIf="currentTab | async as tab">
<div *ngIf="tab === 'general'" class="content" [class.is-loading]="!description" [innerHTML]="description"></div>
<div class="container is-readable">
<ia-tabs>
<ng-template iaTabPanel *ngIf="corpus?.descriptionpage"
id="general" title="General information">
<div class="content" [class.is-loading]="!description"
[innerHTML]="description"></div>
</ng-template>

<div *ngIf="tab === 'fields'">
<ng-template iaTabPanel *ngIf="corpus?.fields"
id="fields" title="Fields">
<div class="block" *ngFor="let field of corpus.fields">
<ia-field-info [field]="field" [coverage]="fieldCoverage ? fieldCoverage[field.name] : undefined"></ia-field-info>
<ia-field-info [field]="field"
[coverage]="fieldCoverage ? fieldCoverage[field.name] : undefined">
</ia-field-info>
</div>
</div>
</ng-template>

<div *ngIf="tab === 'models'" class="content" [class.is-loading]="!wordModelDocumentation" [innerHTML]="wordModelDocumentation"></div>
</ng-container>
<ng-template iaTabPanel *ngIf="corpus?.word_models_present"
id="word_models" title="Word models">
<div class="content" [class.is-loading]="!wordModelDocumentation"
[innerHTML]="wordModelDocumentation"></div>
</ng-template>
</ia-tabs>
</div>
</section>
23 changes: 1 addition & 22 deletions frontend/src/app/corpus-info/corpus-info.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,25 +16,6 @@ export class CorpusInfoComponent implements OnInit {
wordModelDocumentation: string;
fieldCoverage: FieldCoverage;

tabs = [
{
name: 'general',
title: 'General information',
property: 'descriptionpage',
}, {
name: 'fields',
title: 'Fields',
property: 'fields',
}, {
name: 'models',
title: 'Word models',
property: 'word_models_present',
}
];

currentTab = new BehaviorSubject<'general'|'fields'|'models'>(
'general'
);

constructor(private corpusService: CorpusService, private apiService: ApiService, private wordModelsService: WordmodelsService) { }

Expand All @@ -47,9 +28,7 @@ export class CorpusInfoComponent implements OnInit {
if (corpus.descriptionpage) {
this.apiService.corpusdescription({filename: corpus.descriptionpage, corpus: corpus.name})
.then(marked.parse)
.then(doc => this.description = doc);
} else {
this.currentTab.next('fields');
.then(doc => this.description = doc);
}
this.apiService.fieldCoverage(corpus.name).then(
result => this.fieldCoverage = result
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,10 @@ <h2 class="title-content column" [routerLink]="['/search', corpus.name]" role="l
</h2>
<div class="column is-narrow">
<button class="moreInfoLink"
role="link"
iaBalloon="More information" iaBalloonPosition="down-left"
[routerLink]="['/info', corpus.name]">
<i class=" fa fa-info-circle info-icon"></i>
<i class=" fa fa-info-circle info-icon" aria-hidden="true"></i>
</button>

</div>
Expand All @@ -35,7 +36,7 @@ <h2 class="title-content column" [routerLink]="['/search', corpus.name]" role="l
</div>
<div class="column is-narrow explore-column">
<a class="button corpus-action is-medium" [routerLink]="['/search', corpus.name]">
<span class="icon">
<span class="icon" aria-hidden="true">
<fa-icon [icon]="searchIcon"></fa-icon>
</span>
<span>Explore</span>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,11 @@

&:hover {
border-color: $text-primary-color;
background-color: $contrast-primary-accent-color;
background-color: $contrast-primary-accent-color;
}

&:focus {
border-width: 3px;
}
}

Expand Down
Original file line number Diff line number Diff line change
@@ -1,34 +1,33 @@
<section class="section">
<h1 class="title">Downloads</h1>

<p-table #dt *ngIf="downloads && corpora" [value]="downloads" [paginator]="true" [rows]="10">
<ng-template pTemplate="caption">
<div style="text-align: left">
<div>
Downloads
</div>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th>Timestamp</th>
<th>Type</th>
<th rowspan="2">Timestamp</th>
<th rowspan="2">Type</th>
<th>Corpus</th>
<th>Query</th>
<th>Filters</th>
<th>Field(s)</th>
<th>Status</th>
<th>Download</th>
<th rowspan="2">Query</th>
<th rowspan="2">Filters</th>
<th rowspan="2">Field(s)</th>
<th rowspan="2">Status</th>
<th rowspan="2">Download</th>
</tr>
<tr>
<th></th>
<th></th>
<th>
<p-dropdown [options]="corpusMenuItems" [style]="{'width':'100%'}"
placeholder="Any" showClear="true"
(onChange)="dt.filter($event.value, 'corpus', 'equals')"></p-dropdown>
<p-columnFilter field="corpus" matchMode="equals" [showMenu]="false">
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
<p-dropdown [options]="corpusMenuItems" [style]="{'width':'100%'}" placeholder="Any"
[ngModel]="value" (onChange)="filter($event.value)">
</p-dropdown>
</ng-template>
</p-columnFilter>
</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-download>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,36 +1,52 @@
<section class="section">
<h1 class="title">Search history</h1>

<p class="block">
Here you can see an overview of your search history.
You can turn search history on or off in
<a [routerLink]="['/settings']">settings</a>.
</p>

<p-table #dt *ngIf="queries" [value]="queries" [paginator]="true" [rows]="10">
<ng-template pTemplate="caption">
<div style="text-align: left">
Search History
<div>
Search history
</div>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th>Timestamp</th>
<th>Query</th>
<th>Filters</th>
<th>Results</th>
<th rowspan="2">Timestamp</th>
<th rowspan="2">Query</th>
<th rowspan="2">Filters</th>
<th rowspan="2">Results</th>
<th>Corpus</th>
<th rowspan="2">Link</th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th>
<p-dropdown [options]="corpusMenuItems" [style]="{'width':'100%'}" placeholder="Any" showClear="true"
(onChange)="dt.filter($event.value, 'corpus', 'equals')"></p-dropdown>
<p-columnFilter field="corpus" matchMode="equals" [showMenu]="false">
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
<p-dropdown [options]="corpusMenuItems" [style]="{'width':'100%'}" placeholder="Any"
[ngModel]="value" (onChange)="filter($event.value)">
</p-dropdown>
</ng-template>
</p-columnFilter>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-query>
<tr (click)="returnToSavedQuery(query)">
<tr>
<td>{{query.started | date:'medium'}}</td>
<td>{{query.queryModel | formatQueryText }}</td>
<td ia-query-filters [queryModel]="query.queryModel"></td>
<td>{{query.total_results}}</td>
<td>{{corpusTitle(query.corpus)}}</td>
<td><a [routerLink]="routerLink(query)" [queryParams]="queryParams(query)">
<span class="icon" aria-label="open this query">
<fa-icon [icon]="linkIcon"></fa-icon>
</span>
</a>
</td>
</tr>
</ng-template>
</p-table>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,26 +1,3 @@
@import "../../../_utilities";

table {
margin-left: 100px;
margin-bottom: 50px;
}

th, td {
padding-right: 10px;
padding-left: 10px;
}

th {
white-space: nowrap;
}

tr {
border: 1px solid black;
border-collapse: separate;
}

tr:hover {
background-color: $contrast-primary-color;
cursor: pointer;
color: $text-primary-color;
}
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Params, Router } from '@angular/router';
import * as _ from 'lodash';
import { esQueryToQueryModel } from '../../utils/es-query';
import { QueryDb } from '../../models/index';
import { CorpusService, QueryService } from '../../services/index';
import { HistoryDirective } from '../history.directive';
import { findByName } from '../../utils/utils';
import { faLink } from '@fortawesome/free-solid-svg-icons';

@Component({
selector: 'search-history',
Expand All @@ -23,6 +24,8 @@ export class SearchHistoryComponent extends HistoryDirective implements OnInit {
super(corpusService);
}

linkIcon = faLink;

async ngOnInit() {
this.retrieveCorpora();
this.queryService.retrieveQueries().then(
Expand All @@ -39,11 +42,11 @@ export class SearchHistoryComponent extends HistoryDirective implements OnInit {
return query;
}

returnToSavedQuery(query: QueryDb) {
this.router.navigate(['/search', query.corpus],
{queryParams: query.queryModel.toQueryParams()});
if (window) {
window.scrollTo(0, 0);
}
routerLink(query: QueryDb): string[] {
return ['/search', query.corpus];
}

queryParams(query: QueryDb): Params {
return query.queryModel.toQueryParams();
}
}
9 changes: 5 additions & 4 deletions frontend/src/app/manual/manual-navigation.component.html
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
<nav class="panel" *ngIf="filtered">
<nav class="panel" *ngIf="filtered" aria-label="secondary navigation">
<p class="panel-heading">
Manual Topics
</p>
<div class="panel-block">
<p class="control has-icons-left">
<input class="input is-small" type="text" placeholder="search" [(ngModel)]="filterText">
<span class="icon is-small is-left">
<input class="input is-small" type="text" placeholder="search" [(ngModel)]="filterText"
aria-label="search">
<span class="icon is-small is-left" aria-hidden="true">
<i class="fa fa-search"></i>
</span>
</p>
</div>
<ng-container *ngFor="let page of filtered | async">
<a class="panel-block" routerLinkActive="is-active" [routerLink]="['/manual', page.id]">
<span class="panel-icon">
<span class="panel-icon" aria-hidden="true">
<i class="fa fa-book"></i>
</span>
<span [innerHtml]="page.title | highlight:highlightText"></span>
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/app/menu/menu.component.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<nav class="navbar" *ngIf="currentUser">
<nav class="navbar" *ngIf="currentUser" aria-label="primary navigation">
<div class="container is-fluid">
<div class="navbar-brand">
<a class="navbar-item" [routerLinkActive]="'is-active'" [routerLink]="['/home']"> <img src="/assets/logo.png" width="50" height="50"> I-ANALYZER</a>
Expand All @@ -14,21 +14,21 @@
<!-- navbar items -->
<div class="navbar-item has-dropdown">
<button class="navbar-link is-hoverable" (click)="corpora.toggle($event)">
<span class="icon">
<span class="icon" aria-hidden="true">
<i class="fa fa-database"></i>
</span>
Corpora
</button>
<p-menu #corpora [popup]="true" [model]="menuCorporaItems" appendTo="body" styleClass="menu-dropdown"></p-menu>
</div>
<a class="navbar-item" [routerLinkActive]="'is-active'" [routerLink]="['/manual', 'main']">
<span class="icon">
<span class="icon" aria-hidden="true">
<i class="fa fa-book"></i>
</span>
Manual
</a>
<a class="navbar-item" [routerLinkActive]="'is-active'" [routerLink]="['/about']">
<span class="icon">
<span class="icon" aria-hidden="true">
<i class="fa fa-info-circle"></i>
</span>
About
Expand All @@ -38,7 +38,7 @@
<!-- navbar items -->
<div class="navbar-item has-dropdown">
<button class="navbar-link is-hoverable" (click)="admin.toggle($event)">
<span class="icon">
<span class="icon" aria-hidden="true">
<i class="fa fa-user-circle"></i>
</span>
{{currentUser.name}}
Expand Down
Loading

0 comments on commit a363af7

Please sign in to comment.