diff --git a/package.json b/package.json index da2d2c9e..9301fd9e 100644 --- a/package.json +++ b/package.json @@ -66,6 +66,7 @@ "@types/jasmine": "~3.6.0", "@types/jasminewd2": "~2.0.3", "@types/node": "^12.11.1", + "angular-split": "^4.0.0", "codelyzer": "^6.0.0", "jasmine-core": "~3.6.0", "jasmine-spec-reporter": "~5.0.0", diff --git a/projects/dsp-ui/src/lib/viewer/index.ts b/projects/dsp-ui/src/lib/viewer/index.ts index 5410d42e..91c7f708 100644 --- a/projects/dsp-ui/src/lib/viewer/index.ts +++ b/projects/dsp-ui/src/lib/viewer/index.ts @@ -26,6 +26,7 @@ export * from './views/property-view/property-view.component'; export * from './views/list-view/list-view.component'; export * from './views/list-view/resource-list/resource-list.component'; export * from './views/list-view/resource-grid/resource-grid.component'; +export * from './views/multiple-resources-view/multiple-resources-view.component'; // media representations export * from './representation/still-image/still-image.component'; export * from './representation/upload-file/upload-file.component'; diff --git a/projects/dsp-ui/src/lib/viewer/viewer.module.ts b/projects/dsp-ui/src/lib/viewer/viewer.module.ts index 3deed4e2..50bf5418 100644 --- a/projects/dsp-ui/src/lib/viewer/viewer.module.ts +++ b/projects/dsp-ui/src/lib/viewer/viewer.module.ts @@ -15,11 +15,13 @@ import { MatInputModule } from '@angular/material/input'; import { MatListModule } from '@angular/material/list'; import { MatMenuModule } from '@angular/material/menu'; import { MatPaginatorModule } from '@angular/material/paginator'; +import { MatRadioModule } from '@angular/material/radio'; import { MatSelectModule } from '@angular/material/select'; import { MatSnackBarModule } from '@angular/material/snack-bar'; import { MatToolbarModule } from '@angular/material/toolbar'; import { MatTooltipModule } from '@angular/material/tooltip'; import { CKEditorModule } from '@ckeditor/ckeditor5-angular'; +import { AngularSplitModule } from 'angular-split'; import { MatJDNConvertibleCalendarDateAdapterModule } from 'jdnconvertiblecalendardateadapter'; import { ColorPickerModule } from 'ngx-color-picker'; import { DspActionModule } from '../action/action.module'; @@ -33,6 +35,8 @@ import { BooleanValueComponent } from './values/boolean-value/boolean-value.comp import { ColorPickerComponent } from './values/color-value/color-picker/color-picker.component'; import { ColorValueComponent } from './values/color-value/color-value.component'; import { CalendarHeaderComponent } from './values/date-value/calendar-header/calendar-header.component'; +import { DateEditComponent } from './values/date-value/date-input-text/date-edit/date-edit.component'; +import { DateInputTextComponent } from './values/date-value/date-input-text/date-input-text.component'; import { DateInputComponent } from './values/date-value/date-input/date-input.component'; import { DateValueComponent } from './values/date-value/date-value.component'; import { DecimalValueComponent } from './values/decimal-value/decimal-value.component'; @@ -53,12 +57,10 @@ import { UriValueComponent } from './values/uri-value/uri-value.component'; import { ListViewComponent } from './views/list-view/list-view.component'; import { ResourceGridComponent } from './views/list-view/resource-grid/resource-grid.component'; import { ResourceListComponent } from './views/list-view/resource-list/resource-list.component'; +import { MultipleResourcesViewComponent } from './views/multiple-resources-view/multiple-resources-view.component'; import { PropertyToolbarComponent } from './views/property-view/property-toolbar/property-toolbar.component'; import { PropertyViewComponent } from './views/property-view/property-view.component'; import { ResourceViewComponent } from './views/resource-view/resource-view.component'; -import { DateInputTextComponent } from './values/date-value/date-input-text/date-input-text.component'; -import { DateEditComponent } from './values/date-value/date-input-text/date-edit/date-edit.component'; -import { MatRadioModule } from '@angular/material/radio'; @NgModule({ declarations: [ @@ -96,9 +98,11 @@ import { MatRadioModule } from '@angular/material/radio'; UploadFileComponent, UriValueComponent, DateInputTextComponent, - DateEditComponent + DateEditComponent, + MultipleResourcesViewComponent ], imports: [ + AngularSplitModule.forRoot(), CKEditorModule, ClipboardModule, ColorPickerModule, @@ -152,7 +156,8 @@ import { MatRadioModule } from '@angular/material/radio'; TextValueHtmlLinkDirective, TimeValueComponent, UploadFileComponent, - UriValueComponent + UriValueComponent, + MultipleResourcesViewComponent ] }) export class DspViewerModule { diff --git a/projects/dsp-ui/src/lib/viewer/views/multiple-resources-view/multiple-resources-view.component.html b/projects/dsp-ui/src/lib/viewer/views/multiple-resources-view/multiple-resources-view.component.html new file mode 100644 index 00000000..5121329a --- /dev/null +++ b/projects/dsp-ui/src/lib/viewer/views/multiple-resources-view/multiple-resources-view.component.html @@ -0,0 +1,26 @@ +
The DspViewerModule contains different component to display a resource. - The example here shows the usage of dsp-resource-view which combines smaller - components like one of the representation viewer or the value components. All of them can - also be used individually.
-The DspViewerModule contains different component to display a resource. + The example here shows the usage of dsp-resource-view which combines smaller + components like one of the representation viewer or the value components. All of them can + also be used individually.
+The example here shows the usage of dsp-multiple-resources-view which + splits the view vertically and horizontally depending on the number of resources + selected and displays its details. +
+ +Resources displayed:
+