Skip to content

Commit

Permalink
fix: fixed mobilde view
Browse files Browse the repository at this point in the history
  • Loading branch information
@mishramonalisha76
mishramonalisha76 committed Oct 5, 2023
1 parent b523637 commit de7670d
Show file tree
Hide file tree
Showing 6 changed files with 96 additions and 171 deletions.
2 changes: 1 addition & 1 deletion packages/examples/sdk-frontend-react/src/app/app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -313,7 +313,7 @@ export function App() {
<Web3Context.Provider value={{ account, active, library, chainId }}>
<SocketContext.Provider value={socketData}>
<AccountContext.Provider value={{ pgpPrivateKey, setSpaceId }}>
<ChatUIProvider env={env} theme={darkChatTheme}>
<ChatUIProvider env={env} theme={lightChatTheme}>
<SpacesUIProvider spaceUI={spaceUI} theme={customDarkTheme}>
<Routes>
<Route
Expand Down
46 changes: 21 additions & 25 deletions packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,12 +48,9 @@ const MoreOptionsContainer = ({

return (
<Section onClick={() => handleMoreOptionsClick(row, col)}>
<MoreDarkIcon color={theme.iconColor?.groupSettings}/>
<MoreDarkIcon color={theme.iconColor?.groupSettings} />
{selectedIndex?.length && selectedIndex[0] === row && (
<DropdownContainer
ref={dropdownRef}
theme={theme}
>
<DropdownContainer ref={dropdownRef} theme={theme}>
<Dropdown
dropdownValues={dropDownValues}
hoverBGColor={theme.backgroundColor?.modalHoverBackground}
Expand Down Expand Up @@ -85,7 +82,7 @@ const CriteriaSection = ({ criteria }: { criteria: ConditionData }) => {
</Section>
);
};
// fix dropdown ui
// fix dropdown ui
const ConditionsComponent = ({ conditionData }: CriteriaProps) => {
const [selectedIndex, setSelectedIndex] = useState<Array<number> | null>(
null
Expand Down Expand Up @@ -117,18 +114,16 @@ const ConditionsComponent = ({ conditionData }: CriteriaProps) => {

useClickAway(dropdownRef, () => setSelectedIndex(null));


//fix the theming

const handleMoreOptionsClick = (row: number, col: number) => {
setSelectedIndex([row, col]);
};
return (
<Section flexDirection='column' >
{/* we can reuse the code by creating a reusable component for it */}
<Section flexDirection="column" width="100%" height='100%' >
{conditionData &&
conditionData.slice(1).map((criteria, row) => (
<Section flexDirection="column" gap="8px" margin='0 0 8px 0' position='relative'>
<Section flexDirection="column" >
{criteria.length === 1 &&
criteria.map((singleCriteria, col) => (
<>
Expand All @@ -155,11 +150,10 @@ const ConditionsComponent = ({ conditionData }: CriteriaProps) => {

{criteria.length > 1 && (
<CriteriaGroup
theme={theme}
theme={theme}
flexDirection="row"
justifyContent="space-between"
alignItems="center"

borderRadius={theme.borderRadius?.modalInnerComponents}
padding="8px 0px 8px 8px"
gap="25px"
Expand All @@ -170,7 +164,9 @@ const ConditionsComponent = ({ conditionData }: CriteriaProps) => {
{singleCriteria.type && (
<>
<Section
borderRadius={theme.borderRadius?.modalInnerComponents}
borderRadius={
theme.borderRadius?.modalInnerComponents
}
background={
theme.backgroundColor?.modalHoverBackground
}
Expand Down Expand Up @@ -225,35 +221,35 @@ export default ConditionsComponent;
const DropdownContainer = styled.div`
position: absolute;
left: 48%;
top: 69%;
top: 10%;
border-radius: ${(props) => props.theme.borderRadius.modalInnerComponents};
padding: 6px 32px 6px 12px;
z-index: 999999999999 !important;
display: flex;
flex-direction: column !important;
background: ${(props) => props.theme.backgroundColor.modalBackground};
border: ${(props) => props.theme.border.modalInnerComponents};
@media ${device.mobileL} {
left: 27%;
}
@media (min-width: 426px) and (max-width: 1150px) {
left: 48%;
}
@media (max-width: 480px) {
left: 25%;
}
// @media ${device.mobileL} {
// left: 27%;
// }
// @media (min-width: 426px) and (max-width: 1150px) {
// left: 48%;
// }
// @media (max-width: 480px) {
// left: 25%;
// }
`;

const OperatorSpan = styled(Span)<{ theme: IChatTheme }>`
padding: 4px 8px;
margin:8px 0;
border-radius: ${(props) => props.theme.borderRadius.modalInnerComponents};
background: ${(props) => props.theme.backgroundColor.modalHoverBackground};
color: ${(props) => props.theme.textColor?.modalSubHeadingText};
`;

const CriteriaGroup = styled(Section)<{ theme: IChatTheme }>`
border: ${(props) => props.theme.border?.modalInnerComponents};
`;
35 changes: 26 additions & 9 deletions packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupType.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,10 @@ import useMediaQuery from '../../../hooks/useMediaQuery';
import { device } from '../../../config';
import useToast from '../reusables/NewToast';
import { OPERATOR_OPTIONS, OPERATOR_OPTIONS_INFO } from '../constants';
import { ConditionArray } from '../exportedTypes';
import { ConditionArray, IChatTheme } from '../exportedTypes';
import ConditionsComponent from './ConditionsComponent';
import { OperatorContainer } from './OperatorContainer';
import styled from 'styled-components';

const GROUP_TYPE_OPTIONS: Array<OptionDescription> = [
{
Expand Down Expand Up @@ -53,7 +54,7 @@ const AddConditionSection = ({
subHeading,
handleNext,
}: AddConditionProps) => {
//todo - dummy data to be removed after we get condition data
//todo - dummy data to be removed after we get condition data

const dummyConditonsData: ConditionArray[] = [
[{ operator: 'any' }],
Expand Down Expand Up @@ -125,11 +126,9 @@ const AddConditionSection = ({

const dummySingleCondtionData = dummyConditonsData[2];
const theme = useContext(ThemeContext);
const [conditionOperator, setConditionOperator] = useState<string>(dummyConditonsData[0][0]?.operator as string);




const [conditionOperator, setConditionOperator] = useState<string>(
dummyConditonsData[0][0]?.operator as string
);

return (
<Section alignItems="start" flexDirection="column" gap="10px">
Expand All @@ -150,13 +149,15 @@ const AddConditionSection = ({
</Span>
</Section>

<Section margin='20px 0 10px 0'>
<Section margin="20px 0 10px 0">
<OperatorContainer
operator={conditionOperator}
setOperator={setConditionOperator}
/>
</Section>
<ConditionsComponent conditionData={dummyConditonsData} />
<ConditionSection width="100%" overflow="hidden auto" maxHeight="20rem" theme={theme} padding='0 4px 0 0'>
<ConditionsComponent conditionData={dummyConditonsData} />
</ConditionSection>

<Button
onClick={handleNext}
Expand Down Expand Up @@ -256,3 +257,19 @@ export const CreateGroupType = ({
</Section>
);
};


//styles
const ConditionSection = styled(Section)<{theme:IChatTheme}>`
&::-webkit-scrollbar-thumb {
background: ${(props) => props.theme.scrollbarColor};
border-radius: 10px;
}
&::-webkit-scrollbar-button {
height: 40px;
}
&::-webkit-scrollbar {
width: 4px;
}
`;
32 changes: 25 additions & 7 deletions packages/uiweb/src/lib/components/chat/CreateGroup/DefineCondition.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,10 @@ import OptionButtons from '../reusables/OptionButtons';

import { device } from '../../../config';
import { OPERATOR_OPTIONS, OPERATOR_OPTIONS_INFO } from '../constants';
import { ConditionArray } from '../exportedTypes';
import { ConditionArray, IChatTheme } from '../exportedTypes';
import ConditionsComponent from './ConditionsComponent';
import { OperatorContainer } from './OperatorContainer';
import styled from 'styled-components';

const dummyConditonsData: ConditionArray[] = [
[{ operator: 'any' }],
Expand Down Expand Up @@ -83,9 +84,9 @@ const dummyConditonsData: ConditionArray[] = [
],
];

const dummySingleCondtionData: ConditionArray[] = dummyConditonsData[2].map((criteria) => [
criteria,
]);
const dummySingleCondtionData: ConditionArray[] = dummyConditonsData[2].map(
(criteria) => [criteria]
);

export const DefineCondtion = ({
onClose,
Expand Down Expand Up @@ -128,9 +129,10 @@ export const DefineCondtion = ({
setOperator={setCriteriaOperator}
/>
</Section>
<ConditionsComponent
conditionData={dummySingleCondtionData}
/>
<ConditionSection width="100%" overflow="hidden auto" maxHeight="20rem" theme={theme} padding='0 4px 0 0'>

<ConditionsComponent conditionData={dummySingleCondtionData} />
</ConditionSection>
</>
)}
<Section flexDirection="column" gap="10px">
Expand All @@ -150,3 +152,19 @@ export const DefineCondtion = ({
</Section>
);
};


const ConditionSection = styled(Section)<{theme:IChatTheme}>`
&::-webkit-scrollbar-thumb {
background: ${(props) => props.theme.scrollbarColor};
border-radius: 10px;
}
&::-webkit-scrollbar-button {
height: 40px;
}
&::-webkit-scrollbar {
width: 4px;
}
`;
122 changes: 0 additions & 122 deletions packages/uiweb/src/lib/components/chat/CreateGroup/MultipleCriterias.tsx
View file

This file was deleted.

Loading

0 comments on commit de7670d

Please sign in to comment.