mirrors
/
gotosocial
mirror of
1
Fork 0
Code Issues Releases Activity

profile overview

This commit is contained in:
f0x 2022-09-11 21:59:39 +02:00
parent 4eee86d2ed
commit 8474dd434a
5 changed files with 69 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
internal/web/settings-panel.go
View File

@ -41,6 +41,7 @@ func (m *Module) SettingsPanelHandler(c *gin.Context) {
assetsPathPrefix + "/Fork-Awesome/css/fork-awesome.min.css",
assetsPathPrefix + "/dist/_colors.css",
assetsPathPrefix + "/dist/base.css",
assetsPathPrefix + "/dist/profile.css",
assetsPathPrefix + "/dist/settings-panel-style.css",
},
"javascript": []string{

5
web/source/css/base.css
View File

@ -280,6 +280,11 @@ input, select, textarea {
}
}
::placeholder {
opacity: 1;
color: $fg-reduced
}
input, textarea {
padding-top: 0.1rem;
padding-bottom: 0.1rem;

7
web/source/settings-panel/components/submit.js → web/source/settings-panel/components/submit.jsx
View File

@ -24,7 +24,12 @@ module.exports = function Submit({onClick, label, errorMsg, statusMsg}) {
return (
<div className="messagebutton">
<button type="submit" onClick={onClick}>{ label }</button>
<div className="error accent">{errorMsg ? errorMsg : statusMsg}</div>
{errorMsg.length > 0 &&
<div className="error accent">{errorMsg}</div>
}
{statusMsg.length > 0 &&
<div className="accent">{statusMsg}</div>
}
</div>
);
};

37
web/source/settings-panel/style.css
View File

@ -182,6 +182,43 @@ input, select, textarea {
flex-direction: column;
gap: 1rem;
.overview {
display: grid;
grid-template-columns: 1fr auto;
.basic {
margin-top: -4.5rem;
.avatar {
height: 5rem;
width: 5rem;
}
.displayname {
font-size: 1.3rem;
padding-top: 0;
padding-bottom: 0;
margin-top: 0.7rem;
}
}
.files {
padding: 1rem;
h3 {
margin-top: 0;
}
div:first-child {
margin-bottom: 1rem;
}
span {
font-style: italic;
}
}
}
input, textarea {
width: 100%;
line-height: 1.5rem;

36
web/source/settings-panel/user/profile.js
View File

@ -21,7 +21,6 @@
const Promise = require("bluebird");
const React = require("react");
const Redux = require("react-redux");
const { useErrorHandler } = require("react-error-boundary");
const Submit = require("../components/submit");
@ -89,31 +88,34 @@ module.exports = function UserProfile() {
return (
<div className="user-profile">
<h1>@{account.username}&apos;s Profile Info</h1>
<div className="labelinput">
<label htmlFor="header">Header</label>
<div className="border">
<h1>Profile</h1>
<div className="overview">
<div className="profile">
<div className="headerimage">
<img className="headerpreview" src={account.header} alt={account.header ? `header image for ${account.username}` : "None set"}/>
</div>
<div className="basic">
<div id="profile-basic-filler2"></div>
<span className="avatar"><img className="avatarpreview" src={account.avatar} alt={account.avatar ? `avatar image for ${account.username}` : "None set"}/></span>
<div className="displayname">{account.display_name.trim().length > 0 ? account.display_name : account.username}</div>
<div className="username"><span>@{account.username}</span></div>
</div>
</div>
<div className="files">
<div>
<h3>Header</h3>
<label htmlFor="header" className="file-input button">Browse…</label>
<span>{headerFile ? headerFile.name : ""}</span>
<span>{headerFile ? headerFile.name : "no file selected"}</span>
</div>
</div>
<input className="hidden" id="header" type="file" accept="image/*" onChange={headerOnChange}/>
</div>
<div className="labelinput">
<label htmlFor="avatar">Avatar</label>
<div className="border">
<img className="avatarpreview" src={account.avatar} alt={account.avatar ? `avatar image for ${account.username}` : "None set"}/>
<div>
<h3>Avatar</h3>
<label htmlFor="avatar" className="file-input button">Browse…</label>
<span>{avatarFile ? avatarFile.name : ""}</span>
<span>{avatarFile ? avatarFile.name : "no file selected"}</span>
</div>
</div>
<input className="hidden" id="avatar" type="file" accept="image/*" onChange={avatarOnChange}/>
</div>
<div className="labelinput">
<label htmlFor="displayname">Display Name</label>
<label htmlFor="displayname">Name</label>
<input id="displayname" type="text" value={displayName} onChange={(e) => setDisplayName(e.target.value)} placeholder="A GoToSocial user"/>
</div>
<div className="labelinput">
@ -121,7 +123,7 @@ module.exports = function UserProfile() {
<textarea id="bio" value={bio} onChange={(e) => setBio(e.target.value)} placeholder="Just trying out GoToSocial, my pronouns are they/them and I like sloths."/>
</div>
<div className="labelcheckbox">
<label htmlFor="locked">Manually approve follow requests</label>
<label htmlFor="locked">Manually approve follow requests?</label>
<input id="locked" type="checkbox" checked={locked} onChange={(e) => setLocked(e.target.checked)}/>
</div>
<Submit onClick={submit} label="Save profile info" errorMsg={errorMsg} statusMsg={statusMsg}/>