time for example

Jigsaw-Code · Feb 4, 2025 · 264c560 · 264c560
1 parent b9b2fa2
commit 264c560
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 82 deletions.
diff --git a/server_manager/www/views/server_view/access_key_data_table/data_table/index.ts b/server_manager/www/views/server_view/access_key_data_table/data_table/index.ts
@@ -14,11 +14,12 @@
  * limitations under the License.
  */
 
-import {css, html, LitElement, TemplateResult} from 'lit';
+import {css, html, LitElement, TemplateResult, nothing} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
 import {unsafeHTML} from 'lit/directives/unsafe-html.js';
 
 import '@material/mwc-icon';
+import '../../info_tooltip';
 
 const DEFAULT_COMPARATOR = (value1: string, value2: string): -1 | 0 | 1 => {
   if (value1 === value2) return 0;
@@ -35,6 +36,8 @@ export class DataTable extends LitElement {
     {
       comparator?: (_value1: string, _value2: string) => -1 | 0 | 1;
       render?: (_value: string) => TemplateResult<1>;
+      tooltip?: string;
+      hidden?: boolean;
     }
   >;
   @property({type: Array}) data: {[columnName: string]: string}[];
@@ -55,7 +58,6 @@ export class DataTable extends LitElement {
     section {
       display: grid;
       grid-template-columns: repeat(var(--data-table-columns), auto);
-      background-color: var(--data-table-background-color);
     }
 
     .header,
@@ -68,23 +70,77 @@ export class DataTable extends LitElement {
     }
 
     .header {
+      align-items: center;
+      gap: 0.5rem;
+      display: flex;
       font-weight: bold;
       background-color: var(--data-table-background-color);
       position: sticky;
       top: 0;
       z-index: 1;
+      margin-bottom: 1rem;
+    }
+
+    .header-sort {
+      font-size: 1.2rem;
+    }
+
+    .header info-tooltip {
+      --info-tooltip-icon-size: 1.2rem;
     }
 
     .row {
       border-bottom: var(--data-table-cell-border-bottom);
+      background-color: var(--data-table-background-color);
+      margin-bottom: 2px;
     }
   `;
 
+  render() {
+    return html`
+      <style>
+        :host {
+          --data-table-columns: ${this.columnNames.length};
+        }
+      </style>
+      <section>
+        ${this.columnNames.map(columnName => this.renderHeaderCell(columnName))}
+        ${this.sortedData.flatMap(row =>
+          this.columnNames.map(columnName =>
+            this.renderDataCell(columnName, row[columnName])
+          )
+        )}
+      </section>
+    `;
+  }
+
+  renderHeaderCell(columnName: string) {
+    const column = this.columns.get(columnName);
+
+    return html`<div class="header">
+      ${column?.hidden ? nothing : unsafeHTML(columnName)}
+      ${column?.tooltip
+        ? html`<info-tooltip text=${column?.tooltip}></info-tooltip>`
+        : nothing}
+      ${this.sortColumn === columnName
+        ? html`<mwc-icon class="header-sort">
+            ${this.sortDescending ? 'arrow_upward' : 'arrow_downward'}
+          </mwc-icon>`
+        : nothing}
+    </div>`;
+  }
+
+  renderDataCell(columnName: string, rowValue: string) {
+    return html`<div class="row">
+      ${(this.columns.get(columnName)?.render ?? DEFAULT_RENDERER)(rowValue)}
+    </div>`;
+  }
+
   private get columnNames() {
     return [...this.columns.keys()];
   }
 
-  private get transformedData() {
+  private get sortedData() {
     if (!this.sortColumn) {
       return this.data;
     }
@@ -102,45 +158,4 @@ export class DataTable extends LitElement {
       return comparator(value1, value2);
     });
   }
-
-  render() {
-    return html`
-      <div class="container">
-        <style>
-          :host {
-            --data-table-columns: ${this.columnNames.length};
-          }
-        </style>
-        <section>
-          ${this.columnNames.map(columnName =>
-            this.renderHeaderCell(columnName)
-          )}
-          ${this.transformedData.flatMap(row =>
-            this.columnNames.map(columnName =>
-              this.renderDataCell(columnName, row[columnName])
-            )
-          )}
-        </section>
-      </div>
-    `;
-  }
-
-  renderHeaderCell(columnName: string) {
-    if (this.sortColumn !== columnName) {
-      return html`<div class="header">${unsafeHTML(columnName)}</div>`;
-    }
-
-    return html`<div class="header">
-      ${columnName}
-      <mwc-icon
-        >${this.sortDescending ? 'arrow_upward' : 'arrow_downward'}</mwc-icon
-      >
-    </div>`;
-  }
-
-  renderDataCell(columnName: string, rowValue: string) {
-    return html`<div class="row">
-      ${(this.columns.get(columnName)?.render ?? DEFAULT_RENDERER)(rowValue)}
-    </div>`;
-  }
 }
diff --git a/server_manager/www/views/server_view/access_key_data_table/data_table/stories.ts b/server_manager/www/views/server_view/access_key_data_table/data_table/stories.ts
@@ -53,6 +53,7 @@ export const RenderExample = () => {
                 >`
             )}`;
           },
+          tooltip: 'Tooltip for the employee tags',
         },
       ],
     ])}

diff --git a/server_manager/www/views/server_view/info_tooltip/index.ts b/server_manager/www/views/server_view/info_tooltip/index.ts
@@ -0,0 +1,33 @@
+import {LitElement, css, html} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+import '@material/mwc-icon';
+
+@customElement('info-tooltip')
+export class InformationTooltip extends LitElement {
+  @property({type: String}) text: string;
+
+  static styles = css`
+    :host {
+      --info-tooltip-icon-size: 1.85rem;
+
+      --mdc-icon-size: var(--info-tooltip-icon-size);
+    }
+
+    .tooltip-container {
+      display: flex;
+      cursor: help;
+    }
+  `;
+
+  render() {
+    return html`<div class="tooltip-container">
+      <!-- 
+        TODO: Absolute positioning doesn't work in all contexts, including parents with overflow: hidden and CSS Grid.
+        In order to style the tooltip text, we need to use the Popover API, which is not supported in the current version
+        of Electron we ship. Once we upgrade Electron V25, we can then update this tooltip to use the Popover API.
+      -->
+      <mwc-icon title=${this.text}>info</mwc-icon>
+    </div>`;
+  }
+}
diff --git a/server_manager/www/views/server_view/info_tooltip/stories.ts b/server_manager/www/views/server_view/info_tooltip/stories.ts
@@ -0,0 +1,11 @@
+import {html} from 'lit';
+import '../info_tooltip';
+
+export default {
+  title: 'Manager/Server View/Info Tooltip',
+  component: 'info-tooltip',
+};
+
+export const Basic = () => html`
+  <info-tooltip text="Tooltip text here"></info-tooltip>
+`;
diff --git a/server_manager/www/views/server_view/server_metrics_row/index.ts b/server_manager/www/views/server_view/server_metrics_row/index.ts
@@ -18,6 +18,7 @@ import {LitElement, html, css, nothing} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
 import {unsafeHTML} from 'lit/directives/unsafe-html.js';
 
+import '../info_tooltip';
 import '@material/mwc-icon';
 
 import './server_metrics_row_subcard';
@@ -51,12 +52,6 @@ export class ServerMetricsRow extends LitElement {
       --server-metrics-row-value-label-font-size: 1.1rem;
       --server-metrics-row-value-label-margin-left: 0.25rem;
 
-      --server-metrics-row-tooltip-background: hsl(0, 0%, 94%);
-      --server-metrics-row-tooltip-border-radius: 0.3rem;
-      --server-metrics-row-tooltip-padding: 0.3rem;
-      --server-metrics-row-tooltip-text-color: hsl(0, 0%, 20%);
-      --server-metrics-row-tooltip-max-width: 320px;
-
       --server-metrics-row-footer-top-border: 1px solid hsla(0, 0%, 100%, 0.35);
 
       --server-metrics-row-subtitle-font-size: 1rem;
@@ -114,34 +109,6 @@ export class ServerMetricsRow extends LitElement {
       margin-left: var(--server-metrics-row-value-label-margin-left);
     }
 
-    .tooltip-container {
-      cursor: help;
-      position: relative;
-      display: inline-flex;
-    }
-
-    .tooltip {
-      background-color: var(--server-metrics-row-tooltip-background);
-      border-radius: var(--server-metrics-row-tooltip-border-radius);
-      color: var(--server-metrics-row-tooltip-text-color);
-      font-family: var(--server-metrics-row-font-family);
-      left: 50%;
-      max-width: var(--server-metrics-row-tooltip-max-width);
-      padding: var(--server-metrics-row-tooltip-padding);
-      position: absolute;
-      top: 150%;
-      transform: translateX(-50%);
-      visibility: hidden;
-      white-space: pre-line;
-      width: max-content;
-      word-wrap: break-word;
-    }
-
-    .tooltip-container:hover .tooltip {
-      visibility: visible;
-      opacity: 1;
-    }
-
     aside {
       border-top: var(--server-metrics-row-footer-top-border);
       padding: var(--server-metrics-row-padding);
@@ -176,10 +143,7 @@ export class ServerMetricsRow extends LitElement {
               : nothing}
             <h2 class="title">${unsafeHTML(this.title)}</h2>
             ${this.tooltip
-              ? html`<div class="tooltip-container">
-                  <mwc-icon>info</mwc-icon>
-                  <span class="tooltip">${this.tooltip}</span>
-                </div>`
+              ? html`<info-tooltip text=${this.tooltip}></info-tooltip>`
               : nothing}
           </div>
           <div class="value-container">
-Original file line number
+Diff line change
@@ Expand Up / @@ -53,6 +53,7 @@ export const RenderExample = () => { @@
                     >`
                 )}`;
               },
+              tooltip: 'Tooltip for the employee tags',
             },
           ],
         ])}
@@ Expand Down @@