Skip to content

Commit

Permalink
Merge pull request #1605 from slevenbits/colorwell-styling
Browse files Browse the repository at this point in the history 
`CPColorWell` and `CPColorPanel` updates.
  • Loading branch information
@aljungberg
aljungberg committed Jul 9, 2012
2 parents ad74e93 + 613f61a commit 81f958e
Show file tree
Hide file tree
Showing 24 changed files with 495 additions and 302 deletions.
73 changes: 37 additions & 36 deletions AppKit/CPColorPanel.j
View file
Expand Up @@ -144,7 +144,7 @@ CPColorPickerViewHeight = 370;
- (void)setColor:(CPColor)aColor
{
_color = aColor;
[_previewView setBackgroundColor: _color];
[_previewView setBackgroundColor:_color];

[CPApp sendAction:@selector(changeColor:) to:nil from:self];

Expand Down Expand Up @@ -299,7 +299,7 @@ CPColorPickerViewHeight = 370;
bounds = [contentView bounds];

_toolbar = [[CPView alloc] initWithFrame:CGRectMake(0, 6, CGRectGetWidth(bounds), TOOLBAR_HEIGHT)];
[_toolbar setAutoresizingMask: CPViewWidthSizable];
[_toolbar setAutoresizingMask:CPViewWidthSizable];

var totalToolbarWidth = count * ICON_WIDTH + (count - 1) * ICON_PADDING,
leftOffset = (CGRectGetWidth(bounds) - totalToolbarWidth) / 2.0,
Expand Down Expand Up @@ -339,7 +339,7 @@ CPColorPickerViewHeight = 370;

[previewBox addSubview:_previewView];

var _previewLabel = [[CPTextField alloc] initWithFrame: CPRectMake(10, TOOLBAR_HEIGHT + 10, 60, 15)];
var _previewLabel = [[CPTextField alloc] initWithFrame:CGRectMake(10, TOOLBAR_HEIGHT + 10, 60, 15)];
[_previewLabel setStringValue:"Preview:"];
[_previewLabel setTextColor:[CPColor blackColor]];
[_previewLabel setAlignment:CPRightTextAlignment];
Expand All @@ -357,14 +357,14 @@ CPColorPickerViewHeight = 370;

[swatchBox addSubview:_swatchView];

var _swatchLabel = [[CPTextField alloc] initWithFrame: CPRectMake(10, TOOLBAR_HEIGHT + 8 + PREVIEW_HEIGHT + 6, 60, 15)];
[_swatchLabel setStringValue: "Swatches:"];
var _swatchLabel = [[CPTextField alloc] initWithFrame:CGRectMake(10, TOOLBAR_HEIGHT + 8 + PREVIEW_HEIGHT + 6, 60, 15)];
[_swatchLabel setStringValue:"Swatches:"];
[_swatchLabel setTextColor:[CPColor blackColor]];
[_swatchLabel setAlignment:CPRightTextAlignment];


var opacityLabel = [[CPTextField alloc] initWithFrame: CPRectMake(10, TOOLBAR_HEIGHT + PREVIEW_HEIGHT + 35, 60, 20)];
[opacityLabel setStringValue: "Opacity:"];
var opacityLabel = [[CPTextField alloc] initWithFrame:CGRectMake(10, TOOLBAR_HEIGHT + PREVIEW_HEIGHT + 35, 60, 20)];
[opacityLabel setStringValue:"Opacity:"];
[opacityLabel setTextColor:[CPColor blackColor]];
[opacityLabel setAlignment:CPRightTextAlignment];

Expand All @@ -389,7 +389,7 @@ CPColorPickerViewHeight = 370;
_action = nil;
_activePicker = nil;

[_previewView setBackgroundColor: _color];
[_previewView setBackgroundColor:_color];

if (buttonForLater)
[self _setPicker:buttonForLater];
Expand All @@ -407,12 +407,13 @@ CPColorPickerViewHeight = 370;


CPColorDragType = "CPColorDragType";

var CPColorPanelSwatchesCookie = "CPColorPanelSwatchesCookie";

/* @ignore */
@implementation _CPColorPanelSwatches : CPView
{
CPView[] _swatches;
CPArray _swatches;
CPColor _dragColor;
CPColorPanel _colorPanel;
CPCookie _swatchCookie;
Expand All @@ -422,29 +423,29 @@ var CPColorPanelSwatchesCookie = "CPColorPanelSwatchesCookie";
{
self = [super initWithFrame:aFrame];

[self setBackgroundColor: [CPColor grayColor]];
[self setBackgroundColor:[CPColor grayColor]];

[self registerForDraggedTypes:[CPArray arrayWithObjects:CPColorDragType]];

var whiteColor = [CPColor whiteColor];

_swatchCookie = [[CPCookie alloc] initWithName: CPColorPanelSwatchesCookie];
_swatchCookie = [[CPCookie alloc] initWithName:CPColorPanelSwatchesCookie];
var colorList = [self startingColorList];

_swatches = [];

for (var i = 0; i < 50; i++)
{
// FIXME: http://280north.lighthouseapp.com/projects/13294-cappuccino/tickets/25-implement-cpbox
var view = [[CPView alloc] initWithFrame: CPRectMake(13 * i + 1, 1, 12, 12)],
var view = [[CPView alloc] initWithFrame:CPRectMake(13 * i + 1, 1, 12, 12)],
fillView = [[CPView alloc] initWithFrame:CGRectInset([view bounds], 1.0, 1.0)];

[view setBackgroundColor:whiteColor];
[fillView setBackgroundColor: (i < colorList.length) ? colorList[i] : whiteColor];
[fillView setBackgroundColor:(i < colorList.length) ? colorList[i] : whiteColor];

[view addSubview:fillView];

[self addSubview: view];
[self addSubview:view];

_swatches.push(view);
}
Expand All @@ -461,7 +462,7 @@ var CPColorPanelSwatchesCookie = "CPColorPanelSwatchesCookie";
{
var cookieValue = [_swatchCookie value];

if (cookieValue == "")
if (!cookieValue)
{
return [
[CPColor blackColor],
Expand All @@ -480,7 +481,7 @@ var CPColorPanelSwatchesCookie = "CPColorPanelSwatchesCookie";
result = [];

for (var i = 0; i < cookieValue.length; i++)
result.push([CPColor colorWithHexString: cookieValue[i]]);
result.push([CPColor colorWithHexString:cookieValue[i]]);

return result;
}
Expand All @@ -495,7 +496,7 @@ var CPColorPanelSwatchesCookie = "CPColorPanelSwatchesCookie";
var future = new Date();
future.setYear(2019);

[_swatchCookie setValue: JSON.stringify(result) expires:future domain: nil];
[_swatchCookie setValue:JSON.stringify(result) expires:future domain:nil];
}

- (void)setColorPanel:(CPColorPanel)panel
Expand Down Expand Up @@ -528,7 +529,7 @@ var CPColorPanelSwatchesCookie = "CPColorPanelSwatchesCookie";
if (!CGRectContainsPoint(bounds, point) || point.x > [self bounds].size.width - 1 || point.x < 1)
return NO;

[_colorPanel setColor: [self colorAtIndex:FLOOR(point.x / 13)] updatePicker: YES];
[_colorPanel setColor:[self colorAtIndex:FLOOR(point.x / 13)] updatePicker:YES];
}

- (void)mouseDragged:(CPEvent)anEvent
Expand All @@ -545,24 +546,24 @@ var CPColorPanelSwatchesCookie = "CPColorPanelSwatchesCookie";
// FIXME: http://280north.lighthouseapp.com/projects/13294-cappuccino/tickets/25-implement-cpbox
_dragColor = [[swatch subviews][0] backgroundColor];

var bounds = CPRectCreateCopy([swatch bounds]);
var bounds = CGRectMakeCopy([swatch bounds]);

// FIXME: http://280north.lighthouseapp.com/projects/13294-cappuccino/tickets/25-implement-cpbox
var dragView = [[CPView alloc] initWithFrame: bounds],
var dragView = [[CPView alloc] initWithFrame:bounds],
dragFillView = [[CPView alloc] initWithFrame:CGRectInset(bounds, 1.0, 1.0)];

[dragView setBackgroundColor:[CPColor blackColor]];
[dragFillView setBackgroundColor:_dragColor];

[dragView addSubview:dragFillView];

[self dragView: dragView
at: CPPointMake(point.x - bounds.size.width / 2.0, point.y - bounds.size.height / 2.0)
offset: CPPointMake(0.0, 0.0)
event: anEvent
pasteboard: nil
source: self
slideBack: YES];
[self dragView:dragView
at:CGPointMake(point.x - bounds.size.width / 2.0, point.y - bounds.size.height / 2.0)
offset:CGPointMake(0.0, 0.0)
event:anEvent
pasteboard:nil
source:self
slideBack:YES];
}

- (void)pasteboard:(CPPasteboard)aPasteboard provideDataForType:(CPString)aType
Expand All @@ -580,7 +581,7 @@ var CPColorPanelSwatchesCookie = "CPColorPanelSwatchesCookie";
if (![pasteboard availableTypeFromArray:[CPColorDragType]] || location.x > [self bounds].size.width - 1 || location.x < 1)
return NO;

[self setColor:[CPKeyedUnarchiver unarchiveObjectWithData:[pasteboard dataForType:CPColorDragType]] atIndex: FLOOR(location.x / 13)];
[self setColor:[CPKeyedUnarchiver unarchiveObjectWithData:[pasteboard dataForType:CPColorDragType]] atIndex:FLOOR(location.x / 13)];
}

@end
Expand Down Expand Up @@ -635,21 +636,21 @@ var CPColorPanelSwatchesCookie = "CPColorPanelSwatchesCookie";
var bounds = CPRectMake(0, 0, 15, 15);

// FIXME: http://280north.lighthouseapp.com/projects/13294-cappuccino/tickets/25-implement-cpbox
var dragView = [[CPView alloc] initWithFrame: bounds],
var dragView = [[CPView alloc] initWithFrame:bounds],
dragFillView = [[CPView alloc] initWithFrame:CGRectInset(bounds, 1.0, 1.0)];

[dragView setBackgroundColor:[CPColor blackColor]];
[dragFillView setBackgroundColor:[self backgroundColor]];

[dragView addSubview:dragFillView];

[self dragView: dragView
at: CPPointMake(point.x - bounds.size.width / 2.0, point.y - bounds.size.height / 2.0)
offset: CPPointMake(0.0, 0.0)
event: anEvent
pasteboard: nil
source: self
slideBack: YES];
[self dragView:dragView
at:CPPointMake(point.x - bounds.size.width / 2.0, point.y - bounds.size.height / 2.0)
offset:CPPointMake(0.0, 0.0)
event:anEvent
pasteboard:nil
source:self
slideBack:YES];
}

- (void)pasteboard:(CPPasteboard)aPasteboard provideDataForType:(CPString)aType
Expand Down
70 changes: 37 additions & 33 deletions AppKit/CPColorPicker.j
View file
Expand Up @@ -44,10 +44,11 @@
*/
- (id)initWithPickerMask:(int)aMask colorPanel:(CPColorPanel)aPanel
{
self = [super init];

_panel = aPanel;
_mask = aMask;
if (self = [super init])
{
_panel = aPanel;
_mask = aMask;
}

return self;
}
Expand Down Expand Up @@ -76,7 +77,6 @@
*/
- (void)setMode:(CPColorPanelMode)mode
{
return;
}

/*!
Expand All @@ -85,7 +85,6 @@
*/
- (void)setColor:(CPColor)aColor
{
return;
}

@end
Expand All @@ -110,12 +109,12 @@

- (id)initView
{
aFrame = CPRectMake(0, 0, CPColorPickerViewWidth, CPColorPickerViewHeight);
var aFrame = _CGRectMake(0, 0, CPColorPickerViewWidth, CPColorPickerViewHeight);

_pickerView = [[CPView alloc] initWithFrame:aFrame];
[_pickerView setAutoresizingMask:CPViewWidthSizable | CPViewHeightSizable];

_brightnessSlider = [[CPSlider alloc] initWithFrame:CGRectMake(0, (aFrame.size.height - 34), aFrame.size.width, 15)];
_brightnessSlider = [[CPSlider alloc] initWithFrame:_CGRectMake(0, (aFrame.size.height - 34), aFrame.size.width, 15)];

[_brightnessSlider setValue:15.0 forThemeAttribute:@"track-width"];
[_brightnessSlider setValue:[CPColor colorWithPatternImage:[[CPImage alloc] initWithContentsOfFile:[[CPBundle bundleForClass:[CPColorPicker class]] pathForResource:@"brightness_bar.png"]]] forThemeAttribute:@"track-color"];
Expand All @@ -128,9 +127,9 @@
[_brightnessSlider setAction:@selector(brightnessSliderDidChange:)];
[_brightnessSlider setAutoresizingMask:CPViewWidthSizable | CPViewMinYMargin];

_hueSaturationView = [[__CPColorWheel alloc] initWithFrame: CPRectMake(0, 0, aFrame.size.width, aFrame.size.height - 38)];
[_hueSaturationView setDelegate: self];
[_hueSaturationView setAutoresizingMask: (CPViewWidthSizable | CPViewHeightSizable)];
_hueSaturationView = [[__CPColorWheel alloc] initWithFrame:_CGRectMake(0, 0, aFrame.size.width, aFrame.size.height - 38)];
[_hueSaturationView setDelegate:self];
[_hueSaturationView setAutoresizingMask:(CPViewWidthSizable | CPViewHeightSizable)];

[_pickerView addSubview:_hueSaturationView];
[_pickerView addSubview:_brightnessSlider];
Expand Down Expand Up @@ -225,46 +224,49 @@

- (id)initWithFrame:(CPRect)aFrame
{
self = [super initWithFrame:aFrame];

var path = [[CPBundle bundleForClass:CPColorPicker] pathForResource:@"wheel.png"];
if (self = [super initWithFrame:aFrame])
{
#if PLATFORM(DOM)
var path = [[CPBundle bundleForClass:CPColorPicker] pathForResource:@"wheel.png"];

_wheelImage = new Image();
_wheelImage.src = path;
_wheelImage.style.position = "absolute";
_wheelImage = new Image();
_wheelImage.src = path;
_wheelImage.style.position = "absolute";

path = [[CPBundle bundleForClass:CPColorPicker] pathForResource:@"wheel_black.png"];
path = [[CPBundle bundleForClass:CPColorPicker] pathForResource:@"wheel_black.png"];

_blackWheelImage = new Image();
_blackWheelImage.src = path;
_blackWheelImage.style.opacity = "0";
_blackWheelImage.style.filter = "alpha(opacity=0)"
_blackWheelImage.style.position = "absolute";
_blackWheelImage = new Image();
_blackWheelImage.src = path;
_blackWheelImage.style.opacity = "0";
_blackWheelImage.style.filter = "alpha(opacity=0)"
_blackWheelImage.style.position = "absolute";

#if PLATFORM(DOM)
_DOMElement.appendChild(_wheelImage);
_DOMElement.appendChild(_blackWheelImage);
_DOMElement.appendChild(_wheelImage);
_DOMElement.appendChild(_blackWheelImage);
#endif

[self setWheelSize:aFrame.size];
[self setWheelSize:aFrame.size];

_crosshair = [[CPView alloc] initWithFrame:CPRectMake(_radius - 2, _radius - 2, 4, 4)];
[_crosshair setBackgroundColor:[CPColor blackColor]];
_crosshair = [[CPView alloc] initWithFrame:CGRectMake(_radius - 2, _radius - 2, 4, 4)];
[_crosshair setBackgroundColor:[CPColor blackColor]];

var view = [[CPView alloc] initWithFrame:CGRectInset([_crosshair bounds], 1.0, 1.0)];
[view setBackgroundColor:[CPColor whiteColor]];
var view = [[CPView alloc] initWithFrame:CGRectInset([_crosshair bounds], 1.0, 1.0)];
[view setBackgroundColor:[CPColor whiteColor]];

[_crosshair addSubview:view];
[_crosshair addSubview:view];

[self addSubview:_crosshair];
[self addSubview:_crosshair];
}

return self;
}

- (void)setWheelBrightness:(float)brightness
{
#if PLATFORM(DOM)
_blackWheelImage.style.opacity = 1.0 - brightness;
_blackWheelImage.style.filter = "alpha(opacity=" + (1.0 - brightness) * 100 + ")"
#endif
}

- (void)setFrameSize:(CPSize)aSize
Expand All @@ -277,6 +279,7 @@
{
var min = MIN(aSize.width, aSize.height);

#if PLATFORM(DOM)
_blackWheelImage.style.width = min;
_blackWheelImage.style.height = min;
_blackWheelImage.width = min;
Expand All @@ -290,6 +293,7 @@
_wheelImage.height = min;
_wheelImage.style.top = (aSize.height - min) / 2.0 + "px";
_wheelImage.style.left = (aSize.width - min) / 2.0 + "px";
#endif

_radius = min / 2.0;

Expand Down

0 comments on commit 81f958e

Please sign in to comment.