Skip to content
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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Card Voew for projects #1

wants to merge 1 commit into from

Conversation

shresthasamir4119
Copy link
Collaborator

@shresthasamir4119 shresthasamir4119 commented Jul 16, 2020

Remaining :

  • Position of percentage indicator
  • position of tooltip for progress bar

Screen Shot 2020-07-16 at 16 59 53

can be resized by external div

Screen Shot 2020-07-16 at 17 00 32

import '../donut-chart/donut-chart';

import { AVATAR, HOUR, COMMENT } from '../../constants/imagepath';
import { nothing } from 'lit-html';
Copy link
Owner

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;
Copy link
Owner

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;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.

}

.dark-green {
color: #4CAF50;
Copy link
Owner

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 },
Copy link
Owner

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>
Copy link
Owner

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">
Copy link
Owner

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);
Copy link
Owner

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}
Copy link
Owner

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 = {
Copy link
Owner

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';
Copy link
Owner

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>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mwc-icon-button

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants