Skip to content

Commit

Permalink
feat: setting message bubble
Browse files Browse the repository at this point in the history
cstrikeasia committed Dec 2, 2024
1 parent e2a3094 commit 2848f27
Showing 5 changed files with 473 additions and 352 deletions.
58 changes: 54 additions & 4 deletions src/css/lang/zh-Hant/setting/main/box.css
Original file line number Diff line number Diff line change
@@ -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;
}
15 changes: 15 additions & 0 deletions src/js/setting/main.js
Original file line number Diff line number Diff line change
@@ -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,10 +55,23 @@ 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()})`;
this.cpu.textContent = os.cpus()[0].model;
}
}
new Main();
module.exports = Main;
6 changes: 6 additions & 0 deletions src/js/setting/plugin_list.js
Original file line number Diff line number Diff line change
@@ -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);
}
}

15 changes: 11 additions & 4 deletions src/js/setting/reset.js
Original file line number Diff line number Diff line change
@@ -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%';
}
});
Loading

0 comments on commit 2848f27

Please sign in to comment.