From 5806afbb3d12a825a794cf5ae8b55fa7cb676449 Mon Sep 17 00:00:00 2001 From: Konstantinos Kaloutas Date: Mon, 30 Oct 2023 17:51:02 +0200 Subject: [PATCH] [wip] notifications --- package-lock.json | 141 +------------------------- package.json | 7 +- src/renderer/core.cljs | 1 + src/renderer/db.cljs | 1 + src/renderer/notification/core.cljs | 3 + src/renderer/notification/events.cljs | 19 ++++ src/renderer/notification/styles.css | 12 +++ src/renderer/notification/subs.cljs | 8 ++ src/renderer/notification/views.cljs | 19 ++++ src/renderer/styles.css | 64 ------------ src/renderer/tools/dropper.cljs | 10 +- src/renderer/views.cljs | 15 +-- 12 files changed, 79 insertions(+), 221 deletions(-) create mode 100644 src/renderer/notification/core.cljs create mode 100644 src/renderer/notification/events.cljs create mode 100644 src/renderer/notification/styles.css create mode 100644 src/renderer/notification/subs.cljs create mode 100644 src/renderer/notification/views.cljs diff --git a/package-lock.json b/package-lock.json index f7284dc9..1760fca4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,14 +20,13 @@ "opentype.js": "1.3.4" }, "devDependencies": { - "@radix-ui/react-context-menu": "^2.1.5", + "@radix-ui/react-context-menu": "2.1.5", "@radix-ui/react-dropdown-menu": "2.0.5", "@radix-ui/react-menubar": "1.0.3", "@radix-ui/react-popover": "1.0.6", "@radix-ui/react-select": "1.2.2", - "@radix-ui/react-toast": "^1.1.5", "@radix-ui/react-tooltip": "1.0.6", - "@re-path/react-color": "^2.19.4", + "@re-path/react-color": "2.19.4", "@sentry/react": "7.66.0", "@types/react": "17.0.2", "@types/react-dom": "17.0.2", @@ -58,7 +57,7 @@ "postcss-nested": "6.0.1", "react": "17.0.2", "react-dom": "17.0.2", - "react-fps": "^1.0.6", + "react-fps": "1.0.6", "react-frame-component": "5.2.6", "react-svg": "16.1.16", "shadow-cljs": "2.25.8", @@ -1376,93 +1375,6 @@ } } }, - "node_modules/@radix-ui/react-toast": { - "version": "1.1.5", - "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.1.5.tgz", - "integrity": "sha512-fRLn227WHIBRSzuRzGJ8W+5YALxofH23y0MlPLddaIpLpCDqdE0NZlS2NRQDRiptfxDeeCjgFIpexB1/zkxDlw==", - "dev": true, - "dependencies": { - "@babel/runtime": "^7.13.10", - "@radix-ui/primitive": "1.0.1", - "@radix-ui/react-collection": "1.0.3", - "@radix-ui/react-compose-refs": "1.0.1", - "@radix-ui/react-context": "1.0.1", - "@radix-ui/react-dismissable-layer": "1.0.5", - "@radix-ui/react-portal": "1.0.4", - "@radix-ui/react-presence": "1.0.1", - "@radix-ui/react-primitive": "1.0.3", - "@radix-ui/react-use-callback-ref": "1.0.1", - "@radix-ui/react-use-controllable-state": "1.0.1", - "@radix-ui/react-use-layout-effect": "1.0.1", - "@radix-ui/react-visually-hidden": "1.0.3" - }, - "peerDependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0", - "react-dom": "^16.8 || ^17.0 || ^18.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-toast/node_modules/@radix-ui/react-dismissable-layer": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz", - "integrity": "sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==", - "dev": true, - "dependencies": { - "@babel/runtime": "^7.13.10", - "@radix-ui/primitive": "1.0.1", - "@radix-ui/react-compose-refs": "1.0.1", - "@radix-ui/react-primitive": "1.0.3", - "@radix-ui/react-use-callback-ref": "1.0.1", - "@radix-ui/react-use-escape-keydown": "1.0.3" - }, - "peerDependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0", - "react-dom": "^16.8 || ^17.0 || ^18.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-toast/node_modules/@radix-ui/react-portal": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz", - "integrity": "sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==", - "dev": true, - "dependencies": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-primitive": "1.0.3" - }, - "peerDependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0", - "react-dom": "^16.8 || ^17.0 || ^18.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, "node_modules/@radix-ui/react-tooltip": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.0.6.tgz", @@ -9639,53 +9551,6 @@ "@radix-ui/react-compose-refs": "1.0.1" } }, - "@radix-ui/react-toast": { - "version": "1.1.5", - "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.1.5.tgz", - "integrity": "sha512-fRLn227WHIBRSzuRzGJ8W+5YALxofH23y0MlPLddaIpLpCDqdE0NZlS2NRQDRiptfxDeeCjgFIpexB1/zkxDlw==", - "dev": true, - "requires": { - "@babel/runtime": "^7.13.10", - "@radix-ui/primitive": "1.0.1", - "@radix-ui/react-collection": "1.0.3", - "@radix-ui/react-compose-refs": "1.0.1", - "@radix-ui/react-context": "1.0.1", - "@radix-ui/react-dismissable-layer": "1.0.5", - "@radix-ui/react-portal": "1.0.4", - "@radix-ui/react-presence": "1.0.1", - "@radix-ui/react-primitive": "1.0.3", - "@radix-ui/react-use-callback-ref": "1.0.1", - "@radix-ui/react-use-controllable-state": "1.0.1", - "@radix-ui/react-use-layout-effect": "1.0.1", - "@radix-ui/react-visually-hidden": "1.0.3" - }, - "dependencies": { - "@radix-ui/react-dismissable-layer": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz", - "integrity": "sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==", - "dev": true, - "requires": { - "@babel/runtime": "^7.13.10", - "@radix-ui/primitive": "1.0.1", - "@radix-ui/react-compose-refs": "1.0.1", - "@radix-ui/react-primitive": "1.0.3", - "@radix-ui/react-use-callback-ref": "1.0.1", - "@radix-ui/react-use-escape-keydown": "1.0.3" - } - }, - "@radix-ui/react-portal": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz", - "integrity": "sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==", - "dev": true, - "requires": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-primitive": "1.0.3" - } - } - } - }, "@radix-ui/react-tooltip": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.0.6.tgz", diff --git a/package.json b/package.json index da0bce55..eb0d8e7c 100644 --- a/package.json +++ b/package.json @@ -59,14 +59,13 @@ }, "main": "resources/main.js", "devDependencies": { - "@radix-ui/react-context-menu": "^2.1.5", + "@radix-ui/react-context-menu": "2.1.5", "@radix-ui/react-dropdown-menu": "2.0.5", "@radix-ui/react-menubar": "1.0.3", "@radix-ui/react-popover": "1.0.6", "@radix-ui/react-select": "1.2.2", - "@radix-ui/react-toast": "^1.1.5", "@radix-ui/react-tooltip": "1.0.6", - "@re-path/react-color": "^2.19.4", + "@re-path/react-color": "2.19.4", "@sentry/react": "7.66.0", "@types/react": "17.0.2", "@types/react-dom": "17.0.2", @@ -97,7 +96,7 @@ "postcss-nested": "6.0.1", "react": "17.0.2", "react-dom": "17.0.2", - "react-fps": "^1.0.6", + "react-fps": "1.0.6", "react-frame-component": "5.2.6", "react-svg": "16.1.16", "shadow-cljs": "2.25.8", diff --git a/src/renderer/core.cljs b/src/renderer/core.cljs index 6e601cb3..4f2e4308 100644 --- a/src/renderer/core.cljs +++ b/src/renderer/core.cljs @@ -14,6 +14,7 @@ [renderer.elements.core] [renderer.reepl.core] [renderer.attribute.core] + [renderer.notification.core] [renderer.reepl.replumb :as replumb] [replumb.repl :as repl] [renderer.views :as views] diff --git a/src/renderer/db.cljs b/src/renderer/db.cljs index 4a5e9cb6..87854f79 100644 --- a/src/renderer/db.cljs +++ b/src/renderer/db.cljs @@ -8,6 +8,7 @@ :documents {} :document-tabs [] :system-fonts [] + :notifications [] :debug-info? false :pen-mode? false :repl/mode :cljs diff --git a/src/renderer/notification/core.cljs b/src/renderer/notification/core.cljs new file mode 100644 index 00000000..be269644 --- /dev/null +++ b/src/renderer/notification/core.cljs @@ -0,0 +1,3 @@ +(ns renderer.notification.core + (:require [renderer.notification.events] + [renderer.notification.subs])) diff --git a/src/renderer/notification/events.cljs b/src/renderer/notification/events.cljs new file mode 100644 index 00000000..53a611f0 --- /dev/null +++ b/src/renderer/notification/events.cljs @@ -0,0 +1,19 @@ +(ns renderer.notification.events + (:require + [re-frame.core :as rf] + [renderer.utils.vec :as vec])) + +(rf/reg-event-db + :notification/add + (fn [db [_ notification]] + (update db :notifications conj notification))) + +(rf/reg-event-db + :notification/remove + (fn [db [_ index]] + (update db :notifications #(vec/remove-by-index % index)))) + +#_(rf/reg-event-db + :notification/clear + (fn [db [_]] + (assoc db :notifications []))) \ No newline at end of file diff --git a/src/renderer/notification/styles.css b/src/renderer/notification/styles.css new file mode 100644 index 00000000..5e731b25 --- /dev/null +++ b/src/renderer/notification/styles.css @@ -0,0 +1,12 @@ +.toast { + @apply flex level-3 rounded shadow-md p-4 relative; + + width: 390px; + max-width: 100vw; +} + +.toast-description { + grid-area: description; + margin: 0; + line-height: 1.3; +} \ No newline at end of file diff --git a/src/renderer/notification/subs.cljs b/src/renderer/notification/subs.cljs new file mode 100644 index 00000000..7cf0d611 --- /dev/null +++ b/src/renderer/notification/subs.cljs @@ -0,0 +1,8 @@ +(ns renderer.notification.subs + (:require + [re-frame.core :as rf])) + +(rf/reg-sub + :notifications + (fn [db [_]] + (-> db :notifications))) \ No newline at end of file diff --git a/src/renderer/notification/views.cljs b/src/renderer/notification/views.cljs new file mode 100644 index 00000000..fa254c0a --- /dev/null +++ b/src/renderer/notification/views.cljs @@ -0,0 +1,19 @@ +(ns renderer.notification.views + (:require + [re-frame.core :as rf] + [renderer.components :as comp])) + +(defn main + [] + (let [notifications @(rf/subscribe [:notifications])] + [:div.fixed.flex.flex-col.m-4.right-0.bottom-0.gap-2 + (map-indexed (fn [index notification] + [:div.toast + {:key index} + [:div.toast-description + (:content notification)] + [comp/icon-button + {:title "Dismiss" + :icon "times" + :action #(rf/dispatch-sync [:notification/remove index])}]]) + notifications)])) \ No newline at end of file diff --git a/src/renderer/styles.css b/src/renderer/styles.css index d54114a4..0d30e2f3 100644 --- a/src/renderer/styles.css +++ b/src/renderer/styles.css @@ -467,68 +467,4 @@ pre { &[data-state='delayed-open'][data-side='left'] { animation-name: slideRightAndFade; } -} - - -.toast-viewport { - @apply fixed flex flex-col p-4 right-0 bottom-0 gap-2; - - width: 390px; - max-width: 100vw; - list-style: none; - z-index: 2147483647; - outline: none; -} - -.toast-root { - @apply grid level-3 rounded shadow-md p-4 relative; - - grid-template-areas: 'title action' 'description action'; - grid-template-columns: auto max-content; - column-gap: 15px; - align-items: center; - - &[data-state='open'] { - animation: slideUpAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1); - } - - &[data-state='closed'] { - animation: hide 100ms ease-in; - } - - &[data-swipe='move'] { - transform: translateX(var(--radix-toast-swipe-move-x)); - } - - &[data-swipe='cancel'] { - transform: translateX(0); - transition: transform 200ms ease-out; - } - - &[data-swipe='end'] { - animation: swipeOut 100ms ease-out; - } -} - -.toast-title { - @apply text-lg; - - grid-area: title; - margin-bottom: 5px; - font-weight: 500; - color: var(--slate-12); -} - -.toast-description { - grid-area: description; - margin: 0; - line-height: 1.3; -} - -.toast-action { - grid-area: action; -} - -.toast-close { - @apply absolute top-4 right-4; } \ No newline at end of file diff --git a/src/renderer/tools/dropper.cljs b/src/renderer/tools/dropper.cljs index a816ba1e..35cd5fd9 100644 --- a/src/renderer/tools/dropper.cljs +++ b/src/renderer/tools/dropper.cljs @@ -13,7 +13,7 @@ (defmethod tools/activate :dropper [db] - ;; TODO side effect within db handler + ;; FIXME side effect within db handler (if (.-EyeDropper js/window) (do (-> (js/EyeDropper.) (.open) @@ -21,9 +21,13 @@ (rf/dispatch [:elements/fill (.-sRGBHex result)]) (rf/dispatch [:document/set-fill (.-sRGBHex result)]) (rf/dispatch [:set-tool :select]))) - (.catch #(rf/dispatch [:set-tool :select]))) + (.catch (fn [error] + (rf/dispatch [:notification/add {:content (str error)}]) + (rf/dispatch [:set-tool :select])))) (handlers/set-message db [:div "Click anywhere to pick a color."])) - (tools/set-tool db :select))) + (-> db + (update :notifications conj "Your browser does not support the EyeDropper API") + (tools/set-tool :select)))) diff --git a/src/renderer/views.cljs b/src/renderer/views.cljs index a35e4b32..f5dfa34b 100644 --- a/src/renderer/views.cljs +++ b/src/renderer/views.cljs @@ -17,8 +17,8 @@ [renderer.status :as status] [re-frame.registrar] [renderer.debug :as debug] - ["@radix-ui/react-tooltip" :as Tooltip] - #_["@radix-ui/react-toast" :as Toast])) + [renderer.notification.views :as notification] + ["@radix-ui/react-tooltip" :as Tooltip])) (defn command-input [] [:div.flex.flex-col.level-0.relative.overflow-visible @@ -116,13 +116,4 @@ [object/toolbar]]]] [home/panel])] - #_[:> Toast/Provider - [:> Toast/Root {:class "toast-root"} - [:> Toast/Title {:class "toast-title"} "foo"] - [:> Toast/Description {:class "toast-description"} "sadasdsa"] - [:> Toast/Action {:class "toast-action" - :altText "sd"} [comp/icon "times"]] - #_[:> Toast/Close {:class "toast-close"} - ]] - - [:> Toast/Viewport {:class "toast-viewport"}]]]) + [notification/main]])