salfter/ESP3D-WEBUI
1
0
Fork 0
mirror of https://github.com/luc-github/ESP3D-WEBUI.git synced 2025-10-31 11:56:46 -07:00
Code Issues Packages Projects Releases Wiki Activity

Remove some style and use class instead

Browse Source 
Fix typo in Validation general for shortkey that use wrong references
Add error message when extension cannot be loaded in panel or page
Fix typo in modal extension
This commit is contained in:
Luc
2024-06-21 15:06:04 +08:00
parent 8a34a8e0f5
commit bd5b4474ed
31 changed files with 180 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
extensions_samples/modal.html
View File

@@ -129,7 +129,7 @@
target: "webui",
id: "modalpanel",
content: {
title: "This is tile",
title: "This is title",
id: MODAL_ID_SIMPLE,
style: "default",
bt1Txt: "S126",
@@ -225,4 +225,4 @@
</button>
<div class="container m-2" id="output"></div>
</div>
</div>

9
src/areas/connection.js
View File

@@ -171,7 +171,7 @@ const ConnectionContainer = () => {
")"
contentTitle = T("S35") //"restarting";
contentIcon = (
<div class="d-inline-block" style="padding:0 20px">
<div class="d-inline-block content-icon">
<Loading large />
</div>
)
@@ -205,7 +205,7 @@ const ConnectionContainer = () => {
contentTitle = T("S2") //"Connecting";
}
contentIcon = (
<div class="d-inline-block" style="padding:0 20px">
<div class="d-inline-block content-icon">
<Loading large />
</div>
)
@@ -216,10 +216,7 @@ const ConnectionContainer = () => {
<div class="empty fullscreen">
<div class="centered text-primary">
<div class="empty-icon">
<div
class="d-flex p-centered"
style="flex-wrap:nowrap!important"
>
<div class="d-flex p-centered empty-content">
<AppLogo />
<Minus size="50px" class="hide-low" />
{contentIcon}

13
src/components/Controls/ButtonImg.js
View File

@@ -38,19 +38,12 @@ const ButtonImg = ({
if (!icon) showlow = true
return (
<Button
class={` ${icon ? "feather-icon-container" : ""} ${
className ? className : ""
}`}
class={` ${icon ? "feather-icon-container" : ""} ${nomin ? "" : "icon-button"} text-straight ${className ? className : ""} ${disabled ? "insensitive" : ""}`}
{...rest}
disabled={disabled}
style={
`${
(nomin ? style : "min-width:2rem;" + style) +
";display:inline-block;white-space: nowrap;"
}` + `${disabled ? "pointer;pointer-events: none;" : ""}`
}
style={style}
>
<div style="overflow:hidden!important;white-space: nowrap;text-overflow:ellipsis!important;cursor: pointer;pointer-events: none;">
<div class="insensitive text-straight">
{iconRight ? "" : icon}
{label && (
<label

7
src/components/Controls/Fields/Input.js
View File

@@ -59,11 +59,10 @@ const Reveal = ({ applyTo }) => {
{reveal ? (
<EyeOff
size="1rem"
class="has-error"
style="margin-top:0.15rem"
class="has-error icon-reveal"
/>
) : (
<Eye size="1rem" class="has-error" style="margin-top:0.15rem" />
<Eye size="1rem" class="has-error icon-reveal" />
)}
</div>
)
@@ -77,7 +76,7 @@ const ClearText = ({ setValue }) => {
useEffect(() => {}, [])
return (
<div class="form-icon clearShortkey" onCLick={clickClear}>
<XCircle size="1rem" style="margin-top:0.15rem" />
<XCircle size="1rem" class="icon-clear" />
</div>
)
}

2
src/components/Controls/Progress.js
View File

@@ -59,7 +59,7 @@ const Progress = ({ progressBar, max = 100, precision = -1 }) => {
return (
<center>
<progress ref={progressValue} value="0" max="100" />
<label style="margin-left:15px" ref={progressValueDisplay}></label>
<label class="progress-value-label" ref={progressValueDisplay}></label>
</center>
)
}

54
src/components/ExtraContent/index.js
View File

@@ -23,7 +23,12 @@ import { espHttpURL } from "../Helpers"
import { useUiContextFn } from "../../contexts"
import { useHttpFn } from "../../hooks"
import { Play, Pause, Aperture, RefreshCcw } from "preact-feather"
import { ButtonImg, FullScreenButton, CloseButton, ContainerHelper } from "../Controls"
import {
ButtonImg,
FullScreenButton,
CloseButton,
ContainerHelper,
} from "../Controls"
import { T } from "../Translations"
import { iconsFeather } from "../Images"
import { iconsTarget } from "../../targets"
@@ -51,17 +56,20 @@ const ExtraContent = ({
const iconsList = { ...iconsTarget, ...iconsFeather }
useEffect(() => {
const handleFullScreenChange = () => {
setIsFullScreen(document.fullscreenElement !== null);
};
document.addEventListener('fullscreenchange', handleFullScreenChange);
setIsFullScreen(document.fullscreenElement !== null)
}
document.addEventListener("fullscreenchange", handleFullScreenChange)
return () => {
document.removeEventListener('fullscreenchange', handleFullScreenChange);
};
}, []);
document.removeEventListener(
"fullscreenchange",
handleFullScreenChange
)
}
}, [])
const loadContent = (init = false) => {
if (!init && refreshPausedList[id] ) {
if (!init && refreshPausedList[id]) {
return
}
if (pageSource.startsWith("http")) {
@@ -158,8 +166,13 @@ const ExtraContent = ({
}
},
onFail: (error) => {
//TODO:Need to do something ? TBD
console.log("Error", error)
const errorContent =
"<div style='display: flex; justify-content: center; align-items: center; height: 100%; font-family: Arial, sans-serif;'><p>" +
T("S222") +
pageSource +
"</p></div>"
element.current.contentWindow.document.body.innerHTML =
errorContent
},
}
)
@@ -275,13 +288,15 @@ const ExtraContent = ({
/>
)
default:
const handleIframeError = () => {
console.log("Error loading iframe")
}
return (
<iframe
style="z-index:0!important"
class={
type == "extension"
? "extensionContainer d-none"
: "content-container d-block"
? "extensionContainer d-block iframe-container"
: "content-container d-block iframe-container"
}
ref={element}
id={"page_content_" + id}
@@ -321,7 +336,7 @@ const ExtraContent = ({
//console.log("Panel :", id, "Ref :", panelRef.current)
return (
<div class="panel panel-dashboard" id={id} ref={panelRef}>
<ContainerHelper id={id} />
<ContainerHelper id={id} />
<div class="navbar">
<span class="navbar-section feather-icon-container">
{displayIcon}
@@ -342,7 +357,7 @@ const ExtraContent = ({
}}
/>
)}
<span style="height: 100%;">
<span class="full-height">
<FullScreenButton
panelRef={panelRef}
hideOnFullScreen={true}
@@ -358,10 +373,7 @@ const ExtraContent = ({
</span>
</span>
</div>
<div
class="panel-body panel-body-dashboard"
style="margin:0px 0px; padding: 0px 0px"
>
<div class="panel-body panel-body-dashboard no-margin-no-padding">
<MainContent />
</div>
{parseInt(refreshtime) > 0 && type != "extension" && (

5
src/components/Modal/genericModal.js
View File

@@ -44,10 +44,7 @@ const showModal = ({
modals.addModal({
id,
title: (
<div
class="text-primary feather-icon-container"
style="line-height:24px!important"
>
<div class="text-primary feather-icon-container modal_title">
{icon}
<label>{title}</label>
</div>

3
src/components/Modal/index.js
View File

@@ -44,7 +44,7 @@ const ModalContainer = ({ id }) => {
)
}
return (
<div class="modals-container" id={id} style="z-index:20000;">
<div class="modals-container" id={id}>
{modals.modalList &&
modals.modalList.length > 0 &&
modals.modalList.map((modal, index) => {
@@ -62,7 +62,6 @@ const ModalContainer = ({ id }) => {
<SpectreModal
class={`active`}
id={"modal-" + modal.id}
style="z-index:999999"
key={index}
tabIndex="-1"
>

5
src/components/Modal/keepConnectedModal.js
View File

@@ -54,10 +54,7 @@ const showKeepConnected = () => {
modals.addModal({
id: id,
title: (
<div
class="text-primary feather-icon-container"
style="line-height:24px!important"
>
<div class="text-primary feather-icon-container modal_title">
<HelpCircle />
<label>{T("S145")}</label>
</div>

5
src/components/Modal/logginModal.js
View File

@@ -85,10 +85,7 @@ const showLogin = () => {
modals.addModal({
id: id,
title: (
<div
class="text-primary feather-icon-container"
style="line-height:24px!important"
>
<div class="text-primary feather-icon-container modal_title">
<Lock />
<label>{T("S145")}</label>
</div>

5
src/components/Modal/progressModal.js
View File

@@ -31,10 +31,7 @@ const showProgressModal = ({ modals, title, button1, content }) => {
modals.addModal({
id: id,
title: (
<div
class="text-primary feather-icon-container"
style="line-height:24px!important"
>
<div class="text-primary feather-icon-container modal_title">
<Info />
<label>{title}</label>
</div>

2
src/components/Panels/ExtraControls.js
View File

@@ -313,7 +313,7 @@ const ExtraControlsPanel = () => {
<strong class="text-ellipsis">{T("P96")}</strong>
</span>
<span class="navbar-section">
<span style="height: 100%;">
<span class="full-height">
<FullScreenButton
panelRef={panelRef}
hideOnFullScreen={true}

9
src/components/Panels/Files.js
View File

@@ -649,7 +649,7 @@ const FilesPanel = () => {
</span>
<span class="navbar-section">
<span style="height: 100%;">
<span class="full-height">
{fileSystem != "" && !isLoading && (
<PanelMenu items={menu} />
)}
@@ -781,11 +781,10 @@ const FilesPanel = () => {
}}
>
<div
class="form-control file-line-name file-line-action"
style="height:2rem!important"
class="form-control go-previous file-line-name file-line-action"
>
<CornerRightUp />
<label class="p-2">...</label>
<label class="go-previous-text">...</label>
</div>
</div>
)}
@@ -917,7 +916,7 @@ const FilesPanel = () => {
</div>
<div class="files-list-footer">
{!isLoading && filesList && filesList.occupation && (
<div style=" display: flex; align-items:center; flex-wrap: wrap; justify-content: space-between;">
<div class="filelist-occupation">
<div class="flex-pack">
{T("S98")}:{filesList.total}
</div>

15
src/components/Panels/Jog.js
View File

@@ -22,7 +22,13 @@ import { useHttpFn } from "../../hooks"
import { espHttpURL } from "../Helpers"
import { useUiContext, useUiContextFn } from "../../contexts"
import { T } from "../Translations"
import { Button, ButtonImg, FullScreenButton, CloseButton, ContainerHelper } from "../Controls"
import {
Button,
ButtonImg,
FullScreenButton,
CloseButton,
ContainerHelper,
} from "../Controls"
import { useEffect, useState, useRef } from "preact/hooks"
import { showModal } from "../Modal"
import { useTargetContext } from "../../targets"
@@ -358,7 +364,7 @@ const JogPanel = () => {
return (
<div id={id} class="panel panel-dashboard" id={id} ref={panelRef}>
<ContainerHelper id={id} />
<ContainerHelper id={id} />
<div class="navbar">
<span class="navbar-section feather-icon-container">
<Move />
@@ -1766,10 +1772,7 @@ const JogPanel = () => {
</Button>
</div>
</div>
<div
class="jog-extra-buttons-container"
style="margin-right:8px"
>
<div class="jog-extra-buttons-container">
<ButtonImg
m1
tooltip

3
src/components/Panels/JogCNC.js
View File

@@ -632,7 +632,6 @@ const JogPanel = () => {
<select
id="selectAxisList"
class="form-select"
style="border-color: #5755d9!important"
onchange={(e) => {
onChangeAxis(e)
}}
@@ -755,7 +754,7 @@ const JogPanel = () => {
sendZeroCommand("")
}}
>
<label style="font-size:150%; vertical-align: top;">
<label class="text-like-icon">
&Oslash;
</label>
<MoreHorizontal />

8
src/components/Panels/JogPlotter.js
View File

@@ -428,11 +428,11 @@ const JogPanel = () => {
"Y"
))) && (
<Button
class="button-minimal"
lg
m2
tooltip
nomin
style="min-width:2.5rem"
data-tooltip={T(buttonsInfos.T.tooltip)}
id="btnjogup"
onclick={(e) => {
@@ -453,11 +453,11 @@ const JogPanel = () => {
"Y"
))) && (
<ButtonImg
class="button-minimal"
m2
lg
tooltip
nomin
style="min-width:2.5rem"
data-tooltip={T(buttonsInfos.L.tooltip)}
id="btnjogleft"
label={buttonsInfos.L.label}
@@ -489,10 +489,10 @@ const JogPanel = () => {
"Y"
))) && (
<ButtonImg
class="button-minimal"
lg
m2
nomin
style="min-width:2.5rem"
label={buttonsInfos.R.label}
tooltip
data-tooltip={T(buttonsInfos.R.tooltip)}
@@ -513,10 +513,10 @@ const JogPanel = () => {
"Y"
))) && (
<ButtonImg
class="button-minimal"
lg
m2
nomin
style="min-width:2.5rem"
tooltip
data-tooltip={T(buttonsInfos.B.tooltip)}
id="btnjogdown"

2
src/components/Panels/LaserCNC.js
View File

@@ -251,7 +251,7 @@ const LaserPanel = () => {
<strong class="text-ellipsis">{T("CN35")}</strong>
</span>
<span class="navbar-section">
<span style="height: 100%;">
<span class="full-height">
<FullScreenButton
panelRef={panelRef}
hideOnFullScreen={true}

2
src/components/Panels/Macros.js
View File

@@ -154,7 +154,7 @@ const MacrosPanel = () => {
<strong class="text-ellipsis">{T("macros")}</strong>
</span>
<span class="navbar-section">
<span style="height: 100%;">
<span class="full-height">
<FullScreenButton panelRef={panelRef} />
<CloseButton
panelRef={panelRef}

2
src/components/Panels/Notifications.js
View File

@@ -116,7 +116,7 @@ const NotificationsPanel = () => {
<strong class="text-ellipsis">{T("notification")}</strong>
</span>
<span class="navbar-section">
<span style="height: 100%;">
<span class="full-height">
<PanelMenu items={menu} />
<FullScreenButton
panelRef={panelRef}

2
src/components/Panels/OverridesCNC.js
View File

@@ -189,7 +189,7 @@ const OverridesPanel = () => {
<strong class="text-ellipsis">{T("CN65")}</strong>
</span>
<span class="navbar-section">
<span style="height: 100%;">
<span class="full-height">
<FullScreenButton
panelRef={panelRef}
hideOnFullScreen={true}

2
src/components/Panels/ProbeCNC.js
View File

@@ -383,7 +383,7 @@ const ProbePanel = () => {
<strong class="text-ellipsis">{T("CN37")}</strong>
</span>
<span class="navbar-section">
<span style="height: 100%;">
<span class="full-height">
<FullScreenButton
panelRef={panelRef}
hideOnFullScreen={true}

2
src/components/Panels/SpindleCNC.js
View File

@@ -256,7 +256,7 @@ const SpindlePanel = () => {
<strong class="text-ellipsis">{T("CN36")}</strong>
</span>
<span class="navbar-section">
<span style="height: 100%;">
<span class="full-height">
<FullScreenButton
panelRef={panelRef}
hideOnFullScreen={true}

2
src/components/Panels/Status.js
View File

@@ -306,7 +306,7 @@ const StatusPanel = () => {
<strong class="text-ellipsis">{T("P97")}</strong>
</span>
<span class="navbar-section">
<span style="height: 100%;">
<span class="full-height">
<FullScreenButton
panelRef={panelRef}
hideOnFullScreen={true}

2
src/components/Panels/StatusCNC.js
View File

@@ -239,7 +239,7 @@ const StatusPanel = () => {
<strong class="text-ellipsis">{T("CN34")}</strong>
</span>
<span class="navbar-section">
<span style="height: 100%;">
<span class="full-height">
<FullScreenButton
panelRef={panelRef}
hideOnFullScreen={true}

2
src/components/Panels/Temperatures.js
View File

@@ -306,7 +306,7 @@ const TemperaturesPanel = () => {
<strong class="text-ellipsis">{T("P29")}</strong>
</span>
<span class="navbar-section">
<span style="height: 100%;">
<span class="full-height">
<FullScreenButton
panelRef={panelRef}
hideOnFullScreen={true}

2
src/components/Panels/Terminal.js
View File

@@ -223,7 +223,7 @@ const TerminalPanel = () => {
<strong class="text-ellipsis">{T("Terminal")}</strong>
</span>
<span class="navbar-section">
<span style="height: 100%;">
<span class="full-height">
<PanelMenu items={menu} />
<FullScreenButton
panelRef={panelRef}

84
src/style/components/_control.scss
View File

@@ -560,6 +560,86 @@ a label {
}
.nested-button {
color:blue!important;
background-color: #f1f1fc;
color: blue !important;
background-color: #f1f1fc;
}
.insensitive {
pointer-events: none;
}
.text-straigth {
overflow: hidden !important;
white-space: nowrap;
text-overflow: ellipsis !important;
}
.icon-btn {
min-width: 2rem;
}
.filelist-occupation {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
}
.text-like-icon {
font-size: 1.4rem;
vertical-align: top;
}
.button-mininal {
min-width: 2.5rem;
}
.icon-clear,
.icon-reveal {
margin-top: 0.15rem;
}
.iframe-container {
z-index: 0 !important;
}
.go-previous {
height: 2rem !important;
}
.go-previous-text {
font-size: 1.4rem;
}
.progress-value-label {
margin-left: 15px;
}
.full-width {
width: 100%;
}
.full-height {
height: 100%;
}
.content-icon {
padding: 0 20px;
}
.empty-content {
flex-wrap: nowrap !important;
}
.no-margin-no-padding {
margin: 0 !important;
padding: 0 !important;
}
.modal_title {
line-height: 24px !important;
}
.modals-container {
z-index:20000;
}

16
src/tabs/interface/index.js
View File

@@ -47,8 +47,8 @@ const generateValidationGlobal = (
fieldData,
isFlashFS,
isSDFS,
interfaceSettings,
connectionSettings,
interfaceSettings,
setShowSave,
checkSaveStatus
) => {
@@ -59,6 +59,11 @@ const generateValidationGlobal = (
}
if (fieldData.shortkey && interfaceSettings) {
console.log(
"shortkeys",
interfaceSettings.current,
connectionSettings.current
)
if (fieldData.value.length > 0) {
if (fieldData.value.endsWith("+")) {
validation.message = T("S214")
@@ -199,7 +204,11 @@ const generateValidationGlobal = (
}
}
}
if (fieldData.name == "type" && fieldData.value == "camera" && interfaceSettings) {
if (
fieldData.name == "type" &&
fieldData.value == "camera" &&
interfaceSettings
) {
//Update camera source automaticaly
//Note: is there a less complexe way to do ?
const sourceId = fieldData.id.split("-")[0]
@@ -253,7 +262,8 @@ const generateValidationGlobal = (
}
if (
(typeof isFlashFS != "undefined" || typeof isSDFS != "undefined") &&
typeof setShowSave != "undefined" && typeof checkSaveStatus != "undefined"
typeof setShowSave != "undefined" &&
typeof checkSaveStatus != "undefined"
) {
if (isFlashFS || isSDFS) {
setShowSave(checkSaveStatus())

4
src/targets/CNC/style/_index.scss
View File

@@ -160,3 +160,7 @@
color: #5755d9;
background-color: #f1f1fc;
}
#selectAxisList{
border-color: #5755d9!important
}

1
src/targets/Printer3D/style/_index.scss
View File

@@ -277,6 +277,7 @@ path.std:hover {
display: flex;
width: 100%;
justify-content: space-evenly;
margin-right:8px;
}
.print-buttons-container,

1
src/targets/translations/en.json
View File

@@ -226,6 +226,7 @@
"S219": "TFT",
"S220": "Makerbase",
"S221": "Bigtreetech",
"S222": "Error loading file:",
"btn+X": "X+",
"btn-X": "X-",
"btnHX": "Home X",