flan/advanced-camera-card
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix rendering issue with very low camera title.

Browse Source
This commit is contained in:
Dermot Duffy
2022-01-14 21:31:16 -08:00
parent bfd954817d
commit cbd42bf565
3 changed files with 36 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/live.ts
-2
View File
@@ -1,5 +1,3 @@
// TODO editor: fill in a new camera then backspace it away
// TODO editor: render correctly when name title is really long
// TODO editor: should not be able to move up a new camera before it's not new. // TODO editor: should not be able to move up a new camera before it's not new.
// TODO reconsider card_id, and using entity (which is unique) as that id // TODO reconsider card_id, and using entity (which is unique) as that id
// TODO rename card_id to id? // TODO rename card_id to id?
src/editor.ts
+32 -34
View File
@@ -269,40 +269,38 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
@click=${this._toggleCameraHandler} @click=${this._toggleCameraHandler}
.cameraIndex=${cameraIndex} .cameraIndex=${cameraIndex}
> >
<div> <ha-icon .icon=${addNewCamera ? 'mdi:video-plus' : 'mdi:video'}></ha-icon>
<ha-icon .icon=${addNewCamera ? 'mdi:video-plus' : 'mdi:video'}></ha-icon> <span>
<span> ${addNewCamera
${addNewCamera ? html` <span class="new-camera">
? html` <span class="new-camera"> [${localize('editor.add_new_camera')}...]
[${localize('editor.add_new_camera')}...] </span>`
</span>` : // Attempt to render a recognizable name for the camera,
: // Attempt to render a recognizable name for the camera, // starting with the most likely to be useful and working our
// starting with the most likely to be useful and working our // ways towards the least useful.
// ways towards the least useful. html` <span>
html` <span> ${cameraConfig?.title ||
${cameraConfig?.title || cameraConfig?.card_id ||
cameraConfig?.card_id || [
[ cameraConfig?.camera_entity
cameraConfig?.camera_entity ? getEntityTitle(this.hass, String(cameraConfig.camera_entity))
? getEntityTitle(this.hass, String(cameraConfig.camera_entity)) : '',
: '', cameraConfig?.client_id,
cameraConfig?.client_id, cameraConfig?.camera_name
cameraConfig?.camera_name ? prettifyFrigateName(String(cameraConfig.camera_name))
? prettifyFrigateName(String(cameraConfig.camera_name)) : '',
: '', cameraConfig?.label
cameraConfig?.label ? prettifyFrigateName(String(cameraConfig.label))
? prettifyFrigateName(String(cameraConfig.label)) : '',
: '', cameraConfig?.zone
cameraConfig?.zone ? prettifyFrigateName(String(cameraConfig.zone))
? prettifyFrigateName(String(cameraConfig.zone)) : '',
: '', ]
] .filter(Boolean)
.filter(Boolean) .join(' / ') ||
.join(' / ') || localize('editor.camera') + ' #' + cameraIndex}
localize('editor.camera') + ' #' + cameraIndex} </span>`}
</span>`} </span>
</span>
</div>
</div> </div>
`; `;
} }
src/scss/editor.scss
+4
View File
@@ -41,10 +41,14 @@ div.upgrade span {
} }
.camera-header { .camera-header {
display: flex;
margin-top: 4px; margin-top: 4px;
cursor: pointer; cursor: pointer;
} }
.camera-header * { .camera-header * {
flex-basis: auto;
// Only allow clicks on the outermost header. // Only allow clicks on the outermost header.
pointer-events: none; pointer-events: none;
} }