@rpcbase/client 0.213.0 → 0.214.0

package/i18n/en/rb.nav.json

@@ -1,4 +1,6 @@
 {
+  "toggle_notifications": "Toggle Notifications",
+  "notifications_settings": "Notifications Settings",
   "search_anything": {
     "placeholder": "Search Anything..."
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpcbase/client",
-  "version": "0.213.0",
+  "version": "0.214.0",
   "scripts": {
     "build": "../../node_modules/.bin/wireit",
     "test": "../../node_modules/.bin/wireit"

package/ui/ExpandableFloatView/index.tsx

@@ -23,9 +23,6 @@ export const ExpandableFloatView = ({
 
   const [animatedVals, setAnimatedVals] = useState({})
 
-  // eslint-disable-next-line no-use-before-define
-  const {showBackdrop} = useBackdrop(isOpen, onToggle)
-
   const getRect = () => {
     const boundingRect = containerRef.current.getBoundingClientRect()
     const rect = {
@@ -39,6 +36,7 @@ export const ExpandableFloatView = ({
   }
 
   const onOpen = () => {
+    // eslint-disable-next-line no-use-before-define
     showBackdrop()
 
     isOpen.current = true
@@ -89,6 +87,8 @@ export const ExpandableFloatView = ({
     }
   }
 
+  const {showBackdrop} = useBackdrop(isOpen, onToggle)
+
   useImperativeHandle(ref, () => {
     return {
       open: () => {

package/ui/nav/NotificationsDropdown/index.tsx

@@ -0,0 +1,52 @@
+import Form from "react-bootstrap/Form"
+import {useTranslation} from "react-i18next"
+
+import {useStoredValue} from "../../../helpers/useStoredValue"
+import {useHashState} from "../../../hashState"
+
+import * as MorphingDropdown from "../MorphingDropdown"
+
+import "./notifications-dropdown.scss"
+
+
+export const NotificationsDropdown = ({id}) => {
+  const {t} = useTranslation("rb.nav")
+
+  const [isEnabled, setIsEnabled] = useStoredValue("has_notifications_enabled", "yes")
+
+  const {serializeHashState} = useHashState()
+
+  const onToggleNotifications = (e) => {
+    setIsEnabled(e.target.checked ? "yes" : "no")
+  }
+
+  const onClickNotificationsSettings = () => {
+    serializeHashState({
+      showNotificationsSettingsModal: true,
+    })
+  }
+
+  return (
+    <MorphingDropdown.Menu id={id} style={{minWidth: 300}}>
+      <div className="text-light px-3">
+        <Form.Check
+          type="switch"
+          id="toggle-notifications-switch"
+          label={t("toggle_notifications")}
+          data-bs-theme="dark"
+          checked={isEnabled === "yes"}
+          onChange={onToggleNotifications}
+        />
+      </div>
+      <div className="list-group" data-bs-theme="dark">
+        <button
+          className="list-group-item list-group-item-action"
+          onClick={onClickNotificationsSettings}
+        >
+          {t("notifications_settings")}
+        </button>
+        <button className="list-group-item list-group-item-action">List item23.. ..</button>
+      </div>
+    </MorphingDropdown.Menu>
+  )
+}

package/ui/nav/NotificationsDropdown/notifications-dropdown.scss

@@ -0,0 +1,5 @@
+@import "helpers";
+
+#toggle-notifications-switch + label {
+  cursor: pointer;
+}

package/ui/nav/NotificationsToggle/NotificationsGlyph.tsx

@@ -0,0 +1,54 @@
+import {useRef, useEffect} from "react"
+
+import LottiePlayer from "../../LottiePlayer"
+
+import notifAnimation from "./notification-animation.json"
+
+
+export const NotificationsGlyph = () => {
+  const playerRef = useRef(null)
+
+  const play = () => {
+    playerRef.current?.setSeeker(0, true)
+    playerRef.current?.play()
+  }
+
+  useEffect(() => {
+    const onPlay = () => {
+      play()
+    }
+
+    document.body.addEventListener("PLAY_NOTIF_ANIMATION", onPlay)
+
+    return () => {
+      document.body.removeEventListener("PLAY_NOTIF_ANIMATION", onPlay)
+    }
+  }, [])
+
+  const onPlayerMouseEnter = () => {
+    play()
+  }
+
+  return (
+    <div
+      className="player-wrapper h-100 d-flex align-items-center"
+      onMouseEnter={onPlayerMouseEnter}
+    >
+      <LottiePlayer
+        id="notifications-glyph-player"
+        ref={playerRef}
+        autoplay={false}
+        loop={false}
+        // speed={2}
+        keepLastFrame={true}
+        src={notifAnimation}
+        style={{
+          marginTop: -1,
+          height: "23px",
+          // width: "21px",
+        }}
+        // onEvent={this.onPlayerEvent}
+      />
+    </div>
+  )
+}

package/ui/nav/NotificationsToggle/index.tsx

@@ -0,0 +1,12 @@
+import * as MorphingDropdown from "../MorphingDropdown"
+
+import {NotificationsGlyph} from "./NotificationsGlyph"
+
+import "./notifications-toggle.scss"
+
+
+export const NotificationsToggle = ({onClick}) => (
+  <MorphingDropdown.Toggle id="notifications" className="px-2">
+    <NotificationsGlyph />
+  </MorphingDropdown.Toggle>
+)

package/ui/nav/NotificationsToggle/notification-animation.json

@@ -0,0 +1 @@
+{"v":"5.6.5","fr":24,"ip":0,"op":28,"w":30,"h":30,"nm":"bell","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"bell2 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":3,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":8,"s":[11]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":12,"s":[-12]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":16,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":19,"s":[-7]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":22,"s":[3]},{"t":25,"s":[0]}],"ix":10},"p":{"a":0,"k":[14.93,4.945,0],"ix":2},"a":{"a":0,"k":[14.93,4.945,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.553,0],[0,0],[0,-0.553],[-0.552,0],[0,0],[0,0.553]],"o":[[0,0],[-0.552,0],[0,0.553],[0,0],[0.553,0],[0,-0.553]],"v":[[10,-1],[-10,-1],[-11,0],[-10,1],[10,1],[11,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[15,23],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,1.59],[0,0],[3.448,0.89],[0,0],[1.105,0],[0,-1.105],[0,0],[0,-3.726],[0,0],[0.609,-1.453],[0,0]],"o":[[0,0],[0,-3.726],[0,0],[0,-1.105],[-1.105,0],[0,0],[-3.448,0.89],[0,0],[0,1.59],[0,0],[-0.609,-1.452]],"v":[[8,3.894],[8,1.5],[2,-6.238],[2,-6.5],[0,-8.5],[-2,-6.5],[-2,-6.238],[-8,1.5],[-8,3.894],[-8.935,8.5],[8.935,8.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[15,11.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":28,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"mask","td":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":3,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":8,"s":[11]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":12,"s":[-12]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":16,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":19,"s":[-7]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":22,"s":[3]},{"t":25,"s":[0]}],"ix":10},"p":{"a":0,"k":[14.938,5,0],"ix":2},"a":{"a":0,"k":[14.938,5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.553,0],[0,0],[0,1.585],[0,0],[4.418,0],[0,-4.418],[0,0],[1.15,-1.893],[0,0],[0,-0.553],[-0.552,0],[0,0],[0,0.553]],"o":[[0,0],[-1.518,-2.129],[0,0],[0,-4.418],[-4.418,0],[0,0],[0,1.585],[0,0],[-0.552,0],[0,0.553],[0,0],[0.553,0],[0,-0.553]],"v":[[10,7.5],[9.923,7.5],[8,0.894],[8,-1.5],[0,-9.5],[-8,-1.5],[-8,0.894],[-9.925,7.5],[-10,7.5],[-11,8.5],[-9.938,9.313],[10.063,9.313],[11,8.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[15,14.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":28,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"tongue Outlines","tt":2,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":8,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":11,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":14,"s":[-19]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":17,"s":[8]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":20,"s":[-14]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":23,"s":[6]},{"t":25,"s":[0]}],"ix":10},"p":{"a":0,"k":[15,5.188,0],"ix":2},"a":{"a":0,"k":[3.25,-16.563,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[1.657,0],[0,-1.657],[-1.657,0],[0,1.657]],"o":[[-1.657,0],[0,1.657],[1.657,0],[0,-1.657]],"v":[[0,-3],[-3,0],[0,3],[3,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[3.25,3.25],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":28,"st":0,"bm":0}],"markers":[]}

package/ui/nav/NotificationsToggle/notifications-toggle.scss

@@ -0,0 +1,26 @@
+@import "helpers";
+
+#notifications-glyph-player {
+  position: relative;
+
+  path {
+    fill: $gray-200;
+  }
+
+  &:hover {
+    path {
+      fill: $white;
+    }
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: -2px;
+    height: 2px;
+    background: $red-500;
+    transform: rotate(45deg);
+  }
+}

package/ui/nav/index.ts

@@ -1,9 +1,11 @@
 export * from "./AccountsDropdown"
 export * from "./AccountsToggle"
+export * from "./ContentView"
 export * from "./HeaderContainer"
+export * from "./NotificationsDropdown"
+export * from "./NotificationsToggle"
 export * from "./SidebarContainer"
 export * from "./SlideoutContainer"
-export * from "./ContentView"
 
 import * as MorphingDropdown from "./MorphingDropdown"