Gracenote dialog, start on text menus

AaronDavidNewman · Sep 21, 2024 · 3e18c0f · 3e18c0f
1 parent a1ef3d5
commit 3e18c0f
Show file tree

Hide file tree

Showing 16 changed files with 493 additions and 154 deletions.
diff --git a/build/html/smoosic.html b/build/html/smoosic.html
@@ -3,7 +3,7 @@
 <head>
 		<meta charset="utf-8">
 		<title>Smoosic Editor</title>
-		<link href="https://aarondavidnewman.github.io/Smoosic/build/styles/fonts.css" rel="stylesheet">
+		<link href="../styles/fonts.css" rel="stylesheet">
         <link href="../styles/media.css" rel="stylesheet">
         <link href="../styles/ribbon.css" rel="stylesheet">
         <link href="../styles/dialogs.css" rel="stylesheet">

diff --git a/build/styles/dialogs.css b/build/styles/dialogs.css
@@ -385,10 +385,22 @@ button.nav-link {
   display: flex;
   flex: 0 0 100px;
   min-width: 100px;
+  justify-content: flex-end;
 }
 .nav-item {
   border-bottom: 1px solid #eee;
 }
+.attributeModal .smoControl.button-hotkey {
+  display: flex;
+  flex-flow: row;
+}
+.attributeModal .smoControl.button-hotkey button {
+  width: 70px;
+  text-align: left;
+}
+.attributeModal .smoControl.button-hotkey span.button-text {
+  float: right;
+}
 .attributeModal .smoControl.buttonArray .icon-bravura {
   left:calc(50% - 12px);
 }

diff --git a/build/styles/ribbon.css b/build/styles/ribbon.css
@@ -117,6 +117,9 @@ div.ribbonButtonContainer.expanded {
 	min-width: 50px;
 	height:50px;
 }
+.controls-top button.button-wide {
+  font-size: 1em;
+}
 
 .controls-top div {
 	display:inline-block;
@@ -132,7 +135,7 @@ div.ribbonButtonContainer.expanded {
 .controls-top .text-span {
 	position:absolute;
 	top: 30%;
-	left: 0;
+	left: 10px;
 }
 .controls-top .ribbonButtonContainer .text-span .icon-bravura {
   display: block;
@@ -153,10 +156,37 @@ button#MicrotoneButtons  {
     width:35px;
     height:40px;
 }
-
-.controls-top .ribbonButtonContainer[data-group="quickButtons"] button .icon {
-    top:25%;
-    left:25%;
+.ribbonButtonContainer[data-group="quickButtons"] .button-wide button {
+  font-size: 1.2em;
+}
+.ribbonButtonContainer[data-group="quickButtons"] .button-wide button .icon {
+  font-size: 2em;
+}
+.controls-top .ribbonButtonContainer .ribbon-button-text.icon-smo.icon {
+  position: absolute;
+  top:8px;
+  left:12px;
+}
+.controls-top .ribbonButtonContainer .button-wide .ribbon-button-text.icon-smo.icon, 
+.controls-top .ribbonButtonContainer .button-wide .ribbon-button-text.icon-bravura.icon {
+  right: 5px;
+  top: 5px;
+  left:inherit;
+  bottom:inherit;
+}
+.controls-top .ribbonButtonContainer .left-text {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.controls-top .ribbonButtonContainer .button-wide .text-span {
+  top: 12px;
+  left: 5px;
+}
+.ribbonButtonContainer[data-group="quickButtons"] button.button-wide {
+  width:100px;
+  height:55px;
 }
 .controls-top .ribbonButtonContainer[data-group="quickButtons"] .select-part-button {
   width: 120px;
@@ -313,16 +343,6 @@ button.addChord .left-text .icon {
 .controls-top .ribbonButtonContainer button.player span.ribbon-button-text {
     top:25%;
 }
-#playerButtons .ribbon-button-text {
-    top: 15%;
-    left: 15%;
-}
-
-#playerButtons,#VoiceButtons {
-    width:55px;
-    font-size:1.3em;
-}
-
 [data-group="voices"] .expanded .icon {
     font-size:1.7em;
 }
@@ -340,51 +360,7 @@ button.addChord .left-text .icon {
     background-color:green;
 }
 
-#addTextMenu .left-text {
-    left:18%;
-    top: 15%;
-    font-size: 1em;
-    position:absolute;
-}
-#DurationButtons .left-text {
-    position:absolute;
-    font-size:1.2em;
-    left:12%;
-    top:12%;
-}
-
-#MeasureButtons .left-text {
-    position:absolute;
-    top: 12%;
-    left: 15%;
-    font-size: 1.9em;
-}
-
-#GrowDuration .ribbon-button-hotkey ,
-#LessDuration .ribbon-button-hotkey {
-	font-size:3em;
-	top:0;
-}
-
-#TripletButton {
-    width:65px;
-}
-#SeptupletButton {
-	width:90px;
-}
-
-#QuintupletButton {
-	width:75px;
-}
-
-#toCoda .icon  {
-	left:10px;
-}
 
-.controls-top .ribbonButtonContainer .ribbon-button-text.icon-smo.icon {
-  position: absolute;
-  left: 12px;
-}
 .controls-top button.articulation {
 	width:50px;
 }

diff --git a/src/application/exports.ts b/src/application/exports.ts
@@ -40,6 +40,7 @@ import { cardKeysHtmlEn, cardNotesLetterHtmlEn, cardNotesChromaticHtmlEn, cardNo
 // ui dialogs and menus
 // Dialogs
 import { SuiDialogBase } from '../ui/dialogs/dialog';
+import { SuiGraceNoteAdapter, SuiGraceNoteDialog, SuiGraceNoteButtonsComponent } from '../ui/dialogs/gracenote';
 import { SuiModifierDialogFactory } from '../ui/dialogs/factory';
 import { SuiTransposeScoreDialog, SuiTransposeScoreAdapter } from '../ui/dialogs/transposeScore';
 import { SuiMeasureDialog } from '../ui/dialogs/measureFormat';
@@ -107,6 +108,7 @@ import { TextCheckComponent } from '../ui/dialogs/components/textCheck';
 import { SuiMenuManager} from '../ui/menus/manager';
 import { SuiMenuBase } from '../ui/menus/menu';
 import { SuiScoreMenu } from '../ui/menus/score';
+import { SuiTextMenu } from '../ui/menus/text';
 import { SuiPartMenu } from '../ui/menus/parts';
 import { SuiPartSelectionMenu } from '../ui/menus/partSelection';
 import { SuiDynamicsMenu } from '../ui/menus/dynamics';
@@ -186,8 +188,9 @@ export const Smo = {
     SuiMenuManager, SuiMenuBase, SuiScoreMenu, SuiFileMenu,
     SuiDynamicsMenu, SuiTimeSignatureMenu, SuiKeySignatureMenu, SuiStaffModifierMenu,
     SuiLanguageMenu, SuiMeasureMenu, SuiNoteMenu, SmoLanguage, SmoTranslator, SuiPartMenu,
-    SuiPartSelectionMenu,
+    SuiPartSelectionMenu, SuiTextMenu,
     // Dialogs
+    SuiGraceNoteAdapter, SuiGraceNoteDialog, SuiGraceNoteButtonsComponent,
     SuiTempoDialog, SuiInstrumentDialog, SuiModifierDialogFactory, SuiLibraryDialog,
     SuiTextBracketDialog, SuiKeySignatureDialog, SuiKeySignatureAdapter,
     SuiScoreViewDialog, SuiGlobalLayoutDialog, SuiScoreIdentificationDialog, SuiTransposeScoreAdapter,

diff --git a/src/render/sui/formatter.ts b/src/render/sui/formatter.ts
@@ -465,7 +465,7 @@ export class SuiLayoutFormatter {
           const declared = acLen > 0 ?
             accidentals[acLen - 1].pitches[pitch.letter].pitch.accidental : keyAccidental;
           if (declared !== pitch.accidental || pitch.cautionary) {
-            noteWidth += vexGlyph.accidentalWidth(pitch.accidental);
+            noteWidth += vexGlyph.accidentalWidth(pitch.accidental) * 2;
           }
         });
 

diff --git a/src/styles/dialogs.css b/src/styles/dialogs.css
@@ -385,10 +385,22 @@ button.nav-link {
   display: flex;
   flex: 0 0 100px;
   min-width: 100px;
+  justify-content: flex-end;
 }
 .nav-item {
   border-bottom: 1px solid #eee;
 }
+.attributeModal .smoControl.button-hotkey {
+  display: flex;
+  flex-flow: row;
+}
+.attributeModal .smoControl.button-hotkey button {
+  width: 70px;
+  text-align: left;
+}
+.attributeModal .smoControl.button-hotkey span.button-text {
+  float: right;
+}
 .attributeModal .smoControl.buttonArray .icon-bravura {
   left:calc(50% - 12px);
 }

diff --git a/src/styles/ribbon.css b/src/styles/ribbon.css
@@ -117,6 +117,9 @@ div.ribbonButtonContainer.expanded {
 	min-width: 50px;
 	height:50px;
 }
+.controls-top button.button-wide {
+  font-size: 1em;
+}
 
 .controls-top div {
 	display:inline-block;
@@ -132,7 +135,7 @@ div.ribbonButtonContainer.expanded {
 .controls-top .text-span {
 	position:absolute;
 	top: 30%;
-	left: 0;
+	left: 10px;
 }
 .controls-top .ribbonButtonContainer .text-span .icon-bravura {
   display: block;
@@ -153,10 +156,37 @@ button#MicrotoneButtons  {
     width:35px;
     height:40px;
 }
-
-.controls-top .ribbonButtonContainer[data-group="quickButtons"] button .icon {
-    top:25%;
-    left:25%;
+.ribbonButtonContainer[data-group="quickButtons"] .button-wide button {
+  font-size: 1.2em;
+}
+.ribbonButtonContainer[data-group="quickButtons"] .button-wide button .icon {
+  font-size: 2em;
+}
+.controls-top .ribbonButtonContainer .ribbon-button-text.icon-smo.icon {
+  position: absolute;
+  top:8px;
+  left:12px;
+}
+.controls-top .ribbonButtonContainer .button-wide .ribbon-button-text.icon-smo.icon, 
+.controls-top .ribbonButtonContainer .button-wide .ribbon-button-text.icon-bravura.icon {
+  right: 5px;
+  top: 5px;
+  left:inherit;
+  bottom:inherit;
+}
+.controls-top .ribbonButtonContainer .left-text {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.controls-top .ribbonButtonContainer .button-wide .text-span {
+  top: 12px;
+  left: 5px;
+}
+.ribbonButtonContainer[data-group="quickButtons"] button.button-wide {
+  width:100px;
+  height:55px;
 }
 .controls-top .ribbonButtonContainer[data-group="quickButtons"] .select-part-button {
   width: 120px;
@@ -313,16 +343,6 @@ button.addChord .left-text .icon {
 .controls-top .ribbonButtonContainer button.player span.ribbon-button-text {
     top:25%;
 }
-#playerButtons .ribbon-button-text {
-    top: 15%;
-    left: 15%;
-}
-
-#playerButtons,#VoiceButtons {
-    width:55px;
-    font-size:1.3em;
-}
-
 [data-group="voices"] .expanded .icon {
     font-size:1.7em;
 }
@@ -340,51 +360,7 @@ button.addChord .left-text .icon {
     background-color:green;
 }
 
-#addTextMenu .left-text {
-    left:18%;
-    top: 15%;
-    font-size: 1em;
-    position:absolute;
-}
-#DurationButtons .left-text {
-    position:absolute;
-    font-size:1.2em;
-    left:12%;
-    top:12%;
-}
-
-#MeasureButtons .left-text {
-    position:absolute;
-    top: 12%;
-    left: 15%;
-    font-size: 1.9em;
-}
-
-#GrowDuration .ribbon-button-hotkey ,
-#LessDuration .ribbon-button-hotkey {
-	font-size:3em;
-	top:0;
-}
-
-#TripletButton {
-    width:65px;
-}
-#SeptupletButton {
-	width:90px;
-}
-
-#QuintupletButton {
-	width:75px;
-}
-
-#toCoda .icon  {
-	left:10px;
-}
 
-.controls-top .ribbonButtonContainer .ribbon-button-text.icon-smo.icon {
-  position: absolute;
-  left: 12px;
-}
 .controls-top button.articulation {
 	width:50px;
 }

diff --git a/src/ui/buttons/display.ts b/src/ui/buttons/display.ts
@@ -1,6 +1,8 @@
 import { SuiButton, SuiButtonParams } from './button';
 import { createAndDisplayDialog } from '../dialogs/dialog';
 import { SuiKeySignatureDialog } from '../dialogs/keySignature';
+import { SuiTimeSignatureDialog } from '../dialogs/timeSignature';
+import { SuiTempoDialog } from '../dialogs/tempo';
 declare var $: any;
 
 /**
@@ -64,6 +66,39 @@ export class DisplaySettings extends SuiButton {
       modifier: null
     });
   }
+  ribbonTime() {
+    if (!this.completeNotifier) {
+      return;
+    }
+    createAndDisplayDialog(SuiTimeSignatureDialog, {
+      completeNotifier: this.completeNotifier,
+      view: this.view,
+      eventSource: this.eventSource,
+      id: 'staffGroups',
+      ctor: 'SuiStaffGroupDialog',
+      tracker: this.view.tracker,
+      modifier: null,
+      startPromise: null
+    });
+  }
+  ribbonTempo() {
+    if (!this.completeNotifier) {
+      return;
+    }
+    const tempo = this.view.tracker.selections[0].measure.getTempo();
+    createAndDisplayDialog(SuiTempoDialog,
+      {
+        id: 'tempoDialog',
+        ctor: 'SuiTempoDialog',
+        completeNotifier: this.completeNotifier,
+        view: this.view,
+        eventSource: this.eventSource,
+        tracker: this.view.tracker,
+        startPromise: null,
+        modifier: tempo
+      }
+    );
+  }
   async selectPart() {
     if (!this.completeNotifier) {
       return;