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 reconsider card_id, and using entity (which is unique) as that 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}
.cameraIndex=${cameraIndex}
>
<div>
<ha-icon .icon=${addNewCamera ? 'mdi:video-plus' : 'mdi:video'}></ha-icon>
<span>
${addNewCamera
? html` <span class="new-camera">
[${localize('editor.add_new_camera')}...]
</span>`
: // Attempt to render a recognizable name for the camera,
// starting with the most likely to be useful and working our
// ways towards the least useful.
html` <span>
${cameraConfig?.title ||
cameraConfig?.card_id ||
[
cameraConfig?.camera_entity
? getEntityTitle(this.hass, String(cameraConfig.camera_entity))
: '',
cameraConfig?.client_id,
cameraConfig?.camera_name
? prettifyFrigateName(String(cameraConfig.camera_name))
: '',
cameraConfig?.label
? prettifyFrigateName(String(cameraConfig.label))
: '',
cameraConfig?.zone
? prettifyFrigateName(String(cameraConfig.zone))
: '',
]
.filter(Boolean)
.join(' / ') ||
localize('editor.camera') + ' #' + cameraIndex}
</span>`}
</span>
</div>
<ha-icon .icon=${addNewCamera ? 'mdi:video-plus' : 'mdi:video'}></ha-icon>
<span>
${addNewCamera
? html` <span class="new-camera">
[${localize('editor.add_new_camera')}...]
</span>`
: // Attempt to render a recognizable name for the camera,
// starting with the most likely to be useful and working our
// ways towards the least useful.
html` <span>
${cameraConfig?.title ||
cameraConfig?.card_id ||
[
cameraConfig?.camera_entity
? getEntityTitle(this.hass, String(cameraConfig.camera_entity))
: '',
cameraConfig?.client_id,
cameraConfig?.camera_name
? prettifyFrigateName(String(cameraConfig.camera_name))
: '',
cameraConfig?.label
? prettifyFrigateName(String(cameraConfig.label))
: '',
cameraConfig?.zone
? prettifyFrigateName(String(cameraConfig.zone))
: '',
]
.filter(Boolean)
.join(' / ') ||
localize('editor.camera') + ' #' + cameraIndex}
</span>`}
</span>
</div>
`;
}
src/scss/editor.scss
+4
View File
@@ -41,10 +41,14 @@ div.upgrade span {
}
.camera-header {
display: flex;
margin-top: 4px;
cursor: pointer;
}
.camera-header * {
flex-basis: auto;
// Only allow clicks on the outermost header.
pointer-events: none;
}