Skip to content

Commit

Permalink
Swap out hui-image for state-badge
Browse files Browse the repository at this point in the history
  • Loading branch information
@iantrich
iantrich committed Apr 18, 2019
1 parent 9338b2a commit fee43b0
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 47 deletions.
56 changes: 33 additions & 23 deletions dist/radial-menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2504,28 +2504,31 @@ let RadialMenu = class RadialMenu extends LitElement {
${this._config.items.map((item, index) => {
return item.entity_picture
? html `
<hui-image
<state-badge
@click="${this._handleTap}"
.config="${item}"
.hass="${this.hass}"
.image="${item.entity_picture}"
.title="${item.name}"
.stateObj="${{
attributes: {
entity_picture: item.entity_picture
},
entity_id: item.entity
}}"
style="
left:calc(${(50 -
left:${(50 -
35 *
Math.cos(-0.5 * Math.PI -
2 *
(1 / this._config.items.length) *
index *
Math.PI)).toFixed(4) + "%"} - 10px);
top:calc(${(50 +
Math.PI)).toFixed(4) + "%"};
top:${(50 +
35 *
Math.sin(-0.5 * Math.PI -
2 *
(1 / this._config.items.length) *
index *
Math.PI)).toFixed(4) + "%"} - 10px);"
></hui-image>
Math.PI)).toFixed(4) + "%"};"
></state-badge>
`
: html `
<ha-icon
Expand Down Expand Up @@ -2554,13 +2557,16 @@ let RadialMenu = class RadialMenu extends LitElement {
</div>
${this._config.entity_picture
? html `
<hui-image
<state-badge
class="menu-button"
.hass="${this.hass}"
.image="${this._config.entity_picture}"
.title="${this._config.name}"
@click="${this._toggleMenu}"
></hui-image>
.stateObj="${{
attributes: {
entity_picture: this._config.entity_picture
},
entity_id: "sensor.fake"
}}"
></state-badge>
`
: html `
<ha-icon
Expand Down Expand Up @@ -2623,7 +2629,7 @@ let RadialMenu = class RadialMenu extends LitElement {
}
.circle ha-icon,
.circle hui-image {
.circle state-badge {
text-decoration: none;
display: block;
height: 40px;
Expand All @@ -2636,20 +2642,16 @@ let RadialMenu = class RadialMenu extends LitElement {
border-radius: 50%;
}
.circle hui-image {
padding: 10px;
}
.circle ha-icon:hover {
color: var(--accent-color);
}
.circle hui-image:hover {
.circle state-badge:hover {
background-color: var(--secondary-background-color);
}
ha-icon,
hui-image {
state-badge {
cursor: pointer;
color: var(--primary-color);
}
Expand All @@ -2660,15 +2662,23 @@ let RadialMenu = class RadialMenu extends LitElement {
.menu-button {
position: absolute;
top: calc(50% - 30px);
left: calc(50% - 30px);
text-decoration: none;
text-align: center;
border-radius: 50%;
display: block;
height: 40px;
width: 40px;
line-height: 40px;
}
state-badge.menu-button {
top: calc(50% - 20px);
left: calc(50% - 20px);
}
ha-icon.menu-button {
top: calc(50% - 30px);
left: calc(50% - 30px);
padding: 10px;
}
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "radial-menu",
"version": "1.3.0",
"version": "1.3.1",
"description": "Lovelace radial-menu",
"keywords": [
"home-assistant",
Expand Down
56 changes: 33 additions & 23 deletions src/radial-menu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,14 +45,17 @@ class RadialMenu extends LitElement {
${this._config.items.map((item, index) => {
return item.entity_picture
? html`
<hui-image
<state-badge
@click="${this._handleTap}"
.config="${item}"
.hass="${this.hass}"
.image="${item.entity_picture}"
.title="${item.name}"
.stateObj="${{
attributes: {
entity_picture: item.entity_picture
},
entity_id: item.entity
}}"
style="
left:calc(${(
left:${(
50 -
35 *
Math.cos(
Expand All @@ -62,8 +65,8 @@ class RadialMenu extends LitElement {
index *
Math.PI
)
).toFixed(4) + "%"} - 10px);
top:calc(${(
).toFixed(4) + "%"};
top:${(
50 +
35 *
Math.sin(
Expand All @@ -73,8 +76,8 @@ class RadialMenu extends LitElement {
index *
Math.PI
)
).toFixed(4) + "%"} - 10px);"
></hui-image>
).toFixed(4) + "%"};"
></state-badge>
`
: html`
<ha-icon
Expand Down Expand Up @@ -111,13 +114,16 @@ class RadialMenu extends LitElement {
</div>
${this._config.entity_picture
? html`
<hui-image
<state-badge
class="menu-button"
.hass="${this.hass}"
.image="${this._config.entity_picture}"
.title="${this._config.name}"
@click="${this._toggleMenu}"
></hui-image>
.stateObj="${{
attributes: {
entity_picture: this._config.entity_picture
},
entity_id: "sensor.fake"
}}"
></state-badge>
`
: html`
<ha-icon
Expand Down Expand Up @@ -185,7 +191,7 @@ class RadialMenu extends LitElement {
}
.circle ha-icon,
.circle hui-image {
.circle state-badge {
text-decoration: none;
display: block;
height: 40px;
Expand All @@ -198,20 +204,16 @@ class RadialMenu extends LitElement {
border-radius: 50%;
}
.circle hui-image {
padding: 10px;
}
.circle ha-icon:hover {
color: var(--accent-color);
}
.circle hui-image:hover {
.circle state-badge:hover {
background-color: var(--secondary-background-color);
}
ha-icon,
hui-image {
state-badge {
cursor: pointer;
color: var(--primary-color);
}
Expand All @@ -222,15 +224,23 @@ class RadialMenu extends LitElement {
.menu-button {
position: absolute;
top: calc(50% - 30px);
left: calc(50% - 30px);
text-decoration: none;
text-align: center;
border-radius: 50%;
display: block;
height: 40px;
width: 40px;
line-height: 40px;
}
state-badge.menu-button {
top: calc(50% - 20px);
left: calc(50% - 20px);
}
ha-icon.menu-button {
top: calc(50% - 30px);
left: calc(50% - 30px);
padding: 10px;
}
Expand Down

0 comments on commit fee43b0

Please sign in to comment.