@itwin/imodel-components-react 3.0.0-dev.77 → 3.0.0-dev.81

package/lib/esm/imodel-components-react/timeline/SolarTimeline.scss

@@ -0,0 +1,358 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+
+$top-position: 6px;
+$bottom-position: 4px;
+
+.solar-slider.solar-timeline>.iui-slider-container {
+  height: 28px;
+}
+
+.solar-timeline-wrapper {
+  box-sizing: border-box;
+  background: $buic-background-2;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  padding: 8px 16px;
+  color: $buic-foreground-body;
+  font-size: 14px;
+
+  >.header {
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    >.play-button {
+      width: 26px;
+      height: 26px;
+      background: inherit;
+      border: none;
+      font-size: 20px;
+    }
+
+    >.shadow-settings-button {
+      display: flex;
+      align-items: center;
+      color: $buic-foreground-body;
+      width: 26px;
+      height: 26px;
+      background: inherit;
+      border: none;
+      font-size: 16px;
+      margin-left: 6px;
+      cursor: pointer;
+
+      &:hover {
+        color: $buic-foreground-activehover;
+      }
+
+      &:focus {
+        outline: none;
+      }
+    }
+
+    >.current-date {
+      min-width: 175px;
+      margin-left: 8px;
+      margin-right: 4px;
+      background: inherit;
+      padding: 3px 4px;
+      border: none;
+      display: flex;
+      align-items: center;
+      color: $buic-foreground-body;
+      font-size: 14px;
+      cursor: pointer;
+
+      >span:nth-child(2) {
+        margin: 0 6px;
+      }
+
+      >.icon-calendar {
+        flex-grow: 1;
+        margin-left: auto;
+      }
+    }
+
+    >.speed-container {
+      display: flex;
+      align-items: center;
+      margin-left: auto;
+      cursor: pointer;
+
+      >.speed {
+        margin-left: 12px;
+        width: 0;
+        opacity: 0;
+        transition: all .2s linear;
+        margin-right: 10px;
+      }
+    }
+
+    >.loop-playback {
+      color: $buic-foreground-primary;
+      font-size: 16px;
+      cursor: pointer;
+
+      &:hover {
+        color: $buic-foreground-primary-tone;
+      }
+
+      &:focus {
+        outline: none;
+      }
+    }
+
+    >.no-loop-playback {
+      color: $buic-foreground-body;
+      font-size: 16px;
+      cursor: pointer;
+
+      &:hover {
+        color: $buic-foreground-activehover;
+      }
+
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+
+  .solar-slider {
+    position: relative;
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    flex: 1;
+
+    .rail-outer {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 100%;
+      height: 20px;
+      cursor: pointer;
+    }
+
+    .rail-inner,
+    .rail-solar {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      height: 4px;
+      pointer-events: none;
+    }
+
+    .rail-inner {
+      width: 100%;
+      background: $buic-background-5;
+    }
+
+    .rail-solar {
+      background: $buic-foreground-primary;
+      z-index: 1;
+    }
+
+    .rail-tooltip {
+      position: absolute;
+      margin-left: -11px;
+      top: 0;
+      transform: translateY(-50%);
+      z-index: 1;
+    }
+
+    .solar-handle {
+      position: absolute;
+      top: 50%;
+      z-index: 4;
+      width: 38px;
+      height: 20px;
+      border-radius: 3px;
+      border: 1px solid $buic-background-5;
+      background-image: linear-gradient(to bottom, $buic-background-3, $buic-background-3), linear-gradient(to bottom, $buic-background-1, $buic-background-1);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      transform: translate(-50%, -50%);
+      cursor: pointer;
+
+      >div {
+        width: 1px;
+        height: 10px;
+        opacity: 0.25;
+        margin: 0 1px;
+        background-color: $buic-foreground-body;
+      }
+    }
+
+    .tick-mark {
+      position: absolute;
+      bottom: calc(#{$bottom-position} + 15px);
+      width: 1px;
+      height: 5px;
+      background: rgb(200, 200, 200);
+    }
+
+    .tick-label {
+      position: absolute;
+      bottom: $bottom-position;
+      font-size: 10px;
+      text-align: center;
+    }
+
+    .sunrise,
+    .sunset {
+      font-size: 22px;
+      cursor: default;
+    }
+
+    .sunset {
+      margin: 0px 16px 2px 24px;
+    }
+
+    .sunrise {
+      color: #ffcf00;
+      margin: 0 24px 0 8px;
+    }
+
+  }
+}
+
+.solar-timeline-wrapper>.header>.speed-container:hover>.speed {
+  opacity: 1;
+  width: 80px;
+}
+
+.solar-timeline-wrapper.expanded .header .expanded-icon {
+  transform: rotate(180deg);
+}
+
+.solar-timeline-wrapper.expanded>.header>.current-date {
+  margin-left: 70px;
+}
+
+.solar-timeline-wrapper .solar-timeline-expanded {
+  display: none;
+  margin-bottom: 8px;
+}
+
+.solar-timeline-wrapper .solar-timeline {
+  display: flex;
+}
+
+.solar-timeline-wrapper.expanded {
+  height: 100px;
+}
+
+
+
+.shadow-settings-color-top {
+  display: inline;
+}
+
+.shadow-settings-color-bottom {
+  display: flex;
+  flex-direction: row;
+}
+
+.shadow-settings-popup-container {
+  width: 220px;
+  padding: 10px 10px 0px;
+  display: flex;
+  flex-direction: column;
+
+  .shadow-settings-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 6px;
+  }
+
+  .shadow-settings-color {
+    display: flex;
+    flex-direction: column;
+
+    .shadow-settings-color-top {
+      height: 150px;
+      margin: 1em;
+    }
+
+    .shadow-settings-color-bottom {
+      width: 100%;
+      height: 32px;
+      margin-top: 10px;
+      margin-bottom: 10px;
+
+      .shadow-settings-color-bottom-left {
+        width: calc(100% - 2em - 32px);
+        height: 100%;
+        margin-left: 1em;
+        margin-right: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .shadow-settings-color-bottom-right {
+        width: 32px;
+        height: 100%;
+      }
+    }
+  }
+
+  .shadow-settings-color-presets {
+    width: 100%;
+    height: 24px;
+    padding-top: 10px;
+    margin-bottom: 10px;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-column-gap: 2px;
+    border-top: 1px solid $buic-background-5;
+  }
+}
+
+.sunrise-tip {
+  position: absolute;
+  top: -8px;
+  display: inline-block;
+  border-bottom: 1px dotted #222;
+  font-size: 14px;
+}
+
+.solar-tooltip-text {
+  width: 100px;
+  background-color: #222;
+  color: #fff;
+  // opacity: 0.8;
+  text-align: center;
+  border-radius: 6px;
+  padding: 8px 0;
+  position: absolute;
+  z-index: 1;
+  bottom: 150%;
+  left: 50%;
+  margin-left: -60px;
+
+  &:after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: #222 transparent transparent transparent;
+  }
+}
+
+.core-tooltip-tooltip.components-rail-tooltip {
+  pointer-events: none;
+}

package/lib/esm/imodel-components-react/timeline/SpeedTimeline.d.ts

@@ -0,0 +1,16 @@
+/** @packageDocumentation
+ * @module Timeline
+ */
+/// <reference types="react" />
+import "./SpeedTimeline.scss";
+import { CommonProps } from "@itwin/core-react";
+interface SpeedProps extends CommonProps {
+    speed: number;
+    onChange?: (value: number) => void;
+}
+/** Speed Timeline used in Solar Timeline component
+ * @internal
+ */
+export declare function SpeedTimeline(props: SpeedProps): JSX.Element;
+export {};
+//# sourceMappingURL=SpeedTimeline.d.ts.map

package/lib/esm/imodel-components-react/timeline/SpeedTimeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpeedTimeline.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/SpeedTimeline.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAEH,OAAO,sBAAsB,CAAC;AAI9B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD,UAAU,UAAW,SAAQ,WAAW;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED;;GAEG;AAEH,wBAAgB,aAAa,CAAC,KAAK,EAAE,UAAU,eA2B9C"}

package/lib/esm/imodel-components-react/timeline/SpeedTimeline.js

@@ -0,0 +1,29 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Timeline
+ */
+import "./SpeedTimeline.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { Slider } from "@itwin/itwinui-react";
+/** Speed Timeline used in Solar Timeline component
+ * @internal
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function SpeedTimeline(props) {
+    // istanbul ignore next - WIP
+    const onChange = (values) => {
+        const value = values[0];
+        if (props.onChange && (value >= 1 && value <= 6))
+            props.onChange(value);
+    };
+    const tooltipProps = React.useCallback(() => {
+        return { visible: false };
+    }, []);
+    return (React.createElement("div", { className: classnames("speed-timeline", props.className) },
+        React.createElement(Slider, { step: 1, min: 1, max: 6, minLabel: "", maxLabel: "", onUpdate: onChange, onChange: onChange, values: [props.speed], trackDisplayMode: "none", tooltipProps: tooltipProps })));
+}
+//# sourceMappingURL=SpeedTimeline.js.map

package/lib/esm/imodel-components-react/timeline/SpeedTimeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpeedTimeline.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/SpeedTimeline.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAC9B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAU9C;;GAEG;AACH,gEAAgE;AAChE,MAAM,UAAU,aAAa,CAAC,KAAiB;IAC7C,6BAA6B;IAC7B,MAAM,QAAQ,GAAG,CAAC,MAA6B,EAAE,EAAE;QACjD,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;QACxB,IAAI,KAAK,CAAC,QAAQ,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC;YAC9C,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC1C,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;IAC5B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,6BAAK,SAAS,EAAE,UAAU,CAAC,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC;QAC3D,oBAAC,MAAM,IACL,IAAI,EAAE,CAAC,EACP,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,CAAC,EACN,QAAQ,EAAC,EAAE,EACX,QAAQ,EAAC,EAAE,EACX,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,EACrB,gBAAgB,EAAC,MAAM,EACvB,YAAY,EAAE,YAAY,GAAI,CAC5B,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Timeline\n */\n\nimport \"./SpeedTimeline.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Slider } from \"@itwin/itwinui-react\";\nimport { CommonProps } from \"@itwin/core-react\";\n\n// component is in alpha state - it may change after usability testing - test coverage not complete\n\ninterface SpeedProps extends CommonProps {\n  speed: number;\n  onChange?: (value: number) => void;\n}\n\n/** Speed Timeline used in Solar Timeline component\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function SpeedTimeline(props: SpeedProps) {\n  // istanbul ignore next - WIP\n  const onChange = (values: ReadonlyArray<number>) => {\n    const value = values[0];\n    if (props.onChange && (value >= 1 && value <= 6))\n      props.onChange(value);\n  };\n\n  const tooltipProps = React.useCallback(() => {\n    return { visible: false };\n  }, []);\n\n  return (\n    <div className={classnames(\"speed-timeline\", props.className)}>\n      <Slider\n        step={1}\n        min={1}\n        max={6}\n        minLabel=\"\"\n        maxLabel=\"\"\n        onUpdate={onChange}\n        onChange={onChange}\n        values={[props.speed]}\n        trackDisplayMode=\"none\"\n        tooltipProps={tooltipProps} />\n    </div>\n  );\n}\n"]}

package/lib/esm/imodel-components-react/timeline/SpeedTimeline.scss

@@ -0,0 +1,40 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+
+.speed-timeline {
+  position: relative;
+  height: 25px;
+
+  .railOuter {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+  }
+
+  .railInner {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 100%;
+    height: 2px;
+    pointer-events: none;
+    background: $buic-background-5;
+  }
+
+  .scrubberHandle {
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 4;
+    width: 12px;
+    height: 12px;
+    cursor: pointer;
+    border: none;
+    border-radius: 50%;
+    background: $buic-foreground-primary;
+  }
+}

package/lib/esm/imodel-components-react/timeline/Timeline.scss

@@ -0,0 +1,165 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+
+.timeline {
+    position: relative;
+    height: 110px;
+    background: $buic-background-1;
+    border: 1px solid $buic-background-5;
+    box-sizing: border-box;
+}
+
+.rail {
+    position: absolute;
+    width: 100%;
+    height: 40px;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+    z-index: 3;
+}
+
+.rail-center {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 4px;
+    cursor: pointer;
+    pointer-events: none;
+    background: $buic-background-5;
+}
+
+.tooltip-rail {
+    position: absolute;
+    margin-left: -11px;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1;
+}
+
+.needle {
+    position: absolute;
+    top: 0;
+    transform: translateX(-50%);
+    z-index: 4;
+    width: 2px;
+    height: 100%;
+    background: $buic-foreground-primary;
+    cursor: pointer;
+}
+
+.handle {
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 4;
+    width: 14px;
+    height: 14px;
+    cursor: pointer;
+    border: none;
+    border-radius: 50%;
+    background: $buic-foreground-primary;
+    border: 2px solid $buic-background-1;
+
+    >span {
+        position: absolute;
+        left: 50%;
+        bottom: -25px;
+        font-size: 14px;
+        white-space: nowrap;
+        transform: translateX(-50%);
+        color: rgba(black, .85);
+    }
+
+    input {
+        position: absolute;
+        border: none;
+        margin-top: 10px;
+        top: 1.2rem;
+        left: 50%;
+        transform: translateX(-50%);
+        cursor: pointer;
+    }
+
+    input:focus {
+        cursor: text;
+        left: -.25rem;
+        top: calc(1.2rem - .25rem);
+        width: 140px;
+        padding: .25rem;
+        border: 1px solid #ddd;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, .11);
+        box-sizing: border-box;
+        outline: none;
+    }
+}
+
+.tick-line {
+    position: absolute;
+    width: 2px;
+    height: 11px;
+    transform: translateX(-50%);
+    background: $buic-background-5;
+}
+
+.tick-label {
+    position: absolute;
+    margin-top: 9px;
+    font-size: 14px;
+    color: rgba(black, .85);
+    white-space: nowrap;
+}
+
+.tick-label.start {
+    left: -50px;
+}
+
+.tick-label.end {
+    right: -50px;
+    text-align: right;
+}
+
+.tick-label.tick {
+    margin-left: 11px;
+    text-align: left;
+}
+
+.tooltip {
+    position: absolute;
+    top: -20px;
+    display: inline-block;
+    border-bottom: 1px dotted #222;
+    margin-left: 22px;
+    font-size: 14px;
+
+    .tooltip-text {
+        width: 100px;
+        background-color: #222;
+        color: #fff;
+        // opacity: 0.8;
+        text-align: center;
+        border-radius: 6px;
+        padding: 8px 0;
+        position: absolute;
+        z-index: 1;
+        bottom: 150%;
+        left: 50%;
+        margin-left: -60px;
+
+        &:after {
+            content: "";
+            position: absolute;
+            top: 100%;
+            left: 50%;
+            margin-left: -5px;
+            border-width: 5px;
+            border-style: solid;
+            border-color: #222 transparent transparent transparent;
+        }
+    }
+}