Added the ability to show all key labels, not just C

static/js/st/components/keyboard.jsx

@@ -172,7 +172,7 @@ export default class Keyboard extends React.PureComponent {
 
 
       let classes = classNames("key", {
-        labeled: this.isC(pitch),
+        labeled: this.isC(pitch) || this.props.showKeyLabels,
         white: !black,
         black: black,
         held: this.props.heldNotes && this.props.heldNotes[name],

static/js/st/components/pages/sight_reading_page.jsx

@@ -52,6 +52,7 @@ export default class SightReadingPage extends React.Component {
 
       bufferSize: 10,
       keyboardOpen: true,
+      showKeyLabels: false,
       settingsOpen: false,
       scale: window.innerWidth < 1000 ? 0.8 : 1,
       stats: new NoteStats(session.currentUser),
@@ -424,7 +425,12 @@ export default class SightReadingPage extends React.Component {
   }
 
   toggleKeyboard() {
-    this.setState({keyboardOpen: !this.state.keyboardOpen});
+    this.setState({ keyboardOpen: !this.state.keyboardOpen });
+    this.recalcFlex();
+  }
+
+  toggleKeyLabels() {
+    this.setState({ showKeyLabels: !this.state.showKeyLabels });
     this.recalcFlex();
   }
 
@@ -458,6 +464,7 @@ export default class SightReadingPage extends React.Component {
         {this.renderSettings()}
       </TransitionGroup>
 
+      {this.state.keyboardOpen && this.renderKeylabelToggle()}
       {this.renderKeyboardToggle()}
     </div>;
   }
@@ -473,6 +480,17 @@ export default class SightReadingPage extends React.Component {
     </button>
   }
 
+  renderKeylabelToggle() {
+    if (!this.state.currentStaff) { return }
+    if (this.state.currentStaff.mode != "notes") { return }
+
+    return <button
+      onClick={this.toggleKeyLabels.bind(this)}
+      className="keyboardlabel_toggle">
+      {this.state.showKeyLabels ? "Hide Key Label" : "Show Key Label"}
+    </button>
+  }
+
   renderSettings() {
     if (!this.state.settingsOpen) {
       return;
@@ -513,6 +531,7 @@ export default class SightReadingPage extends React.Component {
       upper={upper}
       midiOutput={this.props.midiOutput}
       heldNotes={this.state.heldNotes}
+      showKeyLabels={this.state.showKeyLabels}
       onKeyDown={this.pressNote}
       onKeyUp={this.releaseNote} />;
   }

static/scss/sight_reading_page.scss

@@ -13,6 +13,11 @@
         .workspace_header, .keyboard_toggle, .toolbar {
             display: none;
         }
+
+        .workspace_header, .keyboardlabel_toggle, .toolbar {
+            display: none;
+        }
+
     }
 
     .workspace_header{
@@ -153,4 +158,11 @@
         bottom: 10px;
         right: 10px;
     }
-}
+
+    .keyboardlabel_toggle {
+        position: absolute;
+        z-index: 2;
+        bottom: 40px;
+        right: 10px;
+    }
+}