fix(core): update

2024-01-24 12:18:37 +01:00
parent 5eb2f4cebc
commit 69bb03dcdf
11 changed files with 844 additions and 1 deletions
--- a/ts_web/elements/dees-appui-mainselector.ts
+++ b/ts_web/elements/dees-appui-mainselector.ts
@ -0,0 +1,160 @@
+import * as plugins from './00plugins.js';
+import * as interfaces from './interfaces/index.js';
+
+import { DeesContextmenu } from './dees-contextmenu.js';
+
+import {
+  DeesElement,
+  type TemplateResult,
+  property,
+  customElement,
+  html,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+
+/**
+ * the property selector menu
+ * mainly used to select assets within in an organization
+ */
+@customElement('dees-appui-mainselector')
+export class DeesAppuiMainselector extends DeesElement {
+  public static demo = () => html`<dees-appui-mainselector></dees-appui-mainselector>`;
+
+  // INSTANCE
+  @property()
+  public selectionOptions: interfaces.ISelectionOption[] = [
+    {
+      key: 'Overview',
+      action: () => {},
+    },
+    {
+      key: 'option 1',
+      action: () => {},
+    },
+    { key: 'option 2', action: () => {} },
+    { key: 'option 3', action: () => {} },
+    { key: 'option 4', action: () => {} },
+  ];
+
+  @property()
+  public selectedOption: interfaces.ISelectionOption = null;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        color: #fff;
+        position: relative;
+        display: block;
+        width: 100%;
+        max-width: 300px;
+        height: 100%;
+        background: #000000;
+        border-right: 1px solid #222222;
+      }
+      .maincontainer {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        height: 100%;
+        width: 100%;
+      }
+
+      .topbar {
+        position: absolute;
+        height: 32px;
+        width: 100%;
+      }
+
+      .topbar .heading {
+        padding-left: 16px;
+        padding-top: 8px;
+        line-height: 24px;
+        font-family: 'Roboto', 'Inter', sans-serif;
+        font-weight: 600;
+        font-size: 14px;
+      }
+
+      .selectionOptions {
+        position: absolute;
+        top: 32px;
+        padding-top: 8px;
+        left: 0px;
+        width: 100%;
+        font-family: 'Roboto', 'Inter', sans-serif;
+        font-size: 14px;
+      }
+
+      .selectionOptions .selectionOption {
+        cursor: default;
+        margin-left: 16px;
+        margin-right: 16px;
+        padding-top: 8px;
+        padding-bottom: 8px;
+        border-top: 1px dotted #303030;
+        border-left: 0px solid rgba(0, 0, 0, 0);
+        transition: all 0.1s;
+      }
+
+      .selectionOptions .selectionOption:hover {
+        border-left: 2px solid #26a69a50;
+        padding-left: 8px;
+      }
+
+      .selectionOptions .selectionOption:first-child {
+        border-top: 1px solid rgba(0, 0, 0, 0);
+      }
+
+      .selectionOptions .selectionOption.selectedOption {
+        border-left: 4px solid #26a69a;
+        padding-left: 10px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <style></style>
+      <div class="maincontainer">
+        <div class="topbar">
+          <div class="heading">Properties</div>
+        </div>
+        <div class="selectionOptions">
+          ${this.selectionOptions.map((selectionOptionArg) => {
+            return html`
+              <div
+                class="selectionOption ${this.selectedOption === selectionOptionArg
+                  ? 'selectedOption'
+                  : null}"
+                @click="${() => {
+                  this.selectOption(selectionOptionArg);
+                }}"
+                @contextmenu="${(eventArg: MouseEvent) => {
+                  DeesContextmenu.openContextMenuWithOptions(eventArg, [
+                    {
+                      name: 'property settings',
+                      action: async () => {},
+                      iconName: 'gear',
+                    },
+                  ]);
+                }}"
+              >
+                ${selectionOptionArg.key}
+              </div>
+            `;
+          })}
+        </div>
+      </div>
+    `;
+  }
+
+  private selectOption(optionArg: interfaces.ISelectionOption) {
+    this.selectedOption = optionArg;
+    this.selectedOption.action();
+  }
+
+  firstUpdated() {
+    this.selectOption(this.selectionOptions[0]);
+  }
+}