uiconfig-blueprint 0.1.0-dev.7 → 0.1.0-dev.9

package/src/components/TreeNode2.tsx

@@ -20,7 +20,7 @@
 import classNames from "classnames";
 import * as React from "react";
 
-import {ChevronRight} from "@blueprintjs/icons";
+import {CaretRight} from "@blueprintjs/icons";
 
 import type {TreeEventHandler, TreeNodeInfo} from "@blueprintjs/core";
 import {Classes, Collapse, DISPLAYNAME_PREFIX, Icon} from "@blueprintjs/core";
@@ -118,7 +118,7 @@ export class TreeNode2<T = {}> extends React.Component<TreeNodeProps<T>> {
                 isExpanded ? Classes.TREE_NODE_CARET_OPEN : Classes.TREE_NODE_CARET_CLOSED,
             );
             return (
-                <ChevronRight
+                <CaretRight
                     title={isExpanded ? "Collapse group" : "Expand group"}
                     className={caretClasses}
                     onClick={disabled === true ? undefined : this.handleCaretClick}

package/src/components/VisualStyleContext.tsx

@@ -60,6 +60,10 @@ export function ThemeSettingsMenuComponent() {
             // intent={intent}
             // labelElement={"⌘,"}
             roleStructure="menuitem"
+            popoverProps={{
+                hoverOpenDelay: 150,
+                hoverCloseDelay: 300,
+            }}
             children={
                 <>
                     <MenuItem icon="flash" text="Light Mode"
@@ -83,6 +87,10 @@ export function ThemeSettingsMenuComponent() {
             // intent={intent}
             // labelElement={"⌘,"}
             roleStructure="menuitem"
+            popoverProps={{
+                hoverOpenDelay: 150,
+                hoverCloseDelay: 300,
+            }}
             children={
                 <>
                     {Object.entries(visualStyle.themes).map(([key, value]) => (

package/src/components/bpIconWrapper.tsx

@@ -1,9 +1,9 @@
 import {HTMLAttributes, ReactNode} from "react";
 
 // https://github.com/palantir/blueprint/issues/2348#issuecomment-389322440
-export const bpIconWrapper = (path: ReactNode, viewbox = 16, svgProps?: HTMLAttributes<SVGElement>) => {
+export const bpIconWrapper = (path: ReactNode, viewbox = 16, svgProps?: HTMLAttributes<SVGElement>, className?: string) => {
     return (
-        <span className="bp5-icon">
+        <span className={"bp5-icon" + (className ? ` ${className}` : '')} role="img" aria-label="icon">
             <svg
                 xmlns="http://www.w3.org/2000/svg"
                 x="0"

package/src/components/iconMapping.ts

@@ -152,7 +152,7 @@ import {
 } from './shapesIcons'
 import {HTMLAttributes, ReactElement} from 'react'
 
-const monoIcon = (icon: (props: HTMLAttributes<SVGElement>)=>ReactElement)=>(props?: HTMLAttributes<SVGElement>)=>icon({...props, className: 'bpIconWrapperMonoFilter' + (props?.className||'')})
+const monoIcon = (icon: (props: HTMLAttributes<SVGElement>)=>ReactElement)=>(props?: HTMLAttributes<SVGElement>)=>icon({...props, className: 'bpIconWrapperMonoFilter ' + (props?.className||'')})
 
 export const bpUiConfigIcons = {
     'x-1': xIcon1,

package/src/components/tree2.scss

@@ -40,3 +40,30 @@
     pointer-events: auto;
   }
 }
+
+.bp5-tree-node-content{
+  transition: background-color 0.2s ease-in-out;
+}
+
+@for $i from 1 through 10 {
+  .bp5-tree-node-content-#{$i} {
+    padding-left: calc(10px * $i);
+  }
+}
+
+.bp5-tree-node-caret{
+  padding: 7px 5px;
+}
+
+.bp5-tree-node-content:has(.bp5-icon) {
+  .bp5-tree-node-caret, .bp5-tree-node-caret-none {
+    min-width: 0px;
+  }
+
+  // because bp5-tree-node-icon is not applied on this icon
+  .bp5-icon:has(.bp5-tree-node-icon-svg), .bp5-tree-node-icon{
+    margin-right: 0px;
+    padding: 0 5px;
+    position: relative;
+  }
+}

package/src/lib.ts

@@ -13,6 +13,7 @@ export * from './components/VisualStyleContext'
 export * from './components/DialogContext'
 export * from './components/loadingState'
 export * from './components/AppToaster'
+export * from "./components/treeTypes";
 export * from './bpComponents/BPButtonComponent'
 export * from './bpComponents/BPColorInputComponent'
 export * from './bpComponents/BPComponent'
@@ -31,3 +32,5 @@ export * from './bpComponents/BPTreeComponent'
 export * from './bpComponents/BPTreeFolderComponent'
 export * from './bpComponents/BPValueComponent'
 export * from './bpComponents/BPVectorInputComponent'
+export * from "./bpComponents/NumberUnits";
+export * from "./bpComponents/GetNumberTransformFunctions";

package/src/renderer.scss

@@ -243,3 +243,22 @@
 .bp5-collapse {
   transition: height 0.3s var(--pt-transition-ease);
 }
+
+// todo move somewhere
+.bp5-vars, :root {
+  --slider-progress-color: hsla(var(--gray1-hsl), 0.2);
+}
+
+.bp5-dark {
+  --slider-progress-color: hsla(var(--gray4-hsl),0.15);
+}
+
+.bp5-slider-progress, .bp5-slider-track{
+  height: 3px;
+  top: calc($pt-grid-size - 3px)
+}
+.bp5-slider-handle{
+  //background-color: hsla(var(--pt-intent-primary-hsl), 0.7) !important;
+  background-color: hsla(var(--pt-intent-primary-hsl), 1) !important;
+  //backdrop-filter: blur(4px);
+}