3dtours/KGStudio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: minor UI adjustments

Browse Source
This commit is contained in:
Xiaohan-Tian
2026-05-14 23:15:38 -07:00
parent 892e154a0f
commit 42b9662bb4
3 changed files with 14 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/piano-roll/PianoRoll.css
+7 -7
View File
@@ -610,9 +610,9 @@
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
background-color: rgba(123, 104, 238, 0.15); background-color: rgba(135, 206, 250, 0.15);
border-top: 1px solid rgba(123, 104, 238, 0.3); border-top: 1px solid rgba(135, 206, 250, 0.3);
border-bottom: 1px solid rgba(123, 104, 238, 0.3); border-bottom: 1px solid rgba(135, 206, 250, 0.3);
pointer-events: none; pointer-events: none;
z-index: 1; z-index: 1;
transition: opacity 0.1s ease; transition: opacity 0.1s ease;
@@ -622,9 +622,9 @@
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
background-color: rgba(123, 104, 238, 0.1); background-color: rgba(135, 206, 250, 0.1);
border-left: 1px solid rgba(123, 104, 238, 0.25); border-left: 1px solid rgba(135, 206, 250, 0.25);
border-right: 1px solid rgba(123, 104, 238, 0.25); border-right: 1px solid rgba(135, 206, 250, 0.25);
pointer-events: none; pointer-events: none;
z-index: 1; z-index: 1;
transition: opacity 0.1s ease; transition: opacity 0.1s ease;
@@ -802,4 +802,4 @@
color: #e0e0e0; color: #e0e0e0;
min-width: 20px; min-width: 20px;
text-align: center; text-align: center;
} }
src/util/scaleUtil.test.ts
+2
View File
@@ -385,6 +385,8 @@ describe('scaleUtil', () => {
const result = generatePianoGridBackground('ionian', 'C major'); const result = generatePianoGridBackground('ionian', 'C major');
expect(result).toContain('linear-gradient'); expect(result).toContain('linear-gradient');
expect(typeof result).toBe('string'); expect(typeof result).toBe('string');
expect(result).toContain('#282828');
expect(result).toContain('#303030');
}); });
it('should generate different backgrounds for different modes', () => { it('should generate different backgrounds for different modes', () => {
src/util/scaleUtil.ts
+5 -6
View File
@@ -320,19 +320,18 @@ export const generatePianoGridBackground = (
const rowBottomMinusOne = `calc(var(--region-piano-key-height) * ${index + 1} - 1px)`; const rowBottomMinusOne = `calc(var(--region-piano-key-height) * ${index + 1} - 1px)`;
const rowBottom = `calc(var(--region-piano-key-height) * ${index + 1})`; const rowBottom = `calc(var(--region-piano-key-height) * ${index + 1})`;
// For scale notes: highlight the full row with a semi-transparent blue background // Match the event list palette while preserving scale-aware row distinction.
// For non-scale notes: use transparent background with just the separator line
if (isInScale) { if (isInScale) {
return ` return `
rgba(90, 123, 154, 0.15) ${rowTop}, #282828 ${rowTop},
rgba(90, 123, 154, 0.15) ${rowBottomMinusOne}, #282828 ${rowBottomMinusOne},
#3a3a3a ${rowBottomMinusOne}, #3a3a3a ${rowBottomMinusOne},
#3a3a3a ${rowBottom} #3a3a3a ${rowBottom}
`.trim(); `.trim();
} else { } else {
return ` return `
transparent ${rowTop}, #303030 ${rowTop},
transparent ${rowBottomMinusOne}, #303030 ${rowBottomMinusOne},
#3a3a3a ${rowBottomMinusOne}, #3a3a3a ${rowBottomMinusOne},
#3a3a3a ${rowBottom} #3a3a3a ${rowBottom}
`.trim(); `.trim();