glax/Tranga-Website
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Tooltips for some settings

Browse Source
This commit is contained in:
glax 2024-10-27 04:15:25 +01:00
parent 7eca06332a
commit e58d3f8741
3 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
Website/modules/Settings.tsx
View File

@ -158,19 +158,19 @@ export default function Settings({backendConnected, apiUri, settings, changeSett
<div className="settings-section-content"> <div className="settings-section-content">
<div className="section-item"> <div className="section-item">
<span className="settings-section-title">API Settings</span> <span className="settings-section-title">API Settings</span>
<label htmlFor="settingApiUri">API URI:</label> <label className="tooltip" data-tooltip="Set the URI of the Backend. Include https:// and if necessary port." htmlFor="settingApiUri">API URI:</label>
<input placeholder={frontendSettings.apiUri} type="text" id="settingApiUri" <input placeholder={frontendSettings.apiUri} type="text" id="settingApiUri"
onKeyDown={SubmitApiUri}/> onKeyDown={SubmitApiUri}/>
<label htmlFor="userAgent">User Agent:</label> <label htmlFor="userAgent" className="tooltip" data-tooltip="Set a custom User-Agent. This will allow more frequent requests to sites.">User Agent:</label>
<input id="userAgent" type="text" <input id="userAgent" type="text"
placeholder={backendSettings != undefined ? backendSettings.userAgent : "UserAgent"} placeholder={backendSettings != undefined ? backendSettings.userAgent : "UserAgent"}
onKeyDown={SubmitUserAgent}/> onKeyDown={SubmitUserAgent}/>
<span id="resetUserAgent" onClick={ResetUserAgent}>Reset</span> <span id="resetUserAgent" onClick={ResetUserAgent}>Reset</span>
<label htmlFor="aprilFoolsMode">April Fools Mode</label> <label htmlFor="aprilFoolsMode" className="tooltip" data-tooltip="Disable all downloads on April 1st">April Fools Mode</label>
<Toggle id="aprilFoolsMode" <Toggle id="aprilFoolsMode"
checked={backendSettings?.aprilFoolsMode ?? false} checked={backendSettings?.aprilFoolsMode ?? false}
onChange={SetAprilFoolsMode}/> onChange={SetAprilFoolsMode}/>
<label htmlFor="compression">Image Compression</label> <label htmlFor="compression" className="tooltip" data-tooltip="JPEG Compression Quality">Image Compression</label>
<input type="range" min="1" max="100" defaultValue={backendSettings?.compression ?? 50} className="slider" id="compression" onMouseUp={SetCompressImages}/> <input type="range" min="1" max="100" defaultValue={backendSettings?.compression ?? 50} className="slider" id="compression" onMouseUp={SetCompressImages}/>
<label htmlFor="bwImages">B/W Images</label> <label htmlFor="bwImages">B/W Images</label>
<Toggle id="bwImages" <Toggle id="bwImages"

18
Website/styles/index.css
View File

@ -22,3 +22,21 @@ body{
overflow-x: hidden; overflow-x: hidden;
color: var(--primary-color); color: var(--primary-color);
} }
.tooltip {
position: relative;
}
.tooltip:hover:before {
display: block;
content: attr(data-tooltip, "tooltip");
background-color: var(--second-background-color);
color: var(--secondary-color);
border: 1px solid var(--secondary-color);
border-radius: 6px;
bottom: 1em;
max-width: 90%;
position: absolute;
padding: 3px 7px 1px;
z-index: 999;
}

4
Website/styles/settings.css
View File

@ -50,6 +50,10 @@
padding: 5px 5px 35px; padding: 5px 5px 35px;
} }
.section-item > * {
margin: 2px 0;
}
.section-item[connector-status="Not Configured"]{ .section-item[connector-status="Not Configured"]{
border-color: var(--primary-color); border-color: var(--primary-color);
} }