fix(core): update
This commit is contained in:
parent
d0f45141e5
commit
5208f46725
132
.gitlab-ci.yml
132
.gitlab-ci.yml
@ -1,132 +0,0 @@
|
||||
# gitzone ci_default_private
|
||||
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||
|
||||
cache:
|
||||
paths:
|
||||
- .npmci_cache/
|
||||
key: '$CI_BUILD_STAGE'
|
||||
|
||||
stages:
|
||||
- security
|
||||
- test
|
||||
- release
|
||||
- metadata
|
||||
|
||||
before_script:
|
||||
- pnpm install -g pnpm
|
||||
- pnpm install -g @shipzone/npmci
|
||||
- npmci npm prepare
|
||||
|
||||
# ====================
|
||||
# security stage
|
||||
# ====================
|
||||
# ====================
|
||||
# security stage
|
||||
# ====================
|
||||
auditProductionDependencies:
|
||||
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||
stage: security
|
||||
script:
|
||||
- npmci command npm config set registry https://registry.npmjs.org
|
||||
- npmci command pnpm audit --audit-level=high --prod
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
|
||||
auditDevDependencies:
|
||||
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||
stage: security
|
||||
script:
|
||||
- npmci command npm config set registry https://registry.npmjs.org
|
||||
- npmci command pnpm audit --audit-level=high --dev
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
allow_failure: true
|
||||
|
||||
# ====================
|
||||
# test stage
|
||||
# ====================
|
||||
|
||||
testStable:
|
||||
stage: test
|
||||
script:
|
||||
- npmci node install stable
|
||||
- npmci npm install
|
||||
- npmci npm test
|
||||
coverage: /\d+.?\d+?\%\s*coverage/
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
- notpriv
|
||||
|
||||
testBuild:
|
||||
stage: test
|
||||
script:
|
||||
- npmci node install stable
|
||||
- npmci npm install
|
||||
- npmci command npm run build
|
||||
coverage: /\d+.?\d+?\%\s*coverage/
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
- notpriv
|
||||
|
||||
release:
|
||||
stage: release
|
||||
script:
|
||||
- npmci node install stable
|
||||
- npmci npm publish
|
||||
only:
|
||||
- tags
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
- notpriv
|
||||
|
||||
# ====================
|
||||
# metadata stage
|
||||
# ====================
|
||||
codequality:
|
||||
stage: metadata
|
||||
allow_failure: true
|
||||
only:
|
||||
- tags
|
||||
script:
|
||||
- npmci command npm install -g typescript
|
||||
- npmci npm prepare
|
||||
- npmci npm install
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
- priv
|
||||
|
||||
trigger:
|
||||
stage: metadata
|
||||
script:
|
||||
- npmci trigger
|
||||
only:
|
||||
- tags
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
- notpriv
|
||||
|
||||
pages:
|
||||
stage: metadata
|
||||
script:
|
||||
- npmci node install lts
|
||||
- npmci command npm install -g @gitzone/tsdoc
|
||||
- npmci npm install
|
||||
- npmci command tsdoc
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
- notpriv
|
||||
only:
|
||||
- tags
|
||||
artifacts:
|
||||
expire_in: 1 week
|
||||
paths:
|
||||
- public
|
||||
allow_failure: true
|
@ -1,6 +1,6 @@
|
||||
// dees tools
|
||||
import * as deesWccTools from '@designestate/dees-wcctools';
|
||||
import * as deesDomTools from '@designestate/dees-domtools';
|
||||
import * as deesWccTools from '@design.estate/dees-wcctools';
|
||||
import * as deesDomTools from '@design.estate/dees-domtools';
|
||||
|
||||
// elements and pages
|
||||
import * as elements from '../ts_web/elements/index.js';
|
||||
|
@ -6,7 +6,7 @@
|
||||
"gitscope": "designestate",
|
||||
"gitrepo": "lele-appui-catalog",
|
||||
"description": "a catalog with app webcomponents",
|
||||
"npmPackagename": "@designestate/lele-appui-catalog",
|
||||
"npmPackagename": "@design.estate/lele-appui-catalog",
|
||||
"license": "MIT",
|
||||
"projectDomain": "design.estate"
|
||||
}
|
||||
|
23
package.json
23
package.json
@ -15,20 +15,19 @@
|
||||
"author": "Lossless GmbH",
|
||||
"license": "UNLICENSED",
|
||||
"dependencies": {
|
||||
"@designestate/dees-catalog": "^1.0.147",
|
||||
"@designestate/dees-domtools": "^2.0.28",
|
||||
"@designestate/dees-element": "^2.0.18",
|
||||
"@designestate/dees-wcctools": "^1.0.76",
|
||||
"@losslessone_private/loint-pubapi": "^1.0.13",
|
||||
"@pushrocks/smartexpress": "^4.0.23"
|
||||
"@design.estate/dees-catalog": "^1.0.170",
|
||||
"@design.estate/dees-domtools": "^2.0.34",
|
||||
"@design.estate/dees-element": "^2.0.23",
|
||||
"@design.estate/dees-wcctools": "^1.0.76",
|
||||
"@losslessone_private/loint-pubapi": "^1.0.13"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@gitzone/tsbuild": "^2.1.63",
|
||||
"@gitzone/tsbundle": "^2.0.5",
|
||||
"@gitzone/tsrun": "^1.2.39",
|
||||
"@gitzone/tswatch": "^2.0.1",
|
||||
"@pushrocks/projectinfo": "^5.0.1",
|
||||
"@types/node": "^18.11.18"
|
||||
"@git.zone/tsbuild": "^2.1.66",
|
||||
"@git.zone/tsbundle": "^2.0.8",
|
||||
"@git.zone/tsrun": "^1.2.44",
|
||||
"@git.zone/tswatch": "^2.0.7",
|
||||
"@push.rocks/projectinfo": "^5.0.1",
|
||||
"@types/node": "^20.5.9"
|
||||
},
|
||||
"files": [
|
||||
"ts/**/*",
|
||||
|
3316
pnpm-lock.yaml
3316
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
12
readme.md
12
readme.md
@ -1,8 +1,8 @@
|
||||
# @designestate/lele-appui-catalog
|
||||
# @design.estate/lele-appui-catalog
|
||||
a catalog with app webcomponents
|
||||
|
||||
## Availabililty and Links
|
||||
* [npmjs.org (npm package)](https://www.npmjs.com/package/@designestate/lele-appui-catalog)
|
||||
* [npmjs.org (npm package)](https://www.npmjs.com/package/@design.estate/lele-appui-catalog)
|
||||
* [gitlab.com (source)](https://gitlab.com/designestate/lele-appui-catalog)
|
||||
* [github.com (source mirror)](https://github.com/designestate/lele-appui-catalog)
|
||||
* [docs (typedoc)](https://designestate.gitlab.io/lele-appui-catalog/)
|
||||
@ -13,14 +13,14 @@ Status Category | Status Badge
|
||||
-- | --
|
||||
GitLab Pipelines | [![pipeline status](https://gitlab.com/designestate/lele-appui-catalog/badges/master/pipeline.svg)](https://lossless.cloud)
|
||||
GitLab Pipline Test Coverage | [![coverage report](https://gitlab.com/designestate/lele-appui-catalog/badges/master/coverage.svg)](https://lossless.cloud)
|
||||
npm | [![npm downloads per month](https://badgen.net/npm/dy/@designestate/lele-appui-catalog)](https://lossless.cloud)
|
||||
npm | [![npm downloads per month](https://badgen.net/npm/dy/@design.estate/lele-appui-catalog)](https://lossless.cloud)
|
||||
Snyk | [![Known Vulnerabilities](https://badgen.net/snyk/designestate/lele-appui-catalog)](https://lossless.cloud)
|
||||
TypeScript Support | [![TypeScript](https://badgen.net/badge/TypeScript/>=%203.x/blue?icon=typescript)](https://lossless.cloud)
|
||||
node Support | [![node](https://img.shields.io/badge/node->=%2010.x.x-blue.svg)](https://nodejs.org/dist/latest-v10.x/docs/api/)
|
||||
Code Style | [![Code Style](https://badgen.net/badge/style/prettier/purple)](https://lossless.cloud)
|
||||
PackagePhobia (total standalone install weight) | [![PackagePhobia](https://badgen.net/packagephobia/install/@designestate/lele-appui-catalog)](https://lossless.cloud)
|
||||
PackagePhobia (package size on registry) | [![PackagePhobia](https://badgen.net/packagephobia/publish/@designestate/lele-appui-catalog)](https://lossless.cloud)
|
||||
BundlePhobia (total size when bundled) | [![BundlePhobia](https://badgen.net/bundlephobia/minzip/@designestate/lele-appui-catalog)](https://lossless.cloud)
|
||||
PackagePhobia (total standalone install weight) | [![PackagePhobia](https://badgen.net/packagephobia/install/@design.estate/lele-appui-catalog)](https://lossless.cloud)
|
||||
PackagePhobia (package size on registry) | [![PackagePhobia](https://badgen.net/packagephobia/publish/@design.estate/lele-appui-catalog)](https://lossless.cloud)
|
||||
BundlePhobia (total size when bundled) | [![BundlePhobia](https://badgen.net/bundlephobia/minzip/@design.estate/lele-appui-catalog)](https://lossless.cloud)
|
||||
|
||||
## Usage
|
||||
|
||||
|
@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@losslessone_private/lele-appui-catalog',
|
||||
version: '1.0.75',
|
||||
version: '1.0.76',
|
||||
description: 'a catalog with app webcomponents'
|
||||
}
|
||||
|
@ -1,4 +1,5 @@
|
||||
export * from './lele-appui-activitylog.js';
|
||||
export * from './lele-appui-appbar.js';
|
||||
export * from './lele-appui-base.js';
|
||||
export * from './lele-appui-maincontent.js';
|
||||
export * from './lele-appui-mainmenu.js';
|
||||
|
@ -6,9 +6,9 @@ import {
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
} from '@designestate/dees-element';
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
|
||||
@customElement('lele-appui-activitylog')
|
||||
export class DeapActivitylog extends DeesElement {
|
||||
@ -26,7 +26,9 @@ export class DeapActivitylog extends DeesElement {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
height: 100%;
|
||||
background: #343b43;
|
||||
background: #111c28;
|
||||
font-family: 'Intel One Mono', sans-serif;
|
||||
border-left: 1px solid #202020;
|
||||
}
|
||||
.maincontainer {
|
||||
position: absolute;
|
||||
@ -38,33 +40,102 @@ export class DeapActivitylog extends DeesElement {
|
||||
|
||||
.topbar {
|
||||
position: absolute;
|
||||
height: 80px;
|
||||
width: calc(100% - 20px);
|
||||
margin: 0px 10px 0px 10px;
|
||||
border-bottom: 1px solid #707070;
|
||||
top: 0px;
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
padding: 0px 12px 0px 12px;
|
||||
background: #0e151f;
|
||||
}
|
||||
|
||||
.topbar .heading {
|
||||
text-align: center;
|
||||
line-height: 80px;
|
||||
font-family: Inter;
|
||||
text-align: left;
|
||||
line-height: 24px;
|
||||
padding-top: 8px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
font-family: 'Hubot Sans', sans-serif;
|
||||
}
|
||||
|
||||
.activityContainer {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
bottom: 0px;
|
||||
top: 32px;
|
||||
bottom: 40px;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
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 {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
min-height: 30px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
padding: 8px 16px;
|
||||
border-bottom: 1px dotted #ffffff20;
|
||||
}
|
||||
|
||||
.activityentry:last-of-type {
|
||||
border-bottom: 1px solid #ffffff00;
|
||||
}
|
||||
|
||||
.activityentry:hover {
|
||||
cursor: pointer;
|
||||
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;
|
||||
}
|
||||
`,
|
||||
];
|
||||
@ -78,8 +149,74 @@ export class DeapActivitylog extends DeesElement {
|
||||
<div class="heading">Activity Log</div>
|
||||
</div>
|
||||
<div class="activityContainer">
|
||||
<div class="activityentry"></div>
|
||||
<div class="streamingIndicator">streaming...</div>
|
||||
<div class="activityentry">
|
||||
<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>
|
||||
`;
|
||||
}
|
||||
|
36
ts_web/elements/lele-appui-appbar.ts
Normal file
36
ts_web/elements/lele-appui-appbar.ts
Normal file
@ -0,0 +1,36 @@
|
||||
import {
|
||||
DeesElement,
|
||||
TemplateResult,
|
||||
property,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
@customElement('lele-appui-appbar')
|
||||
export class DeapAppBar extends DeesElement {
|
||||
public static demo = () => html`<lele-appui-appbar></lele-appui-appbar>`;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
border-bottom: 1px solid #202020;
|
||||
background: #000000;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
// INSTANCE
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
|
||||
`;
|
||||
}
|
||||
}
|
@ -6,7 +6,7 @@ import {
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
} from '@designestate/dees-element';
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
@customElement('lele-appui-base')
|
||||
export class DeapBase extends DeesElement {
|
||||
@ -22,10 +22,11 @@ export class DeapBase extends DeesElement {
|
||||
}
|
||||
.maingrid {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
top: 32px;
|
||||
height: calc(100% - 40px);
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 80px 240px auto 200px;
|
||||
grid-template-columns: 60px 240px auto 240px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
@ -34,6 +35,7 @@ export class DeapBase extends DeesElement {
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<style></style>
|
||||
<lele-appui-appbar></lele-appui-appbar>
|
||||
<div class="maingrid">
|
||||
<lele-appui-mainmenu></lele-appui-mainmenu>
|
||||
<lele-appui-mainselector></lele-appui-mainselector>
|
||||
|
@ -8,9 +8,9 @@ import {
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
} from '@designestate/dees-element';
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
|
||||
@customElement('lele-appui-maincontent')
|
||||
export class DeapMaincontent extends DeesElement {
|
||||
@ -37,7 +37,7 @@ export class DeapMaincontent extends DeesElement {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background: #222222;
|
||||
background: #161616;
|
||||
}
|
||||
.maincontainer {
|
||||
position: absolute;
|
||||
@ -50,27 +50,30 @@ export class DeapMaincontent extends DeesElement {
|
||||
.topbar {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
background: #101010;
|
||||
height: 80px;
|
||||
background: #000000;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.topbar .heading {
|
||||
padding: 24px 40px 24px 40px;
|
||||
font-family: 'Roboto Mono';
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
padding: 8px 24px 8px 24px;
|
||||
font-family: 'Hubot Sans', sans-serif;
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
font-size: 16px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.topbar .tabsContainer {
|
||||
display: grid;
|
||||
margin-left: 40px;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.topbar .tabsContainer .tab {
|
||||
color: #a0a0a0;
|
||||
white-space: nowrap;
|
||||
margin-right: 16px;
|
||||
margin-top: 8px;
|
||||
cursor: pointer;
|
||||
transition: color 0.1s;
|
||||
}
|
||||
@ -89,8 +92,11 @@ export class DeapMaincontent extends DeesElement {
|
||||
bottom: 0px;
|
||||
height: 4px;
|
||||
width: 40px;
|
||||
background: #484848;
|
||||
background: #161616;
|
||||
transition: all 0.1s;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
border-top: 1px solid #e4002b;
|
||||
}
|
||||
|
||||
.mainicon {
|
||||
|
@ -8,10 +8,10 @@ import {
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
} from '@designestate/dees-element';
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
import '@designestate/dees-catalog';
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
import '@design.estate/dees-catalog';
|
||||
|
||||
/**
|
||||
* the most left menu
|
||||
@ -39,20 +39,22 @@ export class DeapMainmenu extends DeesElement {
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
--menuSize: 60px;
|
||||
color: #ccc;
|
||||
z-index: 10;
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 80px;
|
||||
width: var(--menuSize);
|
||||
height: 100%;
|
||||
background: #3c3c3c;
|
||||
background: #000000;
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
|
||||
user-select: none;
|
||||
border-right: 1px solid #202020;
|
||||
}
|
||||
|
||||
.mainlogo {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
width: var(--menuSize);
|
||||
height: var(--menuSize);
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
@ -62,34 +64,30 @@ export class DeapMainmenu extends DeesElement {
|
||||
.tab {
|
||||
padding-top: 18px;
|
||||
font-size: 24px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
width: var(--menuSize);
|
||||
height: var(--menuSize);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: color 0.1s, background 0.2s;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.tab.selectedTab {
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.tab .label {
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.tabIndicator {
|
||||
opacity: 0;
|
||||
background: #4e729a;
|
||||
position: absolute;
|
||||
width: 7px;
|
||||
height: 60px;
|
||||
width: 5px;
|
||||
height: calc((var(--menuSize) / 3) * 2);
|
||||
left: 0px;
|
||||
top: 90px;
|
||||
top: calc(var(--menuSize) - (((var(--menuSize) / 3) * 2) / 2));
|
||||
border-top-right-radius: 7px;
|
||||
border-bottom-right-radius: 7px;
|
||||
transition: all 0.1s;
|
||||
@ -110,8 +108,7 @@ export class DeapMainmenu extends DeesElement {
|
||||
this.updateTab(tabArg);
|
||||
}}"
|
||||
>
|
||||
<dees-icon iconFA="${tabArg.iconName}"></dees-icon>
|
||||
<div class="label">${tabArg.key}</div>
|
||||
<dees-icon iconFA="${tabArg.iconName as any}"></dees-icon>
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
@ -130,7 +127,9 @@ export class DeapMainmenu extends DeesElement {
|
||||
`.tabsContainer .tab:nth-child(${tabIndex + 1})`
|
||||
);
|
||||
const tabIndicator: HTMLElement = this.shadowRoot.querySelector('.tabIndicator');
|
||||
tabIndicator.style.top = selectedTabElement.offsetTop + 10 + 'px';
|
||||
const offsetTop = selectedTabElement.offsetTop;
|
||||
tabIndicator.style.opacity = `1`;
|
||||
tabIndicator.style.top = `calc(${offsetTop}px + (var(--menuSize) / 6))`;
|
||||
}
|
||||
|
||||
updateTab(tabArg: interfaces.ITab) {
|
||||
|
@ -8,7 +8,7 @@ import {
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
} from '@designestate/dees-element';
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
/**
|
||||
* the property selector menu
|
||||
@ -43,7 +43,8 @@ export class DeapMainselector extends DeesElement {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
height: 100%;
|
||||
background: #3c3c3c;
|
||||
background: #000000;
|
||||
border-right: 1px solid #222222;
|
||||
}
|
||||
.maincontainer {
|
||||
position: absolute;
|
||||
@ -55,27 +56,27 @@ export class DeapMainselector extends DeesElement {
|
||||
|
||||
.topbar {
|
||||
position: absolute;
|
||||
height: 80px;
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
|
||||
background: #333333;
|
||||
}
|
||||
|
||||
.topbar .heading {
|
||||
padding-left: 20px;
|
||||
line-height: 80px;
|
||||
font-family: Inter;
|
||||
padding-left: 16px;
|
||||
padding-top: 8px;
|
||||
line-height: 24px;
|
||||
font-family: 'Hubot Sans', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.selectionOptions {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
top: 32px;
|
||||
padding-top: 8px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
font-family: Roboto Mono;
|
||||
font-size: 16px;
|
||||
font-family: 'Mona Sans', sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.selectionOptions .selectionOption {
|
||||
@ -83,11 +84,10 @@ export class DeapMainselector extends DeesElement {
|
||||
margin-right: 16px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
border-top: 1px solid #707070;
|
||||
border-top: 1px dotted #303030;
|
||||
border-left: 0px solid rgba(0,0,0,0);
|
||||
cursor: pointer;
|
||||
transition: all 0.1s;
|
||||
|
||||
}
|
||||
|
||||
.selectionOptions .selectionOption:hover {
|
||||
@ -95,19 +95,14 @@ export class DeapMainselector extends DeesElement {
|
||||
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;
|
||||
}
|
||||
|
||||
.selectionOptions .selectionOption:first-child {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.selectionOptions .selectionOption:last-child {
|
||||
margin-bottom: 16px;
|
||||
border-bottom: 1px solid #707070;
|
||||
}
|
||||
`
|
||||
];
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user