diff --git a/app/assets/stylesheets/tailwind/main.tailwind.css b/app/assets/stylesheets/tailwind/main.tailwind.css index be5ce68..8518303 100644 --- a/app/assets/stylesheets/tailwind/main.tailwind.css +++ b/app/assets/stylesheets/tailwind/main.tailwind.css @@ -4,9 +4,15 @@ @apply py-2 px-4 bg-blue-200; } } - */ -.title { - @apply bg-gradient-to-r from-color-primary to-color-secondary text-yellow-400 sm:rounded-t-lg; -} \ No newline at end of file +h1 { @apply text-5xl my-2} +h2 { @apply text-4xl my-2} +h3 { @apply text-3xl my-1} +h4 { @apply text-2xl my-1} +h5 { @apply text-xl} +h6 { @apply text-base } + +.title { @apply bg-gradient-to-r from-color-primary to-color-secondary text-yellow-400 sm:rounded-t-lg; } +.button { @apply bg-slate-200 hover:bg-slate-500 cursor-pointer } +.menu { @apply text-slate-200 hover:bg-slate-700 p-2 text-2xl} \ No newline at end of file diff --git a/app/controllers/flash_controller.rb b/app/controllers/flash_controller.rb new file mode 100644 index 0000000..4b22223 --- /dev/null +++ b/app/controllers/flash_controller.rb @@ -0,0 +1,25 @@ +# interaction with the flash message +class FlashController < ApplicationController + def index; end + + def turbo_notice + flash[:notice] = 'From Turbo' + flash[:alert] = 'Alert Turbo' + render turbo_stream: turbo_stream.replace(:notification, partial: 'layouts/notification') + end + + def redirect_with_notice + redirect_to flash_path, notice: build_message(:notice) + end + + def redirect_with_alert + redirect_to flash_path, alert: build_message(:alert) + end + + private + + def build_message(type_of_message) + session[:flash_iteration] = session[:flash_iteration].to_i + 1 + "this is #{type_of_message} ##{session[:flash_iteration]}" + end +end diff --git a/app/javascript/application.js b/app/javascript/application.js index 9bcdcd6..a596644 100644 --- a/app/javascript/application.js +++ b/app/javascript/application.js @@ -12,10 +12,6 @@ import 'alpine-clipboard' window.Alpine = Alpine Alpine.start() -// Toastify -import Toastify from 'toastify-js' -window.Toastify = Toastify - // Font Awesome import { far } from "@fortawesome/free-regular-svg-icons" import { fas } from "@fortawesome/free-solid-svg-icons" @@ -24,3 +20,4 @@ import { library } from "@fortawesome/fontawesome-svg-core" import "@fortawesome/fontawesome-free" library.add(far, fas, fab) FontAwesome.config.mutateApproach = 'sync' // prevents flickering + diff --git a/app/javascript/controllers/flash_toast_controller.js b/app/javascript/controllers/flash_toast_controller.js new file mode 100644 index 0000000..2eb00fa --- /dev/null +++ b/app/javascript/controllers/flash_toast_controller.js @@ -0,0 +1,49 @@ +import { Controller } from "@hotwired/stimulus" +import Toastify from 'toastify-js' + +export default class extends Controller { + + static initialized = false + static toastifyNotice + static toastifyAlert + static lastId + + static load_once() { + this.initialized = true + + const commonOptions = { gravity: 'top', position: 'center', duration: 4000, offset: { y: '1em' }, close: true, escapeMarkup: false } + this.toastifyNotice = Toastify({ className: 'toastify-notice', ...commonOptions }) + this.toastifyAlert = Toastify({ className: 'toastify-alert', ...commonOptions }) + this.lastId = 0 + + console.log('FlashController ready!') + } + + initialize() { + // console.log('FlashController initialize') + if (!this.constructor.initialized) this.constructor.load_once() + } + + connect() { + // console.log(`FlashController connect last_id=<${this.constructor.lastId}>`) + const id = this.element.dataset.id + if (id != this.constructor.lastId) { + const notice = this.element.dataset.notice + const alert = this.element.dataset.alert + while (this.element.firstChild) { this.element.removeChild(this.element.firstChild) } + if (notice.length > 0) this.toastMessageFrom(id, notice, this.constructor.toastifyNotice) + if (alert.length > 0) this.toastMessageFrom(id, alert, this.constructor.toastifyAlert) + this.constructor.lastId = id + } + // else console.log(`duplicate entry ${id}`) + } + + toastMessageFrom(id, message, toastify) { + toastify.options.selector = this.element + toastify.options.text = message + toastify.showToast() + const toastType = toastify.options.className.split('-').pop() + console.info(`TOAST ${toastType}: ${message}`) + } + +} diff --git a/app/views/flash/index.html.erb b/app/views/flash/index.html.erb new file mode 100644 index 0000000..1b3a07c --- /dev/null +++ b/app/views/flash/index.html.erb @@ -0,0 +1,15 @@ +

Flash experiments

+ + \ No newline at end of file diff --git a/app/views/layouts/_navbar.html.erb b/app/views/layouts/_navbar.html.erb index b451911..078efad 100644 --- a/app/views/layouts/_navbar.html.erb +++ b/app/views/layouts/_navbar.html.erb @@ -1,6 +1,10 @@ -