From af30269b9c4b4b9f7a994d3686791de2c0d61df0 Mon Sep 17 00:00:00 2001 From: Jose Diaz Date: Mon, 22 Apr 2024 20:32:31 +0200 Subject: [PATCH 1/9] Refactor button and slider placement in top row panel --- src/gui/panels/ValentineTopRowPanel.cpp | 44 ++++++++++++------------- 1 file changed, 21 insertions(+), 23 deletions(-) diff --git a/src/gui/panels/ValentineTopRowPanel.cpp b/src/gui/panels/ValentineTopRowPanel.cpp index 8bb09be7..b045c1f1 100644 --- a/src/gui/panels/ValentineTopRowPanel.cpp +++ b/src/gui/panels/ValentineTopRowPanel.cpp @@ -58,31 +58,29 @@ void TopRowPanel::resized() auto sliders = bounds.removeFromLeft (juce::roundToInt (bounds.getWidth() * .65f)); const auto buttonWidth = juce::roundToInt (sliders.getWidth() * .033f); const auto adjustedComponentWidth = sliders.getWidth() - (buttonWidth * 2.0f); - const auto sliderWidth = juce::roundToInt (adjustedComponentWidth / 3.0f); + const auto sliderInitialWidth = juce::roundToInt (adjustedComponentWidth / 3.0f); + const auto buttonNudge = juce::roundToInt (buttonWidth / 5.0f); - const auto buttonSpacer = - juce::roundToInt ((sliders.getHeight() - buttonWidth) * .5f); + const auto setButtonAndSliderBounds = [&] (auto& button, auto& slider) { + const auto initialButtonX = sliders.getX(); + const auto buttonX = initialButtonX + buttonNudge; + const auto buttonY = sliders.getCentreY() - buttonWidth / 2; - // See below note about horizontal LabelSlider dimensions and button placement. - const auto buttonNudge = juce::roundToInt (buttonWidth / 5.0f); - const auto initialCrushButtonX = sliders.getX(); - const auto crushEnableButtonBounds = sliders.removeFromLeft (buttonWidth) - .reduced (0, buttonSpacer) - .withX (initialCrushButtonX + buttonNudge); - - crushEnableButton.setBounds (crushEnableButtonBounds); - crushSlider.setBounds (sliders.removeFromLeft (sliderWidth).reduced (buttonNudge, 0)); - compressSlider.setBounds (sliders.removeFromLeft (sliderWidth)); - - const auto initialSaturateButtonX = sliders.getX(); - const auto saturateEnableButtonBounds = - sliders.removeFromLeft (buttonWidth) - .reduced (0, buttonSpacer) - .withX (initialSaturateButtonX + buttonNudge); - - saturateEnableButton.setBounds (saturateEnableButtonBounds); - saturateSlider.setBounds ( - sliders.removeFromLeft (sliderWidth).reduced (buttonNudge, 0)); + button.setBounds (sliders.removeFromLeft (buttonWidth) + .withX (buttonX) + .withY (buttonY) + .withHeight (buttonWidth)); + + const auto sliderArea = sliders.removeFromLeft (sliderInitialWidth); + const auto sliderWidth = sliderInitialWidth - buttonNudge; + const auto sliderX = sliderArea.getCentreX() - sliderWidth / 2; + + slider.setBounds (sliderArea.withX (sliderX).withWidth (sliderWidth)); + }; + + setButtonAndSliderBounds (crushEnableButton, crushSlider); + compressSlider.setBounds (sliders.removeFromLeft (sliderInitialWidth)); + setButtonAndSliderBounds (saturateEnableButton, saturateSlider); const auto logoHeight = bounds.getHeight() * .25f; const auto logoWidth = bounds.getWidth() * .75f; From b7566602ab9d873a028f7becc416bb3959da6751 Mon Sep 17 00:00:00 2001 From: Jose Diaz Date: Mon, 22 Apr 2024 21:34:57 +0200 Subject: [PATCH 2/9] Don't base button nudge on button width That would mess up button placement if we play with width. This change also changes button spacing. This is fine, because we're about to change it in the next commit. --- src/gui/panels/ValentineTopRowPanel.cpp | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/gui/panels/ValentineTopRowPanel.cpp b/src/gui/panels/ValentineTopRowPanel.cpp index b045c1f1..64864331 100644 --- a/src/gui/panels/ValentineTopRowPanel.cpp +++ b/src/gui/panels/ValentineTopRowPanel.cpp @@ -59,7 +59,7 @@ void TopRowPanel::resized() const auto buttonWidth = juce::roundToInt (sliders.getWidth() * .033f); const auto adjustedComponentWidth = sliders.getWidth() - (buttonWidth * 2.0f); const auto sliderInitialWidth = juce::roundToInt (adjustedComponentWidth / 3.0f); - const auto buttonNudge = juce::roundToInt (buttonWidth / 5.0f); + const auto buttonNudge = juce::roundToInt (sliderInitialWidth / 12.0f); const auto setButtonAndSliderBounds = [&] (auto& button, auto& slider) { const auto initialButtonX = sliders.getX(); From 10e82ee1d111d00219df14a1755a52695839c4b7 Mon Sep 17 00:00:00 2001 From: Jose Diaz Date: Mon, 22 Apr 2024 21:41:50 +0200 Subject: [PATCH 3/9] Adjust top row panel button spacing and size to spec --- src/gui/panels/ValentineTopRowPanel.cpp | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/gui/panels/ValentineTopRowPanel.cpp b/src/gui/panels/ValentineTopRowPanel.cpp index 64864331..30b47672 100644 --- a/src/gui/panels/ValentineTopRowPanel.cpp +++ b/src/gui/panels/ValentineTopRowPanel.cpp @@ -56,10 +56,10 @@ void TopRowPanel::resized() auto bounds = getLocalBounds(); auto sliders = bounds.removeFromLeft (juce::roundToInt (bounds.getWidth() * .65f)); - const auto buttonWidth = juce::roundToInt (sliders.getWidth() * .033f); + const auto buttonWidth = juce::roundToInt (sliders.getWidth() * .035f); const auto adjustedComponentWidth = sliders.getWidth() - (buttonWidth * 2.0f); const auto sliderInitialWidth = juce::roundToInt (adjustedComponentWidth / 3.0f); - const auto buttonNudge = juce::roundToInt (sliderInitialWidth / 12.0f); + const auto buttonNudge = juce::roundToInt (sliderInitialWidth / 9.25f); const auto setButtonAndSliderBounds = [&] (auto& button, auto& slider) { const auto initialButtonX = sliders.getX(); From 4fe408307f1208aaba138eef31193c6b852d060a Mon Sep 17 00:00:00 2001 From: Jose Diaz Date: Mon, 22 Apr 2024 21:44:57 +0200 Subject: [PATCH 4/9] Upgrade documentation for ValentineTopRowPanel component placement --- src/gui/panels/ValentineTopRowPanel.cpp | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/gui/panels/ValentineTopRowPanel.cpp b/src/gui/panels/ValentineTopRowPanel.cpp index 30b47672..30b35696 100644 --- a/src/gui/panels/ValentineTopRowPanel.cpp +++ b/src/gui/panels/ValentineTopRowPanel.cpp @@ -56,9 +56,14 @@ void TopRowPanel::resized() auto bounds = getLocalBounds(); auto sliders = bounds.removeFromLeft (juce::roundToInt (bounds.getWidth() * .65f)); + + // Adjust this to set button width const auto buttonWidth = juce::roundToInt (sliders.getWidth() * .035f); + const auto adjustedComponentWidth = sliders.getWidth() - (buttonWidth * 2.0f); const auto sliderInitialWidth = juce::roundToInt (adjustedComponentWidth / 3.0f); + + // Adjust this to set spacing between button and slider const auto buttonNudge = juce::roundToInt (sliderInitialWidth / 9.25f); const auto setButtonAndSliderBounds = [&] (auto& button, auto& slider) { @@ -72,6 +77,9 @@ void TopRowPanel::resized() .withHeight (buttonWidth)); const auto sliderArea = sliders.removeFromLeft (sliderInitialWidth); + + // We have to do this because the slider will otherwise intercept + // button clips. const auto sliderWidth = sliderInitialWidth - buttonNudge; const auto sliderX = sliderArea.getCentreX() - sliderWidth / 2; @@ -79,6 +87,10 @@ void TopRowPanel::resized() }; setButtonAndSliderBounds (crushEnableButton, crushSlider); + + // This ends up displaying at the same size of the other sliders because + // this is setting the width of the labelSliderComponent. The slider ends + // up being sized according to height, which is the same for all our sliders. compressSlider.setBounds (sliders.removeFromLeft (sliderInitialWidth)); setButtonAndSliderBounds (saturateEnableButton, saturateSlider); @@ -91,7 +103,7 @@ void TopRowPanel::resized() const auto logoHorizontalSpacer = (bounds.getWidth() - logoWidth) / 2.0f; // logoHorizontalSpacer is the amount we hypothetically should remove from left - // in order to have the log centred. However, the spacing is fudged here to account + // in order to have the logo centred. However, the spacing is fudged here to account // for the fact that our sliders don't take up all of the horizontal space given // to them. const auto horizontalKludgeQuotient = .8f; From 91c808b6c596e0cb6e7c33c23e8632cded7be532 Mon Sep 17 00:00:00 2001 From: Jose Diaz Date: Mon, 22 Apr 2024 21:58:30 +0200 Subject: [PATCH 5/9] Refactor output clip button and slider bounds setting --- src/gui/panels/ValentineBottomRowPanel.cpp | 25 +++++++++++++++------- 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/src/gui/panels/ValentineBottomRowPanel.cpp b/src/gui/panels/ValentineBottomRowPanel.cpp index 93de139b..fba91ce7 100644 --- a/src/gui/panels/ValentineBottomRowPanel.cpp +++ b/src/gui/panels/ValentineBottomRowPanel.cpp @@ -83,18 +83,27 @@ void BottomRowPanel::resized() .withX (dividerCentreX) .withWidth (dividerThickness); - const auto buttonSpacer = - juce::roundToInt ((bounds.getHeight() - clipButtonWidth) * .5f); - const auto buttonNudge = juce::roundToInt (clipButtonWidth / 8.0f); const auto clipButtonInitialX = bounds.getX(); - const auto clipButtonBounds = bounds.removeFromLeft (clipButtonWidth) - .reduced (0, buttonSpacer) - .withX (clipButtonInitialX + buttonNudge); + const auto clipButtonX = clipButtonInitialX + buttonNudge; + const auto clipButtonY = bounds.getCentreY() - clipButtonWidth / 2; + + clipEnableButton.setBounds (bounds.removeFromLeft (clipButtonWidth) + .withX (clipButtonX) + .withY (clipButtonY) + .withHeight (clipButtonWidth)); + + const auto outputSliderArea = bounds.removeFromLeft (sliderWidth); + + // We have to do this because the slider will otherwise intercept + // button clips. + const auto outputSliderWidth = sliderWidth - buttonNudge; + const auto outputSliderX = outputSliderArea.getCentreX() - outputSliderWidth / 2; + + outputSlider.setBounds ( + outputSliderArea.withX (outputSliderX).withWidth (outputSliderWidth)); - clipEnableButton.setBounds (clipButtonBounds); - outputSlider.setBounds (bounds.removeFromLeft (sliderWidth).reduced (buttonNudge, 0)); mixSlider.setBounds (bounds.removeFromLeft (sliderWidth)); } From ff585bbf2249abade80fb612058f3650c7e2d524 Mon Sep 17 00:00:00 2001 From: Jose Diaz Date: Mon, 22 Apr 2024 22:03:00 +0200 Subject: [PATCH 6/9] Don't use clip button width to find nudge amount --- src/gui/panels/ValentineBottomRowPanel.cpp | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/gui/panels/ValentineBottomRowPanel.cpp b/src/gui/panels/ValentineBottomRowPanel.cpp index fba91ce7..25c30be0 100644 --- a/src/gui/panels/ValentineBottomRowPanel.cpp +++ b/src/gui/panels/ValentineBottomRowPanel.cpp @@ -83,7 +83,7 @@ void BottomRowPanel::resized() .withX (dividerCentreX) .withWidth (dividerThickness); - const auto buttonNudge = juce::roundToInt (clipButtonWidth / 8.0f); + const auto buttonNudge = juce::roundToInt (sliderWidth / 14.0f); const auto clipButtonInitialX = bounds.getX(); const auto clipButtonX = clipButtonInitialX + buttonNudge; From fdae4eb4c5dd070a86da18ef476973e611673a04 Mon Sep 17 00:00:00 2001 From: Jose Diaz Date: Mon, 22 Apr 2024 22:13:50 +0200 Subject: [PATCH 7/9] Adjust size and placement of clip enable button to spec --- src/gui/panels/ValentineBottomRowPanel.cpp | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/gui/panels/ValentineBottomRowPanel.cpp b/src/gui/panels/ValentineBottomRowPanel.cpp index 25c30be0..8d69ee93 100644 --- a/src/gui/panels/ValentineBottomRowPanel.cpp +++ b/src/gui/panels/ValentineBottomRowPanel.cpp @@ -66,7 +66,7 @@ void BottomRowPanel::resized() { auto bounds = getLocalBounds(); - const auto clipButtonWidth = juce::roundToInt (bounds.getWidth() / 60.0f); + const auto clipButtonWidth = juce::roundToInt (bounds.getWidth() / 46.0f); const auto adjustedComponentWidth = bounds.getWidth() - clipButtonWidth; const auto sliderWidth = juce::roundToInt (adjustedComponentWidth / 6.0f); @@ -83,7 +83,7 @@ void BottomRowPanel::resized() .withX (dividerCentreX) .withWidth (dividerThickness); - const auto buttonNudge = juce::roundToInt (sliderWidth / 14.0f); + const auto buttonNudge = juce::roundToInt (sliderWidth / 15.0f); const auto clipButtonInitialX = bounds.getX(); const auto clipButtonX = clipButtonInitialX + buttonNudge; From 22e9ebd2ff7cd679acc7fb3f89cf4acf0cc7ada4 Mon Sep 17 00:00:00 2001 From: Jose Diaz Date: Mon, 22 Apr 2024 22:29:06 +0200 Subject: [PATCH 8/9] Rename gap width variable for clarity in PresetPanel --- libs/tote_bag/juce_gui/components/panels/PresetPanel.cpp | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/libs/tote_bag/juce_gui/components/panels/PresetPanel.cpp b/libs/tote_bag/juce_gui/components/panels/PresetPanel.cpp index cbc8f8a6..b4f3ac2f 100644 --- a/libs/tote_bag/juce_gui/components/panels/PresetPanel.cpp +++ b/libs/tote_bag/juce_gui/components/panels/PresetPanel.cpp @@ -130,8 +130,8 @@ void PresetPanel::resized() // This is used to set the gap between load button and previous button as well // as next button and preset display box - const auto loadPrevBoxGapWidth = juce::roundToInt (presetBoundsWidth * .016f); - presetBounds.removeFromLeft (loadPrevBoxGapWidth); + const auto prevNextButtonAreaGapWidth = juce::roundToInt (presetBoundsWidth * .016f); + presetBounds.removeFromLeft (prevNextButtonAreaGapWidth); const auto prevNextButtonHeight = juce::roundToInt (presetBoundsHeight * .2f); const auto prevNextButtonY = presetBoundsCentreY - prevNextButtonHeight / 2; @@ -148,7 +148,7 @@ void PresetPanel::resized() .withY (prevNextButtonY) .withHeight (prevNextButtonHeight)); - presetBounds.removeFromLeft (loadPrevBoxGapWidth); + presetBounds.removeFromLeft (prevNextButtonAreaGapWidth); const auto presetDisplayHeight = juce::roundToInt (presetBoundsHeight * .85f); const auto presetDisplayY = presetBoundsCentreY - presetDisplayHeight / 2; From 7c66021164b53a41be90e32e38753b432e3b6627 Mon Sep 17 00:00:00 2001 From: Jose Diaz Date: Thu, 25 Apr 2024 20:50:22 +0200 Subject: [PATCH 9/9] Upgrade documentation for ValentineBottomRowPanel component placement --- src/gui/panels/ValentineBottomRowPanel.cpp | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/gui/panels/ValentineBottomRowPanel.cpp b/src/gui/panels/ValentineBottomRowPanel.cpp index 8d69ee93..eb6a7b2f 100644 --- a/src/gui/panels/ValentineBottomRowPanel.cpp +++ b/src/gui/panels/ValentineBottomRowPanel.cpp @@ -66,7 +66,9 @@ void BottomRowPanel::resized() { auto bounds = getLocalBounds(); + // Adjust this to set button width const auto clipButtonWidth = juce::roundToInt (bounds.getWidth() / 46.0f); + const auto adjustedComponentWidth = bounds.getWidth() - clipButtonWidth; const auto sliderWidth = juce::roundToInt (adjustedComponentWidth / 6.0f); @@ -83,6 +85,7 @@ void BottomRowPanel::resized() .withX (dividerCentreX) .withWidth (dividerThickness); + // Adjust this to set spacing between button and slider const auto buttonNudge = juce::roundToInt (sliderWidth / 15.0f); const auto clipButtonInitialX = bounds.getX();