machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add text truncation component

Browse Source
This commit is contained in:
Mononaut 2023-01-05 11:00:08 -06:00
parent 05a8154db0
commit 44147f5976
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
4 changed files with 51 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/app/shared/components/truncate/truncate.component.html Normal file
View File

@ -0,0 +1,5 @@
<span class="truncate" [class.rtl]="rtl" [style.max-width]="maxWidth ? maxWidth + 'px' : null">
<span class="first">{{text.slice(0,-lastChars)}}</span>
<span class="last-four">{{text.slice(-lastChars)}}</span>
<ng-content></ng-content>
</span>

22
frontend/src/app/shared/components/truncate/truncate.component.scss Normal file
View File

@ -0,0 +1,22 @@
.truncate {
text-overflow: unset;
display: flex;
flex-direction: row;
align-items: baseline;
&.rtl {
flex-direction: row-reverse;
}
.first {
flex-grow: 0;
flex-shrink: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.last-four {
flex-shrink: 0;
flex-grow: 0;
}
}

21
frontend/src/app/shared/components/truncate/truncate.component.ts Normal file
View File

@ -0,0 +1,21 @@
import { Component, Input, Inject, LOCALE_ID } from '@angular/core';
@Component({
selector: 'app-truncate',
templateUrl: './truncate.component.html',
styleUrls: ['./truncate.component.scss']
})
export class TruncateComponent {
@Input() text: string;
@Input() lastChars: number = 4;
@Input() maxWidth: number = null;
rtl: boolean;
constructor(
@Inject(LOCALE_ID) private locale: string,
) {
if (this.locale.startsWith('ar') || this.locale.startsWith('fa') || this.locale.startsWith('he')) {
this.rtl = true;
}
}
}

3
frontend/src/app/shared/shared.module.ts
View File

@ -77,6 +77,7 @@ import { IndexingProgressComponent } from '../components/indexing-progress/index
import { SvgImagesComponent } from '../components/svg-images/svg-images.component';
import { ChangeComponent } from '../components/change/change.component';
import { SatsComponent } from './components/sats/sats.component';
import { TruncateComponent } from './components/truncate/truncate.component';
import { SearchResultsComponent } from '../components/search-form/search-results/search-results.component';
import { TimestampComponent } from './components/timestamp/timestamp.component';
import { ToggleComponent } from './components/toggle/toggle.component';
@ -152,6 +153,7 @@ import { GeolocationComponent } from '../shared/components/geolocation/geolocati
SvgImagesComponent,
ChangeComponent,
SatsComponent,
TruncateComponent,
SearchResultsComponent,
TimestampComponent,
ToggleComponent,
@ -252,6 +254,7 @@ import { GeolocationComponent } from '../shared/components/geolocation/geolocati
SvgImagesComponent,
ChangeComponent,
SatsComponent,
TruncateComponent,
SearchResultsComponent,
TimestampComponent,
ToggleComponent,