search

AndreyAttr / Evo

Evo repo
MIT License
0 stars 1 forks source link

Highlight directive must be customizable #10

Closed AndreyAttr closed 7 years ago

AndreyAttr commented 7 years ago

We need several params to directive customization.

AndreyAttr commented 7 years ago

It's customizable right now, but may be more customizable.

AndreyAttr commented 7 years ago

It's already supported wide customization(e.g. gene.component.html):

  1. Customization with default background color and variety of CSS properties: highlight [highlight-params]="{color: '#000000', opacity: '1.0', border: 'solid 1px black', borderRadius: '8px', fontWeight: 'bold', customClass: null}"

  2. Customization with specific background color and specific CSS class(which allows customer to specify any CSS class which he wants with any CSS styles if highlight.directive's provided by default styles is not enough): highlight="#dcfbfb" [highlight-params]="{customClass: 'dna-name-title'}"

  3. Customization with specific background color and additional specific CSS properties: highlight="{{molecule.kinds[name].kind.rgb}}" [highlight-params]="{color: molecule.kinds[name].kind.invertedRGB, borderRadius: '5px'}" or highlight="#dcfbfb" [highlight-params]="{borderRadius: '8px'}"

AndreyAttr commented 7 years ago

I think it's fully enough for customize. Even if default CSS properties can't satisfy customer's requirements, he can create CSS class with all the CSS styles he needed and set up it by using [highlight-params]="{customClass: '.....'}" property. So I do not see the neccessarity to create all possible CSS styles solutions in this case.

AndreyAttr commented 7 years ago

Remark: The only one thing I found we can improve it's using some specific aggregator class for [highlight-params] input parameter instead of using object notation we have right now. Implement using this: //TODO: need to use aggregator for directive's params //import HighlightDirectiveAggregator from "./Aggregators/highlight.directive-aggregator"; instead of this: @Input('highlight-params') params: { fontWeight?: string, color: string, opacity?: string, borderRadius?: string, border?: string, customClass?: string }; And also this allow eliminate this awful destructor operator(with initialization default params and definition optional params): highlight(color: string, {color: fontColor, opacity=null, borderRadius=null, border = null, fontWeight=null, customClass:className = null } : {color: string, opacity?: string, borderRadius?: string, border?: string, fontWeight?: string, customClass?: string} = {color: null}){