Update UI and Add Move Card to a Dialogue #2282
Conversation
ghost
assigned
| } | ||
| </style> | ||
| <paper-dialog with-backdrop opened> | ||
| <h2>Move card to view</h2> |
There was a problem hiding this comment.
Need to add Localize stuff
|
Screenshot if you change looks |
src/panels/lovelace/editor/card-editor/hui-dialog-move-card-view.ts
Outdated
Show resolved
Hide resolved
src/panels/lovelace/editor/card-editor/show-move-card-view-dialog.ts
Outdated
Show resolved
Hide resolved
src/panels/lovelace/editor/card-editor/show-move-card-view-dialog.ts
Outdated
Show resolved
Hide resolved
src/resources/ha-style.js
Outdated
| @@ -52,6 +52,7 @@ documentContainer.innerHTML = `<custom-style> | |||
| --card-background-color: #ffffff; | |||
| --primary-background-color: #fafafa; | |||
| --secondary-background-color: #e5e5e5; /* behind the cards on state */ | |||
| --edit-mode-header-background-color: #455a64; /* Edit Mode Changes Header Color */ | |||
There was a problem hiding this comment.
I don't like having names about how colors are going to be applied. We have primary, accent, maybe we should have dark-background-color and dark-text-color ?
There was a problem hiding this comment.
Or maybe we should define a theme for editing mode :D and apply that to the app-header ?
There was a problem hiding this comment.
or
We could use var(--dark-primary-color) and fall back onto a set value
There was a problem hiding this comment.
var(--dark-primary-color, #455a64);
There was a problem hiding this comment.
We should change our values to HSL 😉
There was a problem hiding this comment.
We should actually. maybe someday Ill get bored enough to do that.
|
|
zsarnett
force-pushed
the
Update-card-UI
branch
from
5ddc556
to
696084a
Compare
|
|
||
| private _openedChanged(ev: MouseEvent) { | ||
| if (!(ev.detail as any).value) { | ||
| this._dialog.close(); |
There was a problem hiding this comment.
I don't think this is necessary, as closing a dialog means you're setting opened to false. So when opened changes to false, it is already closed?
There was a problem hiding this comment.
You could however set this._params to undefined and then have the render method return empty when params is not set. The nice thing about that is that we don't keep a dialog in memory when it's not being used. That way you can also just add opened to the rendered DOM, because we will render a new dialog when params are set.
src/panels/lovelace/hui-editor.ts
Outdated
| @@ -36,6 +42,9 @@ class LovelaceFullConfigEditor extends hassLocalizeLitMixin(LitElement) { | |||
| ></paper-icon-button> | |||
| <div main-title>Edit Config</div> | |||
| <paper-button @click="${this._handleSave}">Save</paper-button> | |||
| <ha-icon class="save-button ${classMap({ | |||
| saved: this._saving! === false, | |||
There was a problem hiding this comment.
I think that the icon should hide again when a user starts typing, indicating that the current work is not saved.
|
Is there a reason we arent using paper-textarea? Other than its deprecated? I couldnt get the change event to work for just text area |
|
paper-textarea doesn't look good when used in a large area. For textarea, listen to |
|
Hi |
|
I swear I tried the input event... But it worked |
gif
Updated