initial
This commit is contained in:
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>
|
||||
`;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user