- changed default color to bluish
- made track thinner (2px, was 3px)
- made thumb larger (12px, was 11px)
- added thumb outline focus indicator (4px wide)
- slider component height increased from 11px to 20px
- support painting thumb border
- support different colors for thumb background and colored track
This commit is contained in:
Karl Tauber
2020-11-18 11:38:29 +01:00
parent 10b2a94c70
commit 413b60e630
10 changed files with 179 additions and 47 deletions

View File

@@ -21,7 +21,9 @@ import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Rectangle;
import java.awt.Shape;
import java.awt.event.MouseEvent;
import java.awt.geom.Ellipse2D;
import java.awt.geom.Path2D;
import java.awt.geom.RoundRectangle2D;
import javax.swing.JComponent;
@@ -51,13 +53,18 @@ import com.formdev.flatlaf.util.UIScale;
*
* @uiDefault Slider.trackWidth int
* @uiDefault Slider.thumbWidth int
* @uiDefault Slider.focusWidth int
* @uiDefault Slider.trackValueColor Color optional; defaults to Slider.thumbColor
* @uiDefault Slider.trackColor Color
* @uiDefault Slider.thumbColor Color
* @uiDefault Slider.thumbBorderColor Color optional; if null, no border is painted
* @uiDefault Slider.focusedColor Color optional; defaults to Component.focusColor
* @uiDefault Slider.focusedThumbBorderColor Color optional; defaults to Component.focusedBorderColor
* @uiDefault Slider.hoverThumbColor Color optional
* @uiDefault Slider.pressedThumbColor Color optional
* @uiDefault Slider.disabledTrackColor Color
* @uiDefault Slider.disabledThumbColor Color
* @uiDefault Slider.disabledThumbBorderColor Color optional; defaults to Component.disabledBorderColor
*
* @author Karl Tauber
*/
@@ -66,14 +73,19 @@ public class FlatSliderUI
{
protected int trackWidth;
protected int thumbWidth;
protected int focusWidth;
protected Color trackValueColor;
protected Color trackColor;
protected Color thumbColor;
protected Color focusColor;
protected Color thumbBorderColor;
protected Color focusedColor;
protected Color focusedThumbBorderColor;
protected Color hoverThumbColor;
protected Color pressedThumbColor;
protected Color disabledTrackColor;
protected Color disabledThumbColor;
protected Color disabledThumbBorderColor;
protected boolean thumbHover;
protected boolean thumbPressed;
@@ -94,27 +106,36 @@ public class FlatSliderUI
trackWidth = UIManager.getInt( "Slider.trackWidth" );
thumbWidth = UIManager.getInt( "Slider.thumbWidth" );
focusWidth = FlatUIUtils.getUIInt( "Slider.focusWidth", 4 );
trackValueColor = FlatUIUtils.getUIColor( "Slider.trackValueColor", "Slider.thumbColor" );
trackColor = UIManager.getColor( "Slider.trackColor" );
thumbColor = UIManager.getColor( "Slider.thumbColor" );
focusColor = FlatUIUtils.getUIColor( "Slider.focusedColor", "Component.focusColor" );
thumbBorderColor = UIManager.getColor( "Slider.thumbBorderColor" );
focusedColor = FlatUIUtils.getUIColor( "Slider.focusedColor", "Component.focusColor" );
focusedThumbBorderColor = FlatUIUtils.getUIColor( "Slider.focusedThumbBorderColor", "Component.focusedBorderColor" );
hoverThumbColor = UIManager.getColor( "Slider.hoverThumbColor" );
pressedThumbColor = UIManager.getColor( "Slider.pressedThumbColor" );
disabledTrackColor = UIManager.getColor( "Slider.disabledTrackColor" );
disabledThumbColor = UIManager.getColor( "Slider.disabledThumbColor" );
disabledThumbBorderColor = FlatUIUtils.getUIColor( "Slider.disabledThumbBorderColor", "Component.disabledBorderColor" );
}
@Override
protected void uninstallDefaults( JSlider slider ) {
super.uninstallDefaults( slider );
trackValueColor = null;
trackColor = null;
thumbColor = null;
focusColor = null;
thumbBorderColor = null;
focusedColor = null;
focusedThumbBorderColor = null;
hoverThumbColor = null;
pressedThumbColor = null;
disabledTrackColor = null;
disabledThumbColor = null;
disabledThumbBorderColor = null;
}
@Override
@@ -149,13 +170,28 @@ public class FlatSliderUI
@Override
protected Dimension getThumbSize() {
return new Dimension( UIScale.scale( thumbWidth ), UIScale.scale( thumbWidth ) );
int fw = UIScale.scale( focusWidth );
int w = UIScale.scale( thumbWidth ) + fw + fw;
return new Dimension( w, w );
}
@Override
public void paint( Graphics g, JComponent c ) {
FlatUIUtils.setRenderingHints( (Graphics2D) g );
/*debug
g.setColor( Color.gray );
g.drawRect( 0, 0, c.getWidth() - 1, c.getHeight() - 1 );
g.setColor( Color.orange );
g.drawRect( focusRect.x, focusRect.y, focusRect.width - 1, focusRect.height - 1 );
g.setColor( Color.magenta );
g.drawRect( contentRect.x, contentRect.y, contentRect.width - 1, contentRect.height - 1 );
g.setColor( Color.blue );
g.drawRect( trackRect.x, trackRect.y, trackRect.width - 1, trackRect.height - 1 );
g.setColor( Color.red );
g.drawRect( thumbRect.x, thumbRect.y, thumbRect.width - 1, thumbRect.height - 1 );
debug*/
super.paint( g, c );
}
@@ -197,7 +233,7 @@ public class FlatSliderUI
}
if( coloredTrack != null ) {
g.setColor( thumbColor );
g.setColor( trackValueColor );
((Graphics2D)g).fill( coloredTrack );
}
@@ -208,26 +244,49 @@ public class FlatSliderUI
@Override
public void paintThumb( Graphics g ) {
Color color = stateColor( slider, thumbHover, thumbPressed,
thumbColor, disabledThumbColor, focusColor, hoverThumbColor, pressedThumbColor );
thumbColor, disabledThumbColor, null, hoverThumbColor, pressedThumbColor );
color = FlatUIUtils.deriveColor( color, thumbColor );
paintThumb( g, slider, thumbRect, isRoundThumb(), color );
Color borderColor = (thumbBorderColor != null)
? stateColor( slider, false, false, thumbBorderColor, disabledThumbBorderColor, focusedThumbBorderColor, null, null )
: null;
paintThumb( g, slider, thumbRect, isRoundThumb(), color, borderColor, focusedColor, focusWidth );
}
public static void paintThumb( Graphics g, JSlider slider, Rectangle thumbRect, boolean roundThumb,
Color thumbColor )
Color thumbColor, Color thumbBorderColor, Color focusedColor, int focusWidth )
{
g.setColor( thumbColor );
int fw = UIScale.scale( focusWidth );
int x = thumbRect.x + fw;
int y = thumbRect.y + fw;
int width = thumbRect.width - fw - fw;
int height = thumbRect.height - fw - fw;
boolean focused = FlatUIUtils.isPermanentFocusOwner( slider );
if( roundThumb )
g.fillOval( thumbRect.x, thumbRect.y, thumbRect.width, thumbRect.height );
else {
double w = thumbRect.width;
double h = thumbRect.height;
double wh = w / 2;
if( roundThumb ) {
// paint thumb focus border
if( focused ) {
g.setColor( focusedColor );
g.fillOval( thumbRect.x, thumbRect.y, thumbRect.width, thumbRect.height );
}
Path2D thumb = FlatUIUtils.createPath( 0,0, w,0, w,(h - wh), wh,h, 0,(h - wh) );
if( thumbBorderColor != null ) {
// paint thumb border
g.setColor( thumbBorderColor );
g.fillOval( x, y, width, height );
// paint thumb background
float lw = UIScale.scale( 1f );
g.setColor( thumbColor );
((Graphics2D)g).fill( new Ellipse2D.Float( x + lw, y + lw,
width - lw - lw, height - lw - lw ) );
} else {
// paint thumb background
g.setColor( thumbColor );
g.fillOval( x, y, width, height );
}
} else {
Graphics2D g2 = (Graphics2D) g.create();
try {
g2.translate( thumbRect.x, thumbRect.y );
@@ -240,13 +299,51 @@ public class FlatSliderUI
g2.rotate( Math.toRadians( 90 ) );
}
}
g2.fill( thumb );
// paint thumb focus border
if( focused ) {
g2.setColor( focusedColor );
g2.fill( createDirectionalThumbShape( 0, 0,
thumbRect.width, thumbRect.height + (fw * 0.4142f), fw ) );
}
if( thumbBorderColor != null ) {
// paint thumb border
g2.setColor( thumbBorderColor );
g2.fill( createDirectionalThumbShape( fw, fw, width, height, 0 ) );
// paint thumb background
float lw = UIScale.scale( 1f );
g2.setColor( thumbColor );
g2.fill( createDirectionalThumbShape( fw + lw, fw + lw,
width - lw - lw, height - lw - lw - (lw * 0.4142f), 0 ) );
} else {
// paint thumb background
g2.setColor( thumbColor );
g2.fill( createDirectionalThumbShape( fw, fw, width, height, 0 ) );
}
} finally {
g2.dispose();
}
}
}
public static Shape createDirectionalThumbShape( double x, double y, double w, double h, double arc ) {
double wh = w / 2;
Path2D path = new Path2D.Float();
path.moveTo( x + wh, y + h );
path.lineTo( x, y + (h - wh) );
path.lineTo( x, y + arc );
path.quadTo( x, y, x + arc, y );
path.lineTo( x + (w - arc), y );
path.quadTo( x + w, y, x + w, y + arc );
path.lineTo( x + w, y + (h - wh) );
path.closePath();
return path;
}
public static Color stateColor( JSlider slider, boolean hover, boolean pressed,
Color enabledColor, Color disabledColor, Color focusedColor, Color hoverColor, Color pressedColor )
{

View File

@@ -237,9 +237,11 @@ Separator.foreground=#515151
#---- Slider ----
Slider.trackValueColor=#4A88C7
Slider.trackColor=#646464
Slider.thumbColor=#A6A6A6
Slider.thumbColor=$Slider.trackValueColor
Slider.tickColor=#888
Slider.focusedColor=rgba($Component.focusColor,80%)
Slider.hoverThumbColor=darken($Slider.thumbColor,10%,derived)
Slider.pressedThumbColor=darken($Slider.thumbColor,15%,derived)
Slider.disabledTrackColor=#4c5052

View File

@@ -506,8 +506,9 @@ Separator.stripeIndent=1
#---- Slider ----
Slider.focusInsets=0,0,0,0
Slider.trackWidth=3
Slider.thumbWidth=11
Slider.trackWidth=2
Slider.thumbWidth=12
Slider.focusWidth=4
#---- Spinner ----

View File

@@ -249,9 +249,11 @@ Separator.foreground=#d1d1d1
#---- Slider ----
Slider.trackValueColor=#1E82E6
Slider.trackColor=#c4c4c4
Slider.thumbColor=#6e6e6e
Slider.thumbColor=$Slider.trackValueColor
Slider.tickColor=#888
Slider.focusedColor=rgba($Component.focusColor,50%)
Slider.hoverThumbColor=lighten($Slider.thumbColor,10%,derived)
Slider.pressedThumbColor=lighten($Slider.thumbColor,15%,derived)
Slider.disabledTrackColor=#c0c0c0

View File

@@ -43,18 +43,21 @@ public class FlatRangeSliderUI
{
protected int trackWidth;
protected int thumbWidth;
protected int focusWidth;
protected Color trackValueColor;
protected Color trackColor;
protected Color thumbColor;
protected Color focusColor;
protected Color thumbBorderColor;
protected Color focusedColor;
protected Color focusedThumbBorderColor;
protected Color hoverTrackColor;
protected Color hoverThumbColor;
protected Color pressedTrackColor;
protected Color pressedThumbColor;
protected Color disabledTrackColor;
protected Color disabledThumbColor;
private Rectangle firstThumbRect;
protected Color disabledThumbBorderColor;
public static ComponentUI createUI( JComponent c ) {
return new FlatRangeSliderUI();
@@ -102,31 +105,40 @@ public class FlatRangeSliderUI
trackWidth = UIManager.getInt( "Slider.trackWidth" );
thumbWidth = UIManager.getInt( "Slider.thumbWidth" );
focusWidth = FlatUIUtils.getUIInt( "Slider.focusWidth", 4 );
trackValueColor = FlatUIUtils.getUIColor( "Slider.trackValueColor", "Slider.thumbColor" );
trackColor = UIManager.getColor( "Slider.trackColor" );
thumbColor = UIManager.getColor( "Slider.thumbColor" );
focusColor = FlatUIUtils.getUIColor( "Slider.focusedColor", "Component.focusColor" );
thumbBorderColor = UIManager.getColor( "Slider.thumbBorderColor" );
focusedColor = FlatUIUtils.getUIColor( "Slider.focusedColor", "Component.focusColor" );
focusedThumbBorderColor = FlatUIUtils.getUIColor( "Slider.focusedThumbBorderColor", "Component.focusedBorderColor" );
hoverTrackColor = FlatUIUtils.getUIColor( "Slider.hoverTrackColor", "Slider.hoverThumbColor" );
hoverThumbColor = UIManager.getColor( "Slider.hoverThumbColor" );
pressedTrackColor = FlatUIUtils.getUIColor( "Slider.pressedTrackColor", "Slider.pressedThumbColor" );
pressedThumbColor = UIManager.getColor( "Slider.pressedThumbColor" );
disabledTrackColor = UIManager.getColor( "Slider.disabledTrackColor" );
disabledThumbColor = UIManager.getColor( "Slider.disabledThumbColor" );
disabledThumbBorderColor = FlatUIUtils.getUIColor( "Slider.disabledThumbBorderColor", "Component.disabledBorderColor" );
}
@Override
protected void uninstallDefaults( JSlider slider ) {
super.uninstallDefaults( slider );
trackValueColor = null;
trackColor = null;
thumbColor = null;
focusColor = null;
thumbBorderColor = null;
focusedColor = null;
focusedThumbBorderColor = null;
hoverTrackColor = null;
hoverThumbColor = null;
pressedTrackColor = null;
pressedThumbColor = null;
disabledTrackColor = null;
disabledThumbColor = null;
disabledThumbBorderColor = null;
}
@Override
@@ -156,7 +168,9 @@ public class FlatRangeSliderUI
@Override
protected Dimension getThumbSize() {
return new Dimension( UIScale.scale( thumbWidth ), UIScale.scale( thumbWidth ) );
int fw = UIScale.scale( focusWidth );
int w = UIScale.scale( thumbWidth ) + fw + fw;
return new Dimension( w, w );
}
@Override
@@ -233,9 +247,9 @@ debug*/
boolean trackPressed = pressed1 && pressed2;
Color color = FlatSliderUI.stateColor( slider, trackHover, trackPressed,
thumbColor, null, null, hoverTrackColor, pressedTrackColor );
trackValueColor, null, null, hoverTrackColor, pressedTrackColor );
g.setColor( FlatUIUtils.deriveColor( color, thumbColor ) );
g.setColor( FlatUIUtils.deriveColor( color, trackValueColor ) );
((Graphics2D)g).fill( coloredTrack );
}
}
@@ -246,10 +260,14 @@ debug*/
boolean thumbPressed = (!second && pressed1) || (second && pressed2);
Color color = FlatSliderUI.stateColor( slider, thumbHover, thumbPressed,
thumbColor, disabledThumbColor, focusColor, hoverThumbColor, pressedThumbColor );
thumbColor, disabledThumbColor, null, hoverThumbColor, pressedThumbColor );
color = FlatUIUtils.deriveColor( color, thumbColor );
FlatSliderUI.paintThumb( g, slider, thumbRect, isRoundThumb(), color );
Color borderColor = (thumbBorderColor != null)
? FlatSliderUI.stateColor( slider, false, false, thumbBorderColor, disabledThumbBorderColor, focusedThumbBorderColor, null, null )
: null;
FlatSliderUI.paintThumb( g, slider, thumbRect, isRoundThumb(), color, borderColor, focusedColor, focusWidth );
}
protected boolean isRoundThumb() {

View File

@@ -845,21 +845,24 @@ Slider.disabledThumbColor #4c5052 javax.swing.plaf.ColorUIResource [UI]
Slider.disabledTrackColor #4c5052 javax.swing.plaf.ColorUIResource [UI]
Slider.focus #7e7e7e javax.swing.plaf.ColorUIResource [UI]
Slider.focusInsets 0,0,0,0 javax.swing.plaf.InsetsUIResource [UI]
Slider.focusWidth 4
Slider.focusedColor #cc3d6185 javax.swing.plaf.ColorUIResource [UI]
Slider.font [active] $defaultFont [UI]
Slider.foreground #bbbbbb javax.swing.plaf.ColorUIResource [UI]
Slider.highlight #242424 javax.swing.plaf.ColorUIResource [UI]
Slider.horizontalSize 200,21 java.awt.Dimension
Slider.hoverThumbColor #8d8d8d com.formdev.flatlaf.util.DerivedColor [UI] darken(10% autoInverse)
Slider.hoverThumbColor #346faa com.formdev.flatlaf.util.DerivedColor [UI] darken(10% autoInverse)
Slider.minimumHorizontalSize 36,21 java.awt.Dimension
Slider.minimumVerticalSize 21,36 java.awt.Dimension
Slider.onlyLeftMouseButtonDrag true
Slider.pressedThumbColor #808080 com.formdev.flatlaf.util.DerivedColor [UI] darken(15% autoInverse)
Slider.pressedThumbColor #2e6296 com.formdev.flatlaf.util.DerivedColor [UI] darken(15% autoInverse)
Slider.shadow #646464 javax.swing.plaf.ColorUIResource [UI]
Slider.thumbColor #a6a6a6 javax.swing.plaf.ColorUIResource [UI]
Slider.thumbWidth 11
Slider.thumbColor #4a88c7 javax.swing.plaf.ColorUIResource [UI]
Slider.thumbWidth 12
Slider.tickColor #888888 javax.swing.plaf.ColorUIResource [UI]
Slider.trackColor #646464 javax.swing.plaf.ColorUIResource [UI]
Slider.trackWidth 3
Slider.trackValueColor #4a88c7 javax.swing.plaf.ColorUIResource [UI]
Slider.trackWidth 2
Slider.verticalSize 21,200 java.awt.Dimension
SliderUI com.formdev.flatlaf.ui.FlatSliderUI

View File

@@ -850,21 +850,24 @@ Slider.disabledThumbColor #c0c0c0 javax.swing.plaf.ColorUIResource [UI]
Slider.disabledTrackColor #c0c0c0 javax.swing.plaf.ColorUIResource [UI]
Slider.focus #9e9e9e javax.swing.plaf.ColorUIResource [UI]
Slider.focusInsets 0,0,0,0 javax.swing.plaf.InsetsUIResource [UI]
Slider.focusWidth 4
Slider.focusedColor #7f97c3f3 javax.swing.plaf.ColorUIResource [UI]
Slider.font [active] $defaultFont [UI]
Slider.foreground #000000 javax.swing.plaf.ColorUIResource [UI]
Slider.highlight #ffffff javax.swing.plaf.ColorUIResource [UI]
Slider.horizontalSize 200,21 java.awt.Dimension
Slider.hoverThumbColor #888888 com.formdev.flatlaf.util.DerivedColor [UI] lighten(10% autoInverse)
Slider.hoverThumbColor #1569bc com.formdev.flatlaf.util.DerivedColor [UI] lighten(10% autoInverse)
Slider.minimumHorizontalSize 36,21 java.awt.Dimension
Slider.minimumVerticalSize 21,36 java.awt.Dimension
Slider.onlyLeftMouseButtonDrag true
Slider.pressedThumbColor #949494 com.formdev.flatlaf.util.DerivedColor [UI] lighten(15% autoInverse)
Slider.pressedThumbColor #125ca5 com.formdev.flatlaf.util.DerivedColor [UI] lighten(15% autoInverse)
Slider.shadow #c4c4c4 javax.swing.plaf.ColorUIResource [UI]
Slider.thumbColor #6e6e6e javax.swing.plaf.ColorUIResource [UI]
Slider.thumbWidth 11
Slider.thumbColor #1e82e6 javax.swing.plaf.ColorUIResource [UI]
Slider.thumbWidth 12
Slider.tickColor #888888 javax.swing.plaf.ColorUIResource [UI]
Slider.trackColor #c4c4c4 javax.swing.plaf.ColorUIResource [UI]
Slider.trackWidth 3
Slider.trackValueColor #1e82e6 javax.swing.plaf.ColorUIResource [UI]
Slider.trackWidth 2
Slider.verticalSize 21,200 java.awt.Dimension
SliderUI com.formdev.flatlaf.ui.FlatSliderUI

View File

@@ -837,6 +837,7 @@ Slider.disabledThumbColor #888800 javax.swing.plaf.ColorUIResource [UI]
Slider.disabledTrackColor #ffff88 javax.swing.plaf.ColorUIResource [UI]
Slider.focus #696969 javax.swing.plaf.ColorUIResource [UI]
Slider.focusInsets 0,0,0,0 javax.swing.plaf.InsetsUIResource [UI]
Slider.focusWidth 4
Slider.focusedColor #97c3f3 javax.swing.plaf.ColorUIResource [UI]
Slider.font [active] $defaultFont [UI]
Slider.foreground #ff0000 javax.swing.plaf.ColorUIResource [UI]
@@ -850,11 +851,12 @@ Slider.onlyLeftMouseButtonDrag true
Slider.pressedThumbColor #00ff00 javax.swing.plaf.ColorUIResource [UI]
Slider.pressedTrackColor #88ff88 javax.swing.plaf.ColorUIResource [UI]
Slider.shadow #a0a0a0 javax.swing.plaf.ColorUIResource [UI]
Slider.thumbColor #880000 javax.swing.plaf.ColorUIResource [UI]
Slider.thumbWidth 11
Slider.thumbBorderColor #ff0000 javax.swing.plaf.ColorUIResource [UI]
Slider.thumbColor #ffaaaa javax.swing.plaf.ColorUIResource [UI]
Slider.thumbWidth 12
Slider.tickColor #ff0000 javax.swing.plaf.ColorUIResource [UI]
Slider.trackColor #00bb00 javax.swing.plaf.ColorUIResource [UI]
Slider.trackWidth 3
Slider.trackColor #88ff88 javax.swing.plaf.ColorUIResource [UI]
Slider.trackWidth 2
Slider.verticalSize 21,200 java.awt.Dimension
SliderUI com.formdev.flatlaf.ui.FlatSliderUI

View File

@@ -257,8 +257,9 @@ Separator.stripeIndent=5
#---- Slider ----
Slider.trackColor=#0b0
Slider.thumbColor=#800
Slider.trackColor=#8f8
Slider.thumbColor=#faa
Slider.thumbBorderColor=#f00
Slider.tickColor=#f00
Slider.focusedColor=$Component.focusColor
Slider.hoverThumbColor=#00f

View File

@@ -587,6 +587,8 @@ Slider.focus
Slider.focusInputMap
Slider.focusInputMap.RightToLeft
Slider.focusInsets
Slider.focusWidth
Slider.focusedColor
Slider.font
Slider.foreground
Slider.highlight
@@ -601,6 +603,7 @@ Slider.thumbColor
Slider.thumbWidth
Slider.tickColor
Slider.trackColor
Slider.trackValueColor
Slider.trackWidth
Slider.verticalSize
SliderUI