Updates share menu to flexbox. Closes #86. (#88)

* Initial commit of new UI layout. * Progress checkin. * Progress checkin. * Progress checkin. * Updates constants. * Adds comment. * Removes unused selector. * Updates share menu to flexbox. Closes #86. * Updates share menu.
material-foundation · Mar 30, 2017 · ea7811b · ea7811b
1 parent 540a1a6
commit ea7811b
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 82 deletions.
diff --git a/src/lib/Constants.ts b/src/lib/Constants.ts
@@ -64,13 +64,6 @@ export const DataType = {
 
 /** CSS class and id constants. */
 export const CSS = {
-  // TODO(cjcox): Refactor out these MDL classes in favor of flexbox.
-  MDL_LIST:               "mdl-list",
-  MDL_LIST_ITEM:          "mdl-list__item",
-  MDL_PRIMARY:            "mdl-list__item-primary-content",
-  MDL_SECONDARY:          "mdl-list__item-secondary-content",
-  MDL_TWO_LINE:           "mdl-list__item--two-line",
-
   RMX_COLOR_SWATCH:       "rmx-color-swatch",
   RMX_COLOR_SWATCH_ITEM:  "rmx-color-swatch-item",
   RMX_DROPDOWN:           "rmx-dropdown",
@@ -80,6 +73,8 @@ export const CSS = {
   RMX_RADIO_LIST:         "rmx-radio-list",
   RMX_RADIO_LIST_ITEM:    "rmx-radio-list-item",
   RMX_SHARE_MENU:         "rmx-share-menu",
+  RMX_SHARE_STATUS:       "rmx-share-status",
+  RMX_SHARE_LINK:         "rmx-share-link",
   RMX_SLIDER:             "rmx-slider",
   RMX_SLIDER_MAX:         "rmx-slider-max-value",
   RMX_SLIDER_MIN:         "rmx-slider-min-value",

diff --git a/src/ui/OverlayShareMenu.tsx b/src/ui/OverlayShareMenu.tsx
@@ -17,6 +17,7 @@
 import * as React from "react";
 
 import { CSS } from "../lib/Constants";
+import { ListItem } from "./ListItem";
 
 /**
  * Interface for the overlay share menu properties.
@@ -51,44 +52,38 @@ export class OverlayShareMenu extends React.Component<IOverlayShareMenuProps, vo
     let status = isEnabled ? "on" : "off";
 
     return (
-      <div
-        className={`${CSS.RMX_SHARE_MENU} mdl-card__actions ${showMenu}`}
-      >
-        <div className={CSS.MDL_LIST}>
-          <div className={`${CSS.MDL_LIST_ITEM} ${CSS.MDL_TWO_LINE} on`}>
-            <span className={CSS.MDL_PRIMARY}>
-              <span><strong>{`Sharing is ${status}`}</strong></span>
-              <span className="mdl-list__item-sub-title">
-                These values can be adjusted by anyone with the link.
-              </span>
-            </span>
-            <span className={CSS.MDL_SECONDARY}>
-              <label
-                className="mdl-switch mdl-js-switch mdl-js-ripple-effect"
-                htmlFor="share-switch"
-              >
-                <input
-                  id="share-switch" type="checkbox" className="mdl-switch__input"
-                  checked={isEnabled}
-                  onChange={this.props.toggleRemoteEnabled}
-                  />
-              </label>
-            </span>
-          </div>
-          <div className={`${CSS.MDL_LIST_ITEM} ${CSS.MDL_TWO_LINE} ${status}`}>
-            <span className={CSS.MDL_PRIMARY}>
-              <span>Link</span>
-              <span className="mdl-list__item-sub-title">
-                <a href={remoteUrl} target="_blank">{remoteUrl}</a>
-              </span>
-            </span>
-            <span className={CSS.MDL_SECONDARY}>
+      <div className={`${CSS.RMX_SHARE_MENU} ${showMenu}`}>
+        <ListItem
+          controlClass={CSS.RMX_SHARE_STATUS}
+          title={`Sharing is ${status}`}
+          subtitle="These values can be adjusted by anyone with the link."
+          inlineControl={true}
+        >
+          <label
+            className="mdl-switch mdl-js-switch mdl-js-ripple-effect"
+            htmlFor="share-switch"
+          >
+            <input
+              id="share-switch" type="checkbox" className="mdl-switch__input"
+              checked={isEnabled}
+              onChange={this.props.toggleRemoteEnabled}
+              />
+          </label>
+        </ListItem>
+        <ListItem
+          controlClass={`${CSS.RMX_SHARE_LINK} ${status}`}
+          title="Link"
+          inlineControl={false}
+        >
+          <div>
+            <div><a href={remoteUrl} target="_blank">{remoteUrl}</a></div>
+            <div>
               <a href={remoteUrl} target="_blank">
                 <i className="material-icons">share</i>
               </a>
-            </span>
+            </div>
           </div>
-        </div>
+        </ListItem>
       </div>
     );
   }

diff --git a/src/ui/styles/overlay.less b/src/ui/styles/overlay.less
@@ -37,24 +37,9 @@
   background-color: #FFFFFF;
 }
 
-.mdl-list {
-  margin: 0;
-}
-
-.mdl-list__item {
-  font-size: @fontSize;
-  font-weight: @fontLightWeight;
-}
-
-.mdl-list__item--two-line {
-  .mdl-list__item-primary-content {
-    height: inherit;
-  }
-
-  .mdl-list__item-secondary-content {
-    margin: 10px 0 0;
-    position: relative;
-  }
+.mdl-card__menu a {
+  color: @colorMdlBlue;
+  font-weight: @fontBoldWeight;
 }
 
 #rmx-overlay-wrapper {
@@ -94,13 +79,13 @@
   .title {
     font-size: @fontSize;
     font-weight: @fontLightWeight;
+    padding-right: 5px;
   }
 
   .subtitle {
     color: @colorMdlBlue;
     font-size: @fontSize;
     font-weight: @fontBoldWeight;
-    margin-left: 5px;
   }
 
   .control {
@@ -197,37 +182,49 @@
   padding: 0 8px;
   transition: max-height @duration ease-out, opacity @duration linear;
 
-  .mdl-list__item--two-line {
-    overflow: hidden;
-    transition: max-height @duration ease-out, min-height @duration ease-out, opacity @duration linear;
+  .rmx-list-item.inline .meta {
+    flex-direction: column;
+    align-items: flex-start;
   }
 
-  .mdl-list__item--two-line.on {
-    opacity: 1;
-    height: auto;
-    max-height: 200px;
-  }
+  .rmx-share-status {
+    .title {
+      font-weight: @fontBoldWeight;
+    }
 
-  .mdl-list__item--two-line.off {
-    padding: 0 16px;
-    height: 0;
-    min-height: 0;
-    max-height: 0;
-    opacity: 0;
+    .subtitle {
+      color: inherit;
+      font-weight: @fontLightWeight;
+    }
   }
 
-  a,
-  i {
-    color: @colorMdlBlue;
+  .rmx-share-link {
+    transition: max-height @duration ease-out, padding @duration ease-out, opacity @duration linear;
+
+    &.on {
+      max-height: 200px;
+    }
+
+    &.off {
+      padding: 0 20px;
+      max-height: 0;
+      opacity: 0;
+    }
+
+    div:first-child {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+    }
+
+    a,
+    i {
+      color: @colorMdlBlue;
+    }
   }
 }
 
 .rmx-share-menu.active {
   max-height: 200px;
   opacity: 1;
 }
-
-.mdl-card__menu a {
-  color: @colorMdlBlue;
-  font-weight: @fontBoldWeight;
-}