fix(core): update

2024-01-18 02:08:19 +01:00
parent 7e1c5f3dbb
commit 9cdae8ccdb
14 changed files with 335 additions and 123 deletions
--- a/ts_web/elements/dees-contextmenu.ts
+++ b/ts_web/elements/dees-contextmenu.ts
@@ -1,5 +1,6 @@
-import { demoFunc } from './dees-contextmenu.demo.js';
+import * as colors from './00colors.js';
 import * as plugins from './00plugins.js';
+import { demoFunc } from './dees-contextmenu.demo.js';
 import {
  customElement,
  html,
@@ -110,16 +111,18 @@ export class DeesContextmenu extends DeesElement {
        color: ${cssManager.bdTheme('#222', '#ccc')};
        font-size: 14px;
        width: 200px;
-        border: 1px solid ${cssManager.bdTheme('#fff', '#444')};
+        border: 1px solid ${cssManager.bdTheme('#fff', '#ffffff10')};
        min-height: 34px;
        border-radius: 3px;
        background: ${cssManager.bdTheme('#fff', '#222')};
        box-shadow: 0px 1px 4px ${cssManager.bdTheme('#00000020', '#000000')};
        user-select: none;
+        padding: 4px;
      }

      .mainbox .menuitem {
-        padding: 8px;
+        padding: 4px 8px;
+        border-radius: 3px;
      }

      .mainbox .menuitem dees-icon {
@@ -130,7 +133,7 @@ export class DeesContextmenu extends DeesElement {
      }

      .mainbox .menuitem:hover {
-        background: ${cssManager.bdTheme('#00000010', '#ffffff10')};
+        background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
      }

      .mainbox .menuitem:active {
--- a/ts_web/elements/dees-dataview-statusobject.ts
+++ b/ts_web/elements/dees-dataview-statusobject.ts
@@ -1,3 +1,6 @@
+import * as colors from './00colors.js';
+import * as plugins from './00plugins.js';
+
 import { demoFunc } from './dees-dataview-statusobject.demo.js';
 import {
  DeesElement,
@@ -34,6 +37,7 @@ export class DeesDataviewStatusobject extends DeesElement {
        box-shadow: 0px 1px 3px #00000030;
        min-height: 48px;
        color: ${cssManager.bdTheme('#000', '#fff')};
+        cursor: default;
      }

      .heading {
@@ -69,7 +73,20 @@ export class DeesDataviewStatusobject extends DeesElement {
        padding: 4px;
        border-radius: 3px;
        margin-right: 16px;
-        color: #ffffff80
+        color: #ffffff80;
+        user-select: none;
+      }
+
+      .copyMain:hover {
+        background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
+        border: 1px solid ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
+        color: #fff;
+      }
+
+      .copyMain:active {
+        background: ${cssManager.bdTheme(colors.bright.blueActive, colors.dark.blueActive)};
+        border: 1px solid ${cssManager.bdTheme(colors.bright.blueActive, colors.dark.blueActive)};
+        color: #fff;
      }

      .statusdot.ok {
@@ -85,11 +102,16 @@ export class DeesDataviewStatusobject extends DeesElement {
      }

      .detail {
-        minheight: 60px;
+        min-height: 60px;
        align-items: center;
        display: grid;
        grid-template-columns: 40px auto;
        border-top: 1px dotted ${cssManager.bdTheme('#999', '#282828')};
+        transition: all 0.2s;
+      }
+
+      .detail:hover {
+        background: #ffffff05;
      }

      .detail .detailsText {
--- a/ts_web/elements/dees-form.demo.ts
+++ b/ts_web/elements/dees-form.demo.ts
@@ -35,7 +35,9 @@ export const demoFunc = () => html`
          { option: 'option 2', key: 'option2' },
          { option: 'option 3', key: 'option3' },
        ]}></dees-input-multiselect>
-      <dees-input-typelist></dees-input-typelist>
+      <dees-input-typelist
+        .label=${'a type list'}
+      ></dees-input-typelist>
      <dees-input-text .required="${true}" key="hello1" label="a text"></dees-input-text>
      <dees-input-text .required="${true}" key="hello2" label="also a text"></dees-input-text>
      <dees-input-text
@@ -50,6 +52,14 @@ export const demoFunc = () => html`
        label="another text"
      ></dees-input-checkbox>
      <dees-input-iban></dees-input-iban>
+      <dees-input-multitoggle
+        .label=${'multi select'}
+        .options=${['option 1', 'option 2', 'option 3']}
+        .selectedOption=${'option 1'}
+      ></dees-input-multitoggle>
+      <dees-input-fileupload
+        .label=${'attachments'}
+      ></dees-input-fileupload>
      <dees-form-submit>Submit</dees-form-submit>
    </dees-form>
  </div>
--- a/ts_web/elements/dees-icon.ts
+++ b/ts_web/elements/dees-icon.ts
@@ -56,6 +56,7 @@ import {
  faMoneyCheckDollar as faMoneyCheckDollarSolid,
  faMugHot as faMugHotSolid,
  faMinus as faMinusSolid,
+  faPaperclip as faPaperclipSolid,
  faPaste as faPasteSolid,
  faPenToSquare as faPenToSquareSolid,
  faPlus as faPlusSolid,
@@ -101,6 +102,7 @@ export const faIcons = {
  moneyCheckDollar: faMoneyCheckDollarSolid,
  mugHot: faMugHotSolid,
  minus: faMinusSolid,
+  paperclip: faPaperclipSolid,
  paste: faPasteRegular,
  pasteSolid: faPasteSolid,
  penToSquare: faPenToSquareSolid,
--- a/ts_web/elements/dees-input-fileupload.ts
+++ b/ts_web/elements/dees-input-fileupload.ts
@@ -1,3 +1,8 @@
+import * as colors from './00colors.js';
+import * as plugins from './00plugins.js';
+
+import { DeesContextmenu } from './dees-contextmenu.js';
+
 import {
  customElement,
  DeesElement,
@@ -19,7 +24,8 @@ declare global {

@customElement('dees-input-fileupload')
 export class DeesInputFileupload extends DeesElement {
-  public static demo = () => html`<dees-input-fileupload .label=${'Attachments'}></dees-input-fileupload>`;
+  public static demo = () =>
+    html`<dees-input-fileupload .label=${'Attachments'}></dees-input-fileupload>`;

  // INSTANCE
  public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();
@@ -70,6 +76,7 @@ export class DeesInputFileupload extends DeesElement {
        display: grid;
        margin: 10px 0px;
        margin-bottom: 24px;
+        color: ${cssManager.bdTheme('#333', '#ccc')};
      }

      .hidden {
@@ -77,30 +84,15 @@ export class DeesInputFileupload extends DeesElement {
      }

      .maincontainer {
-        color: ${cssManager.bdTheme('#333', '#ccc')};
-        
-      }
-
-      .label {
-        font-size: 14px;
-        margin-bottom: 5px;
-      }
-
-      .uploadButton {
        position: relative;
-        padding: 8px;
-        max-width: 600px;
-        background: ${cssManager.bdTheme('#fafafa', '#333333')};
        border-radius: 3px;
-        text-align: center;
+        padding: 8px;
+        background: ${cssManager.bdTheme('#fafafa', '#222222')};
+        color: ${cssManager.bdTheme('#333', '#ccc')};
+        border-top: 1px solid #ffffff10;
      }

-      .uploadButton:hover {
-        color: #fff;
-        background: rgb(3, 155, 229);
-      }
-
-      .uploadButton::after {
+      .maincontainer::after {
        top: 2px;
        right: 2px;
        left: 2px;
@@ -111,28 +103,71 @@ export class DeesInputFileupload extends DeesElement {
        display: block;
        border: 2px dashed rgba(255, 255, 255, 0);
        transition: all 0.2s;
+        pointer-events: none;
+        background: #00000000;
      }
-      .uploadButton.dragOver::after {
+      .maincontainer.dragOver::after {
        transform: scale3d(1, 1, 1);
        border: 2px dashed rgba(255, 255, 255, 0.3);
+        background: #00000080;
+      }
+
+      .label {
+        font-size: 14px;
+        margin-bottom: 8px;
+      }
+
+      .uploadButton {
+        position: relative;
+        padding: 8px;
+        max-width: 600px;
+        background: ${cssManager.bdTheme('#fafafa', '#333333')};
+        border-radius: 3px;
+        text-align: center;
+        font-size: 14px;
+        cursor: default;
+      }
+
+      .uploadButton:hover {
+        color: #fff;
+        background: ${unsafeCSS(colors.dark.blue)};
      }

      .uploadCandidate {
+        display: grid;
+        grid-template-columns: 48px auto;
+        background: #333;
+        padding: 8px 8px 8px 0px;
+        margin-bottom: 8px;
        text-align: left;
-        border-bottom: 1px dashed #444;
+        border-radius: 3px;
        color: ${cssManager.bdTheme('#666', '#ccc')};
-        padding: 8px;
        font-family: 'Roboto', 'Inter', sans-serif;
-      }
-
-      .uploadButton:hover .uploadCandidate {
-        color: ${cssManager.bdTheme('#fff', '#fff')};
-        border-bottom: 1px dashed #fff;
+        cursor: default;
+        transition: all 0.2s;
+        border-top: 1px solid #ffffff10;
      }

      .uploadCandidate:last-child {
        margin-bottom: 8px;
      }
+
+      .uploadCandidate .icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 16px;
+      }
+
+      .uploadCandidate:hover {
+        background: #393939;
+      }
+
+      .uploadCandidate .description {
+        font-size: 14px;
+        border-left: 1px solid #ffffff10;
+        padding-left: 8px;
+      }
    `,
  ];

@@ -141,10 +176,32 @@ export class DeesInputFileupload extends DeesElement {
      <div class="hidden">
        <input type="file"></div>
      </div>
-      <div class="maincontainer">
-        ${this.label ? html`<div class="label">${this.label}</div>` : null}
-        ${this.value.map((fileArg) => html` <div class="uploadCandidate">${fileArg.name} | ${fileArg.size}</div> `)}
-        <div class="uploadButton ${this.state === 'dragOver' ? 'dragOver' : ''}" @click=${this.openFileSelector}>
+      ${this.label ? html`<div class="label">${this.label}</div>` : null}
+      <div class="maincontainer ${this.state === 'dragOver' ? 'dragOver' : ''}">
+        ${this.value.map(
+          (fileArg) => html`
+          <div class="uploadCandidate" @contextmenu=${eventArg => {
+            DeesContextmenu.openContextMenuWithOptions(eventArg, [{
+              iconName: 'trash',
+              name: 'Remove',
+              action: async () => {
+                this.value.splice(this.value.indexOf(fileArg), 1);
+                this.requestUpdate();
+              }
+            }]);
+          }}>
+            <div class="icon">
+              <dees-icon .iconFA=${'paperclip'}></dees-icon>
+            </div>
+            <div class="description">
+              <span style="font-weight: 600">${fileArg.name}</span><br />
+              <span style="font-weight: 400">${fileArg.size}</span>
+            </div>
+          </div> `
+        )}
+        <div class="uploadButton" @click=${
+          this.openFileSelector
+        }>
          ${this.buttonText}
        </div>
      </div>
@@ -157,7 +214,6 @@ export class DeesInputFileupload extends DeesElement {
    this.state = 'idle';
    this.buttonText = 'Upload more files...';
  }
-  

  public async updateValue(eventArg: Event) {
    const target: any = eventArg.target;
@@ -178,9 +234,8 @@ export class DeesInputFileupload extends DeesElement {
      target.value = '';
    });

-
    // lets handle drag and drop
-    const dropArea = this.shadowRoot.querySelector('.uploadButton');
+    const dropArea = this.shadowRoot.querySelector('.maincontainer');
    const handlerFunction = (eventArg: DragEvent) => {
      eventArg.preventDefault();
      switch (eventArg.type) {
--- a/ts_web/elements/dees-input-multitoggle.ts
+++ b/ts_web/elements/dees-input-multitoggle.ts
@@ -16,6 +16,11 @@ const { demoFunc } = await import('./dees-input-multitoggle.demo.js');
 export class DeesInputMultitoggle extends DeesElement {
  public static demo = demoFunc;

+  @property({
+    type: String,
+  })
+  public label: string;
+
  @property()
  type: 'boolean' | 'multi' | 'single' = 'multi';

@@ -40,9 +45,17 @@ export class DeesInputMultitoggle extends DeesElement {
    cssManager.defaultStyles,
    css`
      :host {
-        color: ${cssManager.bdTheme('#333', '#fff')};
+        display: block;
+        color: ${cssManager.bdTheme('#333', '#ccc')};
        user-select: none;
+        margin: 8px 0px 24px 0px;
      }
+
+      .label {
+        font-size: 14px;
+        margin-bottom: 8px;
+      }
+
      .selections {
        position: relative;
        display: flex;
@@ -51,30 +64,37 @@ export class DeesInputMultitoggle extends DeesElement {
        background: #333;
        width: min-content;
        border-radius: 20px;
-        height: 40px;
+        height: 32px;
+        border-top: 1px solid #ffffff10;
      }

      .option {
-        color: #CCC;
+        color: #ccc;
        position: relative;
        padding: 0px 16px;
-        line-height: 40px;
+        line-height: 32px;
        cursor: default;
        width: min-content; /* Make the width as per the content */
        white-space: nowrap; /* Prevent text wrapping */
        transition: all 0.1s;
+        font-size: 14px;
+        transform: translateY(-1px);
      }

      .option:hover {
        color: #fff;
      }

+      .option.selected {
+        color: #fff;
+      }
+
      .indicator {
        opacity: 0;
        position: absolute;
-        height: 32px;
+        height: 24px;
        left: 4px;
-        top: 4px;
+        top: 3px;
        border-radius: 16px;
        background: #0050b9;
        min-width: 36px;
@@ -84,11 +104,16 @@ export class DeesInputMultitoggle extends DeesElement {

  public render(): TemplateResult {
    return html`
-      <div class="label">MultiSelect</div>
+      ${this.label ? html`<div class="label">${this.label}</div>` : html``}
      <div class="mainbox">
        <div class="selections">
          <div class="indicator"></div>
-          ${this.options.map((option) => html` <div class="option" @click=${() => this.handleSelection(option)}>${option}</div> `)}
+          ${this.options.map(
+            (option) =>
+              html`<div class="option ${option === this.selectedOption ? 'selected': ''}" @click=${() => this.handleSelection(option)}>
+                ${option}
+              </div> `
+          )}
        </div>
      </div>
    `;
@@ -108,7 +133,9 @@ export class DeesInputMultitoggle extends DeesElement {

  public async setIndicator() {
    const indicator: HTMLDivElement = this.shadowRoot.querySelector('.indicator');
-    const option: HTMLDivElement = this.shadowRoot.querySelector(`.option:nth-child(${this.options.indexOf(this.selectedOption) + 2})`);
+    const option: HTMLDivElement = this.shadowRoot.querySelector(
+      `.option:nth-child(${this.options.indexOf(this.selectedOption) + 2})`
+    );
    if (indicator && option) {
      indicator.style.width = `${option.clientWidth - 8}px`;
      indicator.style.left = `${option.offsetLeft + 4}px`;
--- a/ts_web/elements/dees-input-text.ts
+++ b/ts_web/elements/dees-input-text.ts
@@ -100,14 +100,14 @@ export class DeesInputText extends DeesElement {

      .label {
        font-size: 14px;
-        margin-bottom: 4px;
+        margin-bottom: 8px;
      }

      input {
-        margin-top: 5px;
+        margin-top: 0px;
        background: ${cssManager.bdTheme('#fafafa', '#222')};
-        border-top: ${cssManager.bdTheme('1px solid #CCC', '1px solid #444')};
-        border-bottom: ${cssManager.bdTheme('1px solid #CCC', '1px solid #333')};
+        border-top: ${cssManager.bdTheme('1px solid #CCC', '1px solid #ffffff10')};
+        border-bottom: ${cssManager.bdTheme('1px solid #CCC', '1px solid #222')};
        border-right: ${cssManager.bdTheme('1px solid #CCC', 'none')};
        border-left: ${cssManager.bdTheme('1px solid #CCC', 'none')};
        padding-left: 10px;
--- a/ts_web/elements/dees-input-typelist.ts
+++ b/ts_web/elements/dees-input-typelist.ts
@@ -16,6 +16,14 @@ const { demoFunc } = await import('./dees-input-typelist.demo.js');
 export class DeesInputTypelist extends DeesElement {
  public static demo = demoFunc;

+
+  // INSTANCE
+
+  @property({
+    type: String,
+  })
+  public label: string;
+
  constructor() {
    super();
  }
@@ -24,11 +32,13 @@ export class DeesInputTypelist extends DeesElement {
    cssManager.defaultStyles,
    css`
      :host {
-        color: ${cssManager.bdTheme('#333', '#fff')}
+        display: block;
+        color: ${cssManager.bdTheme('#333', '#fff')};
+        margin: 8px 0px 24px 0px;
      }
      .label {
        font-size: 14px;
-        margin-bottom: 4px;
+        margin-bottom: 8px;
      }
      .mainbox {
        border-radius: 3px;
@@ -74,7 +84,7 @@ export class DeesInputTypelist extends DeesElement {

  public render(): TemplateResult {
    return html`
-      <div class="label">Type List</div>
+      <div class="label">${this.label}</div>
      <div class="mainbox">
        <div class="tags" @click=${() => {
          this.shadowRoot.querySelector('input').focus();
--- a/ts_web/elements/dees-modal.ts
+++ b/ts_web/elements/dees-modal.ts
@@ -1,4 +1,6 @@
+import * as colors from './00colors.js';
 import * as plugins from './00plugins.js';
+
 import { demoFunc } from './dees-modal.demo.js';
 import {
  customElement,
@@ -123,19 +125,35 @@ export class DeesModal extends DeesElement {
        padding: 16px;
      }
      .modal .bottomButtons {
-        display: grid;
+        display: flex;
+        flex-direction: row;
        border-top: 1px solid #222;
+        justify-content: flex-end;
      }

      .modal .bottomButtons .bottomButton {
-        height: 40px;
-        line-height: 40px;
+        margin: 8px 0px;
+        padding: 8px 12px;
+        border-radius: 4px;
+        line-height: 16px;
        text-align: center;
        font-size: 14px;
-        border-right: 1px solid #222;
+        cursor: default;
+        user-select: none;
      }
+
+      .modal .bottomButtons .bottomButton:first-child {
+        margin-left: 8px;
+      }
+      .modal .bottomButtons .bottomButton:last-child {
+        margin-right: 8px;
+      }
+
      .modal .bottomButtons .bottomButton:hover {
-        background: #222;
+        background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
+      }
+      .modal .bottomButtons .bottomButton:active {
+        background: ${cssManager.bdTheme(colors.bright.blueActive, colors.dark.blueActive)};
      }
      .modal .bottomButtons .bottomButton:last-child {
        border-right: none;
--- a/ts_web/elements/dees-stepper.ts
+++ b/ts_web/elements/dees-stepper.ts
@@ -1,3 +1,6 @@
+import * as plugins from './00plugins.js';
+import * as colors from './00colors.js';
+
 import {
  DeesElement,
  customElement,
@@ -150,7 +153,22 @@ export class DeesStepper extends DeesElement {
      }

      .step .goBack:hover {
-        background: ${cssManager.bdTheme('#00000012', '#ffffff12')};
+        color: ${cssManager.bdTheme('#333', '#fff')};
+        background: ${cssManager.bdTheme('#00000012', colors.dark.blue)};
+      }
+
+      .step .goBack:active {
+        color: ${cssManager.bdTheme('#333', '#fff')};
+        background: ${cssManager.bdTheme('#00000012', colors.dark.blueActive)};
+      }
+
+      .step .goBack span {
+        transition: all 0.2s;
+        display: inline-block;
+      }
+
+      .step .goBack:hover span {
+        transform: translateX(-2px);
      }

      .step .title {
@@ -180,7 +198,7 @@ export class DeesStepper extends DeesElement {
                : ''}"
            >
              ${this.getIndexOfStep(stepArg) > 0
-                ? html`<div class="goBack" @click=${this.goBack}><- go to previous step</div>`
+                ? html`<div class="goBack" @click=${this.goBack}><span style="font-family: Inter"><-</span> go to previous step</div>`
                : ``}
              <div class="stepCounter">
                Step ${this.steps.findIndex((elementArg) => elementArg === stepArg) + 1} of
--- a/ts_web/elements/dees-table.ts
+++ b/ts_web/elements/dees-table.ts
@@ -1,3 +1,4 @@
+import * as colors from './00colors.js';
 import * as plugins from './00plugins.js';
 import { demoFunc } from './dees-table.demo.js';
 import {
@@ -173,6 +174,7 @@ export class DeesTable<T> extends DeesElement {
        border-top: 1px solid ${cssManager.bdTheme('#fff', '#444')};
        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
        overflow-x: auto;
+        cursor: default;
      }

      .header {
@@ -311,6 +313,7 @@ export class DeesTable<T> extends DeesElement {
        line-height: 36px;
        height: 36px;
        display: inline-block;
+        border-radius: 8px;
      }

      .action:first-child {
@@ -319,7 +322,15 @@ export class DeesTable<T> extends DeesElement {
      }

      .action:hover {
-        background: ${cssManager.bdTheme('#CCC', '#00000030')};
+        background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
+      }
+
+      .action:active {
+        background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blueActive)};
+      }
+
+      .action:hover dees-icon {
+        filter: ${cssManager.bdTheme('invert(1) brightness(3)', '')};
      }

      .footer {
@@ -344,16 +355,22 @@ export class DeesTable<T> extends DeesElement {
      .footerActions .footerAction {
        padding: 8px 16px;
        display: flex;
+        user-select: none;
      }

      .footerActions .footerAction:hover {
-        background: ${cssManager.bdTheme('#CCC', '#111')};
+        background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
+        color: #fff;
      }

-      .footerActions dees-icon {
+      .footerActions .footerAction dees-icon {
        display: flex;
        margin-right: 8px;
      }
+
+      .footerActions .footerAction:hover dees-icon {
+        
+      }
    `,
  ];