diff --git a/AppKit/Themes/Aristo/ThemeDescriptors.j b/AppKit/Themes/Aristo/ThemeDescriptors.j index 98b7af5ad..388d59ff5 100755 --- a/AppKit/Themes/Aristo/ThemeDescriptors.j +++ b/AppKit/Themes/Aristo/ThemeDescriptors.j @@ -12,54 +12,54 @@ /* HOW TO ADD OR MODIFY THEMED ELEMENTS - + This file serves both as a means of defining default theme values and of defining an interface for the automatically generated theme showcase, so you have to keep both in mind. - + Let's say you define a new view class and you want to theme it. Here's how to do it with minimum work. - + 1. Define +themeAttributes in your class if you define custom attributes. - + 2. If you want a custom name to appear in the theme showcase, define +themeClass and return a string with the name all in lowercase and words separated by dashes. If you don't provide +themeClass, Cappuccino will separate the themed class name into words at each uppercased letter followed by lowercase letters. - + 3. Use the following template for defining your themed view (using a calendar view as an example). Note that we make a separate method for creating and configuring the view. This is to more clearly separate the two functions of ThemeDescriptors.j (defining themes and defining the showcase interface), and also to allow us to easily reuse the creation/configuration code if we make a HUD version of our themed view. - + // Create a private variable to hold the theme values, we can share this with the HUD theme var themedCalendarViewValues = nil; - + + (CPCalendarView)makeCalendarView { - // Define the size of the sample that will appear in the theme showcase. + // Define the size of the sample that will appear in the theme showcase. // The maximum width/height is around 180 pixels. - + var calendar = [[CPCalendarView alloc] initWithFrame:CGRectMake(0.0, 0.0, 150.0, 100.0)]; - + // Do any other initialization of the calendar you want to do here. In this case // we want the calendar to show our birthdate instead of the current date. [calendar setDate:new Date(1961, 2, 30)]; - + return calendar; } - + + (CPCalendarView)themedCalendarView { var calendar = [self makeCalendarView], - + // Now define some pattern colors. We want to define the bezel for the calendar // using a nine part image, which consists of nine slices in the order top/left, // top, top/right, left, center, right, bottom/left, bottom, bottom/right. // We can do this declaritively using the PatternColor function, which takes an array // of slice declarations, with each declaration being an array of [filename, width, height]. - + bezelColor = PatternColor( [ [@"calendar-bezel-0.png", 10.0, 10.0], @@ -72,9 +72,9 @@ [@"calendar-bezel-7.png", 1.0, 10.0], [@"calendar-bezel-8.png", 10.0, 10.0] ]), - + // Define an alternate bezel for when the calendar is disabled. - + disabledBezelColor = PatternColor( [ [@"calendar-disabled-bezel-0.png", 10.0, 10.0], @@ -87,40 +87,40 @@ [@"calendar-disabled-bezel-7.png", 1.0, 10.0], [@"calendar-disabled-bezel-8.png", 10.0, 10.0] ]), - + // We would like the font to be dark blue and lighter blue when disabled - + textColor = [CPColor colorWithHexString:@"001B48"], disabledTextColor = [textColor colorWithAlphaComponent:0.6]; - + // Now we will define our theme values. These are done declaratively in an array, // where each element is an array of 2 or 3 values: attribute name, value, and optional state. - + themedCalendarViewValues = [ [@"bezel-color", bezelColor], [@"bezel-color", disabledBezelColor, CPThemeStateDisabled], - + [@"text-color", textColor], [@"text-color", disabledTextColor, CPThemeStateDisabled], - + // We will also define a minimum size [@"min-size", CGSizeMake(100.0, 100.0)] ]; - + // Now we just register our values - + [self registerThemeValues:themedCalendarViewValues forView:calendar]; } - + That's all there is to it. Note that PatternColor can also be used to create a simple patterned color: - + color = PatternColor(filename, width, height); - + It can also be used to create a three part image by specifying three images slices with [filename, width, height] and an orientation: - + trackColor = PatternColor( [ ["horizontal-track-left.png", 4.0, 5.0], @@ -128,7 +128,7 @@ ["horizontal-track-right.png", 4.0, 5.0] ], PatternIsHorizontal); - + trackColor = PatternColor( [ ["vertical-track-top.png", 5.0, 6.0], @@ -137,44 +137,44 @@ ], PatternIsVertical); - + SUBTHEMES - + If you want to create a theme that inherits from another theme, for example the way the Aristo-HUD theme inherits from Aristo, you can do this easily by following these steps: - + 1. Your subtheme should be named "-", where is the name of the theme from which you are inheriting, and is the subtheme identifier. For example, "Aristo-HUD" inherits from "Aristo". - + 2. Decide which elements in the subtheme will be changed and which will be inherited. For example, in a HUD theme you may want to use a dark or black background and white text. - + 3. If your subtheme will replace pattern colors in the inherited theme, use the same filename as in the inherited theme and put the pattern images in a subdirectory of the inherited directory. The subdirectory's name should be the same as the subtheme identifier. For example, Aristo-HUD's pattern images are in a "HUD" subdirectory of the "Aristo" directory. - + 4. In the subtheme class (such as AristoHUDThemeDescriptor), add a method with this template: - + + (CPCalendarView)themedCalendarView { var calendar = [AristoThemeDescriptor makeCalendarView], subthemeValues = nil; // This may change according to your needs, see below - + [self registerThemeValues:subthemeValues forView:calendar inherit:themedCalendarViewValues]; - + return calendar; } - + NOTE: If you pass nil or an empty array for the subthemeValues, ALL pattern images will be automatically inherited and MUST be present in the subtheme directory. - + Depending on your subtheme, you will change subthemeValues to indicate which values you wish to override or remove from the inherited theme. - + For example, let's say in your subtheme you want to use white text instead of dark blue, and slightly gray text when it is disabled. In addition, you decide not to inherit the disabled bezel color pattern. Here is how your updated theme method would look: @@ -182,10 +182,10 @@ + (CPCalendarView)themedCalendarView { var calendar = [AristoThemeDescriptor makeCalendarView], - + textColor = [CPColor whiteColor], disabledTextColor = [textColor colorWithAlphaComponent:0.6], - subthemeValues = + subthemeValues = [ [@"bezel-color", nil, CPThemeStateDisabled], [@"text-color", textColor], @@ -196,15 +196,15 @@ return calendar; } - + If your subtheme consistently applies the same overrides to all themed views, you may want to create a separate method that supplies those overrides. For example, Aristo-HUD uses the following method: - + + (CPArray)defaultThemeOverridesAddedTo:(CPArray)themeValues - + For the example we used above, we could define such a method as follows: - + + (CPArray)defaultThemeOverridesAddedTo:(CPArray)themeValues { var textColor = [CPColor whiteColor], @@ -220,23 +220,23 @@ return overrides; } - + Note that the values in the themeValues parameter override the defaults provided by the method. - + Our themed view method becomes: + (CPCalendarView)themedCalendarView { var calendar = [AristoThemeDescriptor makeCalendarView]; - [self registerThemeValues:[self defaultThemeOverridesAddedTo:nil] - forView:calendar + [self registerThemeValues:[self defaultThemeOverridesAddedTo:nil] + forView:calendar inherit:themedCalendarViewValues]; return calendar; } - + As a last example, let's assume another type of themed view in your subtheme wants to add some new theme values to the default overrides. The theme method might look like this: @@ -250,32 +250,32 @@ ["calendar-header-right.png", 5.0, 23.0] ], PatternIsHorizontal), - subthemeValues = + subthemeValues = [ [@"background-color", headerColor] ]; - [self registerThemeValues:[self defaultThemeOverridesAddedTo:subthemeValues] - forView:calendar + [self registerThemeValues:[self defaultThemeOverridesAddedTo:subthemeValues] + forView:calendar inherit:themedCalendarHeaderViewValues];; return calendar; } - + ADDING ARISTO-HUD CONTROLS - + If you want to add a new themed control to Aristo-HUD, you should use the +defaultThemeOverridesAddedTo: method to ensure visual consistency with the rest of Aristo-HUD. The overrides returned by this method do the following: - + - Sets the "text-color" attribute to white in the normal state and [CPColor colorWithCalibratedWhite:1.0 alpha:0.6] in the disabled state. - + - Set "text-shadow-color" to black. - + - Sets "text-shadow-offset" to (-1.0, -1.0). - + These are the standards used by Aristo-HUD. If you want to override these defaults, simply add those overrides to the values you pass to +defaultThemeOverridesAddedTo:. */ @@ -339,7 +339,7 @@ var themedButtonValues = nil; ["default-button-bezel-disabled-right.png", 4.0, 24.0] ], PatternIsHorizontal), - + disabledBezelColor = PatternColor( [ ["button-bezel-disabled-left.png", 4.0, 24.0], @@ -347,11 +347,11 @@ var themedButtonValues = nil; ["button-bezel-disabled-right.png", 4.0, 24.0] ], PatternIsHorizontal), - + defaultTextColor = [CPColor colorWithCalibratedRed:13.0/255.0 green:51.0/255.0 blue:70.0/255.0 alpha:1.0], defaultDisabledTextColor = [CPColor colorWithCalibratedRed:13.0/255.0 green:51.0/255.0 blue:70.0/255.0 alpha:0.6]; - - themedButtonValues = + + themedButtonValues = [ [@"font", [CPFont boldSystemFontOfSize:12.0], CPThemeStateBordered], [@"text-color", [CPColor colorWithCalibratedWhite:79.0 / 255.0 alpha:1.0]], @@ -360,25 +360,25 @@ var themedButtonValues = nil; [@"text-shadow-offset", CGSizeMake(0.0, 1.0), CPThemeStateBordered], [@"line-break-mode", CPLineBreakByTruncatingTail], [@"content-inset", CGInsetMake(0.0, 5.0, 0.0, 5.0), CPThemeStateBordered], - + [@"bezel-color", bezelColor, CPThemeStateBordered], [@"bezel-color", highlightedBezelColor, CPThemeStateBordered | CPThemeStateHighlighted], - + [@"text-color", [CPColor colorWithCalibratedWhite:0.6 alpha:1.0], CPThemeStateDisabled], [@"bezel-color", disabledBezelColor, CPThemeStateBordered | CPThemeStateDisabled], [@"bezel-color", defaultDisabledBezelColor, CPThemeStateBordered | CPThemeStateDefault | CPThemeStateDisabled], - + [@"text-color", defaultTextColor, CPThemeStateDefault], [@"text-color", defaultDisabledTextColor, CPThemeStateDefault | CPThemeStateDisabled], [@"bezel-color", defaultBezelColor, CPThemeStateBordered | CPThemeStateDefault], [@"bezel-color", defaultHighlightedBezelColor, CPThemeStateBordered | CPThemeStateHighlighted | CPThemeStateDefault], - + [@"min-size", CGSizeMake(0.0, 24.0)], [@"max-size", CGSizeMake(-1.0, 24.0)] ]; - + [self registerThemeValues:themedButtonValues forView:button]; - + return button; } @@ -419,12 +419,12 @@ var themedButtonValues = nil; ["popup-bezel-disabled-right.png", 27.0, 24.0] ], PatternIsHorizontal), - - themeValues = + + themeValues = [ [@"bezel-color", color, CPThemeStateBordered], [@"bezel-color", disabledColor, CPThemeStateBordered | CPThemeStateDisabled], - + [@"content-inset", CGInsetMake(0, 27.0 + 5.0, 0, 5.0), CPThemeStateBordered], [@"font", [CPFont boldSystemFontOfSize:12.0]], [@"text-color", [CPColor colorWithCalibratedWhite:79.0 / 255.0 alpha:1.0]], @@ -432,16 +432,16 @@ var themedButtonValues = nil; [@"text-color", [CPColor colorWithCalibratedWhite:0.6 alpha:1.0], CPThemeStateBordered | CPThemeStateDisabled], [@"text-shadow-color", [CPColor colorWithCalibratedWhite:240.0 / 255.0 alpha:0.6], CPThemeStateBordered | CPThemeStateDisabled], - + [@"min-size", CGSizeMake(32.0, 24.0)], [@"max-size", CGSizeMake(-1.0, 24.0)] ]; - + [self registerThemeValues:themeValues forView:button]; - + [button setTitle:@"Pop Up"]; [button addItemWithTitle:@"item"]; - + return button; } @@ -463,12 +463,12 @@ var themedButtonValues = nil; ["popup-bezel-disabled-right-pullsdown.png", 27.0, 24.0] ], PatternIsHorizontal), - - themeValues = + + themeValues = [ [@"bezel-color", color, CPPopUpButtonStatePullsDown | CPThemeStateBordered], [@"bezel-color", disabledColor, CPPopUpButtonStatePullsDown | CPThemeStateBordered | CPThemeStateDisabled], - + [@"content-inset", CGInsetMake(0, 27.0 + 5.0, 0, 5.0), CPThemeStateBordered], [@"font", [CPFont boldSystemFontOfSize:12.0]], [@"text-color", [CPColor colorWithCalibratedWhite:79.0 / 255.0 alpha:1.0]], @@ -476,13 +476,13 @@ var themedButtonValues = nil; [@"text-color", [CPColor colorWithCalibratedWhite:0.6 alpha:1.0], CPThemeStateBordered | CPThemeStateDisabled], [@"text-shadow-color", [CPColor colorWithCalibratedWhite:240.0 / 255.0 alpha:0.6], CPThemeStateBordered | CPThemeStateDisabled], - + [@"min-size", CGSizeMake(32.0, 24.0)], [@"max-size", CGSizeMake(-1.0, 24.0)] ]; [self registerThemeValues:themeValues forView:button]; - + [button setTitle:@"Pull Down"]; [button addItemWithTitle:@"item"]; @@ -494,10 +494,10 @@ var themedVerticalScrollerValues = nil; + (CPScroller)makeVerticalScroller { var scroller = [[CPScroller alloc] initWithFrame:CGRectMake(0.0, 0.0, 15.0, 170.0)]; - + [scroller setFloatValue:0.1]; [scroller setKnobProportion:0.5]; - + return scroller; } @@ -506,15 +506,15 @@ var themedVerticalScrollerValues = nil; var scroller = [self makeVerticalScroller], trackColor = PatternColor("scroller-vertical-track.png", 15.0, 1.0), disabledTrackColor = PatternColor("scroller-vertical-track-disabled.png", 15.0, 1.0), - + upArrowColor = PatternColor("scroller-up-arrow.png", 15.0, 24.0), highlightedUpArrowColor = PatternColor("scroller-up-arrow-highlighted.png", 15.0, 24.0), disabledUpArrowColor = PatternColor("scroller-up-arrow-disabled.png", 15.0, 24.0), - + downArrowColor = PatternColor("scroller-down-arrow.png", 15.0, 24.0), highlightedDownArrowColor = PatternColor("scroller-down-arrow-highlighted.png", 15.0, 24.0), disabledDownArrowColor = PatternColor("scroller-down-arrow-disabled.png", 15.0, 24.0), - + knobColor = PatternColor( [ ["scroller-vertical-knob-top.png", 15.0, 10.0], @@ -522,7 +522,7 @@ var themedVerticalScrollerValues = nil; ["scroller-vertical-knob-bottom.png", 15.0, 10.0] ], PatternIsVertical), - + disabledKnobColor = PatternColor( [ ["scroller-vertical-knob-disabled-top.png", 15.0, 10.0], @@ -530,32 +530,32 @@ var themedVerticalScrollerValues = nil; ["scroller-vertical-knob-disabled-bottom.png", 15.0, 10.0] ], PatternIsVertical); - + themedVerticalScrollerValues = [ [@"minimum-knob-length", 21.0, CPThemeStateVertical], [@"knob-inset", CGInsetMake(0.0, 0.0, 0.0, 0.0), CPThemeStateVertical], [@"track-inset", CGInsetMake(-10.0, 0.0, -10.0, 0.0), CPThemeStateVertical], - + [@"knob-color", knobColor, CPThemeStateVertical], [@"knob-color", disabledKnobColor, CPThemeStateVertical | CPThemeStateDisabled], - + [@"knob-slot-color", trackColor, CPThemeStateVertical], [@"knob-slot-color", disabledTrackColor, CPThemeStateVertical | CPThemeStateDisabled], - + [@"decrement-line-size", CGSizeMake(15.0, 24.0), CPThemeStateVertical], [@"decrement-line-color", upArrowColor, CPThemeStateVertical], [@"decrement-line-color", highlightedUpArrowColor, CPThemeStateVertical | CPThemeStateHighlighted], [@"decrement-line-color", disabledUpArrowColor, CPThemeStateVertical | CPThemeStateDisabled], - + [@"increment-line-size", CGSizeMake(15.0, 24.0), CPThemeStateVertical], [@"increment-line-color", downArrowColor, CPThemeStateVertical], [@"increment-line-color", highlightedDownArrowColor, CPThemeStateVertical | CPThemeStateHighlighted], [@"increment-line-color", disabledDownArrowColor, CPThemeStateVertical | CPThemeStateDisabled] ]; - + [self registerThemeValues:themedVerticalScrollerValues forView:scroller]; - + return scroller; } @@ -564,10 +564,10 @@ var themedHorizontalScrollerValues = nil; + (CPScroller)makeHorizontalScroller { var scroller = [[CPScroller alloc] initWithFrame:CGRectMake(0.0, 0.0, 170.0, 15.0)]; - + [scroller setFloatValue:0.1]; [scroller setKnobProportion:0.5]; - + return scroller; } @@ -576,15 +576,15 @@ var themedHorizontalScrollerValues = nil; var scroller = [self makeHorizontalScroller], trackColor = PatternColor("scroller-horizontal-track.png", 1.0, 15.0), disabledTrackColor = PatternColor("scroller-horizontal-track-disabled.png", 1.0, 15.0), - + leftArrowColor = PatternColor("scroller-left-arrow.png", 24.0, 15.0), highlightedLeftArrowColor = PatternColor("scroller-left-arrow-highlighted.png", 24.0, 15.0), disabledLeftArrowColor = PatternColor("scroller-left-arrow-disabled.png", 24.0, 15.0), - + rightArrowColor = PatternColor("scroller-right-arrow.png", 24.0, 15.0), highlightedRightArrowColor = PatternColor("scroller-right-arrow-highlighted.png", 24.0, 15.0), disabledRightArrowColor = PatternColor("scroller-right-arrow-disabled.png", 24.0, 15.0), - + knobColor = PatternColor( [ ["scroller-horizontal-knob-left.png", 10.0, 15.0], @@ -592,7 +592,7 @@ var themedHorizontalScrollerValues = nil; ["scroller-horizontal-knob-right.png", 10.0, 15.0] ], PatternIsHorizontal), - + disabledKnobColor = PatternColor( [ ["scroller-horizontal-knob-disabled-left.png", 10.0, 15.0], @@ -600,24 +600,24 @@ var themedHorizontalScrollerValues = nil; ["scroller-horizontal-knob-disabled-right.png", 10.0, 15.0] ], PatternIsHorizontal); - - themedHorizontalScrollerValues = + + themedHorizontalScrollerValues = [ [@"minimum-knob-length", 21.0], [@"knob-inset", CGInsetMake(0.0, 0.0, 0.0, 0.0)], [@"track-inset", CGInsetMake(0.0, -10.0, 0.0, -11.0)], - + [@"knob-color", knobColor], [@"knob-color", disabledKnobColor, CPThemeStateDisabled], - + [@"knob-slot-color", trackColor], [@"knob-slot-color", disabledTrackColor, CPThemeStateDisabled], - + [@"decrement-line-size", CGSizeMake(24.0, 15.0)], [@"decrement-line-color", leftArrowColor], [@"decrement-line-color", highlightedLeftArrowColor, CPThemeStateHighlighted], [@"decrement-line-color", disabledLeftArrowColor, CPThemeStateDisabled], - + [@"increment-line-size", CGSizeMake(24.0, 15.0)], [@"increment-line-color", rightArrowColor], [@"increment-line-color", highlightedRightArrowColor, CPThemeStateHighlighted], @@ -625,14 +625,14 @@ var themedHorizontalScrollerValues = nil; ]; [self registerThemeValues:themedHorizontalScrollerValues forView:scroller]; - + return scroller; } + (CPTextField)themedStandardTextField { var textfield = [[CPTextField alloc] initWithFrame:CGRectMake(0.0, 0.0, 60.0, 29.0)], - + bezelColor = PatternColor( [ ["textfield-bezel-square-0.png", 2.0, 3.0], @@ -658,21 +658,21 @@ var themedHorizontalScrollerValues = nil; ["textfield-bezel-square-focused-7.png", 1.0, 5.0], ["textfield-bezel-square-focused-8.png", 6.0, 5.0] ]), - + placeholderColor = [CPColor colorWithCalibratedRed:189.0 / 255.0 green:199.0 / 255.0 blue:211.0 / 255.0 alpha:1.0], - + themeValues = [ [@"bezel-color", bezelColor, CPThemeStateBezeled], [@"bezel-color", bezelFocusedColor, CPThemeStateBezeled | CPThemeStateEditing], [@"font", [CPFont systemFontOfSize:12.0], CPThemeStateBezeled], - + [@"content-inset", CGInsetMake(9.0, 7.0, 5.0, 8.0), CPThemeStateBezeled], [@"bezel-inset", CGInsetMake(4.0, 4.0, 3.0, 4.0), CPThemeStateBezeled], [@"bezel-inset", CGInsetMake(0.0, 0.0, 0.0, 0.0), CPThemeStateBezeled | CPThemeStateEditing], - + [@"text-color", placeholderColor, CPTextFieldStatePlaceholder], - + [@"line-break-mode", CPLineBreakByTruncatingTail, CPThemeStateTableDataView], [@"vertical-alignment", CPCenterVerticalTextAlignment, CPThemeStateTableDataView], [@"content-inset", CGInsetMake(0.0, 0.0, 0.0, 5.0), CPThemeStateTableDataView], @@ -683,18 +683,18 @@ var themedHorizontalScrollerValues = nil; ]; [self registerThemeValues:themeValues forView:textfield]; - + [textfield setBezeled:YES]; [textfield setPlaceholderString:"placeholder"]; [textfield setStringValue:""]; [textfield setEditable:YES]; - + return textfield; } + (CPTextField)themedRoundedTextField -{ +{ var textfield = [[CPTextField alloc] initWithFrame:CGRectMake(0.0, 0.0, 60.0, 30.0)], bezelColor = PatternColor( [ @@ -711,7 +711,7 @@ var themedHorizontalScrollerValues = nil; ["textfield-bezel-rounded-focused-right.png", 17.0, 30.0] ], PatternIsHorizontal), - + placeholderColor = [CPColor colorWithCalibratedRed:189.0 / 255.0 green:199.0 / 255.0 blue:211.0 / 255.0 alpha:1.0], themeValues = @@ -725,13 +725,13 @@ var themedHorizontalScrollerValues = nil; [@"bezel-inset", CGInsetMake(0.0, 0.0, 0.0, 0.0), CPTextFieldStateRounded | CPThemeStateBezeled | CPThemeStateEditing], [@"text-color", placeholderColor, CPTextFieldStateRounded | CPTextFieldStatePlaceholder], - + [@"min-size", CGSizeMake(0.0, 30.0), CPTextFieldStateRounded | CPThemeStateBezeled], [@"max-size", CGSizeMake(-1.0, 30.0), CPTextFieldStateRounded | CPThemeStateBezeled] ]; [self registerThemeValues:themeValues forView:textfield]; - + [textfield setBezeled:YES]; [textfield setBezelStyle:CPTextFieldRoundedBezel]; @@ -751,37 +751,37 @@ var themedHorizontalScrollerValues = nil; ["radio-bezel.png", 17.0, 17.0], nil, nil ], PatternIsHorizontal), - + bezelColorSelected = PatternColor( [ ["radio-bezel-selected.png", 17.0, 17.0], nil, nil ], PatternIsHorizontal), - + bezelColorSelectedHighlighted = PatternColor( [ ["radio-bezel-selected-highlighted.png", 17.0, 17.0], nil, nil ], PatternIsHorizontal), - + bezelColorSelectedDisabled = PatternColor( [ ["radio-bezel-selected-disabled.png", 17.0, 17.0], nil, nil ], PatternIsHorizontal), - + bezelColorDisabled = PatternColor( [ ["radio-bezel-disabled.png", 17.0, 17.0], nil, nil ], PatternIsHorizontal), - + bezelColorHighlighted = PatternColor( [ ["radio-bezel-highlighted.png", 17.0, 17.0], nil, nil ], PatternIsHorizontal), - + themeValues = [ [@"alignment", CPLeftTextAlignment, CPThemeStateBordered], @@ -793,12 +793,12 @@ var themedHorizontalScrollerValues = nil; [@"bezel-color", bezelColorHighlighted, CPThemeStateBordered | CPThemeStateHighlighted], [@"bezel-color", bezelColorDisabled, CPThemeStateBordered | CPThemeStateDisabled], [@"bezel-color", bezelColorSelectedDisabled, CPThemeStateBordered | CPThemeStateSelected | CPThemeStateDisabled], - + [@"text-color", [CPColor colorWithCalibratedWhite:79.0 / 255.0 alpha:1.0], CPThemeStateDisabled], - + [@"min-size", CGSizeMake(0.0, 17.0)] ]; - + [self registerThemeValues:themeValues forView:button]; [button setTitle:@"Hello Friend!"]; @@ -809,43 +809,43 @@ var themedHorizontalScrollerValues = nil; + (CPRadioButton)themedCheckBoxButton { var button = [[CPCheckBox alloc] initWithFrame:CGRectMake(0.0, 0.0, 120.0, 17.0)], - + bezelColor = PatternColor( [ ["check-box-bezel.png", 15.0, 16.0], nil, nil ], PatternIsHorizontal), - + bezelColorSelected = PatternColor( [ ["check-box-bezel-selected.png", 15.0, 16.0], nil, nil ], PatternIsHorizontal), - + bezelColorSelectedHighlighted = PatternColor( [ ["check-box-bezel-selected-highlighted.png", 15.0, 16.0], nil, nil ], PatternIsHorizontal), - + bezelColorSelectedDisabled = PatternColor( [ ["check-box-bezel-selected-disabled.png", 15.0, 16.0], nil, nil ], PatternIsHorizontal), - + bezelColorDisabled = PatternColor( [ ["check-box-bezel-disabled.png", 15.0, 16.0], nil, nil ], PatternIsHorizontal), - + bezelColorHighlighted = PatternColor( [ ["check-box-bezel-highlighted.png", 15.0, 16.0], nil, nil ], PatternIsHorizontal), - + themeValues = [ [@"alignment", CPLeftTextAlignment, CPThemeStateBordered], @@ -857,14 +857,14 @@ var themedHorizontalScrollerValues = nil; [@"bezel-color", bezelColorHighlighted, CPThemeStateBordered | CPThemeStateHighlighted], [@"bezel-color", bezelColorDisabled, CPThemeStateBordered | CPThemeStateDisabled], [@"bezel-color", bezelColorSelectedDisabled, CPThemeStateBordered | CPThemeStateSelected | CPThemeStateDisabled], - + [@"text-color", [CPColor colorWithCalibratedWhite:79.0 / 255.0 alpha:1.0], CPThemeStateDisabled], - + [@"min-size", CGSizeMake(0.0, 17.0)] ]; [self registerThemeValues:themeValues forView:button]; - + [button setTitle:@"Another option"]; return button; @@ -882,20 +882,20 @@ var themedHorizontalScrollerValues = nil; ["check-box-bezel-mixed-highlighted.png", 15.0, 16.0], nil, nil ], PatternIsHorizontal), - + mixedDisabledColor = PatternColor( [ ["check-box-bezel-mixed-disabled.png", 15.0, 16.0], nil, nil ], PatternIsHorizontal), - + mixedColor = PatternColor( [ ["check-box-bezel-mixed.png", 15.0, 16.0], nil, nil ], PatternIsHorizontal), - - themeValues = + + themeValues = [ [@"bezel-color", mixedColor, CPButtonStateMixed | CPThemeStateBordered], [@"bezel-color", mixedSelectedColor, CPButtonStateMixed | CPThemeStateBordered | CPThemeStateSelected], @@ -903,7 +903,7 @@ var themedHorizontalScrollerValues = nil; ]; [self registerThemeValues:themeValues forView:button]; - + return button; } @@ -912,10 +912,10 @@ var themedSegmentedControlValues = nil; + (CPSegmentedControl)makeSegmentedControl { var segmentedControl = [[CPSegmentedControl alloc] initWithFrame:CGRectMake(0.0, 0.0, 0.0, 24.0)]; - + [segmentedControl setTrackingMode:CPSegmentSwitchTrackingSelectAny]; [segmentedControl setSegmentCount:3]; - + [segmentedControl setWidth:40.0 forSegment:0]; [segmentedControl setLabel:@"foo" forSegment:0]; [segmentedControl setTag:1 forSegment:0]; @@ -927,14 +927,14 @@ var themedSegmentedControlValues = nil; [segmentedControl setWidth:35.0 forSegment:2]; [segmentedControl setLabel:@"1" forSegment:2]; [segmentedControl setTag:3 forSegment:2]; - + return segmentedControl; }; + (CPSegmentedControl)themedSegmentedControl { var segmentedControl = [self makeSegmentedControl], - + centerBezelColor = PatternColor("segmented-control-bezel-center.png", 1.0, 24.0), dividerBezelColor = PatternColor("segmented-control-bezel-divider.png", 1.0, 24.0), centerHighlightedBezelColor = PatternColor("segmented-control-bezel-highlighted-center.png", 1.0, 24.0), @@ -957,7 +957,7 @@ var themedSegmentedControlValues = nil; pushedHighlightedCenterBezelColor = PatternColor("segmented-control-bezel-pushed-highlighted-center.png", 1.0, 24.0), pushedHighlightedLeftBezelColor = PatternColor("segmented-control-bezel-pushed-highlighted-left.png", 4.0, 24.0), pushedHighlightedRightBezelColor = PatternColor("segmented-control-bezel-pushed-highlighted-right.png", 4.0, 24.0); - + themedSegmentedControlValues = [ [@"center-segment-bezel-color", centerBezelColor, CPThemeStateNormal], @@ -966,29 +966,29 @@ var themedSegmentedControlValues = nil; [@"center-segment-bezel-color", centerHighlightedBezelColor, CPThemeStateSelected], [@"center-segment-bezel-color", pushedCenterBezelColor, CPThemeStateHighlighted], [@"center-segment-bezel-color", pushedHighlightedCenterBezelColor, CPThemeStateHighlighted | CPThemeStateSelected], - + [@"divider-bezel-color", dividerBezelColor, CPThemeStateNormal], [@"divider-bezel-color", inactiveDividerBezelColor, CPThemeStateDisabled], [@"divider-bezel-color", inactiveHighlightedDividerBezelColor, CPThemeStateSelected | CPThemeStateDisabled], [@"divider-bezel-color", dividerHighlightedBezelColor, CPThemeStateSelected], - + [@"left-segment-bezel-color", leftBezelColor, CPThemeStateNormal], [@"left-segment-bezel-color", inactiveLeftBezelColor, CPThemeStateDisabled], [@"left-segment-bezel-color", inactiveHighlightedLeftBezelColor, CPThemeStateSelected | CPThemeStateDisabled], [@"left-segment-bezel-color", leftHighlightedBezelColor, CPThemeStateSelected], [@"left-segment-bezel-color", pushedLeftBezelColor, CPThemeStateHighlighted], [@"left-segment-bezel-color", pushedHighlightedLeftBezelColor, CPThemeStateHighlighted | CPThemeStateSelected], - + [@"right-segment-bezel-color", rightBezelColor, CPThemeStateNormal], [@"right-segment-bezel-color", inactiveRightBezelColor, CPThemeStateDisabled], [@"right-segment-bezel-color", inactiveHighlightedRightBezelColor, CPThemeStateSelected | CPThemeStateDisabled], [@"right-segment-bezel-color", rightHighlightedBezelColor, CPThemeStateSelected], [@"right-segment-bezel-color", pushedRightBezelColor, CPThemeStateHighlighted], [@"right-segment-bezel-color", pushedHighlightedRightBezelColor, CPThemeStateHighlighted | CPThemeStateSelected], - + [@"content-inset", CGInsetMake(0.0, 4.0, 0.0, 4.0), CPThemeStateNormal], [@"bezel-inset", CGInsetMake(0.0, 0.0, 0.0, 0.0), CPThemeStateNormal], - + [@"font", [CPFont boldSystemFontOfSize:12.0]], [@"text-color", [CPColor colorWithCalibratedWhite:79.0 / 255.0 alpha:1.0]], [@"text-color", [CPColor colorWithCalibratedWhite:0.6 alpha:1.0], CPThemeStateDisabled], @@ -1002,7 +1002,7 @@ var themedSegmentedControlValues = nil; ]; [self registerThemeValues:themedSegmentedControlValues forView:segmentedControl]; - + return segmentedControl; } @@ -1016,7 +1016,7 @@ var themedHorizontalSliderValues = nil; + (CPSlider)themedHorizontalSlider { var slider = [self makeHorizontalSlider], - + trackColor = PatternColor( [ ["horizontal-track-left.png", 4.0, 5.0], @@ -1024,7 +1024,7 @@ var themedHorizontalSliderValues = nil; ["horizontal-track-right.png", 4.0, 5.0] ], PatternIsHorizontal), - + trackDisabledColor = PatternColor( [ ["horizontal-track-disabled-left.png", 4.0, 5.0], @@ -1032,25 +1032,25 @@ var themedHorizontalSliderValues = nil; ["horizontal-track-disabled-right.png", 4.0, 5.0] ], PatternIsHorizontal), - + knobColor = PatternColor("knob.png", 23.0, 24.0), knobHighlightedColor = PatternColor("knob-highlighted.png", 23.0, 24.0), knobDisabledColor = PatternColor("knob-disabled.png", 23.0, 24.0); - - themedHorizontalSliderValues = + + themedHorizontalSliderValues = [ [@"track-width", 5.0], [@"track-color", trackColor], [@"track-color", trackDisabledColor, CPThemeStateDisabled], - + [@"knob-size", CGSizeMake(23.0, 24.0)], [@"knob-color", knobColor], [@"knob-color", knobHighlightedColor, CPThemeStateHighlighted], [@"knob-color", knobDisabledColor, CPThemeStateDisabled] ]; - + [self registerThemeValues:themedHorizontalSliderValues forView:slider]; - + return slider; } @@ -1064,7 +1064,7 @@ var themedVerticalSliderValues = nil; + (CPSlider)themedVerticalSlider { var slider = [self makeVerticalSlider], - + trackColor = PatternColor( [ ["vertical-track-top.png", 5.0, 6.0], @@ -1072,7 +1072,7 @@ var themedVerticalSliderValues = nil; ["vertical-track-bottom.png", 5.0, 4.0] ], PatternIsVertical), - + trackDisabledColor = PatternColor( [ ["vertical-track-disabled-top.png", 5.0, 6.0], @@ -1080,25 +1080,25 @@ var themedVerticalSliderValues = nil; ["vertical-track-disabled-bottom.png", 5.0, 4.0] ], PatternIsVertical), - + knobColor = PatternColor("knob.png", 23.0, 24.0), knobHighlightedColor = PatternColor("knob-highlighted.png", 23.0, 24.0), knobDisabledColor = PatternColor("knob-disabled.png", 23.0, 24.0); - - themedVerticalSliderValues = + + themedVerticalSliderValues = [ [@"track-width", 5.0], [@"track-color", trackColor, CPThemeStateVertical], [@"track-color", trackDisabledColor, CPThemeStateDisabled], - + [@"knob-size", CGSizeMake(23.0, 24.0)], [@"knob-color", knobColor], [@"knob-color", knobHighlightedColor, CPThemeStateHighlighted], [@"knob-color", knobDisabledColor, CPThemeStateDisabled] ] - + [self registerThemeValues:themedVerticalSliderValues forView:slider]; - + return slider; } @@ -1107,22 +1107,22 @@ var themedCircularSliderValues = nil; + (CPSlider)makeCircularSlider { var slider = [[CPSlider alloc] initWithFrame:CGRectMake(0.0, 0.0, 34.0, 34.0)]; - + [slider setSliderType:CPCircularSlider]; - + return slider; } + (CPSlider)themedCircularSlider { var slider = [self makeCircularSlider], - + trackColor = PatternColor("slider-circular-bezel.png", 34.0, 34.0), trackDisabledColor = PatternColor("slider-circular-disabled-bezel.png", 34.0, 34.0) knobColor = PatternColor("slider-circular-knob.png", 5.0, 5.0), knobDisabledColor = PatternColor("slider-circular-disabled-knob.png", 5.0, 5.0), knobHighlightedColor = knobColor; - + themedCircularSliderValues = [ [@"track-color", trackColor, CPThemeStateCircular], @@ -1135,7 +1135,7 @@ var themedCircularSliderValues = nil; ]; [self registerThemeValues:themedCircularSliderValues forView:slider]; - + return slider; } @@ -1144,22 +1144,22 @@ var themedButtonBarValues = nil; + (CPButtonBar)makeButtonBar { var buttonBar = [[CPButtonBar alloc] initWithFrame:CGRectMake(0.0, 0.0, 147.0, 26.0)]; - + [buttonBar setHasResizeControl:YES]; - + var popup = [CPButtonBar actionPopupButton]; [popup addItemWithTitle:"Item 1"]; [popup addItemWithTitle:"Item 2"]; [buttonBar setButtons:[[CPButtonBar plusButton], [CPButtonBar minusButton], popup]]; - + return buttonBar; } + (CPButtonBar)themedButtonBar { var buttonBar = [self makeButtonBar], - + color = PatternColor("buttonbar-bezel.png", 1.0, 26.0), resizeColor = PatternColor("buttonbar-resize-control.png", 5.0, 10.0), buttonBezelColor = PatternColor( @@ -1189,28 +1189,28 @@ var themedButtonBarValues = nil; themedButtonBarValues = [ [@"bezel-color", color], - + [@"resize-control-size", CGSizeMake(5.0, 10.0)], [@"resize-control-inset", CGInsetMake(9.0, 4.0, 7.0, 4.0)], [@"resize-control-color", resizeColor], - + [@"button-bezel-color", buttonBezelColor], [@"button-bezel-color", buttonBezelHighlightedColor, CPThemeStateHighlighted], [@"button-bezel-color", buttonBezelDisabledColor, CPThemeStateDisabled], [@"button-text-color", [CPColor blackColor]] ]; - + [self registerThemeValues:themedButtonBarValues forView:buttonBar]; - + return buttonBar; } + (_CPTableColumnHeaderView)makeColumnHeader { var header = [[_CPTableColumnHeaderView alloc] initWithFrame:CGRectMake(0.0, 0.0, 100.0, 24.0)]; - + [header setStringValue:@"Table Header"]; - + return header; } @@ -1221,25 +1221,25 @@ var themedButtonBarValues = nil; highlighted = PatternColor("tableview-headerview-highlighted.png", 1.0, 23.0), pressed = PatternColor("tableview-headerview-pressed.png", 1.0, 23.0), normal = PatternColor("tableview-headerview.png", 1.0, 23.0), - + themedColumnHeaderValues = [ [@"background-color", normal], - + [@"text-inset", CGInsetMake(0, 5, 0, 5)], [@"text-color", [CPColor colorWithCalibratedWhite:51.0 / 255.0 alpha:1.0]], [@"text-font", [CPFont boldSystemFontOfSize:12.0]], [@"text-shadow-color", [CPColor whiteColor]], [@"text-shadow-offset", CGSizeMake(0.0, 1.0)], [@"text-alignment", CPLeftTextAlignment], - + [@"background-color", pressed, CPThemeStateHighlighted], [@"background-color", highlighted, CPThemeStateSelected], [@"background-color", highlightedPressed, CPThemeStateHighlighted | CPThemeStateSelected] ]; [self registerThemeValues:themedColumnHeaderValues forView:header]; - + return header; } @@ -1269,18 +1269,18 @@ var themedButtonBarValues = nil; // This is a bit more complicated than the rest because we actually set theme values for several different (table related) controls in this method var tableview = [[CPTableView alloc] initWithFrame:CGRectMake(0.0, 0.0, 150.0, 150.0)], - + sortImage = PatternColor("tableview-headerview-ascending.png", 9.0, 8.0), sortImageReversed = PatternColor("tableview-headerview-descending.png", 9.0, 8.0), alternatingRowColors = [[CPColor whiteColor], [CPColor colorWithRed:245.0 / 255.0 green:249.0 / 255.0 blue:252.0 / 255.0 alpha:1.0]], gridColor = [CPColor colorWithHexString:@"dce0e2"], selectionColor = [CPColor colorWithHexString:@"5f83b9"], - sourceListSelectionColor = [CPDictionary dictionaryWithObjects: [CGGradientCreateWithColorComponents(CGColorSpaceCreateDeviceRGB(), [89.0/255.0, 153.0/255.0, 209.0/255.0,1.0, 33.0/255.0, 94.0/255.0, 208.0/255.0,1.0], [0,1], 2), + sourceListSelectionColor = [CPDictionary dictionaryWithObjects: [CGGradientCreateWithColorComponents(CGColorSpaceCreateDeviceRGB(), [89.0/255.0, 153.0/255.0, 209.0/255.0,1.0, 33.0/255.0, 94.0/255.0, 208.0/255.0,1.0], [0,1], 2), [CPColor colorWithCalibratedRed:(61.0/255.0) green:(123.0/255.0) blue:(218.0/255.0) alpha:1.0], [CPColor colorWithCalibratedRed:(31.0/255.0) green:(92.0/255.0) blue:(207.0/255.0) alpha:1.0] ] forKeys: [CPSourceListGradient, CPSourceListTopLineColor, CPSourceListBottomLineColor]], - + themedTableViewValues = [ [@"alternating-row-colors", alternatingRowColors], @@ -1333,29 +1333,29 @@ var themedButtonBarValues = nil; [@"text-shadow-color", [CPColor blackColor], CPThemeStateDisabled], [@"text-shadow-offset", CGSizeMake(-1.0, -1.0)] ]; - + if (themeValues) [overrides addObjectsFromArray:themeValues]; - + return overrides; } + (CPPopUpButton)themedSegmentedControl { var segmentedControl = [AristoThemeDescriptor makeSegmentedControl]; - + [self registerThemeValues:[self defaultThemeOverridesAddedTo:nil] forView:segmentedControl inherit:themedSegmentedControlValues]; return segmentedControl; } -var +var + (CPButton)button { var button = [AristoThemeDescriptor makeButton]; [self registerThemeValues:[self defaultThemeOverridesAddedTo:nil] forView:button inherit:themedButtonValues];; - + return button; } @@ -1385,9 +1385,9 @@ var [ [@"knob-color", nil, CPThemeStateVertical | CPThemeStateDisabled] ]; - + [self registerThemeValues:[self defaultThemeOverridesAddedTo:overrides] forView:scroller inherit:themedVerticalScrollerValues];; - + return scroller; } @@ -1398,7 +1398,7 @@ var [ [@"knob-color", nil, CPThemeStateDisabled] ]; - + [self registerThemeValues:[self defaultThemeOverridesAddedTo:overrides] forView:scroller inherit:themedHorizontalScrollerValues];; return scroller; @@ -1407,27 +1407,27 @@ var + (CPSlider)themedHorizontalSlider { var slider = [AristoThemeDescriptor makeHorizontalSlider]; - + [self registerThemeValues:[self defaultThemeOverridesAddedTo:nil] forView:slider inherit:themedHorizontalSliderValues];; - + return slider; } + (CPSlider)themedVerticalSlider { var slider = [AristoThemeDescriptor makeVerticalSlider]; - + [self registerThemeValues:[self defaultThemeOverridesAddedTo:nil] forView:slider inherit:themedVerticalSliderValues];; - + return slider; } + (CPSlider)themedCircularSlider { var slider = [AristoThemeDescriptor makeCircularSlider]; - + [self registerThemeValues:[self defaultThemeOverridesAddedTo:nil] forView:slider inherit:themedCircularSliderValues];; - + return slider; } diff --git a/AppKit/Themes/BlendKit/BKThemeDescriptor.j b/AppKit/Themes/BlendKit/BKThemeDescriptor.j index 6d0f49cb3..7f248c8b2 100644 --- a/AppKit/Themes/BlendKit/BKThemeDescriptor.j +++ b/AppKit/Themes/BlendKit/BKThemeDescriptor.j @@ -177,14 +177,14 @@ var ItemSizes = { }, } + (void)registerThemeValues:(CPArray)themeValues forView:(CPView)aView -{ +{ for (var i = 0; i < themeValues.length; ++i) { var attributeValueState = themeValues[i], attribute = attributeValueState[0], value = attributeValueState[1], state = attributeValueState[2]; - + if (state) [aView setValue:value forThemeAttribute:attribute inState:state]; else @@ -218,9 +218,9 @@ var ItemSizes = { }, value = attributeValueState[1], state = attributeValueState[2], pattern = nil; - - if (typeof(value) === "object" && - value.hasOwnProperty("isa") && + + if (typeof(value) === "object" && + value.hasOwnProperty("isa") && [value isKindOfClass:CPColor] && (pattern = [value patternImage])) { @@ -228,16 +228,16 @@ var ItemSizes = { }, { var slices = [pattern imageSlices], newSlices = []; - + for (var sliceIndex = 0; sliceIndex < slices.length; ++sliceIndex) { var slice = slices[sliceIndex], filename = themePath + [[slice filename] lastPathComponent], size = [slice size]; - + newSlices.push([filename, size.width, size.height]); } - + if ([pattern isThreePartImage]) value = PatternColor(newSlices, [pattern isVertical]); else @@ -247,11 +247,11 @@ var ItemSizes = { }, { var filename = themePath + [[pattern filename] lastPathComponent], size = [pattern size]; - + value = PatternColor(filename, size.width, size.height); } } - + if (state) [aView setValue:value forThemeAttribute:attribute inState:state]; else @@ -259,7 +259,7 @@ var ItemSizes = { }, } } } - + if (themeValues) [self registerThemeValues:themeValues forView:aView]; } @@ -281,7 +281,7 @@ function BKLabelFromIdentifier(anIdentifier) isCapital = /^[A-Z]/.test(character); if (isCapital) - { + { if (!isLeadingCapital) { if (lastCapital === null) @@ -311,21 +311,21 @@ function BKLabelFromIdentifier(anIdentifier) PatternIsVertical = YES, PatternIsHorizontal = NO; - + /* To create a simple color with a pattern image: PatternColor(name, width, height) - + To create a color with a three part pattern image: PatternColor(slices, orientation) - + where slices is an array of three [name, width, height] arrays, and orientation is PatternIsVertical or PatternIsHorizontal. - + To create a color with a nine part pattern image: PatternColor(slices); - - where slices is an array of nine [name, width, height] arrays. + + where slices is an array of nine [name, width, height] arrays. */ function PatternColor() { @@ -333,14 +333,14 @@ function PatternColor() { var slices = arguments[0], imageSlices = []; - + for (var i = 0; i < slices.length; ++i) { var slice = slices[i]; - + imageSlices.push(slice ? [_CPCibCustomResource imageResourceWithName:slice[0] size:CGSizeMake(slice[1], slice[2])] : nil); } - + if (arguments.length == 2) return [CPColor colorWithPatternImage:[[CPThreePartImage alloc] initWithImageSlices:imageSlices isVertical:arguments[1]]]; else