From 9783a9b86fe22d586a6675942d975c9d3c1abdac Mon Sep 17 00:00:00 2001 From: plebbitor Date: Tue, 18 Apr 2023 22:21:28 +0200 Subject: [PATCH] added settings UI --- .../assets/buttons/post_expand_minus_blue.png | Bin 0 -> 104 bytes .../assets/buttons/post_expand_minus_dark.png | Bin 0 -> 94 bytes .../buttons/post_expand_minus_photon.png | Bin 0 -> 102 bytes .../assets/buttons/post_expand_minus_red.png | Bin 0 -> 123 bytes src/components/SettingsModal.jsx | 102 ++++++++- .../styled/SettingsModal.styled.jsx | 209 ++++++++++++++++++ 6 files changed, 308 insertions(+), 3 deletions(-) create mode 100644 public/assets/buttons/post_expand_minus_blue.png create mode 100644 public/assets/buttons/post_expand_minus_dark.png create mode 100644 public/assets/buttons/post_expand_minus_photon.png create mode 100644 public/assets/buttons/post_expand_minus_red.png diff --git a/public/assets/buttons/post_expand_minus_blue.png b/public/assets/buttons/post_expand_minus_blue.png new file mode 100644 index 0000000000000000000000000000000000000000..283a994a23f1a4a3f4fed6a5904a669490964db7 GIT binary patch literal 104 zcmeAS@N?(olHy`uVBq!ia0vp^LLkh+1|-AI^@Rf|eNPw15R22v2@+Qt=Bt0R*OXYU zICt{-Ni7?t%(4VNvI%m(NWYM==HfwxRjIcenHkDM{}t?EulxYi%HZkh=d#Wzp$Pzo Cp&+dQ literal 0 HcmV?d00001 diff --git a/public/assets/buttons/post_expand_minus_dark.png b/public/assets/buttons/post_expand_minus_dark.png new file mode 100644 index 0000000000000000000000000000000000000000..267c3b181efd480008cc02192c071f18121e8519 GIT binary patch literal 94 zcmeAS@N?(olHy`uVBq!ia0vp^LLkh+0wn(&ce?|mR6SiBLp07OCoC{3_|q@DNaNx$ r#)(sS!(4ALRCcwc2ndKC3}Iv_D*a*@CCGUhsDZ)L)z4*}Q$iB}L=hTd literal 0 HcmV?d00001 diff --git a/public/assets/buttons/post_expand_minus_photon.png b/public/assets/buttons/post_expand_minus_photon.png new file mode 100644 index 0000000000000000000000000000000000000000..68b5c1af6d91ccafaa14f04029bd73451611f1cc GIT binary patch literal 102 zcmeAS@N?(olHy`uVBq!ia0vp^LLkh+1|-AI^@Rf|T~8Os5R22v2@-b>82q&Nlvu7f zbGql@2wrK^j*R9G)-T2xCf8mh3S2dMo50ABx^w-Ly$okMfEpP*UHx3vIVCg!04}{B AUjP6A literal 0 HcmV?d00001 diff --git a/public/assets/buttons/post_expand_minus_red.png b/public/assets/buttons/post_expand_minus_red.png new file mode 100644 index 0000000000000000000000000000000000000000..c499d841747db214bb5b99512ec4ca026175f0b0 GIT binary patch literal 123 zcmeAS@N?(olHy`uVBq!ia0vp^LLkh+1SD^+kpz+qY$ZW{!3_UF&^$uA7ARui>Eakt z!I=ERUu;1{G&3`^W6K4$>&EvF&Qf5~l1{w!@BjZ+_Q3Gl87u))ro5bepJA?2TKA6z R{huJ?JYD@<);T3K0RV1sCN}^8 literal 0 HcmV?d00001 diff --git a/src/components/SettingsModal.jsx b/src/components/SettingsModal.jsx index 57c59711..bc059459 100644 --- a/src/components/SettingsModal.jsx +++ b/src/components/SettingsModal.jsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState } from "react"; import { StyledModal } from "./styled/SettingsModal.styled"; import { Link, useLocation, useNavigate } from "react-router-dom"; import Modal from "react-modal"; @@ -14,6 +14,7 @@ const SettingsModal = ({ isOpen, closeModal }) => { const selectedStyle = useGeneralStore(state => state.selectedStyle); const navigate = useNavigate(); const location = useLocation(); + const [expanded, setExpanded] = useState([]); const handleCloseModal = () => { closeModal(); @@ -25,6 +26,28 @@ const SettingsModal = ({ isOpen, closeModal }) => { } }; + const toggleExpanded = (index) => { + setExpanded((prevExpanded) => { + const newExpanded = [...prevExpanded]; + if (newExpanded.includes(index)) { + newExpanded.splice(newExpanded.indexOf(index), 1); + } else { + newExpanded.push(index); + } + return newExpanded; + }); + }; + + const expandAll = () => { + if (expanded.length === 3) { + setExpanded([]); + } else { + setExpanded([0, 1, 2]); + } + }; + + + return ( { contentLabel="Settings" style={customOverlayStyles} selectedStyle={selectedStyle} + expanded={expanded} >
@@ -40,8 +64,80 @@ const SettingsModal = ({ isOpen, closeModal }) => {
-

Plebbit Options

-

Coming soon...

+
+ [ + + ] +
+
    +
  • + toggleExpanded(0)} + /> + toggleExpanded(0)} + >Account +
    • +
      +
    • +
      • +
    +
+
    +
  • + toggleExpanded(1)} + /> + toggleExpanded(1)} + >Profile +
    • +
      +
    • +
      • +
    +
+
    +
  • + toggleExpanded(2)} + /> + toggleExpanded(2)} + >Plebbit Options +
    • +
      +
    • + IPFS Gateway URL
      • +
    • Optional URL of an IPFS gateway
      • +
      + +
      +
    +
      +
    • + IPFS HTTP Client Options
      • +
    • Optional URL of an IPFS API or IpfsHttpClientOptions, http://localhost:5001 to use a local IPFS node
      • +
      + +
      +
    +
      +
    • + PubSub HTTP Client Options
      • +
    • Optional URL or IpfsHttpClientOptions used for pubsub publishing when ipfsHttpClientOptions isn't available, like in the browser
      • +
      + +
      +
    +
+
+ + +
); diff --git a/src/components/styled/SettingsModal.styled.jsx b/src/components/styled/SettingsModal.styled.jsx index 5114e9fb..79322d8b 100644 --- a/src/components/styled/SettingsModal.styled.jsx +++ b/src/components/styled/SettingsModal.styled.jsx @@ -40,6 +40,115 @@ export const StyledModal = styled(Modal)` margin: 10px 0 5px; } + ul { + list-style: none; + padding: 0; + margin: 0 0 10px; + } + + .settings-cat-lbl { + font-weight: 700; + margin: 10px 0 5px; + padding-left: 5px; + } + + .plus, .minus { + vertical-align: text-bottom; + margin-right: 5px; + cursor: pointer; + width: 18px; + height: 18px; + background-repeat: no-repeat; + background-position: center; + display: inline-block; + } + + .settings-cat { + display: ${({ expanded }) => index => (expanded.includes(index) ? "block" : "none")}; + margin: 5px; + } + + input { + width: 80%; + margin-left: 7%; + } + + .all-div { + text-align: center; + } + + .center { + margin: auto; + margin-bottom: 5px; + display: block; + text-align: center; + + button { + display: inline-block; + margin-right: 5px; + } + } + + .settings-option { + margin: 5px 0 5px 0; + padding-left: 23px; + display: inline-block; + } + + .settings-tip { + font-size: 0.85em; + margin: 0 0 5px 0; + padding-left: 23px; + } + + .settings-option.disc::before { + content: ''; + display: inline-block; + width: 4px; + height: 4px; + border-radius: 50%; + background-color: currentColor; + position: absolute; + margin-left: -15px; + margin-top: 6px; + } + + .settings-option { + margin: 5px 0 5px 0; + padding-left: 23px; + display: inline-block; + position: relative; + } + + .settings-input { + position: relative; + padding-left: 23px; + } + + .settings-input::before { + content: ''; + display: block; + width: 10px; + height: 1px; + background-color: currentColor; + position: absolute; + left: 25px; + top: 50%; + } + + .settings-input::after { + content: ''; + display: block; + width: 1px; + height: 8px; + background-color: currentColor; + position: absolute; + left: 25px; + top: calc(50% - 8px); + } + + + ${({ selectedStyle }) => { switch (selectedStyle) { case 'Yotsuba': @@ -54,6 +163,22 @@ export const StyledModal = styled(Modal)` .icon { background-image: url(/assets/buttons/cross_red.png); + } + + .plus { + background-image: url(/assets/buttons/post_expand_plus_red.png); + } + + .minus { + background-image: url(/assets/buttons/post_expand_minus_red.png); + } + + .all-button { + color: #00e !important; + + :hover { + color: red !important; + } }`; case 'Yotsuba-B': @@ -68,6 +193,22 @@ export const StyledModal = styled(Modal)` .icon { background-image: url(/assets/buttons/cross_blue.png); + } + + .plus { + background-image: url(/assets/buttons/post_expand_plus_blue.png); + } + + .minus { + background-image: url(/assets/buttons/post_expand_minus_blue.png); + } + + .all-button { + color: #34345c !important; + + :hover { + color: #d00 !important; + } }`; case 'Futaba': @@ -82,6 +223,22 @@ export const StyledModal = styled(Modal)` .icon { background-image: url(/assets/buttons/cross_red.png); + } + + .plus { + background-image: url(/assets/buttons/post_expand_plus_red.png); + } + + .minus { + background-image: url(/assets/buttons/post_expand_minus_red.png); + } + + .all-button { + color: #00e !important; + + :hover { + color: red !important; + } }`; case 'Burichan': @@ -96,6 +253,22 @@ export const StyledModal = styled(Modal)` .icon { background-image: url(/assets/buttons/cross_blue.png); + } + + .plus { + background-image: url(/assets/buttons/post_expand_plus_blue.png); + } + + .minus { + background-image: url(/assets/buttons/post_expand_minus_blue.png); + } + + .all-button { + color: #34345c !important; + + :hover { + color: #d00 !important; + } }`; case 'Tomorrow': @@ -110,6 +283,26 @@ export const StyledModal = styled(Modal)` .icon { background-image: url(/assets/buttons/cross_dark.png); + } + + .plus { + background-image: url(/assets/buttons/post_expand_plus_dark.png); + } + + .minus { + background-image: url(/assets/buttons/post_expand_minus_dark.png); + } + + .all-button { + color: #81a2be !important; + + :hover { + color: #5f89ac !important; + } + } + + button { + filter: brightness(80%); }`; case 'Photon': @@ -124,6 +317,22 @@ export const StyledModal = styled(Modal)` .icon { background-image: url(/assets/buttons/cross_photon.png); + } + + .plus { + background-image: url(/assets/buttons/post_expand_plus_photon.png); + } + + .minus { + background-image: url(/assets/buttons/post_expand_minus_photon.png); + } + + .all-button { + color: #f60 !important; + + :hover { + color: #f30 !important; + } }`; }