From 05fe7bb89e51f3d8b643726f3283ba8adee740e4 Mon Sep 17 00:00:00 2001 From: Melissa Zhang Date: Thu, 4 Jun 2020 16:22:27 -0700 Subject: hover to show autoscroll button --- src/client/views/DocumentDecorations.tsx | 7 +- .../collections/CollectionCarousel3DView.scss | 49 ++++++++++-- .../views/collections/CollectionCarousel3DView.tsx | 86 +++++++++++++--------- src/client/views/collections/CollectionView.tsx | 2 +- 4 files changed, 100 insertions(+), 44 deletions(-) (limited to 'src') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 04f02c683..7cdf955a1 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -1,5 +1,5 @@ import { IconProp, library } from '@fortawesome/fontawesome-svg-core'; -import { faCaretUp, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faTextHeight, faArrowAltCircleDown, faArrowAltCircleUp, faCheckCircle, faCloudUploadAlt, faLink, faShare, faStopCircle, faSyncAlt, faTag, faTimes } from '@fortawesome/free-solid-svg-icons'; +import { faCaretUp, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faTextHeight, faArrowAltCircleDown, faArrowAltCircleUp, faCheckCircle, faCloudUploadAlt, faLink, faShare, faStopCircle, faSyncAlt, faTag, faTimes, faAngleLeft, faAngleRight, faAngleDoubleLeft, faAngleDoubleRight, faPause } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { action, computed, observable, reaction, runInAction } from "mobx"; import { observer } from "mobx-react"; @@ -38,6 +38,11 @@ library.add(faCheckCircle); library.add(faCloudUploadAlt); library.add(faSyncAlt); library.add(faShare); +library.add(faAngleDoubleLeft); +library.add(faAngleDoubleRight); +library.add(faAngleLeft); +library.add(faAngleRight); +library.add(faPause); @observer export class DocumentDecorations extends React.Component<{}, { value: string }> { diff --git a/src/client/views/collections/CollectionCarousel3DView.scss b/src/client/views/collections/CollectionCarousel3DView.scss index d00a666f8..ff63f4116 100644 --- a/src/client/views/collections/CollectionCarousel3DView.scss +++ b/src/client/views/collections/CollectionCarousel3DView.scss @@ -1,4 +1,4 @@ -.collectionCarouselView-outer { +.collectionCarousel3DView-outer { height: 100%; position: relative; background-color: white; @@ -11,14 +11,14 @@ align-items: center; transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955); - .collectionCarouselView-item, - .collectionCarouselView-item-active { + .collectionCarousel3DView-item, + .collectionCarousel3DView-item-active { flex: 1; transition: opacity 0.3s linear, transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); pointer-events: none; } - .collectionCarouselView-item-active { + .collectionCarousel3DView-item-active { pointer-events: unset; } } @@ -46,7 +46,44 @@ } } -.carouselView-back, -.carouselView-forward { +.carousel3DView-back, +.carousel3DView-fwd, +.carousel3DView-back-scroll, +.carousel3DView-fwd-scroll { + position: absolute; + display: flex; + width: 30; + height: 30; + align-items: center; + border-radius: 5px; + justify-content: center; + background: rgba(255, 255, 255, 0.46); cursor: pointer; +} + +.carousel3DView-fwd { + top: 50%; + right: 0; +} + +.carousel3DView-back { + top: 50%; + left: 0; +} + +.carousel3DView-fwd-scroll { + top: calc(50% - 30px); + right: 0; +} + +.carousel3DView-back-scroll { + top: calc(50% - 30px); + left: 0; +} + +.carousel3DView-back:hover, +.carousel3DView-fwd:hover, +.carousel3DView-back-scroll:hover, +.carousel3DView-fwd-scroll:hover { + background: lightgray; } \ No newline at end of file diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index 2f161e255..1fa96df65 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -21,6 +21,10 @@ const Carousel3DDocument = makeInterface(documentSchema, collectionSchema); @observer export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocument) { + @computed get scrollSpeed() { + return this.layoutDoc._autoScrollSpeed ? NumCast(this.layoutDoc._autoScrollSpeed) : 1000; //default scroll speed + } + private _dropDisposer?: DragManager.DragDropDisposer; componentWillUnmount() { this._dropDisposer?.(); } @@ -74,43 +78,32 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume this.layoutDoc._itemIndex = (NumCast(this.layoutDoc._itemIndex) + direction + this.childLayoutPairs.length) % this.childLayoutPairs.length; } - startScroll = (direction: number) => { - this.layoutDoc.scrollInterval = 500; - this.interval = window.setInterval(() => { - this.changeSlide(direction); - }, this.layoutDoc.scrollInterval); + onArrowClick = (e: React.MouseEvent, direction: number) => { + e.stopPropagation(); + this.changeSlide(direction); } - timer?: number; interval?: number; - onArrowDown = (e: React.PointerEvent, direction: number) => { - e.stopPropagation; + startAutoScroll = (direction: number) => { + this.interval = window.setInterval(() => { + this.changeSlide(direction); + }, this.scrollSpeed); + } - const listener = () => { // is able to pass in the direction parameter and then correctly remove the listener - this.onArrowRelease(direction); - document.removeEventListener("pointerup", listener); - }; - document.addEventListener("pointerup", listener); + stopAutoScroll = () => { + window.clearInterval(this.interval); + this.interval = undefined; + } - this.layoutDoc.startScrollTimeout = 500; - this.timer = window.setTimeout(() => { // if arrow is held down long enough, activate automatic scrolling - window.clearTimeout(this.timer); - this.timer = undefined; - this.startScroll(direction); - }, this.layoutDoc.startScrollTimeout); + toggleAutoScroll = (direction: number) => { + this.layoutDoc.autoScrollOn = this.layoutDoc.autoScrollOn ? false : true; + this.layoutDoc.autoScrollOn ? this.startAutoScroll(direction) : this.stopAutoScroll(); } - onArrowRelease = (direction: number) => { - if (this.timer) { - this.changeSlide(direction); // if click wasn't long enough to activate autoscroll, only advance/go back 1 slide - window.clearTimeout(this.timer); - this.timer = undefined; - } + 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); - if (this.interval) { - window.clearInterval(this.interval); // stop scrolling - this.interval = undefined; - } } onContextMenu = (e: React.MouseEvent): void => { @@ -148,14 +141,35 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume } @computed get buttons() { - return <> -
this.onArrowDown(e, -1)}> - + if (!this.props.active()) return null; + return
this.showAutoScrollButton("none")}> +
this.onArrowClick(e, -1)} + onMouseEnter={() => this.showAutoScrollButton("back")}> +
-
this.onArrowDown(e, 1)}> - +
this.onArrowClick(e, 1)} + onMouseEnter={() => this.showAutoScrollButton("fwd")}> + +
+ {this.autoScrollButton} +
; + } + + @computed get autoScrollButton() { + const direction = this.layoutDoc.showScrollButton; + if (direction !== "back" && direction !== "fwd") return null; + + const offset = (direction === "back") ? -1 : 1; + return <> +
this.toggleAutoScroll(offset)}> + {this.layoutDoc.autoScrollOn ? + : + direction === "back" ? + : + }
; } diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index a0f6ad9c7..82aa3dbd5 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -64,7 +64,7 @@ export enum CollectionViewType { Multirow = "multirow", Time = "time", Carousel = "carousel", - Carousel3D = "3D carousel", + Carousel3D = "3D Carousel", Linear = "linear", Staff = "staff", Map = "map", -- cgit v1.2.3-70-g09d2