fix css (#241)

* fix css * update snapshot * address comment
2020-03-25 11:10:02 -07:00 · 2020-03-25 11:10:02 -07:00 · 2fcf4a4fe3
--- a/src/app/css/_deviceEvents.scss
+++ b/src/app/css/_deviceEvents.scss
@ -7,6 +7,7 @@

 .device-events {
    .device-events-container {
+        margin-left: 15px;
        .events-loader {
            padding: 0 25px;
            .ms-Spinner {
--- a/src/app/css/_devicePnpDetailList.scss
+++ b/src/app/css/_devicePnpDetailList.scss
@ -23,6 +23,7 @@
 }

 .pnp-detail-list {
+    margin-left: 15px;
    @include themify($themes) {
        background-color: themed('backgroundColor');
    }
@ -50,6 +51,27 @@
    }
 }

+.flex-grid-row {
+    display: flex;
+    justify-content: space-between;
+    .col-sm4 {
+        width: 33.33333333333333%;
+        padding: 5px;
+    }
+    .col-sm3 {
+        width: 25%;
+        padding: 5px;
+    }
+    .col-sm2 {
+        width: 16.666666666666664%;
+        padding: 5px;
+    }
+    .col-sm2 {
+        width: 8.333333333333332%;
+        padding: 5px;
+    }
+}
+
 .list-content{
    width: calc(100% - 2px);
    .list-item {
@ -115,6 +137,10 @@
            }
        }
    }
+
+    .event-list-item {
+        margin-left: 15px;
+    }
 }

 .non-writable-properties {
--- a/src/app/devices/deviceContent/components/deviceCommands/snapshots/deviceCommandsPerInterface.spec.tsx.snap
+++ b/src/app/devices/deviceContent/components/deviceCommands/snapshots/deviceCommandsPerInterface.spec.tsx.snap
@ -2,33 +2,33 @@

 exports[`components/devices/deviceCommandsPerInterface matches snapshot 1`] = `
 <div
-  className="pnp-detail-list scrollable-lg ms-Grid"
+  className="pnp-detail-list scrollable-lg"
 >
  <div
-    className="list-header ms-Grid-row"
+    className="list-header flex-grid-row"
  >
    <span
-      className="ms-Grid-col ms-sm3"
+      className="col-sm3"
    >
      deviceCommands.columns.name
    </span>
    <span
-      className="ms-Grid-col ms-sm3"
+      className="col-sm3"
    >
      deviceCommands.columns.schema.request
    </span>
    <span
-      className="ms-Grid-col ms-sm3"
+      className="col-sm3"
    >
      deviceCommands.columns.schema.response
    </span>
    <span
-      className="ms-Grid-col ms-sm2"
+      className="col-sm2"
    >
      deviceCommands.columns.type
    </span>
    <div
-      className="ms-Grid-col ms-sm1 collapse-button"
+      className="col-sm1 collapse-button"
    >
      <CustomizedIconButton
        ariaLabel="deviceCommands.command.collapseAll"
--- a/src/app/devices/deviceContent/components/deviceCommands/deviceCommandsPerInterface.tsx
+++ b/src/app/devices/deviceContent/components/deviceCommands/deviceCommandsPerInterface.tsx
@ -59,12 +59,12 @@ export default class DeviceCommandsPerInterface
        return (
            <LocalizationContextConsumer>
                {(context: LocalizationContextInterface) => (
-                    <div className="pnp-detail-list scrollable-lg ms-Grid">
-                            <div className="list-header ms-Grid-row">
-                                <span className="ms-Grid-col ms-sm3">{context.t(ResourceKeys.deviceCommands.columns.name)}</span>
-                                <span className="ms-Grid-col ms-sm3">{context.t(ResourceKeys.deviceCommands.columns.schema.request)}</span>
-                                <span className="ms-Grid-col ms-sm3">{context.t(ResourceKeys.deviceCommands.columns.schema.response)}</span>
-                                <span className="ms-Grid-col ms-sm2">{context.t(ResourceKeys.deviceCommands.columns.type)}</span>
+                    <div className="pnp-detail-list scrollable-lg">
+                            <div className="list-header flex-grid-row">
+                                <span className="col-sm3">{context.t(ResourceKeys.deviceCommands.columns.name)}</span>
+                                <span className="col-sm3">{context.t(ResourceKeys.deviceCommands.columns.schema.request)}</span>
+                                <span className="col-sm3">{context.t(ResourceKeys.deviceCommands.columns.schema.response)}</span>
+                                <span className="col-sm2">{context.t(ResourceKeys.deviceCommands.columns.type)}</span>
                                {this.renderCollapseAllButton(context)}
                            </div>
                        <section role={commandSchemas && commandSchemas.length === 0 ? 'main' : 'list'} className="list-content">
@ -78,7 +78,7 @@ export default class DeviceCommandsPerInterface

    private readonly renderCollapseAllButton = (context: LocalizationContextInterface) => {
        return (
-            <div className="ms-Grid-col ms-sm1 collapse-button">
+            <div className="col-sm1 collapse-button">
                <IconButton
                    iconProps={{iconName: this.state.allCollapsed ? InterfaceDetailCard.OPEN : InterfaceDetailCard.CLOSE}}
                    ariaLabel={this.state.allCollapsed ?
--- a/src/app/devices/deviceContent/components/deviceCommands/deviceCommandsPerInterfacePerCommand.tsx
+++ b/src/app/devices/deviceContent/components/deviceCommands/deviceCommandsPerInterfacePerCommand.tsx
@ -41,10 +41,8 @@ export default class DeviceCommandsPerInterfacePerCommand
                <LocalizationContextConsumer >
                    {(context: LocalizationContextInterface) => (
                        <ErrorBoundary error={context.t(ResourceKeys.errorBoundary.text)}>
-                            <div className="ms-Grid-row">
-                                {this.createCollapsedSummary(context)}
-                                {this.createUncollapsedCard(context)}
-                            </div>
+                            {this.createCollapsedSummary(context)}
+                            {this.createUncollapsedCard(context)}
                        </ErrorBoundary>
                    )}
                </LocalizationContextConsumer>
@ -56,7 +54,7 @@ export default class DeviceCommandsPerInterfacePerCommand

    private readonly createCollapsedSummary = (context: LocalizationContextInterface) => {
        return (
-            <header className={this.props.collapsed ? 'item-summary' : 'item-summary item-summary-uncollapsed'} onClick={this.handleToggleCollapse}>
+            <header className={`flex-grid-row item-summary ${this.props.collapsed ? '' : 'item-summary-uncollapsed'}`} onClick={this.handleToggleCollapse}>
                {this.renderCommandName(context)}
                {this.renderCommandSchema(context, true)}
                {this.renderCommandSchema(context, false)}
@ -126,23 +124,23 @@ export default class DeviceCommandsPerInterfacePerCommand
        displayName = displayName ? displayName : '--';
        let description = getLocalizedData(this.props.commandModelDefinition.description);
        description = description ? description : '--';
-        return <div className="ms-Grid-col ms-sm3"><Label aria-label={ariaLabel}>{this.props.commandModelDefinition.name} ({displayName} / {description})</Label></div>;
+        return <div className="col-sm3"><Label aria-label={ariaLabel}>{this.props.commandModelDefinition.name} ({displayName} / {description})</Label></div>;
    }

    private readonly renderCommandSchema = (context: LocalizationContextInterface, isRequest: boolean) => {
        const ariaLabel = context.t(ResourceKeys.deviceCommands.columns.type);
-        return <div className="ms-Grid-col ms-sm3"><Label aria-label={ariaLabel}>{this.getCommandSchema(isRequest)}</Label></div>;
+        return <div className="col-sm3"><Label aria-label={ariaLabel}>{this.getCommandSchema(isRequest)}</Label></div>;
    }

    private readonly renderCommandType = (context: LocalizationContextInterface) => {
        const ariaLabel = context.t(ResourceKeys.deviceCommands.columns.schema.request);
        const { commandModelDefinition } = this.props;
-        return <div className="ms-Grid-col ms-sm2"><Label aria-label={ariaLabel}>{commandModelDefinition.commandType ? commandModelDefinition.commandType : '--'}</Label></div>;
+        return <div className="col-sm2"><Label aria-label={ariaLabel}>{commandModelDefinition.commandType ? commandModelDefinition.commandType : '--'}</Label></div>;
    }

    private readonly renderCollapseButton = (context: LocalizationContextInterface) => {
        return (
-        <div className="ms-Grid-col ms-sm1">
+        <div className="col-sm1">
            <IconButton
                title={context.t(this.props.collapsed ? ResourceKeys.deviceCommands.command.expand : ResourceKeys.deviceCommands.command.collapse)}
                iconProps={{iconName: this.props.collapsed ? InterfaceDetailCard.OPEN : InterfaceDetailCard.CLOSE}}
--- a/src/app/devices/deviceContent/components/deviceEvents/deviceEventsPerInterface.tsx
+++ b/src/app/devices/deviceContent/components/deviceEvents/deviceEventsPerInterface.tsx
@ -323,13 +323,13 @@ export default class DeviceEventsPerInterfaceComponent extends React.Component<D
                {
                    events && events.length > 0 &&
                    <>
-                        <div className="pnp-detail-list ms-Grid">
-                            <div className="list-header list-header-uncollapsible ms-Grid-row">
-                                <span className="ms-Grid-col ms-sm2">{context.t(ResourceKeys.deviceEvents.columns.timestamp)}</span>
-                                <span className="ms-Grid-col ms-sm2">{context.t(ResourceKeys.deviceEvents.columns.displayName)}</span>
-                                <span className="ms-Grid-col ms-sm2">{context.t(ResourceKeys.deviceEvents.columns.schema)}</span>
-                                <span className="ms-Grid-col ms-sm2">{context.t(ResourceKeys.deviceEvents.columns.unit)}</span>
-                                <span className="ms-Grid-col ms-sm4">{context.t(ResourceKeys.deviceEvents.columns.value)}</span>
+                        <div className="pnp-detail-list">
+                            <div className="list-header list-header-uncollapsible flex-grid-row">
+                                <span className="col-sm2">{context.t(ResourceKeys.deviceEvents.columns.timestamp)}</span>
+                                <span className="col-sm2">{context.t(ResourceKeys.deviceEvents.columns.displayName)}</span>
+                                <span className="col-sm2">{context.t(ResourceKeys.deviceEvents.columns.schema)}</span>
+                                <span className="col-sm2">{context.t(ResourceKeys.deviceEvents.columns.unit)}</span>
+                                <span className="col-sm4">{context.t(ResourceKeys.deviceEvents.columns.value)}</span>
                            </div>
                        </div>
                        <section role="feed">
@ -352,8 +352,8 @@ export default class DeviceEventsPerInterfaceComponent extends React.Component<D
        const { telemetryModelDefinition, parsedSchema } = this.getModelDefinitionAndSchema(event.systemProperties[TELEMETRY_SCHEMA_PROP]);

        return (
-            <article className="list-item" role="article" key={index}>
-                <section className="item-summary">
+            <article className="list-item event-list-item" role="article" key={index}>
+                <section className="flex-grid-row item-summary">
                    <ErrorBoundary error={context.t(ResourceKeys.errorBoundary.text)}>
                        {this.renderTimestamp(event.enqueuedTime, context)}
                        {this.renderEventName(context, telemetryModelDefinition)}
@ -376,8 +376,8 @@ export default class DeviceEventsPerInterfaceComponent extends React.Component<D
                const isNotItemLast = keyIndex !== telemetryKeys.length - 1;

                return (
-                    <article className="list-item" role="article" key={key + index}>
-                        <section className={`item-summary ${isNotItemLast && 'item-summary-partial'}`}>
+                    <article className="list-item event-list-item" role="article" key={key + index}>
+                        <section className={`flex-grid-row item-summary ${isNotItemLast && 'item-summary-partial'}`}>
                            <ErrorBoundary error={context.t(ResourceKeys.errorBoundary.text)}>
                                {this.renderTimestamp(keyIndex === 0 ? event.enqueuedTime : null, context)}
                                {this.renderEventName(context, telemetryModelDefinition)}
@ -394,8 +394,8 @@ export default class DeviceEventsPerInterfaceComponent extends React.Component<D

    private readonly renderEventsWithNoSystemProperties = (event: Message, index: number, context: LocalizationContextInterface) => {
        return (
-            <article className="list-item" role="article" key={index}>
-                <section className="item-summary">
+            <article className="list-item event-list-item" role="article" key={index}>
+                <section className="flex-grid-row item-summary">
                    <ErrorBoundary error={context.t(ResourceKeys.errorBoundary.text)}>
                        {this.renderTimestamp(event.enqueuedTime, context)}
                        {this.renderEventName(context)}
@ -410,7 +410,7 @@ export default class DeviceEventsPerInterfaceComponent extends React.Component<D

    private readonly renderTimestamp = (enqueuedTime: string, context: LocalizationContextInterface) => {
        return(
-            <div className="ms-Grid-col ms-sm2">
+            <div className="col-sm2">
                <Label aria-label={context.t(ResourceKeys.deviceEvents.columns.timestamp)}>
                    {enqueuedTime && parseDateTimeString(enqueuedTime)}
                </Label>
@ -421,7 +421,7 @@ export default class DeviceEventsPerInterfaceComponent extends React.Component<D
    private readonly renderEventName = (context: LocalizationContextInterface, telemetryModelDefinition?: TelemetryContent) => {
        const displayName = telemetryModelDefinition ? getLocalizedData(telemetryModelDefinition.displayName) : '';
        return(
-            <div className="ms-Grid-col ms-sm2">
+            <div className="col-sm2">
                <Label aria-label={context.t(ResourceKeys.deviceEvents.columns.displayName)}>
                    {telemetryModelDefinition ?
                        `${telemetryModelDefinition.name} (${displayName ? displayName : '--'})` : '--'}
@ -432,7 +432,7 @@ export default class DeviceEventsPerInterfaceComponent extends React.Component<D

    private readonly renderEventSchema = (context: LocalizationContextInterface, telemetryModelDefinition?: TelemetryContent) => {
        return(
-            <div className="ms-Grid-col ms-sm2">
+            <div className="col-sm2">
                <Label aria-label={context.t(ResourceKeys.deviceEvents.columns.schema)}>
                    {telemetryModelDefinition ?
                        (typeof telemetryModelDefinition.schema === 'string' ?
@ -446,7 +446,7 @@ export default class DeviceEventsPerInterfaceComponent extends React.Component<D
    private readonly renderEventUnit = (context: LocalizationContextInterface, telemetryModelDefinition?: TelemetryContent) => {
        const displayUnit = telemetryModelDefinition ? getLocalizedData(telemetryModelDefinition.displayUnit) : '';
        return(
-            <div className="ms-Grid-col ms-sm2">
+            <div className="col-sm2">
                <Label aria-label={context.t(ResourceKeys.deviceEvents.columns.unit)}>
                    {telemetryModelDefinition ?
                        telemetryModelDefinition.unit || displayUnit || '--' : '--'}
@ -459,7 +459,7 @@ export default class DeviceEventsPerInterfaceComponent extends React.Component<D
        if (key && !schema) { // DTDL doesn't contain corresponding key
            const labelContent = context.t(ResourceKeys.deviceEvents.columns.validation.key.isNotSpecified, { key });
            return(
-                <div className="column-value-text ms-Grid-col ms-sm4">
+                <div className="column-value-text col-sm4">
                    <span aria-label={context.t(ResourceKeys.deviceEvents.columns.value)}>
                        {JSON.stringify(eventBody, undefined, JSON_SPACES)}
                        <Label className="value-validation-error">
@ -476,7 +476,7 @@ export default class DeviceEventsPerInterfaceComponent extends React.Component<D
                receivedKey: Object.keys(eventBody)[0]
            });
            return(
-                <div className="column-value-text ms-Grid-col ms-sm4">
+                <div className="column-value-text col-sm4">
                    <span aria-label={context.t(ResourceKeys.deviceEvents.columns.value)}>
                        {JSON.stringify(eventBody, undefined, JSON_SPACES)}
                        <Label className="value-validation-error">
@ -500,7 +500,7 @@ export default class DeviceEventsPerInterfaceComponent extends React.Component<D
        }

        return(
-            <div className="column-value-text ms-Grid-col ms-sm4">
+            <div className="column-value-text col-sm4">
                <Label aria-label={context.t(ResourceKeys.deviceEvents.columns.value)}>
                    {JSON.stringify(eventBody, undefined, JSON_SPACES)}
                    {result && result.errors && result.errors.length !== 0 &&
@ -520,7 +520,7 @@ export default class DeviceEventsPerInterfaceComponent extends React.Component<D

    private readonly renderMessageBodyWithNoSchema = (eventBody: any, context: LocalizationContextInterface) => { // tslint:disable-line:no-any
        return(
-            <div className="column-value-text ms-Grid-col ms-sm4">
+            <div className="column-value-text col-sm4">
                <Label aria-label={context.t(ResourceKeys.deviceEvents.columns.value)}>
                    {JSON.stringify(eventBody, undefined, JSON_SPACES)}
                </Label>
--- a/src/app/devices/deviceContent/components/deviceSettings/snapshots/deviceSettingsPerInterface.spec.tsx.snap
+++ b/src/app/devices/deviceContent/components/deviceSettings/snapshots/deviceSettingsPerInterface.spec.tsx.snap
@ -155,28 +155,28 @@ exports[`components/devices/deviceSettings matches snapshot with one twinWithSch

 exports[`components/devices/deviceSettingsPerInterface matches snapshot 1`] = `
 <div
-  className="pnp-detail-list scrollable-lg ms-Grid"
+  className="pnp-detail-list scrollable-lg"
 >
  <div
-    className="list-header ms-Grid-row"
+    className="list-header flex-grid-row"
  >
    <span
-      className="ms-Grid-col ms-sm3"
+      className="col-sm3"
    >
      deviceSettings.columns.name
    </span>
    <span
-      className="ms-Grid-col ms-sm2"
+      className="col-sm2"
    >
      deviceSettings.columns.schema
    </span>
    <span
-      className="ms-Grid-col ms-sm2"
+      className="col-sm2"
    >
      deviceSettings.columns.unit
    </span>
    <span
-      className="ms-Grid-col ms-sm4 reported-value"
+      className="col-sm4 reported-value"
    >
      deviceSettings.columns.reportedValue
      <StyledTooltipHostBase
@ -206,7 +206,7 @@ exports[`components/devices/deviceSettingsPerInterface matches snapshot 1`] = `
      </StyledTooltipHostBase>
    </span>
    <div
-      className="ms-Grid-col ms-sm1 collapse-button"
+      className="col-sm1 collapse-button"
    >
      <CustomizedIconButton
        ariaLabel="deviceSettings.command.collapseAll"
--- a/src/app/devices/deviceContent/components/deviceSettings/deviceSettingsPerInterface.tsx
+++ b/src/app/devices/deviceContent/components/deviceSettings/deviceSettingsPerInterface.tsx
@ -67,12 +67,12 @@ export default class DeviceSettingsPerInterface
        return (
            <LocalizationContextConsumer>
                {(context: LocalizationContextInterface) => (
-                    <div className="pnp-detail-list scrollable-lg ms-Grid">
-                        <div className="list-header ms-Grid-row">
-                            <span className="ms-Grid-col ms-sm3">{context.t(ResourceKeys.deviceSettings.columns.name)}</span>
-                            <span className="ms-Grid-col ms-sm2">{context.t(ResourceKeys.deviceSettings.columns.schema)}</span>
-                            <span className="ms-Grid-col ms-sm2">{context.t(ResourceKeys.deviceSettings.columns.unit)}</span>
-                            <span className="ms-Grid-col ms-sm4 reported-value">
+                    <div className="pnp-detail-list scrollable-lg">
+                        <div className="list-header flex-grid-row">
+                            <span className="col-sm3">{context.t(ResourceKeys.deviceSettings.columns.name)}</span>
+                            <span className="col-sm2">{context.t(ResourceKeys.deviceSettings.columns.schema)}</span>
+                            <span className="col-sm2">{context.t(ResourceKeys.deviceSettings.columns.unit)}</span>
+                            <span className="col-sm4 reported-value">
                                {context.t(ResourceKeys.deviceSettings.columns.reportedValue)}
                                <TooltipHost
                                    content={context.t(ResourceKeys.deviceSettings.columns.reportedValueTooltip)}
@ -100,7 +100,7 @@ export default class DeviceSettingsPerInterface

    private readonly renderCollapseAllButton = (context: LocalizationContextInterface) => {
        return (
-            <div className="ms-Grid-col ms-sm1 collapse-button">
+            <div className="col-sm1 collapse-button">
                <IconButton
                    iconProps={{iconName: this.state.allCollapsed ? InterfaceDetailCard.OPEN : InterfaceDetailCard.CLOSE}}
                    ariaLabel={this.state.allCollapsed ?
--- a/src/app/devices/deviceContent/components/deviceSettings/deviceSettingsPerInterfacePerSetting.tsx
+++ b/src/app/devices/deviceContent/components/deviceSettings/deviceSettingsPerInterfacePerSetting.tsx
@ -63,11 +63,9 @@ export default class DeviceSettingsPerInterfacePerSetting
                <LocalizationContextConsumer>
                    {(context: LocalizationContextInterface) => (
                        <ErrorBoundary error={context.t(ResourceKeys.errorBoundary.text)}>
-                            <div className="ms-Grid-row">
-                                {this.createCollapsedSummary(context)}
-                                {this.createUncollapsedCard()}
-                                {this.createReportedValuePanel()}
-                            </div>
+                            {this.createCollapsedSummary(context)}
+                            {this.createUncollapsedCard()}
+                            {this.createReportedValuePanel()}
                        </ErrorBoundary>
                    )}
                </LocalizationContextConsumer>
@ -83,7 +81,7 @@ export default class DeviceSettingsPerInterfacePerSetting

    private readonly createCollapsedSummary = (context: LocalizationContextInterface) => {
        return (
-            <header className={this.props.collapsed ? 'item-summary' : 'item-summary item-summary-uncollapsed'} onClick={this.props.handleCollapseToggle}>
+            <header className={`flex-grid-row item-summary ${this.props.collapsed ? '' : 'item-summary-uncollapsed'}`} onClick={this.props.handleCollapseToggle}>
                {this.renderPropertyName(context)}
                {this.renderPropertySchema(context)}
                {this.renderPropertyUnit(context)}
@ -99,7 +97,7 @@ export default class DeviceSettingsPerInterfacePerSetting
        displayName = displayName ? displayName : '--';
        let description = getLocalizedData(this.props.settingModelDefinition.description);
        description = description ? description : '--';
-        return <div className="ms-Grid-col ms-sm3"><Label aria-label={ariaLabel}>{this.props.settingModelDefinition.name} ({displayName} / {description})</Label></div>;
+        return <div className="col-sm3"><Label aria-label={ariaLabel}>{this.props.settingModelDefinition.name} ({displayName} / {description})</Label></div>;
    }

    private readonly renderPropertySchema = (context: LocalizationContextInterface) => {
@ -108,20 +106,20 @@ export default class DeviceSettingsPerInterfacePerSetting
        const schemaType = typeof settingModelDefinition.schema === 'string' ?
            settingModelDefinition.schema :
            settingModelDefinition.schema['@type'];
-        return <div className="ms-Grid-col ms-sm2"><Label aria-label={ariaLabel}>{schemaType}</Label></div>;
+        return <div className="col-sm2"><Label aria-label={ariaLabel}>{schemaType}</Label></div>;
    }

    private readonly renderPropertyUnit = (context: LocalizationContextInterface) => {
        const ariaLabel = context.t(ResourceKeys.deviceProperties.columns.unit);
        const unit = this.props.settingModelDefinition.unit;
-        return <div className="ms-Grid-col ms-sm2"><Label aria-label={ariaLabel}>{unit ? unit : '--'}</Label></div>;
+        return <div className="col-sm2"><Label aria-label={ariaLabel}>{unit ? unit : '--'}</Label></div>;
    }

    private readonly renderPropertyReportedValue = (context: LocalizationContextInterface) => {
        const { reportedTwin } = this.props;
        const ariaLabel = context.t(ResourceKeys.deviceSettings.columns.reportedValue);
        return (
-            <div className="column-value-text ms-Grid-col ms-sm4" aria-label={ariaLabel}>
+            <div className="column-value-text col-sm4" aria-label={ariaLabel}>
                <Stack horizontal={true}>
                    <Stack.Item align="start" className="reported-property">
                        {this.renderReportedValue(context)}
@ -161,7 +159,7 @@ export default class DeviceSettingsPerInterfacePerSetting

    private readonly renderCollapseButton = (context: LocalizationContextInterface) => {
        return (
-        <div className="ms-Grid-col ms-sm1">
+        <div className="col-sm1">
            <IconButton
                title={context.t(this.props.collapsed ? ResourceKeys.deviceSettings.command.expand : ResourceKeys.deviceSettings.command.collapse)}
                iconProps={{iconName: this.props.collapsed ? InterfaceDetailCard.OPEN : InterfaceDetailCard.CLOSE}}