diff --git a/src/css/lang/zh-Hant/setting/main/box.css b/src/css/lang/zh-Hant/setting/main/box.css index 6e30d41..7509234 100644 --- a/src/css/lang/zh-Hant/setting/main/box.css +++ b/src/css/lang/zh-Hant/setting/main/box.css @@ -217,6 +217,12 @@ .loaded-badge::before { content: "已載入"; } +.success.message-box:before { + content: "操作成功！"; +} +.failed.message-box:before { + content: "操作失敗！"; +} .eew-1::before { content: "EEW（收到地震預警時播放）"; @@ -683,7 +689,7 @@ li { color: #fff; } -.reset-confirm-btn div { +.confirm-btn div { border-radius: 5px; border: 1px solid #ffffff24; padding: 5px; @@ -698,17 +704,17 @@ li { justify-content: center; } -.reset-confirm-btn div:hover { +.confirm-btn div:hover { background: #48484d; } -.reset-confirm-btn { +.confirm-btn { display: flex; margin-top: 1vw; color: #fff; } -.reset-confirm-btn span { +.confirm-btn span { font-size: 15px; } @@ -1271,3 +1277,47 @@ li { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } + +.message-wrapper { + display: flex; + position: fixed; + width: 100%; + bottom: 0%; + transition: bottom 0.3s ease; + z-index: 1001; + height: 100%; + justify-content: center; + align-items: flex-end; + pointer-events: none; +} + +.message-content { + color: #fff; + display: flex; + flex-direction: column; + justify-items: center; + align-items: center; + background-color: hsl(121.85deg 100% 57.58% / 44%); + backdrop-filter: blur(12px); + padding: 10px; + border-style: solid; + border-radius: 13px; + border: 1px solid #ffffff42; + justify-content: flex-end; + height: auto; + width: auto; + min-width: 100px; + bottom: 20px; + position: fixed; + font-size: 18px; + font-weight: bold; + opacity: 0; + transform: translateY(100%); + transition: opacity 0.3s ease, transform 0.3s ease; +} + +.message-content.success { + opacity: 1; + transform: translateY(0); + transition: opacity 0.3s ease, transform 0.3s ease; +} diff --git a/src/js/setting/main.js b/src/js/setting/main.js index 396820b..5c1861a 100644 --- a/src/js/setting/main.js +++ b/src/js/setting/main.js @@ -10,6 +10,8 @@ class Main { this.settingLeftBtns = document.querySelector('.setting-buttons'); this.settingContent = document.querySelector('.setting-content'); this.windowsWrapper = document.querySelector('.windows-wrapper'); + this.messageContent = document.querySelector('.message-content'); + this.messageBox = document.querySelector('.message-box'); this.settingTab = localStorage.getItem('setting-tab') || null; this.init(); this.info(); @@ -53,6 +55,18 @@ class Main { } } + showBubble(message, duration = 3000) { + if (!this.messageContent || !this.messageBox) { + console.error('Message elements not found'); + return; + } + this.messageBox.classList.add(message); + this.messageContent.classList.add(message); + setTimeout(() => { + this.messageContent.classList.remove(message); + }, duration); + } + info() { this.version.textContent = app.getVersion(); this.os.textContent = `${os.version()} (${os.release()})`; @@ -60,3 +74,4 @@ class Main { } } new Main(); +module.exports = Main; diff --git a/src/js/setting/plugin_list.js b/src/js/setting/plugin_list.js index 44713fd..d8ec22c 100644 --- a/src/js/setting/plugin_list.js +++ b/src/js/setting/plugin_list.js @@ -4,6 +4,8 @@ const fs = require('fs-extra'); class PluginList { constructor() { + this.store = require('./main'); + this.bubble = new this.store(); this.enablePluginList = JSON.parse(localStorage.getItem('enabled-plugins')) || []; this.pluginList = JSON.parse(localStorage.getItem('plugin-list')) || []; this.loadedPlugins = JSON.parse(localStorage.getItem('loaded-plugins')) || []; @@ -235,10 +237,14 @@ class PluginList { } hideConfirmWrapper() { + this.bubble.showBubble('success', 30000); this.extendedConfirmWrapper.classList.remove('extendedOpen'); this.extendedConfirmWrapper.style.bottom = '-100%'; this.ConfirmTitle.textContent = ''; clearInterval(this.interval); + setTimeout(() => { + ipcRenderer.send('all-reload'); + }, 4000); } } diff --git a/src/js/setting/reset.js b/src/js/setting/reset.js index 0ae12f8..da47a31 100644 --- a/src/js/setting/reset.js +++ b/src/js/setting/reset.js @@ -4,6 +4,8 @@ const { ipcRenderer } = require('electron'); class Reset { constructor() { this.data = null; + this.store = require('./main'); + this.bubble = new this.store(); this.resetButton = document.querySelector('.reset-button'); this.checkBoxes = document.querySelectorAll('.switch input'); this.resetConfirmWrapper = document.querySelector('.confirm-wrapper'); @@ -20,14 +22,19 @@ class Reset { this.addCountDown(confirmSureBtn); }); this.resetConfirmWrapper.addEventListener('click', (event) => { + if (!this.resetConfirmWrapper.classList.contains('reset')) { + return; + } const { classList } = event.target; if (classList[0] == 'confirm-sure') { - console.log(Config.getInstance().resetConfig()); - ipcRenderer.send('all-reload'); + this.resetConfirmWrapper.style.bottom = '-100%'; + this.bubble.showBubble('success', 30000); + Config.getInstance().resetConfig(); + setTimeout(() => { + ipcRenderer.send('all-reload'); + }, 4000); } else if (classList[0] == 'confirm-cancel') { - console.log(classList[0]); - this.resetConfirmWrapper.classList.add('reset'); this.resetConfirmWrapper.style.bottom = '-100%'; } }); diff --git a/src/view/setting.html b/src/view/setting.html index 57cbb17..5fb3fbf 100644 --- a/src/view/setting.html +++ b/src/view/setting.html @@ -1,398 +1,441 @@ + + + + + + + - - - - - - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
━
-
✖
+ +
+
+
+
+
+
+
+
+
+
-
-
-
-
- - -
-
- - - - -
-
-
-
+
+
+
━
+
✖
+
+
+
+
+
+ + +
+
+ + + + +
+
+
+
+
-
-
- - -
-
- - - - -
-
-
-
+
+ + +
+
+ + + + +
+
+
+
+
-
-
- - -
-
- - - - - - -
-
-
-
-
-
-
- - - - - - +
+ + +
+
+ + + + + + +
+
+
+
-
-
+
+
+ + + + + + +
+
+
+
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
-
-
- - -
-
- - +
+ + +
+
+ + +
-
-
- - -
-
- - -
-
- - +
+ + +
+
+ + +
+
+ + +
-
-
- -
-
- - +
+ +
+
+ + +
-
-
-
-
-
- - -
-
- - +
+
+
+
+ + +
+
+ + +
-
-
- - -
-
- - +
+ + +
+
+ + +
-
-
-
-
-
- - -
-
- - +
+
+
+
+ + +
+
+ + +
-
-
- - - -
-
- - -
-
- - - - -
-
- - -
-
- - - - -
-
- - - - -
-
- - -
-
- - - - -
-
- - - - -
-
- - - - -
-
- - +
+ + + +
+
+ + +
+
+ + + + +
+
+ + +
+
+ + + + +
+
+ + + + +
+
+ + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + +
-
-
-
-
-
- - -
-
-
+
+
+
+
+ + +
+
+
+
-
-
-
-
-
- - -
-
- - -
-
- - -
-
- - +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
-
-
- -
-
-
- -
    -
  • -
-
+
+ +
- -
    -
  • -
  • -
+
+ +
    +
  • +
+
+
+ +
    +
  • +
  • +
+
-
-
- - -
-
+
+ + +
- +
+ +
-
-
-
- -
-
-
+
+
+ +
+
+
+
+
+
+
+
+
-
- - - \ No newline at end of file + +