RIFT-14850: more volume styling - 2

[osm/UI.git] / skyquake / plugins / launchpad / src / recordViewer / recordCard.jsx

diff --git a/skyquake/plugins/launchpad/src/recordViewer/recordCard.jsx b/skyquake/plugins/launchpad/src/recordViewer/recordCard.jsx
index a577706..4491776 100644 (file)
--- a/skyquake/plugins/launchpad/src/recordViewer/recordCard.jsx
+++ b/skyquake/plugins/launchpad/src/recordViewer/recordCard.jsx
@@ -135,11 +135,35 @@ export default class RecordCard extends React.Component {
             if(vdur.hasOwnProperty('volumes') && (vdur.volumes.length > 0)) {
               displayVolumesTab = true;
               vdur.volumes.map((volume, vi) => {
-                let html = Prism.highlight(JSON.stringify(volume), Prism.languages.javascript, 'javascript');
+                // let html = Prism.highlight(JSON.stringify(volume), Prism.languages.javascript, 'javascript');
+                // volumesHTML.push(
+                //     <pre className="language-js" key={index + '-' + vi}>
+                //       <code dangerouslySetInnerHTML={{__html: html}} />
+                //     </pre>
+                function buildProperties(obj) {
+                  let p = [];
+                    _.forEach(obj, function(v, k) {
+                    p.push(
+                      <div style={{margin: '0.5rem 0.5rem'}} key={k + vi}>
+                        <div style={{margin: '0 0.5rem',
+    fontWeight: 'bold', textTransform: 'uppercase', color: '#5b5b5b'}}>{k}</div>
+                        <div style={{margin: '0 0.5rem'}}>{v.constructor.name != 'Object' ? v : buildProperties(v)}</div>
+                      </div>
+                    )
+                  });
+                    return p;
+                 }
                 volumesHTML.push(
-                    <pre className="language-js" key={index + '-' + vi}>
-                      <code dangerouslySetInnerHTML={{__html: html}} />
-                    </pre>
+                    <div key={vi}>
+                      <div className="launchpadCard_title">
+                        VOLUME
+                      </div>
+                      <div style={{display: 'flex', flexDirection: 'column'}}>
+                      {
+                        buildProperties(volume)
+                      }
+                      </div>
+                    </div>
                 )
               })
             }