From 0aa97e9526ab04440676fa16d2482469bfd2049a Mon Sep 17 00:00:00 2001 From: "@s.roertgen" Date: Wed, 21 Aug 2024 09:22:16 +0200 Subject: [PATCH] make confetti and add resource form --- resources/public/css/output.css | 67 +++++++++++++++++++++++++++++++++ src/ied/core.cljs | 1 + src/ied/events.cljs | 19 ++++++++-- src/ied/subs.cljs | 5 +++ src/ied/views.cljs | 40 ++++++++++++-------- 5 files changed, 113 insertions(+), 19 deletions(-) diff --git a/resources/public/css/output.css b/resources/public/css/output.css index 125eca8..e95cf54 100644 --- a/resources/public/css/output.css +++ b/resources/public/css/output.css @@ -1045,6 +1045,15 @@ html { min-height: fit-content; } +.diff { + position: relative; + display: grid; + width: 100%; + overflow: hidden; + container-type: inline-size; + grid-template-columns: auto 1fr; +} + .dropdown { position: relative; display: inline-block; @@ -1181,6 +1190,18 @@ html { } } + .btn-outline.btn-primary:hover { + --tw-text-opacity: 1; + color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .btn-outline.btn-primary:hover { + background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); + } + } + .btn-outline.btn-warning:hover { --tw-text-opacity: 1; color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity))); @@ -1556,6 +1577,10 @@ html { border-color: var(--btn-color, var(--fallback-b2)); } + .btn-primary { + --btn-color: var(--fallback-p); + } + .btn-warning { --btn-color: var(--fallback-wa); } @@ -1566,6 +1591,11 @@ html { } @supports (color: color-mix(in oklab, black, black)) { + .btn-outline.btn-primary.btn-active { + background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); + } + .btn-outline.btn-warning.btn-active { background-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black); @@ -1583,7 +1613,17 @@ html { outline-offset: 2px; } +.btn-primary { + --tw-text-opacity: 1; + color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))); + outline-color: var(--fallback-p,oklch(var(--p)/1)); +} + @supports (color: oklch(0% 0 0)) { + .btn-primary { + --btn-color: var(--p); + } + .btn-warning { --btn-color: var(--wa); } @@ -1633,6 +1673,16 @@ html { background-color: var(--fallback-bc,oklch(var(--bc)/0.2)); } +.btn-outline.btn-primary { + --tw-text-opacity: 1; + color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity))); +} + +.btn-outline.btn-primary.btn-active { + --tw-text-opacity: 1; + color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))); +} + .btn-outline.btn-warning { --tw-text-opacity: 1; color: var(--fallback-wa,oklch(var(--wa)/var(--tw-text-opacity))); @@ -2535,6 +2585,10 @@ details.collapse summary::-webkit-details-marker { z-index: 1; } +.float-right { + float: right; +} + .m-1 { margin: 0.25rem; } @@ -2583,6 +2637,10 @@ details.collapse summary::-webkit-details-marker { width: 2.5rem; } +.w-24 { + width: 6rem; +} + .w-5 { width: 1.25rem; } @@ -2685,6 +2743,10 @@ details.collapse summary::-webkit-details-marker { border-radius: 9999px; } +.rounded-xl { + border-radius: 0.75rem; +} + .border { border-width: 1px; } @@ -2736,6 +2798,11 @@ details.collapse summary::-webkit-details-marker { padding-bottom: 1rem; } +.text-2xl { + font-size: 1.5rem; + line-height: 2rem; +} + .text-lg { font-size: 1.125rem; line-height: 1.75rem; diff --git a/src/ied/core.cljs b/src/ied/core.cljs index 4d67cb6..77ea58d 100644 --- a/src/ied/core.cljs +++ b/src/ied/core.cljs @@ -21,5 +21,6 @@ (routes/start!) (re-frame/dispatch-sync [::events/initialize-db]) (re-frame/dispatch [::events/connect-to-default-relays]) + (re-frame/dispatch [::events/set-visit-timestamp]) (dev-setup) (mount-root)) diff --git a/src/ied/events.cljs b/src/ied/events.cljs index 2f88529..b9af190 100644 --- a/src/ied/events.cljs +++ b/src/ied/events.cljs @@ -24,7 +24,8 @@ (re-frame/reg-event-fx ::navigate (fn-traced [_ [_ handler]] - {:navigate handler})) + {:dispatch [::set-visit-timestamp] + :navigate handler})) (re-frame/reg-event-fx ::set-active-panel @@ -194,8 +195,10 @@ :created_at (:now cofx) :content "" :tags [["d" (:id resource)] - ["author" "" (:author resource)]]}] - {::sign-and-publish-event [event (:sk cofx)]}))) + ["id" (:id resource)] + ["author" "" (:author resource)] + ["name" (:name resource)]]}] + {::sign-and-publish-event [event (-> cofx :db :sk)]}))) ;; TODO maybe we need some validation before publishing (re-frame/reg-fx @@ -452,5 +455,13 @@ ::add-confetti (fn [_ _] (let [confetti-instance (new jsConfetti)] - (.addConfetti confetti-instance)) + (.addConfetti confetti-instance (clj->js {:emojis ["😺" "🐈‍⬛" "🦄"]}))) {})) + +(re-frame/reg-event-fx + ::set-visit-timestamp + [(re-frame/inject-cofx :now)] + (fn [cofx [_]] + {:db (assoc (:db cofx) :visited-at (:now cofx))})) + + diff --git a/src/ied/subs.cljs b/src/ied/subs.cljs index b280f1d..d7ec3a0 100644 --- a/src/ied/subs.cljs +++ b/src/ied/subs.cljs @@ -208,3 +208,8 @@ ::events-in-list (fn [db [_ event-ids]] (filter (fn [e] (contains? event-ids (:id e))) (:events db)))) + +(re-frame/reg-sub + ::visited-at + (fn [db _] + (:visited-at db))) diff --git a/src/ied/views.cljs b/src/ied/views.cljs index aa615e8..8be3613 100644 --- a/src/ied/views.cljs +++ b/src/ied/views.cljs @@ -34,8 +34,9 @@ :value (:author @s) :on-change (fn [e] (swap! s assoc :author (-> e .-target .-value)))}] - [:button {:on-click #(re-frame/dispatch [::events/publish-resource {:name (:name @s) ;; TODO this should be sth like build event - :uri (:uri @s) + [:button {:class "btn btn-warning" + :on-click #(re-frame/dispatch [::events/publish-resource {:name (:name @s) ;; TODO this should be sth like build event + :id (:uri @s) :author (:author @s)}])} "Publish Resource"]]))) @@ -49,6 +50,7 @@ :on-click #(re-frame/dispatch [::events/convert-amb-and-publish-as-nostr-event (:json-string @s)])} "Publish as Nostr Event"]]))) +;; TODO try again using xhrio (defn add-resosurce-by-uri [] (let [uri (reagent/atom {:uri ""})] (fn [] @@ -78,9 +80,14 @@ ;; metadata event component (defn metadata-event-component [event] - (let [selected-events @(re-frame/subscribe [::subs/selected-events])] + (let [selected-events @(re-frame/subscribe [::subs/selected-events]) + visited-at @(re-frame/subscribe [::subs/visited-at]) + now (quot (.now js/Date) 1000) + diff (- now visited-at) + _ (when (>= diff 5) + (re-frame/dispatch [::events/add-confetti]))] [:div - {:class "card bg-base-100 w-96 shadow-xl min-h-[620px]"} + {:class "animate-flyIn card bg-base-100 w-96 shadow-xl min-h-[620px]"} [:figure [:img {:class "h-48 object-cover" @@ -114,17 +121,18 @@ ;; events (defn events-panel [] - (let [events @(re-frame/subscribe [::subs/metadata-events]) - selected-events @(re-frame/subscribe [::subs/selected-events]) - show-add-event (re-frame/subscribe [::subs/show-add-event])] + (let [events @(re-frame/subscribe [::subs/feed-events]) + selected-events @(re-frame/subscribe [::subs/selected-events])] [:div {:class "border-2 rounded"} [:p (str "Num of events: " (count events))] (if (> (count events) 0) [:div {:class "flex flex-wrap justify-center gap-2"} (doall - (for [event events] + + (for [event events] [:div {:key (:id event)} [metadata-event-component event]]))] + [:p "no events there"]) [:button {:class "btn" :disabled (not (boolean (seq selected-events))) @@ -136,9 +144,11 @@ ;; event feed component (defn event-feed-component [event] (let [_ () #_(re-frame/dispatch [::events/add-confetti])] - [:div + [:div {:class "animate-flyIn card bg-base-100 w-64 h-64 shadow-xl border border-white border-w "} - [:p (:kind event)] + (cond + (= 30004 (:kind event)) [:p {:class "text-2xl float-right"} "📖"] + (= 30142 (:kind event)) [:p {:class "text-2xl float-right"} "📚"]) [:figure [:img {:class "h-48 object-contain" @@ -346,9 +356,9 @@ [:div {:class "w-10 rounded-full"} [:img - {:alt "Tailwind CSS Navbar component", + {:alt "user image", :src - "https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"}]]] + (str "https://robohash.org/" pk)}]]] [:ul {:tabIndex "0", :class @@ -382,12 +392,12 @@ [:a {:class "btn btn-ghost text-xl" :on-click #(re-frame/dispatch [::events/navigate [:home]])} "edufeed"] - [:a {:class "btn btn-circle" - :on-click #(re-frame/dispatch [::events/navigate [:event-feed]])} "Event-Feed"]] + #_[:a {:class "btn btn-circle" + :on-click #(re-frame/dispatch [::events/navigate [:event-feed]])} "Event-Feed"]] [:div {:class "flex-none"} - [:a {:class "btn btn-circle" + [:a {:class "btn btn-circle btn-primary" :on-click #(re-frame/dispatch [::events/navigate [:add-resource]])} "+"] [shopping-cart] [user-menu]]]))