self-hosted/pigallery2
1
0
Fork 0
mirror of https://github.com/bpatrik/pigallery2.git synced 2025-01-10 04:07:35 +02:00
Code Issues Releases Activity

Replacing app icon with new outline camera + raspberry head icon

Browse Source 
#587
This commit is contained in:
Patrik J. Braun 2023-08-25 20:30:46 +02:00
parent 99bb965b97
commit df9ffe503d
11 changed files with 60 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/backend/model/fileprocessing/PhotoProcessing.ts
View File

@ -301,9 +301,8 @@ export class PhotoProcessing {
// run on other thread
const input = {
type: ThumbnailSourceType.Photo,
svgString: `<svg width="${size}" height="${size}" xmlns="http://www.w3.org/2000/svg"
viewBox="${Config.Server.svgIcon.viewBox || '0 0 512 512'}">
<path fill="${color}" d="${Config.Server.svgIcon.path}"/></svg>`,
svgString: `<svg fill="${color}" width="${size}" height="${size}" xmlns="http://www.w3.org/2000/svg"
viewBox="${Config.Server.svgIcon.viewBox || '0 0 512 512'}">d="${Config.Server.svgIcon.items}</svg>`,
size: size,
outPath,
makeSquare: false,

12
src/backend/routes/PublicRouter.ts
View File

@ -145,7 +145,7 @@ export class PublicRouter {
res.header('Content-Type', 'image/svg+xml');
res.send('<svg xmlns="http://www.w3.org/2000/svg"' +
' viewBox="' + (Config.Server.svgIcon.viewBox || '0 0 512 512') + '">' +
'<path d="' + Config.Server.svgIcon.path + '"/></svg>');
Config.Server.svgIcon.items + '</svg>');
});
@ -155,24 +155,24 @@ export class PublicRouter {
res.send('<svg xmlns="http://www.w3.org/2000/svg"' +
' viewBox="' + (Config.Server.svgIcon.viewBox || '0 0 512 512') + '">' +
'<style>' +
' path {' +
' path, circle {' +
' fill: black;' +
' }' +
' @media (prefers-color-scheme: dark) {' +
' path {' +
' path, circle {' +
' fill: white;' +
' }' +
' }' +
' </style>' +
'<path d="' + Config.Server.svgIcon.path + '"/></svg>');
Config.Server.svgIcon.items + '</svg>');
});
app.get('/icon_inv.svg', (req: Request, res: Response) => {
res.set('Cache-control', 'public, max-age=31536000');
res.header('Content-Type', 'image/svg+xml');
res.send('<svg xmlns="http://www.w3.org/2000/svg"' +
res.send('<svg style="fill:white" xmlns="http://www.w3.org/2000/svg"' +
' viewBox="' + (Config.Server.svgIcon.viewBox || '0 0 512 512') + '">' +
'<path style="fill:white" d="' + Config.Server.svgIcon.path + '"/></svg>');
Config.Server.svgIcon.items + '</svg>');
});

28
src/common/config/public/ClientConfig.ts
View File

File diff suppressed because one or more lines are too long

4
src/frontend/app/app.module.ts
View File

@ -176,6 +176,7 @@ import {
ionWarningOutline
} from '@ng-icons/ionicons';
import {SortingMethodIconComponent} from './ui/sorting-method-icon/sorting-method-icon.component';
import {SafeHtmlPipe} from './pipes/SafeHTMLPipe';
@Injectable()
export class MyHammerConfig extends HammerGestureConfig {
@ -236,7 +237,7 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
ionCameraOutline, ionWarningOutline, ionLockClosedOutline, ionChevronUpOutline,
ionFlagOutline, ionGlobeOutline, ionPieChartOutline, ionStopOutline,
ionTimeOutline, ionCheckmarkOutline, ionPulseOutline, ionResizeOutline,
ionCloudOutline, ionChatboxOutline, ionServerOutline, ionFileTrayFullOutline,ionBrushOutline,
ionCloudOutline, ionChatboxOutline, ionServerOutline, ionFileTrayFullOutline, ionBrushOutline,
ionBrowsersOutline
}),
ClipboardModule,
@ -321,6 +322,7 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
UsersComponent,
SharingsListComponent,
SortingMethodIconComponent,
SafeHtmlPipe
],
providers: [
{provide: HTTP_INTERCEPTORS, useClass: CSRFInterceptor, multi: true},

14
src/frontend/app/icon.component.ts
View File

@ -5,13 +5,13 @@ import {Config} from '../../common/config/public/Config';
selector: 'app-icon',
styles: [':host {line-height: 0}'],
template: `
<svg xmlns="http://www.w3.org/2000/svg"
[attr.width]="width"
[attr.height]="height"
fill="currentcolor"
[attr.viewBox]="Config.Server.svgIcon.viewBox || '0 0 512 512'">
<path [attr.d]="Config.Server.svgIcon.path"/>
</svg>`,
<svg xmlns="http://www.w3.org/2000/svg"
[attr.width]="width"
[attr.height]="height"
fill="currentcolor"
[attr.viewBox]="Config.Server.svgIcon.viewBox || '0 0 512 512'"
[innerHtml]="Config.Server.svgIcon.items | safeHtml">
</svg>`,
})
export class IconComponent {

12
src/frontend/app/pipes/SafeHTMLPipe.ts Normal file
View File

@ -0,0 +1,12 @@
import {Pipe, PipeTransform, SecurityContext} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';
@Pipe({name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) {
}
transform(html: string) {
return this.sanitizer.bypassSecurityTrustHtml(html);
}
}

6
src/frontend/app/ui/gallery/map/MarkerFactory.ts
View File

@ -2,7 +2,7 @@ import {DivIcon, setOptions} from 'leaflet';
export interface SvgIconOptions {
color?: string;
svgPath?: string;
svgItems?: string;
viewBox?: string;
small?: boolean;
}
@ -10,9 +10,9 @@ export interface SvgIconOptions {
const SvgIcon: { new(options?: SvgIconOptions): DivIcon } = DivIcon.extend({
initialize: function(options: SvgIconOptions = {}) {
options.color = options.color || 'var(--bs-primary)';
options.svgPath = options.svgPath || 'M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z';
options.svgItems = options.svgItems || '<path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z"/>';
options.viewBox = options.viewBox || '0 0 512 512';
const svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="' + options.viewBox + '"><path fill="' + options.color + '" d="' + options.svgPath + '"/></svg>';
const svg = '<svg xmlns="http://www.w3.org/2000/svg" fill="' + options.color + '" viewBox="' + options.viewBox + '">' + options.svgItems + '</svg>';
setOptions(this, {
iconSize: options.small ? [15, 15] : [30, 30],
iconAnchor: options.small ? [15, 28] : [15, 35],

2
src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts
View File

@ -191,7 +191,7 @@ export class GalleryMapLightboxComponent implements OnChanges, OnDestroy {
theme: ths.theme,
icon: MarkerFactory.getSvgIcon({
color: ths.theme.color,
svgPath: ths.theme.svgIcon?.path,
svgItems: ths.theme.svgIcon?.items,
viewBox: ths.theme.svgIcon?.viewBox
})
};

14
src/frontend/app/ui/settings/template/settings-entry/settings-entry.component.html
View File

@ -159,8 +159,8 @@
<svg xmlns="http://www.w3.org/2000/svg"
width="1em"
fill="currentcolor"
[attr.viewBox]="state.value.viewBox || '0 0 512 512'">
<path [attr.d]="state.value.path"/>
[attr.viewBox]="state.value.viewBox || '0 0 512 512'"
[innerHtml]="state.value.items | safeHtml">
</svg>
</button>
@ -178,8 +178,8 @@
<svg xmlns="http://www.w3.org/2000/svg"
width="2em"
fill="currentcolor"
[attr.viewBox]="state.value.viewBox || '0 0 512 512'">
<path [attr.d]="state.value.path"/>
[attr.viewBox]="state.value.viewBox || '0 0 512 512'"
[innerHtml]="state.value.items | safeHtml">
</svg>
</div>
</div>
@ -209,10 +209,10 @@
(change)="onChange($event)"></app-settings-entry>
<app-settings-entry
[ngModel]="state.value.__state.path"
[ngModel]="state.value.__state.items"
[noChangeDetection]="true"
[name]="'icon_p_'+idName"
[id]="'icon_p_'+idName"
[name]="'icon_i_'+idName"
[id]="'icon_i_'+idName"
(change)="onChange($event)"></app-settings-entry>
</div>

6
src/frontend/app/ui/settings/template/settings-entry/settings-entry.component.ts
View File

@ -17,6 +17,7 @@ import {WebConfig} from '../../../../../../common/config/private/WebConfig';
import {JobScheduleConfig, UserConfig} from '../../../../../../common/config/private/PrivateConfig';
import {enumToTranslatedArray} from '../../../EnumTranslations';
import {BsModalService} from '../../../../../../../node_modules/ngx-bootstrap/modal';
import {Config} from '../../../../../../common/config/public/Config';
interface IState {
shouldHide(): boolean;
@ -450,8 +451,8 @@ export class SettingsEntryComponent
const doc = parser.parseFromString(reader.result as string, 'image/svg+xml');
try {
const wb = doc.documentElement.getAttribute('viewBox');
const path = doc.documentElement.getElementsByTagName('path')[0].getAttribute('d');
this.state.value.path = path;
const items = doc.documentElement.innerHTML;
this.state.value.items = items;
this.state.value.viewBox = wb;
} catch (e) {
console.error(e);
@ -465,6 +466,7 @@ export class SettingsEntryComponent
}
protected readonly Config = Config;
}

2
src/frontend/index.html
View File

@ -40,7 +40,7 @@
style="width: 200px;max-width: calc(50vw);max-height: calc(50vh);"
fill="currentcolor"
viewBox="<%- Config.Server.svgIcon.viewBox || '0 0 512 512' %>">
<path d="<%- Config.Server.svgIcon.path %>"/>
<%- Config.Server.svgIcon.items %>
</svg>
<h2 style="margin-top: 1em">Loading...</h2>
</div>