diff --git a/src/panels/lovelace/editor/view-editor/hui-edit-view.ts b/src/panels/lovelace/editor/view-editor/hui-edit-view.ts index 0ce183e582..50f54e8d18 100644 --- a/src/panels/lovelace/editor/view-editor/hui-edit-view.ts +++ b/src/panels/lovelace/editor/view-editor/hui-edit-view.ts @@ -362,6 +362,9 @@ export class HuiEditView extends LitElement { paper-spinner[active] { display: block; } + paper-dialog-scrollable { + margin-top: 0; + } .hidden { display: none; } diff --git a/src/panels/lovelace/editor/view-editor/hui-view-visibility-editor.ts b/src/panels/lovelace/editor/view-editor/hui-view-visibility-editor.ts index 82181bff94..b13c01cab9 100644 --- a/src/panels/lovelace/editor/view-editor/hui-view-visibility-editor.ts +++ b/src/panels/lovelace/editor/view-editor/hui-view-visibility-editor.ts @@ -8,11 +8,11 @@ import { CSSResult, css, } from "lit-element"; -import "@polymer/paper-input/paper-input"; +import "@polymer/paper-item/paper-item"; +import "@polymer/paper-item/paper-item-body"; import { HomeAssistant } from "../../../../types"; import { fireEvent } from "../../../../common/dom/fire_event"; -import { configElementStyle } from "../config-elements/config-elements-style"; import { LovelaceViewConfig, ShowViewConfig } from "../../../../data/lovelace"; import { fetchUsers, User } from "../../../../data/user"; @@ -42,16 +42,14 @@ export class HuiViewVisibilityEditor extends LitElement { @property() private _visible!: boolean | ShowViewConfig[]; private _sortedUsers = memoizeOne((users: User[]) => { - return users - .filter((user) => !user.system_generated) - .sort((a, b) => compare(a.name, b.name)); + return users.sort((a, b) => compare(a.name, b.name)); }); protected firstUpdated(changedProps: PropertyValues) { super.firstUpdated(changedProps); fetchUsers(this.hass).then((users) => { - this._users = users; + this._users = users.filter((user) => !user.system_generated); fireEvent(this, "iron-resize"); }); } @@ -62,24 +60,23 @@ export class HuiViewVisibilityEditor extends LitElement { } return html` - ${configElementStyle} -
- Select which users should have access to this view - - ${this._sortedUsers(this._users).map( - (user) => html` -
-
${user.name}
-   -
- ` +

+ ${this.hass.localize( + "ui.panel.lovelace.editor.edit_view.visibility.select_users" )} -

+

+ ${this._sortedUsers(this._users).map( + (user) => html` + + ${user.name} + + + ` + )} `; } @@ -133,13 +130,8 @@ export class HuiViewVisibilityEditor extends LitElement { static get styles(): CSSResult { return css` - .flex { - flex: 1; - margin-left: 16px; - display: flex; - justify-content: space-between; - align-items: center; - min-width: 0; + :host { + display: block; } `; } diff --git a/src/translations/en.json b/src/translations/en.json index f845e511a0..41bb57325a 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -1929,7 +1929,10 @@ "move_right": "Move view right", "tab_settings": "Settings", "tab_badges": "Badges", - "tab_visibility": "Visibility" + "tab_visibility": "Visibility", + "visibility": { + "select_users": "Select which users should see this view in the navigation" + } }, "edit_card": { "header": "Card Configuration",