jeans/openHASP
jeans/openHASP
1
0
Fork 0
mirror of https://github.com/HASwitchPlate/openHASP.git synced 2025-07-20 01:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #901 from marsman7/web-style

Browse Source 
Web style
This commit is contained in:
fvanroie 2025-04-30 13:42:57 +02:00 committed by GitHub
commit 2908220049
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 141 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
data/edit.htm
View File

@ -1 +1,61 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.39.1/ace.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.39.1/theme-monokai.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.39.1/mode-html.js"></script><script type="module" src="/static/main.js?COMMIT_HASH"></script><script src="/static/script.js?COMMIT_HASH"></script><title>openHASP File Editor</title><link rel="stylesheet" href="/static/vars.css?COMMIT_HASH"><link rel="stylesheet" href="/static/style.css?COMMIT_HASH"><link rel="icon" href="/static/logo.svg?COMMIT_HASH" type="image/svg+xml"><link href="https://fonts.cdnfonts.com/css/jetbrains-mono" rel="stylesheet"><link href="https://fonts.cdnfonts.com/css/source-code-pro" rel="stylesheet"><style>ul{list-style-type:none;padding-left:20px}ul>li{white-space:nowrap}.inact:hover{cursor:default}.item:hover{cursor:pointer;background-color:#dadaff}.item>span:nth-child(2):hover{text-decoration:underline}.selitem>div{background-color:#ccf}.selitem>div:hover{background-color:#ccf}</style></head><body v-cloak v-scope @vue:mounted="mounted"><div class="container__editor" onmousedown="hidectx()"><div class="container__left"><div id="tree"><div class="item bold"><span class="fi fa-flash" title="/"></span><span>L:</span></div></div></div><div class="resizer" id="dragMe"></div><div class="container__right"><div class="toolbar"><input type="file" id="upload" name="upload" multiple="multiple" hidden><span class="left"><button id="home">Home</button><button onclick='upload(_("tree"),"/")'>Upload</button><button id="save" disabled="disabled">Save</button></span><div class="right"><input id="page" type="number" min="1" max="12" class="number"><button id="load">Reload Pages</button><button id="init">Clear Pages</button></div><span class="left"><button id="cut" disabled="disabled">Cut</button><button id="copy" disabled="disabled">Copy</button><button id="paste" disabled="disabled">Paste</button></span><span id="name"></span><span class="left"><button id="undo" disabled="disabled">Undo</button><button id="redo" disabled="disabled">Redo</button></span><span class="left"><select id="font"><option>JetBrains Mono</option><option selected="selected">Source Code Pro</option><input id="fontsize" type="number" step="any" min="9" max="40" value="12"></span></div><div id="editor" class="container__bottom"></div><div id="preview" class="container__bottom"></div><iframe id="download-frame"></iframe></div><div id="ctx" onmousedown="event.stopPropagation()"><ul><li><span class="icon file"></span>New File</li><li><span class="icon upload"></span>Upload Files</li><li><span class="icon edit"></span>Edit</li><li><span class="icon eye"></span>Preview</li><li><span class="icon download"></span>Download</li><li><span class="icon trash"></span>Delete</li></ul></div></div><div id="toast"></div></body></html> <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.8/ace.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.8/theme-monokai.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.8/mode-html.js"></script>
<script type="module" src="/static/main.js?COMMIT_HASH"></script>
<script src="/static/script.js?COMMIT_HASH"></script>
<title>openHASP File Editor</title>
<link rel="stylesheet" href="/static/vars.css?COMMIT_HASH">
<link rel="stylesheet" href="/static/style.css?COMMIT_HASH">
<link rel="icon" href="/static/logo.svg?COMMIT_HASH" type="image/svg+xml">
<link href="https://fonts.cdnfonts.com/css/jetbrains-mono" rel="stylesheet">
<link href="https://fonts.cdnfonts.com/css/source-code-pro" rel="stylesheet">
</head>
<body v-cloak v-scope @vue:mounted="mounted">
<div class="container__editor" onmousedown="hidectx()">
<div class="container__left">
<div id="tree">
<div class="item bold"><span class="fi fa-flash" title="/"></span><span>L:</span></div>
</div>
</div>
<div class="resizer" id="dragMe"></div>
<div class="container__right">
<div class="toolbar"><input type="file" id="upload" name="upload" multiple="multiple" hidden><span
class="left"><button id="home">Home</button><button
onclick='upload(_("tree"),"/")'>Upload</button><button id="save"
disabled="disabled">Save</button></span>
<div class="right"><input id="page" type="number" min="1" max="12" class="number"><button
id="load">Reload Pages</button><button id="init">Clear Pages</button></div><span
class="left"><button id="cut" disabled="disabled">Cut</button><button id="copy"
disabled="disabled">Copy</button><button id="paste"
disabled="disabled">Paste</button></span><span id="name"></span><span class="left"><button
id="undo" disabled="disabled">Undo</button><button id="redo"
disabled="disabled">Redo</button></span><span class="left"><select id="font">
<option>JetBrains Mono</option>
<option selected="selected">Source Code Pro</option><input id="fontsize" type="number"
step="any" min="9" max="40" value="12"></span>
</div>
<div id="editor" class="container__bottom"></div>
<div id="preview" class="container__bottom"></div><iframe id="download-frame"></iframe>
</div>
<div id="ctx" onmousedown="event.stopPropagation()">
<ul>
<li><span class="icon file"></span>New File</li>
<li><span class="icon upload"></span>Upload Files</li>
<li><span class="icon edit"></span>Edit</li>
<li><span class="icon eye"></span>Preview</li>
<li><span class="icon download"></span>Download</li>
<li><span class="icon trash"></span>Delete</li>
</ul>
</div>
</div>
<div id="toast"></div>
</body>
</html>

33
data/style.css
View File

@ -518,7 +518,7 @@ a.foot:visited {
top: 10px; top: 10px;
left: 50px; left: 50px;
position: absolute; position: absolute;
background: #fff; background: var(--ddmenubg);
z-index: 10; z-index: 10;
padding: 0.75rem; padding: 0.75rem;
border-radius: 0.5rem; border-radius: 0.5rem;
@ -593,6 +593,37 @@ a.foot:visited {
animation: toastIt 3000ms cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards; animation: toastIt 3000ms cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
} }
ul {
list-style-type: none;
padding-left: 20px
}
ul>li {
white-space: nowrap
}
.inact:hover {
cursor: default
}
.item:hover {
cursor: pointer;
/* background-color: #dadaff */
background-color: var(--itemhoverbg)
}
.item>span:nth-child(2):hover {
text-decoration: underline
}
.selitem>div {
background-color: var(--itemhoverbg)
}
.selitem>div:hover {
background-color: var(--itemhoverbg)
}
@keyframes toastIt { @keyframes toastIt {
0%, 0%,
100% { 100% {

12
include/user_config_override-template.h
View File

@ -96,6 +96,12 @@
#define D_HTTP_COLOR_GROUP "#f3f3f3" // Group container background color #define D_HTTP_COLOR_GROUP "#f3f3f3" // Group container background color
#define D_HTTP_COLOR_GROUP_TEXT "#000" // Group container text color - black #define D_HTTP_COLOR_GROUP_TEXT "#000" // Group container text color - black
#define D_HTTP_COLOR_FOOTER_TEXT "#0083cc" // Footer text color - Olympic blue #define D_HTTP_COLOR_FOOTER_TEXT "#0083cc" // Footer text color - Olympic blue
#define D_HTTP_COLOR_TITLE "#fa0"
#define D_HTTP_COLOR_TREE "#fff" // Editor left menu background
#define D_HTTP_COLOR_TOOLBAR "#fff" // Editor top bar background
#define D_HTTP_COLOR_PREVIEW "#888" //
#define D_HTTP_COLOR_DROPDOWN_BG "#777" // Editor dropdown menu background
#define D_HTTP_COLOR_ITEM_HOVER "#060" // Editor left menu item hover background
/* /*
// Dark theme // Dark theme
@ -112,6 +118,12 @@
#define D_HTTP_COLOR_GROUP "#444" // Group container background color - Dark gray #define D_HTTP_COLOR_GROUP "#444" // Group container background color - Dark gray
#define D_HTTP_COLOR_GROUP_TEXT "#fff" // Group container text color - white #define D_HTTP_COLOR_GROUP_TEXT "#fff" // Group container text color - white
#define D_HTTP_COLOR_FOOTER_TEXT "#1fa3ec" // Footer text color - Vivid blue #define D_HTTP_COLOR_FOOTER_TEXT "#1fa3ec" // Footer text color - Vivid blue
#define D_HTTP_COLOR_TITLE "#fa0"
#define D_HTTP_COLOR_TREE "#444" // Editor left menu background
#define D_HTTP_COLOR_TOOLBAR "#1fa3ec" // Editor top bar background
#define D_HTTP_COLOR_PREVIEW "#888" //
#define D_HTTP_COLOR_DROPDOWN_BG "#666" // Editor dropdown menu background
#define D_HTTP_COLOR_ITEM_HOVER "#0083cc" // Editor left menu item hover background
*/ */
/*************************************************** /***************************************************

2
src/sys/svc/hasp_http.cpp
View File

@ -134,6 +134,8 @@ const uint8_t HTTP_VARS_CSS[] PROGMEM = ":root{"
"--toolbg:" D_HTTP_COLOR_TOOLBAR ";" "--toolbg:" D_HTTP_COLOR_TOOLBAR ";"
"--treebg:" D_HTTP_COLOR_TREE ";" "--treebg:" D_HTTP_COLOR_TREE ";"
"--preeviewbg:" D_HTTP_COLOR_PREVIEW ";" "--preeviewbg:" D_HTTP_COLOR_PREVIEW ";"
"--ddmenubg:" D_HTTP_COLOR_DROPDOWN_BG ";"
"--itemhoverbg:" D_HTTP_COLOR_ITEM_HOVER ";"
"}"; "}";
//////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////

8
src/sys/svc/hasp_http.h
View File

@ -86,6 +86,14 @@ bool httpSetConfig(const JsonObject& settings);
#ifndef D_HTTP_COLOR_PREVIEW #ifndef D_HTTP_COLOR_PREVIEW
#define D_HTTP_COLOR_PREVIEW "#888" #define D_HTTP_COLOR_PREVIEW "#888"
#endif #endif
#ifndef D_HTTP_COLOR_DROPDOWN_BG
#define D_HTTP_COLOR_DROPDOWN_BG "#777" // Editor dropdown menu background
#endif
#ifndef D_HTTP_COLOR_ITEM_HOVER
#define D_HTTP_COLOR_ITEM_HOVER "#ccf" // Editor left menu item hover background
#endif
/* clang-format on */ /* clang-format on */