From 0dcd755c47a29e02cdfde6b997bf5da3399af276 Mon Sep 17 00:00:00 2001 From: Justin Garcia Date: Sun, 2 Jun 2024 23:37:41 +0800 Subject: [PATCH] feat: initial work in message cards --- lib/frontend/js/pages/InboxPageMessages.re | 13 +- .../js/pages/InboxPageMessagesCard.re | 146 +++++---------- .../js/pages/InboxPageMessagesCardHooks.re | 58 ++++++ .../js/pages/InboxPageMessagesStyles.re | 168 ++++++++++++++++++ lib/frontend/universal/Icons.re | 34 ++++ .../universal/pages/InboxPageLayout.re | 4 +- 6 files changed, 311 insertions(+), 112 deletions(-) create mode 100644 lib/frontend/js/pages/InboxPageMessagesCardHooks.re create mode 100644 lib/frontend/js/pages/InboxPageMessagesStyles.re diff --git a/lib/frontend/js/pages/InboxPageMessages.re b/lib/frontend/js/pages/InboxPageMessages.re index e7ac11b..79fd896 100644 --- a/lib/frontend/js/pages/InboxPageMessages.re +++ b/lib/frontend/js/pages/InboxPageMessages.re @@ -1,16 +1,9 @@ -let layoutCss = [%cx - {| - display: flex; - padding-top: 2rem; - padding-bottom: 2rem; - gap: 2rem; - flex-direction: column; -|} -]; +open InboxPageMessagesStyles; [@react.component] let make = () => { -
+
+
; diff --git a/lib/frontend/js/pages/InboxPageMessagesCard.re b/lib/frontend/js/pages/InboxPageMessagesCard.re index 7b5663f..30d52b7 100644 --- a/lib/frontend/js/pages/InboxPageMessagesCard.re +++ b/lib/frontend/js/pages/InboxPageMessagesCard.re @@ -1,89 +1,49 @@ -let containerCss = [%cx - {| - display: flex; - position: relative; - width: 100%; - height: 16rem; -|} -]; +open InboxPageMessagesStyles; +open InboxPageMessagesCardHooks; -let cardCss = [%cx - {| - height: 100%; - width: 100%; - position: absolute; - backface-visibility: hidden; - color: $(Theme.background11); - font-family: "Poppins"; - font-size: 4rem; - cursor: pointer; -|} -]; - -let backCss = [%cx {| - background-color: $(Theme.primary); -|}]; - -let faceCss = [%cx {| - background-color: $(Theme.secondary); -|}]; - -let variants = { - "toHidden": { - "transform": [| - "perspective(1000px) translateY(0px) rotateY(0deg)", - "perspective(1000px) translateY(-10x) rotateY(0deg)", - "perspective(1000px) translateY(-10px) rotateY(180deg)", - "perspective(1000px) translateY(0px) rotateY(180deg)", - |], - "transition": { - "duration": 0.6, - "times": [|0.0, 0.16, 0.84, 1.0|], - }, - }, - "toRevealed": { - "transform": [| - "perspective(1000px) translateY(0px) rotateY(180deg)", - "perspective(1000px) translateY(-10px) rotateY(180deg)", - "perspective(1000px) translateY(-10px) rotateY(360deg)", - "perspective(1000px) translateY(0px) rotateY(360deg)", - |], - "transition": { - "duration": 0.6, - "times": [|0.0, 0.16, 0.84, 1.0|], - }, - }, - "toDeleted": { - "transform": [|"translateY(-50px)"|], - }, +module Face = { + [@react.component] + let make = (~faceInitial, ~faceAnimate, ~toggleReveal) => { + let onClick = React.useCallback1(_ => toggleReveal(), [|toggleReveal|]); + + +
+ {React.string("example content :3")} +
+ + + + ; + }; }; -type state = - | Initial - | Revealed - | Hidden; - -let useRevealState = () => { - let (state, reduce) = - React.useReducer( - (state, ()) => - switch (state) { - | Initial => Revealed - | Revealed => Hidden - | Hidden => Revealed - }, - Initial, - ); - - let toRevealed = Js.Nullable.return("toRevealed"); - let toHidden = Js.Nullable.return("toHidden"); - let null = Js.Nullable.null; - - // faceInitial, faceAnimate, backInitial, backAnimate - switch (state) { - | Initial => (toRevealed, null, toHidden, null, reduce) - | Revealed => (null, toRevealed, null, toHidden, reduce) - | Hidden => (null, toHidden, null, toRevealed, reduce) +module Back = { + [@react.component] + let make = (~backInitial, ~backAnimate, ~toggleReveal) => { + let onClick = React.useCallback1(_ => toggleReveal(), [|toggleReveal|]); + + + ; }; }; @@ -92,22 +52,8 @@ let make = () => { let (faceInitial, faceAnimate, backInitial, backAnimate, toggleReveal) = useRevealState(); - let onClick = React.useCallback1(_ => toggleReveal(), [|toggleReveal|]); - -
- - {React.string("Face")} - - - {React.string("Back")} - +
+ +
; }; diff --git a/lib/frontend/js/pages/InboxPageMessagesCardHooks.re b/lib/frontend/js/pages/InboxPageMessagesCardHooks.re new file mode 100644 index 0000000..1a1b05a --- /dev/null +++ b/lib/frontend/js/pages/InboxPageMessagesCardHooks.re @@ -0,0 +1,58 @@ +let cardVariants = { + "toHidden": { + "transform": [| + "translateY(0px) rotateY(0deg)", + "translateY(-10px) rotateY(0deg)", + "translateY(-10px) rotateY(180deg)", + "translateY(0px) rotateY(180deg)", + |], + "transition": { + "duration": 0.6, + "times": [|0.0, 0.16, 0.84, 1.0|], + }, + }, + "toRevealed": { + "transform": [| + "translateY(0px) rotateY(180deg)", + "translateY(-10px) rotateY(180deg)", + "translateY(-10px) rotateY(360deg)", + "translateY(0px) rotateY(360deg)", + |], + "transition": { + "duration": 0.6, + "times": [|0.0, 0.16, 0.84, 1.0|], + }, + }, + "toDeleted": { + "transform": [|"translateY(-50px)"|], + }, +}; + +let toRevealed = Js.Nullable.return("toRevealed"); +let toHidden = Js.Nullable.return("toHidden"); +let null = Js.Nullable.null; + +type revealState = + | Initial + | Revealed + | Hidden; + +let useRevealState = () => { + let (state, reduce) = + React.useReducer( + (state, ()) => + switch (state) { + | Initial => Revealed + | Revealed => Hidden + | Hidden => Revealed + }, + Initial, + ); + + // faceInitial, faceAnimate, backInitial, backAnimate + switch (state) { + | Initial => (toRevealed, null, toHidden, null, reduce) + | Revealed => (null, toRevealed, null, toHidden, reduce) + | Hidden => (null, toHidden, null, toRevealed, reduce) + }; +}; diff --git a/lib/frontend/js/pages/InboxPageMessagesStyles.re b/lib/frontend/js/pages/InboxPageMessagesStyles.re new file mode 100644 index 0000000..b0dbabe --- /dev/null +++ b/lib/frontend/js/pages/InboxPageMessagesStyles.re @@ -0,0 +1,168 @@ +let messagesCss = [%cx + {| + display: flex; + flex-wrap: wrap; + justify-content: center; + padding-top: 2rem; + padding-bottom: 2rem; + gap: 2rem; +|} +]; + +let cardOuterCss = [%cx + {| + display: flex; + position: relative; + height: 20rem; + width: 100%; + + $(Theme.afterMedium) { + width: calc(50% - 1rem); + } +|} +]; + +let cardInnerCss = [%cx + {| + height: 100%; + width: 100%; + position: absolute; + backface-visibility: hidden; + border-radius: 4px; + box-sizing: border-box; +|} +]; + +let cardFaceCss = + cardInnerCss + ++ " " + ++ [%cx + {| + background-color: $(Theme.background11); + border-color: $(Theme.background9); + border-style: solid; + border-width: 2px; + color: $(Theme.foreground9); + overflow: hidden; + display: grid; + grid-template-areas: + "content content content" + "trash reply share"; + grid-template-rows: 80% 20%; +|} + ]; + +let cardFaceCloseCss = [%cx + {| + position: absolute; + top: 0.5rem; + right: 0.5rem; + padding: 0; + + border: none; + background-color: transparent; + cursor: pointer; + color: $(Theme.foreground9); + + &:hover { + color: $(Theme.primary); + } +|} +]; + +let cardFaceContentCss = [%cx + {| + font-family: "Poppins"; + font-size: 1.2rem; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + padding: 2rem; + grid-area: content; +|} +]; + +let cardFaceButtonCss = [%cx + {| + flex-grow: 1; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + padding: 0; + + border-color: $(Theme.background9); + border-style: solid; + border-width: 2px 0 0 0; + background-color: transparent; + cursor: pointer; + font-family: "Poppins"; + font-size: 1rem; + + transition: color 150ms ease-in, background-color 150ms ease-in; + + &:nth-child(2n) { + border-left-width: 2px; + border-right-width: 2px; + } +|} +]; + +let cardFaceTrashCss = + cardFaceButtonCss + ++ " " + ++ [%cx + {| +color: $(Theme.failure); +&:hover { + color: $(Theme.background9); + background-color: $(Theme.failure); +} +grid-area: trash; +|} + ]; + +let cardFaceReplyCss = + cardFaceButtonCss + ++ " " + ++ [%cx + {| +color: $(Theme.info); +&:hover { + color: $(Theme.background9); + background-color: $(Theme.info); +} +grid-area: reply; +|} + ]; + +let cardFaceShareCss = + cardFaceButtonCss + ++ " " + ++ [%cx + {| +color: $(Theme.primary); +&:hover { + color: $(Theme.background9); + background-color: $(Theme.primary); +} +grid-area: share; +|} + ]; + +let cardBackCss = + cardInnerCss + ++ " " + ++ [%cx + {| + background-color: $(Theme.background9); + background-image: url("static/noise.png"); + border-radius: 4px; + color: $(Theme.primary); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; +|} + ]; diff --git a/lib/frontend/universal/Icons.re b/lib/frontend/universal/Icons.re index 66bb2ff..c67443c 100644 --- a/lib/frontend/universal/Icons.re +++ b/lib/frontend/universal/Icons.re @@ -15,6 +15,23 @@ module BookLine = { }; }; +module ChatLine = { + [@react.component] + let make = (~size="1rem", ~className=?) => { + + + ; + }; +}; + module CheckLine = { [@react.component] let make = (~size="1rem", ~className="") => { @@ -49,6 +66,23 @@ module CloseLine = { }; }; +module DeleteBinLine = { + [@react.component] + let make = (~size="1rem", ~className=?) => { + + + ; + }; +}; + module FunctionVariant = { [@react.component] let make = (~size="1rem", ~className=?) => { diff --git a/lib/frontend/universal/pages/InboxPageLayout.re b/lib/frontend/universal/pages/InboxPageLayout.re index fc61d53..acf0121 100644 --- a/lib/frontend/universal/pages/InboxPageLayout.re +++ b/lib/frontend/universal/pages/InboxPageLayout.re @@ -1,8 +1,8 @@ -let inboxPageCss = [%cx {| +let inboxCss = [%cx {| flex-grow: 1; |}]; [@react.component] let make = (~children) => { -
children
; +
children
; };