Merge pull request #87 from NordicSemiconductor/enhance_device_selector

Enhance device selector

Author: datenreisender

Changelog.md

@@ -1,3 +1,8 @@
+## Version 4.8.17
+### Updated
+- New design, device selector: Add PCA number, better alignment for port names,
+  removed wrong line below port names
+
 ## Version 4.8.16
 ## Added
 - Added support for files written in TypeScript

package.json

@@ -1,6 +1,6 @@
 {
     "name": "pc-nrfconnect-shared",
-    "version": "4.8.16",
+    "version": "4.8.17",
     "description": "Shared commodities for developing pc-nrfconnect-* packages",
     "repository": {
         "type": "git",

src/Device/DeviceSelector/DeviceList/MoreDeviceInfo.jsx

@@ -35,13 +35,34 @@
  */
 
 import React from 'react';
-import { arrayOf, shape, string } from 'prop-types';
+import { arrayOf, node, shape, string } from 'prop-types';
 
 import { serialports, displayedDeviceName } from '../../deviceInfo/deviceInfo';
 import deviceShape from '../deviceShape';
 
 import './more-device-info.scss';
 
+const Row = ({ children }) => (
+    <div className="info-row">
+        <div className="flex-space" />
+        {children}
+    </div>
+);
+Row.propTypes = {
+    children: node.isRequired,
+};
+
+const PcaNumber = ({ device }) => {
+    if (device.boardVersion == null) {
+        return null;
+    }
+
+    return <div>{device.boardVersion}</div>;
+};
+PcaNumber.propTypes = {
+    device: deviceShape.isRequired,
+};
+
 const MaybeDeviceName = ({ device }) => {
     const hasNickname = device.nickname !== '';
     if (!hasNickname) {
@@ -75,8 +96,15 @@ Serialports.propTypes = {
 
 const MoreDeviceInfo = ({ device }) => (
     <div className="more-infos">
-        <MaybeDeviceName device={device} />
-        <Serialports ports={serialports(device)} />
+        <Row>
+            <PcaNumber device={device} />
+        </Row>
+        <Row>
+            <MaybeDeviceName device={device} />
+        </Row>
+        <Row>
+            <Serialports ports={serialports(device)} />
+        </Row>
     </div>
 );
 

src/Device/DeviceSelector/DeviceList/device-list.scss

@@ -25,7 +25,7 @@
             padding: 20px;
         }
 
-        ul {
+        > ul {
             padding: 0;
             margin-bottom: 0;
 

src/Device/DeviceSelector/DeviceList/more-device-info.scss

@@ -2,7 +2,15 @@
 
 .core19-device-selector {
     .more-infos {
-        padding-left: 68px;
+        .info-row {
+            display: flex;
+            flex-direction: row;
+            padding-right: 20px;
+        }
+
+        .flex-space {
+            width: 68px;
+        }
 
         .name {
             margin-top: 1em;
@@ -13,7 +21,6 @@
             padding: 0;
             text-decoration: underline;
             margin-top: 1em;
-            margin-left: -68px;
             text-align: center;
         }
     }