Adding a message when there are no items returned. Using MS office look & feel
This commit is contained in:
parent
f2193b10a2
commit
d50b0c915f
|
@ -36,4 +36,32 @@
|
|||
|
||||
.DocumentCardActionsPadding{
|
||||
padding: 4px 4px;
|
||||
}
|
||||
|
||||
// No Items message
|
||||
.emptyStateControl{
|
||||
position: relative;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
padding-bottom: 20px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
.emptyStateImage{
|
||||
margin-top: 56px;
|
||||
}
|
||||
.emptyStateTextWrapper{
|
||||
margin-top: 32px;
|
||||
.title{
|
||||
color: #424242;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
.subtitle{
|
||||
color: #424242;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -448,6 +448,18 @@ export default class FollowDocumentWebPart extends React.Component<IFollowDocume
|
|||
onRenderGridItem={(item, finalSize: ISize, isCompact: boolean) => this._onRenderGridItem(item, finalSize, isCompact)}
|
||||
/>
|
||||
</div>
|
||||
{/* No Items message */}
|
||||
{!this.state.visible && !this.state.ItemsSearch &&
|
||||
<div className={styles.emptyStateControl}>
|
||||
<div className={styles.emptyStateImage}>
|
||||
<img src="https://res.cdn.office.net/officehub/officestartresources/favorites_light_and_dark.svg" alt="Empty state icon" />
|
||||
</div>
|
||||
<div className={styles.emptyStateTextWrapper}>
|
||||
<div className={styles.title} role="status" aria-live="polite">No favorites yet</div>
|
||||
<div className={styles.subtitle} role="status" aria-live="polite">See something you love? Favorite it and we'll put it here.</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue