选择主题功能圆满成功
This commit is contained in:
shuaiplus committed
1 parent
3f1093aee3
commit
4e232d6838
5 files changed
+415
-22
No files matched your search
+31
-5
@@ -70,11 +70,13 @@
|
||||
|
||||
* {
|
||||
touch-action: pan-y;
|
||||
} .sidebar,
|
||||
}
|
||||
.sidebar,
|
||||
.rightbar,
|
||||
.settings-sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 60vw !important;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
height: 100dvh;
|
||||
@@ -85,7 +87,6 @@
|
||||
|
||||
.sidebar {
|
||||
left: 0;
|
||||
max-width: 70vw;
|
||||
transform: translateX(-100%);
|
||||
border-right: 1px solid #e0e0e0;
|
||||
}
|
||||
@@ -95,9 +96,6 @@
|
||||
}
|
||||
|
||||
.settings-sidebar {
|
||||
left: 0;
|
||||
max-width: 80vw;
|
||||
width: 80vw !important;
|
||||
transform: translateX(-100%);
|
||||
border-right: 1px solid #e0e0e0;
|
||||
z-index: 1001; /* Higher than normal sidebar */
|
||||
@@ -206,4 +204,32 @@
|
||||
.bubble.me.private-message .bubble-content {
|
||||
color: white !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* Mobile theme selector styles */
|
||||
/* 移动端主题选择器样式 */
|
||||
.theme-selector {
|
||||
gap: 8px;
|
||||
padding: 6px 2px;
|
||||
/* Ensure scrollbars are hidden on mobile too */
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
/* Improve touch scrolling */
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.theme-selector::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.theme-item {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
/* Prevent text selection on mobile */
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
/* Prevent touch callouts */
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
+77
-7
@@ -65,12 +65,12 @@ body {
|
||||
}
|
||||
|
||||
.settings-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 17.2px 18px 10px 17px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #dcdcdc;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 19.2px 18px 18px 12px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #dcdcdc;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.settings-back-btn {
|
||||
@@ -138,6 +138,77 @@ body {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* Theme selector styles */
|
||||
/* 主题选择器样式 */
|
||||
.theme-selector {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
overflow-x: auto;
|
||||
padding: 8px 4px;
|
||||
border-radius: 8px;
|
||||
background: #f8f9fa;
|
||||
/* Hide scrollbars */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.theme-selector::-webkit-scrollbar {
|
||||
display: none; /* Webkit browsers */
|
||||
}
|
||||
|
||||
.theme-selector.dragging {
|
||||
cursor: grabbing;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.theme-item {
|
||||
flex-shrink: 0;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 12px;
|
||||
border: 3px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
user-select: none;
|
||||
background-size: cover !important;
|
||||
background-position: center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.theme-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 9px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.theme-item:hover {
|
||||
border-color: #30a8f7;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(48, 168, 247, 0.25);
|
||||
}
|
||||
|
||||
.theme-item:hover::before {
|
||||
background: rgba(48, 168, 247, 0.1);
|
||||
}
|
||||
|
||||
.theme-item.active {
|
||||
border-color: #30a8f7;
|
||||
box-shadow: 0 0 0 2px rgba(48, 168, 247, 0.3);
|
||||
}
|
||||
|
||||
.theme-item.active::before {
|
||||
background: rgba(48, 168, 247, 0.15);
|
||||
}
|
||||
|
||||
/* Old settings panel - hide */
|
||||
.settings-panel {
|
||||
display: none !important;
|
||||
@@ -348,7 +419,6 @@ body {
|
||||
.main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-image: url(data:image/png;base64,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) !important;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
flex: 2.5;
|
||||
|
||||
+9
-2
@@ -25,6 +25,12 @@ import {
|
||||
notifyMessage // 通知信息提示 / Display notification message
|
||||
} from './util.settings.js';
|
||||
|
||||
// 从 util.theme.js 中导入主题功能函数
|
||||
// Import theme functions from util.theme.js
|
||||
import {
|
||||
initTheme // 初始化主题 / Initialize theme
|
||||
} from './util.theme.js';
|
||||
|
||||
// 从 util.dom.js 中导入常用 DOM 操作函数
|
||||
// Import common DOM manipulation functions from util.dom.js
|
||||
import {
|
||||
@@ -67,7 +73,8 @@ import { renderUserList, // 渲染用户列表 / Render user list
|
||||
// 设置全局配置参数
|
||||
// Set global configuration parameters
|
||||
window.config = {
|
||||
wsAddress: `${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}`, // WebSocket 服务器地址 / WebSocket server address
|
||||
//wsAddress: `${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}`, // WebSocket 服务器地址 / WebSocket server address
|
||||
wsAddress: `ws://127.0.0.1:8787`,
|
||||
debug: true // 是否开启调试模式 / Enable debug mode
|
||||
};
|
||||
|
||||
@@ -103,7 +110,6 @@ window.addEventListener('DOMContentLoaded', () => {
|
||||
preventSpaceInput($id('userName'));
|
||||
preventSpaceInput($id('roomName'));
|
||||
preventSpaceInput($id('password'));
|
||||
|
||||
// 初始化辅助功能和界面设置
|
||||
// Initialize autofill, input placeholders, and menus
|
||||
autofillRoomPwd();
|
||||
@@ -112,6 +118,7 @@ window.addEventListener('DOMContentLoaded', () => {
|
||||
setupImagePreview();
|
||||
setupEmojiPicker();
|
||||
initSettings();
|
||||
initTheme(); // 初始化主题 / Initialize theme
|
||||
const settingsBtn = $id('settings-btn'); // 设置按钮 / Settings button
|
||||
if (settingsBtn) {
|
||||
settingsBtn.onclick = (e) => {
|
||||
|
||||
+175
-8
@@ -10,11 +10,16 @@ import {
|
||||
addClass,
|
||||
removeClass
|
||||
} from './util.dom.js';
|
||||
|
||||
// Import theme utilities
|
||||
// 导入主题工具函数
|
||||
import { THEMES, getCurrentTheme, applyTheme } from './util.theme.js';
|
||||
// Default settings
|
||||
// 默认设置
|
||||
const DEFAULT_SETTINGS = {
|
||||
notify: false,
|
||||
sound: false
|
||||
sound: false,
|
||||
theme: 'theme1'
|
||||
};
|
||||
|
||||
// Load settings from localStorage
|
||||
@@ -37,11 +42,13 @@ function loadSettings() {
|
||||
function saveSettings(settings) {
|
||||
const {
|
||||
notify,
|
||||
sound
|
||||
sound,
|
||||
theme
|
||||
} = settings;
|
||||
localStorage.setItem('settings', JSON.stringify({
|
||||
notify,
|
||||
sound
|
||||
sound,
|
||||
theme
|
||||
}))
|
||||
}
|
||||
|
||||
@@ -68,8 +75,7 @@ function setupSettingsPanel() {
|
||||
const settingsContent = $id('settings-content');
|
||||
if (!settingsSidebar || !settingsContent) return;
|
||||
|
||||
const settings = loadSettings();
|
||||
// Create settings content HTML
|
||||
const settings = loadSettings(); // Create settings content HTML
|
||||
settingsContent.innerHTML = `
|
||||
<div class="settings-section">
|
||||
<div class="settings-section-title">通知设置</div>
|
||||
@@ -91,6 +97,14 @@ function setupSettingsPanel() {
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div> <div class="settings-section">
|
||||
<div class="settings-section-title">主题设置</div>
|
||||
<div class="theme-selector" id="theme-selector">
|
||||
${THEMES.map(theme => `
|
||||
<div class="theme-item ${settings.theme === theme.id ? 'active' : ''}" data-theme-id="${theme.id}" style="background: ${theme.background}; background-size: cover; background-position: center;">
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -133,8 +147,7 @@ function setupSettingsPanel() {
|
||||
settingsSidebar._notificationShown = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
on(soundCheckbox, 'change', e => {
|
||||
}); on(soundCheckbox, 'change', e => {
|
||||
settings.sound = e.target.checked;
|
||||
if (settings.sound) {
|
||||
settings.notify = false;
|
||||
@@ -143,6 +156,154 @@ function setupSettingsPanel() {
|
||||
saveSettings(settings);
|
||||
applySettings(settings)
|
||||
});
|
||||
// Theme selection event handlers
|
||||
// 主题选择事件处理
|
||||
const themeSelector = $('#theme-selector', settingsContent);
|
||||
if (themeSelector) {
|
||||
// Custom scrolling functionality
|
||||
// 自定义滚动功能
|
||||
let isDragging = false;
|
||||
let startX = 0;
|
||||
let scrollLeft = 0;
|
||||
|
||||
// Mouse wheel scrolling (vertical -> horizontal)
|
||||
// 鼠标滚轮滚动（垂直转水平）
|
||||
on(themeSelector, 'wheel', e => {
|
||||
e.preventDefault();
|
||||
const scrollAmount = e.deltaY * 0.5; // Adjust scroll sensitivity
|
||||
themeSelector.scrollLeft += scrollAmount;
|
||||
});
|
||||
// Mouse drag scrolling
|
||||
// 鼠标拖拽滚动
|
||||
let dragStartTime = 0;
|
||||
let hasDragged = false;
|
||||
|
||||
on(themeSelector, 'mousedown', e => {
|
||||
isDragging = true;
|
||||
hasDragged = false;
|
||||
dragStartTime = Date.now();
|
||||
startX = e.pageX - themeSelector.offsetLeft;
|
||||
scrollLeft = themeSelector.scrollLeft;
|
||||
themeSelector.classList.add('dragging');
|
||||
e.preventDefault(); // Prevent text selection
|
||||
});
|
||||
on(document, 'mousemove', e => {
|
||||
if (!isDragging) return;
|
||||
e.preventDefault();
|
||||
const x = e.pageX - themeSelector.offsetLeft;
|
||||
const walk = (x - startX) * 2; // Scroll speed multiplier
|
||||
const moved = Math.abs(walk);
|
||||
|
||||
// If moved more than 5px, consider it a drag
|
||||
if (moved > 5) {
|
||||
hasDragged = true;
|
||||
}
|
||||
|
||||
themeSelector.scrollLeft = scrollLeft - walk;
|
||||
});
|
||||
|
||||
on(document, 'mouseup', () => {
|
||||
if (isDragging) {
|
||||
isDragging = false;
|
||||
themeSelector.classList.remove('dragging');
|
||||
}
|
||||
});
|
||||
// Touch support for mobile
|
||||
// 移动端触摸支持
|
||||
let touchStartX = 0;
|
||||
let touchScrollLeft = 0;
|
||||
let touchStartTime = 0;
|
||||
let touchHasMoved = false;
|
||||
|
||||
on(themeSelector, 'touchstart', e => {
|
||||
touchStartX = e.touches[0].clientX;
|
||||
touchScrollLeft = themeSelector.scrollLeft;
|
||||
touchStartTime = Date.now();
|
||||
touchHasMoved = false;
|
||||
});
|
||||
|
||||
on(themeSelector, 'touchmove', e => {
|
||||
e.preventDefault();
|
||||
const touchX = e.touches[0].clientX;
|
||||
const walk = (touchStartX - touchX) * 1.5; // Touch scroll sensitivity
|
||||
|
||||
// If moved more than 10px, consider it a swipe
|
||||
if (Math.abs(walk) > 10) {
|
||||
touchHasMoved = true;
|
||||
}
|
||||
|
||||
themeSelector.scrollLeft = touchScrollLeft + walk;
|
||||
});
|
||||
|
||||
// Handle touch end for theme selection
|
||||
// 处理触摸结束的主题选择
|
||||
on(themeSelector, 'touchend', e => {
|
||||
// If user swiped, don't trigger theme selection
|
||||
// 如果用户滑动过，不触发主题选择
|
||||
if (touchHasMoved) {
|
||||
touchHasMoved = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if it was a quick tap
|
||||
// 检查是否是快速点击
|
||||
const tapDuration = Date.now() - touchStartTime;
|
||||
if (tapDuration > 300) {
|
||||
return;
|
||||
}
|
||||
|
||||
const themeItem = e.target.closest('.theme-item');
|
||||
if (themeItem) {
|
||||
const themeId = themeItem.dataset.themeId;
|
||||
if (themeId && themeId !== settings.theme) {
|
||||
// Update active state
|
||||
$$('.theme-item', themeSelector).forEach(item => {
|
||||
item.classList.remove('active');
|
||||
});
|
||||
themeItem.classList.add('active');
|
||||
|
||||
// Apply theme and save settings
|
||||
settings.theme = themeId;
|
||||
applyTheme(themeId);
|
||||
saveSettings(settings);
|
||||
}
|
||||
}
|
||||
});
|
||||
// Theme selection click handler
|
||||
// 主题选择点击处理器
|
||||
on(themeSelector, 'click', e => {
|
||||
// If user just dragged, don't trigger theme selection
|
||||
// 如果用户刚刚拖拽过，不触发主题选择
|
||||
if (hasDragged) {
|
||||
hasDragged = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// Also check if it was a quick click (less than 200ms and minimal movement)
|
||||
// 同时检查是否是快速点击（少于200ms且移动很少）
|
||||
const clickDuration = Date.now() - dragStartTime;
|
||||
if (clickDuration > 200) {
|
||||
return;
|
||||
}
|
||||
|
||||
const themeItem = e.target.closest('.theme-item');
|
||||
if (themeItem) {
|
||||
const themeId = themeItem.dataset.themeId;
|
||||
if (themeId && themeId !== settings.theme) {
|
||||
// Update active state
|
||||
$$('.theme-item', themeSelector).forEach(item => {
|
||||
item.classList.remove('active');
|
||||
});
|
||||
themeItem.classList.add('active');
|
||||
|
||||
// Apply theme and save settings
|
||||
settings.theme = themeId;
|
||||
applyTheme(themeId);
|
||||
saveSettings(settings);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Check if device is mobile
|
||||
@@ -207,7 +368,13 @@ function closeSettingsPanel() {
|
||||
// 页面加载时初始化设置
|
||||
function initSettings() {
|
||||
const settings = loadSettings();
|
||||
applySettings(settings)
|
||||
applySettings(settings);
|
||||
|
||||
// Apply theme from settings
|
||||
// 从设置中应用主题
|
||||
if (settings.theme) {
|
||||
applyTheme(settings.theme);
|
||||
}
|
||||
}
|
||||
|
||||
// Maximum notification text length
|
||||
|
||||
@@ -0,0 +1,123 @@
|
||||
// Theme utility functions
|
||||
// 主题工具函数
|
||||
|
||||
// Theme data - simplified structure
|
||||
// 主题数据 - 简化结构
|
||||
export const THEMES = [
|
||||
{
|
||||
id: 'theme1',
|
||||
background: 'url(data:image/png;base64,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)'
|
||||
},
|
||||
{
|
||||
id: 'theme2',
|
||||
background: 'url(data:image/png;base64,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)'
|
||||
},
|
||||
{
|
||||
id: 'theme3',
|
||||
background: 'url(data:image/png;base64,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)'
|
||||
},
|
||||
{
|
||||
id: 'theme4',
|
||||
background: 'url(data:image/png;base64,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)'
|
||||
},
|
||||
{
|
||||
id: 'theme5',
|
||||
background: 'url(data:image/png;base64,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)'
|
||||
},
|
||||
{
|
||||
id: 'theme6',
|
||||
background: 'url(data:image/png;base64,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)'
|
||||
},
|
||||
{
|
||||
id: 'theme7',
|
||||
background: 'url(data:image/png;base64,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)'
|
||||
}, {
|
||||
id: 'theme8',
|
||||
background: 'url(data:image/png;base64,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)'
|
||||
}
|
||||
];
|
||||
|
||||
// Get current theme from settings
|
||||
// 从设置中获取当前主题
|
||||
export function getCurrentTheme() {
|
||||
try {
|
||||
const settings = JSON.parse(localStorage.getItem('settings') || '{}');
|
||||
|
||||
// If no theme is set (first-time visitor), randomly select one
|
||||
// 如果没有设置主题（首次访问），随机选择一个
|
||||
if (!settings.theme) {
|
||||
const randomIndex = Math.floor(Math.random() * THEMES.length);
|
||||
const randomTheme = THEMES[randomIndex];
|
||||
|
||||
// Save the randomly selected theme to settings
|
||||
// 将随机选择的主题保存到设置中
|
||||
settings.theme = randomTheme.id;
|
||||
localStorage.setItem('settings', JSON.stringify(settings));
|
||||
|
||||
return randomTheme;
|
||||
}
|
||||
|
||||
const themeId = settings.theme;
|
||||
return THEMES.find(theme => theme.id === themeId) || THEMES[0];
|
||||
} catch {
|
||||
// If there's an error, select a random theme for fallback
|
||||
// 如果出现错误，随机选择一个主题作为备选
|
||||
const randomIndex = Math.floor(Math.random() * THEMES.length);
|
||||
return THEMES[randomIndex];
|
||||
}
|
||||
}
|
||||
|
||||
// Apply theme to the document
|
||||
// 应用主题到文档
|
||||
export function applyTheme(themeId) {
|
||||
const theme = THEMES.find(t => t.id === themeId);
|
||||
if (!theme) {
|
||||
console.warn(`Theme with id "${themeId}" not found`);
|
||||
return false;
|
||||
}
|
||||
|
||||
const mainElement = document.querySelector('.main');
|
||||
if (mainElement) {
|
||||
// Clear any existing background
|
||||
mainElement.style.backgroundImage = '';
|
||||
mainElement.style.background = '';
|
||||
|
||||
// Apply new background
|
||||
if (theme.background.startsWith('url(')) {
|
||||
mainElement.style.backgroundImage = theme.background;
|
||||
mainElement.style.backgroundSize = '100% 100%';
|
||||
mainElement.style.backgroundRepeat = 'no-repeat';
|
||||
mainElement.style.backgroundPosition = 'center';
|
||||
} else {
|
||||
mainElement.style.background = theme.background;
|
||||
}
|
||||
// Add transition effect for smooth theme switching
|
||||
// 添加过渡效果，实现平滑的主题切换
|
||||
mainElement.style.transition = 'background 0.5s ease-in-out, background-image 0.5s ease-in-out';
|
||||
|
||||
console.log(`Applied theme: ${themeId}`);
|
||||
return true;
|
||||
} else {
|
||||
console.warn('Main element not found');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize theme on page load
|
||||
// 页面加载时初始化主题
|
||||
export function initTheme() {
|
||||
const currentTheme = getCurrentTheme();
|
||||
applyTheme(currentTheme.id);
|
||||
}
|
||||
|
||||
// Get theme by ID
|
||||
// 根据ID获取主题
|
||||
export function getThemeById(themeId) {
|
||||
return THEMES.find(theme => theme.id === themeId);
|
||||
}
|
||||
|
||||
// Get all available themes
|
||||
// 获取所有可用主题
|
||||
export function getAllThemes() {
|
||||
return THEMES;
|
||||
}
|
||||
Reference in new issue
Block a user