Add an opacity slider to the color panel

280north · Apr 17, 2009 · 6d8d4b5 · 6d8d4b5
1 parent f4e329f
commit 6d8d4b5
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 35 deletions.
diff --git a/AppKit/CPColor.j b/AppKit/CPColor.j
@@ -148,9 +148,14 @@ var cachedBlackColor,
     @return the initialized color
 */
 + (CPColor)colorWithHue:(float)hue saturation:(float)saturation brightness:(float)brightness
+{
+    return [self colorWithHue:hue saturation:saturation brightness:brightness alpha:1.0];
+}
+
++ (CPColor)colorWithHue:(float)hue saturation:(float)saturation brightness:(float)brightness alpha:(float)alpha
 {
     if(saturation === 0.0)
-        return [CPColor colorWithCalibratedWhite:brightness / 100.0 alpha:1.0];
+        return [CPColor colorWithCalibratedWhite:brightness / 100.0 alpha:alpha];
 
     var f = hue % 60,
         p = (brightness * (100 - saturation)) / 10000,
@@ -160,12 +165,12 @@ var cachedBlackColor,
 
     switch(FLOOR(hue / 60))
     {
-        case 0: return [CPColor colorWithCalibratedRed: b green: t blue: p alpha: 1.0];
-        case 1: return [CPColor colorWithCalibratedRed: q green: b blue: p alpha: 1.0];
-        case 2: return [CPColor colorWithCalibratedRed: p green: b blue: t alpha: 1.0];
-        case 3: return [CPColor colorWithCalibratedRed: p green: q blue: b alpha: 1.0];
-        case 4: return [CPColor colorWithCalibratedRed: t green: p blue: b alpha: 1.0];
-        case 5: return [CPColor colorWithCalibratedRed: b green: p blue: q alpha: 1.0];            
+        case 0: return [CPColor colorWithCalibratedRed: b green: t blue: p alpha: alpha];
+        case 1: return [CPColor colorWithCalibratedRed: q green: b blue: p alpha: alpha];
+        case 2: return [CPColor colorWithCalibratedRed: p green: b blue: t alpha: alpha];
+        case 3: return [CPColor colorWithCalibratedRed: p green: q blue: b alpha: alpha];
+        case 4: return [CPColor colorWithCalibratedRed: t green: p blue: b alpha: alpha];
+        case 5: return [CPColor colorWithCalibratedRed: b green: p blue: q alpha: alpha];
     }
 }
 

diff --git a/AppKit/CPColorPanel.j b/AppKit/CPColorPanel.j
@@ -63,20 +63,19 @@ CPColorPickerViewHeight = 370;
     _CPColorPanelToolbar    _toolbar;
     _CPColorPanelSwatches   _swatchView;
     _CPColorPanelPreview    _previewView;
-
-    CPTextField     _previewLabel;
-    CPTextField     _swatchLabel;
-
+
+    CPSlider        _opacitySlider;
+
     CPArray         _colorPickers;
-    CPView          _currentView; 
-    id              _activePicker;   
-    
+    CPView          _currentView;
+    id              _activePicker;
+
     CPColor         _color;
-    
+
     id              _target;
-    SEL             _action;       
-    
-    int             _mode;             
+    SEL             _action;
+
+    int             _mode;
 }
 
 /*! 
@@ -115,7 +114,7 @@ CPColorPickerViewHeight = 370;
 */
 - (id)init
 {
-    self = [super initWithContentRect:CGRectMake(500.0, 50.0, 219.0, 322.0) 
+    self = [super initWithContentRect:CGRectMake(500.0, 50.0, 219.0, 370.0) 
                             styleMask:(CPTitledWindowMask | CPClosableWindowMask | CPResizableWindowMask)];
 
     if (self)
@@ -153,6 +152,7 @@ CPColorPickerViewHeight = 370;
                       object:self];
 
     [_activePicker setColor:_color];
+    [_opacitySlider setFloatValue:[_color alphaComponent]];
 }
 
 /*!
@@ -176,6 +176,11 @@ CPColorPickerViewHeight = 370;
     return _color;
 }
 
+- (float)opacity
+{
+    return [_opacitySlider floatValue];
+}
+
 /*!
     Sets the target for the color panel. Messages are sent
     to the target when colors are selected in the panel.
@@ -236,7 +241,7 @@ CPColorPickerViewHeight = 370;
         [view setFrame:[_currentView frame]];
     else
     {
-        var height = (TOOLBAR_HEIGHT+10+PREVIEW_HEIGHT+5+SWATCH_HEIGHT+10),
+        var height = (TOOLBAR_HEIGHT+10+PREVIEW_HEIGHT+5+SWATCH_HEIGHT+32),
             bounds = [[self contentView] bounds];
 
         [view setFrameSize: CPSizeMake(bounds.size.width - 10, bounds.size.height - height)];
@@ -330,7 +335,7 @@ CPColorPickerViewHeight = 370;
 
     [previewBox addSubview:_previewView];
 
-    _previewLabel = [[CPTextField alloc] initWithFrame: CPRectMake(10, TOOLBAR_HEIGHT + 13, 60, 15)];
+    var _previewLabel = [[CPTextField alloc] initWithFrame: CPRectMake(10, TOOLBAR_HEIGHT + 10, 60, 15)];
     [_previewLabel setStringValue: "Preview:"];
     [_previewLabel setTextColor:[CPColor blackColor]];
     [_previewLabel setAlignment:CPRightTextAlignment];
@@ -348,17 +353,32 @@ CPColorPickerViewHeight = 370;
 
     [swatchBox addSubview:_swatchView];
 
-    _swatchLabel = [[CPTextField alloc] initWithFrame: CPRectMake(10, TOOLBAR_HEIGHT + 8 + PREVIEW_HEIGHT + 7, 60, 15)];
+    var _swatchLabel = [[CPTextField alloc] initWithFrame: CPRectMake(10, TOOLBAR_HEIGHT + 8 + PREVIEW_HEIGHT + 6, 60, 15)];
     [_swatchLabel setStringValue: "Swatches:"];
     [_swatchLabel setTextColor:[CPColor blackColor]];
     [_swatchLabel setAlignment:CPRightTextAlignment];
 
 
-    [contentView addSubview: _toolbar];
-    [contentView addSubview: previewBox];
-    [contentView addSubview: _previewLabel];
-    [contentView addSubview: swatchBox];
-    [contentView addSubview: _swatchLabel];
+    var opacityLabel = [[CPTextField alloc] initWithFrame: CPRectMake(10, TOOLBAR_HEIGHT + PREVIEW_HEIGHT + 35, 60, 20)];
+    [opacityLabel setStringValue: "Opacity:"];
+    [opacityLabel setTextColor:[CPColor blackColor]];
+    [opacityLabel setAlignment:CPRightTextAlignment];
+
+    _opacitySlider = [[CPSlider alloc] initWithFrame:CGRectMake(76, TOOLBAR_HEIGHT + PREVIEW_HEIGHT + 34, CGRectGetWidth(bounds) - 86, 20.0)];
+
+    [_opacitySlider setMinValue:0.0];
+    [_opacitySlider setMaxValue:1.0];
+
+    [_opacitySlider setTarget:self];
+    [_opacitySlider setAction:@selector(setOpacity:)];
+
+    [contentView addSubview:_toolbar];
+    [contentView addSubview:previewBox];
+    [contentView addSubview:_previewLabel];
+    [contentView addSubview:swatchBox];
+    [contentView addSubview:_swatchLabel];
+    [contentView addSubview:opacityLabel];
+    [contentView addSubview:_opacitySlider];
 
     _target = nil;
     _action = nil;
@@ -370,6 +390,14 @@ CPColorPickerViewHeight = 370;
         [self _setPicker:buttonForLater];
 }
 
+- (void)setOpacity:(id)sender
+{
+    var components = [[self color] components],
+        alpha = [sender floatValue];
+
+    [self setColor:[_color colorWithAlphaComponent:alpha] updatePicker:YES];
+}
+
 @end
 
 

diff --git a/AppKit/CPColorPicker.j b/AppKit/CPColorPicker.j
@@ -151,7 +151,10 @@
     [_hueSaturationView setWheelBrightness:brightness / 100.0];
     [_brightnessSlider setBackgroundColor:[CPColor colorWithHue:hue saturation:saturation brightness:100]];
 
-    _cachedColor = [CPColor colorWithHue:hue saturation:saturation brightness:brightness];
+    var colorPanel = [self colorPanel],
+        opacity = [colorPanel opacity];
+
+    _cachedColor = [CPColor colorWithHue:hue saturation:saturation brightness:brightness alpha:opacity];
 
     [[self colorPanel] setColor:_cachedColor];
 }

diff --git a/AppKit/CPSliderColorPicker.j b/AppKit/CPSliderColorPicker.j
@@ -257,15 +257,15 @@
     brightnessValue._DOMElement.appendChild(_brightnessValue);
     [_contentView addSubview: brightnessValue];
 
-    _hexLabel = [[CPTextField alloc] initWithFrame: CPRectMake(0, 230, 100, 20)];
+    _hexLabel = [[CPTextField alloc] initWithFrame: CPRectMake(0, 230, 30, 20)];
     [_hexLabel setStringValue: "Hex"];
     [_hexLabel setTextColor:[CPColor blackColor]];
 
     //hex input box
     _hexValue = _redValue.cloneNode(false);
-    _hexValue.style.top = "255px";
+    _hexValue.style.top = "228px";
     _hexValue.style.width = "80px";
-    _hexValue.style.left = "0px";
+    _hexValue.style.left = "35px";
     _hexValue.onkeypress = function(aDOMEvent) 
     { 
         aDOMEvent = aDOMEvent || window.event;
@@ -329,15 +329,18 @@
 
 -(void)sliderChanged:(id)sender
 {
-    var newColor;
+    var newColor,
+        colorPanel = [self colorPanel],
+        alpha = [colorPanel opacity];
 
     switch(sender)
     {
         case    _hueSlider:
         case    _saturationSlider:
         case    _brightnessSlider:      newColor = [CPColor colorWithHue: [_hueSlider floatValue]
                                                               saturation: [_saturationSlider floatValue]
-                                                              brightness: [_brightnessSlider floatValue]];
+                                                              brightness: [_brightnessSlider floatValue]
+                                                                   alpha: alpha];
 
                                         [self updateRGBSliders: newColor];
                                         break;
@@ -347,15 +350,15 @@
         case    _blueSlider:            newColor = [CPColor colorWithCalibratedRed: [_redSlider floatValue]
                                                                              green: [_greenSlider floatValue]
                                                                               blue: [_blueSlider floatValue]
-                                                                             alpha: 1.0];
+                                                                             alpha: alpha];
 
                                         [self updateHSBSliders: newColor];
                                         break;
     }
 
     [self updateLabels];
     [self updateHex: newColor];
-    [[self colorPanel] setColor: newColor];
+    [colorPanel setColor: newColor];
 }
 
 -(void)setColor:(CPColor)aColor