initial
This commit is contained in:
commit
cebae44ff5
20
.gitignore
vendored
Normal file
20
.gitignore
vendored
Normal file
@ -0,0 +1,20 @@
|
||||
.nogit/
|
||||
|
||||
# artifacts
|
||||
coverage/
|
||||
public/
|
||||
pages/
|
||||
|
||||
# installs
|
||||
node_modules/
|
||||
|
||||
# caches
|
||||
.yarn/
|
||||
.cache/
|
||||
.rpt2_cache
|
||||
|
||||
# builds
|
||||
dist/
|
||||
dist_*/
|
||||
|
||||
# custom
|
||||
11
.vscode/launch.json
vendored
Normal file
11
.vscode/launch.json
vendored
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"command": "npm test",
|
||||
"name": "Run npm test",
|
||||
"request": "launch",
|
||||
"type": "node-terminal"
|
||||
}
|
||||
]
|
||||
}
|
||||
26
.vscode/settings.json
vendored
Normal file
26
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,26 @@
|
||||
{
|
||||
"json.schemas": [
|
||||
{
|
||||
"fileMatch": ["/npmextra.json"],
|
||||
"schema": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"npmci": {
|
||||
"type": "object",
|
||||
"description": "settings for npmci"
|
||||
},
|
||||
"gitzone": {
|
||||
"type": "object",
|
||||
"description": "settings for gitzone",
|
||||
"properties": {
|
||||
"projectType": {
|
||||
"type": "string",
|
||||
"enum": ["website", "element", "service", "npm", "wcc"]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
62
changelog.md
Normal file
62
changelog.md
Normal file
@ -0,0 +1,62 @@
|
||||
# Changelog
|
||||
|
||||
## 2024-12-27 - 1.0.93 - fix(core)
|
||||
Fix package naming inconsistencies in the project
|
||||
|
||||
- Updated package name from '@social.io_private/catalog' to '@social.io/catalog' in package.json
|
||||
- Updated dependency from '@social.io_private/interfaces' to '@social.io/interfaces' in package.json
|
||||
- Updated import statement from '@social.io_private/interfaces' to '@social.io/interfaces' in sio-subwidget-conversations.ts
|
||||
|
||||
## 2024-10-09 - 1.0.92 - fix(build)
|
||||
Correct build command and module type configuration in package.json and tsconfig.json.
|
||||
|
||||
- Corrected the build command in package.json to use 'tsfolders'.
|
||||
- Updated 'module' and 'moduleResolution' types in tsconfig.json to 'NodeNext'.
|
||||
|
||||
## 2024-10-09 - 1.0.91 - fix(elements)
|
||||
Style and dependency adjustments in elements
|
||||
|
||||
- Updated styles for better UI consistency and appearance in elements: sio-combox, sio-fab, sio-subwidget-onboardme, sio-subwidget-conversations.
|
||||
- Dependency versions updated in package.json.
|
||||
- Removed .gitlab-ci.yml file.
|
||||
|
||||
## 2023-08-27 - 1.0.89 to 1.0.90 - core updates
|
||||
Incremental updates with core fixes.
|
||||
|
||||
- Version 1.0.89: fix(core): update
|
||||
- Version 1.0.90: No significant changes
|
||||
|
||||
## 2023-01-07 to 2023-01-11 - 1.0.84 to 1.0.89 - core updates
|
||||
Continuous core fixes and updates over releases.
|
||||
|
||||
- Version 1.0.84: fix(core): update
|
||||
- Version 1.0.85: fix(core): update
|
||||
- Version 1.0.86: fix(core): update
|
||||
- Version 1.0.87: fix(core): update
|
||||
- Version 1.0.88: fix(core): update
|
||||
- Version 1.0.89: No significant changes
|
||||
|
||||
## 2022-05-09 to 2022-05-24 - 1.0.75 to 1.0.82 - core updates
|
||||
Progressive upgrades with core fixes.
|
||||
|
||||
- Version 1.0.75: fix(core): update
|
||||
- Version 1.0.76: fix(core): update
|
||||
- Version 1.0.77: fix(core): update
|
||||
- Version 1.0.78: fix(core): update
|
||||
- Version 1.0.79: fix(core): update
|
||||
- Version 1.0.80: fix(core): update
|
||||
- Version 1.0.81: fix(core): update
|
||||
- Version 1.0.82: fix(core): update
|
||||
|
||||
## 2022-03-24 to 2022-04-25 - 1.0.72 to 1.0.74 - core updates
|
||||
Minor updates focusing on core functionalities.
|
||||
|
||||
- Version 1.0.72: fix(core): update
|
||||
- Version 1.0.73: fix(core): update
|
||||
- Version 1.0.74: fix(core): update
|
||||
|
||||
## 2020-08-05 to 2020-12-10 - 1.0.55 to 1.0.71 - core updates
|
||||
Regular maintenance with core fixes to enhance stability.
|
||||
|
||||
- Version 1.0.55 to 1.0.71: Multiple core updates and fixes
|
||||
- Versions include: 1.0.55, 1.0.56, 1.0.57, 1.0.58, 1.0.59, 1.0.60, 1.0.61, 1.0.62, 1.0.63, 1.0.64, 1.0.65, 1.0.66, 1.0.67, 1.0.68, 1.0.69, 1.0.70, 1.0.71
|
||||
28
html/index.html
Normal file
28
html/index.html
Normal file
@ -0,0 +1,28 @@
|
||||
<!--gitzone element-->
|
||||
<!-- made by Task Venture Capital GmbH -->
|
||||
<!-- checkout https://maintainedby.lossless.com for awesome OpenSource projects -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--Lets set some basic meta tags-->
|
||||
<meta
|
||||
name="viewport"
|
||||
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"
|
||||
/>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
|
||||
<!--Lets load standard fonts-->
|
||||
<link rel="preconnect" href="https://assetbroker.lossless.one/" crossorigin>
|
||||
<link rel="stylesheet" href="https://assetbroker.lossless.one/fonts/fonts.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0px;
|
||||
background: #222222;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="module" src="/bundle.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
10
html/index.ts
Normal file
10
html/index.ts
Normal file
@ -0,0 +1,10 @@
|
||||
// dees tools
|
||||
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';
|
||||
import * as pages from '../ts_web/pages/index.js';
|
||||
|
||||
deesWccTools.setupWccTools(elements as any, pages);
|
||||
deesDomTools.elementBasic.setup();
|
||||
19
license
Normal file
19
license
Normal file
@ -0,0 +1,19 @@
|
||||
Copyright (c) 2020 Lossless GmbH (hello@lossless.com)
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
19
npmextra.json
Normal file
19
npmextra.json
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"gitzone": {
|
||||
"projectType": "wcc",
|
||||
"module": {
|
||||
"githost": "gitlab.com",
|
||||
"gitscope": "social.io/private",
|
||||
"gitrepo": "catalog",
|
||||
"description": "the element catalog for the lossless organization",
|
||||
"npmPackagename": "@social.io_private/catalog",
|
||||
"license": "UNLICENSED",
|
||||
"projectDomain": "social.io"
|
||||
}
|
||||
},
|
||||
"npmci": {
|
||||
"npmRegistryUrl": "verdaccio.lossless.one",
|
||||
"npmGlobalTools": [],
|
||||
"npmAccessLevel": "private"
|
||||
}
|
||||
}
|
||||
51
package.json
Normal file
51
package.json
Normal file
@ -0,0 +1,51 @@
|
||||
{
|
||||
"name": "@social.io/catalog",
|
||||
"version": "1.0.93",
|
||||
"private": false,
|
||||
"description": "catalog for social.io",
|
||||
"main": "dist_ts_web/index.js",
|
||||
"typings": "dist_ts_web/index.d.ts",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"test": "tstest test/",
|
||||
"build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production",
|
||||
"watch": "tswatch element",
|
||||
"buildDocs": "tsdoc"
|
||||
},
|
||||
"author": "Lossless GmbH",
|
||||
"license": "UNLICENSED",
|
||||
"dependencies": {
|
||||
"@design.estate/dees-catalog": "^1.2.0",
|
||||
"@design.estate/dees-domtools": "^2.0.64",
|
||||
"@design.estate/dees-element": "^2.0.39",
|
||||
"@design.estate/dees-wcctools": "^1.0.90",
|
||||
"@losslessone_private/loint-pubapi": "^1.0.14",
|
||||
"@social.io/interfaces": "^1.0.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@git.zone/tsbuild": "^2.1.84",
|
||||
"@git.zone/tsbundle": "^2.0.15",
|
||||
"@git.zone/tsrun": "^1.2.49",
|
||||
"@git.zone/tstest": "^1.0.90",
|
||||
"@git.zone/tswatch": "^2.0.23",
|
||||
"@push.rocks/projectinfo": "^5.0.2",
|
||||
"@push.rocks/smartenv": "^5.0.12",
|
||||
"@push.rocks/tapbundle": "^5.3.0",
|
||||
"@types/node": "^22.7.5"
|
||||
},
|
||||
"files": [
|
||||
"ts/**/*",
|
||||
"ts_web/**/*",
|
||||
"dist/**/*",
|
||||
"dist_*/**/*",
|
||||
"dist_ts/**/*",
|
||||
"dist_ts_web/**/*",
|
||||
"assets/**/*",
|
||||
"cli.js",
|
||||
"npmextra.json",
|
||||
"readme.md"
|
||||
],
|
||||
"browserslist": [
|
||||
"last 1 Chrome versions"
|
||||
]
|
||||
}
|
||||
7593
pnpm-lock.yaml
generated
Normal file
7593
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
0
readme.hints.md
Normal file
0
readme.hints.md
Normal file
31
readme.md
Normal file
31
readme.md
Normal file
@ -0,0 +1,31 @@
|
||||
# @social.io/private/catalog
|
||||
the element catalog for the lossless organization
|
||||
|
||||
## Availabililty and Links
|
||||
* [npmjs.org (npm package)](https://www.npmjs.com/package/@social.io_private/catalog)
|
||||
* [gitlab.com (source)](https://gitlab.com/social.io/private/catalog)
|
||||
* [github.com (source mirror)](https://github.com/social.io/private/catalog)
|
||||
* [docs (typedoc)](https://social.io/private.gitlab.io/catalog/)
|
||||
|
||||
## Status for master
|
||||
|
||||
Status Category | Status Badge
|
||||
-- | --
|
||||
GitLab Pipelines | [](https://lossless.cloud)
|
||||
GitLab Pipline Test Coverage | [](https://lossless.cloud)
|
||||
npm | [](https://lossless.cloud)
|
||||
Snyk | [](https://lossless.cloud)
|
||||
TypeScript Support | [](https://lossless.cloud)
|
||||
node Support | [](https://nodejs.org/dist/latest-v10.x/docs/api/)
|
||||
Code Style | [](https://lossless.cloud)
|
||||
PackagePhobia (total standalone install weight) | [](https://lossless.cloud)
|
||||
PackagePhobia (package size on registry) | [](https://lossless.cloud)
|
||||
BundlePhobia (total size when bundled) | [](https://lossless.cloud)
|
||||
|
||||
## Usage
|
||||
|
||||
For further information read the linked docs at the top of this readme.
|
||||
|
||||
## Legal
|
||||
> UNLICENSED licensed | **©** [Task Venture Capital GmbH](https://task.vc)
|
||||
| By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy)
|
||||
9
test/test.browser.ts
Normal file
9
test/test.browser.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import { expect, expectAsync, tap, webhelpers } from '@push.rocks/tapbundle';
|
||||
|
||||
import * as socialioCatalog from '../ts_web/index.js';
|
||||
|
||||
tap.test('', async () => {
|
||||
const sioFab: socialioCatalog.SioFab = webhelpers.fixture(webhelpers.html`<sio-fab></sio-fab>`);
|
||||
});
|
||||
|
||||
tap.start();
|
||||
8
ts_web/00_commitinfo_data.ts
Normal file
8
ts_web/00_commitinfo_data.ts
Normal file
@ -0,0 +1,8 @@
|
||||
/**
|
||||
* autocreated commitinfo by @push.rocks/commitinfo
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@social.io/catalog',
|
||||
version: '1.0.93',
|
||||
description: 'catalog for social.io'
|
||||
}
|
||||
4
ts_web/elements/index.ts
Normal file
4
ts_web/elements/index.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export * from './sio-fab.js';
|
||||
export * from './sio-combox.js';
|
||||
export * from './sio-subwidget-onboardme.js';
|
||||
export * from './sio-subwidget-conversations.js';
|
||||
199
ts_web/elements/sio-combox.ts
Normal file
199
ts_web/elements/sio-combox.ts
Normal file
@ -0,0 +1,199 @@
|
||||
import {
|
||||
DeesElement,
|
||||
property,
|
||||
html,
|
||||
customElement,
|
||||
type TemplateResult,
|
||||
} from '@design.estate/dees-element';
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
|
||||
import * as deesCatalog from '@design.estate/dees-catalog';
|
||||
deesCatalog;
|
||||
|
||||
@customElement('sio-combox')
|
||||
export class SioCombox extends DeesElement {
|
||||
public static demo = () => html` <sio-combox></sio-combox> `;
|
||||
|
||||
@property({ type: Object })
|
||||
public referenceObject: HTMLElement;
|
||||
|
||||
/**
|
||||
* computes the button offset
|
||||
*/
|
||||
public cssComputeHeight() {
|
||||
let height = window.innerHeight < 760 ? window.innerHeight : 760;
|
||||
if (!this.referenceObject) {
|
||||
console.log('SioCombox: no reference object set');
|
||||
}
|
||||
if (this.referenceObject) {
|
||||
console.log(`referenceObject height is ${this.referenceObject.clientHeight}`);
|
||||
height = height - (this.referenceObject.clientHeight + 60);
|
||||
}
|
||||
return height;
|
||||
}
|
||||
|
||||
public cssComputeInnerScroll() {
|
||||
console.log(
|
||||
`SioCombox clientHeight: ${this.shadowRoot.querySelector('.mainbox').clientHeight}`
|
||||
);
|
||||
console.log(
|
||||
`SioCombox content scrollheight is: ${
|
||||
this.shadowRoot.querySelector('.contentbox').clientHeight
|
||||
}`
|
||||
);
|
||||
if (
|
||||
this.shadowRoot.querySelector('.mainbox').clientHeight <
|
||||
this.shadowRoot.querySelector('.contentbox').clientHeight
|
||||
) {
|
||||
(this.shadowRoot.querySelector('.mainbox') as HTMLElement).style.overflowY = 'scroll';
|
||||
} else {
|
||||
(this.shadowRoot.querySelector('.mainbox') as HTMLElement).style.overflowY = 'hidden';
|
||||
}
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
domtools.DomTools.setupDomTools();
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
${domtools.elementBasic.styles}
|
||||
<style>
|
||||
:host {
|
||||
overflow: hidden;
|
||||
font-family: 'Dees Sans';
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: ${this.cssComputeHeight()}px;
|
||||
width: 375px;
|
||||
background: ${this.goBright ? '#eeeeee' : '#000000'};
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(250, 250, 250, 0.2);
|
||||
right: 0px;
|
||||
z-index: 10000;
|
||||
box-shadow: 0px 0px 5px ${this.goBright ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.5)'};
|
||||
color: ${this.goBright ? '#333' : '#ccc'};
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.mainbox {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
overscroll-behavior: contain;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.toppanel {
|
||||
height: 200px;
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
|
||||
padding: 20px;
|
||||
--bg-color: ${this.goBright ? '#00000050' : '#ffffff30'};
|
||||
--dot-color: #ffffff00;
|
||||
--dot-size: 1px;
|
||||
--dot-space: 6px;
|
||||
|
||||
background: linear-gradient(45deg, var(--bg-color) 1px, var(--dot-color) 1px) top left;
|
||||
background-size: var(--dot-space) var(--dot-space);
|
||||
margin-bottom: -50px;
|
||||
}
|
||||
|
||||
#greeting {
|
||||
padding-top: 50px;
|
||||
font-family: 'Dees Sans';
|
||||
margin: 0px;
|
||||
font-size: 30px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
#callToAction {
|
||||
font-family: 'Dees Sans';
|
||||
margin: 0px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.quicktabs {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
bottom: 30px;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
padding-bottom: 16px;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%);
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.quicktabs .quicktab {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.quicktabs .quicktab .quicktabicon {
|
||||
font-size: 20px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.quicktabs .quicktab .quicktabtext {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.brandingbox {
|
||||
z-index: 101;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
font-size: 12px;
|
||||
padding: 8px;
|
||||
border-top: 1px solid rgba(250, 250, 250, 0.1);
|
||||
font-family: 'Dees Sans';
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
|
||||
background: ${this.goBright ? '#EEE' : '#000'};
|
||||
color: ${this.goBright ? '#333' : '#777'};
|
||||
}
|
||||
</style>
|
||||
<div class="mainbox">
|
||||
<div class="contentbox">
|
||||
<div class="toppanel">
|
||||
<div id="greeting">Hello :)</div>
|
||||
<div id="callToAction">Ask us anything or share your feedback!</div>
|
||||
</div>
|
||||
<sio-subwidget-conversations></sio-subwidget-conversations>
|
||||
<sio-subwidget-onboardme></sio-subwidget-onboardme>
|
||||
</div>
|
||||
</div>
|
||||
<div class="quicktabs">
|
||||
<div class="quicktab">
|
||||
<div class="quicktabicon">
|
||||
<dees-icon iconFA="message"></dees-icon>
|
||||
</div>
|
||||
<div class="quicktabtext">Conversations</div>
|
||||
</div>
|
||||
<div class="quicktab">
|
||||
<div class="quicktabicon">
|
||||
<dees-icon iconFA="mugHot"></dees-icon>
|
||||
</div>
|
||||
<div class="quicktabtext">Onboarding</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="brandingbox">powered by social.io</div>
|
||||
`;
|
||||
}
|
||||
|
||||
async updated() {
|
||||
this.cssComputeHeight();
|
||||
window.requestAnimationFrame(() => {
|
||||
setTimeout(() => {
|
||||
this.cssComputeInnerScroll();
|
||||
}, 200);
|
||||
});
|
||||
}
|
||||
}
|
||||
185
ts_web/elements/sio-fab.ts
Normal file
185
ts_web/elements/sio-fab.ts
Normal file
@ -0,0 +1,185 @@
|
||||
import {
|
||||
DeesElement,
|
||||
property,
|
||||
html,
|
||||
customElement,
|
||||
type TemplateResult,
|
||||
cssManager,
|
||||
css,
|
||||
} from '@design.estate/dees-element';
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
|
||||
import { SioCombox } from './sio-combox.js';
|
||||
SioCombox;
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sio-fab': SioFab;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('sio-fab')
|
||||
export class SioFab extends DeesElement {
|
||||
@property()
|
||||
public showCombox = false;
|
||||
|
||||
public static demo = () => html` <sio-fab .showCombox=${true}></sio-fab> `;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
domtools.DomTools.setupDomTools();
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
${domtools.elementBasic.styles}
|
||||
<style>
|
||||
:host {
|
||||
will-change: transform;
|
||||
position: absolute;
|
||||
display: block;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
z-index: 10000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#mainbox {
|
||||
transition: all 0.2s;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
color: #ccc;
|
||||
cursor: pointer;
|
||||
background: ${this.goBright
|
||||
? 'linear-gradient(-45deg, #eeeeeb, #eeeeeb)'
|
||||
: 'linear-gradient(-45deg, #222222, #333333)'};
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#mainbox:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
#mainbox:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
#mainbox .icon {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
will-change: transform;
|
||||
transform: ${this.showCombox ? 'rotate(0deg)' : 'rotate(-360deg)'};
|
||||
transition: all 0.2s;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
-webkit-user-drag: none;
|
||||
-khtml-user-drag: none;
|
||||
-moz-user-drag: none;
|
||||
-o-user-drag: none;
|
||||
user-drag: none;
|
||||
}
|
||||
|
||||
#mainbox .icon img {
|
||||
filter: grayscale(1) ${cssManager.bdTheme('invert(1)', '')};
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
will-change: transform;
|
||||
transform: scale(0.2, 0.2) translateY(-5px);
|
||||
}
|
||||
#mainbox .icon.open:hover img {
|
||||
filter: grayscale(0);
|
||||
}
|
||||
|
||||
#mainbox .icon.open {
|
||||
opacity: ${this.showCombox ? '0' : '1'};
|
||||
pointer-events: ${this.showCombox ? 'none' : 'all'};
|
||||
}
|
||||
|
||||
#mainbox .icon.close {
|
||||
opacity: ${this.showCombox ? '1' : '0'};
|
||||
pointer-events: ${this.showCombox ? 'all' : 'none'};
|
||||
}
|
||||
#mainbox .icon.close:hover dees-icon {
|
||||
color: ${cssManager.bdTheme('#111', '#fff')};
|
||||
}
|
||||
|
||||
#mainbox .icon.open dees-icon {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 32px;
|
||||
color: ${cssManager.bdTheme('#777', '#999')};
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
#mainbox .icon.close dees-icon {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 24px;
|
||||
color: ${cssManager.bdTheme('#666', '#CCC')};
|
||||
}
|
||||
|
||||
#comboxContainer sio-combox {
|
||||
transition: transform 0.2s, opacity 0.2s;
|
||||
will-change: transform;
|
||||
transform: translateY(20px);
|
||||
bottom: 80px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#comboxContainer.show sio-combox {
|
||||
transform: translateY(0px);
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
</style>
|
||||
<div id="mainbox" @click=${this.toggleCombox}>
|
||||
<div class="icon open">
|
||||
<dees-icon iconFA="message"></dees-icon>
|
||||
<img src="https://assetbroker.lossless.one/brandfiles/00general/favicon_socialio.svg" />
|
||||
</div>
|
||||
<div class="icon close">
|
||||
<dees-icon iconFa="xmark"></dees-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div id="comboxContainer" class="${this.showCombox ? 'show' : null}">
|
||||
<sio-combox></sio-combox>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* toggles the combox
|
||||
*/
|
||||
public async toggleCombox() {
|
||||
console.log('toggle combox');
|
||||
this.showCombox = !this.showCombox;
|
||||
}
|
||||
|
||||
public async firstUpdated(args) {
|
||||
super.firstUpdated(args);
|
||||
const domtools = await this.domtoolsPromise;
|
||||
const sioCombox: SioCombox = this.shadowRoot.querySelector('sio-combox');
|
||||
const mainBox: HTMLElement = this.shadowRoot.querySelector('#mainbox');
|
||||
sioCombox.referenceObject = mainBox;
|
||||
|
||||
domtools.keyboard
|
||||
.on([domtools.keyboard.keyEnum.Ctrl, domtools.keyboard.keyEnum.S])
|
||||
.subscribe((event) => {
|
||||
this.showCombox = !this.showCombox;
|
||||
});
|
||||
}
|
||||
}
|
||||
156
ts_web/elements/sio-subwidget-conversations.ts
Normal file
156
ts_web/elements/sio-subwidget-conversations.ts
Normal file
@ -0,0 +1,156 @@
|
||||
import { DeesElement, property, html, customElement, type TemplateResult } from '@design.estate/dees-element';
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
|
||||
import * as sioInterfaces from '@social.io/interfaces';
|
||||
|
||||
@customElement('sio-subwidget-conversations')
|
||||
export class SioSubwidgetConversations extends DeesElement {
|
||||
// STATIC
|
||||
|
||||
// INSTANCE
|
||||
public conversations: sioInterfaces.ISioConversation[] = [
|
||||
{
|
||||
subject: 'Pricing page',
|
||||
parties: [
|
||||
{
|
||||
id: '1',
|
||||
description: 'Lossless Support',
|
||||
name: 'Lossless Support',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
description: 'you',
|
||||
name: 'you',
|
||||
},
|
||||
],
|
||||
conversationBlocks: [
|
||||
{
|
||||
partyId: '1',
|
||||
text: 'Hello there :) How can we help you?',
|
||||
},
|
||||
{
|
||||
partyId: '2',
|
||||
text: 'Hi! Where is your pricing page?',
|
||||
},
|
||||
],
|
||||
},{
|
||||
subject: 'Pricing page',
|
||||
parties: [
|
||||
{
|
||||
id: '1',
|
||||
description: 'Lossless Support',
|
||||
name: 'Lossless Support',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
description: 'you',
|
||||
name: 'you',
|
||||
},
|
||||
],
|
||||
conversationBlocks: [
|
||||
{
|
||||
partyId: '1',
|
||||
text: 'Hello there :) How can we help you?',
|
||||
},
|
||||
{
|
||||
partyId: '2',
|
||||
text: 'Hi! Where is your pricing page?',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
public static demo = () => html`<sio-subwidget-conversations></sio-subwidget-conversations>`;
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
${domtools.elementBasic.styles}
|
||||
<style>
|
||||
:host {
|
||||
color: ${this.goBright ? '#666' : '#ccc'};
|
||||
font-family: 'Dees Sans';
|
||||
}
|
||||
|
||||
.conversationbox {
|
||||
padding: 20px;
|
||||
transition: all 0.1s;
|
||||
min-height: 200px;
|
||||
margin: 20px;
|
||||
background: ${this.goBright ? '#fff' : '#111111'};
|
||||
border-radius: 16px;
|
||||
border-top: 1px solid rgba(250, 250, 250, 0.1);
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.conversationbox .text {
|
||||
font-family: 'Dees Sans';
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.conversation {
|
||||
display: block;
|
||||
transition: all 0.1s;
|
||||
padding: 8px 0px 8px 0px;
|
||||
border-bottom: 1px solid;
|
||||
border-image: radial-gradient(rgba(136, 136, 136, 0.44), rgba(136, 136, 136, 0)) 1 / 1 / 0 stretch;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.conversation:last-of-type {
|
||||
border-bottom: none;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.conversation:hover {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.conversation:hover .gridcontainer {
|
||||
transform: translateX(2px)
|
||||
}
|
||||
|
||||
.conversation .gridcontainer {
|
||||
display: grid;
|
||||
grid-template-columns: 50px auto;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.conversation .gridcontainer .profilePicture {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 50px;
|
||||
background: ${this.goBright ? '#EEE' : '#222'};
|
||||
}
|
||||
|
||||
.conversation .gridcontainer .text .topLine {
|
||||
font-family: 'Dees Sans';
|
||||
padding-top: 3px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.gridcontainer .gridcontainer .text .bottomLine {
|
||||
font-family: 'Dees Sans';
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
<div class="conversationbox">
|
||||
<div class="text">Your conversations:</div>
|
||||
|
||||
${this.conversations.map((conversationArg) => {
|
||||
return html`
|
||||
<div class="conversation">
|
||||
<div class="gridcontainer">
|
||||
<div class="profilePicture"></div>
|
||||
<div class="text">
|
||||
<div class="topLine">Today at 8:01</div>
|
||||
<div class="bottomLine">${conversationArg.subject}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
<dees-button>View more</dees-button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
64
ts_web/elements/sio-subwidget-onboardme.ts
Normal file
64
ts_web/elements/sio-subwidget-onboardme.ts
Normal file
@ -0,0 +1,64 @@
|
||||
import { DeesElement, property, html, customElement, type TemplateResult } from '@design.estate/dees-element';
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
|
||||
import * as deesCatalog from '@design.estate/dees-catalog';
|
||||
deesCatalog;
|
||||
|
||||
@customElement('sio-subwidget-onboardme')
|
||||
export class SioSubwidgetOnboardme extends DeesElement {
|
||||
@property()
|
||||
public showCombox = false;
|
||||
|
||||
public static demo = () => html`
|
||||
<sio-subwidget-onboardme></sio-subwidget-onboardme>
|
||||
`;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
domtools.DomTools.setupDomTools();
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
${domtools.elementBasic.styles}
|
||||
<style>
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
position: relative;
|
||||
transition: all 0.1s;
|
||||
min-height: 200px;
|
||||
margin: 20px 20px 40px 20px;
|
||||
background: ${this.goBright ? '#fafafa' : '#111111'};
|
||||
border-radius: 16px;
|
||||
border-top: 1px solid rgba(250,250,250,0.1);
|
||||
box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
|
||||
padding: 24px 24px 32px 24px;
|
||||
color: #CCC;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:host(:hover) {
|
||||
}
|
||||
|
||||
.brandingbox {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
font-size: 10px;
|
||||
padding: 3px;
|
||||
border-top: 1px solid rgba(250,250,250, 0.1);
|
||||
font-family: 'Dees Code';
|
||||
background: ${this.goBright ? '#eee' : '#111111'};
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
Or search through our documentation
|
||||
<dees-input-text key="searchTerm" label="Search Term:"></dees-input-text>
|
||||
<dees-button>Search</dees-button>
|
||||
<div class="brandingbox">last updated: ${new Date().toISOString()}</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
1
ts_web/index.ts
Normal file
1
ts_web/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './elements/index.js';
|
||||
14
tsconfig.json
Normal file
14
tsconfig.json
Normal file
@ -0,0 +1,14 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"experimentalDecorators": true,
|
||||
"useDefineForClassFields": false,
|
||||
"target": "ES2022",
|
||||
"module": "NodeNext",
|
||||
"moduleResolution": "NodeNext",
|
||||
"esModuleInterop": true,
|
||||
"verbatimModuleSyntax": true
|
||||
},
|
||||
"exclude": [
|
||||
"dist_*/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user