External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

finished settings UI

Browse Source
This commit is contained in:
plebbitor
2023-04-19 13:56:38 +02:00
parent 3c5b725937
commit f732f3d042
2 changed files with 39 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SettingsModal.jsx
+22 -5
View File
@@ -111,10 +111,16 @@ const SettingsModal = ({ isOpen, closeModal }) => {
</li>
<ul className="settings-cat" style={{ display: expanded.includes(2) ? 'block' : 'none' }}>
<li className="settings-option disc">
IPFS Gateway URL</li>
<li className="settings-tip">Optional URL of an IPFS gateway</li>
IPFS Gateways URLs</li>
<li className="settings-tip">Optional URLs of IPFS gateways</li>
<div className="settings-input">
<input type="text" placeholder="IPFS Gateway URL" />
<textarea placeholder="IPFS Gateways URLs"
defaultValue={[
"https://ipfs.io",
"https://ipfsgateway.xyz",
"https://cloudflare-ipfs.com"
].join("\n")}
/>
</div>
</ul>
<ul className="settings-cat" style={{ display: expanded.includes(2) ? 'block' : 'none' }}>
@@ -122,7 +128,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
IPFS HTTP Client Options</li>
<li className="settings-tip">Optional URL of an IPFS API or IpfsHttpClientOptions, http://localhost:5001 to use a local IPFS node</li>
<div className="settings-input">
<input type="text" placeholder="IpfsHttpClientOptions" />
<textarea placeholder="IpfsHttpClientOptions" />
</div>
</ul>
<ul className="settings-cat" style={{ display: expanded.includes(2) ? 'block' : 'none' }}>
@@ -130,10 +136,21 @@ const SettingsModal = ({ isOpen, closeModal }) => {
PubSub HTTP Client Options</li>
<li className="settings-tip">Optional URL or IpfsHttpClientOptions used for pubsub publishing when ipfsHttpClientOptions isn't available, like in the browser</li>
<div className="settings-input">
<input type="text" placeholder="pubsubHttpClientOptions" />
<textarea placeholder="pubsubHttpClientOptions" defaultValue="https://pubsubprovider.xyz/api/v0" />
</div>
</ul>
<ul className="settings-cat" style={{ display: expanded.includes(2) ? 'block' : 'none' }}>
<li className="settings-option disc">
Data Path (Node Only)</li>
<li className="settings-tip">(Node only) Optional folder path to create/resume the user and subplebbit databasesr</li>
<div className="settings-input">
<textarea placeholder="dataPath" />
</div>
</ul>
</ul>
<div>
<button className="cache-button">Clear Cache</button>
</div>
<div className="center">
<button className="save-button">Save</button>
<button className="reset-button">Reset</button>
src/components/styled/SettingsModal.styled.jsx
+17 -6
View File
@@ -68,9 +68,10 @@ export const StyledModal = styled(Modal)`
margin: 5px;
}
input {
textarea {
width: 80%;
margin-left: 7%;
min-height: 50px;
}
.all-div {
@@ -86,9 +87,17 @@ export const StyledModal = styled(Modal)`
button {
display: inline-block;
margin-right: 5px;
margin-left: 5px;
}
}
.cache-button {
margin: auto;
margin-bottom: 10px;
display: block;
text-align: center;
}
.settings-option {
margin: 5px 0 5px 0;
padding-left: 23px;
@@ -132,23 +141,25 @@ export const StyledModal = styled(Modal)`
height: 1px;
background-color: currentColor;
position: absolute;
left: 25px;
top: 50%;
left: 28px;
top: 13px; /* Change this value according to your needs */
}
.settings-input::after {
content: '';
display: block;
width: 1px;
height: 8px;
height: 12px;
background-color: currentColor;
position: absolute;
left: 25px;
top: calc(50% - 8px);
left: 28px;
top: 1px; /* Change this value according to your needs */
}
${({ selectedStyle }) => {
switch (selectedStyle) {
case 'Yotsuba':