diff --git a/docs/user-guide/data.md b/docs/user-guide/data.md index 28531ffe2d..85470e8f5d 100644 --- a/docs/user-guide/data.md +++ b/docs/user-guide/data.md @@ -35,14 +35,15 @@ Full text search performs queries including one or more terms or phrases, and re ![Filter your full text search by specific project](../assets/images/search-fulltext-filterByProject.png)* - Search 1: Full text search* -When clicking on the search bar, the search history panel is displayed. The **10** last searches are registered. It is also possible to clear the search history list (*Clear list* button at the bottom of the panel). +When clicking on the search bar, the search history panel is displayed. The **10** last searches are registered. It is also possible to clear the search history list (*Clear list* button at the bottom of the panel or the *x* at the end of each line). ![Search history panel](../assets/images/search-history.png)*Search history list is accessible for the full text search from any webpage.* Special syntax: -- asterisk* can be used as a wildcard symbol -- "quotation marks" searches for the whole pattern +- question mark? can be used as wildcard symbol for a single character. +- asterisk* can be used as a wildcard symbol for zero, one or multiple characters. +- "quotation marks" searches for the whole pattern. --- @@ -54,6 +55,7 @@ The advanced search allows for the creation of complex queries using a graphical The widget's contents are then turned into a string representing a Gravsearch (SPARQL) query to be sent to DSP-API. A query consists of the following elements: + - data model selection - selection of a resource class belonging to the selected data model (optional) - specification of properties, comparison operators, and values (optional). @@ -106,14 +108,14 @@ This search finds "Jacob" as well as "Jakob". Used with a linking property, the `matches` operator lets the user search for a linked resource that matches the specified properties. In this example, the user writes a query looking for all letters that have an author that: + 1. was born after January 1st 1650 -2. whose family name is "Bernoulli" +1. whose family name is "Bernoulli" This is different from the "is equal to" operator that lets the user specify a certain person (selected from a list). ![Advanced search panel with a search example](../assets/images/advanced-search-linked-resource.png) - --- ### Expert search @@ -166,7 +168,7 @@ Each column of the table corresponds to one metadata. Once you have found the desired sources, you can (re)view them and annotate the source itself, the media file, or single metadata values. If you select more than one source, you can compare them in a side-by-side view, link them, edit them all at once, or save them in a collection. A collection is similar to a playlist in a music app or shopping basket in an online store. ### Display a source -⚠ *WORK IN PROGRESS* + The DSP-APP offers different source views for different media types. There's a viewer for still images, moving images, audio and document files. You can open them from the list of search results. Depending on the media type, DSP-APP offers different tools to work on the source. @@ -187,17 +189,17 @@ Additionally, you can work on the source directly, e.g, transcribe a moving imag --- ### Select more than one source -⚠ *NOT YET IMPLEMENTED* + ![Three sources selected; what do you want to do with them?](../assets/images/source-selected-three.png)*Three sources are selected; what do you want to do with them?* -By selecting more than one source, you will be able to edit them all at once, add them to a collection, share or connect them. +By selecting more than one source, you will be able to edit them all at once, add them to a collection, share or connect them. Or you could compare the sources (see [Compare the sources](/user-guide/data/#compare-the-sources)). --- ### Compare the sources -⚠ *NOT YET IMPLEMENTED* + You will be able to compare from two to six source objects at the same time side by side. @@ -206,7 +208,7 @@ You will be able to compare from two to six source objects at the same time side --- ### Annotate and connect your data (sources and/or metadata) -⚠ *NOT YET IMPLEMENTED* + A main feature of the flexible data storage that DSP-APP uses is the possibility to annotate and link sources and their metadata. An annotation can be a small note about a date like "Not sure about the birthdate of this person. There's another date mentioned in the source XYZ". Inside the note, it will be possible to link to another source. diff --git a/src/app/app.module.ts b/src/app/app.module.ts index bbef519db6..2012f2af5a 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -159,6 +159,7 @@ import { SearchSelectOntologyComponent } from './workspace/search/advanced-searc import { ExpertSearchComponent } from './workspace/search/expert-search/expert-search.component'; import { FulltextSearchComponent } from './workspace/search/fulltext-search/fulltext-search.component'; import { SearchPanelComponent } from './workspace/search/search-panel/search-panel.component'; +import { HintComponent } from './main/action/hint/hint.component'; // translate: AoT requires an exported function for factories export function httpLoaderFactory(httpClient: HttpClient) { @@ -304,7 +305,8 @@ export function httpLoaderFactory(httpClient: HttpClient) { UsersComponent, UsersListComponent, VideoComponent, - VideoPreviewComponent + VideoPreviewComponent, + HintComponent ], imports: [ AngularSplitModule.forRoot(), diff --git a/src/app/main/action/hint/hint.component.html b/src/app/main/action/hint/hint.component.html new file mode 100644 index 0000000000..0c90c07091 --- /dev/null +++ b/src/app/main/action/hint/hint.component.html @@ -0,0 +1,5 @@ +
+ + + Read more in the user guidelaunch + diff --git a/src/app/main/action/hint/hint.component.scss b/src/app/main/action/hint/hint.component.scss new file mode 100644 index 0000000000..1ff304cfbb --- /dev/null +++ b/src/app/main/action/hint/hint.component.scss @@ -0,0 +1,7 @@ +a { + margin: 16px auto; + + .mat-icon.suffix { + margin-left: 16px; + } +} diff --git a/src/app/main/action/hint/hint.component.spec.ts b/src/app/main/action/hint/hint.component.spec.ts new file mode 100644 index 0000000000..1f29135540 --- /dev/null +++ b/src/app/main/action/hint/hint.component.spec.ts @@ -0,0 +1,31 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { MatIconModule } from '@angular/material/icon'; + +import { HintComponent } from './hint.component'; + +describe('HintComponent', () => { + let component: HintComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ + HintComponent + ], + imports: [ + MatIconModule + ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(HintComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/main/action/hint/hint.component.ts b/src/app/main/action/hint/hint.component.ts new file mode 100644 index 0000000000..fe382771ea --- /dev/null +++ b/src/app/main/action/hint/hint.component.ts @@ -0,0 +1,52 @@ +import { Component, Input, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-hint', + templateUrl: './hint.component.html', + styleUrls: ['./hint.component.scss'] +}) +export class HintComponent implements OnInit { + + @Input() topic: string; + + content: string; + + documentation: string; + + constructor() { } + + ngOnInit(): void { + this.content = this._getHint(this.topic); + } + + /** + * get correct hint depending on the topic + * @param topic + * @returns hint as html + * + * todo: the hint should be written in markdown in different languages. Maybe stored in docs. + */ + private _getHint(topic: string): string { + switch(topic) { + case 'search': + this.documentation = 'https://docs.dasch.swiss/DSP-APP/user-guide/data/#search-and-browse'; + return `

Use special syntax:

+ `; + break; + + default: + return `There's no hint implemented for the topic ${topic}.`; + } + } + +} diff --git a/src/app/main/grid/grid.component.scss b/src/app/main/grid/grid.component.scss index 47f733e9a5..6a2d7e713c 100644 --- a/src/app/main/grid/grid.component.scss +++ b/src/app/main/grid/grid.component.scss @@ -53,7 +53,7 @@ a { margin: 0 auto; - .mat-icon { + .mat-icon.suffix { margin-left: 16px; } } diff --git a/src/app/workspace/results/list-view/list-view.component.html b/src/app/workspace/results/list-view/list-view.component.html index d2a0c6b140..90eed167c5 100644 --- a/src/app/workspace/results/list-view/list-view.component.html +++ b/src/app/workspace/results/list-view/list-view.component.html @@ -55,6 +55,8 @@
  • Try more general keywords.
  • Try fewer keywords.
    • + + diff --git a/src/app/workspace/results/list-view/list-view.component.scss b/src/app/workspace/results/list-view/list-view.component.scss index b983823d8b..f63e4879e5 100644 --- a/src/app/workspace/results/list-view/list-view.component.scss +++ b/src/app/workspace/results/list-view/list-view.component.scss @@ -32,10 +32,6 @@ button.active { background-color: $black-12-opacity; } -.no-results { - margin: 64px; -} - .link:hover { background-color: $black-12-opacity; } diff --git a/src/app/workspace/search/fulltext-search/fulltext-search.component.html b/src/app/workspace/search/fulltext-search/fulltext-search.component.html index 8985a3c621..ff4540fb7f 100644 --- a/src/app/workspace/search/fulltext-search/fulltext-search.component.html +++ b/src/app/workspace/search/fulltext-search/fulltext-search.component.html @@ -35,7 +35,6 @@ -
    @@ -103,8 +102,7 @@

    -

    diff --git a/src/app/workspace/search/search-panel/search-panel.component.html b/src/app/workspace/search/search-panel/search-panel.component.html index bf713e33fd..01bc3c8931 100644 --- a/src/app/workspace/search/search-panel/search-panel.component.html +++ b/src/app/workspace/search/search-panel/search-panel.component.html @@ -7,14 +7,26 @@ -
    +
    + + + (click)="openPanelWithBackdrop('advanced')"> + manage_search + advanced + + (click)="openPanelWithBackdrop('expert')"> + school + expert +
    @@ -24,8 +36,11 @@
    -

    Advanced search

    -

    Expert search

    +

    + Advanced search + Expert search + How to search +

    @@ -34,9 +49,10 @@

    Expert search
    -
    - - +
    + + +
    diff --git a/src/app/workspace/search/search-panel/search-panel.component.scss b/src/app/workspace/search/search-panel/search-panel.component.scss index f573247d41..d1e3417776 100644 --- a/src/app/workspace/search/search-panel/search-panel.component.scss +++ b/src/app/workspace/search/search-panel/search-panel.component.scss @@ -5,8 +5,8 @@ height: 72px; .advanced-expert-buttons { - display: table; - height: 20px; + display: flex; + height: 24px; margin-left: auto; button { @@ -18,10 +18,26 @@ border-top-right-radius: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + padding-top: 4px; &.active { background-color: $black-12-opacity; } + + &.hint { + color: $accent_200; + + &.active { + color: $dark; + } + } + + .mat-icon { + margin-top: -2px; + font-size: 18px; + width: 18px; + height: 18px; + } } } diff --git a/src/app/workspace/search/search-panel/search-panel.component.ts b/src/app/workspace/search/search-panel/search-panel.component.ts index da54c17fc7..29733ea52e 100644 --- a/src/app/workspace/search/search-panel/search-panel.component.ts +++ b/src/app/workspace/search/search-panel/search-panel.component.ts @@ -61,6 +61,7 @@ export class SearchPanelComponent implements OnInit { // show advanced or expert search showAdvanced: boolean; showExpert: boolean; + showHint: boolean; constructor( private _overlay: Overlay, @@ -75,6 +76,7 @@ export class SearchPanelComponent implements OnInit { this.showAdvanced = (type === 'advanced'); this.showExpert = (type === 'expert'); + this.showHint = (type === 'hint'); const config = new OverlayConfig({ hasBackdrop: true, @@ -88,6 +90,7 @@ export class SearchPanelComponent implements OnInit { this.overlayRef.backdropClick().subscribe(() => { this.showAdvanced = false; this.showExpert = false; + this.showHint = false; this.overlayRef.detach(); }); } @@ -124,6 +127,7 @@ export class SearchPanelComponent implements OnInit { closeMenu(): void { this.showAdvanced = false; this.showExpert = false; + this.showHint = false; if (this.overlayRef) { this.overlayRef.detach(); } diff --git a/src/assets/style/_elements.scss b/src/assets/style/_elements.scss index 8cef300ffd..245f6ba9f5 100644 --- a/src/assets/style/_elements.scss +++ b/src/assets/style/_elements.scss @@ -396,8 +396,10 @@ a, } .no-results { - margin: 64px auto; - width: 400px; + margin: 64px; + min-width: 400px; + max-width: calc(70vw - 128px); + line-height: 1.5; } // -------------------------------------- diff --git a/src/assets/style/_responsive.scss b/src/assets/style/_responsive.scss index 0273ba7414..75b73749c3 100644 --- a/src/assets/style/_responsive.scss +++ b/src/assets/style/_responsive.scss @@ -43,7 +43,7 @@ $grid-breakpoints: ( } .advanced-expert-buttons { font-size: smaller !important; - margin-top: -6px !important; + margin-top: -2px !important; } } diff --git a/src/assets/style/_search.scss b/src/assets/style/_search.scss index 38f8f312c3..a1578d685b 100644 --- a/src/assets/style/_search.scss +++ b/src/assets/style/_search.scss @@ -50,7 +50,6 @@ $project-filter-width-small-device: 120px; display: inline-flex; height: 48px; width: 100%; - margin-bottom: 12px; .app-menu-title h4 { margin: 12px 0; @@ -131,6 +130,14 @@ app-search-date-value { } } + .advanced-expert-buttons { + width: $search-width; + + &.with-project-filter { + margin-left: $project-filter-width; + } + } + .app-search-menu { width: calc(#{$search-width} - 32px); &.with-project-filter { @@ -143,7 +150,7 @@ app-search-date-value { } // responsive style: tablet -@media (max-width: map-get($grid-breakpoints, desktop)) and (min-width: map-get($grid-breakpoints, phone)) { +@media (max-width: map-get($grid-breakpoints, desktop)) and (min-width: map-get($grid-breakpoints, tablet)) { .app-fulltext-search { width: $search-width-small-device; @@ -158,6 +165,14 @@ app-search-date-value { } } + .advanced-expert-buttons { + width: $search-width-small-device; + + &.with-project-filter { + margin-left: $project-filter-width-small-device; + } + } + .app-search-menu { width: calc(#{$search-width-small-device} - 32px); &.with-project-filter { @@ -168,3 +183,19 @@ app-search-date-value { } } } + + +// responsive style: phone +@media (max-width: map-get($grid-breakpoints, tablet)) and (min-width: map-get($grid-breakpoints, watch)) { + .app-search-menu { + width: calc(#{$search-width-small-device} - 32px); + &.with-project-filter { + width: calc(100vw - 32px); + margin: 0 16px; + } + + .app-menu-action { + width: calc(100% - 32px); + } + } +}