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.

Sign up for GitHub

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

feat(ui5-card): add image property #45

Merged
merged 6 commits into from
Feb 14, 2019
+55 −46
Merged

feat(ui5-card): add image property #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
87685c2
feat(ui5-card): add image property
ilhan007 Feb 13, 2019
2940adb
add rest of the files
ilhan007 Feb 13, 2019
1b79966
introduce avatar property instead of icon and image
ilhan007 Feb 14, 2019
73537e9
Merge branch 'master' into feat-card-image
ilhan007 Feb 14, 2019
4b51855
improve samples
ilhan007 Feb 14, 2019
7c20ffa
update documentation
ilhan007 Feb 14, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions packages/main/src/Card.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
<div {{> controlData}} class="sapFCard">
<header class="sapFCardHeader">
{{#if ctr.icon}}
<span role="img" aria-label="Avatar" class="sapFCardAvatar">
<ui5-icon class="sapFCardHeaderIcon" src="{{ctr.icon}}"></ui5-icon>
</span>
{{#if image}}
<img src="{{ctr.avatar}}" aria-label="Avatar" class="sapFCardAvatar sapFCardHeaderImg">
{{/if}}

{{#if icon}}
<span role="img" aria-label="Avatar" class="sapFCardAvatar">
<ui5-icon class="sapFCardHeaderIcon" src="{{ctr.avatar}}"></ui5-icon>
</span>
{{/if}}

<div class="sapFCardHeaderText">
{{#if ctr.heading}}
<div class="sapFCardTitle">{{ctr.heading}}</div>
Expand Down
24 changes: 18 additions & 6 deletions packages/main/src/Card.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import WebComponent from "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/
import URI from "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/types/URI";
import Core from "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/Core";
import ShadowDOM from "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/compatibility/ShadowDOM";
import IconPoolProxy from "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/IconPoolProxy";
import CardRenderer from "./build/compiled/CardRenderer.lit";
import Icon from "./Icon";

Expand Down Expand Up @@ -69,11 +70,15 @@ const metadata = {
},

/**
* Defines the icon displayed in the <code>ui5-card</code> header.
* @type {String}
* Defines image source URI or built-in icon source URI.
* </br></br>
* <b>Note:</b>
* SAP-icons font provides numerous options. To find all the available icons, see the
* <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
* @type {URI}
* @public
*/
icon: {
avatar: {
type: URI,
defaultValue: null,
},
Expand All @@ -83,12 +88,12 @@ const metadata = {
/**
* @class
* <h3 class="comment-api-title">Overview</h3>
*
* The <code>ui5-card</code> is a component that represents information in the form of a
* tile with separate header and content areas.
* The content area of a <code>ui5-card</code> can be arbitrary HTML content.
* The header can be used through several properties, such as, <code>heading</code>,
* <code>subtitle</code>,
* <code>status</code> and <code>icon</code>.
* The header can be used through several properties, such as:
* <code>heading</code>, <code>subtitle</code>, <code>status</code> and <code>avatar</code>.
*
* <h3>ES6 Module Import</h3>
*
Expand All @@ -115,8 +120,15 @@ class Card extends WebComponent {
}

static calculateTemplateContext(state) {
const hasAvatar = !!state.avatar;
const icon = hasAvatar && IconPoolProxy.isIconURI(state.avatar);
const image = hasAvatar && !icon;

return {
icon,
image,
ctr: state,
renderIcon: state.icon && !state.image,
};
}

Expand Down
6 changes: 5 additions & 1 deletion packages/main/src/themes/base/Card.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,11 @@ ui5-card {
align-items: center;
justify-content: center;

.sapFCardHeaderIcon {
&.sapFCardHeaderImg {
border-radius: 50%;
}

& .sapFCardHeaderIcon {
font-size: 1.5rem;
color: @sapUiTileIconColor;
}
Expand Down
8 changes: 4 additions & 4 deletions packages/main/test/sap/ui/webcomponents/main/pages/Kitchen.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@
<section class="row">
<ui5-card
style="flex-basis:20%;"
icon="sap-icon://employee"
avatar="sap-icon://employee"
heading="Wolly King"
subtitle="Back-end developer"
status="1 of 3">
Expand All @@ -86,7 +86,7 @@
<ui5-card
style="flex-basis:20%;"
heading="Lee, Y.Song"
icon="sap-icon://employee"
avatar="sap-icon://employee"
subtitle="Full-stack developer"
status="2 of 3">
<ui5-list id="myList12" separators="Inner">
Expand All @@ -97,7 +97,7 @@
</ui5-card>
<ui5-card
style="flex-basis:20%;"
icon="sap-icon://employee"
avatar="sap-icon://employee"
heading="Anna P."
subtitle="Visioner">
<ui5-list id="myList13" separators="Inner">
Expand All @@ -108,7 +108,7 @@
</ui5-card>
<ui5-card
style="flex-basis:20%;"
icon="sap-icon://employee"
avatar="sap-icon://employee"
heading="Medved I."
subtitle="Enthusiast"
status="3 of 3">
Expand Down
8 changes: 4 additions & 4 deletions packages/main/test/sap/ui/webcomponents/main/pages/Kitchen.openui5.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@
<section class="row">
<ui5-card
style="flex-basis:20%;"
icon="sap-icon://employee"
avatar="sap-icon://employee"
heading="Wolly King"
subtitle="Back-end developer"
status="1 of 3">
Expand All @@ -97,7 +97,7 @@
<ui5-card
style="flex-basis:20%;"
heading="Lee, Y.Song"
icon="sap-icon://employee"
avatar="sap-icon://employee"
subtitle="Full-stack developer"
status="2 of 3">
<ui5-list id="myList12" separators="Inner">
Expand All @@ -108,7 +108,7 @@
</ui5-card>
<ui5-card
style="flex-basis:20%;"
icon="sap-icon://employee"
avatar="sap-icon://employee"
heading="Anna P."
subtitle="Visioner">
<ui5-list id="myList13" separators="Inner">
Expand All @@ -119,7 +119,7 @@
</ui5-card>
<ui5-card
style="flex-basis:20%;"
icon="sap-icon://employee"
avatar="sap-icon://employee"
heading="Medved I."
subtitle="Enthusiast"
status="3 of 3">
Expand Down
42 changes: 15 additions & 27 deletions packages/main/test/sap/ui/webcomponents/main/samples/Card.sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -303,9 +303,7 @@ <h3>Card with Table</h3>
<section>
<h3>Card with Timeline</h3>
<div class="snippet card-container">
<ui5-card
heading="Upcoming Activities"
subtitle="For Today">
<ui5-card heading="Upcoming Activities" subtitle="For Today">
<ui5-timeline>
<ui5-timeline-item id="test-item" title-text="called" timestamp="1487583000000" icon="sap-icon://phone" item-name="John Smith" item-name-clickable></ui5-timeline-item>
<ui5-timeline-item title-text="Weekly Sync - CP Design" timestamp="1517349600000" icon="sap-icon://calendar">
Expand Down Expand Up @@ -340,14 +338,13 @@ <h3>Card with Timeline</h3>
<section>
<h3>Card with entirely custom content</h3>
<div class="snippet card-container">
<ui5-card icon="sap-icon://employee" heading="Dona Maria Moore" subtitle="Senior Sales Executive" class="small">
<ui5-card avatar="../../../../../../www/samples/images/woman_avatar_1.png" heading="Dona Maria Moore" subtitle="Senior Sales Executive" class="small">
<div class="content content-padding">
<ui5-title level="H5" style="padding-bottom: 1rem;">Contact details</ui5-title>

<div class="content-group">
<ui5-label>Company Name</ui5-label>
<ui5-title level="H6">Company A</ui5-title>

</div>

<div class="content-group">
Expand Down Expand Up @@ -377,14 +374,13 @@ <h3>Card with entirely custom content</h3>
}
</style>

<ui5-card icon="sap-icon://employee" heading="Dona Maria Moore" subtitle="Senior Sales Executive" class="small">
<ui5-card avatar="../../../../../../www/samples/images/woman_avatar_1.png" heading="Dona Maria Moore" subtitle="Senior Sales Executive" class="small">
<div class="content content-padding">
<ui5-title level="H5" style="padding-bottom: 1rem;">Contact details</ui5-title>

<div class="content-group">
<ui5-label>Company Name</ui5-label>
<ui5-title level="H6">Company A</ui5-title>

</div>
<div class="content-group">
<ui5-label>Address</ui5-label>
Expand All @@ -401,35 +397,27 @@ <h3>Card with entirely custom content</h3>
</section>

<section>
<h3>Basic Cards</h3>
<h3>Basic Card</h3>

<div class="snippet card-container">
<ui5-card icon="sap-icon://employee" heading="Anna P." subtitle="Visioner" class="small">
<ui5-card avatar="../../../../../../www/samples/images/man_avatar_1.png" heading="David Willams" subtitle="Sales Manager" class="small">
<ui5-list separators="Inner" class="content-padding">
<ui5-li icon="sap-icon://camera" icon-end>Photoshop</ui5-li>
<ui5-li icon="sap-icon://camera" icon-end>CorelDRAW</ui5-li>
<ui5-li icon="sap-icon://camera" icon-end>GIMP</ui5-li>
<ui5-li icon="sap-icon://competitor" icon-end>Personal Development</ui5-li>
<ui5-li icon="sap-icon://wallet" icon-end>Finance</ui5-li>
<ui5-li icon="sap-icon://collaborate" icon-end>Communications Skills</ui5-li>
</ui5-list>
</ui5-card>

<ui5-card icon="sap-icon://employee" heading="Medved I." subtitle="Enthusiast" class="small">
<ui5-list separators="Inner" class="content-padding">
<ui5-li icon="sap-icon://syntax">JavaScript</ui5-li>
<ui5-li icon="sap-icon://syntax">React</ui5-li>
<ui5-li icon="sap-icon://syntax">Algorithms</ui5-li>
</ui5-list>
</ui5-card>
</div>

<pre class="prettyprint lang-html">
<xmp>
<ui5-card heading="Medved I." icon="sap-icon://employee" subtitle="Enthusiast">
<ui5-list separators="Inner" class="content-padding">
<ui5-li icon="sap-icon://syntax">JavaScript</ui5-li>
<ui5-li icon="sap-icon://syntax">React</ui5-li>
<ui5-li icon="sap-icon://syntax">Algorithms</ui5-li>
</ui5-list>
</ui5-card>
<ui5-card avatar="../../../../../../www/samples/images/man_avatar_1.png" heading="David Willams" subtitle="Sales Manager" class="small">
<ui5-list separators="Inner" class="content-padding">
<ui5-li icon="sap-icon://competitor" icon-end>Personal Development</ui5-li>
<ui5-li icon="sap-icon://wallet" icon-end>Finance</ui5-li>
<ui5-li icon="sap-icon://collaborate" icon-end>Communications Skills</ui5-li>
</ui5-list>
</ui5-card>
</xmp>
</pre>
</section>
Expand Down
0 ...components/main/pages/img/Donna_Moore.jpg → .../playground/webapp/images/Donna_Moore.jpg
View file
Open in desktop
File renamed without changes