Sencha CMD - Theme Creation/Editing

[mbudm]

It was definitely a learning curve for me too, but I'm now happily using the new themes structure.

The only issues I still have are:
- the slow compile process (about 15secs using sencha ant sass theme)
- resources don't compile from the package/theme

But both of these I can live with

That was a few weeks ago now so of course my recollection of the exact issues that stumped me are hazy, but in case it helps I've looked back in my forum history and these are the threads I posted in (if I posted there then they must have been useful to me ;-) ):

http://www.sencha.com/forum/showthre...uilding-themes
http://www.sencha.com/forum/showthre...om)-components
http://www.sencha.com/forum/showthre...-CSS-compiling
http://www.sencha.com/forum/showthre...e-parent-theme
http://www.sencha.com/forum/showthre...uild-resources

[KajaSheen]

I am now posting in this thread, as I followed it to start migrating my 4.1 theme to 4.2

So far not a whole lot works as before. I was able to get the custom package to compile and I started to migrate my .scss file, but there are some changes in the variables. But that is not the main problem I am facing right now.

After I successfully compiled the theme I tries to include it in the theme example by modifying the options toolbar and the include ext code. When I load the CSS file from my new theme (and that is all that should be required, right?) all panels are moved on top of each other.

So I was wondering if I could include the CSS from the ext-theme-classic but the same thing happened, when I was including the css file from the build folder?

26-03-2013 15-07-17.jpg

[dongryphon]

FYI - Ext JS 4.2 Theme Guide just posted - http://docs.sencha.com/ext-js/4-2/#!/guide/theming

Also some related guides on packages just posted -

http://docs.sencha.com/ext-js/4-2/#!...mmand_packages
http://docs.sencha.com/ext-js/4-2/#!...kage_authoring

[Dmoney]

Thanks the new docs are a lot of help. I am having an issue with creating a custom ui though. the panel example in the docs works fine but when I try to create a ui for button I'm getting an error:

"null" is not a color for `mix')

@include extjs-button-ui(  
$ui: 'navigation-small', 
$border-color:#000, 
$background-color-pressed:#222,
$background-gradient:(#444,#222),
$color:#FFF
);

[makana]

Yes, I got this, too.

I'll try to point out some things I encountered and which I think should be fixed/changed.

1. The "null is not a color for mix" error:

It's in line 124 in ext-theme-neutral/sass/src/button/Button.scss

$mix-color: $background-color;
@if $mix-color == transparent {
    $mix-color: #fff;
}
.#{$prefix}ie8m & {
    color: mix($glyph-color, $mix-color, $glyph-opacity * 100);
}

should be

$mix-color: $background-color;
@if $mix-color == transparent or $mix-color == null {
    $mix-color: #fff;
}
.#{$prefix}ie8m & {
    color: mix($glyph-color, $mix-color, $glyph-opacity * 100);
}

2. Setting $window-border-radius to null causes errors in line 148 of ext-theme-neutral/sass/src/window/Window.scss

  $frame-top: max(top($ui-border-width), max(top($ui-border-radius), right($ui-border-radius)));
  $header-bottom-padding-adjust: $frame-top - top($ui-border-width);

  $header-expanded-padding:
      top($ui-header-padding),
      right($ui-header-padding),
      bottom($ui-header-padding) - $header-bottom-padding-adjust,
      left($ui-header-padding);

  @if $ui-border-radius != null {
      @include x-frame(
          $cls: 'window-header',
          $ui: '#{$ui-label}-top',
          $border-radius: top($ui-border-radius) right($ui-border-radius) 0 0,
          $border-width: top($ui-header-border-width) right($ui-header-border-width) $header-border-bottom-width left($ui-header-border-width),
          $padding: $header-expanded-padding,
          $background-color: $ui-header-background-color
      );

should be

  @if $ui-border-radius != null {
      $frame-top: max(top($ui-border-width), max(top($ui-border-radius), right($ui-border-radius)));
      $header-bottom-padding-adjust: $frame-top - top($ui-border-width);
      $header-expanded-padding:
          top($ui-header-padding),
          right($ui-header-padding),
          bottom($ui-header-padding) - $header-bottom-padding-adjust,
          left($ui-header-padding);
      @include x-frame(
          $cls: 'window-header',
          $ui: '#{$ui-label}-top',
          $border-radius: top($ui-border-radius) right($ui-border-radius) 0 0,
          $border-width: top($ui-header-border-width) right($ui-header-border-width) $header-border-bottom-width left($ui-header-border-width),
          $padding: $header-expanded-padding,
          $background-color: $ui-header-background-color
      );

3. Window headers should accept background-gradient parameters like a Panel to be more flexible when extended. (line 178 and following of ext-theme-neutral/sass/src/window/Window.scss)

@include x-frame(
    $cls: 'window-header',
    $ui: '#{$ui-label}-top',
    $border-radius: top($ui-border-radius) right($ui-border-radius) 0 0,
    $border-width: top($ui-header-border-width) right($ui-header-border-width) $header-border-bottom-width left($ui-header-border-width),
    $padding: $header-expanded-padding,
    $background-color: $ui-header-background-color,
    $background-gradient: $ui-header-background-gradient
);

@include x-frame(
    $cls: 'window-header',
    $ui: '#{$ui-label}-right',
    $border-radius: 0 top($ui-border-radius) right($ui-border-radius) 0,
    $border-width: left($ui-header-border-width) top($ui-header-border-width) right($ui-header-border-width) $header-border-bottom-width,
    $padding: rotate90($header-expanded-padding),
    $background-color: $ui-header-background-color,
    $background-gradient: $ui-header-background-gradient,
    $background-direction: right
);
@include x-frame(
    $cls: 'window-header',
    $ui: '#{$ui-label}-bottom',
    $border-radius: 0 0 top($ui-border-radius) left($ui-border-radius),
    $border-width: $header-border-bottom-width right($ui-header-border-width) top($ui-header-border-width) left($ui-header-border-width),
    $padding: rotate180($header-expanded-padding),
    $background-color: $ui-header-background-color,
    $background-gradient: $ui-header-background-gradient
);

@include x-frame(
    $cls: 'window-header',
    $ui: '#{$ui-label}-left',
    $border-radius: right($ui-border-radius) 0 0 top($ui-border-radius),
    $border-width: right($ui-header-border-width) $header-border-bottom-width left($ui-header-border-width) top($ui-header-border-width),
    $padding: rotate270($header-expanded-padding),
    $background-color: $ui-header-background-color,
    $background-gradient: $ui-header-background-gradient,
    $background-direction: right,
    $include-frame-rtl: $include-rtl
);

and of course define the variables for that.

4. I think not to generate the corner slices in frame mixin if background-color is transparent, is wrong.
I tried to make borders around toolbar buttons (that do not have a background) and i didn't getting the slices. I hacked around by setting

$button-toolbar-background-color: rgba($neutral-color, 0);
$button-toolbar-background-gradient: 'make-border-images-for-ie'; // something that is not a predefined gradient and not null

Line 377 of ext-theme-base/sass/src/etc/mixins/frame.scss

@if $background-color != transparent {
    background-image: slicer-corner-sprite($cls-ui, '#{$cls}/#{$cls-img-ui}-corners');
}

and the following rtl-lines...


Hope, that someone can take a look on it.
Thanks

makana

[makana]

@KajaSheen:

Pretty fixed lines in examples/themes/themes.js
#899

If your theme extends the classic theme or looks similar to it, you can add

function getSizing(id) {
    var theme = Ext.themeName,
        info;
        
    if (theme == 'gray' || theme == 'mytheme') {
        // same dimensions
        theme = 'classic';
    }
    
    info = sizing[id][theme];
    if (!info && theme === 'access') {
        // default to neptune for access
        info = sizing[id].neptune;
    }
    return info;
}

[noithattanthinh]

it's useful

[Dmoney]

Thanks @makana ,

That helped a lot. I had a null value for $glyph-color that was throwing the error as well. $glyph-color is given the value null on line 58 of the same Button.scss file. but assigning a color value to it makes the error go away.

[jhoweaa]

A quick question, should the methods described in the 4.2 Theme Guide work with Sencha CMD 3.1.0.256 and Ext JS 4.2.0.489? I've tried following the instructions, first creating a workspace, then creating an 'app' and finally (for me) trying to build the app. When I both generate the app and try to build the app I get warnings and errors:

[WRN] Package ext-theme-classic has unrecognized type LIB
[ERR] Theme ext-theme-classic not found
[ERR]
[ERR] BUILD FAILED
[ERR] com.sencha.exceptions.ExNotFound: Required packages not found.

I can tell you that there *is* an ext-theme-classic directory in the packages directory at the root level of my workspace. If these two builds should play nice together, I'll go ahead and report a bug, otherwise, is there a better combination of 4.2 and Sencha CMD to use at this point?

Thanks.

Jim

[dongryphon]

A quick question, should the methods described in the 4.2 Theme Guide work with Sencha CMD 3.1.0.256 and Ext JS 4.2.0.489?
... is there a better combination of 4.2 and Sencha CMD to use at this point?

Thanks.

Jim

Hi Jim -

You will need to use 4.2.0 GA (4.2.0.663) available here:

http://cdn.sencha.com/ext/commercial...commercial.zip
http://cdn.sencha.com/ext/gpl/ext-4.2.0-gpl.zip

Release notes can be found here:

http://cdn.sencha.com/ext/commercial...ase-notes.html