Adjust button placement

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;

src/gui/panels/ValentineBottomRowPanel.cpp

@@ -66,7 +66,9 @@ void BottomRowPanel::resized()
 {
     auto bounds = getLocalBounds();
 
-    const auto clipButtonWidth = juce::roundToInt (bounds.getWidth() / 60.0f);
+    // 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,18 +85,28 @@ void BottomRowPanel::resized()
                   .withX (dividerCentreX)
                   .withWidth (dividerThickness);
 
-    const auto buttonSpacer =
-        juce::roundToInt ((bounds.getHeight() - clipButtonWidth) * .5f);
-
-    const auto buttonNudge = juce::roundToInt (clipButtonWidth / 8.0f);
+    // Adjust this to set spacing between button and slider
+    const auto buttonNudge = juce::roundToInt (sliderWidth / 15.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));
 }
 

src/gui/panels/ValentineTopRowPanel.cpp

@@ -56,33 +56,43 @@ void TopRowPanel::resized()
     auto bounds = getLocalBounds();
 
     auto sliders = bounds.removeFromLeft (juce::roundToInt (bounds.getWidth() * .65f));
-    const auto buttonWidth = juce::roundToInt (sliders.getWidth() * .033f);
+
+    // Adjust this to set button width
+    const auto buttonWidth = juce::roundToInt (sliders.getWidth() * .035f);
+
     const auto adjustedComponentWidth = sliders.getWidth() - (buttonWidth * 2.0f);
-    const auto sliderWidth = juce::roundToInt (adjustedComponentWidth / 3.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) {
+        const auto initialButtonX = sliders.getX();
+        const auto buttonX = initialButtonX + buttonNudge;
+        const auto buttonY = sliders.getCentreY() - buttonWidth / 2;
+
+        button.setBounds (sliders.removeFromLeft (buttonWidth)
+                              .withX (buttonX)
+                              .withY (buttonY)
+                              .withHeight (buttonWidth));
 
-    const auto buttonSpacer =
-        juce::roundToInt ((sliders.getHeight() - buttonWidth) * .5f);
+        const auto sliderArea = sliders.removeFromLeft (sliderInitialWidth);
 
-    // 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);
+        // 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;
 
-    crushEnableButton.setBounds (crushEnableButtonBounds);
-    crushSlider.setBounds (sliders.removeFromLeft (sliderWidth).reduced (buttonNudge, 0));
-    compressSlider.setBounds (sliders.removeFromLeft (sliderWidth));
+        slider.setBounds (sliderArea.withX (sliderX).withWidth (sliderWidth));
+    };
 
-    const auto initialSaturateButtonX = sliders.getX();
-    const auto saturateEnableButtonBounds =
-        sliders.removeFromLeft (buttonWidth)
-            .reduced (0, buttonSpacer)
-            .withX (initialSaturateButtonX + buttonNudge);
+    setButtonAndSliderBounds (crushEnableButton, crushSlider);
 
-    saturateEnableButton.setBounds (saturateEnableButtonBounds);
-    saturateSlider.setBounds (
-        sliders.removeFromLeft (sliderWidth).reduced (buttonNudge, 0));
+    // 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);
 
     const auto logoHeight = bounds.getHeight() * .25f;
     const auto logoWidth = bounds.getWidth() * .75f;
@@ -93,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;