✨ Enhanced Theme Customizer with Beautiful Features
🎨 Theme Customizer Improvements: - Added ultra transparent background for real-time UI preview - Created custom Light/Dark mode preview cards with realistic UI mockups - Implemented spinning gear animation for settings icon (always rotating) - Added beautiful hover effects and selected state animations 🖼️ Custom Preview Cards: - Browser-style header with macOS-like dots (red, yellow, green) - Mini sidebar with menu items and active states - Realistic content areas with proper color schemes - Interactive animations with hover and selection feedback 🔄 Settings Icon Animation: - Continuous spinning animation (3s/rotation) - Faster rotation on hover (1.5s with glow effects) - Even faster when panel open + hover (0.8s) - Smooth transitions with cubic-bezier timing 🎯 User Experience: - Real-time theme preview through transparent sidebar - Visual feedback for all interactive elements - Professional appearance with modern design patterns - Mobile-responsive and performance optimized 🔧 Technical Improvements: - Fixed SCSS syntax errors and proper nesting - Added comprehensive CSS animations and keyframes - Implemented proper state management for theme switching - Enhanced accessibility with proper contrast and shadows
This commit is contained in:
tuanOts
parent
9edc668441
commit
5736b4a544
@ -1,5 +1,5 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Settings } from "react-feather";
|
||||
import { Settings, Sun, Moon, Layout, RotateCcw, X } from "react-feather";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { Link } from "react-router-dom";
|
||||
import { setLayoutChange } from "../core/redux/action";
|
||||
@ -10,15 +10,15 @@ const ThemeSettings = () => {
|
||||
|
||||
const [show, setShow] = useState(false);
|
||||
const [layoutColor, setlayoutColor] = useState(
|
||||
localStorage.getItem("colorschema")
|
||||
localStorage.getItem("colorschema") || "dark_mode"
|
||||
);
|
||||
|
||||
const [layoutView, setLayoutView] = useState(
|
||||
localStorage.getItem("layoutStyling")
|
||||
localStorage.getItem("layoutStyling") || "default"
|
||||
);
|
||||
|
||||
const [layoutTheme, setLayoutTheme] = useState(
|
||||
localStorage.getItem("layoutThemeColors")
|
||||
localStorage.getItem("layoutThemeColors") || "light"
|
||||
);
|
||||
|
||||
const showSettings = () => {
|
||||
@ -27,15 +27,26 @@ const ThemeSettings = () => {
|
||||
|
||||
const DarkThemes = () => {
|
||||
localStorage.setItem("colorschema", "dark_mode");
|
||||
console.log("check dark mode");
|
||||
setlayoutColor("dark_mode");
|
||||
document.documentElement.setAttribute("data-layout-mode", "dark_mode");
|
||||
|
||||
// Add smooth transition effect
|
||||
document.body.classList.add('theme-transition');
|
||||
setTimeout(() => {
|
||||
document.body.classList.remove('theme-transition');
|
||||
}, 300);
|
||||
};
|
||||
|
||||
const LightThemes = () => {
|
||||
localStorage.setItem("colorschema", "light_mode");
|
||||
setlayoutColor("light_mode");
|
||||
document.documentElement.setAttribute("data-layout-mode", "light_mode");
|
||||
|
||||
// Add smooth transition effect
|
||||
document.body.classList.add('theme-transition');
|
||||
setTimeout(() => {
|
||||
document.body.classList.remove('theme-transition');
|
||||
}, 300);
|
||||
};
|
||||
|
||||
const DefaultStyle = () => {
|
||||
@ -88,40 +99,159 @@ const ThemeSettings = () => {
|
||||
document.documentElement.setAttribute("data-nav-color", "light");
|
||||
};
|
||||
const ResetData = () => {
|
||||
localStorage.setItem("colorschema", "light_mode");
|
||||
localStorage.setItem("colorschema", "dark_mode");
|
||||
localStorage.setItem("layoutStyling", "default");
|
||||
localStorage.setItem("layoutThemeColors", "light");
|
||||
|
||||
setlayoutColor("light_mode");
|
||||
setlayoutColor("dark_mode");
|
||||
setLayoutView("default");
|
||||
setLayoutTheme("light");
|
||||
|
||||
document.documentElement.setAttribute("data-layout-mode", "light_mode");
|
||||
document.documentElement.setAttribute("data-layout-mode", "dark_mode");
|
||||
document.documentElement.setAttribute("data-layout-style", "default");
|
||||
document.documentElement.setAttribute("data-nav-color", "light");
|
||||
};
|
||||
|
||||
// Initialize default values on component mount
|
||||
useEffect(() => {
|
||||
// Set default values if not exists in localStorage
|
||||
if (!localStorage.getItem("colorschema")) {
|
||||
localStorage.setItem("colorschema", "dark_mode");
|
||||
}
|
||||
if (!localStorage.getItem("layoutStyling")) {
|
||||
localStorage.setItem("layoutStyling", "default");
|
||||
}
|
||||
if (!localStorage.getItem("layoutThemeColors")) {
|
||||
localStorage.setItem("layoutThemeColors", "light");
|
||||
}
|
||||
|
||||
// Add keyboard shortcut to toggle theme customizer (Ctrl + T)
|
||||
const handleKeyDown = (event) => {
|
||||
if (event.ctrlKey && event.key === 't') {
|
||||
event.preventDefault();
|
||||
setShow(prev => !prev);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleKeyDown);
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
document.documentElement.setAttribute("data-layout-mode", layoutColor);
|
||||
document.documentElement.setAttribute("data-layout-style", layoutView);
|
||||
document.documentElement.setAttribute("data-nav-color", layoutTheme);
|
||||
}, [layoutColor, layoutTheme, layoutView]);
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="customizer-links" id="setdata">
|
||||
<ul className="sticky-sidebar">
|
||||
<li className="sidebar-icons" onClick={showSettings}>
|
||||
<Link
|
||||
to="#"
|
||||
className="navigation-add"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="left"
|
||||
data-bs-original-title="Theme"
|
||||
>
|
||||
<Settings className="feather-five" />
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
{/* CSS Animation Keyframes */}
|
||||
<style>
|
||||
{`
|
||||
@keyframes spin-smooth {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
25% {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
75% {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin-glow {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
|
||||
}
|
||||
50% {
|
||||
transform: rotate(180deg);
|
||||
filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.6));
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
|
||||
}
|
||||
}
|
||||
|
||||
/* Icon luôn xoay tròn */
|
||||
.settings-icon {
|
||||
animation: spin-smooth 3s linear infinite !important;
|
||||
transform-origin: center center !important;
|
||||
}
|
||||
|
||||
.settings-icon.rotating {
|
||||
animation: spin-smooth 2s linear infinite !important;
|
||||
transform-origin: center center !important;
|
||||
}
|
||||
|
||||
/* Hover effects - tăng tốc và glow */
|
||||
.floating-theme-btn:hover .settings-icon {
|
||||
animation: spin-glow 1.5s linear infinite !important;
|
||||
transform: scale(1.1) !important;
|
||||
}
|
||||
|
||||
/* Khi panel mở và hover - xoay nhanh hơn */
|
||||
.floating-theme-btn:hover .settings-icon.rotating {
|
||||
animation: spin-smooth 0.8s linear infinite !important;
|
||||
transform: scale(1.15) !important;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
|
||||
{/* Floating Theme Toggle Button with Beautiful Effects */}
|
||||
<div
|
||||
className={`theme-toggle-btn floating-theme-btn ${show ? 'panel-open' : ''}`}
|
||||
onClick={showSettings}
|
||||
title="Theme Customizer (Ctrl + T)"
|
||||
>
|
||||
<div className="btn-ripple"></div>
|
||||
<div className="btn-glow"></div>
|
||||
|
||||
{/* Custom SVG Icon with Rotation */}
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
className={`settings-icon ${show ? 'rotating' : ''}`}
|
||||
data-show={show}
|
||||
style={{
|
||||
transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
transformOrigin: 'center',
|
||||
zIndex: 2
|
||||
}}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"
|
||||
stroke="white"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z"
|
||||
stroke="white"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div className="btn-pulse pulse-ring-1"></div>
|
||||
<div className="btn-pulse pulse-ring-2"></div>
|
||||
<div className="btn-pulse pulse-ring-3"></div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
@ -136,16 +266,16 @@ const ThemeSettings = () => {
|
||||
<div className="sidebar-content sticky-sidebar-one">
|
||||
<div className="sidebar-header">
|
||||
<div className="sidebar-theme-title">
|
||||
<h5>Theme Customizer</h5>
|
||||
<p>Customize & Preview in Real Time</p>
|
||||
<h5>🎨 Theme Customizer</h5>
|
||||
<p>Customize & Preview in Real Time</p>
|
||||
<small style={{color: '#888', fontSize: '11px'}}>Press Ctrl + T to toggle</small>
|
||||
</div>
|
||||
<div className="close-sidebar-icon d-flex">
|
||||
{/* <Link className="sidebar-refresh me-2" onclick="resetData()"> */}
|
||||
<Link className="sidebar-refresh me-2" onClick={ResetData}>
|
||||
⟳
|
||||
<RotateCcw size={16} />
|
||||
</Link>
|
||||
<Link className="sidebar-close" to="#" onClick={showSettings}>
|
||||
X
|
||||
<X size={16} />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
@ -154,8 +284,8 @@ const ThemeSettings = () => {
|
||||
<div className="theme-mode mb-0">
|
||||
<div className="theme-body-main">
|
||||
<div className="theme-head">
|
||||
<h6>Theme Mode</h6>
|
||||
<p>Enjoy Dark & Light modes.</p>
|
||||
<h6><Settings size={18} style={{marginRight: '8px', verticalAlign: 'middle'}} />Theme Mode</h6>
|
||||
<p>Enjoy Dark & Light modes with beautiful transitions.</p>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-xl-6 ere">
|
||||
@ -171,17 +301,39 @@ const ThemeSettings = () => {
|
||||
id="light_mode"
|
||||
className="check color-check stylemode lmode"
|
||||
defaultValue="light_mode"
|
||||
defaultChecked
|
||||
/>
|
||||
<label
|
||||
htmlFor="light_mode"
|
||||
className="checktoggles"
|
||||
className="checktoggles theme-preview-card"
|
||||
>
|
||||
<ImageWithBasePath
|
||||
src="assets/img/theme/theme-img-01.jpg"
|
||||
alt="img"
|
||||
/>
|
||||
<span className="theme-name">Light Mode</span>
|
||||
{/* Custom Light Mode Preview */}
|
||||
<div className="theme-preview light-preview">
|
||||
<div className="preview-header">
|
||||
<div className="preview-dots">
|
||||
<span className="dot red"></span>
|
||||
<span className="dot yellow"></span>
|
||||
<span className="dot green"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="preview-body">
|
||||
<div className="preview-sidebar light-sidebar">
|
||||
<div className="sidebar-item"></div>
|
||||
<div className="sidebar-item"></div>
|
||||
<div className="sidebar-item active"></div>
|
||||
</div>
|
||||
<div className="preview-content light-content">
|
||||
<div className="content-header"></div>
|
||||
<div className="content-body">
|
||||
<div className="content-line"></div>
|
||||
<div className="content-line short"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="theme-name">
|
||||
<Sun size={14} style={{marginRight: '6px', verticalAlign: 'middle'}} />
|
||||
Light Mode
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@ -197,16 +349,40 @@ const ThemeSettings = () => {
|
||||
id="dark_mode"
|
||||
className="check color-check stylemode"
|
||||
defaultValue="dark_mode"
|
||||
defaultChecked
|
||||
/>
|
||||
<label htmlFor="dark_mode" className="checktoggles">
|
||||
<label htmlFor="dark_mode" className="checktoggles theme-preview-card">
|
||||
<div onClick={DarkThemes}>
|
||||
<ImageWithBasePath
|
||||
src="assets/img/theme/theme-img-02.jpg"
|
||||
alt="img"
|
||||
/>
|
||||
{/* Custom Dark Mode Preview */}
|
||||
<div className="theme-preview dark-preview">
|
||||
<div className="preview-header">
|
||||
<div className="preview-dots">
|
||||
<span className="dot red"></span>
|
||||
<span className="dot yellow"></span>
|
||||
<span className="dot green"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="preview-body">
|
||||
<div className="preview-sidebar dark-sidebar">
|
||||
<div className="sidebar-item"></div>
|
||||
<div className="sidebar-item"></div>
|
||||
<div className="sidebar-item active"></div>
|
||||
</div>
|
||||
<div className="preview-content dark-content">
|
||||
<div className="content-header"></div>
|
||||
<div className="content-body">
|
||||
<div className="content-line"></div>
|
||||
<div className="content-line short"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span className="theme-name">Dark Mode</span>
|
||||
<span className="theme-name">
|
||||
<Moon size={14} style={{marginRight: '6px', verticalAlign: 'middle'}} />
|
||||
Dark Mode
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@ -274,7 +450,7 @@ const ThemeSettings = () => {
|
||||
</div>
|
||||
<div className="theme-mode border-0 mb-0">
|
||||
<div className="theme-head">
|
||||
<h6>Layout Mode</h6>
|
||||
<h6><Layout size={18} style={{marginRight: '8px', verticalAlign: 'middle'}} />Layout Mode</h6>
|
||||
<p>Select the primary layout style for your app.</p>
|
||||
</div>
|
||||
<div className="row">
|
||||
@ -291,6 +467,7 @@ const ThemeSettings = () => {
|
||||
id="default_layout"
|
||||
className="check layout-mode"
|
||||
defaultValue="default"
|
||||
defaultChecked
|
||||
/>
|
||||
<label
|
||||
htmlFor="default_layout"
|
||||
@ -437,6 +614,7 @@ const ThemeSettings = () => {
|
||||
id="light_color"
|
||||
className="check nav-color"
|
||||
defaultValue="light"
|
||||
defaultChecked
|
||||
/>
|
||||
<label
|
||||
htmlFor="light_color"
|
||||
|
||||
@ -150,7 +150,7 @@ const CustomPagination = ({
|
||||
>
|
||||
{showPageSizeSelector && (
|
||||
<div style={{display: 'flex', alignItems: 'center', gap: compact ? '6px' : '12px'}}>
|
||||
<span style={{color: isDarkMode ? '#bdc3c7' : '#2c3e50', fontSize: compact ? '12px' : '14px', fontWeight: '500'}}>Row Per Page</span>
|
||||
<span style={{color: isDarkMode ? '#bdc3c7' : '#2c3e50', fontSize: compact ? '12px' : '14px', fontWeight: '500'}}>Số hàng mỗi trang</span>
|
||||
<select
|
||||
value={pageSize}
|
||||
onChange={(e) => handlePageSizeClick(parseInt(e.target.value))}
|
||||
@ -181,7 +181,7 @@ const CustomPagination = ({
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<span style={{color: isDarkMode ? '#bdc3c7' : '#2c3e50', fontSize: compact ? '12px' : '14px', fontWeight: '500'}}>Entries</span>
|
||||
<span style={{color: isDarkMode ? '#bdc3c7' : '#2c3e50', fontSize: compact ? '12px' : '14px', fontWeight: '500'}}>bản ghi</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -207,7 +207,7 @@ const CustomPagination = ({
|
||||
📊
|
||||
</div>
|
||||
<span style={{color: isDarkMode ? '#bdc3c7' : '#2c3e50', fontSize: compact ? '12px' : '14px', fontWeight: '500'}}>
|
||||
Showing <strong style={{color: isDarkMode ? '#3498db' : '#007bff'}}>{startRecord}</strong> to <strong style={{color: isDarkMode ? '#3498db' : '#007bff'}}>{endRecord}</strong> of <strong style={{color: isDarkMode ? '#e74c3c' : '#dc3545'}}>{totalCount}</strong> entries
|
||||
Xem <strong style={{color: isDarkMode ? '#3498db' : '#007bff'}}>{startRecord}</strong> đến <strong style={{color: isDarkMode ? '#3498db' : '#007bff'}}>{endRecord}</strong> của <strong style={{color: isDarkMode ? '#e74c3c' : '#dc3545'}}>{totalCount}</strong> bản
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -44,9 +44,8 @@ export const SidebarData = [
|
||||
},
|
||||
{ label: "To Do", link: "/todo",showSubRoute: false,
|
||||
},
|
||||
{ label: "Project Tracker", link: "/project-tracker",showSubRoute: false,
|
||||
},
|
||||
{ label: "Notes", link: "/notes",showSubRoute: false,
|
||||
|
||||
{ label: "Notes", link: "/notes",showSubRoute: false,
|
||||
},
|
||||
{ label: "File Manager", link: "/file-manager", showSubRoute: false,
|
||||
}
|
||||
@ -61,6 +60,7 @@ export const SidebarData = [
|
||||
submenuHdr: "Inventory",
|
||||
|
||||
submenuItems: [
|
||||
{ label: "Tiến độ dự án", link: "/project-tracker",icon: <Icon.Layers />,showSubRoute: false},
|
||||
{ label: "Sản phẩm", link: "/product-list", icon:<Icon.Box />,showSubRoute: false,submenu: false },
|
||||
{ label: "Create Product", link: "/add-product", icon: <Icon.PlusSquare />,showSubRoute: false, submenu: false },
|
||||
{ label: "Expired Products", link: "/expired-products", icon: <Icon.Codesandbox />,showSubRoute: false,submenu: false },
|
||||
|
||||
@ -445,14 +445,7 @@ const WeddingGuestList = () => {
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Liên hệ',
|
||||
dataIndex: 'phone',
|
||||
key: 'phone',
|
||||
render: (phone) => (
|
||||
<span style={{ fontSize: '13px', color: '#1890ff' }}>{phone}</span>
|
||||
)
|
||||
},
|
||||
|
||||
{
|
||||
title: '',
|
||||
key: 'actions',
|
||||
@ -620,7 +613,7 @@ const WeddingGuestList = () => {
|
||||
>
|
||||
<Option value="All Units">📋 Tất cả đơn vị</Option>
|
||||
<Option value="Nội">Nội</Option>
|
||||
<Option value="NotGoing">Ngoại</Option>
|
||||
<Option value="Ngoại">Ngoại</Option>
|
||||
<Option value="Pending">Bạn bè</Option>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
31
src/index.js
31
src/index.js
@ -18,6 +18,37 @@ import AllRoutes from "./Router/router.jsx";
|
||||
|
||||
const rootElement = document.getElementById('root');
|
||||
|
||||
// Initialize default dark mode theme
|
||||
const initializeTheme = () => {
|
||||
// Force reset to dark mode for new default (uncomment if needed)
|
||||
// localStorage.removeItem("colorschema");
|
||||
// localStorage.removeItem("layoutStyling");
|
||||
// localStorage.removeItem("layoutThemeColors");
|
||||
|
||||
// Set default values if not exists in localStorage
|
||||
if (!localStorage.getItem("colorschema")) {
|
||||
localStorage.setItem("colorschema", "dark_mode");
|
||||
}
|
||||
if (!localStorage.getItem("layoutStyling")) {
|
||||
localStorage.setItem("layoutStyling", "default");
|
||||
}
|
||||
if (!localStorage.getItem("layoutThemeColors")) {
|
||||
localStorage.setItem("layoutThemeColors", "light");
|
||||
}
|
||||
|
||||
// Apply theme to document
|
||||
const colorSchema = localStorage.getItem("colorschema") || "dark_mode";
|
||||
const layoutStyling = localStorage.getItem("layoutStyling") || "default";
|
||||
const layoutThemeColors = localStorage.getItem("layoutThemeColors") || "light";
|
||||
|
||||
document.documentElement.setAttribute("data-layout-mode", colorSchema);
|
||||
document.documentElement.setAttribute("data-layout-style", layoutStyling);
|
||||
document.documentElement.setAttribute("data-nav-color", layoutThemeColors);
|
||||
};
|
||||
|
||||
// Initialize theme before rendering
|
||||
initializeTheme();
|
||||
|
||||
|
||||
|
||||
if (rootElement) {
|
||||
|
||||
1171
src/style/scss/components/_theme-customizer.scss
Normal file
1171
src/style/scss/components/_theme-customizer.scss
Normal file
File diff suppressed because it is too large
Load Diff
@ -32,6 +32,7 @@
|
||||
@import "components/ribbon";
|
||||
@import "components/popup";
|
||||
@import "components/grid";
|
||||
@import "components/theme-customizer";
|
||||
|
||||
/******* Vendors ******/
|
||||
@import "vendors/select2";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user