self-hosted/pigallery2
1
0
Fork 0
mirror of https://github.com/bpatrik/pigallery2.git synced 2025-07-05 00:48:51 +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
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 // run on other thread
const input = { const input = {
type: ThumbnailSourceType.Photo, type: ThumbnailSourceType.Photo,
svgString: `<svg width="${size}" height="${size}" xmlns="http://www.w3.org/2000/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'}"> viewBox="${Config.Server.svgIcon.viewBox || '0 0 512 512'}">d="${Config.Server.svgIcon.items}</svg>`,
<path fill="${color}" d="${Config.Server.svgIcon.path}"/></svg>`,
size: size, size: size,
outPath, outPath,
makeSquare: false, 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.header('Content-Type', 'image/svg+xml');
res.send('<svg xmlns="http://www.w3.org/2000/svg"' + res.send('<svg xmlns="http://www.w3.org/2000/svg"' +
' viewBox="' + (Config.Server.svgIcon.viewBox || '0 0 512 512') + '">' + ' 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"' + res.send('<svg xmlns="http://www.w3.org/2000/svg"' +
' viewBox="' + (Config.Server.svgIcon.viewBox || '0 0 512 512') + '">' + ' viewBox="' + (Config.Server.svgIcon.viewBox || '0 0 512 512') + '">' +
'<style>' + '<style>' +
' path {' + ' path, circle {' +
' fill: black;' + ' fill: black;' +
' }' + ' }' +
' @media (prefers-color-scheme: dark) {' + ' @media (prefers-color-scheme: dark) {' +
' path {' + ' path, circle {' +
' fill: white;' + ' fill: white;' +
' }' + ' }' +
' }' + ' }' +
' </style>' + ' </style>' +
'<path d="' + Config.Server.svgIcon.path + '"/></svg>'); Config.Server.svgIcon.items + '</svg>');
}); });
app.get('/icon_inv.svg', (req: Request, res: Response) => { app.get('/icon_inv.svg', (req: Request, res: Response) => {
res.set('Cache-control', 'public, max-age=31536000'); res.set('Cache-control', 'public, max-age=31536000');
res.header('Content-Type', 'image/svg+xml'); 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') + '">' + ' 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 ionWarningOutline
} from '@ng-icons/ionicons'; } from '@ng-icons/ionicons';
import {SortingMethodIconComponent} from './ui/sorting-method-icon/sorting-method-icon.component'; import {SortingMethodIconComponent} from './ui/sorting-method-icon/sorting-method-icon.component';
import {SafeHtmlPipe} from './pipes/SafeHTMLPipe';
@Injectable() @Injectable()
export class MyHammerConfig extends HammerGestureConfig { export class MyHammerConfig extends HammerGestureConfig {
@ -236,7 +237,7 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
ionCameraOutline, ionWarningOutline, ionLockClosedOutline, ionChevronUpOutline, ionCameraOutline, ionWarningOutline, ionLockClosedOutline, ionChevronUpOutline,
ionFlagOutline, ionGlobeOutline, ionPieChartOutline, ionStopOutline, ionFlagOutline, ionGlobeOutline, ionPieChartOutline, ionStopOutline,
ionTimeOutline, ionCheckmarkOutline, ionPulseOutline, ionResizeOutline, ionTimeOutline, ionCheckmarkOutline, ionPulseOutline, ionResizeOutline,
ionCloudOutline, ionChatboxOutline, ionServerOutline, ionFileTrayFullOutline,ionBrushOutline, ionCloudOutline, ionChatboxOutline, ionServerOutline, ionFileTrayFullOutline, ionBrushOutline,
ionBrowsersOutline ionBrowsersOutline
}), }),
ClipboardModule, ClipboardModule,
@ -321,6 +322,7 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
UsersComponent, UsersComponent,
SharingsListComponent, SharingsListComponent,
SortingMethodIconComponent, SortingMethodIconComponent,
SafeHtmlPipe
], ],
providers: [ providers: [
{provide: HTTP_INTERCEPTORS, useClass: CSRFInterceptor, multi: true}, {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', selector: 'app-icon',
styles: [':host {line-height: 0}'], styles: [':host {line-height: 0}'],
template: ` template: `
<svg xmlns="http://www.w3.org/2000/svg" <svg xmlns="http://www.w3.org/2000/svg"
[attr.width]="width" [attr.width]="width"
[attr.height]="height" [attr.height]="height"
fill="currentcolor" fill="currentcolor"
[attr.viewBox]="Config.Server.svgIcon.viewBox || '0 0 512 512'"> [attr.viewBox]="Config.Server.svgIcon.viewBox || '0 0 512 512'"
<path [attr.d]="Config.Server.svgIcon.path"/> [innerHtml]="Config.Server.svgIcon.items | safeHtml">
</svg>`, </svg>`,
}) })
export class IconComponent { 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 { export interface SvgIconOptions {
color?: string; color?: string;
svgPath?: string; svgItems?: string;
viewBox?: string; viewBox?: string;
small?: boolean; small?: boolean;
} }
@ -10,9 +10,9 @@ export interface SvgIconOptions {
const SvgIcon: { new(options?: SvgIconOptions): DivIcon } = DivIcon.extend({ const SvgIcon: { new(options?: SvgIconOptions): DivIcon } = DivIcon.extend({
initialize: function(options: SvgIconOptions = {}) { initialize: function(options: SvgIconOptions = {}) {
options.color = options.color || 'var(--bs-primary)'; 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'; 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, { setOptions(this, {
iconSize: options.small ? [15, 15] : [30, 30], iconSize: options.small ? [15, 15] : [30, 30],
iconAnchor: options.small ? [15, 28] : [15, 35], 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, theme: ths.theme,
icon: MarkerFactory.getSvgIcon({ icon: MarkerFactory.getSvgIcon({
color: ths.theme.color, color: ths.theme.color,
svgPath: ths.theme.svgIcon?.path, svgItems: ths.theme.svgIcon?.items,
viewBox: ths.theme.svgIcon?.viewBox 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" <svg xmlns="http://www.w3.org/2000/svg"
width="1em" width="1em"
fill="currentcolor" fill="currentcolor"
[attr.viewBox]="state.value.viewBox || '0 0 512 512'"> [attr.viewBox]="state.value.viewBox || '0 0 512 512'"
<path [attr.d]="state.value.path"/> [innerHtml]="state.value.items | safeHtml">
</svg> </svg>
</button> </button>
@ -178,8 +178,8 @@
<svg xmlns="http://www.w3.org/2000/svg" <svg xmlns="http://www.w3.org/2000/svg"
width="2em" width="2em"
fill="currentcolor" fill="currentcolor"
[attr.viewBox]="state.value.viewBox || '0 0 512 512'"> [attr.viewBox]="state.value.viewBox || '0 0 512 512'"
<path [attr.d]="state.value.path"/> [innerHtml]="state.value.items | safeHtml">
</svg> </svg>
</div> </div>
</div> </div>
@ -209,10 +209,10 @@
(change)="onChange($event)"></app-settings-entry> (change)="onChange($event)"></app-settings-entry>
<app-settings-entry <app-settings-entry
[ngModel]="state.value.__state.path" [ngModel]="state.value.__state.items"
[noChangeDetection]="true" [noChangeDetection]="true"
[name]="'icon_p_'+idName" [name]="'icon_i_'+idName"
[id]="'icon_p_'+idName" [id]="'icon_i_'+idName"
(change)="onChange($event)"></app-settings-entry> (change)="onChange($event)"></app-settings-entry>
</div> </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 {JobScheduleConfig, UserConfig} from '../../../../../../common/config/private/PrivateConfig';
import {enumToTranslatedArray} from '../../../EnumTranslations'; import {enumToTranslatedArray} from '../../../EnumTranslations';
import {BsModalService} from '../../../../../../../node_modules/ngx-bootstrap/modal'; import {BsModalService} from '../../../../../../../node_modules/ngx-bootstrap/modal';
import {Config} from '../../../../../../common/config/public/Config';
interface IState { interface IState {
shouldHide(): boolean; shouldHide(): boolean;
@ -450,8 +451,8 @@ export class SettingsEntryComponent
const doc = parser.parseFromString(reader.result as string, 'image/svg+xml'); const doc = parser.parseFromString(reader.result as string, 'image/svg+xml');
try { try {
const wb = doc.documentElement.getAttribute('viewBox'); const wb = doc.documentElement.getAttribute('viewBox');
const path = doc.documentElement.getElementsByTagName('path')[0].getAttribute('d'); const items = doc.documentElement.innerHTML;
this.state.value.path = path; this.state.value.items = items;
this.state.value.viewBox = wb; this.state.value.viewBox = wb;
} catch (e) { } catch (e) {
console.error(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);" style="width: 200px;max-width: calc(50vw);max-height: calc(50vh);"
fill="currentcolor" fill="currentcolor"
viewBox="<%- Config.Server.svgIcon.viewBox || '0 0 512 512' %>"> viewBox="<%- Config.Server.svgIcon.viewBox || '0 0 512 512' %>">
<path d="<%- Config.Server.svgIcon.path %>"/> <%- Config.Server.svgIcon.items %>
</svg> </svg>
<h2 style="margin-top: 1em">Loading...</h2> <h2 style="margin-top: 1em">Loading...</h2>
</div> </div>