diff options
| -rw-r--r-- | src/client/views/collections/CollectionCarousel3DView.scss | 40 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionCarousel3DView.tsx | 60 |
2 files changed, 58 insertions, 42 deletions
diff --git a/src/client/views/collections/CollectionCarousel3DView.scss b/src/client/views/collections/CollectionCarousel3DView.scss index ff63f4116..5f8895c1f 100644 --- a/src/client/views/collections/CollectionCarousel3DView.scss +++ b/src/client/views/collections/CollectionCarousel3DView.scss @@ -32,8 +32,8 @@ .dot, .dot-active { - height: 15px; - width: 15px; + height: 10px; + width: 10px; border-radius: 50%; margin: 3px; display: inline-block; @@ -49,7 +49,9 @@ .carousel3DView-back, .carousel3DView-fwd, .carousel3DView-back-scroll, -.carousel3DView-fwd-scroll { +.carousel3DView-fwd-scroll, +.carousel3DView-back-scroll-hidden, +.carousel3DView-fwd-scroll-hidden { position: absolute; display: flex; width: 30; @@ -61,24 +63,40 @@ cursor: pointer; } -.carousel3DView-fwd { +.carousel3DView-fwd, +.carousel3DView-back { top: 50%; +} + +.carousel3DView-fwd-scroll, +.carousel3DView-back-scroll, +.carousel3DView-fwd-scroll-hidden, +.carousel3DView-back-scroll-hidden { + top: calc(50% - 30px); +} + +.carousel3DView-fwd, +.carousel3DView-fwd-scroll, +.carousel3DView-fwd-scroll-hidden { right: 0; } -.carousel3DView-back { - top: 50%; +.carousel3DView-back, +.carousel3DView-back-scroll, +.carousel3DView-back-scroll-hidden { left: 0; } -.carousel3DView-fwd-scroll { - top: calc(50% - 30px); - right: 0; +.carousel3DView-fwd-scroll-hidden, +.carousel3DView-back-scroll-hidden { + opacity: 0; + transition: opacity 0.5s linear; + pointer-events: none; } +.carousel3DView-fwd-scroll, .carousel3DView-back-scroll { - top: calc(50% - 30px); - left: 0; + opacity: 1; } .carousel3DView-back:hover, diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index 1fa96df65..a7d9c41c8 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -46,8 +46,7 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume onClick={ScriptField.MakeScript( "child._showCaption = 'caption'", { child: Doc.name }, - { child: childPair.layout } - )} + { child: childPair.layout })} renderDepth={this.props.renderDepth + 1} LayoutTemplate={this.props.ChildLayoutTemplate} LayoutTemplateString={this.props.ChildLayoutString} @@ -61,17 +60,16 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume />; }; - return ( - this.childLayoutPairs.map((childPair, index) => { - return ( - <div key={childPair.layout[Id]} - className={`collectionCarousel3DView-item${index === currentIndex ? "-active" : ""} ${index}`} - style={index === currentIndex ? - { opacity: '1', transform: 'scale(1.3)' } : - { opacity: '0.5', transform: 'scale(0.6)', userSelect: 'none' }}> - {displayDoc(childPair)} - </div>); - })); + return (this.childLayoutPairs.map((childPair, index) => { + return ( + <div key={childPair.layout[Id]} + className={`collectionCarousel3DView-item${index === currentIndex ? "-active" : ""} ${index}`} + style={index === currentIndex ? + { opacity: '1', transform: 'scale(1.3)' } : + { opacity: '0.5', transform: 'scale(0.6)', userSelect: 'none' }}> + {displayDoc(childPair)} + </div>); + })); } changeSlide = (direction: number) => { @@ -81,6 +79,8 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume onArrowClick = (e: React.MouseEvent, direction: number) => { e.stopPropagation(); this.changeSlide(direction); + !this.layoutDoc.autoScrollOn && (this.layoutDoc.showScrollButton = (direction === 1) ? "fwd" : "back"); // while autoscroll is on, keep the other autoscroll button hidden + !this.layoutDoc.autoScrollOn && this.fadeScrollButton(); // keep pause button visible while autoscroll is on } interval?: number; @@ -93,6 +93,7 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume stopAutoScroll = () => { window.clearInterval(this.interval); this.interval = undefined; + this.fadeScrollButton(); } toggleAutoScroll = (direction: number) => { @@ -100,10 +101,10 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume this.layoutDoc.autoScrollOn ? this.startAutoScroll(direction) : this.stopAutoScroll(); } - showAutoScrollButton = (direction: string) => { - // keep pause button visible while autoscroll is on, and don't show the other side's autoscroll button - !this.layoutDoc.autoScrollOn && (this.layoutDoc.showScrollButton = direction); - + fadeScrollButton = () => { + window.setTimeout(() => { + !this.layoutDoc.autoScrollOn && (this.layoutDoc.showScrollButton = "none"); //fade away after 1.5s if it's not clicked. + }, 1500); } onContextMenu = (e: React.MouseEvent): void => { @@ -142,15 +143,15 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume @computed get buttons() { if (!this.props.active()) return null; - return <div className="arrow-buttons" onMouseLeave={() => this.showAutoScrollButton("none")}> + return <div className="arrow-buttons" > <div key="back" className="carousel3DView-back" style={{ background: `${StrCast(this.props.Document.backgroundColor)}` }} onClick={(e) => this.onArrowClick(e, -1)} - onMouseEnter={() => this.showAutoScrollButton("back")}> + > <FontAwesomeIcon icon={"angle-left"} size={"2x"} /> </div> <div key="fwd" className="carousel3DView-fwd" style={{ background: `${StrCast(this.props.Document.backgroundColor)}` }} onClick={(e) => this.onArrowClick(e, 1)} - onMouseEnter={() => this.showAutoScrollButton("fwd")}> + > <FontAwesomeIcon icon={"angle-right"} size={"2x"} /> </div> {this.autoScrollButton} @@ -158,18 +159,15 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume } @computed get autoScrollButton() { - const direction = this.layoutDoc.showScrollButton; - if (direction !== "back" && direction !== "fwd") return null; - - const offset = (direction === "back") ? -1 : 1; + const whichButton = this.layoutDoc.showScrollButton; return <> - <div className={`carousel3DView-${direction}-scroll`} style={{ background: `${StrCast(this.props.Document.backgroundColor)}` }} - onClick={() => this.toggleAutoScroll(offset)}> - {this.layoutDoc.autoScrollOn ? - <FontAwesomeIcon icon={"pause"} size={"1x"} /> : - direction === "back" ? - <FontAwesomeIcon icon={"angle-double-left"} size={"1x"} /> : - <FontAwesomeIcon icon={"angle-double-right"} size={"1x"} />} + <div className={`carousel3DView-back-scroll${whichButton === "back" ? "" : "-hidden"}`} style={{ background: `${StrCast(this.props.Document.backgroundColor)}` }} + onClick={() => this.toggleAutoScroll(-1)}> + {this.layoutDoc.autoScrollOn ? <FontAwesomeIcon icon={"pause"} size={"1x"} /> : <FontAwesomeIcon icon={"angle-double-left"} size={"1x"} />} + </div> + <div className={`carousel3DView-fwd-scroll${whichButton === "fwd" ? "" : "-hidden"}`} style={{ background: `${StrCast(this.props.Document.backgroundColor)}` }} + onClick={() => this.toggleAutoScroll(1)}> + {this.layoutDoc.autoScrollOn ? <FontAwesomeIcon icon={"pause"} size={"1x"} /> : <FontAwesomeIcon icon={"angle-double-right"} size={"1x"} />} </div> </>; } |