Color all deletion options consistenly red (#6891)

* Color all deletion options consistenly red

* CSS cleanup

* Color the "Remove Selected" entity config button

* Make eslint happy

* Getting rid of a wayward bracket
This commit is contained in:
Philip Allgaier 2020-09-09 20:48:51 +02:00 committed by GitHub
parent 42bf350034
commit 1890aab1e6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 115 additions and 108 deletions

View File

@ -336,7 +336,6 @@ export default class HaAutomationActionRow extends LitElement {
--mdc-theme-text-primary-on-background: var(--disabled-text-color); --mdc-theme-text-primary-on-background: var(--disabled-text-color);
} }
.warning { .warning {
color: var(--warning-color);
margin-bottom: 8px; margin-bottom: 8px;
} }
.warning ul { .warning ul {

View File

@ -104,6 +104,7 @@ export class HaAutomationEditor extends LitElement {
<ha-svg-icon .path=${mdiContentDuplicate}></ha-svg-icon> <ha-svg-icon .path=${mdiContentDuplicate}></ha-svg-icon>
</mwc-icon-button> </mwc-icon-button>
<mwc-icon-button <mwc-icon-button
class="warning"
slot="toolbar-icon" slot="toolbar-icon"
title="${this.hass.localize( title="${this.hass.localize(
"ui.panel.config.automation.picker.delete_automation" "ui.panel.config.automation.picker.delete_automation"

View File

@ -58,6 +58,7 @@ import {
loadEntityEditorDialog, loadEntityEditorDialog,
showEntityEditorDialog, showEntityEditorDialog,
} from "./show-dialog-entity-editor"; } from "./show-dialog-entity-editor";
import { haStyle } from "../../../resources/styles";
export interface StateEntity extends EntityRegistryEntry { export interface StateEntity extends EntityRegistryEntry {
readonly?: boolean; readonly?: boolean;
@ -378,7 +379,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
"ui.panel.config.entities.picker.disable_selected.button" "ui.panel.config.entities.picker.disable_selected.button"
)}</mwc-button )}</mwc-button
> >
<mwc-button @click=${this._removeSelected} <mwc-button @click=${this._removeSelected} class="warning"
>${this.hass.localize( >${this.hass.localize(
"ui.panel.config.entities.picker.remove_selected.button" "ui.panel.config.entities.picker.remove_selected.button"
)}</mwc-button )}</mwc-button
@ -406,6 +407,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
)} )}
</paper-tooltip> </paper-tooltip>
<ha-icon-button <ha-icon-button
class="warning"
id="remove-btn" id="remove-btn"
icon="hass:delete" icon="hass:delete"
@click=${this._removeSelected} @click=${this._removeSelected}
@ -721,111 +723,114 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
navigate(this, window.location.pathname, true); navigate(this, window.location.pathname, true);
} }
static get styles(): CSSResult { static get styles(): CSSResult[] {
return css` return [
hass-loading-screen { haStyle,
--app-header-background-color: var(--sidebar-background-color); css`
--app-header-text-color: var(--sidebar-text-color); hass-loading-screen {
} --app-header-background-color: var(--sidebar-background-color);
a { --app-header-text-color: var(--sidebar-text-color);
color: var(--primary-color); }
} a {
h2 { color: var(--primary-color);
margin-top: 0; }
font-family: var(--paper-font-headline_-_font-family); h2 {
-webkit-font-smoothing: var( margin-top: 0;
--paper-font-headline_-_-webkit-font-smoothing font-family: var(--paper-font-headline_-_font-family);
); -webkit-font-smoothing: var(
font-size: var(--paper-font-headline_-_font-size); --paper-font-headline_-_-webkit-font-smoothing
font-weight: var(--paper-font-headline_-_font-weight); );
letter-spacing: var(--paper-font-headline_-_letter-spacing); font-size: var(--paper-font-headline_-_font-size);
line-height: var(--paper-font-headline_-_line-height); font-weight: var(--paper-font-headline_-_font-weight);
opacity: var(--dark-primary-opacity); letter-spacing: var(--paper-font-headline_-_letter-spacing);
} line-height: var(--paper-font-headline_-_line-height);
p { opacity: var(--dark-primary-opacity);
font-family: var(--paper-font-subhead_-_font-family); }
-webkit-font-smoothing: var( p {
--paper-font-subhead_-_-webkit-font-smoothing font-family: var(--paper-font-subhead_-_font-family);
); -webkit-font-smoothing: var(
font-weight: var(--paper-font-subhead_-_font-weight); --paper-font-subhead_-_-webkit-font-smoothing
line-height: var(--paper-font-subhead_-_line-height); );
} font-weight: var(--paper-font-subhead_-_font-weight);
ha-data-table { line-height: var(--paper-font-subhead_-_line-height);
width: 100%; }
--data-table-border-width: 0; ha-data-table {
} width: 100%;
:host(:not([narrow])) ha-data-table { --data-table-border-width: 0;
height: calc(100vh - 65px); }
display: block; :host(:not([narrow])) ha-data-table {
} height: calc(100vh - 65px);
ha-button-menu { display: block;
margin-right: 8px; }
} ha-button-menu {
.table-header { margin-right: 8px;
display: flex; }
justify-content: space-between; .table-header {
align-items: center; display: flex;
border-bottom: 1px solid rgba(var(--rgb-primary-text-color), 0.12); justify-content: space-between;
} align-items: center;
search-input { border-bottom: 1px solid rgba(var(--rgb-primary-text-color), 0.12);
margin-left: 16px; }
flex-grow: 1; search-input {
position: relative; margin-left: 16px;
top: 2px; flex-grow: 1;
} position: relative;
.search-toolbar search-input { top: 2px;
margin-left: 8px; }
top: 1px; .search-toolbar search-input {
} margin-left: 8px;
.search-toolbar { top: 1px;
display: flex; }
justify-content: space-between; .search-toolbar {
align-items: center; display: flex;
color: var(--secondary-text-color); justify-content: space-between;
} align-items: center;
.search-toolbar ha-button-menu { color: var(--secondary-text-color);
position: static; }
} .search-toolbar ha-button-menu {
.selected-txt { position: static;
font-weight: bold; }
padding-left: 16px; .selected-txt {
} font-weight: bold;
.table-header .selected-txt { padding-left: 16px;
margin-top: 20px; }
} .table-header .selected-txt {
.search-toolbar .selected-txt { margin-top: 20px;
font-size: 16px; }
} .search-toolbar .selected-txt {
.header-btns > mwc-button, font-size: 16px;
.header-btns > ha-icon-button { }
margin: 8px; .header-btns > mwc-button,
} .header-btns > ha-icon-button {
.active-filters { margin: 8px;
color: var(--primary-text-color); }
position: relative; .active-filters {
display: flex; color: var(--primary-text-color);
align-items: center; position: relative;
padding: 2px 2px 2px 8px; display: flex;
margin-left: 4px; align-items: center;
font-size: 14px; padding: 2px 2px 2px 8px;
} margin-left: 4px;
.active-filters ha-icon { font-size: 14px;
color: var(--primary-color); }
} .active-filters ha-icon {
.active-filters mwc-button { color: var(--primary-color);
margin-left: 8px; }
} .active-filters mwc-button {
.active-filters::before { margin-left: 8px;
background-color: var(--primary-color); }
opacity: 0.12; .active-filters::before {
border-radius: 4px; background-color: var(--primary-color);
position: absolute; opacity: 0.12;
top: 0; border-radius: 4px;
right: 0; position: absolute;
bottom: 0; top: 0;
left: 0; right: 0;
content: ""; bottom: 0;
} left: 0;
`; content: "";
}
`,
];
} }
} }

View File

@ -198,6 +198,7 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) {
? "" ? ""
: html` : html`
<ha-icon-button <ha-icon-button
class="warning"
slot="toolbar-icon" slot="toolbar-icon"
title="${this.hass.localize( title="${this.hass.localize(
"ui.panel.config.scene.picker.delete_scene" "ui.panel.config.scene.picker.delete_scene"

View File

@ -74,6 +74,7 @@ export class HaScriptEditor extends LitElement {
? "" ? ""
: html` : html`
<ha-icon-button <ha-icon-button
class="warning"
slot="toolbar-icon" slot="toolbar-icon"
title="${this.hass.localize( title="${this.hass.localize(
"ui.panel.config.script.editor.delete_script" "ui.panel.config.script.editor.delete_script"