feat(card): add card component #149
Conversation
src/app/card/card.model.ts
Outdated
| margin?: string; | ||
| } | ||
|
|
||
| export let defaultCardConfig = { |
- change let to const for card config
There was a problem hiding this comment.
FYI, patternfly-ng has a couple card implementations, including a custom card example. The custom card was created/intended to be used for the home and space dashboards, but didn't have time to change over.
The custom card also uses a header template, but uses ng-content for the body -- no need for a body template.
The only difference I can see is that patternfly-ng doesn't provide a footer. However, OSIO doesn't appear to have any designs with a card footer -- that could easily be added if necessary?
Click on the "Custom" tab http://www.patternfly.org/patternfly-ng/#/card
|
Pinging @mindreeper2420 as Adam is our expert on cards. |
| } | ||
| .card-footer { | ||
| .label { | ||
| color: #000; |
| .card-footer { | ||
| .label { | ||
| color: #000; | ||
| background-color: #a18fff; |
| vertical-align: bottom; | ||
| border-radius: 2px; | ||
| box-shadow: 1px 1px 1px rgba(80, 80, 80, .4); | ||
| font-size: 12px; |
There was a problem hiding this comment.
should be a relational size to the base font (em or `rem).
|
Are the styles for this component solely based on PatternFly, or do they also include the custom card styles that are in fabric8-ui? We created the custom styles, as the dashboards cards do not have a representative view in PatternFly and were deemed too customized for OSIO to be a common PatternFly component. |
|
@mindreeper2420 This card component is a dynamic component we can add any styles as per requirement. We are going to use this card component in planner board. Here is link of the board UX. |
|
Can this component achieve the same layout as what is used for the fabric8-ui home and space dashboards? If so, an example of that would be helpful. If the layout is specific to Planner (e.g., the header/borders seem very different than what's used in fabric8-u), perhaps the component should be named board-view-card so it's clear this is not a standard card layout? |
|
@vikram-raj IMO, if a card component is being created outside of the ones in PatternFly-ng, it should be able to handle all of the custom cards needed for OSIO, not just Planner. Is there a particular reason why Planner needs this custom one? From the design, it looks like a standard card component, as found in PatternFly-ng (as it has a title and body content). The Trend Card from PatternFly 3 has a footer in it, so that is already included with the PatternFly library. |
|
I agree with @mindreeper2420, this repo is for shared and shareable components. If something is locked into Planner then keep it there. @vikram-raj have you looked at what @dlabrecq said? |
|
Yes, @joshuawilson I looked into patternfly-ng card component. It is good but we can improve patternfly-ng card component providing more configuration.
Yes @dlabrecq @mindreeper2420 we can achieve the same layout using this component as what is used for the fabric8-ui.
It is not specific to planner we can use it anywhere. I used |
|
Why not contribute to PatternFly-ng then? |
|
@mindreeper2420 Yeah, I will do. |
|
Can we close this then? |
|
Closing this as you said you will do this in PF. |
Added a card component. This is a dynamic component and it is highly configurable. Example for this component is also added in this PR.