martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 03:29:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fixing layout issues

Browse Source
This commit is contained in:
Roland Osborne 2022-08-17 13:05:01 -07:00
parent 0b7be9bf0c
commit 4ea23d0353
12 changed files with 272 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
net/web/src/session/Session.jsx
View File

@ -54,8 +54,6 @@ export function Session() {
actions.closeAccount();
}
console.log(state);
return (
<SessionWrapper>
{ (state.display === 'xlarge') && (

2
net/web/src/session/bottomNav/BottomNav.jsx
View File

@ -16,6 +16,7 @@ export function BottomNav({ state, actions }) {
const setChannels = () => {
actions.closeDetails();
actions.closeCards();
actions.closeListing();
actions.closeContact();
actions.closeProfile();
actions.closeAccount();
@ -25,6 +26,7 @@ export function BottomNav({ state, actions }) {
const setProfile = () => {
actions.closeDetails();
actions.closeCards();
actions.closeListing();
actions.closeContact();
actions.openProfile();
actions.closeConversation();

51
net/web/src/session/cards/Cards.styled.js
View File

@ -59,6 +59,26 @@ export const CardsWrapper = styled.div`
flex-direction: row;
align-items: center;
justify-content: center;
.add {
display: flex;
flex-direction: row;
color: ${Colors.white};
background-color: ${Colors.primary};
align-items: center;
justify-content: center;
padding-left: 16px;
padding-right: 16px;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
height: 100%;
flex-shrink: 0;
.label {
padding-left: 8px;
}
}
}
.dismiss {
@ -81,23 +101,24 @@ export const CardsWrapper = styled.div`
padding-bottom: 12px;
padding-top: 12px;
position: relative;
}
.add {
display: flex;
flex-direction: row;
color: ${Colors.primary};
align-items: center;
justify-content: center;
padding-left: 16px;
padding-right: 16px;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
height: 100%;
.add {
display: flex;
flex-direction: row;
color: ${Colors.primary};
align-items: center;
justify-content: center;
padding-left: 16px;
padding-right: 16px;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
height: 100%;
flex-shrink: 0;
.label {
padding-left: 8px;
.label {
padding-left: 8px;
}
}
}
`;

7
net/web/src/session/cards/cardItem/CardItem.jsx
View File

@ -20,6 +20,11 @@ export function CardItem({ item, open }) {
return profile?.handle;
}
const resync = (e) => {
e.stopPropagation();
actions.resync();
};
return (
<CardItemWrapper onClick={() => open(profile.guid)}>
<Logo url={state.logo} width={32} height={32} radius={8} />
@ -30,7 +35,7 @@ export function CardItem({ item, open }) {
<div class="markup">
{ !state.resync && item.error && (
<Tooltip placement="left" title="sync error">
<StatusError onClick={actions.resync}>
<StatusError onClick={resync}>
<ExclamationCircleOutlined />
</StatusError>
</Tooltip>

13
net/web/src/session/cards/useCards.hook.js
View File

@ -44,7 +44,12 @@ export function useCards() {
if (state.sorted) {
filtered.sort((a, b) => {
if (a?.data?.cardProfile?.name < b?.data?.cardProfile?.name) {
let aName = a?.data?.cardProfile?.name;
let bName = b?.data?.cardProfile?.name;
if (aName == bName) {
return 0;
}
if (!aName || (aName < bName)) {
return -1;
}
return 1;
@ -54,8 +59,10 @@ export function useCards() {
filtered.sort((a, b) => {
const aUpdated = a?.data?.cardDetail?.statusUpdated;
const bUpdated = b?.data?.cardDetail?.statusUpdated;
if ((aUpdated && !bUpdated) || (aUpdated && bUpdated && aUpdated > bUpdated)) {
if (aUpdated == bUpdated) {
return 0;
}
if (!aUpdated || (aUpdated < bUpdated)) {
return -1;
}
return 1;

6
net/web/src/session/channels/Channels.styled.js
View File

@ -15,10 +15,14 @@ export const ChannelsWrapper = styled.div`
}
.search {
padding: 8px;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 16px;
padding-right: 16px;
border-bottom: 1px solid ${Colors.divider};
display: flex;
flex-direction: row;
height: 48px;
.filter {
border: 1px solid ${Colors.divider};

25
net/web/src/session/contact/Contact.jsx
View File

@ -1,7 +1,7 @@
import { ContactWrapper } from './Contact.styled';
import { useContact } from './useContact.hook';
import { Logo } from 'logo/Logo';
import { RightOutlined, BookOutlined, EnvironmentOutlined } from '@ant-design/icons';
import { DatabaseOutlined, CloseOutlined, RightOutlined, BookOutlined, EnvironmentOutlined } from '@ant-design/icons';
export function Contact({ close, guid, listing }) {
@ -18,6 +18,12 @@ export function Contact({ close, guid, listing }) {
<div class="name">
<div class="data">{ state.name }</div>
</div>
{ state.node && (
<div class="location">
<DatabaseOutlined />
<div class="data">{ state.node }</div>
</div>
)}
<div class="location">
<EnvironmentOutlined />
<div class="data">{ state.location }</div>
@ -49,12 +55,19 @@ export function Contact({ close, guid, listing }) {
)}
{ state.init && state.display !== 'xlarge' && (
<div class="view">
<div class="title">{ state.handle }</div>
<div class="section">Contact Profile</div>
<div class="controls">
{ Image }
{ Details }
<div class="title">
{ state.display === 'small' && (
<div class="close"></div>
)}
<div class="handle">{ state.handle }</div>
{ state.display === 'small' && (
<div class="close" onClick={close}>
<CloseOutlined />
</div>
)}
</div>
{ Image }
{ Details }
</div>
)}
</ContactWrapper>

129
net/web/src/session/contact/Contact.styled.js
View File

@ -27,7 +27,7 @@ export const ContactWrapper = styled.div`
}
.close {
font-size: 16px;
font-size: 18px;
color: ${Colors.primary};
cursor: pointer;
padding-right: 16px;
@ -48,6 +48,45 @@ export const ContactWrapper = styled.div`
width: 20vw;
margin-right: 32px;
}
.details {
display: flex;
flex-direction: column;
.name {
display: flex;
flex-direction: row;
align-items: center;
.data {
padding-right: 8px;
font-size: 24px;
font-weight: bold;
}
}
.location {
display: flex;
flex-direction: row;
align-items: center;
padding-bottom: 8px;
.data {
padding-left: 8px;
}
}
.description {
display: flex;
flex-direction: row;
align-items: center;
padding-bottom: 8px;
.data {
padding-left: 8px;
}
}
}
}
.view {
@ -59,61 +98,73 @@ export const ContactWrapper = styled.div`
align-items: center;
.title {
display: flex;
width: 100%;
flex-direction: row;
font-size: 18px;
font-weight: bold;
padding-top: 8px;
padding-bottom: 32px;
.handle {
flex-grow: 1;
font-weight: bold;
display: flex;
justify-content: center;
}
.close {
color: ${Colors.primary};
cursor: pointer;
width: 64px;
display: flex;
justify-content: center;
align-items: center;
}
}
.logo {
position: relative;
width: 80%;
width: 50%;
margin-bottom: 16px;
}
.section {
width: 100%;
color: ${Colors.grey};
padding-top: 16px;
font-size: 12px;
.details {
display: flex;
justify-content: center;
}
}
.details {
display: flex;
flex-direction: column;
.name {
display: flex;
flex-direction: row;
flex-direction: column;
align-items: center;
.data {
padding-right: 8px;
font-size: 24px;
font-weight: bold;
.name {
display: flex;
flex-direction: row;
align-items: center;
.data {
padding-right: 8px;
font-size: 24px;
font-weight: bold;
}
}
}
.location {
display: flex;
flex-direction: row;
align-items: center;
padding-bottom: 8px;
.location {
display: flex;
flex-direction: row;
align-items: center;
padding-bottom: 8px;
.data {
padding-left: 8px;
.data {
padding-left: 8px;
}
}
}
.description {
display: flex;
flex-direction: row;
align-items: center;
padding-bottom: 8px;
.description {
display: flex;
flex-direction: row;
align-items: center;
padding-bottom: 8px;
.data {
padding-left: 8px;
.data {
padding-left: 8px;
}
}
}
}

21
net/web/src/session/contact/useContact.hook.js
View File

@ -12,6 +12,7 @@ export function useContact(guid, listing) {
location: null,
description: null,
handle: null,
node: null,
removed: false,
init: false,
});
@ -25,28 +26,20 @@ export function useContact(guid, listing) {
}
useEffect(() => {
let logo, name, location, description, handle;
let logo, name, location, description, handle, node;
let contact = card.actions.getCardByGuid(guid);
if (contact) {
let cardProfile = contact?.data?.cardProfile;
if (cardProfile.node != profile.state.profile.node) {
handle = cardProfile.handle + '@' + cardProfile.node;
}
else {
handle = cardProfile.handle;
}
handle = cardProfile.handle;
node = cardProfile.node;
logo = card.actions.getImageUrl(contact.id);
name = cardProfile.name;
location = cardProfile.location;
description = cardProfile.description;
}
else if (listing) {
if (listing.node != profile.state.profile.node) {
handle = listing.handle + '@' + listing.node;
}
else {
handle = listing.handle;
}
handle = listing.handle;
node = listing.node;
logo = listing.imageSet ? getListingImageUrl(listing.node, listing.guid) : null;
name = listing.name;
location = listing.location;
@ -55,7 +48,7 @@ export function useContact(guid, listing) {
else {
updateState({ removed: true });
}
updateState({ init: true, logo, name, location, description, handle });
updateState({ init: true, logo, name, location, description, handle, node });
}, [card, guid, listing]);
useEffect(() => {

8
net/web/src/session/profile/Profile.jsx
View File

@ -2,7 +2,7 @@ import { Checkbox } from 'antd';
import { ProfileWrapper } from './Profile.styled';
import { useProfile } from './useProfile.hook';
import { Logo } from 'logo/Logo';
import { LockOutlined, RightOutlined, EditOutlined, BookOutlined, EnvironmentOutlined } from '@ant-design/icons';
import { DatabaseOutlined, LockOutlined, RightOutlined, EditOutlined, BookOutlined, EnvironmentOutlined } from '@ant-design/icons';
export function Profile({ closeProfile }) {
@ -23,6 +23,12 @@ export function Profile({ closeProfile }) {
<div class="data">{ state.name }</div>
<EditOutlined />
</div>
{ state.node && (
<div class="location">
<DatabaseOutlined />
<div class="data">{ state.node }</div>
</div>
)}
<div class="location">
<EnvironmentOutlined />
<div class="data">{ state.location }</div>

122
net/web/src/session/profile/Profile.styled.js
View File

@ -62,6 +62,45 @@ export const ProfileWrapper = styled.div`
cursor: pointer;
}
}
.details {
display: flex;
flex-direction: column;
.name {
display: flex;
flex-direction: row;
align-items: center;
.data {
padding-right: 8px;
font-size: 24px;
font-weight: bold;
}
}
.location {
display: flex;
flex-direction: row;
align-items: center;
padding-bottom: 8px;
.data {
padding-left: 8px;
}
}
.description {
display: flex;
flex-direction: row;
align-items: center;
padding-bottom: 8px;
.data {
padding-left: 8px;
}
}
}
}
.view {
@ -98,10 +137,50 @@ export const ProfileWrapper = styled.div`
}
}
.details {
display: flex;
flex-direction: column;
align-items: center;
.name {
display: flex;
flex-direction: row;
align-items: center;
.data {
padding-right: 8px;
font-size: 24px;
font-weight: bold;
}
}
.location {
display: flex;
flex-direction: row;
align-items: center;
padding-bottom: 8px;
.data {
padding-left: 8px;
}
}
.description {
display: flex;
flex-direction: row;
align-items: center;
padding-bottom: 8px;
.data {
padding-left: 8px;
}
}
}
.section {
width: 100%;
color: ${Colors.grey};
padding-top: 16px;
padding-top: 32px;
font-size: 12px;
display: flex;
justify-content: center;
@ -112,7 +191,7 @@ export const ProfileWrapper = styled.div`
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid ${Colors.divider};
border-top: 1px solid ${Colors.divider};
border-radius: 4px;
padding: 8px;
width: 75%;
@ -131,43 +210,4 @@ export const ProfileWrapper = styled.div`
}
}
}
.details {
display: flex;
flex-direction: column;
.name {
display: flex;
flex-direction: row;
align-items: center;
.data {
padding-right: 8px;
font-size: 24px;
font-weight: bold;
}
}
.location {
display: flex;
flex-direction: row;
align-items: center;
padding-bottom: 8px;
.data {
padding-left: 8px;
}
}
.description {
display: flex;
flex-direction: row;
align-items: center;
padding-bottom: 8px;
.data {
padding-left: 8px;
}
}
}
`

4
net/web/src/session/profile/useProfile.hook.js
View File

@ -19,9 +19,9 @@ export function useProfile() {
useEffect(() => {
if (profile.state.init) {
const { name, handle, location, description, image } = profile.state.profile;
const { node, name, handle, location, description, image } = profile.state.profile;
let url = !image ? null : profile.actions.profileImageUrl();
updateState({ init: true, name, handle, url, location, description });
updateState({ init: true, name, node, handle, url, location, description });
}
}, [profile]);