diff --git a/src/components/live.ts b/src/components/live.ts index 8d5c5e46..2fb09d28 100644 --- a/src/components/live.ts +++ b/src/components/live.ts @@ -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? diff --git a/src/editor.ts b/src/editor.ts index c75896ab..0940734d 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -269,40 +269,38 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor @click=${this._toggleCameraHandler} .cameraIndex=${cameraIndex} > -
- - - ${addNewCamera - ? html` - [${localize('editor.add_new_camera')}...] - ` - : // 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` - ${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} - `} - -
+ + + ${addNewCamera + ? html` + [${localize('editor.add_new_camera')}...] + ` + : // 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` + ${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} + `} + `; } diff --git a/src/scss/editor.scss b/src/scss/editor.scss index 5ba61e1f..0e7ff52d 100644 --- a/src/scss/editor.scss +++ b/src/scss/editor.scss @@ -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; }