styling sidebar

This commit is contained in:
Roland Osborne 2022-03-26 22:57:09 -07:00
parent f030b5ae1f
commit 3e8ecdf0d8
6 changed files with 24 additions and 14 deletions

View File

@ -3,7 +3,6 @@ import { setProfileImage, setProfileData, getProfileImageUrl, getAccountStatus,
async function updateAccount(token, updateData) { async function updateAccount(token, updateData) {
let status = await getAccountStatus(token); let status = await getAccountStatus(token);
console.log(status);
updateData({ status: status }); updateData({ status: status });
} }
@ -112,18 +111,18 @@ export function useAppContext() {
while(revision.current != null) { while(revision.current != null) {
let rev = revision.current; let rev = revision.current;
// update group if revision changed
if (rev.group != groupRevision.current) {
await updateGroups(token, groupRevision.current, groups.current, updateData);
groupRevision.current = rev.group
}
// update profile if revision changed // update profile if revision changed
if (rev.profile != profileRevision.current) { if (rev.profile != profileRevision.current) {
await updateProfile(token, updateData) await updateProfile(token, updateData)
profileRevision.current = rev.profile profileRevision.current = rev.profile
} }
// update group if revision changed
if (rev.group != groupRevision.current) {
await updateGroups(token, groupRevision.current, groups.current, updateData);
groupRevision.current = rev.group
}
// update account status if revision changed // update account status if revision changed
if (rev.account != accountRevision.current) { if (rev.account != accountRevision.current) {
await updateAccount(token, updateData) await updateAccount(token, updateData)

View File

@ -96,10 +96,10 @@ export function Profile(props) {
<Checkbox checked={state.searchable} onChange={(e) => onSearchable(e.target.checked)} /> <Checkbox checked={state.searchable} onChange={(e) => onSearchable(e.target.checked)} />
</div> </div>
<div class="avatar" onClick={() => setLogoVisible(true)}> <div class="avatar" onClick={() => setLogoVisible(true)}>
<Logo />
<div class="logoedit"> <div class="logoedit">
<EditIcon /> <EditIcon />
</div> </div>
<Logo />
</div> </div>
<div class="block" onClick={() => setInfoVisible(true)}> <div class="block" onClick={() => setInfoVisible(true)}>
<span class="label">details:</span> <span class="label">details:</span>

View File

@ -95,13 +95,15 @@ export const ProfileWrapper = styled.div`
.logoedit { .logoedit {
align-self: flex-end; align-self: flex-end;
font-size: 16px; font-size: 16px;
position: absolute; position: relative;
padding-right: 8px; padding-right: 8px;
cursor: pointer; cursor: pointer;
background: #f6f5ed; background: #f6f5ed;
padding-left: 8px; padding-left: 8px;
border-radius: 4px; border-radius: 4px;
border: 1px solid #dddddd; border: 1px solid #dddddd;
z-index: 10;
left: 192px;
} }
.detailedit { .detailedit {

View File

@ -79,10 +79,10 @@ export function useProfile() {
img.onload = () => { img.onload = () => {
var canvas = document.createElement("canvas"); var canvas = document.createElement("canvas");
var context = canvas.getContext('2d'); var context = canvas.getContext('2d');
canvas.width = 256; canvas.width = 128;
canvas.height = 256; canvas.height = 128;
context.drawImage(img, state.crop.x, state.crop.y, state.crop.w, state.crop.h, context.drawImage(img, state.crop.x, state.crop.y, state.crop.w, state.crop.h,
0, 0, 256, 256); 0, 0, 128, 128);
resolve(canvas.toDataURL()); resolve(canvas.toDataURL());
} }
img.onerror = reject; img.onerror = reject;

View File

@ -6,7 +6,7 @@ export function Registry() {
return ( return (
<RegistryWrapper> <RegistryWrapper>
<Input.Search placeholder="Server" allowClear style={{ width: '100%' }} /> <Input.Search placeholder="Server" allowClear style={{ width: '100%' }} />
<div class="contacts" />
</RegistryWrapper> </RegistryWrapper>
); );
} }

View File

@ -2,10 +2,19 @@ import styled from 'styled-components';
export const RegistryWrapper = styled.div` export const RegistryWrapper = styled.div`
position: relative; position: relative;
width: 100%;
padding-left: 8px; padding-left: 8px;
padding-right: 8px; padding-right: 8px;
text-align: center; text-align: center;
height: calc(100vh - 143px);
display: flex;
flex-direction: column;
.contacts {
flex-grow: 1
background-color: #fefefe;
border-radius-bottom-right: 8px;
border-radius-bottom-left: 8px;
}
`; `;