mirror of
https://github.com/cappuccino/cappuccino.git
synced 2026-11-03 21:58:59 +00:00
Add an opacity slider to the color panel
This commit is contained in:
1 parent
f4e329f5de
commit
6d8d4b59cc
4 files changed
+74
-35
No files matched your search
+12
-7
@@ -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];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+48
-20
@@ -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
|
||||
|
||||
|
||||
|
||||
@@ -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];
|
||||
}
|
||||
|
||||
@@ -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,7 +329,9 @@
|
||||
|
||||
-(void)sliderChanged:(id)sender
|
||||
{
|
||||
var newColor;
|
||||
var newColor,
|
||||
colorPanel = [self colorPanel],
|
||||
alpha = [colorPanel opacity];
|
||||
|
||||
switch(sender)
|
||||
{
|
||||
@@ -337,7 +339,8 @@
|
||||
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,7 +350,7 @@
|
||||
case _blueSlider: newColor = [CPColor colorWithCalibratedRed: [_redSlider floatValue]
|
||||
green: [_greenSlider floatValue]
|
||||
blue: [_blueSlider floatValue]
|
||||
alpha: 1.0];
|
||||
alpha: alpha];
|
||||
|
||||
[self updateHSBSliders: newColor];
|
||||
break;
|
||||
@@ -355,7 +358,7 @@
|
||||
|
||||
[self updateLabels];
|
||||
[self updateHex: newColor];
|
||||
[[self colorPanel] setColor: newColor];
|
||||
[colorPanel setColor: newColor];
|
||||
}
|
||||
|
||||
-(void)setColor:(CPColor)aColor
|
||||
|
||||
Reference in new issue
Block a user