VALIS-2-file-props (#3)

ENCODE-DCC · Mar 11, 2020 · c3b366e · c3b366e
1 parent c9affdc
commit c3b366e
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 57 deletions.
diff --git a/@types/track/TrackModel.d.ts b/@types/track/TrackModel.d.ts
@@ -6,6 +6,7 @@
 export declare type TrackModel = {
     type: string;
     name: string;
+    longname?: string;
     heightPx?: number;
     expandedHeightPx?: number;
     highlightLocation?: string;

diff --git a/dist/valis-hpgv.js b/dist/valis-hpgv.js
diff --git a/dist/valis-hpgv.js.map b/dist/valis-hpgv.js.map
diff --git a/dist/valis-hpgv.react-peer.js b/dist/valis-hpgv.react-peer.js
diff --git a/dist/valis-hpgv.react-peer.js.map b/dist/valis-hpgv.react-peer.js.map
diff --git a/src/styles/dark.css b/src/styles/dark.css
@@ -26,6 +26,23 @@
     border-bottom-right-radius: 0;
 }
 
+.hpgv_track-expander {
+    position: absolute;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    margin: auto;
+    width: 16px;
+    height: 16px;
+    padding: 4px;
+    cursor: pointer;
+    line-height: 0;
+}
+
+.hpgv_track-expander > svg {
+    display: block;
+}
+
 /* The following are draw via WebGL, so only the properties CSS used here can be changed */
 .hpgv_panel {
     --axis: black;

diff --git a/src/styles/light.css b/src/styles/light.css
@@ -34,6 +34,23 @@
     border-bottom-right-radius: 0;
 }
 
+.hpgv_track-expander {
+    position: absolute;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    margin: auto;
+    width: 16px;
+    height: 16px;
+    padding: 4px;
+    cursor: pointer;
+    line-height: 0;
+}
+
+.hpgv_track-expander > svg {
+    display: block;
+}
+
 /* The following are draw via WebGL, so only the properties CSS used here can be changed */
 .hpgv_panel {
     color: #737d94;

diff --git a/src/track/TrackModel.ts b/src/track/TrackModel.ts
@@ -8,6 +8,7 @@ export type TrackModel = {
 
     // display properties
     name: string,
+    longname?: string,
     heightPx?: number,
     expandedHeightPx?: number,
 

diff --git a/src/ui/TrackViewer.tsx b/src/ui/TrackViewer.tsx
@@ -12,8 +12,6 @@ import React = require("react");
 import IconButton from "@material-ui/core/IconButton";
 import AddIcon from "@material-ui/icons/Add";
 import CloseIcon from "@material-ui/icons/Close";
-import ExpandLessIcon from "@material-ui/icons/ExpandLess";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 import Animator from "../Animator";
 import Object2D from "engine/ui/Object2D";
 import Rect from "engine/ui/Rect";
@@ -31,6 +29,21 @@ import { OpenSansRegular } from "./font";
 import { StyleProxy } from "./util/StyleProxy";
 import { TrackEvent } from "../track/TrackEvent";
 
+
+// Icons to collapse and expand track header.
+const ExpandLessIcon = () => (
+    <svg version="1.1" focusable="false" viewBox="0 0 12 7.4">
+        <path d="M6,0L0,6l1.4,1.4L6,2.8l4.6,4.6L12,6L6,0z"/>
+    </svg>
+);
+
+const ExpandMoreIcon = () => (
+    <svg version="1.1" focusable="false" viewBox="0 0 12 7.4">
+        <path d="M10.6,0L6,4.6L1.4,0L0,1.4l6,6l6-6L10.6,0z"/>
+    </svg>
+);
+
+
 export class TrackViewer extends Object2D {
 
     // layout settings
@@ -1045,65 +1058,43 @@ export class TrackViewer extends Object2D {
         isExpanded: boolean,
         style?: React.CSSProperties
     }) {
-        const iconSize = 32;
-        const margin = 16;
+        const iconSize = 16;
+        const margin = 8;
 
         const ArrowElem = props.isExpanded ? ExpandLessIcon : ExpandMoreIcon;
 
-        const expandArrow = (<ArrowElem
-            style={{
-                marginTop: 8,
-                marginLeft: margin,
-                color: 'inherit',
-            }}
-            viewBox={`0 0 ${iconSize} ${iconSize}`}
-        />);
         return <div
             className="hpgv_ui-block hpgv_track-header"
             style={{
                 position: 'relative',
                 width: '100%',
                 height: '100%',
                 overflow: 'hidden',
-                display: 'flex',
-                alignItems: 'center',
                 ...props.style,
             }}
         >   
+            <div>{props.isExpanded && props.model.longname ? props.model.longname : props.model.name}</div>
             {
                 props.expandable ? (
                     <div
+                        role="button"
+                        tabIndex={0} 
+                        aria-expanded={props.isExpanded}
                         onClick={() => {
                             props.setExpanded(!props.isExpanded);
                         }}
-                        style={{
-                            cursor: 'pointer',
-                            userSelect: 'none',
-                            width: iconSize,
-                            height: iconSize,
-                            // minWidth: iconSize,
-                            marginRight: margin,
+                        onKeyDown={(e) => {
+                            if (e.keyCode === 13 || e.keyCode === 32) {
+                                props.setExpanded(!props.isExpanded);
+                                e.preventDefault();
+                            }
                         }}
+                        className="hpgv_track-expander"
                     >
-                        {expandArrow}
+                        <ArrowElem />
                     </div>
-                ) : (
-                    <div
-                        style={{
-                            width: iconSize,
-                            height: iconSize,
-                            // minWidth: iconSize,
-                            marginRight: margin,
-                        }}
-                    ></div>
-                )
+                ) : null
             }
-            <div style={{
-                flexGrow: 1,
-                marginRight: margin,
-            }}>
-                {props.model.name}
-            </div>
         </div>
     }