brianpooe/ngx-pinch-zoom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: Move control styles to presentational components

Browse source 
- Moved brightness control styles from container SASS to BrightnessControlsComponent
- Moved zoom control styles from container SASS to ZoomControlsComponent
- Fixed Angular view encapsulation issue preventing styles from applying
- Added @brianpooe/ngx-pinch-zoom path mapping to tsconfig.json
- Updated app component to import from @brianpooe/ngx-pinch-zoom

This fixes the issue where control icons were not visible due to Angular's
view encapsulation preventing parent component styles from applying to
child presentational components. Each component now contains its own styles.
This commit is contained in:
Claude 2025-11-16 14:15:21 +00:00
parent cbb2a5532f
commit 1af7e761b9
No known key found for this signature in database
4 changed files with 71 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
projects/ngx-pinch-zoom/src/lib/components/presentational/brightness-controls/brightness-controls.component.ts
View file

@ -31,7 +31,49 @@ import { Component, input, output } from '@angular/core';
></div>
</div>
`,
styles: [],
styles: [`
.pz-brightness-controls {
display: flex;
gap: 8px;
align-items: center;
}
.pz-brightness-button {
position: relative;
width: 48px;
height: 48px;
background-color: rgba(0, 0, 0, .8);
background-position: center;
background-repeat: no-repeat;
background-size: 24px;
border-radius: 4px;
opacity: 0.5;
cursor: pointer;
transition: opacity .1s;
user-select: none;
}
.pz-brightness-button:hover {
opacity: 0.7;
}
.pz-brightness-button-disabled {
opacity: 0.3;
cursor: not-allowed;
}
.pz-brightness-button-disabled:hover {
opacity: 0.3;
}
.pz-brightness-increase {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0yMCA4LjY5VjRoLTQuNjlMMTIgLjY5IDguNjkgNEg0djQuNjlMLjY5IDEyIDQgMTUuMzFWMjBoNC42OUwxMiAyMy4zMSAxNS4zMSAyMEgyMHYtNC42OUwyMy4zMSAxMiAyMCA4LjY5ek0xMiAxOGMtMy4zMSAwLTYtMi42OS02LTZzMi42OS02IDYtNiA2IDIuNjkgNiA2LTIuNjkgNi02IDZ6bTAtMTBjLTIuMjEgMC00IDEuNzktNCA0czEuNzkgNCA0IDQgNC0xLjc5IDQtNC0xLjc5LTQtNC00eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);
}
.pz-brightness-decrease {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0yMCA4LjY5VjRoLTQuNjlMMTIgLjY5IDguNjkgNEg0djQuNjlMLjY5IDEyIDQgMTUuMzFWMjBoNC42OUwxMiAyMy4zMSAxNS4zMSAyMEgyMHYtNC42OUwyMy4zMSAxMiAyMCA4LjY5ek0xMiAxOGMtMy4zMSAwLTYtMi42OS02LTZzMi42OS02IDYtNiA2IDIuNjkgNiA2LTIuNjkgNi02IDZ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
}
`],
})
export class BrightnessControlsComponent {
// Inputs

26
projects/ngx-pinch-zoom/src/lib/components/presentational/zoom-controls/zoom-controls.component.ts
View file

@ -19,7 +19,31 @@ import { Component, input, output } from '@angular/core';
tabindex="0"
></div>
`,
styles: [],
styles: [`
.pz-zoom-button {
color: #fff;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgc3R5bGU9IiI+PHJlY3QgaWQ9ImJhY2tncm91bmRyZWN0IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4PSIwIiB5PSIwIiBmaWxsPSJub25lIiBzdHJva2U9Im5vbmUiLz48ZyBjbGFzcz0iY3VycmVudExheWVyIiBzdHlsZT0iIj48dGl0bGU+TGF5ZXIgMTwvdGl0bGU+PHBhdGggZD0iTTE1LjUgMTRoLS43OWwtLjI4LS4yN0MxNS40MSAxMi41OSAxNiAxMS4xMSAxNiA5LjUgMTYgNS45MSAxMy4wOSAzIDkuNSAzUzMgNS45MSAzIDkuNSA1LjkxIDE2IDkuNSAxNmMxLjYxIDAgMy4wOS0uNTkgNC4yMy0xLjU3bC4yNy4yOHYuNzlsNSA0Ljk5TDIwLjQ5IDE5bC00Ljk5LTV6bS02IDBDNy4wMSAxNCA1IDExLjk5IDUgOS41UzcuMDEgNSA5LjUgNSAxNCA3LjAxIDE0IDkuNSAxMS45OSAxNCA5LjUgMTR6IiBpZD0ic3ZnXzEiIGNsYXNzPSIiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMSIvPjxwYXRoIGQ9Ik0xMiAxMGgtMnYySDl2LTJIN1Y5aDJWN2gxdjJoMnYxeiIgaWQ9InN2Z18zIiBjbGFzcz0iIiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjEiLz48L2c+PC9zdmc+), url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHJlY3QgaWQ9ImJhY2tncm91bmRyZWN0IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4PSIwIiB5PSIwIiBmaWxsPSJub25lIiBzdHJva2U9Im5vbmUiLz48ZyBjbGFzcz0iY3VycmVudExheWVyIiBzdHlsZT0iIj48dGl0bGU+TGF5ZXIgMTwvdGl0bGU+PHBhdGggZD0iTTE1LjUgMTRoLS43OWwtLjI4LS4yN0MxNS40MSAxMi41OSAxNiAxMS4xMSAxNiA5LjUgMTYgNS45MSAxMy4wOSAzIDkuNSAzUzMgNS45MSAzIDkuNSA1LjkxIDE2IDkuNSAxNmMxLjYxIDAgMy4wOS0uNTkgNC4yMy0xLjU3bC4yNy4yOHYuNzlsNSA0Ljk5TDIwLjQ5IDE5bC00Ljk5LTV6bS02IDBDNy4wMSAxNCA1IDExLjk5IDUgOS41UzcuMDEgNSA5LjUgNSAxNCA3LjAxIDE0IDkuNSAxMS45OSAxNCA5LjUgMTR6TTcgOWg1djFIN3oiIGlkPSJzdmdfMiIgY2xhc3M9IiIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIxIi8+PC9nPjwvc3ZnPg==);
background-color: rgba(0, 0, 0, .8);
background-position: center, -1000px;
background-repeat: no-repeat, no-repeat;
background-size: 40px;
width: 56px;
height: 56px;
border-radius: 4px;
opacity: 0.5;
cursor: pointer;
transition: opacity .1s;
user-select: none;
}
.pz-zoom-button-out {
background-position: -1000px, center;
}
.pz-zoom-button:hover {
opacity: 0.7;
}
`],
})
export class ZoomControlsComponent {
// Inputs

2
src/app/app.component.ts
View file

@ -1,5 +1,5 @@
import { Component, signal } from '@angular/core';
import { PinchZoomComponent } from 'ngx-pinch-zoom';
import { PinchZoomComponent } from '@brianpooe/ngx-pinch-zoom';
/**
* Example app demonstrating all ngx-pinch-zoom features.

3
tsconfig.json
View file

@ -14,7 +14,8 @@
"strict": true,
"strictNullChecks": true,
"paths": {
"ngx-pinch-zoom": ["dist/ngx-pinch-zoom/ngx-pinch-zoom", "dist/ngx-pinch-zoom"]
"ngx-pinch-zoom": ["dist/ngx-pinch-zoom/ngx-pinch-zoom", "dist/ngx-pinch-zoom"],
"@brianpooe/ngx-pinch-zoom": ["dist/ngx-pinch-zoom/ngx-pinch-zoom", "dist/ngx-pinch-zoom"]
},
"target": "ES2022",
"module": "ES2022",