mirror of
https://github.com/cappuccino/cappuccino.git
synced 2026-09-10 12:47:13 +00:00
- Tweaks to layout
- Fixed sizing of popup list to take intercell spacing into account
This commit is contained in:
+25
-10
@@ -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
@@ -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")
|
||||
|
||||
@@ -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];
|
||||
|
||||
@@ -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]),
|
||||
|
||||
Reference in New Issue
Block a user