From 4cf3de590c3999ee0dafbd6aa52f0607c210a401 Mon Sep 17 00:00:00 2001 From: David Zearing Date: Thu, 6 Oct 2016 12:53:15 -0700 Subject: [PATCH 01/11] 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. --- src/components/DetailsList/DetailsList.tsx | 4 +-- .../MarqueeSelection/MarqueeSelection.tsx | 33 +++++++++---------- src/demo/app.tsx | 26 ++++++++++----- src/demo/components/App/App.scss | 5 ++- src/demo/components/App/AppState.ts | 12 +++++++ src/utilities/AutoScroll/AutoScroll.ts | 11 +++++-- src/utilities/decorators/withViewport.tsx | 5 +-- src/utilities/dom.ts | 24 ++++++++++++++ src/utilities/scroll.ts | 6 ++-- 9 files changed, 87 insertions(+), 39 deletions(-) diff --git a/src/components/DetailsList/DetailsList.tsx b/src/components/DetailsList/DetailsList.tsx index 85bddeb77c4ef..7923e0dcc12b0 100644 --- a/src/components/DetailsList/DetailsList.tsx +++ b/src/components/DetailsList/DetailsList.tsx @@ -368,7 +368,7 @@ export class DetailsList extends React.Component - - { _getAppRoutes() } - - , + + + { _getRoutes() } + + , rootElement); } -function _getAppRoutes() { - let routes = []; +function _getRoutes() { + let routes = AppState.testPages.map(page => ); + let appRoutes = []; AppState.examplePages.forEach(group => { group.links .filter(link => link.hasOwnProperty('component')) .forEach((link, linkIndex) => { let { component } = link; - routes.push(); + appRoutes.push(); }); }); // Default route. - routes.push( + appRoutes.push( ); + routes.push( + + { appRoutes } + + ); + return routes; } diff --git a/src/demo/components/App/App.scss b/src/demo/components/App/App.scss index 2681f4fc7a832..7255e09331cc0 100644 --- a/src/demo/components/App/App.scss +++ b/src/demo/components/App/App.scss @@ -4,11 +4,10 @@ body { padding: 0; margin: 0; position: absolute; - overflow: hidden; left: 0; top: 0; - width: 100%; - height: 100%; + min-width: 100%; + min-height: 100%; } .ms-App-header { diff --git a/src/demo/components/App/AppState.ts b/src/demo/components/App/AppState.ts index ae43833912489..5273abbaf5d5f 100644 --- a/src/demo/components/App/AppState.ts +++ b/src/demo/components/App/AppState.ts @@ -38,6 +38,7 @@ import { TeachingBubblePage } from '../../pages/TeachingBubblePage/TeachingBubbl import { TextFieldPage } from '../../pages/TextFieldPage/TextFieldPage'; import { TogglePage } from '../../pages/TogglePage/TogglePage'; import { ThemePage } from '../../pages/ThemePage/ThemePage'; +import { DetailsListBasicExample } from '../../pages/DetailsListPage/examples/DetailsList.Basic.Example'; export enum ExampleStatus { placeholder, @@ -48,6 +49,7 @@ export enum ExampleStatus { export interface IAppState { appTitle: string; + testPages: any[]; examplePages: INavLinkGroup[]; headerLinks: INavLink[]; } @@ -55,6 +57,15 @@ export interface IAppState { export const AppState: IAppState = { appTitle: 'Fabric - React', + testPages: [ + { + component: DetailsListBasicExample, + key: 'DetailsListBasicExample', + name: 'DetailsListBasicExample', + url: '#/tests/detailslistbasicexample' + } + ], + examplePages: [ { links: [ @@ -235,6 +246,7 @@ export const AppState: IAppState = { }, { component: TeachingBubblePage, + key: 'TeachingBubble', name: 'TeachingBubble', status: ExampleStatus.beta, url: '#/examples/teachingbubble' diff --git a/src/utilities/AutoScroll/AutoScroll.ts b/src/utilities/AutoScroll/AutoScroll.ts index a65b71dd3d920..e96c768b90e66 100644 --- a/src/utilities/AutoScroll/AutoScroll.ts +++ b/src/utilities/AutoScroll/AutoScroll.ts @@ -1,5 +1,7 @@ import { EventGroup } from '../eventGroup/EventGroup'; import { findScrollableParent } from '../scroll'; +import { getRect } from '../dom'; +import { IRectangle } from '../../common/IRectangle'; const SCROLL_ITERATION_DELAY = 16; const SCROLL_GUTTER_HEIGHT = 100; @@ -14,15 +16,20 @@ const MAX_SCROLL_VELOCITY = 15; export class AutoScroll { private _events: EventGroup; private _scrollableParent: HTMLElement; - private _scrollRect: ClientRect; + private _scrollRect: IRectangle; private _scrollVelocity: number; private _timeoutId: number; constructor(element: HTMLElement) { this._events = new EventGroup(this); this._scrollableParent = findScrollableParent(element); + this._incrementScroll = this._incrementScroll.bind(this); - this._scrollRect = this._scrollableParent.getBoundingClientRect(); + this._scrollRect = getRect(this._scrollableParent); + + if (this._scrollableParent === window as any) { + this._scrollableParent = document.body; + } if (this._scrollableParent) { this._events.on(window, 'mousemove', this._onMouseMove, true); diff --git a/src/utilities/decorators/withViewport.tsx b/src/utilities/decorators/withViewport.tsx index b01c37f26d73c..ecbdbc18cb780 100644 --- a/src/utilities/decorators/withViewport.tsx +++ b/src/utilities/decorators/withViewport.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { BaseDecorator } from './BaseDecorator'; import { findScrollableParent } from '../../utilities/scroll'; +import { getRect } from '../../utilities/dom'; export interface IViewport { width: number; @@ -73,8 +74,8 @@ export function withViewport

(ComposedComp let { viewport } = this.state; let viewportElement = (this.refs as any).root; let scrollElement = findScrollableParent(viewportElement); - let clientRect = viewportElement.getBoundingClientRect(); - let scrollRect = scrollElement.getBoundingClientRect(); + let scrollRect = getRect(scrollElement); + let clientRect = getRect(viewportElement); let updateComponent = () => { if (withForceUpdate && this._composedComponentInstance) { this._composedComponentInstance.forceUpdate(); diff --git a/src/utilities/dom.ts b/src/utilities/dom.ts index df9616abd4d8c..a5ea2fa32520e 100644 --- a/src/utilities/dom.ts +++ b/src/utilities/dom.ts @@ -1,3 +1,5 @@ +import { IRectangle } from '../common/IRectangle'; + /** * Attached interface for elements which support virtual references. * Used internally by the virtual hierarchy methods. @@ -117,6 +119,28 @@ export function elementContains(parent: HTMLElement, child: HTMLElement, allowVi return isContained; } +/** Helper to get bounding client rect, works with window. */ +export function getRect(element: HTMLElement | Window): IRectangle { + let rect: IRectangle; + + if (element) { + if (element === window) { + rect = { + left: 0, + top: 0, + width: window.innerWidth, + height: window.innerHeight, + right: window.innerWidth, + bottom: window.innerHeight + }; + } else if ((element as HTMLElement).getBoundingClientRect) { + rect = (element as HTMLElement).getBoundingClientRect(); + } + } + + return rect; +} + /** * Determines whether or not an element has the virtual hierarchy extension. * diff --git a/src/utilities/scroll.ts b/src/utilities/scroll.ts index a00543200cf30..c1a1511e28372 100644 --- a/src/utilities/scroll.ts +++ b/src/utilities/scroll.ts @@ -53,9 +53,9 @@ export function findScrollableParent(startingElement: HTMLElement): HTMLElement el = el.parentElement; } - // Fall back to body scroll. - if (!el) { - el = document.body; + // Fall back to window scroll. + if (!el || el === document.body) { + el = window as any; } return el; From 5e66f4d0198c2e9445a3e569976e9e207479c762 Mon Sep 17 00:00:00 2001 From: Eddie Liu Date: Thu, 6 Oct 2016 12:56:17 -0700 Subject: [PATCH 02/11] 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 --- src/demo/pages/ButtonPage/ButtonPage.tsx | 2 +- src/demo/pages/Facepile/examples/Facepile.Basic.Example.tsx | 2 +- src/demo/pages/LayerPage/LayerPage.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/demo/pages/ButtonPage/ButtonPage.tsx b/src/demo/pages/ButtonPage/ButtonPage.tsx index f90f01a62ebbe..6c898e0354a9d 100644 --- a/src/demo/pages/ButtonPage/ButtonPage.tsx +++ b/src/demo/pages/ButtonPage/ButtonPage.tsx @@ -77,7 +77,7 @@ export class ButtonPage extends React.Component - , +

Besides the above properties, the Button component accepts all properties that the React button and a components accept.

} diff --git a/src/demo/pages/Facepile/examples/Facepile.Basic.Example.tsx b/src/demo/pages/Facepile/examples/Facepile.Basic.Example.tsx index f1a53fef6fb18..0ec205fad324d 100644 --- a/src/demo/pages/Facepile/examples/Facepile.Basic.Example.tsx +++ b/src/demo/pages/Facepile/examples/Facepile.Basic.Example.tsx @@ -22,7 +22,7 @@ const facepileProps: IFacepileProps = { imageInitials: 'RK', initialsColor: PersonaInitialsColor.purple, data: 'Emp1234', - onClick: (persona: IFacepilePersona, ev: React.MouseEvent) => + onClick: (ev: React.MouseEvent, persona: IFacepilePersona) => alert('You clicked on ' + persona.personaName + '. Extra data: ' + persona.data) } ] diff --git a/src/demo/pages/LayerPage/LayerPage.tsx b/src/demo/pages/LayerPage/LayerPage.tsx index 3cc926173b7a8..1dcdf05964899 100644 --- a/src/demo/pages/LayerPage/LayerPage.tsx +++ b/src/demo/pages/LayerPage/LayerPage.tsx @@ -32,7 +32,7 @@ export class LayerPage extends React.Component {
- , + From 43cc789123b18f12888e2334bf855ccf7b37ce3b Mon Sep 17 00:00:00 2001 From: joschect Date: Thu, 6 Oct 2016 12:56:31 -0700 Subject: [PATCH 03/11] Implement: Contextualmenu gets window from target element. (#387) * added in the ability for contextualmenu projection. * fixed lint problems --- src/components/Callout/CalloutContent.tsx | 23 ++++++++++++------- .../ContextualMenu/ContextualMenu.tsx | 9 +++++++- 2 files changed, 23 insertions(+), 9 deletions(-) diff --git a/src/components/Callout/CalloutContent.tsx b/src/components/Callout/CalloutContent.tsx index dccf94daf57a5..14edd1045b7f6 100644 --- a/src/components/Callout/CalloutContent.tsx +++ b/src/components/Callout/CalloutContent.tsx @@ -37,6 +37,7 @@ export class CalloutContent extends BaseComponent private _didSetInitialFocus: boolean; private _hostElement: HTMLDivElement; private _calloutElement: HTMLDivElement; + private _targetWindow: Window; constructor(props: ICalloutProps) { super(props); @@ -47,6 +48,12 @@ export class CalloutContent extends BaseComponent slideDirectionalClassName: null, calloutElementRect: null }; + // This is used to allow the Callout to appear on a window other than the one the javascript is running in. + if (props.targetElement && props.targetElement.ownerDocument && props.targetElement.ownerDocument.defaultView) { + this._targetWindow = props.targetElement.ownerDocument.defaultView; + } else { + this._targetWindow = window; + } } public componentDidUpdate() { @@ -90,11 +97,11 @@ export class CalloutContent extends BaseComponent } } - private _dismissOnLostFocus(ev: Event) { + protected _dismissOnLostFocus(ev: Event) { let { targetElement } = this.props; let target = ev.target as HTMLElement; - if (ev.target !== window && + if (ev.target !== this._targetWindow && this._hostElement && !elementContains(this._hostElement, target) && (!targetElement || !elementContains(targetElement, target))) { @@ -103,7 +110,7 @@ export class CalloutContent extends BaseComponent } @autobind - private _setInitialFocus() { + protected _setInitialFocus() { if (this.props.setInitialFocus && !this._didSetInitialFocus && this.state.positions) { this._didSetInitialFocus = true; focusFirstChild(this._calloutElement); @@ -111,13 +118,13 @@ export class CalloutContent extends BaseComponent } @autobind - private _onComponentDidMount() { + protected _onComponentDidMount() { // This is added so the callout will dismiss when the window is scrolled // but not when something inside the callout is scrolled. - this._events.on(window, 'scroll', this._dismissOnLostFocus, true); - this._events.on(window, 'resize', this.dismiss, true); - this._events.on(window, 'focus', this._dismissOnLostFocus, true); - this._events.on(window, 'click', this._dismissOnLostFocus, true); + this._events.on(this._targetWindow , 'scroll', this._dismissOnLostFocus, true); + this._events.on(this._targetWindow , 'resize', this.dismiss, true); + this._events.on(this._targetWindow , 'focus', this._dismissOnLostFocus, true); + this._events.on(this._targetWindow , 'click', this._dismissOnLostFocus, true); if (this.props.onLayerMounted) { this.props.onLayerMounted(); diff --git a/src/components/ContextualMenu/ContextualMenu.tsx b/src/components/ContextualMenu/ContextualMenu.tsx index 4234c3c4a0e00..eda76475d1256 100644 --- a/src/components/ContextualMenu/ContextualMenu.tsx +++ b/src/components/ContextualMenu/ContextualMenu.tsx @@ -86,6 +86,7 @@ export class ContextualMenu extends React.Component Date: Thu, 6 Oct 2016 13:01:17 -0700 Subject: [PATCH 04/11] v0.56.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index cc1b1065d4301..d324731258954 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "office-ui-fabric-react", - "version": "0.56.1", + "version": "0.56.2", "description": "Reusable React components for building experiences for Office 365.", "main": "lib/index.js", "typings": "lib/index.d.ts", From be7114503b27c0148ba0d16baff9b92cf39dc850 Mon Sep 17 00:00:00 2001 From: David Zearing Date: Thu, 6 Oct 2016 17:09:43 -0700 Subject: [PATCH 05/11] Update ListPage.tsx --- src/demo/pages/ListPage/ListPage.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/demo/pages/ListPage/ListPage.tsx b/src/demo/pages/ListPage/ListPage.tsx index 74b5d374cfe38..4a84bc61a2455 100644 --- a/src/demo/pages/ListPage/ListPage.tsx +++ b/src/demo/pages/ListPage/ListPage.tsx @@ -1,7 +1,4 @@ import * as React from 'react'; -import { - Link -} from '../../../index'; import { ExampleCard, PropertiesTableSet, @@ -59,8 +56,7 @@ export class ListPage extends React.Component { overview={

- List - provides a base component for rendering large sets of items. It is agnostic of layout, the tile component used, and selection management. These concerns can be layered separately. + List provides a base component for rendering large sets of items. It is agnostic of layout, the tile component used, and selection management. These concerns can be layered separately.

Performance is important, and DOM content is expensive. Therefore limit what you render. Unlike a simple for loop that renders all items in a set, a List uses ui virtualization. It only renders a subset of items, and as you scroll around, the subset of rendered content is shifted to what you're looking at. This gives a much better experience for large sets, especially when the per-item components are complex/render intensive/network intensive. From 40b369fc36a2e1bf901909148c7bab0366ad0e12 Mon Sep 17 00:00:00 2001 From: Camille Malonzo Date: Tue, 21 Feb 2017 17:17:44 -0800 Subject: [PATCH 06/11] CSSify DocumentCard --- .../components/DocumentCard/DocumentCard.scss | 124 +++++++++--------- .../components/DocumentCard/DocumentCard.tsx | 7 +- .../DocumentCard/DocumentCardActions.scss | 56 ++++---- .../DocumentCard/DocumentCardActions.tsx | 9 +- .../DocumentCard/DocumentCardActivity.scss | 108 ++++++++------- .../DocumentCard/DocumentCardActivity.tsx | 16 +-- .../DocumentCard/DocumentCardLocation.scss | 28 ++-- .../DocumentCard/DocumentCardLocation.tsx | 6 +- .../DocumentCard/DocumentCardPreview.scss | 92 +++++++------ .../DocumentCard/DocumentCardPreview.tsx | 12 +- .../DocumentCard/DocumentCardTitle.scss | 20 ++- .../DocumentCard/DocumentCardTitle.tsx | 9 +- 12 files changed, 238 insertions(+), 249 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss index 4b97537d07aa9..d5b2044b7ce82 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss @@ -1,80 +1,78 @@ @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; +.isRootActionable: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; - } + // 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; } +} - // When a DocumentCardTitle follows a DocumentCardLocation, we want to reduce the padding - .ms-DocumentCardLocation + .ms-DocumentCardTitle { - padding-top: 4px; - } +// When a DocumentCardTitle follows a DocumentCardLocation, we want to reduce the padding +.location + .title { + padding-top: 4px; +} - // Modifier: Compact layout - .ms-DocumentCard--compact { - border-bottom: 2px solid $ms-color-neutralTertiary; // Default border color - display: flex; - max-width: 480px; - height: 109px; +// Modifier: Compact layout +.isRootCompact { + border-bottom: 2px solid $ms-color-neutralTertiary; // Default border color + 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; + // Remove the usual accent color from the preview + .preview { + border-bottom: none; + max-height: 106px; + max-width: 144px; - .ms-DocumentCardPreview-icon { - .ms-Image-image { - max-height: 32px; - max-width: 32px; - } + .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); + } - // Expand the details area to fill the remaining width - .ms-DocumentCard-details { - display: flex; - flex-direction: column; - flex: 1; - justify-content: space-between; - } + // Expand the details area to fill the remaining width + .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; - } + .title { + padding: 12px 16px 8px 16px; + @include ms-font-m; + line-height: 16px; + } - .ms-DocumentCardActivity{ - padding-bottom: 12px; - } + .activity { + padding-bottom: 12px; } } diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx index f5385e58b6312..afdc9f2480c8a 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx @@ -4,7 +4,7 @@ import { autobind, css } from '../../Utilities'; -import './DocumentCard.scss'; +import styles from './DocumentCard.scss'; export class DocumentCard extends React.Component { public static defaultProps: IDocumentCardProps = { @@ -28,9 +28,10 @@ export class DocumentCard extends React.Component { className={ css( 'ms-DocumentCard', + styles.root, { - 'ms-DocumentCard--actionable': actionable, - 'ms-DocumentCard--compact': type === DocumentCardType.compact ? true : false + ['ms-DocumentCard--actionable ' + styles.isRootActionable]: actionable, + ['ms-DocumentCard--compact ' + styles.isRootCompact]: type === DocumentCardType.compact ? true : false }, className ) diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.scss index 1a244eae47a47..b0a09318c4c73 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.scss +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.scss @@ -4,45 +4,39 @@ $ms-DocumentCardActions-actionSize: 34px; $ms-DocumentCardActions-horizontalPadding: 12px; $ms-DocumentCardActions-verticalPadding: 4px; -:global { - .ms-DocumentCardActions { +.root { + 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; - padding: $ms-DocumentCardActions-verticalPadding $ms-DocumentCardActions-horizontalPadding; - position: relative; + width: $ms-DocumentCardActions-actionSize; } - .ms-DocumentCardActions-actions { - @include left($ms-DocumentCardActions-horizontalPadding); - position: absolute; - top: $ms-DocumentCardActions-verticalPadding; - } - - .ms-DocumentCardActions-action { - @include float(left); - @include margin-right(4px); - color: $ms-color-neutralSecondary; - cursor: pointer; - - .ms-Button { - font-size: 16px; - height: $ms-DocumentCardActions-actionSize; - width: $ms-DocumentCardActions-actionSize; - } - - .ms-Button:hover .ms-Button-icon { + :global(.ms-Button:hover) { + :global(.ms-Button-icon) { color: #1174c3; cursor: pointer; } } +} - .ms-DocumentCardActions-views { - @include text-align(right); - line-height: $ms-DocumentCardActions-actionSize; +.views { + @include text-align(right); + line-height: $ms-DocumentCardActions-actionSize; - .ms-Icon { - @include margin-right(4px); - font-size: $ms-icon-size-m; - vertical-align: top; - } + :global(.ms-Icon) { + @include margin-right(4px); + font-size: $ms-icon-size-m; + vertical-align: top; } } \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.tsx index f087f049a11ec..605706a570ed5 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.tsx @@ -1,26 +1,27 @@ import * as React from 'react'; +import { css } from '../../Utilities'; import { IDocumentCardActionsProps } from './DocumentCard.Props'; import { Button, ButtonType } from '../../Button'; -import './DocumentCardActions.scss'; +import styles from './DocumentCardActions.scss'; export class DocumentCardActions extends React.Component { public render() { let { actions, views } = this.props; return ( -

+
{ actions && actions.map((action, index) => { action.buttonType = ButtonType.icon; return ( -
+
); }) } { views > 0 && ( -
+
{ views }
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.scss index 11043ef6fa4e5..b3d907017d46d 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.scss +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.scss @@ -5,71 +5,69 @@ $ms-DocumentCardActivity-imageSize: 25px; $ms-DocumentCardActivity-verticalPadding: 8px; $ms-DocumentCardActivity-personaTextGutter: 8px; -:global { - .ms-DocumentCardActivity { - padding: $ms-DocumentCardActivity-verticalPadding $ms-DocumentCardActivity-horizontalPadding; - position: relative; - } - - .ms-DocumentCardActivity--multiplePeople { - .ms-DocumentCardActivity-avatar:nth-of-type(2) { - @include margin-left(-16px); - } +.root { + padding: $ms-DocumentCardActivity-verticalPadding $ms-DocumentCardActivity-horizontalPadding; + position: relative; +} - .ms-DocumentCardActivity-details { - @include left($ms-DocumentCardActivity-horizontalPadding + ($ms-DocumentCardActivity-imageSize * 1.5) + $ms-DocumentCardActivity-personaTextGutter); - } +.isRootMultiplePeople { + .avatar:nth-of-type(2) { + @include margin-left(-16px); } - .ms-DocumentCardActivity-avatars { - @include margin-left(-2px); // Avatars sit outside of the usual padding for visual balance + .details { + @include left($ms-DocumentCardActivity-horizontalPadding + ($ms-DocumentCardActivity-imageSize * 1.5) + $ms-DocumentCardActivity-personaTextGutter); } +} - .ms-DocumentCardActivity-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; - - .ms-Persona-initials { - height: $ms-DocumentCardActivity-imageSize; - line-height: $ms-DocumentCardActivity-imageSize; - font-size: $ms-font-size-s; - } +.avatars { + @include margin-left(-2px); // Avatars sit outside of the usual padding for visual balance +} - img { - width: 100%; - height: 100%; - border-radius: 50%; - } - } +.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; - .ms-DocumentCardActivity-details { - @include left($ms-DocumentCardActivity-horizontalPadding + $ms-DocumentCardActivity-imageSize + $ms-DocumentCardActivity-personaTextGutter); + :global(.ms-Persona-initials) { 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}); + line-height: $ms-DocumentCardActivity-imageSize; + font-size: $ms-font-size-s; } - .ms-DocumentCardActivity-name, - .ms-DocumentCardActivity-activity { - display: block; - @include ms-font-s; - color: $ms-color-neutralSecondaryAlt; - line-height: 15px; - height: 15px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + img { + width: 100%; + height: 100%; + border-radius: 50%; } +} - .ms-DocumentCardActivity-name { - color: $ms-color-neutralPrimary; - @include ms-fontWeight-semibold; - } +.details { + @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, +.activity { + 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; } diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx index a5de70b2195a3..867adcb323a94 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx @@ -6,7 +6,7 @@ import { PERSONA_INITIALS_COLOR, PersonaInitialsColor } from '../../Persona'; -import './DocumentCardActivity.scss'; +import styles from './DocumentCardActivity.scss'; export class DocumentCardActivity extends React.Component { public render() { @@ -14,13 +14,13 @@ export class DocumentCardActivity extends React.Component 0 && -
1 +
1 }) }> { this._renderAvatars(people) } -
- { this._getNameString(people) } - { activity } +
+ { this._getNameString(people) } + { activity }
); @@ -28,7 +28,7 @@ export class DocumentCardActivity extends React.Component { return ( -
+
{ people.length > 1 ? this._renderAvatar(people[1]) : null } { this._renderAvatar(people[0]) }
@@ -39,7 +39,7 @@ export class DocumentCardActivity extends React.Component +
{ person.initials && (
{ person.initials } diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.scss index 9b5b441fa8c00..11bfa896faa94 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.scss +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.scss @@ -1,20 +1,18 @@ @import '../../common/common'; -:global { - .ms-DocumentCardLocation { - @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; +.root { + @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; - } + &:hover { + color: $ms-color-themePrimary; + cursor: pointer; } } \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.tsx index ebbc2e92c8e5f..53d3f84bf5490 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.tsx @@ -1,13 +1,15 @@ import * as React from 'react'; +import { css } from '../../Utilities'; import { IDocumentCardLocationProps } from './DocumentCard.Props'; -import './DocumentCardLocation.scss'; +import styles from './DocumentCardLocation.scss'; export class DocumentCardLocation extends React.Component { public render() { let { location, locationHref, ariaLabel, onClick } = this.props; return ( - { location } + { location } ); } } diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.scss index 51c1c3a14ee97..eb938587d8c24 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.scss +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.scss @@ -1,59 +1,57 @@ @import '../../common/common'; -:global { - .ms-DocumentCardPreview { - border-bottom: 2px solid $ms-color-neutralTertiary; // Default border color - position: relative; - background-color: $ms-color-neutralLighterAlt; - overflow: hidden; - - &.is-fileList { - background-color: $ms-color-white; - } +.root { + border-bottom: 2px solid $ms-color-neutralTertiary; // Default border color + position: relative; + background-color: $ms-color-neutralLighterAlt; + overflow: hidden; + + &.isFileList { + background-color: $ms-color-white; } +} - .ms-DocumentCardPreview-icon { - @include left(10px); - bottom: 10px; - position: absolute; - } +.icon { + @include left(10px); + bottom: 10px; + position: absolute; +} - .ms-DocumentCardPreview-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; - } +.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; + a { + font-size: $ms-font-size-s; + text-decoration: none; + color: $ms-color-neutralDark; - &:hover { - color: $ms-color-themePrimary; - } + &:hover { + color: $ms-color-themePrimary; } } +} - .ms-DocumentCardPreview-fileListIcon { - @include left(0); - position: absolute; - top: 0; - } +.fileListIcon { + @include left(0); + position: absolute; + top: 0; +} - .ms-DocumentCardPreview-fileListMore { - @include padding(0px, 16px, 8px, 16px); - display: block; - font-size: $ms-font-size-s; - } +.fileListMore { + @include padding(0px, 16px, 8px, 16px); + display: block; + font-size: $ms-font-size-s; } diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx index e03fd5f75a493..408a5c7799d18 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx @@ -5,7 +5,7 @@ import { autobind, css } from '../../Utilities'; -import './DocumentCardPreview.scss'; +import styles from './DocumentCardPreview.scss'; const LIST_ITEM_COUNT = 3; @@ -32,7 +32,7 @@ export class DocumentCardPreview extends React.Component +
{ preview }
); @@ -52,7 +52,7 @@ export class DocumentCardPreview extends React.Component; + icon = ; } return ( @@ -80,7 +80,7 @@ export class DocumentCardPreview extends React.Component (
  • -
      +
        { fileListItems }
      { overflowText && - { overflowText } + { overflowText } }
    • ); diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.scss index 526739d77ad3b..db9c946fcd476 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.scss +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.scss @@ -2,15 +2,13 @@ $DocumentCard-title-lineHeight: 21px; -:global { - .ms-DocumentCardTitle { - 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; - } +.root { + 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; } \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx index 65876d671dbdb..3268c028904ad 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx @@ -4,10 +4,11 @@ import * as React from 'react'; import { BaseComponent, - autobind + autobind, + css } from '../../Utilities'; import { IDocumentCardTitleProps } from './DocumentCard.Props'; -import './DocumentCardTitle.scss'; +import styles from './DocumentCardTitle.scss'; export interface IDocumentCardTitleState { truncatedTitleFirstPiece?: string; @@ -69,11 +70,11 @@ export class DocumentCardTitle extends BaseComponent{ truncatedTitleFirstPiece }…{ truncatedTitleSecondPiece }
    +
    { truncatedTitleFirstPiece }…{ truncatedTitleSecondPiece }
    ); } else { documentCardTitle = ( -
    { title }
    +
    { title }
    ); } From 4dcdfcb4f93138914b82e40d918f43fb55ed3257 Mon Sep 17 00:00:00 2001 From: Camille Malonzo Date: Mon, 27 Feb 2017 15:14:29 -0800 Subject: [PATCH 07/11] Change classnames in document card and fix visual regressions --- .../components/DocumentCard/DocumentCard.scss | 16 ++++++++-------- .../src/components/DocumentCard/DocumentCard.tsx | 4 ++-- .../DocumentCard/DocumentCardActivity.scss | 2 +- .../DocumentCard/DocumentCardActivity.tsx | 2 +- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss index d5b2044b7ce82..5489b808c25c4 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss @@ -11,7 +11,7 @@ position: relative; } -.isRootActionable:hover { +.rootIsActionable:hover { cursor: pointer; border-color: $ms-color-neutralTertiaryAlt; @@ -34,19 +34,19 @@ } // Modifier: Compact layout -.isRootCompact { +.rootIsCompact { border-bottom: 2px solid $ms-color-neutralTertiary; // Default border color display: flex; max-width: 480px; height: 109px; // Remove the usual accent color from the preview - .preview { + :global(.ms-DocumentCardPreview) { border-bottom: none; max-height: 106px; max-width: 144px; - .icon { + :global(.ms-DocumentCardPreview-icon) { :global(.ms-Image-image) { max-height: 32px; max-width: 32px; @@ -54,25 +54,25 @@ } } - .preview { + :global(.ms-DocumentCardPreview) { @include border-right(1px, solid, $ms-color-neutralLight); } // Expand the details area to fill the remaining width - .details { + :global(.ms-DocumentCard-details) { display: flex; flex-direction: column; flex: 1; justify-content: space-between; } - .title { + :global(.ms-DocumentCardTitle) { padding: 12px 16px 8px 16px; @include ms-font-m; line-height: 16px; } - .activity { + :global(.ms-DocumentCardActivity) { padding-bottom: 12px; } } diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx index afdc9f2480c8a..124f52758f120 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx @@ -30,8 +30,8 @@ export class DocumentCard extends React.Component { 'ms-DocumentCard', styles.root, { - ['ms-DocumentCard--actionable ' + styles.isRootActionable]: actionable, - ['ms-DocumentCard--compact ' + styles.isRootCompact]: type === DocumentCardType.compact ? true : false + ['ms-DocumentCard--actionable ' + styles.rootIsActionable]: actionable, + ['ms-DocumentCard--compact ' + styles.rootIsCompact]: type === DocumentCardType.compact ? true : false }, className ) diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.scss index b3d907017d46d..7a4eb343021bc 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.scss +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.scss @@ -10,7 +10,7 @@ $ms-DocumentCardActivity-personaTextGutter: 8px; position: relative; } -.isRootMultiplePeople { +.rootIsMultiplePeople { .avatar:nth-of-type(2) { @include margin-left(-16px); } diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx index 867adcb323a94..b45ead03a4338 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx @@ -15,7 +15,7 @@ export class DocumentCardActivity extends React.Component 0 &&
    1 + ['ms-DocumentCardActivity--multiplePeople ' + styles.rootIsMultiplePeople]: people.length > 1 }) }> { this._renderAvatars(people) }
    From cf2168616fbd5cc8ee8f40ef561be8dc42059fad Mon Sep 17 00:00:00 2001 From: Camille Malonzo Date: Mon, 27 Feb 2017 16:15:10 -0800 Subject: [PATCH 08/11] Move DocumentCard styles into one root scss file and move style from global to example page --- .../examples/DocumentCard.Compact.Example.tsx | 11 +- .../components/DocumentCard/DocumentCard.scss | 225 +++++++++++++++++- .../DocumentCard/DocumentCardActions.scss | 42 ---- .../DocumentCard/DocumentCardActions.tsx | 4 +- .../DocumentCard/DocumentCardActivity.scss | 73 ------ .../DocumentCard/DocumentCardActivity.tsx | 10 +- .../DocumentCard/DocumentCardLocation.scss | 18 -- .../DocumentCard/DocumentCardLocation.tsx | 4 +- .../DocumentCard/DocumentCardPreview.scss | 57 ----- .../DocumentCard/DocumentCardPreview.tsx | 4 +- .../DocumentCard/DocumentCardTitle.scss | 14 -- .../DocumentCard/DocumentCardTitle.tsx | 6 +- 12 files changed, 235 insertions(+), 233 deletions(-) delete mode 100644 packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.scss delete mode 100644 packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.scss delete mode 100644 packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.scss delete mode 100644 packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.scss delete mode 100644 packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.scss diff --git a/apps/fabric-examples/src/pages/DocumentCardPage/examples/DocumentCard.Compact.Example.tsx b/apps/fabric-examples/src/pages/DocumentCardPage/examples/DocumentCard.Compact.Example.tsx index 85648cc012830..50c612cbc22fe 100644 --- a/apps/fabric-examples/src/pages/DocumentCardPage/examples/DocumentCard.Compact.Example.tsx +++ b/apps/fabric-examples/src/pages/DocumentCardPage/examples/DocumentCard.Compact.Example.tsx @@ -44,11 +44,18 @@ export class DocumentCardCompactExample extends React.Component { ], }; + let style = { + display: 'flex', + 'flex-direction': 'column', + 'flex': '1', + 'justify-content': 'space-between' + }; + return (
    -
    +
    @@ -65,7 +72,7 @@ export class DocumentCardCompactExample extends React.Component {

    -

    +
    diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss index 5489b808c25c4..7da23322f09c3 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss @@ -41,12 +41,12 @@ height: 109px; // Remove the usual accent color from the preview - :global(.ms-DocumentCardPreview) { + .preview { border-bottom: none; max-height: 106px; max-width: 144px; - :global(.ms-DocumentCardPreview-icon) { + .icon { :global(.ms-Image-image) { max-height: 32px; max-width: 32px; @@ -54,25 +54,224 @@ } } - :global(.ms-DocumentCardPreview) { + .preview { @include border-right(1px, solid, $ms-color-neutralLight); } - // Expand the details area to fill the remaining width - :global(.ms-DocumentCard-details) { - display: flex; - flex-direction: column; - flex: 1; - justify-content: space-between; - } - - :global(.ms-DocumentCardTitle) { + .title { padding: 12px 16px 8px 16px; @include ms-font-m; line-height: 16px; } - :global(.ms-DocumentCardActivity) { + .activity { padding-bottom: 12px; } } + + +/** 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%; + } +} + +.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; + + &.isFileList { + 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; +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.scss deleted file mode 100644 index b0a09318c4c73..0000000000000 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.scss +++ /dev/null @@ -1,42 +0,0 @@ -@import '../../common/common'; - -$ms-DocumentCardActions-actionSize: 34px; -$ms-DocumentCardActions-horizontalPadding: 12px; -$ms-DocumentCardActions-verticalPadding: 4px; - -.root { - 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; - } -} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.tsx index 605706a570ed5..ee4826c87b3e7 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.tsx @@ -2,14 +2,14 @@ import * as React from 'react'; import { css } from '../../Utilities'; import { IDocumentCardActionsProps } from './DocumentCard.Props'; import { Button, ButtonType } from '../../Button'; -import styles from './DocumentCardActions.scss'; +import styles from './DocumentCard.scss'; export class DocumentCardActions extends React.Component { public render() { let { actions, views } = this.props; return ( -
    +
    { actions && actions.map((action, index) => { action.buttonType = ButtonType.icon; diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.scss deleted file mode 100644 index 7a4eb343021bc..0000000000000 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.scss +++ /dev/null @@ -1,73 +0,0 @@ -@import '../../common/common'; - -$ms-DocumentCardActivity-horizontalPadding: 16px; -$ms-DocumentCardActivity-imageSize: 25px; -$ms-DocumentCardActivity-verticalPadding: 8px; -$ms-DocumentCardActivity-personaTextGutter: 8px; - -.root { - padding: $ms-DocumentCardActivity-verticalPadding $ms-DocumentCardActivity-horizontalPadding; - position: relative; -} - -.rootIsMultiplePeople { - .avatar:nth-of-type(2) { - @include margin-left(-16px); - } - - .details { - @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%; - } -} - -.details { - @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, -.activity { - 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; -} diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx index b45ead03a4338..c9f2d801daa54 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx @@ -6,7 +6,7 @@ import { PERSONA_INITIALS_COLOR, PersonaInitialsColor } from '../../Persona'; -import styles from './DocumentCardActivity.scss'; +import styles from './DocumentCard.scss'; export class DocumentCardActivity extends React.Component { public render() { @@ -14,13 +14,13 @@ export class DocumentCardActivity extends React.Component 0 && -
    1 +
    1 }) }> { this._renderAvatars(people) } -
    +
    { this._getNameString(people) } - { activity } + { activity }
    ); diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.scss deleted file mode 100644 index 11bfa896faa94..0000000000000 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.scss +++ /dev/null @@ -1,18 +0,0 @@ -@import '../../common/common'; - -.root { - @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; - } -} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.tsx index 53d3f84bf5490..da11c0b26ca44 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; import { css } from '../../Utilities'; import { IDocumentCardLocationProps } from './DocumentCard.Props'; -import styles from './DocumentCardLocation.scss'; +import styles from './DocumentCard.scss'; export class DocumentCardLocation extends React.Component { public render() { let { location, locationHref, ariaLabel, onClick } = this.props; return ( - { location } ); } diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.scss deleted file mode 100644 index eb938587d8c24..0000000000000 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.scss +++ /dev/null @@ -1,57 +0,0 @@ -@import '../../common/common'; - -.root { - border-bottom: 2px solid $ms-color-neutralTertiary; // Default border color - position: relative; - background-color: $ms-color-neutralLighterAlt; - overflow: hidden; - - &.isFileList { - 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; -} diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx index 408a5c7799d18..e670ab1047d93 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx @@ -5,7 +5,7 @@ import { autobind, css } from '../../Utilities'; -import styles from './DocumentCardPreview.scss'; +import styles from './DocumentCard.scss'; const LIST_ITEM_COUNT = 3; @@ -32,7 +32,7 @@ export class DocumentCardPreview extends React.Component +
    { preview }
    ); diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.scss deleted file mode 100644 index db9c946fcd476..0000000000000 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import '../../common/common'; - -$DocumentCard-title-lineHeight: 21px; - -.root { - 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; -} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx index 3268c028904ad..c84f9b709b1da 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx @@ -8,7 +8,7 @@ import { css } from '../../Utilities'; import { IDocumentCardTitleProps } from './DocumentCard.Props'; -import styles from './DocumentCardTitle.scss'; +import styles from './DocumentCard.scss'; export interface IDocumentCardTitleState { truncatedTitleFirstPiece?: string; @@ -70,11 +70,11 @@ export class DocumentCardTitle extends BaseComponent{ truncatedTitleFirstPiece }…{ truncatedTitleSecondPiece }
    +
    { truncatedTitleFirstPiece }…{ truncatedTitleSecondPiece }
    ); } else { documentCardTitle = ( -
    { title }
    +
    { title }
    ); } From bf2fe13dabe5278200cf909332876d4bd09e8d8d Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Tue, 28 Feb 2017 10:08:02 -0800 Subject: [PATCH 09/11] Update document card to not rely on persona --- .../src/components/DocumentCard/DocumentCard.scss | 6 ++++++ .../src/components/DocumentCard/DocumentCardActivity.tsx | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss index 7da23322f09c3..569459181b562 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss @@ -161,6 +161,12 @@ $ms-DocumentCardActivity-personaTextGutter: 8px; } } +.avatarInitials { + background: $ms-color-themePrimary; + color: $ms-color-white; + font-weight: 100; +} + .activityDetails { @include left($ms-DocumentCardActivity-horizontalPadding + $ms-DocumentCardActivity-imageSize + $ms-DocumentCardActivity-personaTextGutter); height: $ms-DocumentCardActivity-imageSize; diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx index c9f2d801daa54..2a9063bfc9bdc 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx @@ -41,7 +41,7 @@ export class DocumentCardActivity extends React.Component { person.initials && ( -
    +
    { person.initials }
    ) } From 9c58c22e25069ef30ad86dc74014bd583dd6859c Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Tue, 28 Feb 2017 13:47:10 -0800 Subject: [PATCH 10/11] Moved details styles into global class in document card --- .../examples/DocumentCard.Compact.Example.tsx | 11 ++--------- .../src/components/DocumentCard/DocumentCard.scss | 7 ++++++- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/apps/fabric-examples/src/pages/DocumentCardPage/examples/DocumentCard.Compact.Example.tsx b/apps/fabric-examples/src/pages/DocumentCardPage/examples/DocumentCard.Compact.Example.tsx index 50c612cbc22fe..8dd62428992f5 100644 --- a/apps/fabric-examples/src/pages/DocumentCardPage/examples/DocumentCard.Compact.Example.tsx +++ b/apps/fabric-examples/src/pages/DocumentCardPage/examples/DocumentCard.Compact.Example.tsx @@ -44,18 +44,11 @@ export class DocumentCardCompactExample extends React.Component { ], }; - let style = { - display: 'flex', - 'flex-direction': 'column', - 'flex': '1', - 'justify-content': 'space-between' - }; - return (
    -
    +
    @@ -72,7 +65,7 @@ export class DocumentCardCompactExample extends React.Component {

    -

    +
    diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss index 569459181b562..9c6ec37cf5196 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss @@ -39,7 +39,12 @@ display: flex; max-width: 480px; height: 109px; - + :global(.ms-DocumentCard-details) { + display: flex; + flex-direction: column; + flex: 1; + justify-content: space-between; + } // Remove the usual accent color from the preview .preview { border-bottom: none; From eef9b6ccd9358a714ee145f2b535690ff2ad8ed2 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Tue, 28 Feb 2017 14:17:24 -0800 Subject: [PATCH 11/11] isFileList to previewIsFilesList --- .../src/components/DocumentCard/DocumentCard.scss | 2 +- .../src/components/DocumentCard/DocumentCardPreview.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss index 9c6ec37cf5196..9df484c755e32 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss @@ -223,7 +223,7 @@ $ms-DocumentCardActivity-personaTextGutter: 8px; background-color: $ms-color-neutralLighterAlt; overflow: hidden; - &.isFileList { + &.previewIsFileList { background-color: $ms-color-white; } } diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx index e670ab1047d93..1b06cd3b0058d 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx @@ -32,7 +32,7 @@ export class DocumentCardPreview extends React.Component +
    { preview }
    );