158 lines
3.9 KiB
TypeScript
158 lines
3.9 KiB
TypeScript
import * as plugins from '../plugins.js';
|
|
import * as interfaces from './interfaces/index.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 {
|
|
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);
|
|
cursor: pointer;
|
|
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) => {
|
|
plugins.deesCatalog.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]);
|
|
}
|
|
}
|