Results 1 to 4 of 4

Thread: Theme Modern Titlebar

    Success! Looks like we've fixed this one. According to our records the fix was applied for CAT-463 in 1.0.1.
  1. #1
    Sencha Premium Member
    Join Date
    Jun 2007
    Location
    Oslo,Norway
    Posts
    659
    Answers
    7

    Default Answered: Theme Modern Titlebar

    I'm trying to convert my Modern 6.0.2 app to 6.2.0 and change theme to Material, however I'm using a lot of titlebars, and it looks like the designers forgot the theme Titlebar, as it now the only (?) theme that Toolbar and Titlebar does not look the same, also all buttons and text looks completely wrong on the titlebar, since the buttons expect a light background (white/gray, as on the toolbar) but gets a dark blue.

    I figured I could try to solve this in Sencha Themer, but I'm unable to find the titlebar component in themer, I'm only able to locate the toolbar.

    How can I solve this issue?

    1. Can the Themer work with components missing from the standard component list?
    2. Can I write some custom/text based scss code, and still work with the theme in Theme after doing manual edits on the theme?
    3. Any pointer towards actually theming titlebar to look like the toolbar would be much appreciated

  2. Hi svenna,

    There are a few components we are missing in Modern, but do plan to expand support for variables and UIs in future releases. I've filed a bug to ensure titlebar variables get pushed in the next release of Themer.

    For now, you can absolutely do this 'manually', and expect the Theme to still work in Themer. There are 2 ways to accomplish this:
    1. You can use the 'grid' in Themer (bottom right icon) and search for 'titlebar' variables. This method has the advantage of allowing Themer to recognize these as changes in future versions (when we add titlebar support).
    2. You can add a scss file to the Theme package ([theme_dir]/modern/sass/var/Ext/TitleBar.scss) and put your variable changes in there.

    Personally I don't have much experience theming TitleBar so I can't give you much help, except perhaps comparing the TitleBar variables (http://docs.sencha.com/extjs/6.2.0/m...eBar.html#vars) to the default values of Toolbar (which you can view in Themer) and see how far that gets you.

    Also, if you feel any variables are missing/lacking to allow you to customize TitleBar, please feel free to post here.

  3. #2
    Sencha - Ext JS Dev Team
    Join Date
    Mar 2016
    Posts
    64
    Answers
    20

    Default

    Hi svenna,

    There are a few components we are missing in Modern, but do plan to expand support for variables and UIs in future releases. I've filed a bug to ensure titlebar variables get pushed in the next release of Themer.

    For now, you can absolutely do this 'manually', and expect the Theme to still work in Themer. There are 2 ways to accomplish this:
    1. You can use the 'grid' in Themer (bottom right icon) and search for 'titlebar' variables. This method has the advantage of allowing Themer to recognize these as changes in future versions (when we add titlebar support).
    2. You can add a scss file to the Theme package ([theme_dir]/modern/sass/var/Ext/TitleBar.scss) and put your variable changes in there.

    Personally I don't have much experience theming TitleBar so I can't give you much help, except perhaps comparing the TitleBar variables (http://docs.sencha.com/extjs/6.2.0/m...eBar.html#vars) to the default values of Toolbar (which you can view in Themer) and see how far that gets you.

    Also, if you feel any variables are missing/lacking to allow you to customize TitleBar, please feel free to post here.

  4. #3
    Sencha Premium Member
    Join Date
    Jun 2007
    Location
    Oslo,Norway
    Posts
    659
    Answers
    7

    Default

    I've added a workaround for this, it solves the issue, but need implementation on each app in the workspace.

    In the file ws\appname\sass\var\all.scss I've added these lines:

    $titlebar-background-color: $toolbar-background-color;
    $titlebar-background-gradient: $toolbar-background-gradient;
    $titlebar-color: $toolbar-color;
    $titlebar-title-color: $toolbar-title-color;

    As you see I basically copy the most important/visible attributes from toolbar to titlebar, and since it's on the app-side and not part of the workspace theme I knew it would not interfere with Themer (before your confirmation) and I would still be able to theme toolbar/titlebar from Themer.

  5. #4

    Default

    very good

    content for sharing

Similar Threads

  1. [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
  2. [OPEN] ExtJS 6 modern theme labelWidth percent issue
    By BoeckBert in forum Ext JS 6.x Bugs
    Replies: 1
    Last Post: 3 Mar 2016, 10:16 AM
  3. Replies: 1
    Last Post: 15 Dec 2015, 11:57 AM
  4. modern-neptune theme
    By lubendo in forum Ext JS 6.x Q&A
    Replies: 2
    Last Post: 9 Aug 2015, 11:16 PM
  5. [FIXED] Ext.field.Field styles in modern/theme-base/sass/src/form/Panel.scss
    By themightychris in forum Ext JS 6.x Bugs
    Replies: 1
    Last Post: 19 Jul 2015, 8:47 PM

Posting Permissions

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