Commit Graph
15 Commits
Author SHA1 Message Date
Matthijsanddermotduffy fc7e09952f fix: vertically center icons within icon buttons (#2734)
Menu icons sit visibly high inside their round buttons in the iOS
companion app, and one pixel high everywhere else. The card's icon
wrapper (`advanced-camera-card-icon`) is slotted into `ha-icon-button`,
whose label renders slotted content inside a plain `<span>`. The wrapper
is an `inline-block`, so it rides the text baseline and leaves the
font's descender space underneath it: the span grows taller than the
icon (measured: 24.5px around a 22.5px icon under Roboto), the button's
flex layout centers the *span*, and the icon lands high by half the
descent.

That descent is a property of the active font, which is why the offset
differs per platform: about 1px under Roboto, and about 2px when the
font stack resolves to a system font, as on iOS, where it is clearly
visible inside the round menu button background. Slotted Home Assistant
icons do not show this because they are laid out block-level via
`--ha-icon-display`, which the card already sets; the card's own wrapper
element reintroduces the inline-block one level up.

**Change:** lay the wrapper out block-level wherever it is slotted into
`ha-icon-button` (`button.scss`, which also covers the submenu and
next/previous controls). Block layout has no baseline, so the label span
shrinks to exactly the icon and the icon centers.

**Verification:**

- The structure (flex button, label span, slotted icon) rebuilt
standalone in Playwright Chromium and WebKit: with an inline-block icon
the offset is 1px under Roboto and 1.75 to 2px under system fonts, in
both engines; with a block icon it is 0.0px in every engine, font, and
button size tried.
- Measured on a live HA 2026.8.3 dashboard (45px menu buttons): before,
every menu icon center sat 1px above its button center; after, 0.0px for
both a standard menu button and a conditional
`advanced-camera-card-menu-icon` element.
- `yarn run test`, `yarn run test:browser` (chromium), `yarn run lint`,
`yarn run typecheck` pass.

---------

Co-authored-by: dermotduffy <dermot.duffy@gmail.com>
2026-08-30 12:11:10 -07:00
Dermot Duffy f41454580c feat: Add support for overriding button border radius styling (#2269)
- Closes #2229
2025-12-08 22:59:41 -08:00
Dermot Duffy cc376a8be1 feat: Rename the card to advanced-camera-card (#1873)
Whilst the Frigate support in this card is the best among camera
engines, the name incorrectly suggests that Frigate is a requirement.
Instead, to broaden the appeal, change to more camera agnostic name.
This does not suggest any change in priority, role or support for
Frigate.

This change is likely to be bug prone, due to the size of the rename --
the code contains 1500+ references to "Frigate" most of which make sense
to rename, some which do not, all of which needed human assessment.

- Closes #1298


BREAKING CHANGE: References to `frigate-card` in all kinds of
configuration need to be updated to `advanced-camera-card`. An automated
config upgrade should take care of the majority of usecases (click `Edit
-> Upgrade -> Save`), though may not be perfect.
2025-02-06 19:32:32 -08:00
Dermot Duffy 278560b5ac feat: Add richer card theme support (#1809) 2025-01-07 19:54:13 -08:00
Dermot Duffy 9d812af9f4 fix: Use HA style and coloring for all icons (#1790) 2024-12-23 15:22:27 -08:00
Felipe Santos fccb4c9afd Bump prettier to v3 and format all files 2024-06-10 00:29:50 -03:00
Dermot Duffy 37a016e381 Add experimental 2-way audio support. 2023-04-29 13:30:37 -07:00
Dermot Duffy e4047db6c1 Fix application of state to submenu items. 2022-02-17 20:27:59 -08:00
Dermot Duffy 6a32c66de0 Add state handling for non-light entities. 2022-02-12 07:30:39 -08:00
Dermot Duffy c075fc574e Fix menu rendering issue for some menu layouts. 2022-01-14 21:31:16 -08:00
Dermot Duffy ca581c5078 Initial skeleton of multiple camera support. 2022-01-14 21:31:16 -08:00
Dermot Duffy 19291ae184 Allow custom actions to control the frigate card. 2021-11-10 07:45:59 -08:00
Dermot Duffy 17eb1d439d Make control sizes configurable. 2021-10-30 20:14:46 -07:00
Dermot Duffy a919222d5f Tweak button rendering to work for HA 2021.11. 2021-10-30 00:47:14 -07:00
Dermot Duffy d02f760793 Improve CSS encapslation (Chrome). 2021-09-20 22:37:08 -07:00