import { DeesElement, type TemplateResult, property, customElement, html, css, cssManager, } from '@design.estate/dees-element'; import * as domtools from '@design.estate/dees-domtools'; @customElement('dees-appui-activitylog') export class DeesAppuiActivitylog extends DeesElement { // STATIC public static demo = () => html``; // INSTANCE public static styles = [ cssManager.defaultStyles, css` :host { color: #fff; position: relative; display: block; width: 100%; max-width: 300px; height: 100%; background: #111c28; font-family: 'Intel One Mono', sans-serif; border-left: 1px solid #202020; } .maincontainer { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; } .topbar { position: absolute; top: 0px; height: 32px; width: 100%; padding: 0px 12px 0px 12px; background: #0e151f; } .topbar .heading { text-align: left; line-height: 24px; padding-top: 8px; font-weight: 500; font-size: 14px; font-family: 'Roboto', 'Inter', sans-serif; } .activityContainer { position: absolute; top: 32px; bottom: 40px; width: 100%; padding: 8px 0px; overflow-y: scroll; } .streamingIndicator { font-size: 12px; text-align: center; padding-top: 16px; color: #888 } .streamingIndicator.bottom { padding-top: 0px; padding-bottom: 16px; } .activityentry { min-height: 30px; font-size: 12px; padding: 8px 16px; border-bottom: 1px dotted #ffffff20; } .activityentry:last-of-type { border-bottom: 1px solid #ffffff00; } .activityentry:hover { background: #00000080; } .timestamp { color: #ff8787; } .searchbox { position: absolute; bottom: 0px; width: 100%; height: 40px; background: #0e151f; } .searchbox input { color: #fff; background: none; width: 100%; height: 40px; line-height: 32px; border: none; padding: 4px 12px; font-family: 'Intel One Mono', sans-serif; } .searchbox input:focus { outline: none; } .bottomShadow { position: absolute; width: 100%; height: 32px; bottom: 40px; background: linear-gradient(180deg, #111c2800 0%, #0e151f 100%); pointer-events: none; } .topShadow { position: absolute; width: 100%; height: 32px; top: 32px; background: linear-gradient(0deg, #111c2800 0%, #0e151f 100%); pointer-events: none; } `, ]; public render(): TemplateResult { return html` ${domtools.elementBasic.styles}
Activity Log
streaming...
22:01: Max Mustermann logged in
22:02: Max Mustermann viewed an invoice
22:03: Max Mustermann added a new contact
22:04: Max Mustermann updated account settings
22:05: Max Mustermann logged out
22:06: Max Mustermann logged in
22:07: Max Mustermann created a new invoice
22:08: Max Mustermann sent an invoice
22:09: Max Mustermann viewed reports
22:10: Max Mustermann logged out
22:11: Max Mustermann logged in
22:12: Max Mustermann deleted an invoice
22:13: Max Mustermann contacted support
22:14: Max Mustermann added a new user
22:15: Max Mustermann changed password
22:16: Max Mustermann logged out
22:17: Max Mustermann logged in
22:18: Max Mustermann archived an invoice
22:19: Max Mustermann approved a payment
22:20: Max Mustermann logged out
loading more...
`; } }