diff --git a/package.json b/package.json index 84060e61a2..74bb10bfed 100644 --- a/package.json +++ b/package.json @@ -106,6 +106,7 @@ "reflect-metadata": "0.1.10", "rxjs": "5.4.3", "shave": "^2.1.3", + "text-overflow-clamp": "^1.0.0", "ts-md5": "1.2.2", "webfontloader": "1.6.28", "zone.js": "0.8.18" diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 01c72ecef2..00a3e56121 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -23,6 +23,7 @@ body { display: flex; min-height: 100vh; flex-direction: column; + width: 100%; } .main-content { diff --git a/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html b/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html index 48698b6b40..bce61e9036 100644 --- a/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html +++ b/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html @@ -8,7 +8,7 @@ (, ) -
- +
+
-
+ \ No newline at end of file diff --git a/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts b/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts index 79af7a82c9..82d31ca33c 100644 --- a/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts +++ b/src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts @@ -1,9 +1,10 @@ -import { Component } from '@angular/core'; +import { ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core'; import { listElementFor } from '../../list-element-decorator'; import { ItemSearchResult } from './item-search-result.model'; import { SearchResultListElementComponent } from '../search-result-list-element.component'; import { Item } from '../../../core/shared/item.model'; +import { ListableObject } from '../../listable-object/listable-object.model'; @Component({ selector: 'ds-item-search-result-list-element', @@ -12,6 +13,17 @@ import { Item } from '../../../core/shared/item.model'; }) @listElementFor(ItemSearchResult) -export class ItemSearchResultListElementComponent extends SearchResultListElementComponent { +export class ItemSearchResultListElementComponent extends SearchResultListElementComponent implements OnInit { lines = 3; + + constructor(@Inject('objectElementProvider') public listable: ListableObject, private changeDetectorRef: ChangeDetectorRef) { + super(listable); + } + + ngOnInit() { + setTimeout(() => { + this.lines = 4; + this.changeDetectorRef.detectChanges(); + }, 0); + } } diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 9710a4f2d1..16a7009ae6 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -33,6 +33,8 @@ import { ViewModeSwitchComponent } from './view-mode-switch/view-mode-switch.com import { VarDirective } from './utils/var.directive'; import { TruncatableComponent } from './truncatable/truncatable.component'; import { ShaveDirective } from './utils/shave.directive'; +import { TextOverflowClampDirective } from './utils/clamp-directive'; + const MODULES = [ // Do NOT include UniversalModule, HttpModule, or JsonpModule here @@ -80,7 +82,8 @@ const ENTRY_COMPONENTS = [ const DIRECTIVES = [ VarDirective, - ShaveDirective + ShaveDirective, + TextOverflowClampDirective ]; @NgModule({ diff --git a/src/app/shared/utils/clamp-directive.ts b/src/app/shared/utils/clamp-directive.ts new file mode 100644 index 0000000000..0cac019dcb --- /dev/null +++ b/src/app/shared/utils/clamp-directive.ts @@ -0,0 +1,20 @@ +import { + Directive, + ElementRef, + Input, + OnChanges +} from '@angular/core'; + +import * as clampLib from 'text-overflow-clamp'; + +@Directive({selector: '[dsClamp]'}) +export class TextOverflowClampDirective implements OnChanges { + @Input('dsClamp') lines: number; + + constructor(private el: ElementRef) { + } + + ngOnChanges(): void { + clampLib(this.el.nativeElement, this.lines); + } +} diff --git a/src/app/shared/utils/shave.directive.ts b/src/app/shared/utils/shave.directive.ts index 0622b8bb0c..df37a9a8c5 100644 --- a/src/app/shared/utils/shave.directive.ts +++ b/src/app/shared/utils/shave.directive.ts @@ -32,7 +32,6 @@ export class ShaveDirective implements OnDestroy, OnChanges { } ngOnChanges(): void { - console.log("onchange"); if (this.shaveHeight > 0) { this.runShave(); } diff --git a/yarn.lock b/yarn.lock index 6088cf16f8..53cd4a6b72 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1942,6 +1942,10 @@ dom-serializer@0: domelementtype "~1.1.1" entities "~1.1.1" +dom-walk@^0.1.0: + version "0.1.1" + resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018" + domain-browser@^1.1.1: version "1.1.7" resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc" @@ -2791,6 +2795,13 @@ glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.0.6, glob@^7.1.1, glob@^7.1.2, gl once "^1.3.0" path-is-absolute "^1.0.0" +global@^4.3.1: + version "4.3.2" + resolved "https://registry.yarnpkg.com/global/-/global-4.3.2.tgz#e76989268a6c74c38908b1305b10fc0e394e9d0f" + dependencies: + min-document "^2.19.0" + process "~0.5.1" + globals@^9.18.0: version "9.18.0" resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a" @@ -4432,6 +4443,12 @@ mimic-fn@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.1.0.tgz#e667783d92e89dbd342818b5230b9d62a672ad18" +min-document@^2.19.0: + version "2.19.0" + resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685" + dependencies: + dom-walk "^0.1.0" + minimalistic-assert@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3" @@ -5781,6 +5798,10 @@ process@^0.11.0: version "0.11.10" resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182" +process@~0.5.1: + version "0.5.2" + resolved "https://registry.yarnpkg.com/process/-/process-0.5.2.tgz#1638d8a8e34c2f440a91db95ab9aeb677fc185cf" + progress@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.0.tgz#8a1be366bf8fc23db2bd23f10c6fe920b4389d1f" @@ -7144,6 +7165,12 @@ term-size@^1.2.0: dependencies: execa "^0.7.0" +text-overflow-clamp@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/text-overflow-clamp/-/text-overflow-clamp-1.0.0.tgz#9327faec1b85bf0b293d8c8df32243cbee5c050e" + dependencies: + global "^4.3.1" + throttleit@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.0.tgz#9e785836daf46743145a5984b6268d828528ac6c"