-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Card Voew for projects #1
base: master
Are you sure you want to change the base?
Conversation
import '../donut-chart/donut-chart'; | ||
|
||
import { AVATAR, HOUR, COMMENT } from '../../constants/imagepath'; | ||
import { nothing } from 'lit-html'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
proper placing of imports
font-weight: 500; | ||
font-size: 14px; | ||
line-height: 18px; | ||
color: #757575; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
use variables given
} | ||
|
||
paper-card { | ||
padding: 12px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
.
} | ||
|
||
.dark-green { | ||
color: #4CAF50; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
.
/** | ||
* Function to run when clicked on profile. | ||
*/ | ||
profileClicked: { type: Function }, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
onProfileClick
<div class="field">Started Date: <span class="field-value">${this.startedDate}</span></div> | ||
<div class="field">Due Date: <span class="field-value">${this.dueDate}</span></div> | ||
</div> | ||
<div class="percent-indicator small"><span class="percentage ${this.indicatorColor}">${this.progressValue}%</span></div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
format
<img src=${COMMENT} alt="comment"> | ||
</mwc-icon-button> | ||
</div> | ||
<div @click=${this.profileClicked} class="picture"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
use @click in button or keep a tag instead
|
||
|
||
|
||
window.customElements.define('card-view-view', CardViewView); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
change the custom element name
/** | ||
* Funtion to run when more icon is clicked. | ||
*/ | ||
moreIconClicked: {type: Function} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
onMoreIconClick . Use on as prefix in these type of functions
connectedCallback() { | ||
super.connectedCallback(); | ||
|
||
this.options = { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
why is the option being set in connectedCallBack?
this.picture = AVATAR; | ||
this.progressValue = 80; | ||
this.progressColor = 'green'; | ||
this.dueDate = '2020-20-20'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
use a single object card to represent these variables of card data
${this.title} | ||
</div> | ||
<div> | ||
<paper-icon-button icon="icons:more-vert" class="more-icon" @click="${this.moreIconClicked}"></paper-icon-button> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
mwc-icon-button
4310bb7
to
3353db3
Compare
3353db3
to
5aae98f
Compare
Remaining :
can be resized by external div