Crash_Override/FreeDATA
1
0
Fork 0
mirror of https://github.com/DJ2LS/FreeDATA synced 2024-05-14 08:04:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

added support for bs light/dark mode

Browse source
This commit is contained in:
DJ2LS 2023-03-16 07:47:47 +01:00
parent f6ddef87e5
commit 9eb2cb210c
5 changed files with 100 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
gui/package.json
View file

@ -32,7 +32,7 @@
"@electron/osx-sign": "^1.0.4",
"@popperjs/core": "^2.11.6",
"blob-util": "^2.0.2",
"bootstrap": "^5.2.3",
"bootstrap": "^5.3.0-alpha.1",
"bootstrap-icons": "^1.10.3",
"bootswatch": "^5.2.3",
"browser-image-compression": "^2.0.0",

18
gui/preload-chat.js
View file

@ -998,9 +998,9 @@ update_chat = function (obj) {
var controlarea_transmit = `
<div class="ms-auto" id="msg-${obj._id}-control-area">
<button class="btn bg-transparent p-1 m-1"><i class="bi bi-arrow-repeat" id="retransmit-msg-${obj._id}" style="font-size: 1.2rem; color: grey;"></i></button>
<button class="btn bg-transparent p-1 m-1"><i class="bi bi-download" id="save-file-msg-${obj._id}" style="font-size: 1.2rem; color: grey;"></i></button>
<button class="btn bg-transparent p-1 m-1"><i class="bi bi-trash" id="del-msg-${obj._id}" style="font-size: 1.2rem; color: grey;"></i></button>
<button class="btn bg-transparent p-1 m-1"><i class="bi bi-arrow-repeat" id="retransmit-msg-${obj._id}" style="font-size: 1.2rem;"></i></button>
<button class="btn bg-transparent p-1 m-1"><i class="bi bi-download" id="save-file-msg-${obj._id}" style="font-size: 1.2rem;"></i></button>
<button class="btn bg-transparent p-1 m-1"><i class="bi bi-trash" id="del-msg-${obj._id}" style="font-size: 1.2rem;"></i></button>
</div>
`;
@ -1008,8 +1008,8 @@ update_chat = function (obj) {
var controlarea_receive = `
<div class="me-auto" id="msg-${obj._id}-control-area">
<button class="btn bg-transparent p-1 m-1"><i class="bi bi-download" id="save-file-msg-${obj._id}" style="font-size: 1.2rem; color: grey;"></i></button>
<button class="btn bg-transparent p-1 m-1"><i class="bi bi-trash" id="del-msg-${obj._id}" style="font-size: 1.2rem; color: grey;"></i></button>
<button class="btn bg-transparent p-1 m-1"><i class="bi bi-download" id="save-file-msg-${obj._id}" style="font-size: 1.2rem;"></i></button>
<button class="btn bg-transparent p-1 m-1"><i class="bi bi-trash" id="del-msg-${obj._id}" style="font-size: 1.2rem;"></i></button>
</div>
`;
@ -1019,13 +1019,13 @@ update_chat = function (obj) {
var filetype = "text/plain";
var controlarea_transmit = `
<div class="ms-auto" id="msg-${obj._id}-control-area">
<button class="btn bg-transparent p-1 m-1"><i class="bi bi-arrow-repeat" id="retransmit-msg-${obj._id}" style="font-size: 1.2rem; color: grey;"></i></button>
<button class="btn bg-transparent p-1 m-1"><i class="bi bi-trash" id="del-msg-${obj._id}" style="font-size: 1.2rem; color: grey;"></i></button>
<button class="btn bg-transparent p-1 m-1"><i class="bi bi-arrow-repeat" id="retransmit-msg-${obj._id}" style="font-size: 1.2rem;"></i></button>
<button class="btn bg-transparent p-1 m-1"><i class="bi bi-trash" id="del-msg-${obj._id}" style="font-size: 1.2rem;"></i></button>
</div>
`;
var controlarea_receive = `
<div class="float-start" id="msg-${obj._id}-control-area">
<button class="btn bg-transparent p-1 m-1"><i class="bi bi-trash" id="del-msg-${obj._id}" style="font-size: 1.2rem; color: grey;"></i></button>
<button class="btn bg-transparent p-1 m-1"><i class="bi bi-trash" id="del-msg-${obj._id}" style="font-size: 1.2rem;"></i></button>
</div>
`;
}
@ -1221,7 +1221,7 @@ update_chat = function (obj) {
<!--<button type="button" id="retransmit-msg-${
obj._id
}" class="btn btn-sm btn-light p-0" style="height:20px;width:30px"><i class="bi bi-arrow-repeat" style="font-size: 0.9rem; color: black;"></i></button>-->
}" class="btn btn-sm btn-light p-0" style="height:20px;width:30px"><i class="bi bi-arrow-repeat" style="font-size: 0.9rem;"></i></button>-->
</p>

16
gui/src/chat-module.html
View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" data-bs-theme="light">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
@ -48,7 +48,7 @@
</div>
<div class="container-fluid">
<div class="row h-100">
<div class="col-4 p-2 bg-light">
<div class="col-4 p-2">
<! ------Chats area ---------------------------------------------------------------------->
<div class="container-fluid m-0 p-0">
<div class="input-group bottom-0 m-0 w-100">
@ -284,11 +284,11 @@
<div class="input-group bottom-0 ms-2">
<!--<input class="form-control" maxlength="8" style="max-width: 6rem; text-transform:uppercase; display:none" id="chatModuleDxCall" placeholder="DX CALL"></input>-->
<!--<button class="btn btn-sm btn-primary me-2" id="emojipickerbutton" type="button">-->
<div class="input-group-text bg-white">
<div class="input-group-text">
<i
id="emojipickerbutton"
class="bi bi-emoji-smile p-0"
style="font-size: 1rem; color: grey"
style="font-size: 1rem;"
></i>
</div>
@ -299,10 +299,10 @@
placeholder="Message - Send with [Enter]"
></textarea>
<div class="input-group-text bg-white me-3">
<div class="input-group-text me-3">
<i
class="bi bi-paperclip"
style="font-size: 1rem; color: grey"
style="font-size: 1rem;"
id="selectFilesButton"
></i>
@ -313,7 +313,7 @@
>
<i
class="bi bi-send"
style="font-size: 1.2rem; color: white"
style="font-size: 1.2rem;"
></i>
</button>
</div>
@ -346,7 +346,7 @@
/>
</div>
<div
class="col position-absolute image-overlay text-white justify-content-center align-items-center d-flex align-middle h-100 bg-dark opacity-0"
class="col position-absolute image-overlay text-white justify-content-center align-items-center d-flex align-middle h-100 opacity-0"
id="userImageSelector"
>
<i class="bi bi-upload" style="font-size: 2.2rem"></i>

143
gui/src/index.html
View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<html lang="en" data-bs-theme="light">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
@ -24,7 +24,7 @@
<body>
<!-- SECONDARY NAVBAR -->
<nav class="navbar fixed-top bg-white border-bottom rounded-3 mt-0 p-2">
<nav class="navbar fixed-top border-bottom rounded-3 mt-0 p-2">
<div style="margin-left: 5px">
<div
class="btn-toolbar"
@ -104,7 +104,7 @@
>
<i
class="bi bi-diagram-3"
style="font-size: 1rem; color: white"
style="font-size: 1rem;"
></i>
</button>
</div>
@ -273,12 +273,12 @@
<div class="container p-0" style="margin-top: 55px">
<div class="row collapse multi-collapse show" id="collapseFirstRow">
<div class="col">
<div class="card text-dark mb-0 border-5 border-start border-end">
<div class="card-header p-2 bg-white">
<div class="card mb-0 ">
<div class="card-header p-2 ">
<div class="">
<i
class="bi bi-volume-up"
style="font-size: 1rem; color: black"
style="font-size: 1rem;"
></i
><strong>AUDIO</strong>
@ -292,10 +292,10 @@
<div class="card-body p-1" style="height:100px">
<div class="input-group input-group-sm mb-1">
<span class="input-group-text bg-white">
<span class="input-group-text ">
<i
class="bi bi-mic-fill"
style="font-size: 1rem; color: black"
style="font-size: 1rem;"
></i>
</span>
<select
@ -307,10 +307,10 @@
</select>
</div>
<div class="input-group input-group-sm mb-1">
<span class="input-group-text bg-white">
<span class="input-group-text ">
<i
class="bi bi-volume-up"
style="font-size: 1rem; color: black"
style="font-size: 1rem;"
></i>
</span>
<select
@ -320,18 +320,18 @@
></select>
</div>
</div>
<div class="card-footer text-muted small bg-white">
<div class="card-footer text-muted small ">
Please select audio device for RX and TX
</div>
</div>
<!--Start of TNC rig control pane-->
</div>
<div class="col">
<div class="card text-dark mb-0 border-5 border-start border-end">
<div class="card-header p-1 bg-white">
<div class="card mb-0 ">
<div class="card-header p-1 ">
<i
class="bi bi-projector"
style="font-size: 1rem; color: black"
style="font-size: 1rem;"
></i
><strong> TNC RIG CONTROL</strong>
<div
@ -407,10 +407,10 @@
<div id="radio-control-rigctld">
<div class="input-group input-group-sm mb-1">
<div class="input-group input-group-sm mb-1">
<span class="input-group-text bg-white"
<span class="input-group-text "
>Rigctld Network settings</span
>
<span class="input-group-text bg-white">IP</span>
<span class="input-group-text ">IP</span>
<input
type="text"
class="form-control"
@ -419,7 +419,7 @@
aria-label="Device IP"
aria-describedby="basic-addon1"
/>
<span class="input-group-text bg-white">Port</span>
<span class="input-group-text ">Port</span>
<input
type="text"
class="form-control"
@ -431,7 +431,7 @@
</div>
<div class="input-group input-group-sm mb-1">
<span class="input-group-text bg-white">Rigctld application</span>
<span class="input-group-text ">Rigctld application</span>
<button
class="btn btn-outline-success"
type="button"
@ -481,7 +481,7 @@
happens automatically.
</div>
</div>
<div class="card-footer text-muted small bg-white" id="hamlib_info_field">
<div class="card-footer text-muted small " id="hamlib_info_field">
Define TNC rig control mode (none/hamlib)
</div>
</div>
@ -492,8 +492,8 @@
id="collapseSecondRow"
>
<div class="col">
<div class="card text-dark mb-1 border-5 border-start border-end">
<div class="card-header bg-white p-2"><i class="bi bi-house-door"></i><strong> MY STATION</strong></div>
<div class="card mb-1 ">
<div class="card-header p-2"><i class="bi bi-house-door"></i><strong> MY STATION</strong></div>
<div class="card-body p-2">
<div class="row">
<div class="col-md-auto">
@ -505,10 +505,10 @@
data-bs-html="false"
title="Enter your callsign and save it"
>
<span class="input-group-text bg-white">
<span class="input-group-text ">
<i
class="bi bi-person-bounding-box"
style="font-size: 1rem; color: black"
style="font-size: 1rem;"
></i>
</span>
<input
@ -555,10 +555,10 @@
data-bs-html="false"
title="Enter your gridsquare and save it"
>
<span class="input-group-text bg-white">
<span class="input-group-text ">
<i
class="bi bi-house-fill"
style="font-size: 1rem; color: black"
style="font-size: 1rem;"
></i>
</span>
<input
@ -579,11 +579,11 @@
</div>
</div>
<div class="col">
<div class="card text-dark mb-0 border-5 border-start border-end">
<div class="card-header p-2 bg-white d-flex">
<div class="card mb-0 ">
<div class="card-header p-2 d-flex">
<i
class="bi bi-cloud-download ms-1 me-1"
style="font-size: 1rem; color: black"
style="font-size: 1rem;"
></i>
<strong>UPDATER</strong>
<div class="progress w-75 ms-1 m-1">
@ -641,11 +641,11 @@
<div class="container mt-2 p-0">
<div class="row collapse multi-collapse" id="collapseThirdRow">
<div class="col-5">
<div class="card text-dark mb-1 border-5 border-start border-end">
<div class="card-header p-1 bg-white">
<div class="card mb-1 ">
<div class="card-header p-1 ">
<i
class="bi bi-volume-up"
style="font-size: 1rem; color: black"
style="font-size: 1rem;"
></i>
<strong>AUDIO LEVEL</strong>
<button
@ -780,8 +780,8 @@
</div>
</div>
<div class="col">
<div class="card text-dark mb-1 border-5 border-start border-end">
<div class="card-header p-2 bg-white">
<div class="card mb-1 ">
<div class="card-header p-2 ">
<strong>PING, CQ & BEACON</strong>
</div>
<div class="card-body p-2">
@ -890,8 +890,8 @@
</div>
<div class="row collapse multi-collapse" id="collapseFourthRow">
<div class="col-5">
<div class="card text-dark mb-1 border-5 border-start border-end">
<div class="card-header p-1 bg-white">
<div class="card mb-1 ">
<div class="card-header p-1 ">
<div
class="btn-group btn-group-sm"
role="group"
@ -987,13 +987,12 @@
</div>
</div>
<div class="col">
<div class="card text-dark mb-1 border-5 border-start border-end" style="height: 240px">
<div class="card mb-1 " style="height: 240px">
<!--325px-->
<div class="card-header p-2 bg-white">
<div class="card-header p-2 ">
<i
class="bi bi-list-columns-reverse"
style="font-size: 1rem; color: black"
style="font-size: 1rem; color: black"
style="font-size: 1rem;"
></i>
<strong> HEARD STATIONS</strong>
</div>
@ -1048,7 +1047,7 @@
>
<i
class="bi bi-folder2-open"
style="font-size: 1rem; color: white"
style="font-size: 1rem;"
></i>
</button>
<h5 id="receivedFilesSidebarLabel">Filetransfer</h5>
@ -1130,7 +1129,7 @@
<div class="container mt-1">
<div class="row mb-1">
<div class="col">
<div class="card text-dark mb-0">
<div class="card mb-0">
<div class="card-header p-1"><strong>DX Station</strong></div>
<div class="card-body p-2">
<div class="row">
@ -1175,7 +1174,7 @@
<!--row-->
<div class="row mb-1">
<div class="col">
<div class="card text-dark mb-0">
<div class="card mb-0">
<!--
<div class="card-header p-1"> <strong>Data</strong>
</div>
@ -1193,7 +1192,7 @@
<!--row-->
<div class="row mb-1">
<div class="col">
<div class="card text-dark mb-0">
<div class="card mb-0">
<div class="card-header p-1"><strong>Mode</strong></div>
<div class="card-body p-2">
<div class="row">
@ -1249,18 +1248,6 @@
</button>
</div>
</div>
<!--
<div class="row">
<div class="col">
<div class="card text-dark bg-light mb-0" >
<div class="card-header p-2">Info </div>
<div class="card-body p-2">
123
</div>
</div>
</div>
</div>
-->
<div class="row">
<div class="col"></div>
</div>
@ -1274,7 +1261,7 @@
<!--end of blur div -->
<!---------------------------------------------------------------------- FOOTER AREA ------------------------------------------------------------>
<div class="container-fluid">
<nav class="navbar fixed-bottom navbar-expand-xl navbar-light bg-white border-top rounded-3 p-2">
<nav class="navbar fixed-bottom navbar-expand-xl navbar-light border-top rounded-3 p-2">
<div class="col-sm-2">
<div class="btn-toolbar" role="toolbar" style="margin-left: 2px">
<div class="btn-group btn-group-sm me-1" role="group">
@ -1290,7 +1277,7 @@
>
<i
class="bi bi-broadcast-pin"
style="font-size: 0.8rem; color: white"
style="font-size: 0.8rem;"
></i>
</button>
</div>
@ -1307,7 +1294,7 @@
>
<i
class="bi bi-cpu"
style="font-size: 0.8rem; color: white"
style="font-size: 0.8rem;"
></i>
</button>
</div>
@ -1324,7 +1311,7 @@
>
<i
class="bi bi-arrow-left-right"
style="font-size: 0.8rem; color: white"
style="font-size: 0.8rem;"
></i>
</button>
</div>
@ -1341,7 +1328,7 @@
>
<i
class="bi bi-file-earmark-binary"
style="font-size: 0.8rem; color: white"
style="font-size: 0.8rem;"
></i>
</button>
</div>
@ -1358,7 +1345,7 @@
>
<i
class="bi bi-usb-symbol"
style="font-size: 0.8rem; color: white"
style="font-size: 0.8rem;"
></i>
</button>
</div>
@ -1402,7 +1389,7 @@
>
<i
class="bi bi-check-lg"
style="font-size: 0.8rem; color: white"
style="font-size: 0.8rem;"
></i>
</button>
</div>
@ -1508,7 +1495,7 @@
<span class="input-group-text">
<i
class="bi bi-speedometer2"
style="font-size: 1rem; color: black"
style="font-size: 1rem;"
></i>
</span>
<span
@ -1522,13 +1509,13 @@
<i
id="speed_level"
class="bi bi-reception-0"
style="font-size: 1rem; color: black"
style="font-size: 1rem;"
></i>
</span>
<span class="input-group-text">
<i
class="bi bi-file-earmark-binary"
style="font-size: 1rem; color: black"
style="font-size: 1rem;"
></i>
</span>
<span
@ -1805,7 +1792,7 @@
</div>
<div class="input-group input-group-sm mb-1">
<label class="input-group-text w-50">Enable fancy GUI</label>
<label class="input-group-text bg-white w-50">
<label class="input-group-text w-50">
<div class="form-check form-switch form-check-inline">
<input
class="form-check-input"
@ -1852,7 +1839,7 @@
<label class="input-group-text w-50"
>Enable "is typing"</label
>
<label class="input-group-text bg-white w-50">
<label class="input-group-text w-50">
<div class="form-check form-switch form-check-inline">
<input
class="form-check-input"
@ -1870,7 +1857,7 @@
<label class="input-group-text w-50"
>Allow requesting "user profile"</label
>
<label class="input-group-text bg-white w-50">
<label class="input-group-text w-50">
<div class="form-check form-switch form-check-inline">
<input
class="form-check-input"
@ -1885,7 +1872,7 @@
<label class="input-group-text w-50"
>Allow requesting "shared folder"</label
>
<label class="input-group-text bg-white w-50">
<label class="input-group-text w-50">
<div class="form-check form-switch form-check-inline">
<input
class="form-check-input"
@ -2496,7 +2483,7 @@
<label class="input-group-text w-50"
>Enable waterfall data</label
>
<label class="input-group-text bg-white w-50">
<label class="input-group-text w-50">
<div class="form-check form-switch form-check-inline">
<input
class="form-check-input"
@ -2513,7 +2500,7 @@
<label class="input-group-text w-50"
>Enable scatter diagram data</label
>
<label class="input-group-text bg-white w-50">
<label class="input-group-text w-50">
<div class="form-check form-switch form-check-inline">
<input
class="form-check-input"
@ -2530,7 +2517,7 @@
<label class="input-group-text w-50"
>Enable 563Hz only mode</label
>
<label class="input-group-text bg-white w-50">
<label class="input-group-text w-50">
<div class="form-check form-switch form-check-inline">
<input
class="form-check-input"
@ -2545,7 +2532,7 @@
</div>
<div class="input-group input-group-sm mb-1">
<label class="input-group-text w-50">Respond to CQ</label>
<label class="input-group-text bg-white w-50">
<label class="input-group-text w-50">
<div class="form-check form-switch form-check-inline">
<input
class="form-check-input"
@ -2560,7 +2547,7 @@
</div>
<div class="input-group input-group-sm mb-1">
<label class="input-group-text w-50">RX buffer size</label>
<label class="input-group-text bg-white w-50">
<label class="input-group-text w-50">
<select
class="form-select form-select-sm"
id="rx_buffer_size"
@ -2592,7 +2579,7 @@
<label class="input-group-text w-50"
>Explorer publishing</label
>
<label class="input-group-text bg-white w-50">
<label class="input-group-text w-50">
<div class="form-check form-switch form-check-inline">
<input
class="form-check-input"
@ -2609,7 +2596,7 @@
<label class="input-group-text w-50"
>Explorer stats publishing</label
>
<label class="input-group-text bg-white w-50">
<label class="input-group-text w-50">
<div class="form-check form-switch form-check-inline">
<input
class="form-check-input"
@ -2633,7 +2620,7 @@
>
<div class="input-group input-group-sm mb-1">
<label class="input-group-text w-50">Enable autotune</label>
<label class="input-group-text bg-white w-50">
<label class="input-group-text w-50">
<div class="form-check form-switch form-check-inline ms-2">
<input
class="form-check-input"
@ -2648,7 +2635,7 @@
</div>
<div class="input-group input-group-sm mb-1">
<label class="input-group-text w-50">Enable FSK mode</label>
<label class="input-group-text bg-white w-50">
<label class="input-group-text w-50">
<div class="form-check form-switch form-check-inline ms-2">
<input
class="form-check-input"

17
gui/src/styles.css
View file

@ -1,3 +1,4 @@
/* disable scrolling in main window */
body {
padding-right: 0px !important;
@ -93,3 +94,19 @@ https://stackoverflow.com/a/9622873
opacity: 0.75 !important;
transition: 0.5s;
}
/* theme area */
/* default light theme mods */
[data-bs-theme="light"] {
.card-header{
background-color: var(--bs-card-cap-bg);
/*--bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.3);*/
}
}
/* default light theme mods */
[data-bs-theme="dark"] {
}