From 1af7e761b9243d99f16bcc152af75f45064f732b Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 16 Nov 2025 14:15:21 +0000 Subject: [PATCH] fix: Move control styles to presentational components - 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. --- .../brightness-controls.component.ts | 44 ++++++++++++++++++- .../zoom-controls/zoom-controls.component.ts | 26 ++++++++++- src/app/app.component.ts | 2 +- tsconfig.json | 3 +- 4 files changed, 71 insertions(+), 4 deletions(-) diff --git a/projects/ngx-pinch-zoom/src/lib/components/presentational/brightness-controls/brightness-controls.component.ts b/projects/ngx-pinch-zoom/src/lib/components/presentational/brightness-controls/brightness-controls.component.ts index 07e1480..ca3ef4e 100644 --- a/projects/ngx-pinch-zoom/src/lib/components/presentational/brightness-controls/brightness-controls.component.ts +++ b/projects/ngx-pinch-zoom/src/lib/components/presentational/brightness-controls/brightness-controls.component.ts @@ -31,7 +31,49 @@ import { Component, input, output } from '@angular/core'; > `, - 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 diff --git a/projects/ngx-pinch-zoom/src/lib/components/presentational/zoom-controls/zoom-controls.component.ts b/projects/ngx-pinch-zoom/src/lib/components/presentational/zoom-controls/zoom-controls.component.ts index d608783..24d100c 100644 --- a/projects/ngx-pinch-zoom/src/lib/components/presentational/zoom-controls/zoom-controls.component.ts +++ b/projects/ngx-pinch-zoom/src/lib/components/presentational/zoom-controls/zoom-controls.component.ts @@ -19,7 +19,31 @@ import { Component, input, output } from '@angular/core'; tabindex="0" > `, - 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 diff --git a/src/app/app.component.ts b/src/app/app.component.ts index a9d9512..ade9eaf 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -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. diff --git a/tsconfig.json b/tsconfig.json index 6068c79..58670e7 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -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",