- Tweaks to layout

- Fixed sizing of popup list to take intercell spacing into account
This commit is contained in:
Aparajita Fishman
2011-08-23 17:17:01 -04:00
parent c12305f40a
commit bde2f20fa3
4 changed files with 68 additions and 38 deletions
+25 -10
View File
@@ -34,7 +34,7 @@ CPComboBoxStateButtonBordered = CPThemeState("button-bordered");
var CPComboBoxTextSubview = @"text",
CPComboBoxButtonSubview = @"button",
CPComboBoxDefaultNumberOfVisibleItems = 5,
CPComboBoxFocusWidth = 2;
CPComboBoxFocusRingWidth = -1;
@implementation CPComboBox : CPTextField
@@ -60,7 +60,7 @@ var CPComboBoxTextSubview = @"text",
+ (id)themeAttributes
{
return [CPDictionary dictionaryWithObjects:[CGSizeMake(21.0, 23.0)] forKeys:[@"popup-button-size"]];
return [CPDictionary dictionaryWithObjectsAndKeys:_CGSizeMake(21.0, 29.0), @"popup-button-size"];
}
+ (Class)_binderClassForBinding:(CPString)theBinding
@@ -413,7 +413,17 @@ var CPComboBoxTextSubview = @"text",
[self makeList];
[self selectMatchingItem];
[_list popUpRelativeToRect:[self borderFrame] view:self offset:CPComboBoxFocusWidth];
// Note the offset here is 1 less than the focus ring width because the outer edge
// of the focus ring is very transparent and it looks better if the list is closer.
if (CPComboBoxFocusRingWidth < 0)
{
var inset = [self borderInset];
CPComboBoxFocusRingWidth = inset.top;
}
[_list popUpRelativeToRect:[self borderFrame] view:self offset:CPComboBoxFocusRingWidth - 1];
}
/*! @ignore */
@@ -855,11 +865,15 @@ var CPComboBoxTextSubview = @"text",
- (CGRect)popupButtonRectForBounds:(CGRect)bounds
{
var inset = [self currentValueForThemeAttribute:@"border-inset"],
var inset = [self borderInset],
buttonSize = [self currentValueForThemeAttribute:@"popup-button-size"];
bounds.origin.x += _CGRectGetMaxX(bounds) - inset.right - buttonSize.width;
// The left edge of the button is the right edge of the content border rect
bounds.origin.x = CGRectGetMaxX(bounds) - inset.right;
// The top edge of the button is the top edge of the content border rect
bounds.origin.y += inset.top;
bounds.size.width = buttonSize.width;
bounds.size.height = buttonSize.height;
@@ -956,13 +970,14 @@ var CPComboBoxTextSubview = @"text",
*/
- (CGRect)borderFrame
{
var borderInset = [self valueForThemeAttribute:@"border-inset"],
var inset = [self borderInset],
buttonSize = [self currentValueForThemeAttribute:@"popup-button-size"],
frame = [self bounds];
frame.origin.x += borderInset.left;
frame.origin.y += borderInset.top;
frame.size.width -= borderInset.left + borderInset.right;
frame.size.height -= borderInset.top + borderInset.bottom;
frame.origin.x += inset.left;
frame.origin.y += inset.top;
frame.size.width -= inset.left + inset.right - buttonSize.width;
frame.size.height -= inset.top + inset.bottom;
return frame;
}
+11 -3
View File
@@ -1297,9 +1297,9 @@ CPTextFieldStatePlaceholder = CPThemeState("placeholder");
- (CGRect)contentRectForBounds:(CGRect)bounds
{
var contentInset = [self currentValueForThemeAttribute:@"content-inset"] || CGInsetMakeZero(),
borderInset = [self currentValueForThemeAttribute:@"border-inset"] || CGInsetMakeZero(),
textInset = CGInsetUnion(contentInset, borderInset);
var borderInset = [self borderInset],
contentInset = [self currentValueForThemeAttribute:@"content-inset"],
textInset = CGInsetUnion(borderInset, contentInset);
bounds.origin.x += textInset.left;
bounds.origin.y += textInset.top;
@@ -1324,6 +1324,14 @@ CPTextFieldStatePlaceholder = CPThemeState("placeholder");
return bounds;
}
- (CGInset)borderInset
{
var bezelInset = [self currentValueForThemeAttribute:@"bezel-inset"],
borderInset = [self currentValueForThemeAttribute:@"border-inset"];
return CGInsetUnion(bezelInset, borderInset);
}
- (CGRect)rectForEphemeralSubviewNamed:(CPString)aName
{
if (aName === "bezel-view")
+28 -22
View File
@@ -811,26 +811,31 @@ var themedButtonValues = nil,
[@"bezel-color", bezelDisabledColor, CPThemeStateBezeled | CPThemeStateDisabled],
[@"font", [CPFont systemFontOfSize:12.0], CPThemeStateBezeled],
[@"content-inset", CGInsetMake(5.0, 5.0, 4.0, 5.0), CPThemeStateBezeled],
[@"content-inset", CGInsetMake(5.0, 5.0, 4.0, 5.0), CPThemeStateBezeled | CPThemeStateEditing],
// no border
[@"bezel-inset", CGInsetMake(0.0, 0.0, 0.0, 0.0)],
[@"border-inset", CGInsetMake(0.0, 0.0, 0.0, 0.0)],
[@"content-inset", CGInsetMake(0.0, 0.0, 0.0, 0.0)],
// with border
[@"bezel-inset", CGInsetMake(0.0, 0.0, 0.0, 0.0), CPThemeStateBezeled],
[@"bezel-inset", CGInsetMake(0.0, 0.0, 0.0, 0.0), CPThemeStateBezeled | CPThemeStateEditing],
// Because the bezel artwork does not use insets, provide an inset to the border
[@"border-inset", CGInsetMake(3.0, 3.0, 3.0, 3.0), CPThemeStateBezeled],
[@"content-inset", CGInsetMake(5.0, 5.0, 4.0, 5.0), CPThemeStateBezeled],
[@"content-inset", CGInsetMake(5.0, 5.0, 4.0, 5.0), CPThemeStateBezeled | CPThemeStateEditing],
[@"text-color", textDisabledColor, CPThemeStateBezeled | CPThemeStateDisabled],
[@"text-color", placeholderColor, CPTextFieldStatePlaceholder],
[@"line-break-mode", CPLineBreakByTruncatingTail, CPThemeStateTableDataView],
[@"vertical-alignment", CPCenterVerticalTextAlignment, CPThemeStateTableDataView],
[@"content-inset", CGInsetMake(0.0, 0.0, 0.0, 2.0), CPThemeStateTableDataView],
[@"border-inset", CGInsetMake(3.0, 3.0, 3.0, 3.0), CPThemeStateTableDataView],
[@"content-inset", CGInsetMake(0.0, 0.0, 0.0, 3.0), CPThemeStateTableDataView],
[@"text-color", [CPColor colorWithCalibratedWhite:51.0 / 255.0 alpha:1.0], CPThemeStateTableDataView],
[@"text-color", [CPColor whiteColor], CPThemeStateTableDataView | CPThemeStateSelectedTableDataView],
[@"font", [CPFont boldSystemFontOfSize:12.0], CPThemeStateTableDataView | CPThemeStateSelectedTableDataView],
[@"text-color", [CPColor blackColor], CPThemeStateTableDataView | CPThemeStateEditing],
[@"content-inset", CGInsetMake(5.0, 5.0, 4.0, 2.0), CPThemeStateTableDataView | CPThemeStateEditing],
[@"content-inset", CGInsetMake(5.0, 5.0, 4.0, 4.0), CPThemeStateTableDataView | CPThemeStateEditing],
[@"font", [CPFont systemFontOfSize:12.0], CPThemeStateTableDataView | CPThemeStateEditing],
[@"bezel-inset", CGInsetMake(-1.0, -1.0, -1.0, -1.0), CPThemeStateTableDataView | CPThemeStateEditing],
@@ -838,7 +843,7 @@ var themedButtonValues = nil,
[@"text-color", [CPColor colorWithCalibratedWhite:1.0 alpha:1.0], CPThemeStateTableDataView | CPThemeStateGroupRow | CPThemeStateSelectedTableDataView],
[@"text-shadow-color", [CPColor whiteColor], CPThemeStateTableDataView | CPThemeStateGroupRow],
[@"text-shadow-offset", CGSizeMake(0,1), CPThemeStateTableDataView | CPThemeStateGroupRow],
[@"text-shadow-color", [CPColor colorWithCalibratedWhite:0.0 alpha:0.6], CPThemeStateTableDataView | CPThemeStateGroupRow | CPThemeStateSelectedTableDataView],
[@"text-shadow-color", [CPColor colorWithCalibratedWhite:0.0 alpha:0.6], CPThemeStateTableDataView | CPThemeStateGroupRow | CPThemeStateSelectedTableDataView],
[@"font", [CPFont boldSystemFontOfSize:12.0], CPThemeStateTableDataView | CPThemeStateGroupRow]
];
@@ -890,15 +895,15 @@ var themedButtonValues = nil,
[@"bezel-color", bezelDisabledColor, CPTextFieldStateRounded | CPThemeStateBezeled | CPThemeStateDisabled],
[@"font", [CPFont systemFontOfSize:12.0]],
[@"content-inset", CGInsetMake(5.0, 12.0, 4.0, 12.0), CPTextFieldStateRounded | CPThemeStateBezeled],
[@"content-inset", CGInsetMake(5.0, 12.0, 4.0, 12.0), CPTextFieldStateRounded | CPThemeStateBezeled | CPThemeStateEditing],
[@"bezel-inset", CGInsetMake(0.0, 0.0, 0.0, 0.0), CPTextFieldStateRounded | CPThemeStateBezeled],
[@"bezel-inset", CGInsetMake(0.0, 0.0, 0.0, 0.0), CPTextFieldStateRounded | CPThemeStateBezeled | CPThemeStateEditing],
// Because the bezel artwork does not use insets, provide an inset to the border.
// There is one extra empty pixel at the bottom for size compatibility with an earlier version.
[@"border-inset", CGInsetMake(3.0, 3.0, 4.0, 3.0), CPThemeStateBezeled],
[@"border-inset", CGInsetMake(3.0, 10.0, 4.0, 10.0), CPTextFieldStateRounded | CPThemeStateBezeled],
[@"border-inset", CGInsetMake(3.0, 10.0, 4.0, 10.0), CPTextFieldStateRounded | CPThemeStateBezeled | CPThemeStateEditing],
[@"content-inset", CGInsetMake(4.0, 5.0, 3.0, 5.0), CPTextFieldStateRounded | CPThemeStateBezeled],
[@"content-inset", CGInsetMake(4.0, 5.0, 3.0, 5.0), CPTextFieldStateRounded | CPThemeStateBezeled | CPThemeStateEditing],
[@"text-color", placeholderColor, CPTextFieldStateRounded | CPTextFieldStatePlaceholder],
@@ -936,13 +941,13 @@ var themedButtonValues = nil,
[@"content-inset", CGInsetMake(2.0, 5.0, 1.0, 5.0)],
// Non-bezeled token field with no tokens
[@"content-inset", CGInsetMake(5.0, 5.0, 4.0, 5.0), CPTextFieldStatePlaceholder],
[@"content-inset", CGInsetMake(4.0, 5.0, 3.0, 5.0), CPTextFieldStatePlaceholder],
// Bezeled token field with tokens
[@"content-inset", CGInsetMake(3.0, 5.0, 2.0, 5.0), CPThemeStateBezeled],
// Bezeled token field with no tokens
[@"content-inset", CGInsetMake(5.0, 5.0, 4.0, 5.0), CPThemeStateBezeled | CPTextFieldStatePlaceholder],
[@"content-inset", CGInsetMake(4.0, 5.0, 3.0, 5.0), CPThemeStateBezeled | CPTextFieldStatePlaceholder],
];
[self registerThemeValues:overrides forView:tokenfield inherit:themedTextFieldValues];
@@ -982,8 +987,8 @@ var themedButtonValues = nil,
[@"text-color", textHighlightedColor, CPThemeStateHighlighted],
[@"bezel-inset", CGInsetMake(0.0, 0.0, 0.0, 0.0), CPThemeStateBezeled],
[@"border-inset", CGInsetMakeZero(), CPThemeStateBezeled],
[@"content-inset", CGInsetMake(0.0, 26.0, 0.0, 15.0), CPThemeStateBezeled],
[@"border-inset", CGInsetMake(1.0, 23.0, 3.0, 15.0), CPThemeStateBezeled],
[@"content-inset", CGInsetMake(0.0, 0.0, 0.0, 0.0), CPThemeStateBezeled],
// Minimum height == maximum height since tokens are fixed height.
[@"min-size", CGSizeMake(0.0, 19.0)],
@@ -1085,15 +1090,16 @@ var themedButtonValues = nil,
[@"bezel-color", bezelNoBorderFocusedColor, CPThemeStateBezeled | CPThemeStateEditing],
[@"bezel-color", bezelNoBorderDisabledColor, CPThemeStateBezeled | CPThemeStateDisabled],
// The right border inset has to make room for the popup button
[@"border-inset", CGInsetMake(3.0, 21.0, 3.0, 3.0), CPThemeStateBezeled | CPComboBoxStateButtonBordered],
[@"border-inset", CGInsetMake(3.0, 17.0, 3.0, 3.0), CPThemeStateBezeled],
// The right border inset has to make room for the focus ring and popup button
[@"border-inset", CGInsetMake(3.0, 24.0, 3.0, 3.0), CPThemeStateBezeled | CPComboBoxStateButtonBordered],
[@"border-inset", CGInsetMake(3.0, 21.0, 3.0, 3.0), CPThemeStateBezeled],
[@"popup-button-size", CGSizeMake(21.0, 23.0), CPThemeStateBezeled | CPComboBoxStateButtonBordered],
[@"popup-button-size", CGSizeMake(17.0, 23.0), CPThemeStateBezeled],
// Because combo box uses a three-part bezel, the height is fixed
[@"min-size", CGSizeMake(0, 29.0)],
[@"max-size", CGSizeMake(-1, 29.0)],
[@"popup-button-size", CGSizeMake(21.0, 23.0)]
[@"max-size", CGSizeMake(-1, 29.0)]
];
[self registerThemeValues:overrides forView:combo inherit:themedTextFieldValues];
+4 -3
View File
@@ -178,7 +178,7 @@ var ListColumnIdentifier = @"1";
[table setColumnAutoresizingStyle:CPTableViewLastColumnOnlyAutoresizingStyle];
[table setUsesAlternatingRowBackgroundColors:NO];
[table setAllowsMultipleSelection:NO];
[table setIntercellSpacing:CGSizeMake(0, 0)];
[table setIntercellSpacing:CGSizeMake(3, 2)];
[table setTarget:self];
[table setDoubleAction:@selector(tableViewClickAction:)];
[table setAction:@selector(tableViewClickAction:)];
@@ -284,7 +284,8 @@ var ListColumnIdentifier = @"1";
if ([_panel isVisible])
return;
var frame = CGRectMake(0, 0, MAX(_listWidth, CGRectGetWidth(aRect)), [self rowHeightForTableView:_tableView] * [self numberOfRowsInTableView:_tableView]);
var rowRect = [_tableView rectOfRow:[self numberOfRowsInTableView:_tableView] - 1],
frame = CGRectMake(0, 0, MAX(_listWidth, CGRectGetWidth(aRect)), CGRectGetMaxY(rowRect));
// Place the frame relative to aRect and constrain it to the screen bounds
frame = [self constrain:frame relativeToRect:aRect view:aView offset:offset];
@@ -310,7 +311,7 @@ var ListColumnIdentifier = @"1";
// Convert from the view's coordinate system to the coordinate system of the primary platform window
var baseOrigin = [aView convertPointToBase:aRect.origin],
windowOrigin = [[aView window] convertBaseToPlatformWindow:baseOrigin],
rowHeight = [self rowHeightForTableView:_tableView],
rowHeight = [self rowHeightForTableView:_tableView] + [_tableView intercellSpacing].height,
// Be sure to clip the number of displayed rows to what the field wants
numberOfRows = MIN([self numberOfRowsInTableView:_tableView], [_delegate numberOfVisibleItems]),