Skip to content

Commit f9f0faa

Browse files
salmacodecomputerlovesalmacodecomputerlove
committed
Styles for control panel
1 parent 9376abb commit f9f0faa

File tree

4 files changed

+77
-72
lines changed

4 files changed

+77
-72
lines changed

‎apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.html

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@
88
[class.fretboard__toggleButton--active]="fretMode === FretModes.twentyFour"
99
(click)="setFretModeClick(FretModes.twentyFour)">24 frets
1010
</button>
11-
</div>
12-
<div class="button__group">
1311
<button class="fretboard__toggleButton left"
1412
[class.fretboard__toggleButton--active]="orientation === Orientations.left"
1513
(click)="setOrientationClick(Orientations.left)">

‎apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.scss

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,13 @@
1717
&:last-of-type {
1818
margin-bottom: 0;
1919
}
20-
21-
@media screen and (min-width: $screen-med) {
22-
justify-content: flex-end;
23-
}
2420
}
2521

2622
.fretboard__toggleButton {
2723
@include chip_button_base();
28-
padding: pxToRem($grid-unit * 1.5);
2924
border-color: var(--fretboard-toggle-button-border-color);
25+
border-radius: 0;
26+
padding: pxToRem($grid-unit * 1.5);
3027
}
3128

3229
.fretboard__toggleButton--active {
@@ -35,13 +32,13 @@
3532
}
3633

3734
.fretboard__toggleButton:first-of-type {
38-
border-top-right-radius: 0;
39-
border-bottom-right-radius: 0;
35+
border-top-left-radius: var(--border-radius-chip);
36+
border-bottom-left-radius: var(--border-radius-chip);
4037
border-right-width: calc(var(--border-width-button) / 2);
4138
}
4239

4340
.fretboard__toggleButton:last-of-type {
44-
border-top-left-radius: 0;
45-
border-bottom-left-radius: 0;
41+
border-top-right-radius: var(--border-radius-chip);
42+
border-bottom-right-radius: var(--border-radius-chip);
4643
border-left-width: calc(var(--border-width-button) / 2);
4744
}

‎apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html

Lines changed: 49 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -35,62 +35,68 @@
3535
<div class="fretboard"
3636
[class.fretboard__leftHanded]="orientation === Orientations.left"
3737
[class.fretboard__24]="fretMode === FretModes.twentyFour">
38-
<ng-container *ngFor="let fret of frets">
39-
<span class="fretboard__help" [attr.data-fret]="fret"></span>
40-
</ng-container>
38+
<ng-container *ngFor="let fret of frets">
39+
<span class="fretboard__help" [attr.data-fret]="fret"></span>
40+
</ng-container>
4141
</div>
4242
</div>
4343

44-
4544
<div class="controlPanel">
45+
<div class="controlPanel__row">
46+
<div class="controlPanel__section">
47+
<h4 class="controlPanel__title" *ngIf="mode | displayScaleDegrees">Highlight scale degrees</h4>
48+
<app-scale-degrees
49+
*ngIf="mode | displayScaleDegrees"
50+
[tonicActive]="highlightedDegrees.has(ScaleDegrees.tonic)"
51+
[mediantActive]="highlightedDegrees.has(ScaleDegrees.mediant)"
52+
[dominantActive]="highlightedDegrees.has(ScaleDegrees.dominant)"
53+
(setTonicHighlight)="toggleHighlight(ScaleDegrees.tonic)"
54+
(setMediantHighlight)="toggleHighlight(ScaleDegrees.mediant)"
55+
(setDominantHighlight)="toggleHighlight(ScaleDegrees.dominant)"
56+
></app-scale-degrees>
57+
</div>
58+
<div class="controlPanel__section">
59+
<h4 class="controlPanel__title">Scale degrees display</h4>
60+
<div class="button__group button__group--right">
61+
<button class="fretboard__toggleButton"
62+
[class.fretboard__toggleButton--active]="noteNameDisplay === NoteDisplays.noteNames"
63+
(click)="toggleNoteDisplay(NoteDisplays.noteNames)">Note names
64+
</button>
65+
<button (click)="toggleNoteDisplay(NoteDisplays.numbers)"
66+
class="fretboard__toggleButton"
67+
[class.fretboard__toggleButton--active]="noteNameDisplay === NoteDisplays.numbers">Note numbers
68+
</button>
69+
</div>
4670

47-
<div class="controlPanel__section">
48-
<span class="controlPanel__title" *ngIf="!(mode | displayScaleDegrees)">Configure scale degrees</span>
49-
<span class="controlPanel__title" *ngIf="mode | displayScaleDegrees">Highlight scale degrees</span>
50-
<app-scale-degrees
51-
*ngIf="mode | displayScaleDegrees"
52-
[tonicActive]="highlightedDegrees.has(ScaleDegrees.tonic)"
53-
[mediantActive]="highlightedDegrees.has(ScaleDegrees.mediant)"
54-
[dominantActive]="highlightedDegrees.has(ScaleDegrees.dominant)"
55-
(setTonicHighlight)="toggleHighlight(ScaleDegrees.tonic)"
56-
(setMediantHighlight)="toggleHighlight(ScaleDegrees.mediant)"
57-
(setDominantHighlight)="toggleHighlight(ScaleDegrees.dominant)"
58-
></app-scale-degrees>
59-
60-
<div class="button__group">
61-
<button class="fretboard__toggleButton"
62-
[class.fretboard__toggleButton--active]="noteNameDisplay === NoteDisplays.noteNames"
63-
(click)="toggleNoteDisplay(NoteDisplays.noteNames)">Note names
64-
</button>
65-
<button (click)="toggleNoteDisplay(NoteDisplays.numbers)"
66-
class="fretboard__toggleButton"
67-
[class.fretboard__toggleButton--active]="noteNameDisplay === NoteDisplays.numbers">Note numbers
68-
</button>
6971
</div>
7072
</div>
71-
72-
<div class="controlPanel__section">
73-
<span class="controlPanel__title controlPanel__title--right">Configure fretboard</span>
73+
<div class="controlPanel__column">
74+
<h4 class="controlPanel__title">Fretboard</h4>
7475
<app-fretboard-config
7576
[fretMode]="fretMode"
7677
[orientation]="orientation"
7778
(setFretMode)="setFretMode($event)"
7879
(setOrientation)="setOrientation($event)"
7980
></app-fretboard-config>
8081
</div>
81-
</div>
8282

83-
<div class="fretboard__tuningGroup">
84-
<button class="fretboard__changeTuning"
85-
[class.tuning--active]="tuning === Tunings.standard"
86-
(click)="setTuning(Tunings.standard)">Standard
87-
</button>
88-
<button class="fretboard__changeTuning"
89-
[class.tuning--active]="tuning === Tunings.dropd"
90-
(click)="setTuning(Tunings.dropd)">Drop D
91-
</button>
92-
<button class="fretboard__changeTuning"
93-
[class.tuning--active]="tuning === Tunings.dadgad"
94-
(click)="setTuning(Tunings.dadgad)">DADGAD
95-
</button>
83+
<div class="controlPanel__column">
84+
<h4 class="controlPanel__title">Guitar tuning</h4>
85+
<div class="fretboard__tuningGroup">
86+
<button class="fretboard__changeTuning"
87+
[class.tuning--active]="tuning === Tunings.standard"
88+
(click)="setTuning(Tunings.standard)">Standard
89+
</button>
90+
<button class="fretboard__changeTuning"
91+
[class.tuning--active]="tuning === Tunings.dropd"
92+
(click)="setTuning(Tunings.dropd)">Drop D
93+
</button>
94+
<button class="fretboard__changeTuning"
95+
[class.tuning--active]="tuning === Tunings.dadgad"
96+
(click)="setTuning(Tunings.dadgad)">DADGAD
97+
</button>
98+
</div>
99+
</div>
96100
</div>
101+
102+

‎apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -484,45 +484,41 @@ $note-height: 36;
484484

485485
.controlPanel {
486486
@include content_wrapper();
487-
display: flex;
488-
flex-direction: column;
489-
justify-content: space-between;
490-
align-items: flex-start;
491487
max-width: $screen-med;
492488
margin-top: pxToRem($grid-unit * 2);
493-
margin-bottom: pxToRem($grid-unit * 2);
489+
margin-bottom: pxToRem($grid-unit * 8);
494490
background-color: var(--background-color-light);
495491
padding: pxToRem($grid-unit * 4);
496492
border-radius: pxToRem($grid-unit * 4);
497493
box-shadow: 0 pxToRem(1) pxToRem(3) rgba(26, 26, 26, 0.12), 0 pxToRem(1) pxToRem(2) rgba(26, 26, 26, 0.24);
494+
}
495+
496+
.controlPanel__row {
497+
display: flex;
498+
flex-direction: column;
499+
margin-bottom: pxToRem($grid-unit * 4);
500+
justify-content: center;
498501

499502
@media screen and (min-width: $screen-med) {
503+
justify-content: space-between;
500504
flex-direction: row;
501505
}
502506
}
503507

504-
.controlPanel__section {
508+
.controlPanel__column {
505509
display: flex;
506510
flex-direction: column;
507-
width: 100%;
508-
margin-bottom: pxToRem($grid-unit * 4);
511+
margin-bottom: pxToRem($grid-unit * 8);
512+
justify-content: center;
509513

510514
&:last-of-type {
511515
margin-bottom: 0;
512516
}
513-
514-
@media screen and (min-width: $screen-med) {
515-
margin-bottom: 0;
516-
}
517517
}
518518

519519
.controlPanel__title {
520520
@include info_container_title;
521521
text-align: center;
522-
523-
@media screen and (min-width: $screen-med) {
524-
text-align: left;
525-
}
526522
}
527523

528524
.controlPanel__title--right {
@@ -547,6 +543,12 @@ $note-height: 36;
547543
}
548544
}
549545

546+
.button__group--right {
547+
@media screen and (min-width: $screen-med) {
548+
justify-content: flex-end;
549+
}
550+
}
551+
550552
.fretboard__tuningGroup {
551553
margin-left: auto;
552554
margin-right: auto;
@@ -556,8 +558,10 @@ $note-height: 36;
556558

557559
.fretboard__changeTuning {
558560
@include chip_button_base;
559-
margin-left: pxToRem($grid-unit / 2);
560-
margin-right: pxToRem($grid-unit / 2);
561+
margin-left: pxToRem($grid-unit);
562+
margin-right: pxToRem($grid-unit);
563+
margin-bottom: pxToRem($grid-unit);
564+
border-color: var(--fretboard-toggle-button-border-color);
561565
}
562566

563567
.tuning--active {

0 commit comments

Comments
 (0)