From 87e0c2eec6cf9edeaf0ca0b92d9ed954c9453f6d Mon Sep 17 00:00:00 2001 From: songtianlun Date: Fri, 17 Jan 2025 15:02:25 +0800 Subject: [PATCH] feat: add theme switching and toast notifications - Implement theme switching functionality with a new ThemeController - Add ToastController for displaying notifications - Update various views for improved layout and styling - Introduce animations for toast notifications These changes enhance the user experience by allowing users to switch between light and dark themes and receive feedback through toast notifications. The UI has been improved for better accessibility and aesthetics. --- .../stylesheets/application.tailwind.css | 2 +- app/javascript/application.js | 3 +- app/javascript/controllers/index.js | 9 +++- .../controllers/theme_controller.js | 24 +++++++++ .../controllers/toast_controller.js | 14 +++++ app/javascript/theme_switch.js | 22 ++++++++ app/views/layouts/_footer.html.erb | 2 +- app/views/layouts/_header.html.erb | 51 ++++++++----------- app/views/layouts/_message.html.erb | 37 ++++++++++++++ app/views/layouts/_theme_swap.html.erb | 29 +++++++++++ app/views/layouts/application.html.erb | 5 +- app/views/sessions/new.html.erb | 51 +++++++++++++------ app/views/users/_form.html.erb | 2 +- app/views/users/_user.html.erb | 35 +++++++++---- app/views/users/edit.html.erb | 37 +++++++++++--- app/views/users/index.html.erb | 24 ++++----- app/views/users/show.html.erb | 31 +++++++---- config/tailwind.config.js | 24 +++++++++ 18 files changed, 308 insertions(+), 94 deletions(-) create mode 100644 app/javascript/controllers/theme_controller.js create mode 100644 app/javascript/controllers/toast_controller.js create mode 100644 app/javascript/theme_switch.js create mode 100644 app/views/layouts/_message.html.erb create mode 100644 app/views/layouts/_theme_swap.html.erb diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css index 9fdd6e3..0c36b68 100644 --- a/app/assets/stylesheets/application.tailwind.css +++ b/app/assets/stylesheets/application.tailwind.css @@ -18,7 +18,7 @@ } h1 { - @apply text-[3em] tracking-[-2px] mb-[30px] text-center; + @apply text-[3em] tracking-[-2px] mb-8 mt-8 text-center; } h2 { diff --git a/app/javascript/application.js b/app/javascript/application.js index 3ef406c..f5f9dc9 100644 --- a/app/javascript/application.js +++ b/app/javascript/application.js @@ -8,5 +8,6 @@ import "@hotwired/turbo-rails" import "flowbite/dist/flowbite.turbo" -import "./controllers" +// import "./theme_switch" +import "./controllers" diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js index 9359a66..f5927be 100644 --- a/app/javascript/controllers/index.js +++ b/app/javascript/controllers/index.js @@ -3,4 +3,11 @@ // import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading" // eagerLoadControllersFrom("controllers", application) -import { application } from "./application" \ No newline at end of file +import { application } from "./application" +import ThemeController from "./theme_controller" +import ToastController from "./toast_controller" + +import HelloController from "./hello_controller" +application.register("hello", HelloController) +application.register("theme", ThemeController) +application.register("toast", ToastController) diff --git a/app/javascript/controllers/theme_controller.js b/app/javascript/controllers/theme_controller.js new file mode 100644 index 0000000..e7cc67d --- /dev/null +++ b/app/javascript/controllers/theme_controller.js @@ -0,0 +1,24 @@ +import { Controller } from "@hotwired/stimulus" + +// Connects to data-controller="theme" +export default class extends Controller { + static targets = ["toggle"] + + connect() { + this.initTheme() + } + + initTheme() { + const savedTheme = localStorage.getItem('theme') + if(savedTheme) { + document.documentElement.setAttribute('data-theme', savedTheme) + this.toggleTarget.checked = savedTheme === 'dark' + } + } + + toggle(event) { + const newTheme = event.target.checked ? 'dark' : 'light' + document.documentElement.setAttribute('data-theme', newTheme) + localStorage.setItem('theme', newTheme) + } +} diff --git a/app/javascript/controllers/toast_controller.js b/app/javascript/controllers/toast_controller.js new file mode 100644 index 0000000..360aeaa --- /dev/null +++ b/app/javascript/controllers/toast_controller.js @@ -0,0 +1,14 @@ +import { Controller } from "@hotwired/stimulus" + +// Connects to data-controller="toast" +export default class extends Controller { + connect() { + // 3秒后自动隐藏 + setTimeout(() => { + this.element.classList.add('animate-fade-out') + setTimeout(() => { + this.element.remove() + }, 500) + }, 3000) + } +} diff --git a/app/javascript/theme_switch.js b/app/javascript/theme_switch.js new file mode 100644 index 0000000..7531921 --- /dev/null +++ b/app/javascript/theme_switch.js @@ -0,0 +1,22 @@ +// 获取切换按钮 +const themeToggle = document.querySelector('.theme-controller'); + +// 监听变化 +themeToggle.addEventListener('change', (e) => { + // 切换 HTML data-theme 属性 + if(e.target.checked) { + document.documentElement.setAttribute('data-theme', 'dark'); + } else { + document.documentElement.setAttribute('data-theme', 'light'); + } + + // 保存主题设置到 localStorage + localStorage.setItem('theme', e.target.checked ? 'dark' : 'light'); +}); + +// 页面加载时检查之前的主题设置 +const savedTheme = localStorage.getItem('theme'); +if(savedTheme) { + document.documentElement.setAttribute('data-theme', savedTheme); + themeToggle.checked = savedTheme === 'dark'; +} \ No newline at end of file diff --git a/app/views/layouts/_footer.html.erb b/app/views/layouts/_footer.html.erb index bd3cc93..4bf79a3 100644 --- a/app/views/layouts/_footer.html.erb +++ b/app/views/layouts/_footer.html.erb @@ -1,4 +1,4 @@ -