Fix button layout for addon-info (#8315)

This commit is contained in:
Joakim Sørensen 2021-02-03 16:08:29 +01:00 committed by GitHub
parent 17aff2f9b8
commit 5199e946a1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -536,85 +536,88 @@ class HassioAddonInfo extends LitElement {
${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
</div>
<div class="card-actions">
${this.addon.version
? html`
${this._computeIsRunning
? html`
<ha-call-api-button
class="warning"
.hass=${this.hass}
.path="hassio/addons/${this.addon.slug}/stop"
>
Stop
</ha-call-api-button>
<ha-call-api-button
class="warning"
.hass=${this.hass}
.path="hassio/addons/${this.addon.slug}/restart"
>
Restart
</ha-call-api-button>
`
: html`
<ha-progress-button @click=${this._startClicked}>
Start
</ha-progress-button>
`}
${this._computeShowWebUI
? html`
<a
href=${this._pathWebui!}
tabindex="-1"
target="_blank"
class="right"
rel="noopener"
>
<mwc-button>
<div>
${this.addon.version
? this._computeIsRunning
? html`
<ha-call-api-button
class="warning"
.hass=${this.hass}
.path="hassio/addons/${this.addon.slug}/stop"
>
Stop
</ha-call-api-button>
<ha-call-api-button
class="warning"
.hass=${this.hass}
.path="hassio/addons/${this.addon.slug}/restart"
>
Restart
</ha-call-api-button>
`
: html`
<ha-progress-button @click=${this._startClicked}>
Start
</ha-progress-button>
`
: html`
${!this.addon.available
? html`
<p class="warning">
This add-on is not available on your system.
</p>
`
: ""}
<ha-progress-button
.disabled=${!this.addon.available}
@click=${this._installClicked}
>
Install
</ha-progress-button>
`}
</div>
<div>
${this.addon.version
? html` ${this._computeShowWebUI
? html`
<a
href=${this._pathWebui!}
tabindex="-1"
target="_blank"
rel="noopener"
>
<mwc-button>
Open web UI
</mwc-button>
</a>
`
: ""}
${this._computeShowIngressUI
? html`
<mwc-button @click=${this._openIngress}>
Open web UI
</mwc-button>
</a>
`
: ""}
${this._computeShowIngressUI
? html`
<mwc-button class="right" @click=${this._openIngress}>
Open web UI
</mwc-button>
`
: ""}
<ha-progress-button
class=" right warning"
@click=${this._uninstallClicked}
>
Uninstall
</ha-progress-button>
${this.addon.build
? html`
<ha-call-api-button
class="warning right"
.hass=${this.hass}
.path="hassio/addons/${this.addon.slug}/rebuild"
>
Rebuild
</ha-call-api-button>
`
: ""}
`
: html`
${!this.addon.available
? html`
<p class="warning">
This add-on is not available on your system.
</p>
`
: ""}
<ha-progress-button
.disabled=${!this.addon.available}
@click=${this._installClicked}
>
Install
</ha-progress-button>
`}
`
: ""}
<ha-progress-button
class="warning"
@click=${this._uninstallClicked}
>
Uninstall
</ha-progress-button>
${this.addon.build
? html`
<ha-call-api-button
class="warning"
.hass=${this.hass}
.path="hassio/addons/${this.addon.slug}/rebuild"
>
Rebuild
</ha-call-api-button>
`
: ""}`
: ""}
</div>
</div>
</ha-card>
@ -994,9 +997,6 @@ class HassioAddonInfo extends LitElement {
font-weight: 500;
color: var(--primary-color);
}
.right {
float: right;
}
protection-enable mwc-button {
--mdc-theme-primary: white;
}
@ -1019,7 +1019,8 @@ class HassioAddonInfo extends LitElement {
margin-bottom: 16px;
}
.card-actions {
display: flow-root;
justify-content: space-between;
display: flex;
}
.security h3 {
margin-bottom: 8px;