@itwin/imodel-components-react 4.0.0-dev.2 → 4.0.0-dev.21

package/lib/esm/imodel-components-react/navigationaids/CubeNavigationAid.scss

@@ -1,182 +1,178 @@
-/*---------------------------------------------------------------------------------------------
-* 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";
-
-$cube-outer-width: 96px;
-$button-width: 20px;
-$nav-cube-width: 64px;
-$nav-cube-side-width: 14px;
-
-$grad-start: $buic-background-1;
-$grad-end: $buic-background-4;
-
-$grad-start-highlight: $buic-background-2;
-$grad-end-highlight: $buic-background-5;
-
-$arrow-margin: -3px;
-
-.components-cube-container {
-  position: relative;
-  width: $cube-outer-width;
-  height: $cube-outer-width;
-
-  .cube-element-container {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: $cube-outer-width;
-    height: $cube-outer-width;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    .nav-cube {
-      width: $nav-cube-width;
-      height: $nav-cube-width;
-
-      .nav-cube-face {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        height: 100%;
-        font-size: var(--iui-font-size-1);
-        font-weight: var(--iui-font-weight-semibold);
-        color: $buic-text-color;
-        box-shadow: inset 0px 0px 1px 0.2px #000;
-
-        .face-row {
-          display: flex;
-          flex-direction: row;
-          height: $nav-cube-side-width;
-          width: 100%;
-
-          &.cube-center {
-            height: auto;
-            flex-grow: 1;
-          }
-
-          .face-cell {
-            cursor: pointer;
-            user-select: none;
-            width: $nav-cube-side-width;
-
-            &.cube-center {
-              width: auto;
-              flex-grow: 1;
-            }
-
-            &.cube-hover {
-              color: $buic-foreground-activehover;
-              background: $buic-background-active-overlay;
-            }
-
-            &.cube-active {
-              color: $buic-foreground-activehover;
-              background: $buic-background-pressed-overlay;
-            }
-          }
-
-          &.cube-center .face-cell.cube-center {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-          }
-        }
-      }
-
-      .cube-left,
-      .cube-right,
-      .cube-front,
-      .cube-back {
-        background: linear-gradient(#{$grad-start}, #{$grad-end});
-      }
-
-      .cube-top {
-        background: $grad-start;
-      }
-
-      .cube-bottom {
-        background: $grad-end;
-      }
-
-      &.cube-dragging {
-        .face-row .face-cell {
-          &.cube-hover,
-          &.cube-active {
-            background: transparent;
-          }
-        }
-
-        .cube-left,
-        .cube-right,
-        .cube-front,
-        .cube-back {
-          background: linear-gradient(
-            #{$grad-start-highlight},
-            #{$grad-end-highlight}
-          );
-        }
-
-        .cube-top {
-          background: $grad-start-highlight;
-        }
-
-        .cube-bottom {
-          background: $grad-end-highlight;
-        }
-      }
-    }
-  }
-
-  .cube-pointer {
-    position: absolute;
-    height: $button-width;
-    width: $button-width;
-    font-size: $button-width;
-    color: $buic-background-2;
-    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
-    cursor: pointer;
-
-    &:not(.cube-visible) {
-      display: none;
-    }
-
-    &:hover {
-      color: $buic-row-selection;
-    }
-
-    &:focus {
-      outline: none;
-    }
-
-    &.cube-up {
-      margin: $arrow-margin auto;
-      left: 0px;
-      right: 0px;
-      top: 0px;
-    }
-
-    &.cube-down {
-      margin: $arrow-margin auto;
-      left: 0px;
-      right: 0px;
-      bottom: 0px;
-    }
-
-    &.cube-left {
-      margin: auto $arrow-margin;
-      top: 0px;
-      bottom: 0px;
-      left: 0px;
-    }
-
-    &.cube-right {
-      margin: auto $arrow-margin;
-      top: 0px;
-      bottom: 0px;
-      right: 0px;
-    }
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* 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";
+
+$cube-outer-width: 96px;
+$button-width: 20px;
+$nav-cube-width: 64px;
+$nav-cube-side-width: 14px;
+
+$grad-start: var(--iui-color-background);
+$grad-end: var(--iui-color-background-zebra);
+
+$arrow-margin: -3px;
+
+.components-cube-container {
+  position: relative;
+  width: $cube-outer-width;
+  height: $cube-outer-width;
+
+  .cube-element-container {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: $cube-outer-width;
+    height: $cube-outer-width;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .nav-cube {
+      width: $nav-cube-width;
+      height: $nav-cube-width;
+
+      .nav-cube-face {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        font-size: var(--iui-font-size-1);
+        font-weight: var(--iui-font-weight-semibold);
+        color: var(--iui-color-text);
+        box-shadow: inset 0px 0px 1px 0.2px var(--iui-color-border);
+
+        .face-row {
+          display: flex;
+          flex-direction: row;
+          height: $nav-cube-side-width;
+          width: 100%;
+
+          &.cube-center {
+            height: auto;
+            flex-grow: 1;
+          }
+
+          .face-cell {
+            cursor: pointer;
+            user-select: none;
+            width: $nav-cube-side-width;
+
+            &.cube-center {
+              width: auto;
+              flex-grow: 1;
+            }
+
+            &.cube-hover {
+              height: auto;
+              background-color: var(--iui-color-background-accent-muted);
+            }
+
+            &.cube-active {
+              background-color: var(--iui-color-background-accent-muted);
+            }
+          }
+
+          &.cube-center .face-cell.cube-center {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+        }
+      }
+
+      .cube-left,
+      .cube-right,
+      .cube-front,
+      .cube-back {
+        background: linear-gradient(#{$grad-start}, #{$grad-end});
+      }
+
+      .cube-top {
+        background: $grad-start;
+      }
+
+      .cube-bottom {
+        background: $grad-end;
+      }
+
+      &.cube-dragging {
+        .face-row .face-cell {
+          &.cube-hover,
+          &.cube-active {
+            background: transparent;
+          }
+        }
+
+        .cube-left,
+        .cube-right,
+        .cube-front,
+        .cube-back {
+          background: linear-gradient(
+            var(--iui-color-background),
+            var(--iui-color-background-backdrop)
+          );
+        }
+
+        .cube-top {
+          background: var(--iui-color-background);
+        }
+
+        .cube-bottom {
+          background: var(--iui-color-background-backdrop);
+        }
+      }
+    }
+  }
+
+  .cube-pointer {
+    position: absolute;
+    height: $button-width;
+    width: $button-width;
+    font-size: $button-width;
+    color: var(--iui-color-background);
+    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
+    cursor: pointer;
+
+    &:not(.cube-visible) {
+      display: none;
+    }
+
+    &:hover {
+      color: var(--iui-color-background-hover);
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &.cube-up {
+      margin: $arrow-margin auto;
+      left: 0px;
+      right: 0px;
+      top: 0px;
+    }
+
+    &.cube-down {
+      margin: $arrow-margin auto;
+      left: 0px;
+      right: 0px;
+      bottom: 0px;
+    }
+
+    &.cube-left {
+      margin: auto $arrow-margin;
+      top: 0px;
+      bottom: 0px;
+      left: 0px;
+    }
+
+    &.cube-right {
+      margin: auto $arrow-margin;
+      top: 0px;
+      bottom: 0px;
+      right: 0px;
+    }
+  }
+}

package/lib/esm/imodel-components-react/navigationaids/DrawingNavigationAid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DrawingNavigationAid.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/navigationaids/DrawingNavigationAid.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DrawingNavigationAid.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/navigationaids/DrawingNavigationAid.tsx"],"names":[],"mappings":"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"}

package/lib/esm/imodel-components-react/navigationaids/DrawingNavigationAid.js

@@ -12,8 +12,10 @@ import * as ReactDOM from "react-dom";
 import { Constant, Geometry, Matrix3d, Point2d, Point3d, Point4d, Vector3d } from "@itwin/core-geometry";
 import { IModelApp, ScreenViewport } from "@itwin/core-frontend";
 import { SpecialKey } from "@itwin/appui-abstract";
+import { Icon } from "@itwin/core-react";
 import { UiIModelComponents } from "../UiIModelComponents";
 import { ViewportComponentEvents } from "../viewport/ViewportComponentEvents";
+import { SvgAdd, SvgRemove, SvgRotateLeft, SvgSortUp } from "@itwin/itwinui-icons-react";
 // cSpell:ignore Quaternion Quaternions unrotate
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /**
@@ -29,7 +31,7 @@ export var MapMode;
  * A Drawing Navigation Aid.
  * @public
  */
-export class DrawingNavigationAid extends React.Component {
+class DrawingNavigationAid extends React.Component {
     constructor(props) {
         super(props);
         this._rootElement = React.createRef();
@@ -435,15 +437,19 @@ export class DrawingNavigationAid extends React.Component {
             React.createElement("div", { className: "drawing-container", "data-testid": "drawing-container", ref: this._viewContainerElement },
                 React.createElement("div", { className: "drawing-view-window", "data-testid": "drawing-view-window", onMouseDown: this._handleWindowMouseDown, onTouchStart: this._handleWindowTouchStart, style: viewWindowStyle, ref: this._viewElement, role: "presentation" }),
                 !is3D &&
-                    React.createElement("div", { className: classnames("toggle-rotate-style", "icon", "icon-rotate-left", { checked: rotateMinimapWithView }), "data-testid": "toggle-rotate-style", style: mode === MapMode.Closed && !isAnimating ? { bottom: 2, left: 2 } : {}, title: UiIModelComponents.translate("drawing.rotateStyle"), onClick: this._toggleRotationMode, role: "presentation" }),
+                    React.createElement("div", { className: classnames("toggle-rotate-style", "icon", { checked: rotateMinimapWithView }), "data-testid": "toggle-rotate-style", style: mode === MapMode.Closed && !isAnimating ? { bottom: 2, left: 2 } : {}, title: UiIModelComponents.translate("drawing.rotateStyle"), onClick: this._toggleRotationMode, role: "presentation" },
+                        React.createElement(Icon, { iconSpec: React.createElement(SvgRotateLeft, null) })),
                 !rot.isIdentity &&
                     React.createElement("div", { className: "unrotate-button", "data-testid": "drawing-unrotate-button", style: mode === MapMode.Closed && !isAnimating ? { top: 2 } : {}, onClick: this._handleUnrotate, role: "button", tabIndex: -1 }, unrotateLabel),
                 mode === MapMode.Opened && !isAnimating && React.createElement(React.Fragment, null,
                     React.createElement("div", { className: "close", "data-testid": "drawing-close-button", onClick: this._closeLargeMap, role: "button", tabIndex: -1 },
-                        React.createElement("div", { className: "close-icon icon icon-sort-up" })),
+                        React.createElement("div", { className: "close-icon icon" },
+                            React.createElement(Icon, { iconSpec: React.createElement(SvgSortUp, null) }))),
                     React.createElement("div", { className: "zoom" },
-                        React.createElement("div", { className: "zoom-button icon icon-add", "data-testid": "drawing-zoom-in-button", onClick: this._handleZoomIn, role: "button", tabIndex: -1 }),
-                        React.createElement("div", { className: "zoom-button icon icon-remove-2", "data-testid": "drawing-zoom-out-button", onClick: this._handleZoomOut, role: "button", tabIndex: -1 }))))));
+                        React.createElement("div", { className: "zoom-button icon", "data-testid": "drawing-zoom-in-button", onClick: this._handleZoomIn, role: "button", tabIndex: -1 },
+                            React.createElement(Icon, { iconSpec: React.createElement(SvgAdd, null) })),
+                        React.createElement("div", { className: "zoom-button icon", "data-testid": "drawing-zoom-out-button", onClick: this._handleZoomOut, role: "button", tabIndex: -1 },
+                            React.createElement(Icon, { iconSpec: React.createElement(SvgRemove, null) })))))));
         if (mode === MapMode.Closed && (animation === 1.0 || startMapExtents.isExactEqual(mapExtents))) {
             return nodes;
         }
@@ -545,6 +551,7 @@ DrawingNavigationAid.findRotatedWindowDimensions = (extents, rotation) => {
         return Vector3d.create(Math.abs(x1 - x3) / 2, Math.abs(y2 - y4) / 2);
     }
 };
+export { DrawingNavigationAid };
 /** @internal */
 export class DrawingNavigationCanvas extends React.Component {
     constructor() {