fix(core): update
This commit is contained in:
parent
5eb2f4cebc
commit
69bb03dcdf
@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@design.estate/dees-catalog',
|
||||
version: '1.0.276',
|
||||
version: '1.0.277',
|
||||
description: 'website for lossless.com'
|
||||
}
|
||||
|
||||
239
ts_web/elements/dees-appui-activitylog.ts
Normal file
239
ts_web/elements/dees-appui-activitylog.ts
Normal file
@ -0,0 +1,239 @@
|
||||
import * as plugins from './00plugins.js';
|
||||
import {
|
||||
DeesElement,
|
||||
type TemplateResult,
|
||||
property,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
import { DeesContextmenu } from './dees-contextmenu.js';
|
||||
|
||||
@customElement('dees-appui-activitylog')
|
||||
export class DeesAppuiActivitylog extends DeesElement {
|
||||
// STATIC
|
||||
public static demo = () => html`<dees-appui-activitylog></dees-appui-activitylog>`;
|
||||
|
||||
// INSTANCE
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
color: #fff;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
height: 100%;
|
||||
background: #111c28;
|
||||
font-family: 'Intel One Mono', sans-serif;
|
||||
border-left: 1px solid #202020;
|
||||
cursor: default;
|
||||
}
|
||||
.maincontainer {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
padding: 0px 12px 0px 12px;
|
||||
background: #0e151f;
|
||||
}
|
||||
|
||||
.topbar .heading {
|
||||
text-align: left;
|
||||
line-height: 24px;
|
||||
padding-top: 8px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
font-family: 'Roboto', 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.activityContainer {
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
bottom: 40px;
|
||||
width: 100%;
|
||||
padding: 8px 0px;
|
||||
overflow-y: scroll;
|
||||
|
||||
}
|
||||
|
||||
.streamingIndicator {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
padding-top: 16px;
|
||||
color: #888
|
||||
}
|
||||
|
||||
.streamingIndicator.bottom {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.activityentry {
|
||||
min-height: 30px;
|
||||
font-size: 12px;
|
||||
padding: 8px 16px;
|
||||
border-bottom: 1px dotted #ffffff20;
|
||||
}
|
||||
|
||||
.activityentry:last-of-type {
|
||||
border-bottom: 1px solid #ffffff00;
|
||||
}
|
||||
|
||||
.activityentry:hover {
|
||||
background: #00000080;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
color: #ff8787;
|
||||
}
|
||||
|
||||
.searchbox {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: #0e151f;
|
||||
}
|
||||
.searchbox input {
|
||||
color: #fff;
|
||||
background: none;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 32px;
|
||||
border: none;
|
||||
padding: 4px 12px;
|
||||
font-family: 'Intel One Mono', sans-serif;
|
||||
}
|
||||
|
||||
.searchbox input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.bottomShadow {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
bottom: 40px;
|
||||
background: linear-gradient(180deg, #111c2800 0%, #0e151f 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.topShadow {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
top: 32px;
|
||||
background: linear-gradient(0deg, #111c2800 0%, #0e151f 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
${domtools.elementBasic.styles}
|
||||
<style></style>
|
||||
<div class="maincontainer">
|
||||
<div class="topbar">
|
||||
<div class="heading">Activity Log</div>
|
||||
</div>
|
||||
<div class="activityContainer">
|
||||
<div class="streamingIndicator">streaming...</div>
|
||||
<div class="activityentry" @contextmenu=${async eventArg => {
|
||||
DeesContextmenu.openContextMenuWithOptions(eventArg, [
|
||||
{
|
||||
name: 'app settings',
|
||||
action: async () => {},
|
||||
},
|
||||
{
|
||||
name: 'account settings',
|
||||
action: async () => {},
|
||||
},
|
||||
{
|
||||
name: 'logout',
|
||||
action: async () => {},
|
||||
},
|
||||
]);
|
||||
}}>
|
||||
<span class="timestamp">22:01:</span> Max Mustermann logged in
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:02:</span> Max Mustermann viewed an invoice
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:03:</span> Max Mustermann added a new contact
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:04:</span> Max Mustermann updated account settings
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:05:</span> Max Mustermann logged out
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:06:</span> Max Mustermann logged in
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:07:</span> Max Mustermann created a new invoice
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:08:</span> Max Mustermann sent an invoice
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:09:</span> Max Mustermann viewed reports
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:10:</span> Max Mustermann logged out
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:11:</span> Max Mustermann logged in
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:12:</span> Max Mustermann deleted an invoice
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:13:</span> Max Mustermann contacted support
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:14:</span> Max Mustermann added a new user
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:15:</span> Max Mustermann changed password
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:16:</span> Max Mustermann logged out
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:17:</span> Max Mustermann logged in
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:18:</span> Max Mustermann archived an invoice
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:19:</span> Max Mustermann approved a payment
|
||||
</div>
|
||||
<div class="activityentry">
|
||||
<span class="timestamp">22:20:</span> Max Mustermann logged out
|
||||
</div>
|
||||
<div class="streamingIndicator bottom">loading more...</div>
|
||||
</div>
|
||||
<div class="searchbox">
|
||||
<input type="text" placeholder="Search" />
|
||||
</div>
|
||||
<div class="topShadow"></div>
|
||||
<div class="bottomShadow"></div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
77
ts_web/elements/dees-appui-appbar.ts
Normal file
77
ts_web/elements/dees-appui-appbar.ts
Normal file
@ -0,0 +1,77 @@
|
||||
import {
|
||||
DeesElement,
|
||||
type TemplateResult,
|
||||
property,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
@customElement('dees-appui-appbar')
|
||||
export class DeesAppuiBar extends DeesElement {
|
||||
public static demo = () => html`<dees-appui-appbar></dees-appui-appbar>`;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border-bottom: 1px solid #202020;
|
||||
background: #000000;
|
||||
color: #ffffff80;
|
||||
font-size: 12px;
|
||||
display: grid;
|
||||
grid-template-columns: ${cssManager.cssGridColumns(3, 20)};
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
.menus {
|
||||
display: flex;
|
||||
padding-left: 8px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.menuItem {
|
||||
line-height: 24px;
|
||||
padding: 0px 8px;
|
||||
margin: 8px 0px;
|
||||
border-radius: 4px;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.menuItem:hover {
|
||||
background: #ffffff20;
|
||||
}
|
||||
|
||||
.breadcrumbs {
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
margin: 8px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
// INSTANCE
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="menus">
|
||||
<dees-windowcontrols></dees-windowcontrols>
|
||||
<div class="menuItem">File</div>
|
||||
<div class="menuItem">View</div>
|
||||
<div class="menuItem">Help</div>
|
||||
<div class="menuItem">Terminal</div>
|
||||
</div>
|
||||
<div class="breadcrumbs">
|
||||
tool:social.io > org:design.estate > prop:lossless.com
|
||||
</div>
|
||||
<div class="account"></div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
47
ts_web/elements/dees-appui-base.ts
Normal file
47
ts_web/elements/dees-appui-base.ts
Normal file
@ -0,0 +1,47 @@
|
||||
import {
|
||||
DeesElement,
|
||||
type TemplateResult,
|
||||
property,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
@customElement('dees-appui-base')
|
||||
export class DeesAppuiBase extends DeesElement {
|
||||
public static demo = () => html`<dees-appui-base></dees-appui-base>`;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.maingrid {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
height: calc(100% - 40px);
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 60px 240px auto 240px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
// INSTANCE
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<style></style>
|
||||
<dees-appui-appbar></dees-appui-appbar>
|
||||
<div class="maingrid">
|
||||
<dees-appui-mainmenu></dees-appui-mainmenu>
|
||||
<dees-appui-mainselector></dees-appui-mainselector>
|
||||
<dees-appui-maincontent></dees-appui-maincontent>
|
||||
<dees-appui-activitylog></dees-appui-activitylog>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
161
ts_web/elements/dees-appui-maincontent.ts
Normal file
161
ts_web/elements/dees-appui-maincontent.ts
Normal file
@ -0,0 +1,161 @@
|
||||
import * as interfaces from './interfaces/index.js';
|
||||
|
||||
import {
|
||||
DeesElement,
|
||||
type TemplateResult,
|
||||
property,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
|
||||
@customElement('dees-appui-maincontent')
|
||||
export class DeesAppuiMaincontent extends DeesElement {
|
||||
public static demo = () => html`<dees-appui-maincontent></dees-appui-maincontent>`;
|
||||
|
||||
// INSTANCE
|
||||
@property({
|
||||
type: Array,
|
||||
})
|
||||
public tabs: interfaces.ITab[] = [
|
||||
{ key: 'option 1', action: () => {} },
|
||||
{ key: 'a very long option', action: () => {} },
|
||||
{ key: 'reminder: set your tabs', action: () => {} },
|
||||
{ key: 'option 4', action: () => {} },
|
||||
];
|
||||
|
||||
@property()
|
||||
public selectedTab = null;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
color: #fff;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background: #161616;
|
||||
}
|
||||
.maincontainer {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background: #000000;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.topbar .tabsContainer {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 0px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
margin-left: 24px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.topbar .tabsContainer .tab {
|
||||
color: #a0a0a0;
|
||||
white-space: nowrap;
|
||||
margin-right: 30px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 12px;
|
||||
transition: color 0.1s;
|
||||
}
|
||||
|
||||
.topbar .tabsContainer .tab:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.topbar .tabsContainer .tab.selectedTab {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.topbar .tabIndicator {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
left: 40px;
|
||||
bottom: 0px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
background: #161616;
|
||||
transition: all 0.1s;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
border-top: 1px solid #444444;
|
||||
}
|
||||
|
||||
.mainicon {
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<style>
|
||||
.topbar .tabsContainer {
|
||||
grid-template-columns: repeat(${this.tabs.length}, min-content);
|
||||
}
|
||||
</style>
|
||||
<div class="maincontainer">
|
||||
<div class="topbar">
|
||||
<div class="tabsContainer">
|
||||
${this.tabs.map((tabArg) => {
|
||||
return html`
|
||||
<div
|
||||
class="tab ${tabArg === this.selectedTab ? 'selectedTab' : null}"
|
||||
@click="${() => {
|
||||
this.selectedTab = tabArg;
|
||||
this.updateTabIndicator();
|
||||
tabArg.action();
|
||||
}}"
|
||||
>
|
||||
${tabArg.key}
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
<div class="tabIndicator"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* updates the indicator
|
||||
*/
|
||||
private updateTabIndicator() {
|
||||
let selectedTab = this.selectedTab;
|
||||
const tabIndex = this.tabs.indexOf(selectedTab);
|
||||
const selectedTabElement: HTMLElement = this.shadowRoot.querySelector(
|
||||
`.tabsContainer .tab:nth-child(${tabIndex + 1})`
|
||||
);
|
||||
const tabsContainer: HTMLElement = this.shadowRoot.querySelector('.tabsContainer');
|
||||
const marginLeft = parseInt(window.getComputedStyle(tabsContainer).getPropertyValue("margin-left"));
|
||||
const tabIndicator: HTMLElement = this.shadowRoot.querySelector('.tabIndicator');
|
||||
tabIndicator.style.width = selectedTabElement.clientWidth + 24 + 'px';
|
||||
tabIndicator.style.left = selectedTabElement.offsetLeft + marginLeft - 12 + 'px';
|
||||
}
|
||||
|
||||
private updateTab(tabArg: interfaces.ITab) {
|
||||
this.selectedTab = tabArg;
|
||||
this.updateTabIndicator();
|
||||
this.selectedTab.action();
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
this.updateTab(this.tabs[0]);
|
||||
}
|
||||
}
|
||||
142
ts_web/elements/dees-appui-mainmenu.ts
Normal file
142
ts_web/elements/dees-appui-mainmenu.ts
Normal file
@ -0,0 +1,142 @@
|
||||
import * as plugins from './00plugins.js';
|
||||
import * as interfaces from './interfaces/index.js';
|
||||
|
||||
import {
|
||||
DeesElement,
|
||||
type TemplateResult,
|
||||
property,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
} from '@design.estate/dees-element';
|
||||
import { DeesContextmenu } from './dees-contextmenu.js';
|
||||
|
||||
/**
|
||||
* the most left menu
|
||||
* usually used as organization selector
|
||||
*/
|
||||
@customElement('dees-appui-mainmenu')
|
||||
export class DeesAppuiMainmenu extends DeesElement {
|
||||
public static demo = () => html`<dees-appui-mainmenu></dees-appui-mainmenu>`;
|
||||
|
||||
// INSTANCE
|
||||
|
||||
// INSTANCE
|
||||
@property()
|
||||
public tabs: interfaces.ITab[] = [
|
||||
{ key: 'option 1', iconName: 'building', action: () => {} },
|
||||
{ key: 'option 2', iconName: 'building', action: () => {} },
|
||||
{ key: 'option 3', iconName: 'building', action: () => {} },
|
||||
{ key: 'option 4', iconName: 'building', action: () => {} },
|
||||
];
|
||||
|
||||
@property()
|
||||
public selectedTab: interfaces.ITab;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
.mainContainer {
|
||||
--menuSize: 60px;
|
||||
color: #ccc;
|
||||
z-index: 10;
|
||||
display: block;
|
||||
position: relative;
|
||||
width: var(--menuSize);
|
||||
height: 100%;
|
||||
background: #000000;
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
|
||||
user-select: none;
|
||||
border-right: 1px solid #202020;
|
||||
}
|
||||
|
||||
.tabsContainer {
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding-top: 18px;
|
||||
font-size: 24px;
|
||||
width: var(--menuSize);
|
||||
height: var(--menuSize);
|
||||
text-align: center;
|
||||
transition: color 0.1s, background 0.2s;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.tab.selectedTab {
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.tabIndicator {
|
||||
opacity: 0;
|
||||
background: #4e729a;
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
height: calc((var(--menuSize) / 3) * 2);
|
||||
left: 0px;
|
||||
top: calc(var(--menuSize) - (((var(--menuSize) / 3) * 2) / 2));
|
||||
border-top-right-radius: 7px;
|
||||
border-bottom-right-radius: 7px;
|
||||
transition: all 0.1s;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="mainContainer" @contextmenu=${(eventArg) => {
|
||||
DeesContextmenu.openContextMenuWithOptions(eventArg, [{
|
||||
name: 'app settings',
|
||||
action: async () => {},
|
||||
iconName: 'gear',
|
||||
}])
|
||||
}}>
|
||||
<div class="tabsContainer">
|
||||
${this.tabs.map((tabArg) => {
|
||||
return html`
|
||||
<div
|
||||
class="tab ${tabArg === this.selectedTab ? 'selectedTab' : null}"
|
||||
@click="${() => {
|
||||
this.updateTab(tabArg);
|
||||
}}"
|
||||
>
|
||||
<dees-icon iconFA="${tabArg.iconName as any}"></dees-icon>
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
<div class="tabIndicator"></div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private async updateTabIndicator() {
|
||||
let selectedTab = this.selectedTab;
|
||||
if (!selectedTab) {
|
||||
selectedTab = this.tabs[0];
|
||||
}
|
||||
const tabIndex = this.tabs.indexOf(selectedTab);
|
||||
const selectedTabElement: HTMLElement = this.shadowRoot.querySelector(
|
||||
`.tabsContainer .tab:nth-child(${tabIndex + 1})`
|
||||
);
|
||||
const tabIndicator: HTMLElement = this.shadowRoot.querySelector('.tabIndicator');
|
||||
const offsetTop = selectedTabElement.offsetTop;
|
||||
tabIndicator.style.opacity = `1`;
|
||||
tabIndicator.style.top = `calc(${offsetTop}px + (var(--menuSize) / 6))`;
|
||||
}
|
||||
|
||||
updateTab(tabArg: interfaces.ITab) {
|
||||
this.selectedTab = tabArg;
|
||||
this.updateTabIndicator();
|
||||
this.selectedTab.action();
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
this.updateTab(this.tabs[0]);
|
||||
}
|
||||
}
|
||||
160
ts_web/elements/dees-appui-mainselector.ts
Normal file
160
ts_web/elements/dees-appui-mainselector.ts
Normal file
@ -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]);
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,9 @@
|
||||
export * from './dees-appui-activitylog.js';
|
||||
export * from './dees-appui-appbar.js';
|
||||
export * from './dees-appui-base.js';
|
||||
export * from './dees-appui-maincontent.js';
|
||||
export * from './dees-appui-mainmenu.js';
|
||||
export * from './dees-appui-mainselector.js';
|
||||
export * from './dees-button-exit.js';
|
||||
export * from './dees-button.js';
|
||||
export * from './dees-chips.js';
|
||||
|
||||
2
ts_web/elements/interfaces/index.ts
Normal file
2
ts_web/elements/interfaces/index.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export * from './tab.js';
|
||||
export * from './selectionoption.js';
|
||||
4
ts_web/elements/interfaces/selectionoption.ts
Normal file
4
ts_web/elements/interfaces/selectionoption.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export interface ISelectionOption {
|
||||
key: string;
|
||||
action: () => void;
|
||||
}
|
||||
5
ts_web/elements/interfaces/tab.ts
Normal file
5
ts_web/elements/interfaces/tab.ts
Normal file
@ -0,0 +1,5 @@
|
||||
export interface ITab {
|
||||
key: string;
|
||||
iconName?: string;
|
||||
action: () => void;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user