- ${this.label ? html`
${this.label}
` : null}
- ${this.value.map((fileArg) => html`
${fileArg.name} | ${fileArg.size}
`)}
-
+ ${this.label ? html`
${this.label}
` : null}
+
+ ${this.value.map(
+ (fileArg) => html`
+
{
+ DeesContextmenu.openContextMenuWithOptions(eventArg, [{
+ iconName: 'trash',
+ name: 'Remove',
+ action: async () => {
+ this.value.splice(this.value.indexOf(fileArg), 1);
+ this.requestUpdate();
+ }
+ }]);
+ }}>
+
+
+
+
+ ${fileArg.name}
+ ${fileArg.size}
+
+
`
+ )}
+
${this.buttonText}
@@ -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) {
diff --git a/ts_web/elements/dees-input-multitoggle.ts b/ts_web/elements/dees-input-multitoggle.ts
index b27e2b4..0b7ecc5 100644
--- 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`
-
MultiSelect
+ ${this.label ? html`
${this.label}
` : html``}
- ${this.options.map((option) => html`
this.handleSelection(option)}>${option}
`)}
+ ${this.options.map(
+ (option) =>
+ html`
this.handleSelection(option)}>
+ ${option}
+
`
+ )}
`;
@@ -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`;
diff --git a/ts_web/elements/dees-input-text.ts b/ts_web/elements/dees-input-text.ts
index e465166..a48137b 100644
--- 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;
diff --git a/ts_web/elements/dees-input-typelist.ts b/ts_web/elements/dees-input-typelist.ts
index 4be6422..b08a1f5 100644
--- 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`
-
Type List
+
${this.label}
{
this.shadowRoot.querySelector('input').focus();
diff --git a/ts_web/elements/dees-modal.ts b/ts_web/elements/dees-modal.ts
index be825c5..c2e5809 100644
--- 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;
diff --git a/ts_web/elements/dees-stepper.ts b/ts_web/elements/dees-stepper.ts
index 3d27076..efafbff 100644
--- 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`
<- go to previous step
`
+ ? html`
<- go to previous step
`
: ``}
Step ${this.steps.findIndex((elementArg) => elementArg === stepArg) + 1} of
diff --git a/ts_web/elements/dees-table.ts b/ts_web/elements/dees-table.ts
index 35c3f88..2068dc3 100644
--- 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 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 extends DeesElement {
line-height: 36px;
height: 36px;
display: inline-block;
+ border-radius: 8px;
}
.action:first-child {
@@ -319,7 +322,15 @@ export class DeesTable 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 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 {
+
+ }
`,
];