mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 17:56:46 +00:00
Add time created to persistent notifications. (#1733)
* Add time created to persistent notifications. * Add tooltip to show actual date. * Fix style rules. * Fix duplicate ids.
This commit is contained in:
parent
7fb5ac11fd
commit
c30e7ac683
@ -1,9 +1,11 @@
|
||||
import '@polymer/paper-button/paper-button.js';
|
||||
import '@polymer/paper-icon-button/paper-icon-button.js';
|
||||
import '@polymer/paper-tooltip/paper-tooltip.js';
|
||||
|
||||
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
|
||||
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
||||
|
||||
import '../../../../components/ha-relative-time.js';
|
||||
import '../../../../components/ha-markdown.js';
|
||||
import './hui-notification-item-template.js';
|
||||
|
||||
@ -15,11 +17,31 @@ import LocalizeMixin from '../../../../mixins/localize-mixin.js';
|
||||
export class HuiPersistentNotificationItem extends LocalizeMixin(PolymerElement) {
|
||||
static get template() {
|
||||
return html`
|
||||
<style>
|
||||
.time {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 6px;
|
||||
}
|
||||
ha-relative-time {
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
</style>
|
||||
<hui-notification-item-template>
|
||||
<span slot="header">[[_computeTitle(notification)]]</span>
|
||||
|
||||
<ha-markdown content="[[notification.message]]"></ha-markdown>
|
||||
|
||||
<div class="time">
|
||||
<span>
|
||||
<ha-relative-time
|
||||
hass="[[hass]]"
|
||||
datetime="[[notification.created_at]]"
|
||||
></ha-relative-time>
|
||||
<paper-tooltip>[[_computeTooltip(hass, notification)]]</paper-tooltip>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<paper-button
|
||||
slot="actions"
|
||||
class="primary"
|
||||
@ -45,6 +67,15 @@ export class HuiPersistentNotificationItem extends LocalizeMixin(PolymerElement)
|
||||
_computeTitle(notification) {
|
||||
return notification.title || notification.notification_id;
|
||||
}
|
||||
|
||||
_computeTooltip(hass, notification) {
|
||||
if (!hass || !notification) return null;
|
||||
|
||||
const d = new Date(notification.created_at);
|
||||
return d.toLocaleDateString(hass.language, {
|
||||
year: 'numeric', month: 'short', day: 'numeric', minute: 'numeric', hour: 'numeric'
|
||||
});
|
||||
}
|
||||
}
|
||||
customElements.define(
|
||||
'hui-persistent_notification-notification-item',
|
||||
|
Loading…
x
Reference in New Issue
Block a user