• Ecaterina Moraru (Valica)
    Ecaterina Moraru (Valica), 2014/12/08 16:22

    Ideally I would like to be able to write inside a SSX:
    - CSS code
    - old ColorThemes variables
    - velocity macros?
    - LESS code
    - new FlamingoThemes variables.

    For example: Menu Application SSX https://github.com/xwiki/xwiki-platform/blob/master/xwiki-platform-core/xwiki-platform-menu/xwiki-platform-menu-ui/src/main/resources/Menu/MenuMacro.xml#L267
    It contains a SSX object that is parsed. 

    Since it's parsed I can use:
    - ColorThemes variables, like $theme.menuBackgroundColor
    - Velocity macros, like #css3_backgroundLinearGradient

    If I want to adapt this code to work with Flamingo variables, I need to be able to write LESS.

    I would have liked to be able to write something like this: 

    .menu.menu-horizontal {
     background-color: $theme.menuBackgroundColor;
     height: @navbar-height;
     #css3_backgroundLinearGradient({ ... })
    }

    combining both velocity and less inside the same ssx. 

    It's important to find the right/implementable solution, since it would be a shame to need to re-write our old CSS in order to replace colorTheme variables with new Flamingo variables:

    .menu.menu-horizontal {
     background-color: @navbar-default-bg; /*$theme.menuBackgroundColor;*/
    }
    • Sol1

      means splitting the styling of an application in multiple objects, depending on the need. Providing the same selectors for each object

      • SSX object - parsable
      #template('colorThemeInit.vm')
      .menu.menu-horizontal {
       background-color: $theme.menuBackgroundColor;
      }
      • LSSX object
      .menu.menu-horizontal {
       height: @navbar-height;
      }

      I don't like this solution since it's not natural and breaks the styling for same elements over several objects. 

    • Sol2

       the big question here is if we can have both LESS and Velocity? If the answer is 'no', than we will still create different ssx objects, some that are parsable and some that are not in order to have velocity macros or $theme variables.

      • SSX - Parse: True
      • SSX - CSS pre-processor: LESS

      What will happen for objects like: 

      • SSX - Parse: True + CSS pre-processor: LESS ?

      I prefer Sol2, but I'm not sure how we solve the parse problem.

  • Guillaume Delhumeau
    Guillaume Delhumeau, 2014/12/10 15:54

    Sorry if it was not clear, but in my proposal, we do not change how velocity behave. Which means that we can have both velocity and LESS, exactly like in style.less.vm.

    My concern is about skins (Colibri) that does not have LESS variables. For example, do we want to break the Menu Application for Colibri if we do http://jira.xwiki.org/browse/XWIKI-11408 ?

  • Ecaterina Moraru (Valica)
    Ecaterina Moraru (Valica), 2014/12/10 15:57

    The way I plan to fix XWIKI-11408 is:
    - keep the current ssx as it is, but add at the top '.skin-colibri'
    - write new less code in a separate ssx, make it default, by not prefixing it

Get Connected