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
|
// dees tools
|
||||||
import * as deesWccTools from '@designestate/dees-wcctools';
|
import * as deesWccTools from '@design.estate/dees-wcctools';
|
||||||
import * as deesDomTools from '@designestate/dees-domtools';
|
import * as deesDomTools from '@design.estate/dees-domtools';
|
||||||
|
|
||||||
// elements and pages
|
// elements and pages
|
||||||
import * as elements from '../ts_web/elements/index.js';
|
import * as elements from '../ts_web/elements/index.js';
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
"gitscope": "designestate",
|
"gitscope": "designestate",
|
||||||
"gitrepo": "lele-appui-catalog",
|
"gitrepo": "lele-appui-catalog",
|
||||||
"description": "a catalog with app webcomponents",
|
"description": "a catalog with app webcomponents",
|
||||||
"npmPackagename": "@designestate/lele-appui-catalog",
|
"npmPackagename": "@design.estate/lele-appui-catalog",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"projectDomain": "design.estate"
|
"projectDomain": "design.estate"
|
||||||
}
|
}
|
||||||
|
23
package.json
23
package.json
@ -15,20 +15,19 @@
|
|||||||
"author": "Lossless GmbH",
|
"author": "Lossless GmbH",
|
||||||
"license": "UNLICENSED",
|
"license": "UNLICENSED",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@designestate/dees-catalog": "^1.0.147",
|
"@design.estate/dees-catalog": "^1.0.170",
|
||||||
"@designestate/dees-domtools": "^2.0.28",
|
"@design.estate/dees-domtools": "^2.0.34",
|
||||||
"@designestate/dees-element": "^2.0.18",
|
"@design.estate/dees-element": "^2.0.23",
|
||||||
"@designestate/dees-wcctools": "^1.0.76",
|
"@design.estate/dees-wcctools": "^1.0.76",
|
||||||
"@losslessone_private/loint-pubapi": "^1.0.13",
|
"@losslessone_private/loint-pubapi": "^1.0.13"
|
||||||
"@pushrocks/smartexpress": "^4.0.23"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@gitzone/tsbuild": "^2.1.63",
|
"@git.zone/tsbuild": "^2.1.66",
|
||||||
"@gitzone/tsbundle": "^2.0.5",
|
"@git.zone/tsbundle": "^2.0.8",
|
||||||
"@gitzone/tsrun": "^1.2.39",
|
"@git.zone/tsrun": "^1.2.44",
|
||||||
"@gitzone/tswatch": "^2.0.1",
|
"@git.zone/tswatch": "^2.0.7",
|
||||||
"@pushrocks/projectinfo": "^5.0.1",
|
"@push.rocks/projectinfo": "^5.0.1",
|
||||||
"@types/node": "^18.11.18"
|
"@types/node": "^20.5.9"
|
||||||
},
|
},
|
||||||
"files": [
|
"files": [
|
||||||
"ts/**/*",
|
"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
|
a catalog with app webcomponents
|
||||||
|
|
||||||
## Availabililty and Links
|
## 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)
|
* [gitlab.com (source)](https://gitlab.com/designestate/lele-appui-catalog)
|
||||||
* [github.com (source mirror)](https://github.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/)
|
* [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 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)
|
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)
|
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)
|
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/)
|
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)
|
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 (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/@designestate/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/@designestate/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
|
## Usage
|
||||||
|
|
||||||
|
@ -3,6 +3,6 @@
|
|||||||
*/
|
*/
|
||||||
export const commitinfo = {
|
export const commitinfo = {
|
||||||
name: '@losslessone_private/lele-appui-catalog',
|
name: '@losslessone_private/lele-appui-catalog',
|
||||||
version: '1.0.75',
|
version: '1.0.76',
|
||||||
description: 'a catalog with app webcomponents'
|
description: 'a catalog with app webcomponents'
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
export * from './lele-appui-activitylog.js';
|
export * from './lele-appui-activitylog.js';
|
||||||
|
export * from './lele-appui-appbar.js';
|
||||||
export * from './lele-appui-base.js';
|
export * from './lele-appui-base.js';
|
||||||
export * from './lele-appui-maincontent.js';
|
export * from './lele-appui-maincontent.js';
|
||||||
export * from './lele-appui-mainmenu.js';
|
export * from './lele-appui-mainmenu.js';
|
||||||
|
@ -6,9 +6,9 @@ import {
|
|||||||
html,
|
html,
|
||||||
css,
|
css,
|
||||||
cssManager,
|
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')
|
@customElement('lele-appui-activitylog')
|
||||||
export class DeapActivitylog extends DeesElement {
|
export class DeapActivitylog extends DeesElement {
|
||||||
@ -26,7 +26,9 @@ export class DeapActivitylog extends DeesElement {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: #343b43;
|
background: #111c28;
|
||||||
|
font-family: 'Intel One Mono', sans-serif;
|
||||||
|
border-left: 1px solid #202020;
|
||||||
}
|
}
|
||||||
.maincontainer {
|
.maincontainer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -38,33 +40,102 @@ export class DeapActivitylog extends DeesElement {
|
|||||||
|
|
||||||
.topbar {
|
.topbar {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 80px;
|
top: 0px;
|
||||||
width: calc(100% - 20px);
|
height: 32px;
|
||||||
margin: 0px 10px 0px 10px;
|
width: 100%;
|
||||||
border-bottom: 1px solid #707070;
|
padding: 0px 12px 0px 12px;
|
||||||
|
background: #0e151f;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topbar .heading {
|
.topbar .heading {
|
||||||
text-align: center;
|
text-align: left;
|
||||||
line-height: 80px;
|
line-height: 24px;
|
||||||
font-family: Inter;
|
padding-top: 8px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
font-family: 'Hubot Sans', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.activityContainer {
|
.activityContainer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 80px;
|
top: 32px;
|
||||||
bottom: 0px;
|
bottom: 40px;
|
||||||
width: 100%;
|
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 {
|
.activityentry {
|
||||||
background: rgba(0, 0, 0, 0.2);
|
|
||||||
min-height: 30px;
|
min-height: 30px;
|
||||||
border-radius: 3px;
|
|
||||||
cursor: pointer;
|
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 class="heading">Activity Log</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="activityContainer">
|
<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>
|
||||||
|
<div class="searchbox">
|
||||||
|
<input type="text" placeholder="Search" />
|
||||||
|
</div>
|
||||||
|
<div class="topShadow"></div>
|
||||||
|
<div class="bottomShadow"></div>
|
||||||
</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,
|
html,
|
||||||
css,
|
css,
|
||||||
cssManager,
|
cssManager,
|
||||||
} from '@designestate/dees-element';
|
} from '@design.estate/dees-element';
|
||||||
|
|
||||||
@customElement('lele-appui-base')
|
@customElement('lele-appui-base')
|
||||||
export class DeapBase extends DeesElement {
|
export class DeapBase extends DeesElement {
|
||||||
@ -22,10 +22,11 @@ export class DeapBase extends DeesElement {
|
|||||||
}
|
}
|
||||||
.maingrid {
|
.maingrid {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 100%;
|
top: 32px;
|
||||||
|
height: calc(100% - 40px);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: grid;
|
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 {
|
public render(): TemplateResult {
|
||||||
return html`
|
return html`
|
||||||
<style></style>
|
<style></style>
|
||||||
|
<lele-appui-appbar></lele-appui-appbar>
|
||||||
<div class="maingrid">
|
<div class="maingrid">
|
||||||
<lele-appui-mainmenu></lele-appui-mainmenu>
|
<lele-appui-mainmenu></lele-appui-mainmenu>
|
||||||
<lele-appui-mainselector></lele-appui-mainselector>
|
<lele-appui-mainselector></lele-appui-mainselector>
|
||||||
|
@ -8,9 +8,9 @@ import {
|
|||||||
html,
|
html,
|
||||||
css,
|
css,
|
||||||
cssManager,
|
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')
|
@customElement('lele-appui-maincontent')
|
||||||
export class DeapMaincontent extends DeesElement {
|
export class DeapMaincontent extends DeesElement {
|
||||||
@ -37,7 +37,7 @@ export class DeapMaincontent extends DeesElement {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
background: #222222;
|
background: #161616;
|
||||||
}
|
}
|
||||||
.maincontainer {
|
.maincontainer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -50,27 +50,30 @@ export class DeapMaincontent extends DeesElement {
|
|||||||
.topbar {
|
.topbar {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 112px;
|
height: 80px;
|
||||||
background: #101010;
|
background: #000000;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topbar .heading {
|
.topbar .heading {
|
||||||
padding: 24px 40px 24px 40px;
|
padding: 8px 24px 8px 24px;
|
||||||
font-family: 'Roboto Mono';
|
font-family: 'Hubot Sans', sans-serif;
|
||||||
font-weight: 400;
|
font-weight: 600;
|
||||||
font-size: 24px;
|
line-height: 24px;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topbar .tabsContainer {
|
.topbar .tabsContainer {
|
||||||
display: grid;
|
display: grid;
|
||||||
margin-left: 40px;
|
margin-left: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topbar .tabsContainer .tab {
|
.topbar .tabsContainer .tab {
|
||||||
color: #a0a0a0;
|
color: #a0a0a0;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
margin-right: 16px;
|
margin-right: 16px;
|
||||||
|
margin-top: 8px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: color 0.1s;
|
transition: color 0.1s;
|
||||||
}
|
}
|
||||||
@ -89,8 +92,11 @@ export class DeapMaincontent extends DeesElement {
|
|||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
height: 4px;
|
height: 4px;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
background: #484848;
|
background: #161616;
|
||||||
transition: all 0.1s;
|
transition: all 0.1s;
|
||||||
|
border-top-left-radius: 8px;
|
||||||
|
border-top-right-radius: 8px;
|
||||||
|
border-top: 1px solid #e4002b;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mainicon {
|
.mainicon {
|
||||||
|
@ -8,10 +8,10 @@ import {
|
|||||||
html,
|
html,
|
||||||
css,
|
css,
|
||||||
cssManager,
|
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';
|
||||||
import '@designestate/dees-catalog';
|
import '@design.estate/dees-catalog';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* the most left menu
|
* the most left menu
|
||||||
@ -39,20 +39,22 @@ export class DeapMainmenu extends DeesElement {
|
|||||||
cssManager.defaultStyles,
|
cssManager.defaultStyles,
|
||||||
css`
|
css`
|
||||||
:host {
|
:host {
|
||||||
|
--menuSize: 60px;
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 80px;
|
width: var(--menuSize);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: #3c3c3c;
|
background: #000000;
|
||||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
|
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
border-right: 1px solid #202020;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mainlogo {
|
.mainlogo {
|
||||||
width: 80px;
|
width: var(--menuSize);
|
||||||
height: 80px;
|
height: var(--menuSize);
|
||||||
background: rgba(0, 0, 0, 0.4);
|
background: rgba(0, 0, 0, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -62,34 +64,30 @@ export class DeapMainmenu extends DeesElement {
|
|||||||
.tab {
|
.tab {
|
||||||
padding-top: 18px;
|
padding-top: 18px;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
width: 80px;
|
width: var(--menuSize);
|
||||||
height: 80px;
|
height: var(--menuSize);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: color 0.1s, background 0.2s;
|
transition: color 0.1s, background 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab:hover {
|
.tab:hover {
|
||||||
background: rgba(0, 0, 0, 0.3);
|
background: rgba(255, 255, 255, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab.selectedTab {
|
.tab.selectedTab {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: rgba(0, 0, 0, 0.2);
|
background: rgba(255, 255, 255, 0.1);
|
||||||
}
|
|
||||||
|
|
||||||
.tab .label {
|
|
||||||
font-size: 12px;
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabIndicator {
|
.tabIndicator {
|
||||||
|
opacity: 0;
|
||||||
background: #4e729a;
|
background: #4e729a;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 7px;
|
width: 5px;
|
||||||
height: 60px;
|
height: calc((var(--menuSize) / 3) * 2);
|
||||||
left: 0px;
|
left: 0px;
|
||||||
top: 90px;
|
top: calc(var(--menuSize) - (((var(--menuSize) / 3) * 2) / 2));
|
||||||
border-top-right-radius: 7px;
|
border-top-right-radius: 7px;
|
||||||
border-bottom-right-radius: 7px;
|
border-bottom-right-radius: 7px;
|
||||||
transition: all 0.1s;
|
transition: all 0.1s;
|
||||||
@ -110,8 +108,7 @@ export class DeapMainmenu extends DeesElement {
|
|||||||
this.updateTab(tabArg);
|
this.updateTab(tabArg);
|
||||||
}}"
|
}}"
|
||||||
>
|
>
|
||||||
<dees-icon iconFA="${tabArg.iconName}"></dees-icon>
|
<dees-icon iconFA="${tabArg.iconName as any}"></dees-icon>
|
||||||
<div class="label">${tabArg.key}</div>
|
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
})}
|
})}
|
||||||
@ -130,7 +127,9 @@ export class DeapMainmenu extends DeesElement {
|
|||||||
`.tabsContainer .tab:nth-child(${tabIndex + 1})`
|
`.tabsContainer .tab:nth-child(${tabIndex + 1})`
|
||||||
);
|
);
|
||||||
const tabIndicator: HTMLElement = this.shadowRoot.querySelector('.tabIndicator');
|
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) {
|
updateTab(tabArg: interfaces.ITab) {
|
||||||
|
@ -8,7 +8,7 @@ import {
|
|||||||
html,
|
html,
|
||||||
css,
|
css,
|
||||||
cssManager,
|
cssManager,
|
||||||
} from '@designestate/dees-element';
|
} from '@design.estate/dees-element';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* the property selector menu
|
* the property selector menu
|
||||||
@ -43,7 +43,8 @@ export class DeapMainselector extends DeesElement {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: #3c3c3c;
|
background: #000000;
|
||||||
|
border-right: 1px solid #222222;
|
||||||
}
|
}
|
||||||
.maincontainer {
|
.maincontainer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -55,27 +56,27 @@ export class DeapMainselector extends DeesElement {
|
|||||||
|
|
||||||
.topbar {
|
.topbar {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 80px;
|
height: 32px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
background: #333333;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.topbar .heading {
|
.topbar .heading {
|
||||||
padding-left: 20px;
|
padding-left: 16px;
|
||||||
line-height: 80px;
|
padding-top: 8px;
|
||||||
font-family: Inter;
|
line-height: 24px;
|
||||||
|
font-family: 'Hubot Sans', sans-serif;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 16px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.selectionOptions {
|
.selectionOptions {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 80px;
|
top: 32px;
|
||||||
|
padding-top: 8px;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-family: Roboto Mono;
|
font-family: 'Mona Sans', sans-serif;
|
||||||
font-size: 16px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.selectionOptions .selectionOption {
|
.selectionOptions .selectionOption {
|
||||||
@ -83,11 +84,10 @@ export class DeapMainselector extends DeesElement {
|
|||||||
margin-right: 16px;
|
margin-right: 16px;
|
||||||
padding-top: 8px;
|
padding-top: 8px;
|
||||||
padding-bottom: 8px;
|
padding-bottom: 8px;
|
||||||
border-top: 1px solid #707070;
|
border-top: 1px dotted #303030;
|
||||||
border-left: 0px solid rgba(0,0,0,0);
|
border-left: 0px solid rgba(0,0,0,0);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.1s;
|
transition: all 0.1s;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.selectionOptions .selectionOption:hover {
|
.selectionOptions .selectionOption:hover {
|
||||||
@ -95,19 +95,14 @@ export class DeapMainselector extends DeesElement {
|
|||||||
padding-left: 8px;
|
padding-left: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.selectionOptions .selectionOption:first-child {
|
||||||
|
border-top: 1px solid rgba(0,0,0,0);
|
||||||
|
}
|
||||||
|
|
||||||
.selectionOptions .selectionOption.selectedOption {
|
.selectionOptions .selectionOption.selectedOption {
|
||||||
border-left: 4px solid #26A69A;
|
border-left: 4px solid #26A69A;
|
||||||
padding-left: 10px;
|
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