Skip to content

Commit 19e672a

Browse files
MedaiP90MedaiP90
authored
Merge pull request #50 from Omniaevo/develop
New menu items and scrollbar colors
2 parents 6edc0f3 + 714e5a0 commit 19e672a

8 files changed

+134
-60
lines changed

‎linux-resources/io.github.Omniaevo.mqtt5-explorer.metainfo.xml

+10
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,16 @@
5959
</screenshots>
6060

6161
<releases>
62+
<release version="1.18.0" date="2025-01-31">
63+
<url type="details">https://github.com/Omniaevo/mqtt5-explorer/releases/tag/v1.18.0</url>
64+
<description>
65+
<p>In this release:</p>
66+
<ul>
67+
<li>Accent color in the scrollbar;</li>
68+
<li>Few new menu items.</li>
69+
</ul>
70+
</description>
71+
</release>
6272
<release version="1.17.1" date="2025-01-20">
6373
<url type="details">https://github.com/Omniaevo/mqtt5-explorer/releases/tag/v1.17.1</url>
6474
<description>

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mqtt5-explorer",
3-
"version": "1.17.1",
3+
"version": "1.18.0",
44
"private": false,
55
"license": "GPLv3",
66
"description": "A simple MQTT client that supports MQTT5 protocol.",

‎public/styles/dark-scrollbar.css

-21
This file was deleted.

‎public/styles/light-scrollbar.css

-21
This file was deleted.

‎src/assets/css/scrollbar.css

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
:root {
2+
--scrollbar-bg-dark: #121212;
3+
--scrollbar-bg-light: #eceff1;
4+
--scrollbar-thumb-dark: #eceff1;
5+
--scrollbar-thumb-light: #777777;
6+
7+
--scrollbar-thumb-color: var(--scrollbar-thumb-light);
8+
--scrollbar-bg-color: var(--scrollbar-bg-light);
9+
}
10+
11+
::-webkit-scrollbar {
12+
width: 8px;
13+
height: 8px;
14+
background: var(--scrollbar-bg-color) !important;
15+
}
16+
17+
/* Handle */
18+
::-webkit-scrollbar-thumb {
19+
background: var(--scrollbar-thumb-color);
20+
border-radius: 4px;
21+
}
22+
23+
::-webkit-scrollbar-thumb:window-inactive {
24+
background: var(--scrollbar-thumb-color);
25+
border-radius: 4px;
26+
}
27+
28+
::selection {
29+
background: var(--scrollbar-thumb-color);
30+
color: var(--scrollbar-bg-color) !important;
31+
}

‎src/background.js

+37-2
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,42 @@ const pages = {
4343
};
4444
const aboutMenu = [
4545
{
46-
label: "About",
46+
label: "Report a bug",
47+
click: () => {
48+
shell.openExternal(process.env.VUE_APP_GITHUB_BUGS);
49+
},
50+
},
51+
{
52+
label: "Keyboard shortcuts",
53+
accelerator: "CommandOrControl+K",
54+
click: () => {
55+
const meta = isMac ? "Cmd" : "Ctrl";
56+
57+
dialog
58+
.showMessageBox(win, {
59+
type: "info",
60+
title: "Keyboard shortcuts",
61+
message:
62+
`Edit settings\t\t\t\t\t${meta} + COMMA\n` +
63+
`Toggle search\t\t\t\t\t${meta} + F\n` +
64+
`Notifications and logging\t\t${meta} + Shift + N\n` +
65+
`Reload the page\t\t\t\t${meta} + R\n` +
66+
`Force reload the page\t\t\t${meta} + Shift + R\n` +
67+
`Quit the app\t\t\t\t\t${meta} + Q\n` +
68+
`Show shortcuts\t\t\t\t${meta} + K\n` +
69+
`About the app\t\t\t\t\t${meta} + I`,
70+
buttons: ["Ok"],
71+
})
72+
.then(() => {
73+
// Do nothing, just close the dialog
74+
})
75+
.catch((err) => {
76+
if (isDevelopment) console.error(err);
77+
});
78+
},
79+
},
80+
{
81+
label: `About ${appName}`,
4782
accelerator: "CommandOrControl+I",
4883
click: () => {
4984
dialog
@@ -346,7 +381,7 @@ async function createWindow() {
346381
if (process.env.WEBPACK_DEV_SERVER_URL) {
347382
// Load the url of the dev server if in development mode
348383
await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
349-
if (!process.env.IS_TEST) win.webContents.openDevTools();
384+
if (!process.env.IS_TEST) win.webContents.openDevTools({ mode: "detach" });
350385
} else {
351386
createProtocol("app");
352387
// Load the index.html when not in development

‎src/main.js

+20-14
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ import Connection from "./utils/Connection";
88
import Store from "electron-store";
99
import { v4 as uuidv4 } from "uuid";
1010

11+
// Scrollbar CSS
12+
import "./assets/css/scrollbar.css";
13+
1114
document.documentElement.style.overflow = "hidden";
1215
Vue.config.productionTip = false;
1316

@@ -95,24 +98,27 @@ Vue.mixin({
9598
loadColors(color) {
9699
this.$vuetify.theme.themes.light.primary = color.value.light;
97100
this.$vuetify.theme.themes.dark.primary = color.value.dark;
101+
102+
this.loadCustomCssTheme(this.darkTheme);
98103
},
99104
loadCustomCssTheme(isDark) {
100-
const path = isDark
101-
? "/styles/dark-scrollbar.css"
102-
: "/styles/light-scrollbar.css";
103-
104-
const scrollTheme = document.createElement("link");
105-
const oldScroll = document.getElementById("scroll-bar");
105+
// Setup theme and colors
106+
const mode = isDark ? "dark" : "light";
107+
const primaryColor = isDark
108+
? this.primaryColor.value?.dark
109+
: this.primaryColor.value?.light;
106110

107-
scrollTheme.setAttribute("id", "scroll-bar");
108-
scrollTheme.setAttribute("rel", "stylesheet");
109-
scrollTheme.setAttribute("href", path);
111+
// Select the root style
112+
const rootStyle = document.querySelector(":root").style;
110113

111-
if (oldScroll != undefined) {
112-
oldScroll.parentElement.removeChild(oldScroll);
113-
}
114-
115-
document.head.appendChild(scrollTheme);
114+
rootStyle.setProperty(
115+
"--scrollbar-thumb-color",
116+
primaryColor || `var(--scrollbar-thumb-${mode})`
117+
);
118+
rootStyle.setProperty(
119+
"--scrollbar-bg-color",
120+
`var(--scrollbar-bg-${mode})`
121+
);
116122
},
117123
sendNotification(title, body, onClick = () => {}) {
118124
new window.Notification(title, { body }).onclick = onClick;

‎src/views/Home.vue

+35-1
Original file line numberDiff line numberDiff line change
@@ -174,15 +174,17 @@
174174
<v-list dense>
175175
<v-list-item>
176176
<v-list-item-action-text>
177-
Available shortcuts
177+
Keyboard shortcuts
178178
</v-list-item-action-text>
179179
</v-list-item>
180+
<!-- Settings -->
180181
<v-list-item link>
181182
<v-list-item-content>Edit settings</v-list-item-content>
182183
<v-list-item-action-text>
183184
{{ isMacOs ? "Cmd" : "Ctrl" }} + COMMA
184185
</v-list-item-action-text>
185186
</v-list-item>
187+
<!-- Filtering -->
186188
<v-list-item link>
187189
<v-list-item-content>Toggle search</v-list-item-content>
188190
<v-list-item-action-text>
@@ -195,6 +197,38 @@
195197
{{ isMacOs ? "Cmd" : "Ctrl" }} + Shift + N
196198
</v-list-item-action-text>
197199
</v-list-item>
200+
<!-- Window management -->
201+
<v-list-item link>
202+
<v-list-item-content>Reload the page</v-list-item-content>
203+
<v-list-item-action-text>
204+
{{ isMacOs ? "Cmd" : "Ctrl" }} + R
205+
</v-list-item-action-text>
206+
</v-list-item>
207+
<v-list-item link>
208+
<v-list-item-content>Force reload the page</v-list-item-content>
209+
<v-list-item-action-text>
210+
{{ isMacOs ? "Cmd" : "Ctrl" }} + Shift + R
211+
</v-list-item-action-text>
212+
</v-list-item>
213+
<v-list-item link>
214+
<v-list-item-content>Quit the app</v-list-item-content>
215+
<v-list-item-action-text>
216+
{{ isMacOs ? "Cmd" : "Ctrl" }} + Q
217+
</v-list-item-action-text>
218+
</v-list-item>
219+
<!-- Info -->
220+
<v-list-item link>
221+
<v-list-item-content>Show shortcuts dialog</v-list-item-content>
222+
<v-list-item-action-text>
223+
{{ isMacOs ? "Cmd" : "Ctrl" }} + K
224+
</v-list-item-action-text>
225+
</v-list-item>
226+
<v-list-item link>
227+
<v-list-item-content>About the app</v-list-item-content>
228+
<v-list-item-action-text>
229+
{{ isMacOs ? "Cmd" : "Ctrl" }} + I
230+
</v-list-item-action-text>
231+
</v-list-item>
198232
</v-list>
199233
</v-list>
200234

0 commit comments

Comments
 (0)