Skip to content

Commit

Permalink
CSS Modules: Document Card (#1149)
Browse files Browse the repository at this point in the history 
* DetailsList: Fixing scroll utilities to handle body scroll better. (#384)

* Fixing scroll utilities to handle body scroll better.

* Updating appstate to support navigating directly to example pages. http://localhost:4321/index.html#/tests/detailslistbasicexample

* If header is not displayed, we nullref pressing key up.

* Updating to measure window correctly.

* Fixing keys error.

* Moving getClientRect to utility for window-sensitive scenarios.

* Updating marquee selection and autoscroll to work with body scroll.

* lint fixes.

* Fix FacePile example onclick for RK.  Remove stray commas from Layer/Button pages (#383)

* Fix parameter order for FacePile example props

* Fix FacePile example onClick handler.  Remove 2 stray commas from Button and Layer component pages

* Implement: Contextualmenu gets window from target element. (#387)

* added in the ability for contextualmenu projection.

* fixed lint problems

* v0.56.2

* Update ListPage.tsx

* CSSify DocumentCard

* Change classnames in document card and fix visual regressions

* Move DocumentCard styles into one root scss file and move style from global to example page

* Update document card to not rely on persona

* Moved details styles into global class in document card

* isFileList to previewIsFilesList
  • Loading branch information
@micahgodbolt
micahgodbolt authored Feb 28, 2017
1 parent d7e8998 commit 39f5a64
Show file tree
Hide file tree
Showing 13 changed files with 306 additions and 311 deletions.
4 changes: 2 additions & 2 deletions apps/fabric-examples/src/pages/DocumentCardPage/examples/DocumentCard.Compact.Example.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export class DocumentCardCompactExample extends React.Component<any, any> {
<div>
<DocumentCard type={ DocumentCardType.compact } onClickHref='http://bing.com' accentColor='#ce4b1f'>
<DocumentCardPreview { ...previewProps } />
<div className='ms-DocumentCard-details'>
<div className="ms-DocumentCard-details">
<DocumentCardTitle
title='4 files were uploaded'
shouldTruncate={ true } />
Expand All @@ -65,7 +65,7 @@ export class DocumentCardCompactExample extends React.Component<any, any> {
<p />
<DocumentCard type={ DocumentCardType.compact } onClickHref='http://bing.com' accentColor='#ce4b1f'>
<DocumentCardPreview previewImages={ [previewProps.previewImages[0]] } />
<div className='ms-DocumentCard-details'>
<div className="ms-DocumentCard-details">
<DocumentCardTitle
title='Revenue stream proposal fiscal year 2016 version02.pptx'
shouldTruncate={ true } />
Expand Down
334 changes: 271 additions & 63 deletions packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss
View file
Original file line number Diff line number Diff line change
@@ -1,80 +1,288 @@
@import '../../common/common';

:global {
.ms-DocumentCard {
-webkit-font-smoothing: antialiased;
background-color: $ms-color-white;
border: 1px solid $ms-color-neutralLight;
box-sizing: border-box;
max-width: 320px;
min-width: 206px;
user-select: none;
position: relative;
}
.root {
-webkit-font-smoothing: antialiased;
background-color: $ms-color-white;
border: 1px solid $ms-color-neutralLight;
box-sizing: border-box;
max-width: 320px;
min-width: 206px;
user-select: none;
position: relative;
}

.ms-DocumentCard--actionable:hover {
cursor: pointer;
border-color: $ms-color-neutralTertiaryAlt;

// Place a heavier border within the document card
&:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid $ms-color-neutralTertiaryAlt;
pointer-events: none;
}
}
.rootIsActionable:hover {
cursor: pointer;
border-color: $ms-color-neutralTertiaryAlt;

// When a DocumentCardTitle follows a DocumentCardLocation, we want to reduce the padding
.ms-DocumentCardLocation + .ms-DocumentCardTitle {
padding-top: 4px;
// Place a heavier border within the document card
&:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid $ms-color-neutralTertiaryAlt;
pointer-events: none;
}
}

// Modifier: Compact layout
.ms-DocumentCard--compact {
border-bottom: 2px solid $ms-color-neutralTertiary; // Default border color
// When a DocumentCardTitle follows a DocumentCardLocation, we want to reduce the padding
.location + .title {
padding-top: 4px;
}

// Modifier: Compact layout
.rootIsCompact {
border-bottom: 2px solid $ms-color-neutralTertiary; // Default border color
display: flex;
max-width: 480px;
height: 109px;
:global(.ms-DocumentCard-details) {
display: flex;
max-width: 480px;
height: 109px;

// Remove the usual accent color from the preview
.ms-DocumentCardPreview {
border-bottom: none;
max-height: 106px;
max-width: 144px;

.ms-DocumentCardPreview-icon {
.ms-Image-image {
max-height: 32px;
max-width: 32px;
}
flex-direction: column;
flex: 1;
justify-content: space-between;
}
// Remove the usual accent color from the preview
.preview {
border-bottom: none;
max-height: 106px;
max-width: 144px;

.icon {
:global(.ms-Image-image) {
max-height: 32px;
max-width: 32px;
}
}
}

.ms-DocumentCardPreview {
@include border-right(1px, solid, $ms-color-neutralLight);
}
.preview {
@include border-right(1px, solid, $ms-color-neutralLight);
}

.title {
padding: 12px 16px 8px 16px;
@include ms-font-m;
line-height: 16px;
}

.activity {
padding-bottom: 12px;
}
}

// Expand the details area to fill the remaining width
.ms-DocumentCard-details {
display: flex;
flex-direction: column;
flex: 1;
justify-content: space-between;
}

.ms-DocumentCardTitle {
padding: 12px 16px 8px 16px;
@include ms-font-m;
line-height: 16px;
/** Actions **/
$ms-DocumentCardActions-actionSize: 34px;
$ms-DocumentCardActions-horizontalPadding: 12px;
$ms-DocumentCardActions-verticalPadding: 4px;

.actions {
height: $ms-DocumentCardActions-actionSize;
padding: $ms-DocumentCardActions-verticalPadding $ms-DocumentCardActions-horizontalPadding;
position: relative;
}

.action {
@include float(left);
@include margin-right(4px);
color: $ms-color-neutralSecondary;
cursor: pointer;

:global(.ms-Button) {
font-size: 16px;
height: $ms-DocumentCardActions-actionSize;
width: $ms-DocumentCardActions-actionSize;
}

:global(.ms-Button:hover) {
:global(.ms-Button-icon) {
color: #1174c3;
cursor: pointer;
}
}
}

.views {
@include text-align(right);
line-height: $ms-DocumentCardActions-actionSize;

:global(.ms-Icon) {
@include margin-right(4px);
font-size: $ms-icon-size-m;
vertical-align: top;
}
}


/** Activity **/
$ms-DocumentCardActivity-horizontalPadding: 16px;
$ms-DocumentCardActivity-imageSize: 25px;
$ms-DocumentCardActivity-verticalPadding: 8px;
$ms-DocumentCardActivity-personaTextGutter: 8px;

.activity {
padding: $ms-DocumentCardActivity-verticalPadding $ms-DocumentCardActivity-horizontalPadding;
position: relative;
}

.activityIsMultiplePeople {
.avatar:nth-of-type(2) {
@include margin-left(-16px);
}

.activityDetails {
@include left($ms-DocumentCardActivity-horizontalPadding + ($ms-DocumentCardActivity-imageSize * 1.5) + $ms-DocumentCardActivity-personaTextGutter);
}
}

.avatars {
@include margin-left(-2px); // Avatars sit outside of the usual padding for visual balance
}

.avatar {
border: 2px solid #fafafa; // Match the background of the card
border-radius: 50%;
height: $ms-DocumentCardActivity-imageSize;
width: $ms-DocumentCardActivity-imageSize;
display: inline-block;
position: relative;
overflow: hidden;
text-align: center;

:global(.ms-Persona-initials) {
height: $ms-DocumentCardActivity-imageSize;
line-height: $ms-DocumentCardActivity-imageSize;
font-size: $ms-font-size-s;
}

img {
width: 100%;
height: 100%;
border-radius: 50%;
}
}

.avatarInitials {
background: $ms-color-themePrimary;
color: $ms-color-white;
font-weight: 100;
}

.ms-DocumentCardActivity{
padding-bottom: 12px;
.activityDetails {
@include left($ms-DocumentCardActivity-horizontalPadding + $ms-DocumentCardActivity-imageSize + $ms-DocumentCardActivity-personaTextGutter);
height: $ms-DocumentCardActivity-imageSize;
position: absolute;
top: $ms-DocumentCardActivity-verticalPadding;
width: calc(100% - #{$ms-DocumentCardActivity-horizontalPadding + $ms-DocumentCardActivity-imageSize + $ms-DocumentCardActivity-personaTextGutter + $ms-DocumentCardActivity-horizontalPadding});
}

.name,
.activityActivity {
display: block;
@include ms-font-s;
color: $ms-color-neutralSecondaryAlt;
line-height: 15px;
height: 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.name {
color: $ms-color-neutralPrimary;
@include ms-fontWeight-semibold;
}

/** Location **/
.location {
@include ms-font-s;
color: $ms-color-neutralPrimary;
display: block;
padding: 8px 16px;
position: relative;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

&:hover {
color: $ms-color-themePrimary;
cursor: pointer;
}
}


/** Preview **/
.preview {
border-bottom: 2px solid $ms-color-neutralTertiary; // Default border color
position: relative;
background-color: $ms-color-neutralLighterAlt;
overflow: hidden;

&.previewIsFileList {
background-color: $ms-color-white;
}
}

.icon {
@include left(10px);
bottom: 10px;
position: absolute;
}

.fileList {
@include padding(16px, 16px, 0, 16px);
list-style-type: none;
margin: 0;

li {
height: 16px;
line-height: 16px; // Vertically center the text
margin-bottom: 8px;
overflow: hidden;
@include padding-left(24px); // Make room for icon
position: relative;
text-overflow: ellipsis;
white-space: nowrap;
}

a {
font-size: $ms-font-size-s;
text-decoration: none;
color: $ms-color-neutralDark;

&:hover {
color: $ms-color-themePrimary;
}
}
}

.fileListIcon {
@include left(0);
position: absolute;
top: 0;
}

.fileListMore {
@include padding(0px, 16px, 8px, 16px);
display: block;
font-size: $ms-font-size-s;
}


/** Title **/
$DocumentCard-title-lineHeight: 21px;
.title {
padding: 8px 16px;
display: block;
@include ms-font-l;
color: $ms-color-neutralPrimary;
height: 38px; // Two lines of text, making sure the third line is hidden
line-height: $DocumentCard-title-lineHeight;
overflow: hidden;
word-wrap: break-word;
}
7 changes: 4 additions & 3 deletions packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {
autobind,
css
} from '../../Utilities';
import './DocumentCard.scss';
import styles from './DocumentCard.scss';

export class DocumentCard extends React.Component<IDocumentCardProps, any> {
public static defaultProps: IDocumentCardProps = {
Expand All @@ -28,9 +28,10 @@ export class DocumentCard extends React.Component<IDocumentCardProps, any> {
className={
css(
'ms-DocumentCard',
styles.root,
{
'ms-DocumentCard--actionable': actionable,
'ms-DocumentCard--compact': type === DocumentCardType.compact ? true : false
['ms-DocumentCard--actionable ' + styles.rootIsActionable]: actionable,
['ms-DocumentCard--compact ' + styles.rootIsCompact]: type === DocumentCardType.compact ? true : false
},
className
)
Expand Down
Loading

0 comments on commit 39f5a64

Please sign in to comment.