mirror of
https://github.com/bpatrik/pigallery2.git
synced 2024-12-23 01:27:14 +02:00
Add grid size changer #716
This commit is contained in:
parent
232e91c6fc
commit
26d94e0482
@ -5,6 +5,7 @@ import {UserRoles} from '../../entities/UserDTO';
|
||||
import {ConfigProperty, SubConfigClass} from 'typeconfig/common';
|
||||
import {SearchQueryDTO} from '../../entities/SearchQueryDTO';
|
||||
import {DefaultsJobs} from '../../entities/job/JobDTO';
|
||||
import {GridSizes} from '../../entities/GridSizes';
|
||||
|
||||
declare let $localize: (s: TemplateStringsArray) => string;
|
||||
if (typeof $localize === 'undefined') {
|
||||
@ -986,6 +987,17 @@ export class ClientGalleryConfig {
|
||||
})
|
||||
defaultSearchGroupingMethod: ClientGroupingConfig = new ClientGroupingConfig(GroupByTypes.Date, false);
|
||||
|
||||
@ConfigProperty({
|
||||
type: GridSizes,
|
||||
tags: {
|
||||
name: $localize`Default grid size`,
|
||||
githubIssue: 716,
|
||||
priority: ConfigPriority.advanced,
|
||||
},
|
||||
description: $localize`Default grid size that is used to render photos and videos.`
|
||||
})
|
||||
defaultGidSize: GridSizes = GridSizes.medium;
|
||||
|
||||
@ConfigProperty({
|
||||
tags: {
|
||||
name: $localize`Sort directories by date`,
|
||||
|
7
src/common/entities/GridSizes.ts
Normal file
7
src/common/entities/GridSizes.ts
Normal file
@ -0,0 +1,7 @@
|
||||
export enum GridSizes {
|
||||
extraSmall = 10,
|
||||
small = 20,
|
||||
medium = 30,
|
||||
large = 40,
|
||||
extraLarge = 50
|
||||
}
|
@ -112,6 +112,7 @@ import {NgIconsModule} from '@ng-icons/core';
|
||||
import {
|
||||
ionAddOutline,
|
||||
ionAlbumsOutline,
|
||||
ionAppsOutline,
|
||||
ionArrowDownOutline,
|
||||
ionArrowUpOutline,
|
||||
ionBrowsersOutline,
|
||||
@ -137,6 +138,7 @@ import {
|
||||
ionFunnelOutline,
|
||||
ionGitBranchOutline,
|
||||
ionGlobeOutline,
|
||||
ionGridOutline,
|
||||
ionHammerOutline,
|
||||
ionImageOutline,
|
||||
ionImagesOutline,
|
||||
@ -162,6 +164,7 @@ import {
|
||||
ionSettingsOutline,
|
||||
ionShareSocialOutline,
|
||||
ionShuffleOutline,
|
||||
ionSquareOutline,
|
||||
ionStar,
|
||||
ionStarOutline,
|
||||
ionStopOutline,
|
||||
@ -176,7 +179,6 @@ import {
|
||||
ionVolumeMuteOutline,
|
||||
ionWarningOutline
|
||||
} from '@ng-icons/ionicons';
|
||||
import {SortingMethodIconComponent} from './ui/sorting-method-icon/sorting-method-icon.component';
|
||||
import {SafeHtmlPipe} from './pipes/SafeHTMLPipe';
|
||||
import {DatePipe} from '@angular/common';
|
||||
import {ParseIntPipe} from './pipes/ParseIntPipe';
|
||||
@ -185,6 +187,10 @@ import {
|
||||
} from './ui/settings/template/settings-entry/sorting-method/sorting-method.settings-entry.component';
|
||||
import {ContentLoaderService} from './ui/gallery/contentLoader.service';
|
||||
import {FileDTOToRelativePathPipe} from './pipes/FileDTOToRelativePathPipe';
|
||||
import {StringifyGridSize} from './pipes/StringifyGridSize';
|
||||
import {GalleryNavigatorService} from './ui/gallery/navigator/navigator.service';
|
||||
import {GridSizeIconComponent} from './ui/utils/grid-size-icon/grid-size-icon.component';
|
||||
import {SortingMethodIconComponent} from './ui/utils/sorting-method-icon/sorting-method-icon.component';
|
||||
|
||||
@Injectable()
|
||||
export class MyHammerConfig extends HammerGestureConfig {
|
||||
@ -246,7 +252,8 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
|
||||
ionFlagOutline, ionGlobeOutline, ionPieChartOutline, ionStopOutline,
|
||||
ionTimeOutline, ionCheckmarkOutline, ionPulseOutline, ionResizeOutline,
|
||||
ionCloudOutline, ionChatboxOutline, ionServerOutline, ionFileTrayFullOutline, ionBrushOutline,
|
||||
ionBrowsersOutline, ionUnlinkOutline
|
||||
ionBrowsersOutline, ionUnlinkOutline, ionSquareOutline, ionGridOutline,
|
||||
ionAppsOutline
|
||||
}),
|
||||
ClipboardModule,
|
||||
TooltipModule.forRoot(),
|
||||
@ -325,6 +332,7 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
|
||||
StringifySearchQuery,
|
||||
StringifyEnum,
|
||||
StringifySearchType,
|
||||
StringifyGridSize,
|
||||
FileDTOToPathPipe,
|
||||
FileDTOToRelativePathPipe,
|
||||
PhotoFilterPipe,
|
||||
@ -332,6 +340,7 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
|
||||
UsersComponent,
|
||||
SharingsListComponent,
|
||||
SortingMethodIconComponent,
|
||||
GridSizeIconComponent,
|
||||
SafeHtmlPipe,
|
||||
SortingMethodSettingsEntryComponent
|
||||
],
|
||||
@ -350,6 +359,7 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
|
||||
ContentLoaderService,
|
||||
FilterService,
|
||||
GallerySortingService,
|
||||
GalleryNavigatorService,
|
||||
MapService,
|
||||
BlogService,
|
||||
SearchQueryParserService,
|
||||
|
12
src/frontend/app/pipes/StringifyGridSize.ts
Normal file
12
src/frontend/app/pipes/StringifyGridSize.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import {Pipe, PipeTransform} from '@angular/core';
|
||||
import {EnumTranslations} from '../ui/EnumTranslations';
|
||||
import {GridSizes} from '../../../common/entities/GridSizes';
|
||||
|
||||
@Pipe({name: 'stringifyGridSize'})
|
||||
export class StringifyGridSize implements PipeTransform {
|
||||
|
||||
transform(gs: GridSizes): string {
|
||||
return EnumTranslations[GridSizes[gs]];
|
||||
}
|
||||
}
|
||||
|
@ -4,6 +4,7 @@ import {ReIndexingSensitivity} from '../../../common/config/private/PrivateConfi
|
||||
import {SearchQueryTypes} from '../../../common/entities/SearchQueryDTO';
|
||||
import {ConfigStyle} from './settings/settings.service';
|
||||
import {SortByTypes,GroupByTypes} from '../../../common/entities/SortingMethods';
|
||||
import {GridSizes} from '../../../common/entities/GridSizes';
|
||||
|
||||
export const EnumTranslations: Record<string, string> = {};
|
||||
export const enumToTranslatedArray = (EnumType: any): { key: number; value: string }[] => {
|
||||
@ -55,6 +56,12 @@ EnumTranslations[SortByTypes[SortByTypes.FileSize]] = $localize`file size`;
|
||||
EnumTranslations[GroupByTypes[GroupByTypes.NoGrouping]] = $localize`don't group`;
|
||||
|
||||
|
||||
EnumTranslations[GridSizes[GridSizes.extraSmall]] = $localize`extra small`;
|
||||
EnumTranslations[GridSizes[GridSizes.small]] = $localize`small`;
|
||||
EnumTranslations[GridSizes[GridSizes.medium]] = $localize`medium`;
|
||||
EnumTranslations[GridSizes[GridSizes.large]] = $localize`big`;
|
||||
EnumTranslations[GridSizes[GridSizes.extraLarge]] = $localize`extra large`;
|
||||
|
||||
EnumTranslations[NavigationLinkTypes[NavigationLinkTypes.url]] = $localize`Url`;
|
||||
EnumTranslations[NavigationLinkTypes[NavigationLinkTypes.search]] = $localize`Search`;
|
||||
EnumTranslations[NavigationLinkTypes[NavigationLinkTypes.gallery]] = $localize`Gallery`;
|
||||
|
@ -10,6 +10,7 @@ import {SearchQueryDTO, SearchQueryTypes,} from '../../../../common/entities/Sea
|
||||
import {ContentWrapper} from '../../../../common/entities/ConentWrapper';
|
||||
import {ContentWrapperWithError} from './contentLoader.service';
|
||||
import {ThemeModes} from '../../../../common/config/public/ClientConfig';
|
||||
import {GridSizes} from '../../../../common/entities/GridSizes';
|
||||
|
||||
interface CacheItem<T> {
|
||||
timestamp: number;
|
||||
@ -24,6 +25,7 @@ export class GalleryCacheService {
|
||||
private static readonly SEARCH_PREFIX = 'SEARCH:';
|
||||
private static readonly SORTING_PREFIX = 'SORTING:';
|
||||
private static readonly GROUPING_PREFIX = 'GROUPING:';
|
||||
private static readonly GRID_SIZE_PREFIX = 'GRID_SIZE:';
|
||||
private static readonly VERSION = 'VERSION';
|
||||
private static readonly SLIDESHOW_SPEED = 'SLIDESHOW_SPEED';
|
||||
private static THEME_MODE = 'THEME_MODE';
|
||||
@ -172,6 +174,45 @@ export class GalleryCacheService {
|
||||
}
|
||||
}
|
||||
|
||||
removeGridSize(cw: ContentWrapperWithError): void {
|
||||
let key = GalleryCacheService.GRID_SIZE_PREFIX;
|
||||
if (cw?.searchResult?.searchQuery) {
|
||||
key += JSON.stringify(cw.searchResult.searchQuery);
|
||||
} else {
|
||||
key += cw?.directory?.path + '/' + cw?.directory?.name;
|
||||
}
|
||||
localStorage.removeItem(key);
|
||||
}
|
||||
|
||||
getGridSize(cw: ContentWrapperWithError): GridSizes {
|
||||
let key = GalleryCacheService.GRID_SIZE_PREFIX;
|
||||
if (cw?.searchResult?.searchQuery) {
|
||||
key += JSON.stringify(cw.searchResult.searchQuery);
|
||||
} else {
|
||||
key += cw?.directory?.path + '/' + cw?.directory?.name;
|
||||
}
|
||||
const tmp = localStorage.getItem(key);
|
||||
if (tmp != null) {
|
||||
return parseInt(tmp);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
setGridSize(cw: ContentWrapperWithError, gs: GridSizes) {
|
||||
try {
|
||||
let key = GalleryCacheService.GRID_SIZE_PREFIX;
|
||||
if (cw?.searchResult?.searchQuery) {
|
||||
key += JSON.stringify(cw.searchResult.searchQuery);
|
||||
} else {
|
||||
key += cw?.directory?.path + '/' + cw?.directory?.name;
|
||||
}
|
||||
localStorage.setItem(key, gs.toString());
|
||||
} catch (e) {
|
||||
this.reset();
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
public getAutoComplete(
|
||||
text: string,
|
||||
type: SearchQueryTypes
|
||||
|
@ -26,6 +26,8 @@ import {MediaDTO, MediaDTOUtils,} from '../../../../../common/entities/MediaDTO'
|
||||
import {QueryParams} from '../../../../../common/QueryParams';
|
||||
import {GallerySortingService, MediaGroup} from '../navigator/sorting.service';
|
||||
import {GroupByTypes} from '../../../../../common/entities/SortingMethods';
|
||||
import {GalleryNavigatorService} from '../navigator/navigator.service';
|
||||
import {GridSizes} from '../../../../../common/entities/GridSizes';
|
||||
|
||||
@Component({
|
||||
selector: 'app-gallery-grid',
|
||||
@ -45,9 +47,11 @@ export class GalleryGridComponent
|
||||
public IMAGE_MARGIN = 2;
|
||||
isAfterViewInit = false;
|
||||
subscriptions: {
|
||||
girdSize: Subscription;
|
||||
route: Subscription;
|
||||
} = {
|
||||
route: null,
|
||||
girdSize: null
|
||||
};
|
||||
delayedRenderUpToPhoto: string = null;
|
||||
private scrollListenerPhotos: GalleryPhotoComponent[] = [];
|
||||
@ -66,6 +70,7 @@ export class GalleryGridComponent
|
||||
public queryService: QueryService,
|
||||
private router: Router,
|
||||
public sortingService: GallerySortingService,
|
||||
public navigatorService: GalleryNavigatorService,
|
||||
private route: ActivatedRoute
|
||||
) {
|
||||
}
|
||||
@ -76,12 +81,7 @@ export class GalleryGridComponent
|
||||
}
|
||||
this.updateContainerDimensions();
|
||||
this.mergeNewPhotos();
|
||||
this.helperTime = window.setTimeout((): void => {
|
||||
this.renderPhotos();
|
||||
if (this.delayedRenderUpToPhoto) {
|
||||
this.renderUpToMedia(this.delayedRenderUpToPhoto);
|
||||
}
|
||||
}, 0);
|
||||
this.renderMinimalPhotos();
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
@ -100,6 +100,38 @@ export class GalleryGridComponent
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
this.subscriptions.girdSize = this.navigatorService.girdSize.subscribe(gs => {
|
||||
switch (gs) {
|
||||
case GridSizes.extraSmall:
|
||||
this.TARGET_COL_COUNT = 12;
|
||||
this.MIN_ROW_COUNT = 5;
|
||||
this.MAX_ROW_COUNT = 10;
|
||||
break;
|
||||
case GridSizes.small:
|
||||
this.TARGET_COL_COUNT = 8;
|
||||
this.MIN_ROW_COUNT = 3;
|
||||
this.MAX_ROW_COUNT = 8;
|
||||
break;
|
||||
case GridSizes.medium:
|
||||
this.TARGET_COL_COUNT = 5;
|
||||
this.MIN_ROW_COUNT = 2;
|
||||
this.MAX_ROW_COUNT = 5;
|
||||
break;
|
||||
case GridSizes.large:
|
||||
this.TARGET_COL_COUNT = 2;
|
||||
this.MIN_ROW_COUNT = 1;
|
||||
this.MAX_ROW_COUNT = 3;
|
||||
break;
|
||||
case GridSizes.extraLarge:
|
||||
this.TARGET_COL_COUNT = 1;
|
||||
this.MIN_ROW_COUNT = 1;
|
||||
this.MAX_ROW_COUNT = 2;
|
||||
break;
|
||||
}
|
||||
this.clearRenderedPhotos();
|
||||
this.renderMinimalPhotos();
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
@ -114,6 +146,10 @@ export class GalleryGridComponent
|
||||
this.subscriptions.route.unsubscribe();
|
||||
this.subscriptions.route = null;
|
||||
}
|
||||
if (this.subscriptions.girdSize !== null) {
|
||||
this.subscriptions.girdSize.unsubscribe();
|
||||
this.subscriptions.girdSize = null;
|
||||
}
|
||||
}
|
||||
|
||||
@HostListener('window:resize')
|
||||
@ -137,6 +173,18 @@ export class GalleryGridComponent
|
||||
}, 100);
|
||||
}
|
||||
|
||||
/*
|
||||
Renders some photos. If nothing specified, this amount should be enough
|
||||
* */
|
||||
private renderMinimalPhotos() {
|
||||
this.helperTime = window.setTimeout((): void => {
|
||||
this.renderPhotos();
|
||||
if (this.delayedRenderUpToPhoto) {
|
||||
this.renderUpToMedia(this.delayedRenderUpToPhoto);
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
|
||||
photoClicked(media: MediaDTO): void {
|
||||
this.router.navigate([], {
|
||||
queryParams: this.queryService.getParams(media),
|
||||
@ -156,12 +204,7 @@ export class GalleryGridComponent
|
||||
|
||||
this.updateContainerDimensions();
|
||||
this.clearRenderedPhotos();
|
||||
this.helperTime = window.setTimeout((): void => {
|
||||
this.renderPhotos();
|
||||
if (this.delayedRenderUpToPhoto) {
|
||||
this.renderUpToMedia(this.delayedRenderUpToPhoto);
|
||||
}
|
||||
}, 0);
|
||||
this.renderMinimalPhotos();
|
||||
this.isAfterViewInit = true;
|
||||
}
|
||||
|
||||
|
@ -68,7 +68,8 @@
|
||||
<div>
|
||||
<ng-icon
|
||||
[name]="!sortingService.grouping.value.ascending ? 'ionArrowDownOutline' : 'ionArrowUpOutline'"></ng-icon>
|
||||
<app-sorting-method-icon [method]="sortingService.grouping.value.method"></app-sorting-method-icon>
|
||||
<app-sorting-method-icon
|
||||
[method]="sortingService.grouping.value.method"></app-sorting-method-icon>
|
||||
</div>
|
||||
<div class="ps-1" i18n>
|
||||
group
|
||||
@ -160,6 +161,33 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"> </div>
|
||||
<div class="btn-group" dropdown #dropdown="bs-dropdown" placement="bottom right"
|
||||
[insideClick]="true"
|
||||
title="Grid size" i18n-title>
|
||||
<button id="button-grid-size" dropdownToggle type="button"
|
||||
class="btn dropdown-toggle btn-outline-secondary btn-navigator"
|
||||
[class.btn-secondary]="!navigatorService.isDefaultGridSize()"
|
||||
[class.btn-outline-secondary]="navigatorService.isDefaultGridSize()"
|
||||
aria-controls="grid-size-dropdown">
|
||||
<app-grid-size-icon [method]="navigatorService.girdSize.value"></app-grid-size-icon>
|
||||
</button>
|
||||
<div id="grid-size-dropdown" *dropdownMenu class="dropdown-menu dropdown-menu-right"
|
||||
role="menu" aria-labelledby="button-alignment">
|
||||
<h6 class="ps-2" i18n>Grid size</h6>
|
||||
<div class="dropdown-item sorting-grouping-item ps-3 pe-3" role="menuitem"
|
||||
[class.active]="navigatorService.girdSize.value == type.key"
|
||||
*ngFor="let type of gridSizes"
|
||||
(click)="navigatorService.setGridSize(type.key)">
|
||||
<div class="me-2 d-inline-block">
|
||||
<app-grid-size-icon [method]="type.key"></app-grid-size-icon>
|
||||
</div>
|
||||
<div class="d-inline-block">{{type.key | stringifyGridSize}}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
@ -15,6 +15,8 @@ import {PageHelper} from '../../../model/page.helper';
|
||||
import {BsDropdownDirective} from 'ngx-bootstrap/dropdown';
|
||||
import {FilterService} from '../filter/filter.service';
|
||||
import {ContentLoaderService, ContentWrapperWithError, DirectoryContent} from '../contentLoader.service';
|
||||
import {GalleryNavigatorService} from './navigator.service';
|
||||
import {GridSizes} from '../../../../../common/entities/GridSizes';
|
||||
|
||||
@Component({
|
||||
selector: 'app-gallery-navbar',
|
||||
@ -25,6 +27,7 @@ import {ContentLoaderService, ContentWrapperWithError, DirectoryContent} from '.
|
||||
export class GalleryNavigatorComponent {
|
||||
public readonly sortingByTypes: { key: number; value: string }[] = [];
|
||||
public readonly groupingByTypes: { key: number; value: string }[] = [];
|
||||
public readonly gridSizes: { key: number; value: string }[] = [];
|
||||
public readonly config = Config;
|
||||
// DefaultSorting = Config.Gallery.defaultPhotoSortingMethod;
|
||||
public readonly SearchQueryTypes = SearchQueryTypes;
|
||||
@ -50,12 +53,14 @@ export class GalleryNavigatorComponent {
|
||||
public contentLoaderService: ContentLoaderService,
|
||||
public filterService: FilterService,
|
||||
public sortingService: GallerySortingService,
|
||||
public navigatorService: GalleryNavigatorService,
|
||||
private router: Router,
|
||||
public sanitizer: DomSanitizer
|
||||
) {
|
||||
this.sortingByTypes = Utils.enumToArray(SortByTypes);
|
||||
// can't group by random
|
||||
this.groupingByTypes = Utils.enumToArray(GroupByTypes);
|
||||
this.gridSizes = Utils.enumToArray(GridSizes);
|
||||
this.RootFolderName = $localize`Home`;
|
||||
this.wrappedContent = this.contentLoaderService.content;
|
||||
this.directoryContent = this.wrappedContent.pipe(
|
||||
@ -146,6 +151,7 @@ export class GalleryNavigatorComponent {
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
isDirectionalSort(value: number) {
|
||||
return Utils.isValidEnumInt(SortByDirectionalTypes, value);
|
||||
}
|
||||
|
61
src/frontend/app/ui/gallery/navigator/navigator.service.ts
Normal file
61
src/frontend/app/ui/gallery/navigator/navigator.service.ts
Normal file
@ -0,0 +1,61 @@
|
||||
import {Injectable} from '@angular/core';
|
||||
import {GalleryCacheService} from '../cache.gallery.service';
|
||||
import {BehaviorSubject} from 'rxjs';
|
||||
import {Config} from '../../../../../common/config/public/Config';
|
||||
import {ContentLoaderService} from '../contentLoader.service';
|
||||
import {GridSizes} from '../../../../../common/entities/GridSizes';
|
||||
|
||||
@Injectable()
|
||||
export class GalleryNavigatorService {
|
||||
public girdSize: BehaviorSubject<GridSizes>;
|
||||
|
||||
constructor(
|
||||
private galleryCacheService: GalleryCacheService,
|
||||
private galleryService: ContentLoaderService,
|
||||
) {
|
||||
|
||||
// TODO load def instead
|
||||
this.girdSize = new BehaviorSubject(this.getDefaultGridSize());
|
||||
this.galleryService.content.subscribe((c) => {
|
||||
if (c) {
|
||||
if (c) {
|
||||
const gs = this.galleryCacheService.getGridSize(c);
|
||||
if (gs !== null) {
|
||||
this.girdSize.next(gs);
|
||||
} else {
|
||||
this.girdSize.next(this.getDefaultGridSize());
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
setGridSize(gs: GridSizes) {
|
||||
this.girdSize.next(gs);
|
||||
if (this.galleryService.content.value) {
|
||||
if (
|
||||
!this.isDefaultGridSize()
|
||||
) {
|
||||
this.galleryCacheService.setGridSize(
|
||||
this.galleryService.content.value,
|
||||
gs
|
||||
);
|
||||
} else {
|
||||
this.galleryCacheService.removeGridSize(
|
||||
this.galleryService.content.value
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
isDefaultGridSize(): boolean {
|
||||
return this.girdSize.value === this.getDefaultGridSize();
|
||||
}
|
||||
|
||||
|
||||
getDefaultGridSize(): GridSizes {
|
||||
return Config.Gallery.defaultGidSize;
|
||||
}
|
||||
|
||||
}
|
@ -0,0 +1,3 @@
|
||||
.line-height-0 {
|
||||
line-height: 0;
|
||||
}
|
@ -0,0 +1,27 @@
|
||||
<ng-container [ngSwitch]="method">
|
||||
<ng-container *ngSwitchCase="GridSizes.extraSmall">
|
||||
<ng-icon name="ionAppsOutline"></ng-icon>
|
||||
</ng-container>
|
||||
<div class="align-middle" *ngSwitchCase="GridSizes.small">
|
||||
<div class="d-flex" style="margin-bottom: 0.1em">
|
||||
<ng-icon class="line-height-0" strokeWidth="80" size="0.33em" name="ionSquareOutline"></ng-icon>
|
||||
<ng-icon class="line-height-0" strokeWidth="80" size="0.33em" name="ionSquareOutline"></ng-icon>
|
||||
<ng-icon class="line-height-0" strokeWidth="80" size="0.33em" name="ionSquareOutline"></ng-icon>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<ng-icon class="line-height-0" strokeWidth="80" size="0.33em" name="ionSquareOutline"></ng-icon>
|
||||
<ng-icon class="line-height-0" strokeWidth="80" size="0.33em" name="ionSquareOutline"></ng-icon>
|
||||
<ng-icon class="line-height-0" strokeWidth="80" size="0.33em" name="ionSquareOutline"></ng-icon>
|
||||
</div>
|
||||
</div>
|
||||
<ng-container *ngSwitchCase="GridSizes.medium">
|
||||
<ng-icon name="ionGridOutline"></ng-icon>
|
||||
</ng-container>
|
||||
<ng-container *ngSwitchCase="GridSizes.large">
|
||||
<ng-icon strokeWidth="70" class="line-height-0 align-middle" size="0.5em" name="ionSquareOutline"></ng-icon>
|
||||
<ng-icon strokeWidth="70" class="line-height-0 align-middle" size="0.5em" name="ionSquareOutline"></ng-icon>
|
||||
</ng-container>
|
||||
<ng-container *ngSwitchCase="GridSizes.extraLarge">
|
||||
<ng-icon name="ionSquareOutline"></ng-icon>
|
||||
</ng-container>
|
||||
</ng-container>
|
@ -0,0 +1,12 @@
|
||||
import {Component, Input} from '@angular/core';
|
||||
import {GridSizes} from '../../../../../common/entities/GridSizes';
|
||||
|
||||
@Component({
|
||||
selector: 'app-grid-size-icon',
|
||||
templateUrl: './grid-size-icon.component.html',
|
||||
styleUrls: ['./grid-size-icon.component.css']
|
||||
})
|
||||
export class GridSizeIconComponent {
|
||||
@Input() method: number;
|
||||
public readonly GridSizes = GridSizes;
|
||||
}
|
@ -1,5 +1,5 @@
|
||||
import {Component, Input} from '@angular/core';
|
||||
import {GroupSortByTypes} from '../../../../common/entities/SortingMethods';
|
||||
import {GroupSortByTypes} from '../../../../../common/entities/SortingMethods';
|
||||
|
||||
@Component({
|
||||
selector: 'app-sorting-method-icon',
|
||||
@ -8,5 +8,5 @@ import {GroupSortByTypes} from '../../../../common/entities/SortingMethods';
|
||||
})
|
||||
export class SortingMethodIconComponent {
|
||||
@Input() method: number;
|
||||
GroupSortByTypes = GroupSortByTypes;
|
||||
public readonly GroupSortByTypes = GroupSortByTypes;
|
||||
}
|
@ -58,7 +58,7 @@ ng-icon {
|
||||
font-size: 1.15em
|
||||
}
|
||||
|
||||
ng-icon svg {
|
||||
ng-icon:not([strokeWidth]) svg {
|
||||
vertical-align: unset;
|
||||
--ng-icon__stroke-width: 40;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user