Add training pitches dialog to Smoosic

AaronDavidNewman · Sep 26, 2024 · 599269a · 599269a
1 parent b6e37fb
commit 599269a
Show file tree

Hide file tree

Showing 8 changed files with 494 additions and 13 deletions.
diff --git a/build/styles/bravura-font-codes.css b/build/styles/bravura-font-codes.css
@@ -12,8 +12,8 @@
 }
 /* not in file */
 .icon-note:before {content: "\2669";}
-.icon-grace-note:before {content: "\e562"}
-.icon-grace-note-strike:before {content: "\e560"}
+.icon-grace-note:before {content: "\e562";}
+.icon-grace-note-strike:before {content: "\e560";}
 
 .icon-bracketTop:before {content: "\e003";}
 .icon-bracketBottom:before {content: "\e004";}
@@ -154,6 +154,8 @@
 .icon-rest32nd:before {content: "\e4e8";}
 .icon-rest64th:before {content: "\e4e9";}
 .icon-rest128th:before {content: "\e4ea";}
+.icon-ottavaAlta:before { content: "\e511";}
+.icon-ottavaBassa:before { content: "\e512";}
 .icon-dynamicPiano:before {content: "\e520";}
 .icon-dynamicMezzo:before {content: "\e521";}
 .icon-dynamicForte:before {content: "\e522";}

diff --git a/build/styles/dialogs.css b/build/styles/dialogs.css
@@ -235,6 +235,12 @@ button.nav-link {
   font-style: italic;
   flex: 4 1 220px;
 }
+.smoControl button.icon-bravura {
+  position: inherit;
+  top: inherit;
+  left: inherit;
+  pointer-events: inherit;
+}
 .smoControlContainer .button-array-buttons button.repetext .icon-bravura .button-text {
   font-size: 12px;
   min-width: 35px;

diff --git a/src/application/exports.ts b/src/application/exports.ts
@@ -172,6 +172,7 @@ import { buildDom, addFileLink, InputTrapper, draggable, closeDialogPromise, get
 
 import { renderVexTests } from './generateVexTests';
 import { SuiDurationAdapter, SuiDurationButtonComponent, SuiDurationDialog } from '../ui/dialogs/durations';
+import { SuiPitchAdapter, SuiPitchDialog, SuiLetterButtonComponent, SuiIntervalButtonComponent, SuiTransposeButtonComponent } from '../ui/dialogs/pitch';
 const getClass = (jsonString: string) => {
     return eval('Smo.' + jsonString);
 };
@@ -212,7 +213,9 @@ export const Smo = {
     SuiEndBarButtonComponent, SuiStartBarButtonComponent, SuiRepeatSymbolButtonComponent,    
     /* SuiLoadActionsDialog, SuiSaveActionsDialog, */
     SuiPrintFileDialog, SuiSaveFileDialog, SuiSaveXmlDialog, SuiSaveVexDialog,
-    SuiSaveMidiDialog, SuiDialogBase,
+    SuiSaveMidiDialog, SuiDialogBase, 
+    SuiPitchDialog, SuiPitchAdapter,SuiIntervalButtonComponent, SuiLetterButtonComponent,
+    SuiTransposeButtonComponent,
     // Dialog components
     SuiTreeComponent,
     SuiDropdownComponent,

diff --git a/src/styles/bravura-font-codes.css b/src/styles/bravura-font-codes.css
@@ -12,8 +12,8 @@
 }
 /* not in file */
 .icon-note:before {content: "\2669";}
-.icon-grace-note:before {content: "\e562"}
-.icon-grace-note-strike:before {content: "\e560"}
+.icon-grace-note:before {content: "\e562";}
+.icon-grace-note-strike:before {content: "\e560";}
 
 .icon-bracketTop:before {content: "\e003";}
 .icon-bracketBottom:before {content: "\e004";}
@@ -154,6 +154,8 @@
 .icon-rest32nd:before {content: "\e4e8";}
 .icon-rest64th:before {content: "\e4e9";}
 .icon-rest128th:before {content: "\e4ea";}
+.icon-ottavaAlta:before { content: "\e511";}
+.icon-ottavaBassa:before { content: "\e512";}
 .icon-dynamicPiano:before {content: "\e520";}
 .icon-dynamicMezzo:before {content: "\e521";}
 .icon-dynamicForte:before {content: "\e522";}

diff --git a/src/styles/dialogs.css b/src/styles/dialogs.css
@@ -235,6 +235,12 @@ button.nav-link {
   font-style: italic;
   flex: 4 1 220px;
 }
+.smoControl button.icon-bravura {
+  position: inherit;
+  top: inherit;
+  left: inherit;
+  pointer-events: inherit;
+}
 .smoControlContainer .button-array-buttons button.repetext .icon-bravura .button-text {
   font-size: 12px;
   min-width: 35px;

diff --git a/src/ui/dialogs/durations.ts b/src/ui/dialogs/durations.ts
@@ -16,7 +16,7 @@ export class SuiDurationButtonComponent extends SuiComponentParent {
     super(dialog, params);
     this.growDurationComponent = new SuiButtonComposite(this.dialog,
       {
-        id: this.id + 'addGraceNote',
+        id: this.id + 'growDuration',
         smoName: 'growDuration',
         parentControl: this,
         icon: 'icon-smo ribbon-button-text icon-duration_grow',
@@ -27,7 +27,7 @@ export class SuiDurationButtonComponent extends SuiComponentParent {
       });
     this.lessDurationComponent = new SuiButtonComposite(this.dialog,
       {
-        id: this.id + 'addGraceNote',
+        id: this.id + 'lessDuration',
         smoName: 'lessDuration',
         parentControl: this,
         icon: 'icon-smo ribbon-button-text icon-duration_less',
@@ -38,7 +38,7 @@ export class SuiDurationButtonComponent extends SuiComponentParent {
       });
     this.growDotComponent = new SuiButtonComposite(this.dialog,
       {
-        id: this.id + 'addGraceNote',
+        id: this.id + 'growDot',
         smoName: 'growDot',
         parentControl: this,
         icon: 'icon-smo ribbon-button-text icon-duration_grow_dot',
@@ -49,15 +49,15 @@ export class SuiDurationButtonComponent extends SuiComponentParent {
       });
     this.lessDotComponent = new SuiButtonComposite(this.dialog,
       {
-        id: this.id + 'addGraceNote',
+        id: this.id + 'lessDot',
         smoName: 'lessDot',
         parentControl: this,
         icon: 'icon-smo ribbon-button-text icon-duration_less_dot',
         classes: 'icon collapseParent button-hotkey',
         control: 'SuiButtonComponent',
         label: 'Remove Dot',
         text: '<'
-      });                        
+      });
   }
   getValue(): string {
     if (this.growDurationComponent.changeFlag) {
@@ -141,7 +141,7 @@ export class SuiDurationDialog extends SuiDialogAdapterBase<SuiDurationAdapter>
           [{
             smoName: 'durationButtons',
             control: 'SuiDurationButtonComponent',
-            label: 'Note Head'
+            label: 'Note Duration'
           }, {
             smoName: 'textMessage',
             control: 'SuiReadOnlyTextComponent',