Merge pull request #1292 from colouring-cities/interface/ui-tweaks

Interface/UI tweaks

app/package.json

@@ -36,6 +36,7 @@
     "pg-format": "^1.0.4",
     "pg-promise": "^10.11.1",
     "query-string": "^6.13.1",
+    "rc-slider": "^10.4.0",
     "react": "^17.0.2",
     "react-datepicker": "^4.11.0",
     "react-dom": "^17.0.2",

app/src/api/config/dataFields.ts

@@ -1156,7 +1156,22 @@ export const buildingUserAttributesConfig = valueType<DataFieldConfig>()({
         perUser: true,
         edit: true,
         verify: false
-    }
+    },
+    community_building_hominess: {
+        perUser: true,
+        edit: true,
+        verify: false
+    },
+    community_building_coherence: {
+        perUser: true,
+        edit: true,
+        verify: false
+    },
+    community_building_fascination: {
+        perUser: true,
+        edit: true,
+        verify: false
+    },
 });
 
 export const allAttributesConfig = Object.assign({}, buildingAttributesConfig, buildingUserAttributesConfig);

app/src/frontend/building/data-components/autofill-dropdown/autofill-dropdown.tsx

@@ -68,7 +68,7 @@ export const AutofillDropdown: React.FC<AutofillDropdownProps> =  props => {
                             props.onClose();
                         }}
                     >
-                        {option.value} ({option.id})
+                        {option.value}
                     </div>)
             }
         </div>

app/src/frontend/building/data-components/slider-data-entry.tsx

@@ -0,0 +1,54 @@
+import React, { Fragment } from 'react';
+
+import { BaseDataEntryProps } from './data-entry';
+import { DataTitleCopyable } from './data-title';
+import Slider from 'rc-slider';
+import 'rc-slider/assets/index.css';
+
+interface SliderDataEntryProps extends BaseDataEntryProps {
+    value?: number;
+    placeholder?: string;
+    dots?: boolean;
+    max?: number;
+    min?: number;
+    onChange: (key: string, value: number) => void;
+}
+
+const SliderDataEntry: React.FunctionComponent<SliderDataEntryProps> = (props) => {
+
+    const marks = {
+        [props.min]: <strong>{props.min}</strong>,
+        [props.max]: <strong>{props.max}</strong>
+    };
+
+    return (
+        <Fragment>
+            <DataTitleCopyable
+                slug={props.slug}
+                slugModifier={props.slugModifier}
+                title={props.title}
+                tooltip={props.tooltip}
+                copy={props.copy}
+            />
+            <div className="slider-container">
+                <Slider
+                    value={props.value || props.min}
+                    max={props.max}
+                    min={props.min}
+                    dots={props.dots}
+                    marks={marks}
+                    disabled={props.mode === 'view' || props.disabled}
+                    onChange={
+                        e => props.onChange(
+                            props.slug, 
+                            typeof(e)=="number" ? e : e[0]
+                        )
+                    }
+                />
+            </div>
+            <p>Your score: {props.value} - Average: 2.41 (15 votes)</p>
+        </Fragment>
+    );
+};
+
+export default SliderDataEntry;

app/src/frontend/building/data-container.tsx

@@ -366,7 +366,11 @@ const withCopyEdit: (wc: React.ComponentType<CategoryViewProps>) => DataContaine
                 <div className="section-body">
                 <InfoBox>
                     {this.props.intro}&nbsp;
-                    Can you help us capture and verify this information?
+                    {(this.props.title !== "Community") ? 
+                        "Can you help us capture and verify this information?" 
+                        : 
+                        "" 
+                    }
                 </InfoBox>
                 <EditHistoryLatest
                     building={this.props.building}

app/src/frontend/building/data-containers/age-history.tsx

@@ -78,7 +78,7 @@ const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
 
     return (
         <Fragment>
-            <DataEntryGroup name="Architectural style" collapsed={subcat==null || subcat!="2"}>
+            <DataEntryGroup name="Architectural style/historial period" collapsed={subcat==null || subcat!="2"}>
                 {(props.mapColourScale != "typology_style_period") ? 
                     <button className={`map-switcher-inline enabled-state btn btn-outline btn-outline-dark key-button`} onClick={switchToStylePeriodMapStyle}>
                         Click to show architectural style.