Results 1 to 8 of 8

Thread: 6.5.0 Modern with Material Theme: Fashion issue

  1. #1
    Sencha Premium User
    Join Date
    Jun 2011
    Location
    Perth, Western Australia
    Posts
    179
    Vote Rating
    7
      0  

    Default 6.5.0 Modern with Material Theme: Fashion issue

    I prepared a sencha fiddle ... which doesn't work due to "Fashion is not defined"

    but the issue is this code below worked in 6.2.1 & fails in 6.5.0

    Code:
          Fashion.css.setVariables({
                   "base-color": newColorValue,  // user chosen base-color
                   "accent-color": accentColor,  // user chosen accent-color 
                  "dark-mode": Number(newThemeValue) == 1 ? "true" : "false"   // user chosen Dark or Light theme  
                  // if the "dark-mode" line is commented out it works
             });
    bug is:

    Uncaught TypeError: Cannot read property 'apply' of undefined
    at Array.Fashion.css.register.:root (css-vars.js:5418)
    at CssVariableManager.calculate (css-vars.js:1450)
    at CssVariableManager.setVariables (css-vars.js:1495)

  2. #2
    Sencha User
    Join Date
    Apr 2013
    Posts
    896
    Vote Rating
    179
      0  

    Default

    Maybe because fashion is not enabled on the fiddle? Have you read fashion guide?

  3. #3
    Sencha Premium User
    Join Date
    Jun 2011
    Location
    Perth, Western Australia
    Posts
    179
    Vote Rating
    7
      0  

    Default

    Thank you hakimio ... I guessed about fashion not working for fiddle but figured it was a good way to show approximately how I was using the Fashion.css.setVariable method.

    Have I read that guide? Yes thanks & also this blog ... in fact the code above is taken directly from that blog.

    There is a post in Q & A from another user having the same issue.
    This is a real bug IMO. i.e. code worked in 6.2.1 & fails in 6.5.x

  4. #4
    Sencha User
    Join Date
    Oct 2013
    Posts
    14
    Vote Rating
    0
      0  

    Default Same Issue

    I am having the exact same issue after upgrading from 6.2 to 6.5. Only dark-mode fails. Any fix for this yet?

    Quote Originally Posted by fairport View Post
    Thank you hakimio ... I guessed about fashion not working for fiddle but figured it was a good way to show approximately how I was using the Fashion.css.setVariable method.

    Have I read that guide? Yes thanks & also this blog ... in fact the code above is taken directly from that blog.

    There is a post in Q & A from another user having the same issue.
    This is a real bug IMO. i.e. code worked in 6.2.1 & fails in 6.5.x

  5. #5
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Omaha, NE
    Posts
    631
    Vote Rating
    42
      0  

    Default

    I'm having the same problem in 6.5.1.

  6. #6
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Omaha, NE
    Posts
    631
    Vote Rating
    42
      0  

    Default

    So here's something odd. If I run the 6.5.1 Kitchen Sink it works just fine. Go here:

    http://examples.sencha.com/extjs/6.5...#form-register

    And do this in dev tools:

    Code:
    Fashion.css.setVariables({
            "base-color-name": "green", 
            "accent-color-name": "orange",
    		"dark-mode": "true"
        });
    So the question is what is different? I used CMD 6.5.1 to create a 6.5.1 app and mine doesn't work.

  7. #7
    Sencha Premium User
    Join Date
    Mar 2013
    Posts
    6
    Vote Rating
    0
      0  

    Default Same problem

    I am experiencing this same issue with dark mode in ExtJS 6.6. I have not found a resolution, did you get this working or was a bug ticket actually opened?

    Quote Originally Posted by estesbubba View Post
    So here's something odd. If I run the 6.5.1 Kitchen Sink it works just fine. Go here:

    http://examples.sencha.com/extjs/6.5...#form-register

    And do this in dev tools:

    Code:
    Fashion.css.setVariables({
            "base-color-name": "green", 
            "accent-color-name": "orange",
            "dark-mode": "true"
        });
    So the question is what is different? I used CMD 6.5.1 to create a 6.5.1 app and mine doesn't work.

  8. #8
    Sencha Premium User
    Join Date
    Jun 2015
    Posts
    9
    Vote Rating
    0
      0  

    Default

    Problem with file build\modern\theme-material\resources\css-vars.js
    function darken is undefined

    Code:
    .....
    .....
    .....
    Fashion.css.register(function(__rt) {
    __rt.register({
        map_get:  function (map, key) {
                    return map.get(key);
                },
        lighten:  function (color, amount) {
                    if (color == null || color.$isFashionNull) {
                        return Literal.Null;
                    }
                    if (color.type !== 'hsla' && color.type !== 'rgba') {
                        Fashion.raise(color + ' is not a color for \'lighten\'');
                    }
                    if (amount.type !== 'number') {
                        Fashion.raise(amount + ' is not a number for \'lighten\'');
                    }
                    if (amount.value !== Color.constrainPercentage(amount.value)) {
                        Fashion.raise('Amount ' + amount + ' must be between 0% and 100% for \'lighten\'');
                    }
    
    
                    return Color.adjust(color, 'lightness', amount);
                },
        rgba:  function (red, green, blue, alpha, color) {
                    var colorInst;
    
    
                    if (!!red && !!color) {
                        Fashion.raise("Unsupported arguments to RGBA");
                    }
    
    
                    if (color && !red) {
                        if (color.$isFashionColor) {
                            colorInst = color;
                        } else {
                            Fashion.raise("Unsupported arguments to RGBA");
                        }
                    } else if (red && red.$isFashionColor) {
                        colorInst = red;
                    }
    
    
                    if (colorInst) {
                        alpha = green || alpha;
                        colorInst = colorInst.getRGBA();
                        red = new Numeric(colorInst.r);
                        green = new Numeric(colorInst.g);
                        blue = new Numeric(colorInst.b);
                    }
    
    
                    if (!red || !red.$isFashionNumber) {
                        if (red == null || red.$isFashionNull) {
                            return Literal.Null;
                        }
                        Fashion.raise(red + ' is not a number for \'rgba\' red');
                    }
                    if (!green || !green.$isFashionNumber) {
                        if (green == null || green.$isFashionNull) {
                            return Literal.Null;
                        }
                        Fashion.raise(green + ' is not a number for \'rgba\' green');
                    }
                    if (!blue || !blue.$isFashionNumber) {
                        if (blue == null || blue.$isFashionNull) {
                            return Literal.Null;
                        }
                        Fashion.raise(blue + ' is not a number for \'rgba\' blue');
                    }
                    if (!alpha || !alpha.$isFashionNumber) {
                        if (alpha == null || alpha.$isFashionNull) {
                            return Literal.Null;
                        }
                        Fashion.raise(alpha + ' is not a number for \'rgba\' alpha');
                    }
    
    
                    if (red.unit == '%') {
                        red = new Numeric(Color.constrainPercentage(red.value) / 100 * 255);
                    } else if (red.value !== Color.constrainChannel(red.value)) {
                        Fashion.raise('Color value ' + red + ' must be between 0 and 255 inclusive for \'rgba\'');
                    }
    
    
                    if (green.unit == '%') {
                        green = new Numeric(Color.constrainPercentage(green.value) / 100 * 255);
                    } else if (green.value !== Color.constrainChannel(green.value)) {
                        Fashion.raise('Color value ' + green + ' must be between 0 and 255 inclusive for \'rgba\'');
                    }
    
    
                    if (blue.unit == '%') {
                        blue = new Numeric(Color.constrainPercentage(blue.value) / 100 * 255);
                    } else if (blue.value !== Color.constrainChannel(blue.value)) {
                        Fashion.raise('Color value ' + blue + ' must be between 0 and 255 inclusive for \'rgba\'');
                    }
    
    
                    if (alpha.unit == '%') {
                        alpha = new Numeric(Color.constrainPercentage(alpha.value) / 100);
                    } else if (alpha.value !== Color.constrainAlpha(alpha.value)) {
                        Fashion.raise('Alpha channel ' + alpha + ' must be between 0 and 1 inclusive for \'rgba\'');
                    }
    
    
                    return new ColorRGBA(red.value, green.value, blue.value, alpha.value);
                },
        mix:  function (color_1, color_2, weight) {
                    if (color_1 == null || color_1.$isFashionNull) {
                        return Literal.Null;
                    }
                    if (color_2 == null || color_2.$isFashionNull) {
                        return Literal.Null;
                    }
                    
                    weight = (weight !== undefined) ? weight : new Numeric(50, '%');
    
    
                    if (color_1.type !== 'hsla' && color_1.type !== 'rgba') {
                        Fashion.raise('arg 1 ' + color_1 + ' is not a color for \'mix\'');
                    }
                    if (color_2.type !== 'hsla' && color_2.type !== 'rgba') {
                        Fashion.raise('arg 2 ' + color_2 + ' is not a color for \'mix\'');
                    }
                    if (weight.type !== 'number') {
                        Fashion.raise('arg 3 ' + weight + ' is not a number for \'mix\'');
                    }
                    if (weight.value !== Color.constrainPercentage(weight.value)) {
                        Fashion.raise('Weight ' + weight + ' must be between 0% and 100% for \'mix\'');
                    }
    
    
                    color_1 = color_1.getRGBA();
                    color_2 = color_2.getRGBA();
    
    
                    weight = weight.value / 100;
    
    
                    var factor = (weight * 2) - 1,
                        alpha = color_1.a - color_2.a,
                        weight1 = (((factor * alpha == -1) ? factor : (factor + alpha) / (1 + factor * alpha)) + 1) / 2,
                        weight2 = 1 - weight1;
    
    
                    return new ColorRGBA(
                        (weight1 * color_1.r) + (weight2 * color_2.r),
                        (weight1 * color_1.g) + (weight2 * color_2.g),
                        (weight1 * color_1.b) + (weight2 * color_2.b),
                        (weight * color_1.a) + ((1 - weight) * color_2.a)
                    );
                }
    });
    .....
    .....
    .....
    function(__rt) {
    .....
    .....
    .....
    var __rt_context = __rt.context,
        __rt_mixins = __rt.mixins,
        __rt_functions = __rt.functions,
        __rt_processors = __rt.processors,
        __rt_registered = __rt.registered,
    .....
    
    .....
    .....
    _setDynamic("$base-pressed-color", __rt_getGlobalDefault("$base_pressed_color") || (__rt_test(__rt_get("$dark_mode")) ? __rt_box(__rt_registered.darken.apply(__rt.registered, __rt_applySpreadArgs([
        __rt_get("$base_color")

Similar Threads

  1. [OPEN] Material Icons and Ext.theme.Material not documented
    By mtkutz in forum Sencha Documentation
    Replies: 4
    Last Post: 25 May 2018, 12:44 PM
  2. Replies: 4
    Last Post: 21 Nov 2017, 7:31 AM
  3. Ext.js 6.5 Modern Material Design Snippets
    By busaware1 in forum Ext:User Extensions and Plugins
    Replies: 1
    Last Post: 31 May 2017, 10:23 AM
  4. Replies: 0
    Last Post: 10 Feb 2017, 2:42 AM
  5. [OPEN] textareafield won't flex with modern / material theme
    By froamer in forum Ext 6.2 Early Access
    Replies: 2
    Last Post: 8 Sep 2016, 3:04 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •