fix(webwidget): Fix style issues for UptimelinkWebwidget element.
This commit is contained in:
parent
e75b1d50cf
commit
06bde76424
@ -1,5 +1,12 @@
|
||||
# Changelog
|
||||
|
||||
## 2025-01-09 - 1.2.3 - fix(webwidget)
|
||||
Fix style issues for UptimelinkWebwidget element.
|
||||
|
||||
- Resolved indentation and formatting issues in UptimelinkWebwidget component.
|
||||
- Ensured proper use of cssManager for theming.
|
||||
- Fixed event handling for expanded view toggle.
|
||||
|
||||
## 2025-01-09 - 1.2.2 - fix(component)
|
||||
Fix sizing of status indicator in uptimelink-webwidget
|
||||
|
||||
|
||||
@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@uptime.link/webwidget',
|
||||
version: '1.2.2',
|
||||
version: '1.2.3',
|
||||
description: 'The web widget for public use of uptimelink, allowing users to monitor uptime status through a user-friendly interface.'
|
||||
}
|
||||
|
||||
@ -1,4 +1,12 @@
|
||||
import { DeesElement, property, html, customElement, type TemplateResult, cssManager } from '@design.estate/dees-element';
|
||||
import {
|
||||
DeesElement,
|
||||
property,
|
||||
html,
|
||||
customElement,
|
||||
type TemplateResult,
|
||||
cssManager,
|
||||
css,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import { DeesWindowLayer } from '@design.estate/dees-catalog';
|
||||
|
||||
@ -16,7 +24,7 @@ export class UptimelinkWebwidget extends DeesElement {
|
||||
|
||||
@property({
|
||||
type: Boolean,
|
||||
reflect: true
|
||||
reflect: true,
|
||||
})
|
||||
isOnTop = false;
|
||||
|
||||
@ -31,7 +39,7 @@ export class UptimelinkWebwidget extends DeesElement {
|
||||
|
||||
@property({
|
||||
type: Boolean,
|
||||
reflect: true
|
||||
reflect: true,
|
||||
})
|
||||
public showExpanded: boolean = false;
|
||||
|
||||
@ -44,145 +52,149 @@ export class UptimelinkWebwidget extends DeesElement {
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
]
|
||||
css`
|
||||
:host {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 30px;
|
||||
}
|
||||
.mainbox {
|
||||
position: relative;
|
||||
line-height: 1em;
|
||||
margin: auto;
|
||||
font-family: Roboto;
|
||||
font-weight: 540;
|
||||
font-size: 12px;
|
||||
box-sizing: border-box;
|
||||
width: 150px;
|
||||
border-radius: 15px;
|
||||
height: 30px;
|
||||
background: ${cssManager.bdTheme('#ffffff', '#000000')};
|
||||
box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0,0,0,0.1)', '')};
|
||||
border: 1px solid ${cssManager.bdTheme('#ffffff', '#333333')};
|
||||
padding: 4px;
|
||||
color: ${cssManager.bdTheme('#333', '#CCC')};
|
||||
cursor: pointer;
|
||||
transition: all 0.2s, background 0.1s;
|
||||
overflow: hidden;
|
||||
will-change: transform;
|
||||
opacity: 1;
|
||||
}
|
||||
.mainbox.hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.firstLine {
|
||||
display: grid;
|
||||
grid-template-columns: 26px auto;
|
||||
}
|
||||
|
||||
.mainbox.focused {
|
||||
width: 182px;
|
||||
height: 117px;
|
||||
transform: translateX(-16px);
|
||||
background: ${cssManager.bdTheme('#ffffff', '#222222')} !important;
|
||||
box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0,0,0,0.1)', '')} !important;
|
||||
}
|
||||
|
||||
.statusindicator {
|
||||
transform: translate(4px, 4px);
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
background: #66bb6a;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.statustext {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.expanded {
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s;
|
||||
}
|
||||
|
||||
.miniHeading {
|
||||
position: absolute;
|
||||
width: 190px;
|
||||
top: 25px;
|
||||
left: 5px;
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.miniOverview24h {
|
||||
position: absolute;
|
||||
top: 55px;
|
||||
left: 5px;
|
||||
background: ${cssManager.bdTheme('rgba(0,0,0,0.07)', 'rgba(255,255,255,0.07)')};
|
||||
border-radius: 3px;
|
||||
width: 172px;
|
||||
height: 30px;
|
||||
display: grid;
|
||||
padding: 3px 3px;
|
||||
grid-template-columns: repeat(30, 4px);
|
||||
grid-column-gap: 3px;
|
||||
}
|
||||
|
||||
.miniOverview24h .statusBar {
|
||||
background: ${cssManager.bdTheme('rgba(0,0,0,0.15)', 'rgba(255,255,255,0.15)')};
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.miniOverview24h .statusBar.ok {
|
||||
background: #66bb6a;
|
||||
}
|
||||
|
||||
.viewStatuspage {
|
||||
position: absolute;
|
||||
width: 172px;
|
||||
top: 80px;
|
||||
left: 5px;
|
||||
text-align: center;
|
||||
background: ${cssManager.bdTheme('rgba(0,0,0,0.07)', 'rgba(255,255,255,0.07)')};
|
||||
border-radius: 3px 3px 10px 10px;
|
||||
padding: 5px;
|
||||
margin-top: 10px;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.viewStatuspage:hover {
|
||||
background: ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(255,255,255,0.1)')};
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<style>
|
||||
:host {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 30px;
|
||||
z-index: ${this.isElevated || this.isOnTop ? '1000' : 'auto'} ;
|
||||
}
|
||||
.mainbox {
|
||||
position: relative;
|
||||
line-height: 1em;
|
||||
margin: auto;
|
||||
font-family: Roboto;
|
||||
font-weight: 540;
|
||||
font-size: 12px;
|
||||
box-sizing: border-box;
|
||||
width: 150px;
|
||||
border-radius: 15px;
|
||||
height: 30px;
|
||||
background: ${this.goBright ? '#ffffff00' : '#22222200' };
|
||||
box-shadow: ${this.goBright ? '0px 0px 5px rgba(0,0,0,0.1)' : ''};
|
||||
border: 1px solid ${this.goBright ? '#22222220' : '#ffffff20' };
|
||||
padding: 4px;
|
||||
color: ${this.goBright ? '#333' : '#CCC' };
|
||||
cursor: pointer;
|
||||
transition: all 0.2s, background 0.1s;
|
||||
overflow: hidden;
|
||||
will-change: transform;
|
||||
opacity: 1;
|
||||
}
|
||||
.mainbox.hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.firstLine {
|
||||
display: grid;
|
||||
grid-template-columns: 26px auto;
|
||||
}
|
||||
|
||||
.mainbox.focused {
|
||||
width: 182px;
|
||||
height: 117px;
|
||||
transform: translateX(-16px);
|
||||
background: ${this.goBright ? '#ffffff' : '#222222' } !important;
|
||||
box-shadow: ${this.goBright ? '0px 0px 5px rgba(0,0,0,0.1)' : ''} !important;
|
||||
}
|
||||
|
||||
.statusindicator {
|
||||
transform: translate(4px, 4px);
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
background: #66BB6A;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.statustext {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.expanded {
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s;
|
||||
}
|
||||
|
||||
.miniHeading {
|
||||
position: absolute;
|
||||
width: 190px;
|
||||
top: 25px;
|
||||
left: 5px;
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.miniOverview24h {
|
||||
position: absolute;
|
||||
top: 55px;
|
||||
left: 5px;
|
||||
background: ${this.goBright ? 'rgba(0,0,0,0.07)' : 'rgba(255,255,255,0.07)'};
|
||||
border-radius: 3px;
|
||||
width: 172px;
|
||||
height: 30px;
|
||||
display: grid;
|
||||
padding: 3px 3px;
|
||||
grid-template-columns: repeat(30, 4px);
|
||||
grid-column-gap: 3px;
|
||||
}
|
||||
|
||||
.miniOverview24h .statusBar {
|
||||
background: ${this.goBright ? 'rgba(0,0,0,0.15)' : 'rgba(255,255,255,0.15)'};
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.miniOverview24h .statusBar.ok {
|
||||
background: #66BB6A;
|
||||
}
|
||||
|
||||
.viewStatuspage {
|
||||
position: absolute;
|
||||
width: 172px;
|
||||
top: 80px;
|
||||
left: 5px;
|
||||
text-align: center;
|
||||
background: ${this.goBright ? 'rgba(0,0,0,0.07)' : 'rgba(255,255,255,0.07)'};
|
||||
border-radius: 3px 3px 10px 10px;
|
||||
padding: 5px;
|
||||
margin-top: 10px;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.viewStatuspage:hover {
|
||||
background: ${this.goBright ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.1)'};
|
||||
}
|
||||
:host {
|
||||
z-index: ${this.isElevated || this.isOnTop ? '1000' : 'auto'};
|
||||
}
|
||||
</style>
|
||||
<div class="mainbox ${this.isFocused ? 'focused' : null}">
|
||||
<div class="firstLine">
|
||||
<div class="statusindicator"></div>
|
||||
<div class="statustext">All systems are up!</div>
|
||||
</div>
|
||||
${this.showExpanded ? html`
|
||||
<div class="expanded">
|
||||
<div class="miniHeading">
|
||||
last 24 hours:
|
||||
</div>
|
||||
<div class="miniOverview24h">
|
||||
${(() => {
|
||||
let counter = 0;
|
||||
const returnArray = [];
|
||||
while(counter < 24) {
|
||||
returnArray.push(html`<div class="statusBar ok"></div>`)
|
||||
counter++;
|
||||
};
|
||||
return returnArray;
|
||||
})()}
|
||||
</div>
|
||||
<div class="viewStatuspage">View full Statuspage ...</div>
|
||||
</div>
|
||||
` : null}
|
||||
${this.showExpanded
|
||||
? html`
|
||||
<div class="expanded">
|
||||
<div class="miniHeading">last 24 hours:</div>
|
||||
<div class="miniOverview24h">
|
||||
${(() => {
|
||||
let counter = 0;
|
||||
const returnArray = [];
|
||||
while (counter < 24) {
|
||||
returnArray.push(html`<div class="statusBar ok"></div>`);
|
||||
counter++;
|
||||
}
|
||||
return returnArray;
|
||||
})()}
|
||||
</div>
|
||||
<div class="viewStatuspage">View full Statuspage ...</div>
|
||||
</div>
|
||||
`
|
||||
: null}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
@ -226,11 +238,10 @@ export class UptimelinkWebwidget extends DeesElement {
|
||||
return;
|
||||
}
|
||||
this.windowLayer.destroy();
|
||||
domtools.convenience.smartdelay.delayFor(200).then(async() => {
|
||||
this.parentWebwidget.shadowRoot.querySelector('.mainbox').classList.remove('hidden');
|
||||
domtools.convenience.smartdelay.delayFor(200).then(async () => {
|
||||
if (!this.isFocused) {
|
||||
this.isElevated = false;
|
||||
this.parentWebwidget.shadowRoot.querySelector('.mainbox').classList.remove('hidden');
|
||||
await domtools.convenience.smartdelay.delayFor(100);
|
||||
this.remove();
|
||||
}
|
||||
});
|
||||
@ -241,6 +252,6 @@ export class UptimelinkWebwidget extends DeesElement {
|
||||
this.showExpanded = false;
|
||||
await domtools.convenience.smartdelay.delayFor(50);
|
||||
this.isFocused = false;
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user