Time machine updates (#9693)

* Replace slider with tree view

* more redesign work

* add entry for now and set interval to 5 minutes

react-common/components/controls/FocusList.tsx

@@ -57,6 +57,42 @@ export const FocusList = (props: FocusListProps) => {
         }
     }
 
+    const isFocusable = (e: HTMLElement) => {
+        return e.getAttribute("data-isfocusable") === "true"
+            && getComputedStyle(e).display !== "none";
+    }
+
+    const firstFocusableElement = () => {
+        return focusableElements.find(e => isFocusable(e))
+    }
+
+    const lastFocusableElement = () => {
+        for (let i = 0; i < focusableElements.length; i++) {
+            if (isFocusable(focusableElements[focusableElements.length - 1 - i])) {
+                return focusableElements[focusableElements.length - 1 - i];
+            }
+        }
+
+        return focusableElements[0];
+    }
+
+    const nextFocusableElement = (index: number, forwards: boolean) => {
+        let current: HTMLElement
+        for (let i = 1; i < focusableElements.length; i++) {
+            if (forwards) {
+                current = focusableElements[(index + i) % focusableElements.length];
+            }
+            else {
+                current = focusableElements[(index + focusableElements.length - i) % focusableElements.length];
+            }
+
+            if (isFocusable(current)) {
+                return current;
+            }
+        }
+        return focusableElements[0];
+    }
+
     const onKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
         if  (!focusableElements?.length) return;
 
@@ -84,31 +120,31 @@ export const FocusList = (props: FocusListProps) => {
         }
         else if (e.key === (useUpAndDownArrowKeys ? "ArrowDown" : "ArrowRight")) {
             if (index === focusableElements.length - 1 || target === focusList) {
-                focus(focusableElements[0]);
+                focus(firstFocusableElement());
             }
             else {
-                focus(focusableElements[index + 1]);
+                focus(nextFocusableElement(index, true));
             }
             e.preventDefault();
             e.stopPropagation();
         }
         else if (e.key === (useUpAndDownArrowKeys ? "ArrowUp" : "ArrowLeft")) {
             if (index === 0 || target === focusList) {
-                focus(focusableElements[focusableElements.length - 1]);
+                focus(lastFocusableElement());
             }
             else {
-                focus(focusableElements[Math.max(index - 1, 0)]);
+                focus(nextFocusableElement(index, false));
             }
             e.preventDefault();
             e.stopPropagation();
         }
         else if (e.key === "Home") {
-            focus(focusableElements[0]);
+            focus(firstFocusableElement());
             e.preventDefault();
             e.stopPropagation();
         }
         else if (e.key === "End") {
-            focus(focusableElements[focusableElements.length - 1]);
+            focus(lastFocusableElement());
             e.preventDefault();
             e.stopPropagation();
         }

react-common/components/controls/Tree.tsx

@@ -0,0 +1,153 @@
+import * as React from "react";
+
+import { ContainerProps, classList } from "../util";
+import { FocusList } from "./FocusList";
+
+export interface TreeProps extends ContainerProps {
+    role?: "tree" | "group";
+}
+
+export interface TreeItemProps extends ContainerProps {
+    role?: "treeitem";
+    onClick?: () => void;
+    initiallyExpanded?: boolean;
+}
+
+export interface TreeItemBodyProps extends ContainerProps {
+}
+
+export const Tree = (props: TreeProps) => {
+    const {
+        children,
+        id,
+        className,
+        ariaLabel,
+        ariaHidden,
+        ariaDescribedBy,
+        role,
+    } = props;
+
+    if (!role || role === "tree") {
+        return (
+            <FocusList
+                className={classList("common-tree", className)}
+                id={id}
+                aria-label={ariaLabel}
+                aria-hidden={ariaHidden}
+                aria-describedby={ariaDescribedBy}
+                role={role || "tree"}
+            >
+                {children}
+            </FocusList>
+        )
+    }
+
+    return (
+        <div
+            className={classList("common-tree", "subtree", className)}
+            id={id}
+            aria-label={ariaLabel}
+            aria-hidden={ariaHidden}
+            aria-describedby={ariaDescribedBy}
+            role={role || "tree"}
+        >
+            {children}
+        </div>
+    )
+};
+
+export const TreeItem = (props: TreeItemProps) => {
+    const {
+        children,
+        id,
+        className,
+        ariaLabel,
+        ariaHidden,
+        ariaDescribedBy,
+        role,
+        initiallyExpanded,
+        onClick
+    } = props;
+
+    const [expanded, setExpanded] = React.useState(initiallyExpanded);
+    const mappedChildren = React.Children.toArray(children);
+    const hasSubtree = mappedChildren.length > 1;
+
+    const subtreeContainer = React.useRef<HTMLDivElement>()
+
+    React.useEffect(() => {
+        if (!hasSubtree) return;
+
+        if (expanded) {
+            const focusable = subtreeContainer.current.querySelectorAll(`[tabindex]:not([tabindex="-1"]),[data-isfocusable]`);
+            focusable.forEach(f => f.setAttribute("data-isfocusable", "true"));
+        }
+        else {
+            const focusable = subtreeContainer.current.querySelectorAll(`[tabindex]:not([tabindex="-1"]),[data-isfocusable]`);
+            focusable.forEach(f => f.setAttribute("data-isfocusable", "false"));
+        }
+    }, [expanded, hasSubtree]);
+
+    const onTreeItemClick = React.useCallback(() => {
+        if (hasSubtree) {
+            setExpanded(!expanded);
+        }
+        if (onClick) {
+            onClick();
+        }
+    }, [hasSubtree, expanded])
+
+    return (
+        <div
+            className="common-treeitem-container"
+            id={id}
+            aria-label={ariaLabel}
+            aria-hidden={ariaHidden}
+            aria-describedby={ariaDescribedBy}
+            role={role || "treeitem"}
+
+        >
+            <div className={classList("common-treeitem", className)} onClick={onTreeItemClick}>
+                {hasSubtree &&
+                    <i
+                        className={classList("fas", expanded ? "fa-chevron-down" : "fa-chevron-right")}
+                        aria-hidden={true}
+                    />
+                }
+                {mappedChildren[0]}
+            </div>
+            <div
+                ref={subtreeContainer}
+                style={{ display: expanded ? undefined : "none" }}
+            >
+                {hasSubtree ? mappedChildren[1] : undefined}
+            </div>
+        </div>
+    );
+}
+
+export const TreeItemBody = (props: TreeItemBodyProps) => {
+    const {
+        children,
+        id,
+        className,
+        ariaLabel,
+        ariaHidden,
+        ariaDescribedBy,
+        role,
+    } = props;
+
+    return (
+        <div
+            className={classList("common-treeitembody", className)}
+            id={id}
+            aria-label={ariaLabel}
+            aria-hidden={ariaHidden}
+            aria-describedby={ariaDescribedBy}
+            role={role}
+            tabIndex={0}
+        >
+            {children}
+        </div>
+    );
+}

react-common/styles/controls/Tree.less

@@ -0,0 +1,33 @@
+.common-tree {
+    display: flex;
+    flex-direction: column;
+}
+
+.common-tree.subtree .common-treeitem {
+    // The width of the chevron is 1.81rem + 0.25rem margin
+    padding-left: 2.06rem;
+}
+
+.common-treeitem {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    height: 3rem;
+    cursor: pointer;
+
+    background-color: @treeitemBackgroundColor;
+
+    text-wrap: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.common-treeitem:hover {
+    filter: grayscale(.15) brightness(.85) contrast(1.3);
+}
+
+.common-treeitem-container {
+    display: flex;
+    flex-direction: column;
+}

react-common/styles/react-common-variables.less

@@ -141,4 +141,11 @@
 
 @progressBarBorder: #7D7D7D;
 @progressBarUnfilledColor: #EEE;
-@progressBarFilledColor: #5874e1;
+@progressBarFilledColor: #5874e1;
+
+
+/****************************************************
+ *                     Tree View                    *
+ ****************************************************/
+
+ @treeitemBackgroundColor: #ffffff;

react-common/styles/react-common.less

@@ -21,6 +21,7 @@
 @import "controls/RadioButtonGroup.less";
 @import "controls/Spinner.less";
 @import "controls/Textarea.less";
+@import "controls/Tree.less";
 @import "controls/VerticalResizeContainer.less";
 @import "controls/VerticalSlider.less";
 @import "./react-common-variables.less";