From a3a96a545a0a62f11a814f4c1c9ba4442c0ab607 Mon Sep 17 00:00:00 2001 From: William Wong Date: Wed, 24 Apr 2019 00:07:33 -0700 Subject: [PATCH 1/7] Remove cursor --- packages/component/src/Dots.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/component/src/Dots.js b/packages/component/src/Dots.js index ff00369..78cf05e 100644 --- a/packages/component/src/Dots.js +++ b/packages/component/src/Dots.js @@ -15,7 +15,6 @@ const DOT_CSS = css({ position: 'relative', '& > input': { - cursor: 'pointer', height: '100%', left: 0, margin: 0, From 9240710bed6a345f2545b0d5400470babaad26a6 Mon Sep 17 00:00:00 2001 From: William Wong Date: Wed, 24 Apr 2019 00:07:48 -0700 Subject: [PATCH 2/7] Add entry --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8973cf9..bdceae8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [Unreleased] ### Added - Support specifying item elements and scrollable container element, by [@compulim](https://github.com/compulim) in PR [#21](https://github.com/spyip/react-film/pull/21). +- Fix [#22](https://github.com/spyip/react-film/issues/22). Added style options to hide "cursor: pointer" style, by [@compulim](https://github.com/compulim) in PR [#25](https://github.com/spyip/react-film/pull/25). ### Changed - For performance reason, deep-customizing component will now need to pass `numItems` prop to ``, by [@compulim](https://github.com/compulim) in PR [#21](https://github.com/spyip/react-film/pull/21). From c9215f2474754b2639a50f72d96c8b0cb32e19ec Mon Sep 17 00:00:00 2001 From: William Wong Date: Wed, 24 Apr 2019 00:10:49 -0700 Subject: [PATCH 3/7] Add pointerCursor --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 4091750..8cef021 100644 --- a/README.md +++ b/README.md @@ -155,6 +155,7 @@ Sometimes, just increasing some paddings are more than enough for your styling n | `dotSize` | `6` | Visible dot size | | `flipperBoxWidth` | `60` | Hit box size of flippers | | `flipperSize` | `40` | Visible flipper size (circle) | +| `pointerCursor` | `true` | Use "pointer" as cursor | | `scrollBarHeight` | `8` | Scroll bar handler height | | `scrollBarMargin` | `4` | Margin around scroll bar | From a159eba3136602ec8502aaf1cab25db75eee22bb Mon Sep 17 00:00:00 2001 From: William Wong Date: Wed, 24 Apr 2019 00:10:58 -0700 Subject: [PATCH 4/7] Add pointerCursor --- packages/component/src/createBasicStyleSet.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/packages/component/src/createBasicStyleSet.js b/packages/component/src/createBasicStyleSet.js index 4e9116a..3ba302a 100644 --- a/packages/component/src/createBasicStyleSet.js +++ b/packages/component/src/createBasicStyleSet.js @@ -11,7 +11,7 @@ const createDotsBoxCSS = ({ height }) => css({ width: '100%' }); -const createDotsItemCSS = ({ boxSize, size }) => css({ +const createDotsItemCSS = ({ boxSize, pointerCursor, size }) => css({ alignItems: 'center', display: 'flex', height: boxSize, @@ -19,7 +19,8 @@ const createDotsItemCSS = ({ boxSize, size }) => css({ width: boxSize, '& > input': { - cursor: 'pointer', + ...pointerCursor ? { cursor: 'pointer' } : {}, + height: '100%', left: 0, margin: 0, @@ -52,9 +53,10 @@ const createDotsItemCSS = ({ boxSize, size }) => css({ const FLIPPER_BOX_WIDTH = 60; const FLIPPER_SIZE = 40; -const createFlipperBoxCSS = ({ boxWidth, size }) => css({ +const createFlipperBoxCSS = ({ boxWidth, pointerCursor, size }) => css({ + ...pointerCursor ? { cursor: 'pointer' } : {}, + background: 'Transparent', - cursor: 'pointer', height: '100%', position: 'absolute', top: 0, @@ -138,15 +140,16 @@ export default function ({ dotSize = DOT_SIZE, flipperBoxWidth = FLIPPER_BOX_WIDTH, flipperSize = FLIPPER_SIZE, + pointerCursor = true, scrollBarHeight = SCROLL_BAR_HEIGHT, scrollBarMargin = SCROLL_BAR_MARGIN } = {}) { const styles = { carousel : '', dotsBox : createDotsBoxCSS({ height: dotBoxSize }), - dotsItem : createDotsItemCSS({ boxSize: dotBoxSize, size: dotSize }), - leftFlipper : createLeftFlipperCSS({ boxWidth: flipperBoxWidth, size: flipperSize }), - rightFlipper : createRightFlipperCSS({ boxWidth: flipperBoxWidth, size: flipperSize }), + dotsItem : createDotsItemCSS({ boxSize: dotBoxSize, pointerCursor, size: dotSize }), + leftFlipper : createLeftFlipperCSS({ boxWidth: flipperBoxWidth, pointerCursor, size: flipperSize }), + rightFlipper : createRightFlipperCSS({ boxWidth: flipperBoxWidth, pointerCursor, size: flipperSize }), scrollBarBox : createScrollBarBoxCSS({ height: scrollBarHeight, margin: scrollBarMargin }), scrollBarHandler: createScrollBarHandlerCSS({ height: scrollBarHeight, margin: scrollBarMargin }) }; From c29c594934d820792a52e311ac84e939c262a873 Mon Sep 17 00:00:00 2001 From: William Wong Date: Wed, 24 Apr 2019 00:11:04 -0700 Subject: [PATCH 5/7] Add pointerCursor --- packages/playground/src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/playground/src/App.js b/packages/playground/src/App.js index f2fd59e..aab1e4f 100644 --- a/packages/playground/src/App.js +++ b/packages/playground/src/App.js @@ -11,7 +11,7 @@ const LIST_FILM_ITEM_CSS = css({ width: 200 }); -const styleSet = createBasicStyleSet({ autoHide: false }); +const styleSet = createBasicStyleSet({ autoHide: false, pointerCursor: false }); const myStyleSet = { ...styleSet, scrollBarHandler: styleSet.scrollBarHandler + ' ' + css({ backgroundColor: 'Red' }) From 7692b841da0eba99d64752d03d9d8de06f70787d Mon Sep 17 00:00:00 2001 From: William Wong Date: Wed, 24 Apr 2019 00:11:30 -0700 Subject: [PATCH 6/7] Clean up --- packages/component/src/createBasicStyleSet.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/component/src/createBasicStyleSet.js b/packages/component/src/createBasicStyleSet.js index 3ba302a..67906fe 100644 --- a/packages/component/src/createBasicStyleSet.js +++ b/packages/component/src/createBasicStyleSet.js @@ -117,7 +117,7 @@ const createRightFlipperCSS = options => css({ const SCROLL_BAR_HEIGHT = 8; const SCROLL_BAR_MARGIN = 4; -const createScrollBarBoxCSS = ({ height, margin }) => css({ +const createScrollBarBoxCSS = ({ margin }) => css({ bottom: 0, padding: margin, position: 'absolute', @@ -127,11 +127,11 @@ const createScrollBarBoxCSS = ({ height, margin }) => css({ width: '100%' }); -const createScrollBarHandlerCSS = ({ height, margin }) => css({ +const createScrollBarHandlerCSS = ({ height }) => css({ backdropFilter: 'blur(4px)', background: 'rgba(255, 255, 255, .4)', borderRadius: height / 2, - height: height + height }); export default function ({ @@ -150,8 +150,8 @@ export default function ({ dotsItem : createDotsItemCSS({ boxSize: dotBoxSize, pointerCursor, size: dotSize }), leftFlipper : createLeftFlipperCSS({ boxWidth: flipperBoxWidth, pointerCursor, size: flipperSize }), rightFlipper : createRightFlipperCSS({ boxWidth: flipperBoxWidth, pointerCursor, size: flipperSize }), - scrollBarBox : createScrollBarBoxCSS({ height: scrollBarHeight, margin: scrollBarMargin }), - scrollBarHandler: createScrollBarHandlerCSS({ height: scrollBarHeight, margin: scrollBarMargin }) + scrollBarBox : createScrollBarBoxCSS({ margin: scrollBarMargin }), + scrollBarHandler: createScrollBarHandlerCSS({ height: scrollBarHeight }) }; // This is for overriding existing rules with auto-hide CSS transitions From 8debba1e5bfe8080bf21a0da096ec6e74b2bf592 Mon Sep 17 00:00:00 2001 From: William Wong Date: Wed, 24 Apr 2019 00:15:21 -0700 Subject: [PATCH 7/7] Prefer cursor over pointerCursor --- README.md | 20 +++++++++---------- packages/component/src/createBasicStyleSet.js | 16 +++++++-------- packages/playground/src/App.js | 2 +- 3 files changed, 19 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index 8cef021..346e61e 100644 --- a/README.md +++ b/README.md @@ -148,16 +148,16 @@ export default props => Sometimes, just increasing some paddings are more than enough for your styling need. When calling `createBasicStyleSet(options)`, you can specify the following options: -| Name | Default | Description | -|-------------------|---------|-------------------------------| -| `autoHide` | `true` | Auto-hide controls | -| `dotBoxSize` | `20` | Hit box size of every dot | -| `dotSize` | `6` | Visible dot size | -| `flipperBoxWidth` | `60` | Hit box size of flippers | -| `flipperSize` | `40` | Visible flipper size (circle) | -| `pointerCursor` | `true` | Use "pointer" as cursor | -| `scrollBarHeight` | `8` | Scroll bar handler height | -| `scrollBarMargin` | `4` | Margin around scroll bar | +| Name | Default | Description | +|-------------------|-----------|-----------------------------------| +| `autoHide` | `true` | Auto-hide controls | +| `cursor` | `pointer` | Cursor style on dots and flippers | +| `dotBoxSize` | `20` | Hit box size of every dot | +| `dotSize` | `6` | Visible dot size | +| `flipperBoxWidth` | `60` | Hit box size of flippers | +| `flipperSize` | `40` | Visible flipper size (circle) | +| `scrollBarHeight` | `8` | Scroll bar handler height | +| `scrollBarMargin` | `4` | Margin around scroll bar | # Deep-customization diff --git a/packages/component/src/createBasicStyleSet.js b/packages/component/src/createBasicStyleSet.js index 67906fe..46c45ba 100644 --- a/packages/component/src/createBasicStyleSet.js +++ b/packages/component/src/createBasicStyleSet.js @@ -11,7 +11,7 @@ const createDotsBoxCSS = ({ height }) => css({ width: '100%' }); -const createDotsItemCSS = ({ boxSize, pointerCursor, size }) => css({ +const createDotsItemCSS = ({ boxSize, cursor, size }) => css({ alignItems: 'center', display: 'flex', height: boxSize, @@ -19,7 +19,7 @@ const createDotsItemCSS = ({ boxSize, pointerCursor, size }) => css({ width: boxSize, '& > input': { - ...pointerCursor ? { cursor: 'pointer' } : {}, + ...cursor ? { cursor } : {}, height: '100%', left: 0, @@ -53,8 +53,8 @@ const createDotsItemCSS = ({ boxSize, pointerCursor, size }) => css({ const FLIPPER_BOX_WIDTH = 60; const FLIPPER_SIZE = 40; -const createFlipperBoxCSS = ({ boxWidth, pointerCursor, size }) => css({ - ...pointerCursor ? { cursor: 'pointer' } : {}, +const createFlipperBoxCSS = ({ boxWidth, cursor, size }) => css({ + ...cursor ? { cursor } : {}, background: 'Transparent', height: '100%', @@ -136,20 +136,20 @@ const createScrollBarHandlerCSS = ({ height }) => css({ export default function ({ autoHide = true, + cursor = 'pointer', dotBoxSize = DOT_BOX_SIZE, dotSize = DOT_SIZE, flipperBoxWidth = FLIPPER_BOX_WIDTH, flipperSize = FLIPPER_SIZE, - pointerCursor = true, scrollBarHeight = SCROLL_BAR_HEIGHT, scrollBarMargin = SCROLL_BAR_MARGIN } = {}) { const styles = { carousel : '', dotsBox : createDotsBoxCSS({ height: dotBoxSize }), - dotsItem : createDotsItemCSS({ boxSize: dotBoxSize, pointerCursor, size: dotSize }), - leftFlipper : createLeftFlipperCSS({ boxWidth: flipperBoxWidth, pointerCursor, size: flipperSize }), - rightFlipper : createRightFlipperCSS({ boxWidth: flipperBoxWidth, pointerCursor, size: flipperSize }), + dotsItem : createDotsItemCSS({ boxSize: dotBoxSize, cursor, size: dotSize }), + leftFlipper : createLeftFlipperCSS({ boxWidth: flipperBoxWidth, cursor, size: flipperSize }), + rightFlipper : createRightFlipperCSS({ boxWidth: flipperBoxWidth, cursor, size: flipperSize }), scrollBarBox : createScrollBarBoxCSS({ margin: scrollBarMargin }), scrollBarHandler: createScrollBarHandlerCSS({ height: scrollBarHeight }) }; diff --git a/packages/playground/src/App.js b/packages/playground/src/App.js index aab1e4f..e8f2943 100644 --- a/packages/playground/src/App.js +++ b/packages/playground/src/App.js @@ -11,7 +11,7 @@ const LIST_FILM_ITEM_CSS = css({ width: 200 }); -const styleSet = createBasicStyleSet({ autoHide: false, pointerCursor: false }); +const styleSet = createBasicStyleSet({ autoHide: false, cursor: null }); const myStyleSet = { ...styleSet, scrollBarHandler: styleSet.scrollBarHandler + ' ' + css({ backgroundColor: 'Red' })