From 4c06442eb1ac17948b4dea775b4d19f4ec2c6cc6 Mon Sep 17 00:00:00 2001 From: ysfscream <894402575@qq.com> Date: Mon, 18 Nov 2019 11:15:46 +0800 Subject: [PATCH 01/11] fix(update): modify variable name --- main/updateChecker.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/main/updateChecker.ts b/main/updateChecker.ts index 3c4444f7e..e5d47520c 100644 --- a/main/updateChecker.ts +++ b/main/updateChecker.ts @@ -8,15 +8,15 @@ const downloadUrl: string = 'https://github.com/emqx/MQTTX/releases/latest' const isUpdate = (latest: string, current: string): boolean => { const latestVersion: number[] = latest.split('.').map((item) => parseInt(item, 10)) const currentVersion: number[] = current.split('.').map((item) => parseInt(item, 10)) - let isMin: boolean = false + let update: boolean = false for (let i: number = 0; i < 3; i++) { if (currentVersion[i] < latestVersion[i]) { - isMin = true + update = true } } - return isMin + return update } const updateChecker = async (isAuto: boolean = true): Promise => { From a2447f1ec95c29011e03e040f312d5c6950a84b8 Mon Sep 17 00:00:00 2001 From: ysfscream <894402575@qq.com> Date: Mon, 18 Nov 2019 17:51:50 +0800 Subject: [PATCH 02/11] style(main): add dark theme --- src/assets/images/mqttx-dark.png | Bin 0 -> 5777 bytes .../images/{mqttx.png => mqttx-light.png} | Bin src/assets/scss/element/element-reset.scss | 71 +++++++++++++++++- src/assets/scss/theme/dark.scss | 26 +++++-- src/assets/scss/theme/light.scss | 3 +- src/background.ts | 22 +++--- src/components/LeftPanel.vue | 2 +- src/components/SearchTopbar.vue | 2 +- src/views/Home.vue | 4 +- src/views/brokers/BrokersList.vue | 5 +- src/views/connections/ConnectionsList.vue | 3 +- src/views/connections/MsgPublish.vue | 35 +++++---- src/views/connections/SubscriptionsList.vue | 7 +- src/views/settings/SettingsLeft.vue | 11 ++- src/views/settings/index.vue | 17 ++--- 15 files changed, 154 insertions(+), 54 deletions(-) create mode 100644 src/assets/images/mqttx-dark.png rename src/assets/images/{mqttx.png => mqttx-light.png} (100%) diff --git a/src/assets/images/mqttx-dark.png b/src/assets/images/mqttx-dark.png new file mode 100644 index 0000000000000000000000000000000000000000..bbe85c328ffe29d98c22be4997dc0acd155e68eb GIT binary patch literal 5777 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 literal 0 HcmV?d00001 diff --git a/src/assets/images/mqttx.png b/src/assets/images/mqttx-light.png similarity index 100% rename from src/assets/images/mqttx.png rename to src/assets/images/mqttx-light.png diff --git a/src/assets/scss/element/element-reset.scss b/src/assets/scss/element/element-reset.scss index 1df4e201d..52b91466f 100644 --- a/src/assets/scss/element/element-reset.scss +++ b/src/assets/scss/element/element-reset.scss @@ -25,7 +25,8 @@ /* Card */ .el-card { - border: 1px solid #E6E8F1; + border: 1px solid var(--color-border-default); + background-color: var(--color-bg-normal); } /* Form */ @@ -35,12 +36,18 @@ } .el-form-item__content { span { - color: var(--color-text-title); + color: var(--color-text-default); } } .el-select { width: 100%; } + .el-form-item.is-success .el-input__inner, + .el-form-item.is-success .el-input__inner:focus, + .el-form-item.is-success .el-textarea__inner, + .el-form-item.is-success .el-textarea__inner:focus { + border-color: var(--color-main-green); + } } /* Icon */ @@ -55,6 +62,10 @@ border: 2px solid var(--color-main-green); color: var(--color-main-green); } +.el-button.is-plain:hover, +.el-button.is-plain:focus { + background: var(--color-bg-normal); +} /* Cascader */ .el-cascader { @@ -64,13 +75,22 @@ /* Message */ .el-message-box { border-radius: 2px; + background-color: var(--color-bg-messagebox); + border-color: var(--color-border-default); + .el-message-box__title { + color: var(--color-text-title); + } + .el-message-box__content { + color: var(--color-text-default); + } } .el-message-box__btns { font-size: 14px; .el-button--small { font-size: 14px; border: none; - color: var(--color-text-default); + color: var(--color-text-light); + background: transparent; &:hover { color: var(--color-second-green); background: transparent; @@ -92,8 +112,53 @@ /* Notification */ .el-notification { border-radius: 4px; + background-color: var(--color-bg-messagebox); + border-color: var(--color-border-bold); .el-notification__title { color: var(--color-text-title); font-weight: normal; } } + +/* Dialog */ +.el-dialog { + background: var(--color-bg-normal); +} + +/* Input */ +.el-input { + .el-input__inner { + background: var(--color-bg-normal); + border: 1px solid var(--color-border-default); + color: var(--color-text-default); + &::placeholder { + color: var(--color-text-light); + } + } +} +.el-textarea { + .el-textarea__inner { + background: var(--color-bg-normal); + border: 1px solid var(--color-border-default); + color: var(--color-text-default); + } +} + +/* Popper */ +.el-popper { + background: var(--color-bg-messagebox); + border-color: var(--color-border-default); + li { + color: var(--color-text-default); + } +} +.el-popper[x-placement^="bottom"] .popper__arrow { + border-bottom-color: var(--color-border-default); + &::after { + border-bottom-color: var(--color-bg-messagebox); + } +} +.el-select-dropdown__item.hover, +.el-select-dropdown__item:hover { + background: var(--color-bg-connection_item); +} diff --git a/src/assets/scss/theme/dark.scss b/src/assets/scss/theme/dark.scss index e4a2c3922..eec00e1cf 100644 --- a/src/assets/scss/theme/dark.scss +++ b/src/assets/scss/theme/dark.scss @@ -1,19 +1,31 @@ body.dark { /* Backgroud color */ - --color-bg-primary: #747272; - --color-bg-tabs: #F8F8F8; - --color-bg-tabs_hover: #F8F8F8; + --color-bg-normal: #282828; + --color-bg-primary: #232323; + --color-bg-tabs: #484848; + --color-bg-tabs_hover: #303030; + --color-bg-connection_item: #395449; + --color-bg-connection_status: #9EA3B1; + --color-bg-input: #323232; + --color-bg-messagebox: #303133; /* Font color */ - --color-text-title: #262626; - --color-text-default: #616161; - --color-text-light: #A2A9B0; + --color-text-title: #ffffff; + --color-text-default: #d3d3d3; + --color-text-light: #a3a3a3; --color-text-tips: #B4B4B4; + --color-text-right_info: #ADE7CF; + --color-text-left_info: #959599; /* Accent color */ --color-main-green: #34C388; --color-second-green: #53DAA2; + --color-thrid-green: #EBF8F2; + --color-main-red: #E86AA6; + --color-second-red: #EF607C; + --color-main-grey: #323232; /* Border color */ - --color-border-default: #E6E8F1; + --color-border-default: #383838; + --color-border-bold: #969696; } diff --git a/src/assets/scss/theme/light.scss b/src/assets/scss/theme/light.scss index 62c8621ad..042ec4168 100644 --- a/src/assets/scss/theme/light.scss +++ b/src/assets/scss/theme/light.scss @@ -1,12 +1,13 @@ body.light { /* Backgroud color */ --color-bg-normal: #ffffff; - --color-bg-accent: #f1f1f1; --color-bg-primary: #F9FAFD; --color-bg-tabs: #F8F8F8; --color-bg-tabs_hover: #F8F8F8; --color-bg-connection_item: #EBF8F2; --color-bg-connection_status: #9EA3B1; + --color-bg-input: #ffffff; + --color-bg-messagebox: #ffffff; /* Font color */ --color-text-title: #262626; diff --git a/src/background.ts b/src/background.ts index 58d48e859..0e26cde7a 100644 --- a/src/background.ts +++ b/src/background.ts @@ -1,7 +1,7 @@ 'use strict' import { - app, protocol, BrowserWindow, ipcMain, shell, Menu, + app, protocol, BrowserWindow, ipcMain, shell, Menu, systemPreferences, } from 'electron' import { createProtocol, @@ -11,7 +11,15 @@ import db from './datastore/index' import updateChecker from '../main/updateChecker' import getMenuTemplate from '../main/getMenuTemplate' +interface WindowSizeModel { + width: number, + height: number, +} + +declare const __static: string + const isDevelopment = process.env.NODE_ENV !== 'production' +const isDarkMode = systemPreferences.isDarkMode() // Keep a global reference of the window object, if you don't, the window will // be closed automatically when the JavaScript object is garbage collected. @@ -31,22 +39,18 @@ function handleIpcMessages() { }) } -interface WindowSizeModel { - width: number, - height: number, -} - -declare const __static: string - function createWindow() { const windowSize = db.get('windowSize') + const theme = db.get<'light' | 'dark'>('settings.currentTheme') // Create the browser window. win = new BrowserWindow({ ...windowSize, webPreferences: { + devTools: isDevelopment, webSecurity: false, nodeIntegration: true, }, + backgroundColor: theme === 'dark' ? '#232323' : '#ffffff', icon: `${__static}/app.ico`, }) @@ -91,7 +95,7 @@ app.on('activate', () => { // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs. app.on('ready', async () => { - const autoCheckUpdate = db.get('settings.autoCheck') + const autoCheckUpdate = db.get('settings.autoCheck') if (isDevelopment && !process.env.IS_TEST) { // Install Vue Devtools try { diff --git a/src/components/LeftPanel.vue b/src/components/LeftPanel.vue index 6bf82f201..85dd4fb71 100644 --- a/src/components/LeftPanel.vue +++ b/src/components/LeftPanel.vue @@ -23,7 +23,7 @@ export default class LeftPanel extends Vue {} left: 279px; z-index: 1; width: 250px; - background: #fff; + background: var(--color-bg-normal); border-radius: 0; top: 0; bottom: 0; diff --git a/src/components/SearchTopbar.vue b/src/components/SearchTopbar.vue index 9b06a694f..e075c6be4 100644 --- a/src/components/SearchTopbar.vue +++ b/src/components/SearchTopbar.vue @@ -46,7 +46,7 @@ export default class SearchTopbar extends Vue { .el-input { width: 215px; .el-input__inner { - background: var(--color-bg-primary); + background: var(--color-bg-input); } .icon-search, .el-icon-loading { margin-left: 3px; diff --git a/src/views/Home.vue b/src/views/Home.vue index ddb88f899..db4f753a9 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -17,8 +17,8 @@ import Ipc from '@/components/Ipc.vue' }, }) export default class Home extends Vue { - @Getter('currentTheme') private getterTheme: any - @Getter('currentLang') private getterLang: any + @Getter('currentTheme') private getterTheme!: 'dark' | 'light' + @Getter('currentLang') private getterLang!: string private setTheme(currentTheme: string): void { const bodyTag: HTMLBodyElement | null = document.querySelector('body') diff --git a/src/views/brokers/BrokersList.vue b/src/views/brokers/BrokersList.vue index 4b7b24067..b0949f314 100644 --- a/src/views/brokers/BrokersList.vue +++ b/src/views/brokers/BrokersList.vue @@ -10,7 +10,7 @@
{{ broker.brokerName }}
@@ -33,6 +33,7 @@ + + diff --git a/src/components/SearchTopbar.vue b/src/components/SearchTopbar.vue index e075c6be4..712064292 100644 --- a/src/components/SearchTopbar.vue +++ b/src/components/SearchTopbar.vue @@ -1,5 +1,5 @@