Add height to carousel and use style set

compulim · May 2, 2019 · 1d86967 · 1d86967
1 parent 5905f88
commit 1d86967
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 38 deletions.
diff --git a/packages/component/src/SendBox/SuggestedActions.js b/packages/component/src/SendBox/SuggestedActions.js
@@ -42,6 +42,7 @@ export default connectSuggestedActions(
         styleSet.suggestedActions + '',
         className
       ) }
+      height={ styleSet.options.suggestedActionHeight + styleSet.options.paddingRegular * 2 }
       showDots={ false }
       styleSet={ styleSet.options.suggestedActionsStyleSet }
     >

diff --git a/packages/component/src/Styles/StyleSet/SuggestedAction.js b/packages/component/src/Styles/StyleSet/SuggestedAction.js
@@ -18,6 +18,14 @@ export default function createSuggestedActionStyle({
     paddingRight: paddingRegular / 2,
     paddingTop: paddingRegular,
 
+    '&:first-child': {
+      paddingLeft: paddingRegular
+    },
+
+    '&:last-child': {
+      paddingRight: paddingRegular
+    },
+
     '& > button': {
       alignItems: 'center',
       borderRadius: suggestedActionBorderRadius,

diff --git a/packages/component/src/Styles/StyleSet/SuggestedActions.js b/packages/component/src/Styles/StyleSet/SuggestedActions.js
@@ -1,37 +1,4 @@
 export default function createSuggestedActionsStyle({
-  paddingRegular,
-  transcriptOverlayButtonBackground,
-  transcriptOverlayButtonBackgroundOnDisabled,
-  transcriptOverlayButtonBackgroundOnFocus,
-  transcriptOverlayButtonBackgroundOnHover,
-  transcriptOverlayButtonColor,
-  transcriptOverlayButtonColorOnDisabled,
-  transcriptOverlayButtonColorOnFocus,
-  transcriptOverlayButtonColorOnHover
 }) {
-  return {
-    paddingLeft: paddingRegular / 2,
-    paddingRight: paddingRegular / 2,
-
-    '& button > div.slider > div': {
-      backgroundColor: transcriptOverlayButtonBackground,
-      color: transcriptOverlayButtonColor,
-      outline: 0
-    },
-
-    '& button:disabled > div.slider > div': {
-      backgroundColor: transcriptOverlayButtonBackgroundOnDisabled,
-      color: transcriptOverlayButtonColorOnDisabled
-    },
-
-    '& button:focus > div.slider > div': {
-      backgroundColor: transcriptOverlayButtonBackgroundOnFocus,
-      color: transcriptOverlayButtonColorOnFocus
-    },
-
-    '& button:hover > div.slider > div': {
-      backgroundColor: transcriptOverlayButtonBackgroundOnHover,
-      color: transcriptOverlayButtonColorOnHover
-    }
-  };
+  return {};
 }
diff --git a/packages/component/src/Styles/StyleSet/SuggestedActionsStyleSet.js b/packages/component/src/Styles/StyleSet/SuggestedActionsStyleSet.js
@@ -1,12 +1,65 @@
+import { css } from 'glamor';
 import { createBasicStyleSet } from 'react-film';
 
-export default function createSuggestedActionsStyleSet() {
-  // This is not CSS, but options to create style set for react-film
-  return createBasicStyleSet({
+export default function createSuggestedActionsStyleSet({
+  transcriptOverlayButtonBackground,
+  transcriptOverlayButtonBackgroundOnDisabled,
+  transcriptOverlayButtonBackgroundOnFocus,
+  transcriptOverlayButtonBackgroundOnHover,
+  transcriptOverlayButtonColor,
+  transcriptOverlayButtonColorOnDisabled,
+  transcriptOverlayButtonColorOnFocus,
+  transcriptOverlayButtonColorOnHover
+}) {
+  const originalStyleSet = createBasicStyleSet({
     cursor: null,
     flipperBoxWidth: 40,
     flipperSize: 20,
     scrollBarHeight: 6,
-    scrollBarMargin: 2
+    scrollBarMargin: 2,
+  });
+
+  const flipper = css({
+    '& > div.slider > div': {
+      background: transcriptOverlayButtonBackground,
+      color: transcriptOverlayButtonColor,
+      outline: 0
+    },
+
+    '&:disabled > div.slider > div': {
+      backgroundColor: transcriptOverlayButtonBackgroundOnDisabled,
+      color: transcriptOverlayButtonColorOnDisabled
+    },
+
+    '&:focus > div.slider > div': {
+      backgroundColor: transcriptOverlayButtonBackgroundOnFocus,
+      color: transcriptOverlayButtonColorOnFocus
+    },
+
+    '&:hover > div.slider > div': {
+      backgroundColor: transcriptOverlayButtonBackgroundOnHover,
+      color: transcriptOverlayButtonColorOnHover
+    }
   });
+
+  const leftFlipper = css(originalStyleSet.leftFlipper, flipper);
+  const rightFlipper = css(originalStyleSet.rightFlipper, flipper);
+  const carousel = css(originalStyleSet.carousel, {
+    '&:hover, &.scrolling': {
+      [`& .${ leftFlipper + '' } > div.slider, & .${ rightFlipper + '' } > div.slider`]: {
+        transitionDelay: '0s'
+      },
+      [`& .${ leftFlipper + '' } > div.slider`]: { left: 0 },
+      [`& .${ rightFlipper + '' } > div.slider`]: { right: 0 }
+    }
+  });
+
+  // This is not CSS, but options to create style set for react-film
+  return {
+    ...originalStyleSet,
+
+    carousel,
+    leftFlipper,
+    rightFlipper
+  };
 }