mirror of
https://github.com/bpatrik/pigallery2.git
synced 2024-12-23 01:27:14 +02:00
Patrik J. Braun
GitHub
commit
c4c1db2714
@ -102,7 +102,6 @@
|
||||
"styles": [
|
||||
"node_modules/bootstrap/dist/css/bootstrap.css",
|
||||
"node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
|
||||
"node_modules/open-iconic/font/css/open-iconic-bootstrap.css",
|
||||
"node_modules/ngx-toastr/toastr.css",
|
||||
"node_modules/leaflet/dist/leaflet.css",
|
||||
"node_modules/leaflet.markercluster/dist/MarkerCluster.css",
|
||||
@ -190,7 +189,6 @@
|
||||
"node_modules/bootstrap/dist/css/bootstrap.min.css",
|
||||
"node_modules/ngx-toastr/toastr.css",
|
||||
"node_modules/bootstrap/dist/css/bootstrap.css",
|
||||
"node_modules/open-iconic/font/css/open-iconic-bootstrap.css",
|
||||
"node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
|
||||
"node_modules/leaflet/dist/leaflet.css",
|
||||
"node_modules/leaflet.markercluster/dist/MarkerCluster.css",
|
||||
|
||||
55
package-lock.json
generated
55
package-lock.json
generated
@ -56,6 +56,8 @@
|
||||
"@angular/router": "15.2.2",
|
||||
"@asymmetrik/ngx-leaflet": "15.0.1",
|
||||
"@asymmetrik/ngx-leaflet-markercluster": "15.0.0",
|
||||
"@ng-icons/core": "24.0.0",
|
||||
"@ng-icons/ionicons": "24.0.0",
|
||||
"@ngx-loading-bar/core": "6.0.2",
|
||||
"@types/archiver": "5.3.1",
|
||||
"@types/bcrypt": "5.0.0",
|
||||
@ -112,7 +114,6 @@
|
||||
"ngx-markdown": "15.1.2",
|
||||
"ngx-toastr": "15.2.2",
|
||||
"nyc": "15.1.0",
|
||||
"open-iconic": "1.1.1",
|
||||
"rxjs": "7.8.0",
|
||||
"ts-helpers": "1.1.2",
|
||||
"ts-node": "10.9.1",
|
||||
@ -3944,6 +3945,28 @@
|
||||
"node-pre-gyp": "bin/node-pre-gyp"
|
||||
}
|
||||
},
|
||||
"node_modules/@ng-icons/core": {
|
||||
"version": "24.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@ng-icons/core/-/core-24.0.0.tgz",
|
||||
"integrity": "sha512-zqe8MDcIB/SXT14d/5gh4SwRrY2ndHALGeFO7YxWm9o+88UuftrLuyVx+UnfWM4h7s4fJp0cXFjikBtbKi80bQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"tslib": "^2.2.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/common": ">=14.0.0",
|
||||
"@angular/core": ">=14.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@ng-icons/ionicons": {
|
||||
"version": "24.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@ng-icons/ionicons/-/ionicons-24.0.0.tgz",
|
||||
"integrity": "sha512-GcKYOH9S0aqVyo2NZFw1HDEexXyD7Kn3F/YeZdVUX/tDYfdhj32cO1FwvVnXDtabrhPeqw1vVZQpIvcDkka8NA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"tslib": "^2.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@ngtools/webpack": {
|
||||
"version": "15.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-15.2.2.tgz",
|
||||
@ -17364,12 +17387,6 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/open-iconic": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/open-iconic/-/open-iconic-1.1.1.tgz",
|
||||
"integrity": "sha1-nc/Ix808Yc20ojaxo0eJTJetwMY=",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/opener": {
|
||||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
|
||||
@ -26020,6 +26037,24 @@
|
||||
"tar": "^6.1.11"
|
||||
}
|
||||
},
|
||||
"@ng-icons/core": {
|
||||
"version": "24.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@ng-icons/core/-/core-24.0.0.tgz",
|
||||
"integrity": "sha512-zqe8MDcIB/SXT14d/5gh4SwRrY2ndHALGeFO7YxWm9o+88UuftrLuyVx+UnfWM4h7s4fJp0cXFjikBtbKi80bQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"tslib": "^2.2.0"
|
||||
}
|
||||
},
|
||||
"@ng-icons/ionicons": {
|
||||
"version": "24.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@ng-icons/ionicons/-/ionicons-24.0.0.tgz",
|
||||
"integrity": "sha512-GcKYOH9S0aqVyo2NZFw1HDEexXyD7Kn3F/YeZdVUX/tDYfdhj32cO1FwvVnXDtabrhPeqw1vVZQpIvcDkka8NA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"tslib": "^2.2.0"
|
||||
}
|
||||
},
|
||||
"@ngtools/webpack": {
|
||||
"version": "15.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-15.2.2.tgz",
|
||||
@ -36439,12 +36474,6 @@
|
||||
"is-wsl": "^2.2.0"
|
||||
}
|
||||
},
|
||||
"open-iconic": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/open-iconic/-/open-iconic-1.1.1.tgz",
|
||||
"integrity": "sha1-nc/Ix808Yc20ojaxo0eJTJetwMY=",
|
||||
"dev": true
|
||||
},
|
||||
"opener": {
|
||||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
|
||||
|
||||
@ -76,6 +76,8 @@
|
||||
"@angular/router": "15.2.2",
|
||||
"@asymmetrik/ngx-leaflet": "15.0.1",
|
||||
"@asymmetrik/ngx-leaflet-markercluster": "15.0.0",
|
||||
"@ng-icons/core": "24.0.0",
|
||||
"@ng-icons/ionicons": "24.0.0",
|
||||
"@ngx-loading-bar/core": "6.0.2",
|
||||
"@types/archiver": "5.3.1",
|
||||
"@types/bcrypt": "5.0.0",
|
||||
@ -132,7 +134,6 @@
|
||||
"ngx-markdown": "15.1.2",
|
||||
"ngx-toastr": "15.2.2",
|
||||
"nyc": "15.1.0",
|
||||
"open-iconic": "1.1.1",
|
||||
"rxjs": "7.8.0",
|
||||
"ts-helpers": "1.1.2",
|
||||
"ts-node": "10.9.1",
|
||||
|
||||
@ -944,7 +944,7 @@ export class ServerMediaConfig extends ClientMediaConfig {
|
||||
@ConfigProperty({
|
||||
tags: {
|
||||
name: $localize`Video`,
|
||||
uiIcon: 'video',
|
||||
uiIcon: 'ionVideocamOutline',
|
||||
priority: ConfigPriority.advanced,
|
||||
uiJob: [
|
||||
{
|
||||
@ -958,7 +958,7 @@ export class ServerMediaConfig extends ClientMediaConfig {
|
||||
@ConfigProperty({
|
||||
tags: {
|
||||
name: $localize`Photo`,
|
||||
uiIcon: 'camera-slr',
|
||||
uiIcon: 'ionCameraOutline',
|
||||
priority: ConfigPriority.advanced,
|
||||
uiJob: [
|
||||
{
|
||||
@ -971,7 +971,7 @@ export class ServerMediaConfig extends ClientMediaConfig {
|
||||
@ConfigProperty({
|
||||
tags: {
|
||||
name: $localize`Thumbnail`,
|
||||
uiIcon: 'grid-three-up',
|
||||
uiIcon: 'ionImageOutline',
|
||||
priority: ConfigPriority.advanced,
|
||||
uiJob: [{job: DefaultsJobs[DefaultsJobs['Thumbnail Generation']]}]
|
||||
} as TAGS
|
||||
@ -1065,7 +1065,7 @@ export class ServerConfig extends ClientConfig {
|
||||
@ConfigProperty({
|
||||
tags: {
|
||||
name: $localize`Server`,
|
||||
uiIcon: 'cog'
|
||||
uiIcon: 'ionCloudOutline'
|
||||
} as TAGS,
|
||||
})
|
||||
Server: ServerServiceConfig = new ServerServiceConfig();
|
||||
@ -1073,7 +1073,7 @@ export class ServerConfig extends ClientConfig {
|
||||
@ConfigProperty({
|
||||
tags: {
|
||||
name: $localize`Database`,
|
||||
uiIcon: 'list'
|
||||
uiIcon: 'ionServerOutline'
|
||||
} as TAGS
|
||||
})
|
||||
Database: ServerDataBaseConfig = new ServerDataBaseConfig();
|
||||
@ -1081,7 +1081,7 @@ export class ServerConfig extends ClientConfig {
|
||||
@ConfigProperty({
|
||||
tags: {
|
||||
name: $localize`Users`,
|
||||
uiIcon: 'person'
|
||||
uiIcon: 'ionPersonOutline'
|
||||
} as TAGS,
|
||||
})
|
||||
Users: ServerUserConfig = new ServerUserConfig();
|
||||
@ -1089,7 +1089,7 @@ export class ServerConfig extends ClientConfig {
|
||||
@ConfigProperty({
|
||||
tags: {
|
||||
name: $localize`Indexing`,
|
||||
uiIcon: 'pie-chart',
|
||||
uiIcon: 'ionFileTrayFullOutline',
|
||||
uiJob: [
|
||||
{
|
||||
job: DefaultsJobs[DefaultsJobs.Indexing],
|
||||
@ -1105,7 +1105,7 @@ export class ServerConfig extends ClientConfig {
|
||||
@ConfigProperty({
|
||||
tags: {
|
||||
name: $localize`Media`,
|
||||
uiIcon: 'camera-slr'
|
||||
uiIcon: 'ionImagesOutline'
|
||||
} as TAGS,
|
||||
})
|
||||
Media: ServerMediaConfig = new ServerMediaConfig();
|
||||
@ -1113,7 +1113,7 @@ export class ServerConfig extends ClientConfig {
|
||||
@ConfigProperty({
|
||||
tags: {
|
||||
name: $localize`Meta file`,
|
||||
uiIcon: 'file'
|
||||
uiIcon: 'ionDocumentOutline'
|
||||
} as TAGS,
|
||||
})
|
||||
MetaFile: ServerMetaFileConfig = new ServerMetaFileConfig();
|
||||
@ -1121,7 +1121,7 @@ export class ServerConfig extends ClientConfig {
|
||||
@ConfigProperty({
|
||||
tags: {
|
||||
name: $localize`Preview`,
|
||||
uiIcon: 'image',
|
||||
uiIcon: 'ionImageOutline',
|
||||
uiJob: [
|
||||
{
|
||||
job: DefaultsJobs[DefaultsJobs['Preview Filling']],
|
||||
@ -1136,7 +1136,7 @@ export class ServerConfig extends ClientConfig {
|
||||
@ConfigProperty({
|
||||
tags: {
|
||||
name: $localize`Sharing`,
|
||||
uiIcon: 'share'
|
||||
uiIcon: 'ionShareSocialOutline'
|
||||
} as TAGS,
|
||||
})
|
||||
Sharing: ServerSharingConfig = new ServerSharingConfig();
|
||||
@ -1144,7 +1144,7 @@ export class ServerConfig extends ClientConfig {
|
||||
@ConfigProperty({
|
||||
tags: {
|
||||
name: $localize`Duplicates`,
|
||||
uiIcon: 'layers'
|
||||
uiIcon: 'ionCopyOutline'
|
||||
} as TAGS
|
||||
})
|
||||
Duplicates: ServerDuplicatesConfig = new ServerDuplicatesConfig();
|
||||
@ -1152,7 +1152,7 @@ export class ServerConfig extends ClientConfig {
|
||||
@ConfigProperty({
|
||||
tags: {
|
||||
name: $localize`Messaging`,
|
||||
uiIcon: 'chat',
|
||||
uiIcon: 'ionChatboxOutline',
|
||||
githubIssue: 683
|
||||
} as TAGS,
|
||||
description: $localize`The App can send messages (like photos on the same day a year ago. aka: "Top Pick"). Here you can configure the delivery method.`
|
||||
@ -1162,7 +1162,7 @@ export class ServerConfig extends ClientConfig {
|
||||
@ConfigProperty({
|
||||
tags: {
|
||||
name: $localize`Jobs`,
|
||||
uiIcon: 'project'
|
||||
uiIcon: 'ionPlayOutline'
|
||||
} as TAGS
|
||||
})
|
||||
Jobs: ServerJobConfig = new ServerJobConfig();
|
||||
|
||||
@ -982,7 +982,7 @@ export class ClientGalleryConfig {
|
||||
@ConfigProperty({
|
||||
tags: {
|
||||
name: $localize`Themes`,
|
||||
uiIcon: 'brush',
|
||||
uiIcon: 'ionBrushOutline',
|
||||
priority: ConfigPriority.advanced,
|
||||
} as TAGS,
|
||||
description: $localize`Pigallery2 uses Bootstrap 5.3 (https://getbootstrap.com/docs/5.3) for design (css, layout). In dark mode it sets 'data-bs-theme="dark"' to the <html> to take advantage bootstrap's color modes. For theming, read more at: https://getbootstrap.com/docs/5.3/customize/color-modes/`
|
||||
@ -1313,7 +1313,7 @@ export class ClientConfig {
|
||||
@ConfigProperty({
|
||||
tags: {
|
||||
name: $localize`Gallery`,
|
||||
uiIcon: 'browser'
|
||||
uiIcon: 'ionBrowsersOutline'
|
||||
} as TAGS,
|
||||
})
|
||||
Gallery: ClientGalleryConfig = new ClientGalleryConfig();
|
||||
@ -1327,7 +1327,7 @@ export class ClientConfig {
|
||||
@ConfigProperty({
|
||||
tags: {
|
||||
name: $localize`Album`,
|
||||
uiIcon: 'grid-two-up',
|
||||
uiIcon: 'ionAlbumsOutline',
|
||||
uiJob: [{
|
||||
job: DefaultsJobs[DefaultsJobs['Album Reset']],
|
||||
hideProgress: true
|
||||
@ -1339,7 +1339,7 @@ export class ClientConfig {
|
||||
@ConfigProperty({
|
||||
tags: {
|
||||
name: $localize`Search`,
|
||||
uiIcon: 'magnifying-glass'
|
||||
uiIcon: 'ionSearchOutline'
|
||||
} as TAGS,
|
||||
})
|
||||
Search: ClientSearchConfig = new ClientSearchConfig();
|
||||
@ -1350,7 +1350,7 @@ export class ClientConfig {
|
||||
@ConfigProperty({
|
||||
tags: {
|
||||
name: $localize`Map`,
|
||||
uiIcon: 'map-marker'
|
||||
uiIcon: 'ionLocationOutline'
|
||||
} as TAGS,
|
||||
})
|
||||
Map: ClientMapConfig = new ClientMapConfig();
|
||||
@ -1358,7 +1358,7 @@ export class ClientConfig {
|
||||
@ConfigProperty({
|
||||
tags: {
|
||||
name: $localize`Faces`,
|
||||
uiIcon: 'people'
|
||||
uiIcon: 'ionPeopleOutline'
|
||||
} as TAGS,
|
||||
})
|
||||
Faces: ClientFacesConfig = new ClientFacesConfig();
|
||||
@ -1366,7 +1366,7 @@ export class ClientConfig {
|
||||
@ConfigProperty({
|
||||
tags: {
|
||||
name: $localize`Random photo`,
|
||||
uiIcon: 'random',
|
||||
uiIcon: 'ionShuffleOutline',
|
||||
githubIssue: 392
|
||||
} as TAGS,
|
||||
description: $localize`This feature enables you to generate 'random photo' urls. That URL returns a photo random selected from your gallery. You can use the url with 3rd party application like random changing desktop background. Note: With the current implementation, random link also requires login.`
|
||||
|
||||
@ -48,7 +48,6 @@ import {HTTP_INTERCEPTORS, HttpClient, HttpClientModule,} from '@angular/common/
|
||||
import {DefaultUrlSerializer, UrlSerializer, UrlTree} from '@angular/router';
|
||||
import {LanguageComponent} from './ui/language/language.component';
|
||||
import {QueryService} from './model/query.service';
|
||||
import {IconizeSortingMethod} from './pipes/IconizeSortingMethod';
|
||||
import {StringifySortingMethod} from './pipes/StringifySortingMethod';
|
||||
import {RandomQueryBuilderGalleryComponent} from './ui/gallery/random-query-builder/random-query-builder.gallery.component';
|
||||
import {DurationPipe} from './pipes/DurationPipe';
|
||||
@ -109,6 +108,74 @@ import {StringifyEnum} from './pipes/StringifyEnum';
|
||||
import {StringifySearchType} from './pipes/StringifySearchType';
|
||||
import {MarkerFactory} from './ui/gallery/map/MarkerFactory';
|
||||
import {IconComponent} from './icon.component';
|
||||
import {NgIconsModule} from '@ng-icons/core';
|
||||
import {
|
||||
ionAddOutline,
|
||||
ionAlbumsOutline,
|
||||
ionArrowDownOutline,
|
||||
ionArrowUpOutline,
|
||||
ionBrowsersOutline,
|
||||
ionBrushOutline,
|
||||
ionCalendarOutline,
|
||||
ionCameraOutline,
|
||||
ionChatboxOutline,
|
||||
ionCheckmarkOutline,
|
||||
ionChevronBackOutline,
|
||||
ionChevronDownOutline,
|
||||
ionChevronForwardOutline,
|
||||
ionChevronUpOutline,
|
||||
ionCloseOutline,
|
||||
ionCloudOutline,
|
||||
ionContractOutline,
|
||||
ionCopyOutline,
|
||||
ionDocumentOutline,
|
||||
ionDownloadOutline,
|
||||
ionExpandOutline,
|
||||
ionFileTrayFullOutline,
|
||||
ionFlagOutline,
|
||||
ionFolderOutline,
|
||||
ionFunnelOutline,
|
||||
ionGitBranchOutline,
|
||||
ionGlobeOutline,
|
||||
ionHammerOutline,
|
||||
ionImageOutline,
|
||||
ionImagesOutline,
|
||||
ionInformationOutline,
|
||||
ionLinkOutline,
|
||||
ionLocationOutline,
|
||||
ionLockClosedOutline,
|
||||
ionLogOutOutline,
|
||||
ionMenuOutline,
|
||||
ionMoonOutline,
|
||||
ionPauseOutline,
|
||||
ionPeopleOutline,
|
||||
ionPersonOutline,
|
||||
ionPieChartOutline,
|
||||
ionPlayOutline,
|
||||
ionPricetagOutline,
|
||||
ionPulseOutline,
|
||||
ionRemoveOutline,
|
||||
ionResizeOutline,
|
||||
ionSaveOutline,
|
||||
ionSearchOutline,
|
||||
ionServerOutline,
|
||||
ionSettingsOutline,
|
||||
ionShareSocialOutline,
|
||||
ionShuffleOutline,
|
||||
ionStar,
|
||||
ionStarOutline,
|
||||
ionStopOutline,
|
||||
ionSunnyOutline,
|
||||
ionTextOutline,
|
||||
ionTimeOutline,
|
||||
ionTimerOutline,
|
||||
ionTrashOutline,
|
||||
ionVideocamOutline,
|
||||
ionVolumeMediumOutline,
|
||||
ionVolumeMuteOutline,
|
||||
ionWarningOutline
|
||||
} from '@ng-icons/ionicons';
|
||||
import {SortingMethodIconComponent} from './ui/sorting-method-icon/sorting-method-icon.component';
|
||||
|
||||
@Injectable()
|
||||
export class MyHammerConfig extends HammerGestureConfig {
|
||||
@ -150,6 +217,28 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
|
||||
HttpClientModule,
|
||||
BrowserAnimationsModule,
|
||||
AppRoutingModule,
|
||||
NgIconsModule.withIcons({
|
||||
ionDownloadOutline, ionFunnelOutline,
|
||||
ionGitBranchOutline, ionArrowDownOutline, ionArrowUpOutline,
|
||||
ionStarOutline, ionStar, ionCalendarOutline, ionPersonOutline, ionShuffleOutline,
|
||||
ionPeopleOutline,
|
||||
ionMenuOutline, ionShareSocialOutline,
|
||||
ionImagesOutline, ionLinkOutline, ionSearchOutline, ionHammerOutline, ionCopyOutline,
|
||||
ionAlbumsOutline, ionSettingsOutline, ionLogOutOutline,
|
||||
ionChevronForwardOutline, ionChevronDownOutline, ionChevronBackOutline,
|
||||
ionTrashOutline, ionSaveOutline, ionAddOutline, ionRemoveOutline,
|
||||
ionTextOutline, ionFolderOutline, ionDocumentOutline, ionImageOutline,
|
||||
ionPricetagOutline, ionLocationOutline,
|
||||
ionSunnyOutline, ionMoonOutline, ionVideocamOutline,
|
||||
ionInformationOutline, ionContractOutline, ionExpandOutline, ionCloseOutline,
|
||||
ionTimerOutline,
|
||||
ionPlayOutline, ionPauseOutline, ionVolumeMediumOutline, ionVolumeMuteOutline,
|
||||
ionCameraOutline, ionWarningOutline, ionLockClosedOutline, ionChevronUpOutline,
|
||||
ionFlagOutline, ionGlobeOutline, ionPieChartOutline, ionStopOutline,
|
||||
ionTimeOutline, ionCheckmarkOutline, ionPulseOutline, ionResizeOutline,
|
||||
ionCloudOutline, ionChatboxOutline, ionServerOutline, ionFileTrayFullOutline,ionBrushOutline,
|
||||
ionBrowsersOutline
|
||||
}),
|
||||
ClipboardModule,
|
||||
TooltipModule.forRoot(),
|
||||
ToastrModule.forRoot(),
|
||||
@ -219,7 +308,6 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
|
||||
|
||||
// Pipes
|
||||
StringifyRole,
|
||||
IconizeSortingMethod,
|
||||
StringifySortingMethod,
|
||||
DurationPipe,
|
||||
FileSizePipe,
|
||||
@ -232,6 +320,7 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
|
||||
PhotoFilterPipe,
|
||||
UsersComponent,
|
||||
SharingsListComponent,
|
||||
SortingMethodIconComponent,
|
||||
],
|
||||
providers: [
|
||||
{provide: HTTP_INTERCEPTORS, useClass: CSRFInterceptor, multi: true},
|
||||
|
||||
@ -3,6 +3,7 @@ import {Config} from '../../common/config/public/Config';
|
||||
|
||||
@Component({
|
||||
selector: 'app-icon',
|
||||
styles: [':host {line-height: 0}'],
|
||||
template: `
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
[attr.width]="width"
|
||||
|
||||
@ -1,29 +0,0 @@
|
||||
import { Pipe, PipeTransform } from '@angular/core';
|
||||
import { SortingMethods } from '../../../common/entities/SortingMethods';
|
||||
|
||||
@Pipe({ name: 'iconizeSorting' })
|
||||
export class IconizeSortingMethod implements PipeTransform {
|
||||
transform(method: SortingMethods): string {
|
||||
switch (method) {
|
||||
case SortingMethods.ascRating:
|
||||
return '<span class="oi oi-sort-ascending"></span><span class="oi oi-star text-bold"></span>';
|
||||
case SortingMethods.descRating:
|
||||
return '<span class="oi oi-sort-descending"></span><span class="oi oi-star text-bold"></span>';
|
||||
case SortingMethods.ascPersonCount:
|
||||
return '<span class="oi oi-sort-ascending"></span><span class="oi oi-person text-bold"></span>';
|
||||
case SortingMethods.descPersonCount:
|
||||
return '<span class="oi oi-sort-descending"></span><span class="oi oi-person text-bold"></span>';
|
||||
case SortingMethods.ascName:
|
||||
return '<span class="oi oi-sort-ascending"></span><strong>A</strong>';
|
||||
case SortingMethods.descName:
|
||||
return '<span class="oi oi-sort-descending"></span><strong>A</strong>';
|
||||
case SortingMethods.ascDate:
|
||||
return '<span class="oi oi-sort-ascending"></span>';
|
||||
case SortingMethods.descDate:
|
||||
return '<span class="oi oi-sort-descending"></span>';
|
||||
case SortingMethods.random:
|
||||
return '<span class="oi oi-random"></span>';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -90,13 +90,13 @@
|
||||
<button class="btn btn-link nav-link text-start p-0 text-nowrap"
|
||||
(click)="viewportScroller.scrollToAnchor(s.ConfigPath)"
|
||||
>
|
||||
<span class="oi oi-{{s.icon}}"></span> {{s.Name}}
|
||||
<ng-icon [name]="s.icon"></ng-icon> {{s.Name}}
|
||||
</button>
|
||||
<button class="btn btn-link nav-link text-start ms-3 p-0 text-nowrap"
|
||||
*ngFor="let n of s.nestedConfigs;"
|
||||
[hidden]="!n.visible()"
|
||||
(click)="viewportScroller.scrollToAnchor(n.id)">
|
||||
<span class="oi oi-{{n.icon}}"></span> {{n.name}}
|
||||
<ng-icon [name]="n.icon"></ng-icon> {{n.name}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -10,21 +10,25 @@
|
||||
*ngIf="thumbnail && thumbnail.Available"
|
||||
[style.background-image]="getSanitizedThUrl()"></div>
|
||||
|
||||
<app-icon *ngIf="!thumbnail || !thumbnail.Available" class="no-image"></app-icon>
|
||||
<app-icon *ngIf="!thumbnail || !thumbnail.Available" class="no-image"></app-icon>
|
||||
</div>
|
||||
|
||||
|
||||
<!--Info box -->
|
||||
<div class="info rounded-bottom">
|
||||
{{album.name}} ({{album.count}})
|
||||
<span *ngIf="CanUpdate && !album.locked"
|
||||
(click)="deleteAlbum($event)"
|
||||
class="info-button delete oi oi-trash float-end"></span>
|
||||
<ng-icon *ngIf="CanUpdate && !album.locked"
|
||||
(click)="deleteAlbum($event)"
|
||||
class="info-button delete float-end"
|
||||
name="ionTrashOutline"
|
||||
title="Delete" i18n-title></ng-icon>
|
||||
|
||||
<ng-icon *ngIf="album.locked"
|
||||
class="info-button float-end"
|
||||
name="ionLockClosedOutline"
|
||||
title="Album is locked, cannot be deleted from the webpage."
|
||||
i18n-title></ng-icon>
|
||||
|
||||
<span *ngIf="album.locked"
|
||||
title="Album is locked, cannot be deleted from the webpage."
|
||||
i18n-title
|
||||
class="info-button oi oi-lock-locked float-end"></span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
@ -20,10 +20,14 @@ app-album {
|
||||
|
||||
.add-saved-search .text {
|
||||
position: relative;
|
||||
top: calc(50% - 40px);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.add-saved-search .text .oi {
|
||||
font-size: 80px;
|
||||
.add-saved-search .text ng-icon {
|
||||
font-size: 120px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
[style.height.px]="size"
|
||||
(click)="openModal(modal)">
|
||||
<div class="text">
|
||||
<span class="oi oi-plus" aria-hidden="true"> </span><br/>
|
||||
<ng-icon name="ionAddOutline" class="mb-2"></ng-icon>
|
||||
<span i18n>Add saved search</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -67,7 +67,7 @@
|
||||
<button class="btn btn-primary" type="button"
|
||||
[disabled]="savedSearch.searchQuery.text == ''"
|
||||
(click)="saveSearch()">
|
||||
<span class="oi oi-folder"></span> Save
|
||||
<ng-icon name="ionSaveOutline" class="me-1"></ng-icon><span i18n>Save</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<button class="btn btn-secondary" type="button"
|
||||
[disabled]="disabled"
|
||||
(click)="openModal(modal)">
|
||||
<span class="oi oi-file me-2"></span><ng-container i18n>To .pg2conf</ng-container>
|
||||
<ng-icon class="me-1" name="ionFolderOutline"></ng-icon><ng-container i18n>To .pg2conf</ng-container>
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
@ -13,6 +13,10 @@
|
||||
|
||||
}
|
||||
|
||||
ng-icon.star ::ng-deep svg {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.star.favourite {
|
||||
color: white;
|
||||
}
|
||||
@ -40,11 +44,16 @@ a {
|
||||
}
|
||||
|
||||
.no-image {
|
||||
position: absolute;
|
||||
color: #7f7f7f;
|
||||
font-size: 80px;
|
||||
top: calc(50% - 40px);
|
||||
left: calc(50% - 40px);
|
||||
display: block;
|
||||
color: var(--bs-secondary-color);
|
||||
font-size: 100px;
|
||||
top: calc(50% - 20px);
|
||||
left: calc(50%);
|
||||
transform: translate(-50%, -50%);
|
||||
position: relative;
|
||||
}
|
||||
.no-image ::ng-deep svg {
|
||||
--ng-icon__stroke-width: 32;
|
||||
}
|
||||
|
||||
.photo {
|
||||
|
||||
@ -7,20 +7,22 @@
|
||||
[style.height.px]="size">
|
||||
|
||||
<div class="photo"
|
||||
*ngIf="thumbnail && thumbnail.Available"
|
||||
*ngIf="thumbnail && thumbnail.Available && false"
|
||||
[style.background-image]="getSanitizedThUrl()"></div>
|
||||
|
||||
<span *ngIf="!thumbnail || !thumbnail.Available" class="oi oi-person no-image"
|
||||
aria-hidden="true">
|
||||
</span>
|
||||
<ng-icon *ngIf="!thumbnail || !thumbnail.Available || true"
|
||||
class="no-image" name="ionPersonOutline"></ng-icon>
|
||||
</div>
|
||||
|
||||
|
||||
<!--Info box -->
|
||||
<div class="info rounded-bottom">
|
||||
<span (click)="CanUpdate && toggleFavourite($event)"
|
||||
class="star oi oi-star"
|
||||
[ngClass]="{'favourite':person.isFavourite, 'clickable':CanUpdate}"></span>
|
||||
<ng-icon class="star"
|
||||
name="ionStarOutline"
|
||||
[class.favourite]="person.isFavourite"
|
||||
[class.clickable]="CanUpdate"
|
||||
(click)="CanUpdate && toggleFavourite($event)"
|
||||
></ng-icon>
|
||||
{{person.name}} ({{person.count}})
|
||||
|
||||
</div>
|
||||
|
||||
@ -52,8 +52,17 @@ a.dropdown-item, button.dropdown-item, div.dropdown-item {
|
||||
padding: 0.3rem 1.0rem 0.3rem 0.8rem;
|
||||
}
|
||||
|
||||
a.dropdown-item span, button.dropdown-item span, div.dropdown-item span {
|
||||
padding-right: 0.8rem;
|
||||
a.dropdown-item ng-icon, button.dropdown-item ng-icon, div.dropdown-item ng-icon {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
ng-icon {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
.btn-scroll-up ng-icon {
|
||||
font-size: x-large;
|
||||
margin: -0.2em;
|
||||
}
|
||||
|
||||
|
||||
@ -71,6 +80,6 @@ a.dropdown-item span.badge, button.dropdown-item span.badge {
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.show-btn-scroll-up{
|
||||
.show-btn-scroll-up {
|
||||
right: 1em;
|
||||
}
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
<ng-container *ngIf="authenticationRequired && user.value">
|
||||
<li class="nav-item me-2 ms-2 navbar-text d-xl-block d-none">
|
||||
<span style="white-space: nowrap;">
|
||||
<span class="oi oi-person"></span> {{user.value.name}}
|
||||
<ng-icon name="ionPersonOutline" class="me-1"></ng-icon><span>{{user.value.name}}</span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="nav-item divider-vertical d-xl-block d-none">
|
||||
@ -68,7 +68,7 @@
|
||||
<button id="button-alignment" dropdownToggle
|
||||
type="button" class="btn btn-tertiary dropdown-toggle"
|
||||
aria-controls="dropdown-alignment">
|
||||
<span class="oi oi-menu"></span>
|
||||
<ng-icon class="align-text-top" size="1.2em" name="ionMenuOutline"></ng-icon>
|
||||
<span *ngIf="isAdmin() && notificationService.numberOfNotifications>0"
|
||||
class="navbar-badge badge text-bg-warning">{{notificationService.numberOfNotifications}}</span>
|
||||
</button>
|
||||
@ -79,9 +79,10 @@
|
||||
<li role="menuitem" class="d-xl-none">
|
||||
<div style="white-space: nowrap;" class="dropdown-item">
|
||||
<ng-container *ngIf="authenticationRequired && user.value">
|
||||
<span class="oi oi-person"></span>{{user.value.name}}
|
||||
<ng-icon name="ionPersonOutline"></ng-icon>
|
||||
<span>{{user.value.name}}</span>
|
||||
</ng-container>
|
||||
<app-language class="navbar-btn d-inline-block"></app-language>
|
||||
<app-language class="navbar-btn d-inline-block float-end"></app-language>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item d-xl-none" *ngIf="showShare">
|
||||
@ -92,16 +93,16 @@
|
||||
<button class="btn w-100 btn-secondary" (click)="themeService.toggleMode()">
|
||||
<ng-container [ngSwitch]="themeService.mode">
|
||||
<ng-container *ngSwitchCase="ThemeModes.light">
|
||||
<span class="oi oi-sun"></span>
|
||||
<ng-icon name="ionSunnyOutline"></ng-icon>
|
||||
<ng-container i18n>Light</ng-container>
|
||||
</ng-container>
|
||||
<ng-container *ngSwitchCase="ThemeModes.dark">
|
||||
<span class="oi oi-moon"></span>
|
||||
<ng-icon name="ionMoonOutline"></ng-icon>
|
||||
<ng-container i18n>Dark</ng-container>
|
||||
</ng-container>
|
||||
<ng-container *ngSwitchCase="ThemeModes.auto">
|
||||
<span class="oi oi-moon"></span>
|
||||
<span class="oi oi-sun" style="margin-left: -0.8rem"></span>
|
||||
<ng-icon name="ionMoonOutline"></ng-icon>
|
||||
<ng-icon name="ionSunnyOutline" style="margin-left: -0.3rem"></ng-icon>
|
||||
<ng-container i18n>Auto</ng-container>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
@ -113,14 +114,14 @@
|
||||
<li class="nav-item d-md-none"
|
||||
*ngIf="link.type === NavigationLinkTypes.albums && isAlbumsAvailable()">
|
||||
<a class="dropdown-item" [routerLink]="['/albums']" [class.active]="isLinkActive('/albums')">
|
||||
<span class="oi oi-grid-two-up"></span>
|
||||
<ng-icon name="ionAlbumsOutline"></ng-icon>
|
||||
<ng-container i18n>Albums</ng-container>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item d-md-none"
|
||||
*ngIf="link.type === NavigationLinkTypes.faces && isFacesAvailable()">
|
||||
<a class="dropdown-item" [routerLink]="['/faces']" [class.active]="isLinkActive('/faces')">
|
||||
<span class="oi oi-people"></span>
|
||||
<ng-icon name="ionPeopleOutline"></ng-icon>
|
||||
<ng-container i18n>Faces</ng-container>
|
||||
</a>
|
||||
</li>
|
||||
@ -128,21 +129,21 @@
|
||||
<a class="dropdown-item"
|
||||
[routerLink]="['/gallery']"
|
||||
[queryParams]="queryService.getParams()" [class.active]="isLinkActive('/gallery')">
|
||||
<span class="oi oi-image"></span>
|
||||
<ng-icon name="ionImagesOutline"></ng-icon>
|
||||
<ng-container i18n>Gallery</ng-container>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item d-md-none" *ngIf="link.type === NavigationLinkTypes.url">
|
||||
<a class="dropdown-item" [href]="link.url" [class.active]="isLinkActive(link.url)">
|
||||
<span class="oi oi-external-link"></span>
|
||||
{{link.name}}
|
||||
<ng-icon name="ionLinkOutline"></ng-icon>
|
||||
<span>{{link.name}}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item d-md-none" *ngIf="link.type === NavigationLinkTypes.search">
|
||||
<a class="dropdown-item" [routerLink]="['/search', link.SearchQuery | json]"
|
||||
[class.active]="isSearchActive(link.SearchQuery)">
|
||||
<span class="oi oi-link-intact"></span>
|
||||
{{link.name}}
|
||||
<ng-icon name="ionSearchOutline"></ng-icon>
|
||||
<span>{{link.name}}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ng-container>
|
||||
@ -151,7 +152,7 @@
|
||||
<li role="menuitem" dropdown [autoClose]="false"
|
||||
placement="bottom left" container="body">
|
||||
<a dropdownToggle class="dropdown-item">
|
||||
<span class="oi oi-command"></span>
|
||||
<ng-icon name="ionHammerOutline"></ng-icon>
|
||||
<ng-container i18n>Tools</ng-container>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-start" *dropdownMenu role="menu">
|
||||
@ -159,7 +160,7 @@
|
||||
<li role="menuitem" *ngIf="isAdmin()">
|
||||
<a class="dropdown-item"
|
||||
[routerLink]="['/duplicates']">
|
||||
<span class="oi oi-layers"></span>
|
||||
<ng-icon name="ionCopyOutline"></ng-icon>
|
||||
<ng-container i18n>Duplicates</ng-container>
|
||||
</a>
|
||||
</li>
|
||||
@ -180,7 +181,7 @@
|
||||
</li>
|
||||
<li role="menuitem" *ngIf="isAdmin()">
|
||||
<a class="dropdown-item" [routerLink]="['/admin']">
|
||||
<span class="oi oi-wrench"></span>
|
||||
<ng-icon name="ionSettingsOutline"></ng-icon>
|
||||
<span *ngIf="notificationService.numberOfNotifications>0"
|
||||
class="badge rounded-pill position-absolute p-0 text-bg-warning">{{notificationService.numberOfNotifications}}</span>
|
||||
<ng-container i18n>Settings</ng-container>
|
||||
@ -188,7 +189,7 @@
|
||||
</li>
|
||||
<li role="menuitem" *ngIf="authenticationRequired">
|
||||
<button class="dropdown-item btn btn-link" (click)="logout()">
|
||||
<span class="oi oi-account-logout"></span>
|
||||
<ng-icon name="ionLogOutOutline"></ng-icon>
|
||||
<ng-container i18n>Logout</ng-container>
|
||||
</button>
|
||||
</li>
|
||||
@ -209,5 +210,5 @@
|
||||
(click)="scrollUp()"
|
||||
[class.show-btn-scroll-up]="!shouldHideNavbar && !navbarKeepTop"
|
||||
class="btn btn-tertiary rounded-pill btn-scroll-up">
|
||||
<span class="oi oi-chevron-top"></span>
|
||||
<ng-icon name="ionChevronUpOutline"></ng-icon>
|
||||
</button>
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter-option .oi {
|
||||
.filter-option .pin {
|
||||
height: 0;
|
||||
font-size: 0;
|
||||
transition: all 0.1s;
|
||||
@ -24,19 +24,18 @@
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.filter-option:hover .oi.filter-pin, .filter-option .oi.filter-only-selected {
|
||||
.filter-option:hover .pin.filter-pin, .filter-option .pin.filter-only-selected {
|
||||
display: inline-block;
|
||||
height: auto;
|
||||
font-size: 1rem;
|
||||
padding: 0 0.3rem;
|
||||
margin-left: -0.6rem;
|
||||
}
|
||||
|
||||
.filter-option:hover .oi.filter-pin:hover {
|
||||
.filter-option:hover .pin.filter-pin:hover {
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
.filter-option .oi.filter-only-selected {
|
||||
.filter-option .pin.filter-only-selected {
|
||||
color: var(--bs-primary);
|
||||
}
|
||||
|
||||
|
||||
@ -33,12 +33,11 @@
|
||||
<div class="row">
|
||||
<div class="position-absolute" *ngIf="filterService.statistic.length>1">
|
||||
<div class="text-md-center">
|
||||
<span
|
||||
[class.oi-chevron-bottom]="showStatistic"
|
||||
[class.oi-chevron-top]="!showStatistic"
|
||||
(click)="showStatistic = !showStatistic"
|
||||
<ng-icon
|
||||
[name]="!showStatistic ? 'ionChevronUpOutline' : 'ionChevronDownOutline'"
|
||||
style="top: -2px; cursor: pointer"
|
||||
class="oi"></span>
|
||||
class="position-relative"
|
||||
(click)="showStatistic = !showStatistic"></ng-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-1-half col-12 d-table">
|
||||
@ -104,10 +103,12 @@
|
||||
class="filter-option list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
|
||||
<div>
|
||||
<span (click)="toggleSelectOnly(filter, option, $event)"
|
||||
class="oi oi-pin" title="Select only this"
|
||||
[ngClass]="isOnlySelected(filter,option) ? 'filter-only-selected' : 'filter-pin'"
|
||||
i18n-title></span>
|
||||
<ng-icon name="ionFlagOutline"
|
||||
class="pin"
|
||||
(click)="toggleSelectOnly(filter, option, $event)"
|
||||
title="Select only this"
|
||||
[ngClass]="isOnlySelected(filter,option) ? 'filter-only-selected' : 'filter-pin'"
|
||||
i18n-title></ng-icon>
|
||||
{{option.name === undefined ? unknownText : option.name}}
|
||||
</div>
|
||||
<span class="badge"
|
||||
|
||||
@ -47,8 +47,8 @@
|
||||
[mdFiles]="directoryContent.metaFile | mdFiles"></app-gallery-blog>
|
||||
|
||||
|
||||
<button class="btn btn-blog-details text-body" (click)="blogOpen=!blogOpen"><span
|
||||
class="oi oi-chevron-{{blogOpen ? 'top' : 'bottom'}}"></span>
|
||||
<button class="btn btn-blog-details text-body" (click)="blogOpen=!blogOpen">
|
||||
<ng-icon [name]="blogOpen ? 'ionChevronUpOutline' : 'ionChevronDownOutline'"></ng-icon>
|
||||
</button>
|
||||
</div>
|
||||
<app-gallery-map
|
||||
|
||||
@ -6,12 +6,13 @@
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
.static span {
|
||||
.static ng-icon {
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
left: 50%;
|
||||
display: table;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sk-cube-grid {
|
||||
@ -34,6 +35,7 @@
|
||||
.sk-cube-grid.animate .sk-cube1 {
|
||||
-webkit-animation-delay: 0.4s;
|
||||
animation-delay: 0.4s;
|
||||
border-top-left-radius: var(--bs-border-radius);
|
||||
}
|
||||
|
||||
.sk-cube-grid.animate .sk-cube2 {
|
||||
@ -44,6 +46,7 @@
|
||||
.sk-cube-grid.animate .sk-cube3 {
|
||||
-webkit-animation-delay: 0.8s;
|
||||
animation-delay: 0.8s;
|
||||
border-top-right-radius: var(--bs-border-radius);
|
||||
}
|
||||
|
||||
.sk-cube-grid.animate .sk-cube4 {
|
||||
@ -59,6 +62,7 @@
|
||||
.sk-cube-grid.animate .sk-cube6 {
|
||||
-webkit-animation-delay: 0.6s;
|
||||
animation-delay: 0.6s;
|
||||
border-bottom-left-radius: var(--bs-border-radius);
|
||||
}
|
||||
|
||||
.sk-cube-grid.animate .sk-cube7 {
|
||||
@ -74,6 +78,7 @@
|
||||
.sk-cube-grid.animate .sk-cube9 {
|
||||
-webkit-animation-delay: 0.4s;
|
||||
animation-delay: 0.4s;
|
||||
border-bottom-right-radius: var(--bs-border-radius);
|
||||
}
|
||||
|
||||
@-webkit-keyframes sk-cubeGridScaleDelay {
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
<div class="static" *ngIf="animate == false">
|
||||
<span class="oi"
|
||||
[ngClass]="error ? 'oi-warning' : 'oi-image'" aria-hidden="true">
|
||||
</span>
|
||||
<ng-icon [name]="error ? 'ionWarningOutline' : 'ionImageOutline'"></ng-icon>
|
||||
</div>
|
||||
<div class="sk-cube-grid animate" *ngIf="animate == true">
|
||||
<div class="sk-cube sk-cube1"></div>
|
||||
|
||||
@ -153,6 +153,6 @@ a {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.photo-keywords .oi-person {
|
||||
.photo-keywords ng-icon {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
@ -12,7 +12,9 @@
|
||||
|
||||
|
||||
<div *ngIf="gridMedia.isVideo()" class="video-indicator">
|
||||
{{gridMedia.Video.metadata.duration | duration}} <span class="oi oi-video"></span></div>
|
||||
{{gridMedia.Video.metadata.duration | duration}}
|
||||
<ng-icon name="ionVideocamOutline"></ng-icon>
|
||||
</div>
|
||||
|
||||
|
||||
<!--Info box -->
|
||||
@ -21,12 +23,10 @@
|
||||
<div class="photo-name">{{Title}}</div>
|
||||
|
||||
<div class="photo-position" *ngIf="gridMedia.hasPositionData()">
|
||||
<span class="oi oi-map-marker"></span>
|
||||
<ng-icon name="ionLocationOutline"></ng-icon>
|
||||
<ng-template [ngIf]="getPositionText()">
|
||||
<a [routerLink]="['/search', getPositionSearchQuery()]"
|
||||
*ngIf="searchEnabled">
|
||||
{{getPositionText()}}
|
||||
</a>
|
||||
*ngIf="searchEnabled">{{getPositionText()}}</a>
|
||||
<span *ngIf="!searchEnabled">{{getPositionText()}}</span>
|
||||
</ng-template>
|
||||
</div>
|
||||
@ -37,11 +37,14 @@
|
||||
[routerLink]="['/search', getTextSearchQuery(keyword.value,keyword.type)]" [ngSwitch]="keyword.type">
|
||||
<ng-template [ngSwitchCase]="SearchQueryTypes.keyword">#</ng-template><!--
|
||||
-->
|
||||
<ng-template [ngSwitchCase]="SearchQueryTypes.person"><span class="oi oi-person"></span></ng-template><!--
|
||||
<ng-template [ngSwitchCase]="SearchQueryTypes.person">
|
||||
<ng-icon name="ionPersonOutline"></ng-icon>
|
||||
</ng-template><!--
|
||||
-->{{keyword.value}}</a>
|
||||
<span *ngIf="!searchEnabled" [ngSwitch]="keyword.type">
|
||||
<ng-template [ngSwitchCase]="SearchQueryTypes.keyword">#</ng-template><!--
|
||||
--><ng-template [ngSwitchCase]="SearchQueryTypes.person"><span class="oi oi-person"></span></ng-template><!--
|
||||
--><ng-template [ngSwitchCase]="SearchQueryTypes.person"><ng-icon
|
||||
name="ionPersonOutline"></ng-icon></ng-template><!--
|
||||
-->{{keyword.value}}</span>
|
||||
<ng-template [ngIf]="!last">, </ng-template>
|
||||
</ng-template>
|
||||
|
||||
@ -1,30 +1,13 @@
|
||||
import {
|
||||
Component,
|
||||
ElementRef,
|
||||
Input,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
ViewChild,
|
||||
} from '@angular/core';
|
||||
import { Dimension, IRenderable } from '../../../../model/IRenderable';
|
||||
import { GridMedia } from '../GridMedia';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import {
|
||||
Thumbnail,
|
||||
ThumbnailManagerService,
|
||||
} from '../../thumbnailManager.service';
|
||||
import { Config } from '../../../../../../common/config/public/Config';
|
||||
import { PageHelper } from '../../../../model/page.helper';
|
||||
import {
|
||||
PhotoDTO,
|
||||
PhotoMetadata,
|
||||
} from '../../../../../../common/entities/PhotoDTO';
|
||||
import {
|
||||
SearchQueryTypes,
|
||||
TextSearch,
|
||||
TextSearchQueryMatchTypes,
|
||||
} from '../../../../../../common/entities/SearchQueryDTO';
|
||||
import { AuthenticationService } from '../../../../model/network/authentication.service';
|
||||
import {Component, ElementRef, Input, OnDestroy, OnInit, ViewChild,} from '@angular/core';
|
||||
import {Dimension, IRenderable} from '../../../../model/IRenderable';
|
||||
import {GridMedia} from '../GridMedia';
|
||||
import {RouterLink} from '@angular/router';
|
||||
import {Thumbnail, ThumbnailManagerService,} from '../../thumbnailManager.service';
|
||||
import {Config} from '../../../../../../common/config/public/Config';
|
||||
import {PageHelper} from '../../../../model/page.helper';
|
||||
import {PhotoDTO, PhotoMetadata,} from '../../../../../../common/entities/PhotoDTO';
|
||||
import {SearchQueryTypes, TextSearch, TextSearchQueryMatchTypes,} from '../../../../../../common/entities/SearchQueryDTO';
|
||||
import {AuthenticationService} from '../../../../model/network/authentication.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-gallery-grid-photo',
|
||||
@ -34,8 +17,8 @@ import { AuthenticationService } from '../../../../model/network/authentication.
|
||||
})
|
||||
export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
|
||||
@Input() gridMedia: GridMedia;
|
||||
@ViewChild('img', { static: false }) imageRef: ElementRef;
|
||||
@ViewChild('photoContainer', { static: true }) container: ElementRef;
|
||||
@ViewChild('img', {static: false}) imageRef: ElementRef;
|
||||
@ViewChild('photoContainer', {static: true}) container: ElementRef;
|
||||
|
||||
thumbnail: Thumbnail;
|
||||
keywords: { value: string; type: SearchQueryTypes }[] = null;
|
||||
@ -115,10 +98,10 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
|
||||
isInView(): boolean {
|
||||
return (
|
||||
PageHelper.ScrollY <
|
||||
this.container.nativeElement.offsetTop +
|
||||
this.container.nativeElement.clientHeight &&
|
||||
this.container.nativeElement.offsetTop +
|
||||
this.container.nativeElement.clientHeight &&
|
||||
PageHelper.ScrollY + window.innerHeight >
|
||||
this.container.nativeElement.offsetTop
|
||||
this.container.nativeElement.offsetTop
|
||||
);
|
||||
}
|
||||
|
||||
@ -156,8 +139,8 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
|
||||
return (
|
||||
(this.gridMedia.media as PhotoDTO).metadata.positionData.city ||
|
||||
(this.gridMedia.media as PhotoDTO).metadata.positionData.state ||
|
||||
(this.gridMedia.media as PhotoDTO).metadata.positionData.country
|
||||
);
|
||||
(this.gridMedia.media as PhotoDTO).metadata.positionData.country || ''
|
||||
).trim();
|
||||
}
|
||||
|
||||
mouseOver(): void {
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
.navigation-arrow {
|
||||
width: 30px;
|
||||
min-width: 60px;
|
||||
width: 60px;
|
||||
height: 100px;
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
@ -8,22 +7,22 @@
|
||||
display: inline-block;
|
||||
padding: 15px;
|
||||
cursor: pointer;
|
||||
font-size: xx-large;
|
||||
font-size: xxx-large;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.navigation-arrow span {
|
||||
vertical-align: bottom;
|
||||
.navigation-arrow ng-icon {
|
||||
margin-left: -0.3em;
|
||||
margin-right: -0.3em;
|
||||
transform: translateY(-50%);
|
||||
top: 50%;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
#controllers-container {
|
||||
z-index: 1100;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
position: fixed;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@ -59,18 +58,17 @@
|
||||
}
|
||||
|
||||
.controls-background {
|
||||
padding: 5px;
|
||||
display: inline-block;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.controls .control-button {
|
||||
margin-left: 0.2em;
|
||||
margin-right: 0.2em;
|
||||
margin-left: 0.1em;
|
||||
margin-right: 0.1em;
|
||||
display: inline-block;
|
||||
padding: 0 0.5rem;
|
||||
padding: 0 0.2rem;
|
||||
font-size: 1.5rem;
|
||||
color: white;
|
||||
background-color: transparent;
|
||||
@ -119,14 +117,14 @@
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.controls-video .oi,
|
||||
.controls-video ng-icon,
|
||||
.controls-video input {
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.controls-big-play span {
|
||||
.controls-big-play ng-icon {
|
||||
font-size: 20vh;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -136,10 +134,10 @@
|
||||
|
||||
.controls-video input[type=range] {
|
||||
padding: 0;
|
||||
margin-top: 6px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.controls-video .oi {
|
||||
.controls-video ng-icon {
|
||||
text-align: center;
|
||||
max-width: 45px;
|
||||
margin-left: 10px;
|
||||
@ -196,7 +194,6 @@
|
||||
.controls-zoom {
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
@ -211,7 +208,7 @@
|
||||
|
||||
input[type="range"].zoom-progress {
|
||||
height: 11px;
|
||||
margin-top: 3px;
|
||||
margin-top: 9px;
|
||||
border: 1px solid white;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
@ -226,7 +223,7 @@ input[type="range"].zoom-progress::-moz-range-track {
|
||||
}
|
||||
|
||||
|
||||
.controls-zoom .oi {
|
||||
.controls-zoom ng-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -272,7 +269,7 @@ input[type="range"].zoom-progress::-moz-range-track {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.face:hover,.face:hover .face-box,.face:hover .face-name {
|
||||
.face:hover, .face:hover .face-box, .face:hover .face-name {
|
||||
opacity: 1.0;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -293,8 +290,9 @@ input[type="range"].zoom-progress::-moz-range-track {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
canvas{
|
||||
canvas {
|
||||
right: 12px;
|
||||
position: relative;
|
||||
top: -34px;
|
||||
top: -50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
@ -4,27 +4,27 @@
|
||||
*ngIf="Title">{{Title}}</div>
|
||||
|
||||
<div [class.dim-controls]="controllersDimmed"
|
||||
class="controls controls-top">
|
||||
<div class="controls-background">
|
||||
class="controls controls-top pt-1">
|
||||
<div class="controls-background rounded-start-bottom pe-1">
|
||||
<div class="highlight control-button" (click)="toggleInfoPanel.emit()"
|
||||
title="info key: i" i18n-title>
|
||||
<span class="oi oi-info"></span>
|
||||
<ng-icon class="align-top" size="1.2em" name="ionInformationOutline"></ng-icon>
|
||||
</div>
|
||||
|
||||
<div *ngIf="fullScreenService.isFullScreenEnabled()"
|
||||
class="highlight control-button"
|
||||
(click)="toggleFullScreen.emit()"
|
||||
title="toggle fullscreen, key: f" i18n-title>
|
||||
<span class="oi oi-fullscreen-exit">
|
||||
</span>
|
||||
<ng-icon style="margin-right: 0.2em; margin-top: -0.05em" class="align-top" size="0.9em"
|
||||
name="ionContractOutline"></ng-icon>
|
||||
</div>
|
||||
|
||||
<div *ngIf="!fullScreenService.isFullScreenEnabled()"
|
||||
class="highlight control-button"
|
||||
(click)="toggleFullScreen.emit(true)"
|
||||
title="toggle fullscreen, key: f" i18n-title>
|
||||
<span class="oi oi-fullscreen-enter">
|
||||
</span>
|
||||
<ng-icon style="margin-right: 0.2em; margin-top: -0.05em" class="align-top" size="0.9em"
|
||||
name="ionExpandOutline"></ng-icon>
|
||||
</div>
|
||||
|
||||
<div class="btn-group" dropdown [insideClick]="true">
|
||||
@ -32,7 +32,7 @@
|
||||
class="border-0 highlight control-button"
|
||||
data-bs-auto-close="outside"
|
||||
aria-controls="dropdown-basic">
|
||||
<span class="oi oi-menu"></span>
|
||||
<ng-icon size="1.2em" name="ionMenuOutline"></ng-icon>
|
||||
</button>
|
||||
<ul id="dropdown-basic" *dropdownMenu class="dropdown-menu dropdown-menu-right"
|
||||
role="menu" aria-labelledby="button-basic">
|
||||
@ -41,7 +41,8 @@
|
||||
[href]="activePhoto.gridMedia.getMediaPath()"
|
||||
[download]="activePhoto.gridMedia.media.name"
|
||||
class="dropdown-item">
|
||||
<span class="oi oi-data-transfer-download pe-2"></span>
|
||||
<ng-icon class="me-2"
|
||||
name="ionDownloadOutline" title="Download" i18n-title></ng-icon>
|
||||
<span i18n>Download</span>
|
||||
<small>(shift + D)</small>
|
||||
</a>
|
||||
@ -49,7 +50,8 @@
|
||||
<li role="menuitem"
|
||||
dropdown>
|
||||
<div class="dropdown-item">
|
||||
<span class="oi oi-clock pe-2"></span>
|
||||
<ng-icon class="me-2"
|
||||
name="ionTimerOutline" title="Download" i18n-title></ng-icon>
|
||||
<span class="pe-2" i18n-title title="Slideshow playback speed" i18n>Slideshow speed:</span>
|
||||
<select
|
||||
class="form-select d-inline-block w-auto"
|
||||
@ -107,9 +109,7 @@
|
||||
<div class="highlight control-button"
|
||||
(click)="closeLightbox()"
|
||||
title="close, key: Escape" i18n-title>
|
||||
<span class="oi oi-x">
|
||||
|
||||
</span>
|
||||
<ng-icon size="1.2em" name="ionCloseOutline"></ng-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -167,66 +167,73 @@
|
||||
|
||||
<div [class.dim-controls]="controllersDimmed" class="navigation-arrow highlight rounded-end"
|
||||
*ngIf="navigation.hasPrev && zoom == 1" title="key: left arrow" id="leftArrow" i18n-title
|
||||
(click)="previousPhoto.emit()"><span
|
||||
class="oi oi-chevron-left"></span></div>
|
||||
(click)="previousPhoto.emit()">
|
||||
<ng-icon name="ionChevronBackOutline"></ng-icon>
|
||||
</div>
|
||||
<div [class.dim-controls]="controllersDimmed" class="navigation-arrow highlight rounded-start"
|
||||
*ngIf="navigation.hasNext && zoom == 1" title="key: right arrow" id="rightArrow" i18n-title
|
||||
(click)="nextMediaManuallyTriggered()">
|
||||
<span class="oi oi-chevron-right"></span>
|
||||
<ng-icon name="ionChevronForwardOutline"></ng-icon>
|
||||
<canvas
|
||||
*ngIf="playBackState == PlayBackStates.Play"
|
||||
#canvas width="55px" height="55px"></canvas>
|
||||
|
||||
</div>
|
||||
|
||||
<div [class.dim-controls]="controllersDimmed" class="controls controls-zoom row" *ngIf="Zoom > 1">
|
||||
<div [class.dim-controls]="controllersDimmed" class="controls controls-zoom row mb-3" *ngIf="Zoom > 1">
|
||||
<div class="col-1 col-md-4">
|
||||
<span (click)="zoomOut()" i18n-title title="Zoom out, key: '-'"
|
||||
class="oi oi-zoom-out float-end"></span>
|
||||
<ng-icon name="ionRemoveOutline" class="float-end highlight"
|
||||
(click)="zoomOut()" i18n-title title="Zoom out, key: '-'"></ng-icon>
|
||||
</div>
|
||||
<input type="range"
|
||||
[(ngModel)]="Zoom" min="1" [max]="MAX_ZOOM" step="0.1"
|
||||
value="1" class="col-10 col-md-4 zoom-progress">
|
||||
value="1" class="col-10 col-md-4 zoom-progress rounded ">
|
||||
<div class="col-1 col-md-4">
|
||||
<span (click)="zoomIn()" i18n-title title="Zoom in, key: '+'"
|
||||
class="oi oi-zoom-in float-left"></span>
|
||||
<ng-icon name="ionAddOutline" class="float-start highlight"
|
||||
(click)="zoomIn()" i18n-title title="Zoom in, key: '+'"></ng-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div [class.dim-controls]="controllersDimmed" class="controls controls-playback"
|
||||
*ngIf="zoom == 1 && activePhoto && activePhoto.gridMedia.isPhoto()">
|
||||
<div class="controls-background">
|
||||
<span
|
||||
<div class="controls-background rounded-start-top pe-1 pb-1">
|
||||
<ng-icon
|
||||
*ngIf="playBackState == PlayBackStates.Play"
|
||||
class="oi oi-media-pause highlight control-button button-active"
|
||||
name="ionPauseOutline"
|
||||
class=" highlight control-button button-active me-2 mb-2"
|
||||
(click)="pause()"
|
||||
title="pause"></span>
|
||||
<span
|
||||
title="Pause" i18n-title></ng-icon>
|
||||
|
||||
<ng-icon
|
||||
*ngIf="playBackState == PlayBackStates.Paused"
|
||||
class="oi oi-media-play highlight control-button"
|
||||
name="ionPlayOutline"
|
||||
class="highlight control-button me-2 mb-2"
|
||||
(click)="play()"
|
||||
title="auto play"></span>
|
||||
title="Auto play" i18n-title></ng-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div [class.dim-controls]="controllersDimmed" class="controls controls-big-play"
|
||||
<div [class.dim-controls]="controllersDimmed" class="controls controls-big-play mb-3"
|
||||
*ngIf="activePhoto && activePhoto.gridMedia.isVideo() && mediaElement.Paused">
|
||||
<span class="oi oi-media-play"></span>
|
||||
<ng-icon name="ionPlayOutline"></ng-icon>
|
||||
</div>
|
||||
|
||||
<div class="controls controls-video row" *ngIf="activePhoto && activePhoto.gridMedia.isVideo()">
|
||||
<span class="oi col-1"
|
||||
[ngClass]="!mediaElement.Paused ? 'oi-media-pause':'oi-media-play'"
|
||||
(click)="mediaElement.playPause()"></span>
|
||||
<div class="controls controls-video row mb-3" *ngIf="activePhoto && activePhoto.gridMedia.isVideo()">
|
||||
<div class="col-1">
|
||||
<ng-icon [name]="!mediaElement.Paused ? 'ionPauseOutline' :'ionPlayOutline'"
|
||||
(click)="mediaElement.playPause()"></ng-icon>
|
||||
</div>
|
||||
<input type="range" [(ngModel)]="mediaElement.VideoProgress"
|
||||
min="0" max="100" step="0.1" class="col video-progress">
|
||||
<span class="oi col-1"
|
||||
[ngClass]="mediaElement.Muted ? 'oi-volume-off':'oi-volume-high'"
|
||||
(click)="mediaElement.mute()"></span>
|
||||
min="0" max="100" step="0.1" class="col video-progress rounded">
|
||||
|
||||
<div class="col-1">
|
||||
<ng-icon [name]="mediaElement.Muted ? 'ionVolumeMuteOutline' :'ionVolumeMediumOutline'"
|
||||
(click)="mediaElement.mute()"></ng-icon>
|
||||
</div>
|
||||
<input type="range"
|
||||
[(ngModel)]="mediaElement.VideoVolume" min="0" max="1" step="0.1"
|
||||
value="1" class="col-2 col-md-1 volume">
|
||||
value="1" class="col-2 col-md-1 volume rounded">
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@ -304,6 +304,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
|
||||
|
||||
this.ctx.lineWidth = 5;
|
||||
this.ctx.strokeStyle = 'white';
|
||||
this.ctx.lineCap = 'round';
|
||||
this.ctx.clearRect(0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height);
|
||||
this.ctx.beginPath();
|
||||
this.ctx.arc(this.canvas.nativeElement.width / 2, this.canvas.nativeElement.height / 2, this.canvas.nativeElement.width / 2 - this.ctx.lineWidth, 0, p * 2 * Math.PI);
|
||||
@ -432,7 +433,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
|
||||
}
|
||||
|
||||
private hideControls = () => {
|
||||
this.controllersDimmed = true;
|
||||
//this.controllersDimmed = true;
|
||||
};
|
||||
|
||||
private updateFaceContainerDim(): void {
|
||||
|
||||
@ -6,21 +6,20 @@
|
||||
.row {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding: 10px;
|
||||
padding: 10px 16px 10px 16px;
|
||||
}
|
||||
|
||||
.details-icon {
|
||||
margin-top: .7rem;
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
.details-main {
|
||||
font-size: x-large;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.details-sub {
|
||||
padding: 0;
|
||||
font-size: 0.875rem;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.details-sub div {
|
||||
|
||||
@ -5,10 +5,10 @@
|
||||
</button>
|
||||
</div>
|
||||
<div class="row" *ngIf="galleryService.isSearchResult()">
|
||||
<div class="col-2">
|
||||
<span class="details-icon oi oi-folder"></span>
|
||||
<div class="col-1 ps-0">
|
||||
<ng-icon class="details-icon" name="ionFolderOutline"></ng-icon>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<div class="col-11">
|
||||
<a class="details-main dir-link"
|
||||
title="{{DirectoryPath}}"
|
||||
[routerLink]="['/gallery', DirectoryPath]"
|
||||
@ -18,10 +18,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-2">
|
||||
<span class="details-icon oi oi-image"></span>
|
||||
<div class="col-1 ps-0">
|
||||
<ng-icon class="details-icon" name="ionImageOutline"></ng-icon>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<div class="col-11">
|
||||
<div class="details-main" >
|
||||
{{media.name}}
|
||||
</div>
|
||||
@ -34,10 +34,10 @@
|
||||
</div>
|
||||
|
||||
<div class="row" *ngIf="media.metadata.creationDate">
|
||||
<div class="col-2">
|
||||
<span class="details-icon oi oi-calendar"></span>
|
||||
<div class="col-1 ps-0">
|
||||
<ng-icon class="details-icon" name="ionCalendarOutline"></ng-icon>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<div class="col-11">
|
||||
<div class="details-main">
|
||||
{{ media.metadata.creationDate | date: (isThisYear() ? 'MMMM d' : 'longDate') : 'UTC' }}
|
||||
</div>
|
||||
@ -49,10 +49,10 @@
|
||||
|
||||
|
||||
<div class="row" *ngIf="VideoData && (VideoData.duration || VideoData.bitRate)">
|
||||
<div class="col-2">
|
||||
<span class="details-icon oi oi-video"></span>
|
||||
<div class="col-1 ps-0">
|
||||
<ng-icon class="details-icon" name="ionVideocamOutline"></ng-icon>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<div class="col-11">
|
||||
<div class="details-main">
|
||||
{{"Video"}}
|
||||
</div>
|
||||
@ -73,10 +73,10 @@
|
||||
|
||||
|
||||
<div class="row" *ngIf="CameraData">
|
||||
<div class="col-2">
|
||||
<span class="details-icon oi oi-camera-slr"></span>
|
||||
<div class="col-1 ps-0">
|
||||
<ng-icon class="details-icon" name="ionCameraOutline"></ng-icon>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<div class="col-11">
|
||||
<div class="details-main">
|
||||
{{CameraData.model || CameraData.make || "Camera"}}
|
||||
</div>
|
||||
@ -95,32 +95,32 @@
|
||||
</div>
|
||||
|
||||
<div class="row" *ngIf="Rating">
|
||||
<div class="col-2" title="rating" p18n-rating>
|
||||
<span class="details-icon oi oi-star"></span>
|
||||
<div class="col-1 ps-0" title="rating" p18n-rating>
|
||||
<ng-icon class="details-icon" name="ionStarOutline"></ng-icon>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<div class="details-main mt-2" [title]="Rating + ' stars'">
|
||||
<span *ngFor="let stars of [].constructor(Rating)" class="oi oi-star text-body me-1"></span>
|
||||
<span *ngFor="let stars of [].constructor(5-Rating)" class="oi oi-star text-body-tertiary me-1"></span>
|
||||
<div class="col-11">
|
||||
<div class="details-main" [title]="Rating + ' stars'">
|
||||
<ng-icon *ngFor="let stars of [].constructor(Rating)" class="text-body me-1" name="ionStar"></ng-icon>
|
||||
<ng-icon *ngFor="let stars of [].constructor(5-Rating)" class="text-body-tertiary me-1" name="ionStarOutline"></ng-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" *ngIf="keywords">
|
||||
<div class="col-2">
|
||||
<span class="details-icon oi oi-tags"></span>
|
||||
<div class="col-1 ps-0">
|
||||
<ng-icon class="details-icon" name="ionPricetagOutline"></ng-icon>
|
||||
</div>
|
||||
<div class="col-10 keywords">
|
||||
<div class="col-11 keywords">
|
||||
<ng-template ngFor let-keyword [ngForOf]="keywords" let-last="last">
|
||||
<a *ngIf="searchEnabled"
|
||||
[routerLink]="['/search', getTextSearchQuery(keyword.value,keyword.type)]" [ngSwitch]="keyword.type">
|
||||
<ng-template [ngSwitchCase]="SearchQueryTypes.keyword">#</ng-template><!--
|
||||
-->
|
||||
<ng-template [ngSwitchCase]="SearchQueryTypes.person"><span class="oi oi-person"></span></ng-template><!--
|
||||
<ng-template [ngSwitchCase]="SearchQueryTypes.person"><ng-icon name="ionPersonOutline"></ng-icon></ng-template><!--
|
||||
-->{{keyword.value}}</a>
|
||||
<span *ngIf="!searchEnabled" [ngSwitch]="keyword.type">
|
||||
<ng-template [ngSwitchCase]="SearchQueryTypes.keyword">#</ng-template><!--
|
||||
--><ng-template [ngSwitchCase]="SearchQueryTypes.person"><span class="oi oi-person"></span></ng-template><!--
|
||||
--><ng-template [ngSwitchCase]="SearchQueryTypes.person"><ng-icon name="ionPersonOutline"></ng-icon></ng-template><!--
|
||||
-->{{keyword.value}}</span>
|
||||
<ng-template [ngIf]="!last">, </ng-template>
|
||||
</ng-template>
|
||||
@ -129,10 +129,10 @@
|
||||
|
||||
|
||||
<div class="row" *ngIf="hasTextPositionData() || hasGPS()">
|
||||
<div class="col-2">
|
||||
<span class="details-icon oi oi-map-marker"></span>
|
||||
<div class="col-1 ps-0">
|
||||
<ng-icon class="details-icon" name="ionLocationOutline"></ng-icon>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<div class="col-11">
|
||||
<div class="details-main">
|
||||
{{getPositionText() || "Position"}}
|
||||
</div>
|
||||
|
||||
@ -42,3 +42,7 @@ app-info-panel {
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
ng-icon.h2 ::ng-deep svg {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
<div class="container h-100 flex-column" *ngIf="videoSourceError && activePhoto">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-md-8 text-white text-center">
|
||||
<span class="oi oi-warning h2 me-2"></span><span class="h2" i18n>Error during loading the video.</span>
|
||||
<ng-icon name="ionWarningOutline" class="h2 me-2 align-bottom"></ng-icon><span class="h2" i18n>Error during loading the video.</span>
|
||||
<br/>
|
||||
<ng-container *ngIf="activePhoto.gridMedia.isVideoTranscodingNeeded()" i18n>
|
||||
Most likely the video is not transcoded.
|
||||
|
||||
@ -42,6 +42,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
|
||||
public status: LightboxStates = LightboxStates.Closed;
|
||||
public infoPanelVisible = false;
|
||||
public infoPanelWidth = 0;
|
||||
private infoPanelMaxWidth = 400;
|
||||
public animating = false;
|
||||
public photoFrameDim = {width: 1, height: 1, aspect: 1};
|
||||
public videoSourceError = false;
|
||||
@ -93,7 +94,15 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
|
||||
}
|
||||
}
|
||||
|
||||
private updateInfoPanelWidth() {
|
||||
this.infoPanelMaxWidth = Math.min(400, Math.ceil(window.innerWidth + 1));
|
||||
if ((window.innerWidth - this.infoPanelMaxWidth) < this.infoPanelMaxWidth * 0.3) {
|
||||
this.infoPanelMaxWidth = Math.ceil(window.innerWidth + 1);
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.infoPanelMaxWidth = 1000;
|
||||
this.updatePhotoFrameDim();
|
||||
this.subscription.route = this.route.queryParams.subscribe(
|
||||
(params: Params): any => {
|
||||
@ -286,7 +295,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
|
||||
}
|
||||
|
||||
public toggleInfoPanel(): void {
|
||||
if (this.infoPanelWidth !== 400) {
|
||||
if (this.infoPanelWidth !== this.infoPanelMaxWidth) {
|
||||
this.showInfoPanel();
|
||||
} else {
|
||||
this.hideInfoPanel();
|
||||
@ -315,7 +324,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
|
||||
{
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: Math.max(this.photoFrameDim.width - 400, 0),
|
||||
width: Math.max(this.photoFrameDim.width - this.infoPanelMaxWidth, 0),
|
||||
height: this.photoFrameDim.height,
|
||||
} as Dimension,
|
||||
{
|
||||
@ -333,12 +342,13 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
|
||||
}
|
||||
|
||||
showInfoPanel(): void {
|
||||
this.updateInfoPanelWidth();
|
||||
this.infoPanelVisible = true;
|
||||
|
||||
const starPhotoPos = this.calcLightBoxPhotoDimension(
|
||||
this.activePhoto.gridMedia.media
|
||||
);
|
||||
this.infoPanelWidth = 400;
|
||||
this.infoPanelWidth = this.infoPanelMaxWidth;
|
||||
this.updatePhotoFrameDim();
|
||||
const endPhotoPos = this.calcLightBoxPhotoDimension(
|
||||
this.activePhoto.gridMedia.media
|
||||
@ -348,7 +358,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
|
||||
{
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: this.photoFrameDim.width + 400,
|
||||
width: this.photoFrameDim.width + this.infoPanelMaxWidth,
|
||||
height: this.photoFrameDim.height,
|
||||
} as Dimension,
|
||||
{
|
||||
|
||||
@ -60,6 +60,15 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#controls .control-button {
|
||||
margin-left: 0.1em;
|
||||
margin-right: 0.1em;
|
||||
display: inline-block;
|
||||
padding: 0 0.2rem;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
opacity: 0.4;
|
||||
transition: opacity .2s ease-out;
|
||||
@ -73,7 +82,11 @@
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
::ng-deep .marker-svg-small .marker-svg-wrapper{
|
||||
::ng-deep .leaflet-container a.leaflet-popup-close-button span{
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
::ng-deep .marker-svg-small .marker-svg-wrapper {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
transform: scale(0.5);
|
||||
@ -118,13 +131,17 @@
|
||||
|
||||
::ng-deep .lightbox-map-gallery-component-preview-loading {
|
||||
background-color: #bbbbbb;
|
||||
color: #7f7f7f;
|
||||
font-size: 50px;
|
||||
color: var(--bs-secondary-color-rgb);
|
||||
}
|
||||
|
||||
::ng-deep .lightbox-map-gallery-component-preview-loading span {
|
||||
top: calc(50% - 25px);
|
||||
left: calc(50% - 25px);
|
||||
::ng-deep .lightbox-map-gallery-component-preview-loading svg {
|
||||
top: calc(50%);
|
||||
left: calc(50%);
|
||||
opacity: 0.75; /* making sure that --bs-secondary-color used as color does not make ghosting line effect*/
|
||||
transform: translate(-50%, -50%);
|
||||
display: block;
|
||||
position: relative;
|
||||
--ng-icon__size: 250px
|
||||
}
|
||||
|
||||
::ng-deep .marker-cluster-small {
|
||||
|
||||
@ -20,19 +20,22 @@
|
||||
|
||||
<div id="controllers-container" *ngIf="controllersVisible">
|
||||
<div id="controls">
|
||||
<span>
|
||||
<span class="oi oi-fullscreen-exit highlight"
|
||||
*ngIf="fullScreenService.isFullScreenEnabled()"
|
||||
(click)="fullScreenService.exitFullScreen()" title="toggle fullscreen, key: f" i18n-title></span>
|
||||
</span>
|
||||
<span>
|
||||
<span class="oi oi-fullscreen-enter highlight"
|
||||
*ngIf="!fullScreenService.isFullScreenEnabled()"
|
||||
(click)="fullScreenService.showFullScreen(root)" title="toggle fullscreen, key: f" i18n-title></span>
|
||||
</span>
|
||||
<span>
|
||||
<span class="oi oi-x highlight" (click)="hide()" title="close, key: Escape" i18n-title></span>
|
||||
</span>
|
||||
<div class="highlight control-button"
|
||||
*ngIf="fullScreenService.isFullScreenEnabled()"
|
||||
(click)="fullScreenService.exitFullScreen()" title="toggle fullscreen, key: f" i18n-title>
|
||||
<ng-icon style="margin-right: 0.2em; margin-top: -0.05em" class="align-top" size="0.9em"
|
||||
name="ionContractOutline"></ng-icon>
|
||||
</div>
|
||||
|
||||
<div class="highlight control-button"
|
||||
*ngIf="!fullScreenService.isFullScreenEnabled()"
|
||||
(click)="fullScreenService.showFullScreen(root)" title="toggle fullscreen, key: f" i18n-title>
|
||||
<ng-icon style="margin-right: 0.2em; margin-top: -0.05em" class="align-top" size="0.9em"
|
||||
name="ionExpandOutline"></ng-icon>
|
||||
</div>
|
||||
<div class="highlight control-button" (click)="hide()" title="close, key: Escape" i18n-title>
|
||||
<ng-icon size="1.2em" name="ionCloseOutline"></ng-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -36,6 +36,7 @@ import {LeafletControlLayersConfig} from '@asymmetrik/ngx-leaflet';
|
||||
import {ThemeService} from '../../../../model/theme.service';
|
||||
import {Subscription} from 'rxjs';
|
||||
import {MarkerFactory} from '../MarkerFactory';
|
||||
import {ionImageOutline, ionWarningOutline} from '@ng-icons/ionicons';
|
||||
|
||||
|
||||
@Component({
|
||||
@ -371,9 +372,7 @@ export class GalleryMapLightboxComponent implements OnChanges, OnDestroy {
|
||||
} else {
|
||||
const noPhotoPopup = `<div class="lightbox-map-gallery-component-preview-loading"
|
||||
style="width: ${width}px; height: ${height}px">
|
||||
<span class="oi ${photoTh.Error ? 'oi-warning' : 'oi-image'}"
|
||||
aria-hidden="true">
|
||||
</span>
|
||||
${photoTh.Error ? ionWarningOutline : ionImageOutline}
|
||||
</div>`;
|
||||
|
||||
mkr.bindPopup(noPhotoPopup, {minWidth: width});
|
||||
|
||||
@ -8,9 +8,6 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.oi {
|
||||
font-size: 59pt;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
|
||||
@ -22,7 +22,6 @@
|
||||
.row {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
nav {
|
||||
@ -38,7 +37,21 @@ nav {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
app-gallery-filter{
|
||||
app-gallery-filter {
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.btn-navigator {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.sorting-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.btn-navigator:not(:hover):not(.btn-secondary) {
|
||||
--bs-text-opacity: 1;
|
||||
color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important;
|
||||
}
|
||||
|
||||
@ -28,9 +28,8 @@
|
||||
|
||||
<ng-container *ngIf="config.Gallery.enableDownloadZip && isDirectory && ItemCount > 0">
|
||||
<a [href]="getDownloadZipLink()"
|
||||
class="btn">
|
||||
<span class="oi oi-data-transfer-download"
|
||||
title="download" i18n-title></span>
|
||||
class="btn btn-outline-secondary btn-navigator">
|
||||
<ng-icon name="ionDownloadOutline" title="download" i18n-title></ng-icon>
|
||||
</a>
|
||||
<div class="divider"> </div>
|
||||
</ng-container>
|
||||
@ -38,35 +37,37 @@
|
||||
<ng-container *ngIf="config.Gallery.enableDirectoryFlattening && isDirectory && authService.canSearch()">
|
||||
<a
|
||||
[routerLink]="['/search', getDirectoryFlattenSearchQuery()]"
|
||||
class="btn">
|
||||
<span class="oi oi-fork"
|
||||
title="Flatten directory" i18n-title></span>
|
||||
class="btn btn-outline-secondary btn-navigator">
|
||||
<ng-icon name="ionGitBranchOutline"
|
||||
title="Show all subdirectories" i18n-title></ng-icon>
|
||||
</a>
|
||||
<div class="divider"> </div>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="ItemCount> 0">
|
||||
<a class="btn"
|
||||
<a class="btn btn-outline-secondary btn-navigator"
|
||||
[class.btn-secondary]="filterService.activeFilters.value.areFiltersActive"
|
||||
[class.btn-outline-secondary]="!filterService.activeFilters.value.areFiltersActive"
|
||||
(click)="showFilters = ! showFilters">
|
||||
<span class="oi oi-spreadsheet"
|
||||
title="Filters" i18n-title></span>
|
||||
<ng-icon name="ionFunnelOutline"
|
||||
title="Filters" i18n-title></ng-icon>
|
||||
</a>
|
||||
<div class="divider"> </div>
|
||||
</ng-container>
|
||||
<div class="btn-group" dropdown #dropdown="bs-dropdown" placement="bottom right">
|
||||
<button id="button-alignment" dropdownToggle type="button"
|
||||
class="btn dropdown-toggle"
|
||||
class="btn dropdown-toggle btn-outline-secondary btn-navigator"
|
||||
[class.btn-secondary]="sortingService.sorting.value !== DefaultSorting"
|
||||
aria-controls="sorting-dropdown"
|
||||
[innerHTML]="sortingService.sorting.value | iconizeSorting">
|
||||
[class.btn-outline-secondary]="sortingService.sorting.value == DefaultSorting"
|
||||
aria-controls="sorting-dropdown">
|
||||
<app-sorting-method-icon [method]="sortingService.sorting.value"></app-sorting-method-icon>
|
||||
</button>
|
||||
<ul id="sorting-dropdown" *dropdownMenu class="dropdown-menu dropdown-menu-right"
|
||||
role="menu" aria-labelledby="button-alignment">
|
||||
<li class="row dropdown-item" role="menuitem"
|
||||
<li class="row dropdown-item sorting-item" role="menuitem"
|
||||
*ngFor="let type of sortingMethodsType"
|
||||
(click)="setSorting(type.key)">
|
||||
<div class="col-3">
|
||||
<div [outerHTML]="type.key | iconizeSorting"></div>
|
||||
<app-sorting-method-icon [method]="type.key"></app-sorting-method-icon>
|
||||
</div>
|
||||
<div class="col-9">{{type.key | stringifySorting}}</div>
|
||||
</li>
|
||||
|
||||
@ -22,6 +22,6 @@ button.dropdown-item {
|
||||
padding: 0.3rem 1.0rem 0.3rem 0.8rem;
|
||||
}
|
||||
|
||||
button.dropdown-item span {
|
||||
padding-right: 0.8rem;
|
||||
button.dropdown-item ng-icon {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<button class="dropdown-item {{enabled? '' : 'disabled'}}" (click)="openModal(randomModal)">
|
||||
<span class="oi oi-random"></span>
|
||||
<ng-icon name="ionShuffleOutline"></ng-icon>
|
||||
<ng-container i18n>Random link</ng-container>
|
||||
</button>
|
||||
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
<button [ngClass]="'btn-danger'"
|
||||
class="btn float-end col-1 align-self-center"
|
||||
(click)="deleteItem()">
|
||||
<span class="oi oi-trash" aria-hidden="true" aria-label="Delete"></span>
|
||||
<ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
|
||||
</button>
|
||||
<div class="container query-list">
|
||||
<app-gallery-search-query-entry *ngFor="let sq of AsListQuery.list; index as i"
|
||||
@ -46,7 +46,12 @@
|
||||
</div>
|
||||
<div class="col query-list d-flex justify-content-start">
|
||||
<button class="btn btn-primary" (click)="addQuery()">
|
||||
<span class="oi oi-plus" aria-hidden="true" aria-label="Add"> Add</span>
|
||||
<ng-icon
|
||||
class="me-1"
|
||||
style="margin-left: -0.1em; margin-right: -0.1em"
|
||||
name="ionAddOutline"
|
||||
title="Add" i18n-title></ng-icon>
|
||||
<span i18n>Add</span>
|
||||
</button>
|
||||
</div>
|
||||
</ng-container>
|
||||
@ -293,7 +298,7 @@
|
||||
<button [ngClass]="'btn-danger'"
|
||||
class="btn w-auto float-end"
|
||||
(click)="deleteItem()">
|
||||
<span class="oi oi-trash" aria-hidden="true" aria-label="Delete"></span>
|
||||
<ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
|
||||
</button>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
@ -48,6 +48,10 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
.autocomplete-item span {
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
.autocomplete-item-selected {
|
||||
background-color: var(--bs-primary);
|
||||
color: #FFF;
|
||||
@ -70,3 +74,6 @@
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
ng-icon.insert-button ::ng-deep svg {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
@ -34,19 +34,20 @@
|
||||
*ngFor="let item of autoCompleteRenders; let i = index">
|
||||
<div>
|
||||
<span [ngSwitch]="item.type">
|
||||
<span *ngSwitchCase="SearchQueryTypes.caption" class="oi oi-image"></span>
|
||||
<span *ngSwitchCase="SearchQueryTypes.directory" class="oi oi-folder"></span>
|
||||
<span *ngSwitchCase="SearchQueryTypes.file_name" class="oi oi-image"></span>
|
||||
<span *ngSwitchCase="SearchQueryTypes.keyword" class="oi oi-tag"></span>
|
||||
<span *ngSwitchCase="SearchQueryTypes.person" class="oi oi-person"></span>
|
||||
<span *ngSwitchCase="SearchQueryTypes.position" class="oi oi-map-marker"></span>
|
||||
<span *ngSwitchCase="SearchQueryTypes.distance" class="oi oi-map-marker"></span>
|
||||
<ng-icon *ngSwitchCase="SearchQueryTypes.caption" name="ionTextOutline"></ng-icon>
|
||||
<ng-icon *ngSwitchCase="SearchQueryTypes.directory" name="ionFolderOutline"></ng-icon>
|
||||
<ng-icon *ngSwitchCase="SearchQueryTypes.file_name" name="ionImageOutline"></ng-icon>
|
||||
<ng-icon *ngSwitchCase="SearchQueryTypes.keyword" name="ionPricetagOutline"></ng-icon>
|
||||
<ng-icon *ngSwitchCase="SearchQueryTypes.person" name="ionPersonOutline"></ng-icon>
|
||||
<ng-icon *ngSwitchCase="SearchQueryTypes.position" name="ionLocationOutline"></ng-icon>
|
||||
<ng-icon *ngSwitchCase="SearchQueryTypes.distance" name="ionLocationOutline"></ng-icon>
|
||||
</span>
|
||||
{{item.preText}}<strong>{{item.highLightText}}</strong>{{item.postText}}
|
||||
<span class="oi oi-chevron-right insert-button float-end" (click)="applyAutoComplete(item)"
|
||||
title="Insert"
|
||||
i18n-title>
|
||||
</span>
|
||||
<ng-icon name="ionChevronForwardOutline"
|
||||
class="insert-button float-end"
|
||||
(click)="applyAutoComplete(item)"
|
||||
title="Insert"
|
||||
i18n-title></ng-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
</app-gallery-search-field-base>
|
||||
|
||||
<button class="btn btn-tertiary" type="button" (click)="openSearchModal(searchModal)">
|
||||
<span class="oi oi-chevron-bottom"></span>
|
||||
<ng-icon name="ionChevronDownOutline"></ng-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
@ -11,10 +11,11 @@
|
||||
|
||||
<button class="btn btn-tertiary" type="button"
|
||||
[routerLink]="['/search', HTMLSearchQuery]">
|
||||
<span class="oi oi-magnifying-glass"></span>
|
||||
<ng-icon name="ionSearchOutline"></ng-icon>
|
||||
</button>
|
||||
<button class="btn btn-tertiary" type="button" (click)="openSearchModal(searchModal)">
|
||||
<span class="oi oi-chevron-bottom"></span>
|
||||
<ng-icon size="1.2em" style="margin-left: -0.1em; margin-right: -0.1em;"
|
||||
name="ionChevronDownOutline"></ng-icon>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
@ -46,13 +47,13 @@
|
||||
class="btn btn-secondary me-2" type="button"
|
||||
[disabled]="rawSearchText == ''"
|
||||
(click)="openSaveSearchModal(saveSearchModal)">
|
||||
<span class="oi oi-folder me-2"></span>
|
||||
<ng-icon name="ionSaveOutline" class="me-1"></ng-icon>
|
||||
<ng-container i18n>Save</ng-container>
|
||||
</button>
|
||||
<button class="btn btn-primary" type="button"
|
||||
[routerLink]="['/search', HTMLSearchQuery]"
|
||||
(click)="hideSearchModal()">
|
||||
<span class="oi oi-magnifying-glass me-2"></span>
|
||||
<ng-icon name="ionSearchOutline" class="me-1"></ng-icon>
|
||||
<ng-container i18n>Search</ng-container>
|
||||
</button>
|
||||
</div>
|
||||
@ -93,7 +94,7 @@
|
||||
<button class="btn btn-primary" type="button"
|
||||
[disabled]="saveSearchName == ''"
|
||||
(click)="saveSearch()">
|
||||
<span class="oi oi-folder me-2"></span>
|
||||
<ng-icon name="ionSaveOutline" class="me-1"></ng-icon>
|
||||
<ng-container i18n>Save as album</ng-container>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -11,18 +11,17 @@
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
|
||||
#shareButton span {
|
||||
padding-right: 0.3rem;
|
||||
ng-icon{
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
|
||||
a.dropdown-item, button.dropdown-item, div.dropdown-item {
|
||||
padding: 0.3rem 1.0rem 0.3rem 0.8rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a.dropdown-item span, button.dropdown-item span, div.dropdown-item span {
|
||||
padding-right: 0.8rem;
|
||||
a.dropdown-item ng-icon, button.dropdown-item ng-icon, div.dropdown-item ng-icon {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
a.list-shares-button {
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
style="white-space:nowrap"
|
||||
*ngIf="!dropDownItem"
|
||||
type="button" [disabled]="!enabled" (click)="openModal(shareModal)">
|
||||
<span class="oi oi-share"></span>
|
||||
<ng-icon name="ionShareSocialOutline" class="me-1"></ng-icon>
|
||||
<ng-container i18n>Share</ng-container>
|
||||
</button>
|
||||
|
||||
<a class="dropdown-item" (click)="openModal(shareModal)" *ngIf="dropDownItem">
|
||||
<span class="oi oi-share"></span>
|
||||
<ng-icon name="ionShareSocialOutline"></ng-icon>
|
||||
<ng-container i18n>Share</ng-container>
|
||||
</a>
|
||||
|
||||
@ -134,7 +134,7 @@
|
||||
<span class="badge text-bg-secondary me-1">{{activeShares.length}}</span>
|
||||
<ng-container i18n>active share(s) for this folder.
|
||||
</ng-container>
|
||||
<span class="oi oi-chevron-right ms-1"></span>
|
||||
<ng-icon name="ionChevronForwardOutline" class="ms-1"></ng-icon>
|
||||
</a>
|
||||
<table class="table table-hover table-sm" *ngIf="showSharingList">
|
||||
<thead>
|
||||
@ -154,7 +154,7 @@
|
||||
<button (click)="deleteSharing(share)"
|
||||
[disabled]="share.sharingKey == sharing?.sharingKey"
|
||||
class="btn btn-danger float-end">
|
||||
<span class="oi oi-trash" aria-hidden="true" aria-label="Delete"></span>
|
||||
<ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
<ng-container *ngIf="current != null">
|
||||
{{current}}
|
||||
</ng-container>
|
||||
<span *ngIf="current == null" class="oi oi-globe"></span>
|
||||
<ng-icon *ngIf="current == null" name="ionGlobeOutline"></ng-icon>
|
||||
|
||||
</button>
|
||||
<div *dropdownMenu class="dropdown-menu" aria-labelledby="language">
|
||||
|
||||
@ -35,3 +35,7 @@
|
||||
margin-top: calc((100vh - 120px - 295px) / 2 - 60px)
|
||||
}
|
||||
}
|
||||
|
||||
ng-icon ::ng-deep svg {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-text"><span class="oi oi-person"></span></div>
|
||||
<div class="input-group-text"><ng-icon name="ionPersonOutline"></ng-icon></div>
|
||||
<input type="text"
|
||||
i18n-placeholder
|
||||
class="form-control"
|
||||
@ -29,7 +29,7 @@
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-text"><span class="oi oi-lock-locked"></span></div>
|
||||
<div class="input-group-text"><ng-icon name="ionLockClosedOutline"></ng-icon></div>
|
||||
<input type="password"
|
||||
i18n-placeholder
|
||||
class="form-control"
|
||||
|
||||
@ -3,24 +3,24 @@
|
||||
Statistic:
|
||||
</div>
|
||||
<div class="col-md-2 col-6">
|
||||
<span class="oi oi-folder" title="Folders" i18n-title aria-hidden="true"> </span>
|
||||
<ng-icon name="ionFolderOutline" title="Folders" i18n-title></ng-icon>
|
||||
{{settingsService.statistic.value ? settingsService.statistic.value.directories : '...'}}
|
||||
</div>
|
||||
<div class="col-md-2 col-6">
|
||||
<span class="oi oi-camera-slr" title="Photos" i18n-title aria-hidden="true"> </span>
|
||||
<ng-icon name="ionCameraOutline" title="Photos" i18n-title></ng-icon>
|
||||
{{settingsService.statistic.value ? settingsService.statistic.value.photos : '...'}}
|
||||
</div>
|
||||
<div class="col-md-2 col-6">
|
||||
<span class="oi oi-video" title="Videos" i18n-title aria-hidden="true"> </span>
|
||||
<ng-icon name="ionVideocamOutline" title="Videos" i18n-title></ng-icon>
|
||||
{{settingsService.statistic.value ? settingsService.statistic.value.videos : '...'}}
|
||||
|
||||
</div>
|
||||
<div class="col-md-2 col-6">
|
||||
<span class="oi oi-people" title="Persons" i18n-title aria-hidden="true"> </span>
|
||||
<ng-icon name="ionPersonOutline" title="Persons" i18n-title></ng-icon>
|
||||
{{settingsService.statistic.value ? settingsService.statistic.value.persons : '...'}}
|
||||
</div>
|
||||
<div class="col-md-2 col-6">
|
||||
<span class="oi oi-pie-chart" title="Size" i18n-title aria-hidden="true"> </span>
|
||||
<ng-icon name="ionPieChartOutline" title="Size" i18n-title></ng-icon>
|
||||
{{settingsService.statistic.value ? (settingsService.statistic.value.diskUsage | fileSize) : '...'}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
<td>{{share.expires | date}}</td>
|
||||
<td>
|
||||
<button (click)="deleteSharing(share)" class="btn btn-danger float-end">
|
||||
<span class="oi oi-trash" aria-hidden="true" aria-label="Delete"></span>
|
||||
<ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -26,6 +26,7 @@
|
||||
</app-gallery-search-field>
|
||||
|
||||
<div class="input-group"
|
||||
style="flex: 1"
|
||||
*ngSwitchCase="'StringInput'">
|
||||
<input
|
||||
[type]="HTMLInputType" [min]="state.min" [max]="state.max" class="form-control"
|
||||
@ -82,13 +83,13 @@
|
||||
|
||||
<button class="btn btn-primary"
|
||||
(click)="showNewThemeModal(newThemeModal)">
|
||||
<span class="oi oi-plus me-2"></span>
|
||||
<ng-icon name="ionAddOutline" class="me-1"></ng-icon>
|
||||
<ng-container i18n>Add new</ng-container>
|
||||
</button>
|
||||
<button class="btn btn-danger"
|
||||
*ngIf="state.value !== 'default'"
|
||||
(click)="removeTheme()">
|
||||
<span class="oi oi-trash"></span>
|
||||
<ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
|
||||
</button>
|
||||
|
||||
<ng-template #newThemeModal>
|
||||
@ -119,7 +120,7 @@
|
||||
<div class="pe-0">
|
||||
<button class="btn btn-primary" type="button"
|
||||
(click)="addNewTheme()">
|
||||
<span class="oi oi-plus me-2"></span>
|
||||
<ng-icon name="ionAddOutline" class="me-1"></ng-icon>
|
||||
<ng-container i18n>Add new Theme</ng-container>
|
||||
</button>
|
||||
</div>
|
||||
@ -255,7 +256,7 @@
|
||||
<button [disabled]="state.value.length == 1" (click)="removeLayer(layer)"
|
||||
[ngClass]="state.value.length > 1? 'btn-danger':'btn-secondary'"
|
||||
class="btn float-end">
|
||||
<span class="oi oi-trash" aria-hidden="true" aria-label="Delete"></span>
|
||||
<ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
@ -263,7 +264,9 @@
|
||||
|
||||
<div class="row justify-content-end">
|
||||
<button class="btn btn-primary"
|
||||
(click)="addNewLayer()" i18n>+ Add Layer
|
||||
(click)="addNewLayer()">
|
||||
<ng-icon name="ionAddOutline" class="me-1"></ng-icon>
|
||||
<span i18n>Add Layer</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -285,7 +288,7 @@
|
||||
<button [disabled]="state.value.length == 1" (click)="remove(i)"
|
||||
[ngClass]="state.value.length > 1? 'btn-danger':'btn-secondary'"
|
||||
class="btn float-end">
|
||||
<span class="oi oi-trash" aria-hidden="true" aria-label="Delete"></span>
|
||||
<ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -322,7 +325,9 @@
|
||||
<div class="row">
|
||||
<div class="col pe-0">
|
||||
<button class="btn btn-primary float-end"
|
||||
(click)="AddNew()" i18n>+ Add matcher
|
||||
(click)="AddNew()">
|
||||
<ng-icon name="ionAddOutline" class="me-1"></ng-icon>
|
||||
<span i18n>Add matcher</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -345,7 +350,7 @@
|
||||
<button [disabled]="state.value.length == 1" (click)="remove(i)"
|
||||
[ngClass]="state.value.length > 1? 'btn-danger':'btn-secondary'"
|
||||
class="btn float-end">
|
||||
<span class="oi oi-trash" aria-hidden="true" aria-label="Delete"></span>
|
||||
<ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -366,7 +371,9 @@
|
||||
<div class="row">
|
||||
<div class="col pe-0">
|
||||
<button class="btn btn-primary float-end"
|
||||
(click)="AddNew()" i18n>+ Add path theme group
|
||||
(click)="AddNew()">
|
||||
<ng-icon name="ionAddOutline" class="me-1"></ng-icon>
|
||||
<span i18n>Add path theme group</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -421,7 +428,7 @@
|
||||
<button [disabled]="state.value.length == 1" (click)="remove(i)"
|
||||
[ngClass]="state.value.length > 1? 'btn-danger':'btn-secondary'"
|
||||
class="btn float-end">
|
||||
<span class="oi oi-trash" aria-hidden="true" aria-label="Delete"></span>
|
||||
<ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -429,7 +436,9 @@
|
||||
<div class="row">
|
||||
<div class="col pe-0">
|
||||
<button class="btn btn-primary float-end"
|
||||
(click)="AddNew()" i18n>+ Add Link
|
||||
(click)="AddNew()">
|
||||
<ng-icon name="ionAddOutline" class="me-1"></ng-icon>
|
||||
<span i18n>Add Link</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -484,7 +493,7 @@
|
||||
(click)="remove(i)"
|
||||
[ngClass]="(state.value.length > 1 || state.tags.uiOptional)? 'btn-danger':'btn-secondary'"
|
||||
class="btn float-end">
|
||||
<span class="oi oi-trash" aria-hidden="true" aria-label="Delete"></span>
|
||||
<ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -493,7 +502,9 @@
|
||||
<div class="col pe-0">
|
||||
<button class="btn btn-primary float-end"
|
||||
[disabled]="state.readonly"
|
||||
(click)="AddNew()" i18n>+ Add
|
||||
(click)="AddNew()">
|
||||
<ng-icon name="ionAddOutline" class="me-1"></ng-icon>
|
||||
<span i18n>Add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -521,8 +532,8 @@
|
||||
<div class="col-auto pe-0">
|
||||
<button class="btn btn-secondary float-end"
|
||||
[id]="'list_btn_'+idName+i"
|
||||
[name]="'list_btn_'+idName+i" (click)="remove(i)"><span
|
||||
class="oi oi-trash"></span>
|
||||
[name]="'list_btn_'+idName+i" (click)="remove(i)">
|
||||
<ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
|
||||
</button>
|
||||
</div>
|
||||
</ng-container>
|
||||
@ -533,7 +544,9 @@
|
||||
<button class="btn btn-primary mt-1 float-end"
|
||||
[id]="'btn_add_'+idName"
|
||||
[name]="'btn_add_'+idName"
|
||||
(click)="AddNew()" i18n>+ Add
|
||||
(click)="AddNew()">
|
||||
<ng-icon name="ionAddOutline" class="me-1"></ng-icon>
|
||||
<span i18n>Add</span>
|
||||
</button>
|
||||
</div>
|
||||
</ng-container>
|
||||
@ -542,14 +555,18 @@
|
||||
<span
|
||||
triggers="mouseenter:mouseleave"
|
||||
placement="bottom"
|
||||
container="body"
|
||||
[popover]="popTemplate"
|
||||
class="oi oi-warning text-warning warning-icon ms-2"></span>
|
||||
class="text-warning warning-icon ms-2">
|
||||
<ng-icon name="ionWarningOutline"></ng-icon>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<small class="form-text text-muted" *ngIf="settingsService.configStyle == ConfigStyle.full">
|
||||
<ng-container *ngIf="experimental">
|
||||
<span class="oi oi-warning"></span>[Experimental]
|
||||
<ng-icon name="ionWarningOutline"></ng-icon>
|
||||
[<span i18n>Experimental</span>]
|
||||
</ng-container>
|
||||
<ng-container *ngIf="description">{{description}} </ng-container>
|
||||
<span *ngIf="type==='array' && (state.arrayType === 'string' || isNumberArray)" i18n>';' separated list.</span>
|
||||
@ -559,11 +576,13 @@
|
||||
#{{state.tags?.githubIssue}}.</a>
|
||||
<ng-container *ngIf="state.tags?.uiResetNeeded?.db && !isOriginal">
|
||||
<br/>
|
||||
<span class="oi oi-warning" i18n>Reset database after changing this settings!</span>
|
||||
<ng-icon name="ionWarningOutline"></ng-icon>
|
||||
<span i18n>Reset database after changing this settings!</span>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="state.tags?.uiResetNeeded?.server && !isOriginal">
|
||||
<br/>
|
||||
<span class="oi oi-warning" i18n>Restart server after changing this settings!</span>
|
||||
<ng-icon name="ionWarningOutline"></ng-icon>
|
||||
<span i18n>Restart server after changing this settings!</span>
|
||||
</ng-container>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
@ -2,7 +2,8 @@
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
<h5 class="d-inline-block mb-0">
|
||||
<span class="oi oi-{{icon}}"></span> {{Name}}
|
||||
<ng-icon [name]="icon"></ng-icon>
|
||||
{{Name}}
|
||||
</h5>
|
||||
<div *ngIf="states.value.enabled !== undefined" class="float-end p-0">
|
||||
|
||||
@ -69,7 +70,8 @@
|
||||
|
||||
<ng-template #Recursion let-rStates="rStates" let-topLevel="topLevel" let-skipJobs="skipJobs"
|
||||
let-confPath="confPath">
|
||||
<div class="alert alert-secondary" role="alert" *ngIf="rStates.description && settingsService.configStyle == ConfigStyle.full">
|
||||
<div class="alert alert-secondary" role="alert"
|
||||
*ngIf="rStates.description && settingsService.configStyle == ConfigStyle.full">
|
||||
{{rStates.description}}
|
||||
<a *ngIf="rStates.tags?.githubIssue"
|
||||
[href]="'https://github.com/bpatrik/pigallery2/issues/'+rStates.tags?.githubIssue">
|
||||
@ -84,10 +86,12 @@
|
||||
[ngModel]="rStates?.value.__state[ck]">
|
||||
</app-settings-entry>
|
||||
<ng-container *ngIf="isExpandableConfig(rStates.value.__state[ck])">
|
||||
<div class="card mt-2 mb-2" *ngIf="topLevel && rStates?.value.__state[ck].tags?.uiIcon" [id]="ConfigPath+'.'+ck">
|
||||
<div class="card mt-2 mb-2" *ngIf="topLevel && rStates?.value.__state[ck].tags?.uiIcon"
|
||||
[id]="ConfigPath+'.'+ck">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title"><span
|
||||
class="oi oi-{{rStates?.value.__state[ck].tags?.uiIcon}}"></span> {{rStates?.value.__state[ck].tags?.name || ck}}
|
||||
<h5 class="card-title">
|
||||
<ng-icon [name]="rStates?.value.__state[ck].tags?.uiIcon"></ng-icon>
|
||||
{{rStates?.value.__state[ck].tags?.name || ck}}
|
||||
</h5>
|
||||
<ng-container
|
||||
*ngTemplateOutlet="Recursion; context:{ rStates: rStates.value.__state[ck], confPath:confPath+'.'+ck }"
|
||||
@ -124,7 +128,8 @@
|
||||
<ng-template #JobTemplate let-uiJob="uiJob">
|
||||
<div class="mb-2">
|
||||
<ng-container *ngFor="let job of uiJob; let i = index">
|
||||
<div class="alert alert-secondary" role="alert" *ngIf="job.description && settingsService.configStyle == ConfigStyle.full">
|
||||
<div class="alert alert-secondary" role="alert"
|
||||
*ngIf="job.description && settingsService.configStyle == ConfigStyle.full">
|
||||
{{job.description}}
|
||||
</div>
|
||||
<app-settings-job-button
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
<button [disabled]="!canModifyUser(user)" (click)="deleteUser(user)"
|
||||
[ngClass]="canModifyUser(user)? 'btn-danger':'btn-secondary'"
|
||||
class="btn float-end">
|
||||
<span class="oi oi-trash" aria-hidden="true" aria-label="Delete"></span>
|
||||
<ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
@ -43,7 +43,9 @@
|
||||
</table>
|
||||
|
||||
<button class="btn btn-primary float-end"
|
||||
(click)="initNewUser()" i18n>+ Add user
|
||||
(click)="initNewUser()">
|
||||
<ng-icon name="ionAddOutline" class="me-1"></ng-icon>
|
||||
<span i18n>Add user</span>
|
||||
</button>
|
||||
</ng-container>
|
||||
|
||||
|
||||
@ -6,13 +6,13 @@
|
||||
(click)="start();">
|
||||
<span class="me-2" *ngIf="!shortName"><ng-container
|
||||
i18n>Run now</ng-container>: {{backendTextService.getJobName(jobName)}}</span>
|
||||
<span class="oi oi-media-play"></span>
|
||||
<ng-icon name="ionPlayOutline"></ng-icon>
|
||||
</button>
|
||||
<button class="btn btn-secondary"
|
||||
*ngIf="Running"
|
||||
[disabled]="disabled || jobsService.jobStartingStopping[jobName] || Progress.state !== JobProgressStates.running"
|
||||
(click)="stop();">
|
||||
<span class="oi oi-media-stop"></span>
|
||||
<ng-icon name="ionStopOutline"></ng-icon>
|
||||
<span class="ms-2" *ngIf="!shortName"><ng-container
|
||||
i18n>Cancel</ng-container>: {{backendTextService.getJobName(jobName)}}</span>
|
||||
</button>
|
||||
|
||||
@ -3,21 +3,21 @@
|
||||
Last run:
|
||||
</div>
|
||||
<div class="col-md-4 col-12" title="Run between" i18n-title>
|
||||
<span class="oi oi-clock" aria-hidden="true"></span>
|
||||
<ng-icon name="ionTimeOutline"></ng-icon>
|
||||
{{progress.time.start | date:'medium'}} - {{progress.time.end | date:'mediumTime'}}
|
||||
</div>
|
||||
<div class="col-md-2 col-4"
|
||||
[title]="ProgressTitle">
|
||||
<span class="oi oi-check" aria-hidden="true"></span>
|
||||
<ng-icon name="ionCheckmarkOutline"></ng-icon>
|
||||
{{progress.steps.processed + progress.steps.skipped}}/{{progress.steps.all}}
|
||||
</div>
|
||||
<div class="col-md-2 col-4" title="Status" i18n-title>
|
||||
<span class="oi oi-pulse" aria-hidden="true"></span>
|
||||
<ng-icon name="ionPulseOutline"></ng-icon>
|
||||
{{State}}
|
||||
</div>
|
||||
<div class="col-md-2 col-4">
|
||||
<button class="btn btn-secondary float-end" (click)="openModal(template)">
|
||||
<span class="oi oi-resize-both"></span>
|
||||
<ng-icon name="ionResizeOutline"></ng-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -34,7 +34,7 @@
|
||||
i18n-value name="details">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-secondary" (click)="openModal(template)">
|
||||
<span class="oi oi-resize-both"></span>
|
||||
<ng-icon name="ionResizeOutline"></ng-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<div class="card-header">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div (click)="showDetails[schedule.name]=!showDetails[schedule.name]">
|
||||
<span class="oi oi-chevron-{{showDetails[schedule.name] ? 'bottom' : 'right'}}"></span>
|
||||
<ng-icon style="font-size: 1.3em; margin-left: -4px" [name]="showDetails[schedule.name] ? 'ionChevronDownOutline' : 'ionChevronForwardOutline'"></ng-icon>
|
||||
{{schedule.name}}
|
||||
<ng-container [ngSwitch]="schedule.trigger.type">
|
||||
<ng-container *ngSwitchCase="JobTriggerType.periodic">
|
||||
@ -22,8 +22,8 @@
|
||||
</ng-container>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-danger ms-0" (click)="remove(schedule)"><span
|
||||
class="oi oi-trash"></span>
|
||||
<button class="btn btn-danger ms-0" (click)="remove(schedule)">
|
||||
<ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
|
||||
</button>
|
||||
<app-settings-job-button class="ms-md-2 mt-2 mt-md-0"
|
||||
(jobError)="error=$event"
|
||||
@ -266,8 +266,8 @@
|
||||
[disabled]="mp.sortBy.length < 2"
|
||||
[id]="'list_btn_'+configEntry.id+'_'+i+'_'+j+'_'+k"
|
||||
[name]="'list_btn_'+configEntry.id+'_'+i+'_'+j+'_'+k"
|
||||
(click)="removeFromArray(mp.sortBy,k)"><span
|
||||
class="oi oi-trash"></span>
|
||||
(click)="removeFromArray(mp.sortBy,k)">
|
||||
<ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -276,7 +276,9 @@
|
||||
<button class="btn btn-primary mt-1 float-end"
|
||||
[id]="'btn_add_'+configEntry.id+'_'+i+'_'+j"
|
||||
[name]="'btn_add_'+configEntry.id+'_'+i+'_'+j"
|
||||
(click)="AddNewSorting(mp.sortBy)" i18n>+ Add
|
||||
(click)="AddNewSorting(mp.sortBy)">
|
||||
<ng-icon name="ionAddOutline" class="me-1"></ng-icon>
|
||||
<span i18n>Add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -309,8 +311,8 @@
|
||||
[disabled]="AsMediaPickDTOArray(schedule.config[configEntry.id]).length < 2"
|
||||
[id]="'list_btn_'+configEntry.id+'_'+i+'_'+j"
|
||||
[name]="'list_btn_'+configEntry.id+'_'+i+'_'+j"
|
||||
(click)="removeFromArray(AsMediaPickDTOArray(schedule.config[configEntry.id]),j)"><span
|
||||
class="oi oi-trash"></span>
|
||||
(click)="removeFromArray(AsMediaPickDTOArray(schedule.config[configEntry.id]),j)">
|
||||
<ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
|
||||
</button>
|
||||
</div>
|
||||
<hr/>
|
||||
@ -321,7 +323,9 @@
|
||||
<button class="btn btn-primary mt-1 float-end"
|
||||
[id]="'btn_add_'+configEntry.id+'_'+i"
|
||||
[name]="'btn_add_'+configEntry.id+'_'+i"
|
||||
(click)="AddNewMediaPickDTO(schedule.config[configEntry.id])" i18n>+ Add
|
||||
(click)="AddNewMediaPickDTO(schedule.config[configEntry.id])">
|
||||
<ng-icon name="ionAddOutline" class="me-1"></ng-icon>
|
||||
<span i18n>Add</span>
|
||||
</button>
|
||||
</div>
|
||||
</ng-container>
|
||||
@ -352,7 +356,9 @@
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary float-end mt-2"
|
||||
(click)="prepareNewJob()" i18n>+ Add Job
|
||||
(click)="prepareNewJob()">
|
||||
<ng-icon name="ionAddOutline" class="me-1"></ng-icon>
|
||||
<span i18n>Add Job</span>
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
@ -29,3 +29,7 @@
|
||||
.error-message {
|
||||
color: #d9534f;
|
||||
}
|
||||
|
||||
ng-icon ::ng-deep svg {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-text"><span class="oi oi-lock-locked"></span></div>
|
||||
<div class="input-group-text"><ng-icon name="ionLockClosedOutline"></ng-icon></div>
|
||||
<input type="password"
|
||||
i18n-placeholder
|
||||
class="form-control"
|
||||
|
||||
@ -0,0 +1,37 @@
|
||||
<ng-container [ngSwitch]="method">
|
||||
<ng-container *ngSwitchCase="SortingMethods.descName">
|
||||
<ng-icon name="ionArrowDownOutline"></ng-icon>
|
||||
<span>A</span>
|
||||
</ng-container>
|
||||
<ng-container *ngSwitchCase="SortingMethods.ascName">
|
||||
<ng-icon name="ionArrowUpOutline"></ng-icon>
|
||||
<span>A</span>
|
||||
</ng-container>
|
||||
<ng-container *ngSwitchCase="SortingMethods.descRating">
|
||||
<ng-icon name="ionArrowDownOutline"></ng-icon>
|
||||
<ng-icon name="ionStarOutline"></ng-icon>
|
||||
</ng-container>
|
||||
<ng-container *ngSwitchCase="SortingMethods.ascRating">
|
||||
<ng-icon name="ionArrowUpOutline"></ng-icon>
|
||||
<ng-icon name="ionStarOutline"></ng-icon>
|
||||
</ng-container>
|
||||
<ng-container *ngSwitchCase="SortingMethods.descDate">
|
||||
<ng-icon name="ionArrowDownOutline"></ng-icon>
|
||||
<ng-icon name="ionCalendarOutline"></ng-icon>
|
||||
</ng-container>
|
||||
<ng-container *ngSwitchCase="SortingMethods.ascDate">
|
||||
<ng-icon name="ionArrowUpOutline"></ng-icon>
|
||||
<ng-icon name="ionCalendarOutline"></ng-icon>
|
||||
</ng-container>
|
||||
<ng-container *ngSwitchCase="SortingMethods.descPersonCount">
|
||||
<ng-icon name="ionArrowDownOutline"></ng-icon>
|
||||
<ng-icon name="ionPersonOutline"></ng-icon>
|
||||
</ng-container>
|
||||
<ng-container *ngSwitchCase="SortingMethods.ascPersonCount">
|
||||
<ng-icon name="ionArrowUpOutline"></ng-icon>
|
||||
<ng-icon name="ionPersonOutline"></ng-icon>
|
||||
</ng-container>
|
||||
<ng-container *ngSwitchCase="SortingMethods.random">
|
||||
<ng-icon name="ionShuffleOutline"></ng-icon>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
@ -0,0 +1,12 @@
|
||||
import {Component, Input} from '@angular/core';
|
||||
import {SortingMethods} from '../../../../common/entities/SortingMethods';
|
||||
|
||||
@Component({
|
||||
selector: 'app-sorting-method-icon',
|
||||
templateUrl: './sorting-method-icon.component.html',
|
||||
styleUrls: ['./sorting-method-icon.component.css']
|
||||
})
|
||||
export class SortingMethodIconComponent {
|
||||
@Input() method: SortingMethods;
|
||||
SortingMethods = SortingMethods;
|
||||
}
|
||||
@ -33,7 +33,7 @@ Creating btn-tertiary until bootstrap supports it our of the box.
|
||||
/*
|
||||
This is mostly btn-light
|
||||
*/
|
||||
.btn-tertiary, [data-bs-theme=light] .btn-tertiary {
|
||||
.btn-tertiary, [data-bs-theme=light] .btn-tertiary {
|
||||
--bs-btn-color: #000;
|
||||
--bs-btn-bg: var(--bs-body-bg);
|
||||
--bs-btn-border-color: var(--bs-border-color);
|
||||
@ -50,10 +50,29 @@ This is mostly btn-light
|
||||
--bs-btn-disabled-border-color: #f8f9fa;
|
||||
}
|
||||
|
||||
ng-icon {
|
||||
vertical-align: text-top;
|
||||
font-size: 1.15em
|
||||
}
|
||||
|
||||
ng-icon svg {
|
||||
vertical-align: unset;
|
||||
--ng-icon__stroke-width: 40;
|
||||
}
|
||||
|
||||
.rounded-start-bottom {
|
||||
border-bottom-left-radius: var(--bs-border-radius) !important;
|
||||
}
|
||||
|
||||
.rounded-start-top {
|
||||
border-top-left-radius: var(--bs-border-radius) !important;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
This is mostly btn-dark + border fix
|
||||
*/
|
||||
[data-bs-theme=dark] .btn-tertiary {
|
||||
[data-bs-theme=dark] .btn-tertiary {
|
||||
--bs-btn-color: #fff;
|
||||
--bs-btn-bg: var(--bs-body-bg);
|
||||
--bs-btn-border-color: var(--bs-border-color);
|
||||
@ -68,7 +87,7 @@ This is mostly btn-dark + border fix
|
||||
--bs-btn-disabled-color: #fff;
|
||||
--bs-btn-disabled-bg: #212529;
|
||||
--bs-btn-disabled-border-color: #212529;
|
||||
/* border: var(--bs-border-width) solid var(--bs-border-color);*/
|
||||
/* border: var(--bs-border-width) solid var(--bs-border-color);*/
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user