webviews/logging/components/log_view_actions.ts

// Copyright 2022 The Fuchsia Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import { css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { BaseElement } from './base_element';

export const DONT_WRAP_LOGS: string = 'Don\'t wrap logs';
export const WRAP_LOGS: string = 'Wrap logs';

const ACTION_ICON_CLASSES: string = 'codicon icons action-icon';

/**
 * Class to create action buttons that control the log list webview.
 */
@customElement('log-view-actions')
export class LogViewActions extends BaseElement {
  static styles = [
    BaseElement.styles,
    css`
      .action-icon {
        background: none;
        border: none;
        color: var(--vscode-icon-foreground);
        height: var(--log-action-height);
        padding: var(--input-padding-vertical) var(--input-padding-horizontal);
        text-align: center;
      }

      .action-icon:hover {
        background: var(--vscode-toolbar-hoverBackground);
        border-radius: 5px;
        cursor: pointer;
      }

      #wrap-logs {
        color: var(--vscode-disabledForeground);
      }

      :host([wrappingLogs]) #wrap-logs {
        color: var(--vscode-icon-foreground);
      }
    `
  ];

  @property({ attribute: true, reflect: true, type: Boolean })
  public wrappingLogs: boolean = false;

  public static readonly wrapLogsChangeEvent: string = 'wrap-logs-change';
  public static readonly clearRequestedEvent: string = 'clear-requested';

  constructor(wrappingLogs: boolean) {
    super();
    this.wrappingLogs = wrappingLogs;
  }

  render() {
    const wrapLogsTitle = this.wrappingLogs ? DONT_WRAP_LOGS : WRAP_LOGS;

    return html`
      <div
        id="clear"
        title="Clear Logs"
        class="${ACTION_ICON_CLASSES} codicon-clear-all"
        @click="${this.onClearButtonClick}"
      ></div>

      <div
        id="wrap-logs"
        title="Wrap Logs"
        class="${ACTION_ICON_CLASSES} codicon-word-wrap"
        @click="${this.onWrapLogsButtonClick}"
        title = "${wrapLogsTitle}"
      ></div>
        `;
  }

  private onClearButtonClick() {
    this.dispatchEvent(new CustomEvent(LogViewActions.clearRequestedEvent, {
      detail: {},
    }));
  }

  private onWrapLogsButtonClick() {
    this.wrappingLogs = !this.wrappingLogs;
    this.dispatchEvent(new CustomEvent(LogViewActions.wrapLogsChangeEvent, {
      detail: {
        wrapLogs: this.wrappingLogs,
      }
    }));
  }
}