Make proposal list sections collapsible

mysteriumnetwork · Mar 9, 2020 · 34030d2 · 34030d2
1 parent f70a43d
commit 34030d2
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 66 deletions.
diff --git a/src/connect-view.tsx b/src/connect-view.tsx
@@ -12,7 +12,7 @@ export const ConnectView = () => {
         <View id="main" styleSheet={styleSheet}>
             <View id="left">
                 <ScrollArea id="scroll">
-                    <Proposals/>
+                    <View style={`width: 294;`}><Proposals/></View>
                 </ScrollArea>
             </View>
             <View id="right">

diff --git a/src/location/connection-location.tsx b/src/location/connection-location.tsx
@@ -21,11 +21,10 @@ export const ConnectionLocation = observer(() => {
                 textStyle={`
                     color: "black";
                 `}
-                viewStyle={`
+                containerStyle={`
                     justify-content: "center";
                 `}
                 code={connection.location?.country || "unknown"}
-                flag
             />
         </View>
     )

diff --git a/src/location/countries.ts b/src/location/countries.ts
@@ -961,7 +961,7 @@ export type Country = {
     flag: string // base64
 }
 
-export const country = (countryCode: string): Country => {
+export const resolveCountry = (countryCode?: string): Country => {
     if (!countryCode) {
         return unknown
     }

diff --git a/src/proposals/proposal.tsx b/src/proposals/proposal.tsx
@@ -47,20 +47,15 @@ export const Proposal = observer((p: UIProposal) => {
 
 const styleSheet = `
 #proposal {
-    width: 294;
-    margin: 0;
-    padding: 0;
 }
 #proposal:hover {
-    background: #4f5c5d;
 }
 #button {
-    width: 289;
+    width: "100%";
     height: 40px;
     font-size: 12px;
     font-family: "Monaco, monospace";
     text-align: left;
-    color: #f0f0f0;
     margin: 0;
     padding: 0;
     padding-left: 10;

diff --git a/src/proposals/proposals.tsx b/src/proposals/proposals.tsx
@@ -3,6 +3,7 @@ import {useStores} from "../store";
 import {View} from "@nodegui/react-nodegui";
 import {observer} from "mobx-react-lite";
 import {Proposal} from "./proposal";
+import {Collapse} from "../ui-kit/collapse/collapse";
 import {Country} from "../ui-kit/country/country";
 
 export const Proposals = observer(() => {
@@ -12,19 +13,26 @@ export const Proposals = observer(() => {
         <View id="container" styleSheet={styleSheet}>
             {Object.keys(byCountry).sort().map(countryCode => {
                 return (
-                    <View id="country-container" key={countryCode}>
-                        <View id="country">
-                            <Country code={countryCode} flag/>
-                        </View>
-                        <View id="country-proposals">
-                            {byCountry[countryCode].map(p => {
-                                return (
-                                    <Proposal key={`${p.providerId}${p.serviceType}`} {...p}/>
-                                )
-                            })}
-                        </View>
-                    </View>
-                )
+                    <Collapse
+                        initiallyCollapsed
+                        header={
+                            <View style={`padding-top: 5; padding-bottom: 5; padding-left: 15;`}>
+                                <Country
+                                    textStyle={`font-size: 14px; color: #444;`}
+                                    code={countryCode}
+                                />
+                            </View>
+                        }
+                        content={
+                            <View id="country-proposals">
+                                {byCountry[countryCode].map(p => {
+                                    return (
+                                        <Proposal key={`${p.providerId}${p.serviceType}`} {...p}/>
+                                    )
+                                })}
+                            </View>
+                        }
+                    />)
             })}
         </View>
     )
@@ -33,19 +41,18 @@ export const Proposals = observer(() => {
 
 const styleSheet = `
 #container {
-    font-size: 12px;
-    background: #6f7c7d;
+    font-size: 13px;
+    background: #fafafa;
 
     flex-direction: column;
     padding: 0;
     padding-top: 0;
-    padding-bottom: 27;
+    width: "100%";
 }
 #country-container {
     flex-direction: column;
 }
 #country {
-    background: #7f8c8d;
     padding: 10;
     height: 40px;
     border-bottom: 1px solid #666;

diff --git a/src/ui-kit/country/country.tsx b/src/ui-kit/country/country.tsx
@@ -1,48 +1,22 @@
 import React from "react";
-import {Image, Text, View} from "@nodegui/react-nodegui";
-import {AspectRatioMode} from "@nodegui/nodegui";
-import {country} from "../../location/countries";
-
-export type FlagProps = {
-    base64: Buffer
-    size: number
-}
-
-export const Flag: React.FC<FlagProps> = ({base64, size}) => {
-    return (
-        <Image
-            size={{ width: size, height: size }}
-            style={`width: ${size}; height: ${size};`}
-            aspectRatioMode={AspectRatioMode.KeepAspectRatio}
-            buffer={base64}/>
-    )
-}
+import {resolveCountry} from "../../location/countries";
+import {ResolvedCountry} from "./resolved-country";
 
 export type CountryProps = {
     code: string
-    viewStyle?: string,
-    textStyle?: string,
-    flag: boolean
+    containerStyle?: string
+    textStyle?: string
 }
 
-export const Country: React.FC<CountryProps> = ({code, textStyle, viewStyle, flag}) => {
-    const c = country(code)
-    const flag64 = Buffer.from(c.flag, "base64")
+export const Country: React.FC<CountryProps> = (props) => {
+    const c = resolveCountry(props.code)
+    const flagBase64 = Buffer.from(c.flag, "base64")
     return (
-        <View style={`
-            align-items: "center";
-        ` + (viewStyle || '')}>
-            {flag && (
-                <Flag size={24} base64={flag64}/>
-            )}
-            <Text style={`
-                color: #eee;
-                font-size: 12px;
-                margin-left: 1px;
-            ` + (textStyle || '')}>{c.name}</Text>
-        </View>
-
+        <ResolvedCountry
+            name={c.name}
+            flagBase64={flagBase64}
+            textStyle={props.textStyle}
+            containerStyle={props.containerStyle}
+        />
     )
 }
-
-
diff --git a/src/ui-kit/country/flag.tsx b/src/ui-kit/country/flag.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import {Image} from "@nodegui/react-nodegui";
+import {AspectRatioMode} from "@nodegui/nodegui";
+
+export type FlagProps = {
+    imageBase64: Buffer
+    size: number
+}
+
+export const Flag: React.FC<FlagProps> = ({imageBase64, size}) => {
+    return (
+        <Image
+            size={{width: size, height: size}}
+            style={`width: ${size}; height: ${size};`}
+            aspectRatioMode={AspectRatioMode.KeepAspectRatio}
+            buffer={imageBase64}/>
+    )
+}
diff --git a/src/ui-kit/country/resolved-country.tsx b/src/ui-kit/country/resolved-country.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import {Text, View} from "@nodegui/react-nodegui";
+import {Flag} from "./flag";
+
+export type ResolvedCountryProps = {
+    name: string
+    flagBase64: Buffer
+    containerStyle?: string
+    textStyle?: string
+}
+
+export const ResolvedCountry: React.FC<ResolvedCountryProps>
+    = ({name, flagBase64, containerStyle, textStyle}) => (
+    <View style={`align-items: "center"; ${containerStyle || ''}`}>
+        <Flag size={24} imageBase64={flagBase64}/>
+        <Text style={`color: #eee; font-size: 12px; margin-left: 1; ${textStyle || ''}`}>{name}</Text>
+    </View>
+)