dees-appui-catalog/ts_web/elements/dees-appui-activitylog.ts

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`<dees-appui-activitylog></dees-appui-activitylog>`;

  // 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}
      <style></style>
      <div class="maincontainer">
        <div class="topbar">
          <div class="heading">Activity Log</div>
        </div>
        <div class="activityContainer">
          <div class="streamingIndicator">streaming...</div>
          <div class="activityentry">
            <span class="timestamp">22:01:</span> Max Mustermann logged in
          </div>
          <div class="activityentry">
            <span class="timestamp">22:02:</span> Max Mustermann viewed an invoice
          </div>
          <div class="activityentry">
            <span class="timestamp">22:03:</span> Max Mustermann added a new contact
          </div>
          <div class="activityentry">
            <span class="timestamp">22:04:</span> Max Mustermann updated account settings
          </div>
          <div class="activityentry">
            <span class="timestamp">22:05:</span> Max Mustermann logged out
          </div>
          <div class="activityentry">
            <span class="timestamp">22:06:</span> Max Mustermann logged in
          </div>
          <div class="activityentry">
            <span class="timestamp">22:07:</span> Max Mustermann created a new invoice
          </div>
          <div class="activityentry">
            <span class="timestamp">22:08:</span> Max Mustermann sent an invoice
          </div>
          <div class="activityentry">
            <span class="timestamp">22:09:</span> Max Mustermann viewed reports
          </div>
          <div class="activityentry">
            <span class="timestamp">22:10:</span> Max Mustermann logged out
          </div>
          <div class="activityentry">
            <span class="timestamp">22:11:</span> Max Mustermann logged in
          </div>
          <div class="activityentry">
            <span class="timestamp">22:12:</span> Max Mustermann deleted an invoice
          </div>
          <div class="activityentry">
            <span class="timestamp">22:13:</span> Max Mustermann contacted support
          </div>
          <div class="activityentry">
            <span class="timestamp">22:14:</span> Max Mustermann added a new user
          </div>
          <div class="activityentry">
            <span class="timestamp">22:15:</span> Max Mustermann changed password
          </div>
          <div class="activityentry">
            <span class="timestamp">22:16:</span> Max Mustermann logged out
          </div>
          <div class="activityentry">
            <span class="timestamp">22:17:</span> Max Mustermann logged in
          </div>
          <div class="activityentry">
            <span class="timestamp">22:18:</span> Max Mustermann archived an invoice
          </div>
          <div class="activityentry">
            <span class="timestamp">22:19:</span> Max Mustermann approved a payment
          </div>
          <div class="activityentry">
            <span class="timestamp">22:20:</span> Max Mustermann logged out
          </div>
          <div class="streamingIndicator bottom">loading more...</div>
        </div>
        <div class="searchbox">
          <input type="text" placeholder="Search" />
        </div>
        <div class="topShadow"></div>
        <div class="bottomShadow"></div>
      </div>
    `;
  }
}