add note icons to timeSignatureSection

src/layouts/timeSignatureSection/index.js

@@ -1,7 +1,13 @@
 import React from 'react';
 import Radium from 'radium';
 
-import { grey } from 'theme/variables';
+import { grey, darkGrey } from 'theme/variables';
+
+import {
+  quarterNotePath, quarterViewBox,
+  eighthNotePath, eightViewBox,
+  noteLinePath
+} from './stencilPaths';
 
 @Radium
 class TimeSignatureSection extends React.Component {
@@ -24,13 +30,23 @@ class TimeSignatureSection extends React.Component {
     const trippletStepWidth = (quarterStepWidth * 1.5) + (stepPadding * 0.5);
     const sixthStepWidth = (trippletStepWidth / 2) - (stepPadding / 2);
 
+    const noteHeight = 16;
+    const notePadding = quarterStepWidth / 12;
+    const quarterWidth = 9;
+    const eightWidth = 11;
+
     const baseStepStyle = {
       position: 'relative',
       height: rowHeight,
       borderRadius: sigBorderRadius,
       backgroundColor: grey,
       flexShrink: 0,
-      marginRight: stepPadding
+      marginRight: stepPadding,
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingLeft: notePadding, paddingRight: notePadding
     };
 
     const styles = {
@@ -58,38 +74,116 @@ class TimeSignatureSection extends React.Component {
       },
       trippletStep: {
         ...baseStepStyle,
-        width: trippletStepWidth
+        width: trippletStepWidth,
+        paddingRight: baseStepStyle.paddingRight + (quarterStepWidth / 3.8)
       },
       sixthStep: {
         ...baseStepStyle,
         width: sixthStepWidth
       }
     };
 
+    const EighthNote = ({visible=false, sixth=false}) => (
+      <svg viewBox={eightViewBox} width={eightWidth} height={noteHeight}>
+        <path d={eighthNotePath} fill={visible ? darkGrey : 'none'} />
+      </svg>
+    );
+
+    const QuarterNote = () => (
+      <svg viewBox={quarterViewBox} width={quarterWidth} height={noteHeight}>
+        <path d={quarterNotePath} fill={darkGrey} />
+      </svg>
+    );
+
+    const LinePadding = () => (
+      <div style={{
+        position: 'absolute',
+        width: 5, height: rowHeight,
+        right: 0, top: 0,
+        backgroundColor: grey
+      }}></div>
+    );
+
+    const SixthLine = () => {
+      const path = noteLinePath(eightWidth + 7, (quarterStepWidth / 2), 8);
+      return (
+        <div style={{position: 'absolute', width: sixthStepWidth, height: rowHeight}}>
+          <svg width={sixthStepWidth} height={rowHeight}>
+            <path d={path} stroke={darkGrey} fill='none' />
+          </svg>
+        </div>
+      )
+    };
+
+    const SixthStep = () => (
+      <div style={styles.sixthStep}>
+        <SixthLine/>
+        <EighthNote visible sixth/>
+        <EighthNote visible sixth/>
+        <EighthNote visible sixth/>
+      </div>
+    );
+
+    const TripletLine = () => {
+      const path = noteLinePath(eightWidth + 7, trippletStepWidth - (quarterStepWidth / 2), 17);
+      return (
+        <div style={{position: 'absolute', width: trippletStepWidth, height: rowHeight}}>
+          <svg width={trippletStepWidth} height={rowHeight}>
+            <path d={path} stroke={darkGrey} fill='none' />
+          </svg>
+        </div>
+      )
+    };
+
+    const TrippletStep = () => (
+      <div style={styles.trippletStep}>
+        <TripletLine/>
+        <EighthNote visible/>
+        <EighthNote/>
+        <EighthNote visible/>
+        <EighthNote/>
+        <EighthNote visible/>
+      </div>
+    );
+
+    const QuarterStep = () => (
+      <div style={styles.quarterStep}>
+        <QuarterNote/>
+      </div>
+    );
+
+    const HalfStep = () => (
+      <div style={styles.halfStep}>
+        <QuarterNote/>
+      </div>
+    );
+
     return (
       <div style={styles.wrapper}>
         <div style={styles.row}>
-          <div style={styles.sixthStep}></div>
-          <div style={styles.sixthStep}></div>
-          <div style={styles.sixthStep}></div>
-          <div style={styles.sixthStep}></div>
-          <div style={styles.sixthStep}></div>
-          <div style={styles.sixthStep}></div>
+          <SixthStep/>
+          <SixthStep/>
+          <SixthStep/>
+          <SixthStep/>
+          <SixthStep/>
+          <SixthStep/>
+          <LinePadding/>
         </div>
         <div style={styles.row}>
-          <div style={styles.trippletStep}></div>
-          <div style={styles.trippletStep}></div>
-          <div style={styles.trippletStep}></div>
+          <TrippletStep/>
+          <TrippletStep/>
+          <TrippletStep/>
+          <LinePadding/>
         </div>
         <div style={styles.row}>
-          <div style={styles.quarterStep}></div>
-          <div style={styles.quarterStep}></div>
-          <div style={styles.quarterStep}></div>
-          <div style={styles.quarterStep}></div>
+          <QuarterStep/>
+          <QuarterStep/>
+          <QuarterStep/>
+          <QuarterStep/>
         </div>
         <div style={styles.row}>
-          <div style={styles.halfStep}></div>
-          <div style={styles.halfStep}></div>
+          <HalfStep/>
+          <HalfStep/>
         </div>
       </div>
     );

src/layouts/timeSignatureSection/stencilPaths.js

@@ -0,0 +1,13 @@
+import Path from 'paths-js/path';
+
+export const quarterViewBox = '0 0 5 10';
+export const quarterNotePath = 'M3.70172187,0 L3.70172191,5.88079115 C3.70172191,5.88079115 0.971353216,5.94053841 0.313165875,8.38810558 C-0.0662483221,9.7990135 0.753797172,10.1109552 2.03593281,9.9687327 C3.31806844,9.82651024 4.55285673,8.85538253 4.66999971,7.91684005 C4.66999971,5.98330802 4.66999981,0 4.66999981,0 L3.70172187,0 Z';
+
+export const eightViewBox = '0 0 6 10';
+export const eighthNotePath = 'M3.33279571,0 L3.33279574,5.88079115 C3.33279574,5.88079115 0.719215051,5.94053841 0.0891808261,8.38810558 C-0.274004418,9.7990135 0.510964687,10.1109552 1.73825862,9.9687327 C2.96555255,9.82651024 4.14752437,8.85538253 4.25965671,7.91684005 C4.25965671,6.87224382 4.25965676,2.81905859 4.25965676,2.81905859 C4.25965676,2.81905859 5.79835291,2.48992438 5.38227777,6.22932854 C7.54538886,1.24261305 3.33279571,0 3.33279571,0 Z';
+
+const lineY1 = 9;
+export const noteLinePath = (x1, x2, arc) => Path()
+    .moveto(x1, lineY1)
+    .arc(arc, 1, 0, 0, 1, x2, lineY1)
+    .print();