Enterprise: App Menu: Add personalization options to application menu

[nickwynja]

Is your feature request related to a problem? Please describe.
For deeper personalization of applications, we should add personalization APIs to the application menu.

Describe the solution you'd like
When a user sets a personalization color, the application menu inherits that personalized color as well.

Describe alternatives you've considered
n/a

Additional context

[pwpatton]

Would be good to have a general way to apply these "theming/personalization" colors to things specific to the screen implementation as well. For example in landmark, our "context" form and a tabs control underneath it. (note we are starting to phase out the use of the EP compform component, might be able to deprecate that).

[EdwardCoyle]

@nickwynja, question about this:

When a user sets a personalization color...

Are there standard personalization colors with Uplift like we had with the original themes, like "Azure" and "Amber", that we should be using for this? Or are the colors completely user-defined? Trying to picture how we'd pull off the colorization of not just the main panel, but all the sub elements.

[tmcconechy]

There is an algorithm i did for it either way. Basically you pass in one single color and define the differences in opacity to the others. We should be able to figure it out. Maybe just need to define some more variables.

https://github.com/infor-design/enterprise/blob/master/src/components/personalize/personalize.js#L175-L190

[nickwynja]

@tmcconechy Are these colors then available as global JS variables? That might help address @pwpatton's need for accessing personalization colors in different contexts.

[tmcconechy]

Right now those colors are private, but we could expose them very easily. Also it generates a style sheet so you could do it by using the same classes. (We might need to clean it up for easier exposing as that wasnt a previous use case). Example:

http://master-enterprise.demo.design.infor.com/components/tabs-module/example-index.html?colors=80000

Then can inspect the stylesheet or if you wnat you can control more variables:
http://master-enterprise.demo.design.infor.com/components/tabs-module/example-index.html?colors=80000,10000,10000,10000,10000

[pwpatton]

once thing that would be nice is if we can mark a section (with css) as "theme-colored" and it's background and foreground would change appropriately for those sections.

We do use the setting of the personalization color with the soho api so, as long as you guys can propagate that out color to our marked sections, that should just work.

We would like to have a set of predefined colors (per the ids-identity tokens) per theme (soho vs uplift) that are the default colors to pick from.

There is a bigger question about allowing "any color" for companies that really want their banding color to be the theme-color.

[tmcconechy]

I was using is-personalizable class for that basically. But we might need some better scheme for subclasses (based on header/subheader now). So just need to sit down and workout a better scheme for "children" colors but probably keep the is-personalizable class for backwards compatibility

[pwpatton]

@tmcconechy that sounds great! is that something I could attempt to apply right now to my "context form" section?

[tmcconechy]

No not until we finish this. As its now targeting specific things in IDS there is no general classes. Fx

<style id="soho-personalization">
.tab-container.module-tabs.is-personalizable { border-top: 1px solid #520000 !important; border-bottom: 1px solid #520000 !important} 
.module-tabs.is-personalizable .tab:not(:first-child) { border-left: 1px solid #960000 !important} 

Would maybe generate stuff like .is-personalizable.main-color .is-personalizable.secondary-color too. So you have some general classes you could use. But before the use case was not everything can be personalized so we didnt offer this.

I can take this issue when do it BTW @nickwynja @EdwardCoyle

[tmcconechy]

Newer designs.

[CindyMercadoReyes]

Attaching the BDD test case to this new enhancement.
story_github#1847.docx

[tmcconechy]

@janahintal I think we should raise a new issue for this and not fail this one. As the issue is with the module tabs

http://localhost:4000/components/tabs-header/example-index.html

But i cannot reproduce it, when you raise a new issue can you add the browsers and the scroll bar mac setting your using? (I tried chrome mac with all settings and could not see the issue).

[tmcconechy]

Maybe the extra scroll bar is just on High Sierra Mac - if so it may be an OS bug we cant do anything about so maybe no need for a new issue.

[janahintal]

Maybe the extra scroll bar is just on High Sierra Mac - if so it may be an OS bug we cant do anything about so maybe no need for a new issue.

@tmcconechy , yes I have noticed it as well. I'm currently using High Sierra OS on my PC. WHhen I try it in Mojave, It's working fine. Thanks, Tim.