social.io/catalog
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Jürgen Kunz
2025-07-14 17:44:52 +00:00
parent 193b1f5234
commit a4a3c6dc50
4 changed files with 240 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
ts_web/elements/sio-fab.ts
View File

@@ -34,6 +34,9 @@ export class SioFab extends DeesElement {
@state()
private hasShownOnce = false;
@state()
private shouldPulse = false;
public static demo = () => html` <sio-fab .showCombox=${true}></sio-fab> `;
constructor() {
@@ -53,6 +56,11 @@ export class SioFab extends DeesElement {
right: 20px;
z-index: 10000;
color: #fff;
--fab-gradient-start: #6366f1;
--fab-gradient-mid: #8b5cf6;
--fab-gradient-end: #a855f7;
--fab-gradient-hover-end: #c026d3;
--fab-shadow-color: rgba(139, 92, 246, 0.25);
}
#mainbox {
@@ -60,101 +68,130 @@ export class SioFab extends DeesElement {
position: absolute;
bottom: 0px;
right: 0px;
height: 56px;
width: 56px;
box-shadow: ${cssManager.bdTheme(shadows.md, shadows.lg)};
line-height: 56px;
height: 60px;
width: 60px;
box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.1), 0 2px 8px -2px rgba(0, 0, 0, 0.06);
line-height: 60px;
text-align: center;
cursor: pointer;
background: ${bdTheme('primary')};
color: ${bdTheme('primaryForeground')};
background: linear-gradient(135deg, var(--fab-gradient-start) 0%, var(--fab-gradient-mid) 50%, var(--fab-gradient-end) 100%);
color: white;
border-radius: ${radius.full};
user-select: none;
border: 1px solid ${bdTheme('border')};
animation: fabEntrance 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
border: none;
animation: fabEntrance 300ms cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
position: relative;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
#mainbox::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 50%);
opacity: 0;
transition: opacity 200ms ease;
}
#mainbox::after {
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
background: linear-gradient(135deg, var(--fab-gradient-start), var(--fab-gradient-end));
border-radius: inherit;
z-index: -1;
opacity: 0;
filter: blur(12px);
transition: opacity 300ms ease;
}
#mainbox:hover::before {
opacity: 1;
}
#mainbox:hover::after {
opacity: 0.3;
}
@keyframes fabEntrance {
from {
transform: scale(0) rotate(-180deg);
transform: scale(0.8);
opacity: 0;
}
to {
transform: scale(1) rotate(0deg);
transform: scale(1);
opacity: 1;
}
}
#mainbox:hover {
box-shadow: ${cssManager.bdTheme(shadows.lg, shadows.xl)};
transform: translateY(-2px) scale(1.05);
transform: scale(1.02);
background: linear-gradient(135deg, var(--fab-gradient-start) 0%, var(--fab-gradient-mid) 50%, var(--fab-gradient-hover-end) 100%);
}
#mainbox:hover {
box-shadow: 0 8px 20px -4px var(--fab-shadow-color);
}
#mainbox:active {
transform: translateY(0) scale(0.98);
box-shadow: ${cssManager.bdTheme(shadows.sm, shadows.md)};
transform: scale(0.98);
box-shadow: 0 4px 12px -2px var(--fab-shadow-color);
}
#mainbox.pulse::after {
animation: fabPulse 0.6s ease-out forwards;
}
@keyframes fabPulse {
0% {
box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4);
opacity: 1;
}
100% {
box-shadow: 0 0 0 12px rgba(139, 92, 246, 0);
opacity: 0;
}
}
#mainbox .icon {
position: absolute;
top: 0px;
left: 0px;
will-change: transform;
transform: ${this.showCombox ? 'rotate(180deg)' : 'rotate(0deg)'};
transition: transform 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
will-change: transform, opacity;
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
height: 100%;
width: 100%;
object-fit: contain;
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
display: flex;
align-items: center;
justify-content: center;
}
#mainbox .icon img {
filter: ${cssManager.bdTheme('brightness(0) invert(1)', 'brightness(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: ${cssManager.bdTheme('brightness(0) invert(1)', 'brightness(1.2)')};
}
#mainbox .icon.open {
opacity: ${this.showCombox ? '0' : '1'};
pointer-events: ${this.showCombox ? 'none' : 'all'};
transform: ${this.showCombox ? 'rotate(45deg) scale(0.9)' : 'rotate(0deg) scale(1)'};
}
#mainbox .icon.close {
opacity: ${this.showCombox ? '1' : '0'};
pointer-events: ${this.showCombox ? 'all' : 'none'};
}
#mainbox .icon.close:hover sio-icon {
color: ${bdTheme('primaryForeground')};
transform: ${this.showCombox ? 'rotate(0deg) scale(1)' : 'rotate(-45deg) scale(0.9)'};
}
#mainbox .icon.open sio-icon {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: ${bdTheme('primaryForeground')};
#mainbox .icon sio-icon {
color: white;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}
#mainbox .icon.close sio-icon {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: ${bdTheme('primaryForeground')};
transform: scale(1);
}
#comboxContainer {
@@ -166,7 +203,7 @@ export class SioFab extends DeesElement {
#comboxContainer sio-combox {
position: absolute;
bottom: calc(56px + ${spacing["4"]});
bottom: calc(60px + ${spacing["4"]});
right: 0;
transition: ${transitions.all};
will-change: transform;
@@ -185,10 +222,13 @@ export class SioFab extends DeesElement {
pointer-events: all;
}
</style>
<div id="mainbox" @click=${this.toggleCombox}>
<div id="mainbox"
class="${this.shouldPulse ? 'pulse' : ''}"
@click=${this.toggleCombox}
@animationend=${() => { this.shouldPulse = false; }}
>
<div class="icon open">
<sio-icon icon="message-square" size="28"></sio-icon>
<img src="https://assetbroker.lossless.one/brandfiles/00general/favicon_socialio.svg" />
</div>
<div class="icon close">
<sio-icon icon="x" size="22"></sio-icon>
@@ -207,13 +247,17 @@ export class SioFab extends DeesElement {
*/
public async toggleCombox() {
console.log('toggle combox');
const wasOpen = this.showCombox;
this.showCombox = !this.showCombox;
if (this.showCombox) {
this.hasShownOnce = true;
if (!wasOpen) {
this.shouldPulse = true;
}
}
}
public async firstUpdated(args) {
public async firstUpdated(args: any) {
super.firstUpdated(args);
const domtools = await this.domtoolsPromise;
const sioCombox: SioCombox = this.shadowRoot.querySelector('sio-combox');
@@ -222,7 +266,7 @@ export class SioFab extends DeesElement {
domtools.keyboard
.on([domtools.keyboard.keyEnum.Ctrl, domtools.keyboard.keyEnum.S])
.subscribe((event) => {
.subscribe(() => {
this.toggleCombox();
});
}