diff --git a/src/app/shared/animations/overlay.ts b/src/app/shared/animations/overlay.ts new file mode 100644 index 0000000000..15d6bf79de --- /dev/null +++ b/src/app/shared/animations/overlay.ts @@ -0,0 +1,10 @@ +import { animate, state, transition, trigger, style } from '@angular/animations'; + +export const overlay = trigger('overlay', [ + + state('show', style({ opacity: 0.5 })), + + state('hide', style({ opacity: 0 })), + + transition('show <=> hide', animate(250)) +]); diff --git a/src/app/shared/object-grid/object-grid.component.html b/src/app/shared/object-grid/object-grid.component.html index 8040a99552..fcf3a42662 100644 --- a/src/app/shared/object-grid/object-grid.component.html +++ b/src/app/shared/object-grid/object-grid.component.html @@ -10,8 +10,8 @@ (sortDirectionChange)="onSortDirectionChange($event)" (sortFieldChange)="onSortFieldChange($event)" (paginationChange)="onPaginationChange($event)"> -
-
+
diff --git a/src/app/shared/object-grid/object-grid.component.scss b/src/app/shared/object-grid/object-grid.component.scss index a85e38d26f..32ad2df187 100644 --- a/src/app/shared/object-grid/object-grid.component.scss +++ b/src/app/shared/object-grid/object-grid.component.scss @@ -1,27 +1,24 @@ @import '../../../styles/variables'; +@import '../../../styles/mixins'; ds-wrapper-grid-element ::ng-deep { div.thumbnail > img { height: $card-thumbnail-height; width: 100%; } - .card-title { - line-height: $headings-line-height; - height: ($headings-line-height*3) +em; - overflow: hidden; - text-overflow: ellipsis; - } - .item-abstract { - line-height: $line-height-base; - height: ($line-height-base*5)+em; - overflow: hidden; - text-overflow: ellipsis; - } - .item-authors{ - line-height: $line-height-base; - height: ($line-height-base*1.5)+em; - } div.card { margin-bottom: 20px; } } + +.card-columns { + @include media-breakpoint-only(lg) { + column-count: 3; + } + @include media-breakpoint-only(sm) { + column-count: 2; + } + @include media-breakpoint-only(xs) { + column-count: 1; + } +} \ No newline at end of file diff --git a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html index ce9324477f..d1f37c952e 100644 --- a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html +++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html @@ -1,34 +1,37 @@ -
- - - - -
-

+ +
+ +
+ + +
+
+ +
+ +

+ +

+ + {{dso.findMetadata("dc.date.issued")}} + , + + + +

+ +

+

+ +
+ View +
+
-

- - - , ... - - - - , - {{dso.findMetadata("dc.date.issued")}} - - -

-

-

- -
- View
-
- -
- + \ No newline at end of file diff --git a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss index bd63aa6a3a..e2751279b6 100644 --- a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss +++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss @@ -1,2 +1,14 @@ @import '../../../../../styles/variables'; +.card { + a > div { + position: relative; + .thumbnail-overlay { + height: 100%; + position: absolute; + top: 0; + width: 100%; + background-color: map-get($theme-colors, primary); + } + } +} diff --git a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts index f9fe13cb88..ee03a8b545 100644 --- a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts +++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts @@ -5,11 +5,14 @@ import { SearchResultGridElementComponent } from '../search-result-grid-element. import { Item } from '../../../../core/shared/item.model'; import { ItemSearchResult } from '../../../object-collection/shared/item-search-result.model'; import { ViewMode } from '../../../../+search-page/search-options.model'; +import { slide } from '../../../animations/slide'; +import { overlay } from '../../../animations/overlay'; @Component({ selector: 'ds-item-search-result-grid-element', styleUrls: ['../search-result-grid-element.component.scss', 'item-search-result-grid-element.component.scss'], - templateUrl: 'item-search-result-grid-element.component.html' + templateUrl: 'item-search-result-grid-element.component.html', + animations: [slide, overlay], }) @renderElementsFor(ItemSearchResult, ViewMode.Grid) diff --git a/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.ts b/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.ts index 8e1d7e0647..9be2647cba 100644 --- a/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.ts +++ b/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.ts @@ -6,6 +6,8 @@ import { Metadatum } from '../../../core/shared/metadatum.model'; import { isEmpty, hasNoValue } from '../../empty.util'; import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component'; import { ListableObject } from '../../object-collection/shared/listable-object.model'; +import { TruncatableService } from '../../truncatable/truncatable.service'; +import { Observable } from 'rxjs/Observable'; @Component({ selector: 'ds-search-result-grid-element', @@ -15,7 +17,7 @@ import { ListableObject } from '../../object-collection/shared/listable-object.m export class SearchResultGridElementComponent, K extends DSpaceObject> extends AbstractListableElementComponent { dso: K; - public constructor(@Inject('objectElementProvider') public gridable: ListableObject) { + public constructor(@Inject('objectElementProvider') public gridable: ListableObject, private truncatableService: TruncatableService) { super(gridable); this.dso = this.object.dspaceObject; } @@ -44,7 +46,7 @@ export class SearchResultGridElementComponent, K exten this.object.hitHighlights.some( (md: Metadatum) => { if (key === md.key) { - result = md.value; + result = md.value; return true; } } @@ -54,4 +56,8 @@ export class SearchResultGridElementComponent, K exten } return result; } + + isCollapsed(): Observable { + return this.truncatableService.isCollapsed(this.dso.id); + } } diff --git a/src/app/shared/object-list/object-list.component.html b/src/app/shared/object-list/object-list.component.html index 8de695ae58..4a7221d3e6 100644 --- a/src/app/shared/object-list/object-list.component.html +++ b/src/app/shared/object-list/object-list.component.html @@ -10,7 +10,7 @@ (sortDirectionChange)="onSortDirectionChange($event)" (sortFieldChange)="onSortFieldChange($event)" (paginationChange)="onPaginationChange($event)"> -
    +
      • diff --git a/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html b/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html index 4e5d890b89..104a6be716 100644 --- a/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html +++ b/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html @@ -1,14 +1,28 @@ - -
      + + + + +
      - - - - - - (, ) + + + (, ) + + + + + + -
      - +
      + + +
      -
      \ No newline at end of file +       \ No newline at end of file diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index e05a086f60..202a4b0c23 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -43,6 +43,7 @@ import { VarDirective } from './utils/var.directive'; import { TruncatePipe } from './utils/truncate.pipe'; import { TruncatableComponent } from './truncatable/truncatable.component'; import { TruncatableService } from './truncatable/truncatable.service'; +import { TruncatablePartComponent } from './truncatable/truncatable-part/truncatable-part.component'; const MODULES = [ // Do NOT include UniversalModule, HttpModule, or JsonpModule here @@ -82,7 +83,8 @@ const COMPONENTS = [ GridThumbnailComponent, WrapperListElementComponent, ViewModeSwitchComponent, - TruncatableComponent + TruncatableComponent, + TruncatablePartComponent, ]; const ENTRY_COMPONENTS = [ diff --git a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html new file mode 100644 index 0000000000..60c474395b --- /dev/null +++ b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html @@ -0,0 +1,3 @@ +
      + +
      \ No newline at end of file diff --git a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss new file mode 100644 index 0000000000..cd3d245f7f --- /dev/null +++ b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss @@ -0,0 +1,42 @@ +@import '../../../../styles/variables'; +@import '../../../../styles/mixins'; + +@mixin clamp($lines, $size-factor: 1, $line-height: $line-height-base) { + $height: $line-height * $font-size-base * $size-factor; + max-height: $lines * $height; + position: relative; + overflow: hidden; + line-height: $line-height; + overflow-wrap: break-word; + &:after { + content: "..."; + color: $link-color; + text-align: right; + position: absolute; + padding-right: 15px; + top: ($lines - 1) * $height; + right: 0; + width: 30%; + min-width: 75px; + max-width: 150px; + height: $height; + background: linear-gradient(to right, rgba(255, 255, 255, 0), $body-bg 50%); + } + +} + +$h4-factor: strip-unit($h4-font-size); +@for $i from 1 through 15 { + .clamp-#{$i} { + @include clamp($i); + &.title { + @include clamp($i, 1.25); + } + &.h4 { + @include clamp($i, $h4-factor, $headings-line-height); + + } + } +} + + diff --git a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts new file mode 100644 index 0000000000..83a5f04ba4 --- /dev/null +++ b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts @@ -0,0 +1,42 @@ +import { + Component, Input, OnDestroy, OnInit, ElementRef, ViewChild +} from '@angular/core'; +import { TruncatableService } from '../truncatable.service'; + +@Component({ + selector: 'ds-truncatable-part', + templateUrl: './truncatable-part.component.html', + styleUrls: ['./truncatable-part.component.scss'] +}) + +export class TruncatablePartComponent implements OnInit, OnDestroy { + @Input() minLines: number; + @Input() maxLines: number; + @Input() initialExpand = false; + @Input() id: string; + @Input() type: string; + private lines: number; + private sub; + + public constructor(private service: TruncatableService) { + } + + ngOnInit() { + this.setLines(); + } + + private setLines() { + this.sub = this.service.isCollapsed(this.id).subscribe((collapsed: boolean) => { + if (collapsed) { + this.lines = this.minLines; + } else { + this.lines = this.maxLines; + } + }); + } + + ngOnDestroy(): void { + this.sub.unsubscribe(); + } + +} diff --git a/src/app/shared/truncatable/truncatable.actions.ts b/src/app/shared/truncatable/truncatable.actions.ts index bc9a7e2258..9d3a51219b 100644 --- a/src/app/shared/truncatable/truncatable.actions.ts +++ b/src/app/shared/truncatable/truncatable.actions.ts @@ -11,6 +11,8 @@ import { type } from '../ngrx/type'; */ export const TruncatableActionTypes = { TOGGLE: type('dspace/truncatable/TOGGLE'), + COLLAPSE: type('dspace/truncatable/COLLAPSE'), + EXPAND: type('dspace/truncatable/EXPAND'), }; export class TruncatableAction implements Action { @@ -26,4 +28,12 @@ export class TruncatableToggleAction extends TruncatableAction { type = TruncatableActionTypes.TOGGLE; } +export class TruncatableCollapseAction extends TruncatableAction { + type = TruncatableActionTypes.COLLAPSE; +} + +export class TruncatableExpandAction extends TruncatableAction { + type = TruncatableActionTypes.EXPAND; +} + /* tslint:enable:max-classes-per-file */ diff --git a/src/app/shared/truncatable/truncatable.component.html b/src/app/shared/truncatable/truncatable.component.html index bf03d73eca..d3ed37e596 100644 --- a/src/app/shared/truncatable/truncatable.component.html +++ b/src/app/shared/truncatable/truncatable.component.html @@ -1 +1,3 @@ -
      \ No newline at end of file +
      + +
      \ No newline at end of file diff --git a/src/app/shared/truncatable/truncatable.component.scss b/src/app/shared/truncatable/truncatable.component.scss index b68bfd1d6e..e69de29bb2 100644 --- a/src/app/shared/truncatable/truncatable.component.scss +++ b/src/app/shared/truncatable/truncatable.component.scss @@ -1,41 +0,0 @@ -@import '../../../styles/_variables.scss'; -@import '../../../styles/_mixins.scss'; - -@mixin clamp($lines) { - max-height: $lines * $line-height-base * $font-size-base; - position: relative; - overflow: hidden; - line-height: $line-height-base; - overflow-wrap: break-word; - - &:after { - content: "..."; - color: $link-color; - text-align: right; - position: absolute; - padding-right: 15px; - top: ($lines - 1) * $line-height-base * $font-size-base; - right: 0; - width: 30%; - min-width: 75px; - max-width: 150px; - height: $line-height-base * $font-size-base; - background: linear-gradient(to right, rgba(255, 255, 255, 0), $body-bg 50%); - } - - -} -.clamp-1 { -@include clamp(1); -} -.clamp-2 { - @include clamp(2); - } -.clamp-3 { -@include clamp(3); -} -.clamp-15 { -@include clamp(15); -} - - diff --git a/src/app/shared/truncatable/truncatable.component.ts b/src/app/shared/truncatable/truncatable.component.ts index 88185140ed..b7667f6f51 100644 --- a/src/app/shared/truncatable/truncatable.component.ts +++ b/src/app/shared/truncatable/truncatable.component.ts @@ -9,34 +9,34 @@ import { TruncatableService } from './truncatable.service'; styleUrls: ['./truncatable.component.scss'] }) export class TruncatableComponent { - @Input() minLines: number; - @Input() maxLines: number; @Input() initialExpand = false; @Input() id: string; - @Input() content; - private lines: number; + @Input() onHover = false; public constructor(private service: TruncatableService) { - } ngOnInit() { if (this.initialExpand) { - this.service.toggle(this.id); - } - this.setLines(); - } - - public toggleCollapse() { - this.service.toggle(this.id); - this.setLines(); - } - - private setLines() { - if (this.service.isCollapsed(this.id)) { - this.lines = this.minLines; + this.service.expand(this.id); } else { - this.lines = this.maxLines; + this.service.collapse(this.id); } } + + public hoverCollapse() { + if (this.onHover) { + this.service.collapse(this.id); + } + } + + public hoverExpand() { + if (this.onHover) { + this.service.expand(this.id); + } + } + + public toggle() { + this.service.toggle(this.id); + } } diff --git a/src/app/shared/truncatable/truncatable.reducer.ts b/src/app/shared/truncatable/truncatable.reducer.ts index f48d92f49c..d9a2111682 100644 --- a/src/app/shared/truncatable/truncatable.reducer.ts +++ b/src/app/shared/truncatable/truncatable.reducer.ts @@ -14,7 +14,19 @@ export function truncatableReducer(state = initialState, action: TruncatableActi switch (action.type) { - case TruncatableActionTypes.TOGGLE: { + case TruncatableActionTypes.COLLAPSE: { + return Object.assign({}, state, { + [action.id]: { + collapsed: true, + } + }); + } case TruncatableActionTypes.EXPAND: { + return Object.assign({}, state, { + [action.id]: { + collapsed: false, + } + }); + } case TruncatableActionTypes.TOGGLE: { if (!state[action.id]) { state[action.id] = {collapsed: false}; } diff --git a/src/app/shared/truncatable/truncatable.service.ts b/src/app/shared/truncatable/truncatable.service.ts index e2851a8a3b..5f36c6a60d 100644 --- a/src/app/shared/truncatable/truncatable.service.ts +++ b/src/app/shared/truncatable/truncatable.service.ts @@ -2,7 +2,7 @@ import { Injectable } from '@angular/core'; import { createSelector, MemoizedSelector, Store } from '@ngrx/store'; import { Observable } from 'rxjs/Observable'; import { TruncatablesState, TruncatableState } from './truncatable.reducer'; -import { TruncatableToggleAction } from './truncatable.actions'; +import { TruncatableExpandAction, TruncatableToggleAction, TruncatableCollapseAction } from './truncatable.actions'; import { hasValue } from '../empty.util'; const truncatableStateSelector = (state: TruncatablesState) => state.truncatable; @@ -16,7 +16,6 @@ export class TruncatableService { isCollapsed(id: string): Observable { return this.store.select(truncatableByIdSelector(id)) .map((object: TruncatableState) => { - console.log(object); if (object) { return object.collapsed; } else { @@ -28,6 +27,14 @@ export class TruncatableService { public toggle(id: string): void { this.store.dispatch(new TruncatableToggleAction(id)); } + + public collapse(id: string): void { + this.store.dispatch(new TruncatableCollapseAction(id)); + } + + public expand(id: string): void { + this.store.dispatch(new TruncatableExpandAction(id)); + } } function truncatableByIdSelector(id: string): MemoizedSelector { @@ -36,8 +43,6 @@ function truncatableByIdSelector(id: string): MemoizedSelector(key: string): MemoizedSelector { return createSelector(truncatableStateSelector, (state: TruncatableState) => { - console.log(state, 'test'); - if (hasValue(state)) { return state[key]; } else { diff --git a/src/styles/_functions.scss b/src/styles/_functions.scss index 16c5040e03..81de954285 100644 --- a/src/styles/_functions.scss +++ b/src/styles/_functions.scss @@ -1,4 +1,12 @@ @function calculateRem($size) { $remSize: $size / 16px; @return $remSize; +} + +@function strip-unit($number) { + @if type-of($number) == 'number' and not unitless($number) { + @return $number / ($number * 0 + 1); + } + + @return $number; } \ No newline at end of file