aboutsummaryrefslogtreecommitdiff
path: root/packages/components/src/global
diff options
context:
space:
mode:
Diffstat (limited to 'packages/components/src/global')
-rw-r--r--packages/components/src/global/globalCssVariables.scss110
-rw-r--r--packages/components/src/global/globalTypes.ts137
-rw-r--r--packages/components/src/global/globalUtils.tsx4
3 files changed, 120 insertions, 131 deletions
diff --git a/packages/components/src/global/globalCssVariables.scss b/packages/components/src/global/globalCssVariables.scss
index 1ac2ef45c..ebc44106d 100644
--- a/packages/components/src/global/globalCssVariables.scss
+++ b/packages/components/src/global/globalCssVariables.scss
@@ -75,8 +75,10 @@ $standard-border-radius: 5px;
// shadow
$standard-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3);
-$standard-button-shadow: rgb(0 0 0 / 20%) 0px 2px 4px -1px,
- rgb(0 0 0 / 14%) 0px 4px 5px 0px, rgb(0 0 0 / 12%) 0px 1px 10px 0px;
+$standard-button-shadow:
+ rgb(0 0 0 / 20%) 0px 2px 4px -1px,
+ rgb(0 0 0 / 14%) 0px 4px 5px 0px,
+ rgb(0 0 0 / 12%) 0px 1px 10px 0px;
$dashboardselector-height: 32px;
$mainTextInput-zindex: 999; // then text input overlay so that it's context menu will appear over decorations, etc
@@ -91,70 +93,68 @@ $LEFT_MENU_WIDTH: 60px;
$TREE_BULLET_WIDTH: 20px;
:export {
- contextMenuZindex: $contextMenu-zindex;
- SCHEMA_DIVIDER_WIDTH: $SCHEMA_DIVIDER_WIDTH;
- COLLECTION_BORDER_WIDTH: $COLLECTION_BORDER_WIDTH;
- MINIMIZED_ICON_SIZE: $MINIMIZED_ICON_SIZE;
- MAX_ROW_HEIGHT: $MAX_ROW_HEIGHT;
- SEARCH_THUMBNAIL_SIZE: $search-thumnail-size;
- ANTIMODEMENU_HEIGHT: $antimodemenu-height;
- DASHBOARD_SELECTOR_HEIGHT: $dashboardselector-height;
- DFLT_IMAGE_NATIVE_DIM: $DFLT_IMAGE_NATIVE_DIM;
- LEFT_MENU_WIDTH: $LEFT_MENU_WIDTH;
- TREE_BULLET_WIDTH: $TREE_BULLET_WIDTH;
+ contextMenuZindex: $contextMenu-zindex;
+ SCHEMA_DIVIDER_WIDTH: $SCHEMA_DIVIDER_WIDTH;
+ COLLECTION_BORDER_WIDTH: $COLLECTION_BORDER_WIDTH;
+ MINIMIZED_ICON_SIZE: $MINIMIZED_ICON_SIZE;
+ MAX_ROW_HEIGHT: $MAX_ROW_HEIGHT;
+ SEARCH_THUMBNAIL_SIZE: $search-thumnail-size;
+ ANTIMODEMENU_HEIGHT: $antimodemenu-height;
+ DASHBOARD_SELECTOR_HEIGHT: $dashboardselector-height;
+ DFLT_IMAGE_NATIVE_DIM: $DFLT_IMAGE_NATIVE_DIM;
+ LEFT_MENU_WIDTH: $LEFT_MENU_WIDTH;
+ TREE_BULLET_WIDTH: $TREE_BULLET_WIDTH;
}
.form-wrapper {
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: flex-start;
- gap: 0px;
- padding-bottom: 5px;
-
-
- .formLabel {
display: flex;
- font-family: $default-font;
- text-transform: uppercase;
- opacity: 0.8;
- min-width: 'fit-content'
- }
-
- &.left {
- flex-direction: row;
- align-items: center;
- gap: 3px;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: flex-start;
+ gap: 0px;
+ padding-bottom: 5px;
.formLabel {
- text-align: left;
+ display: flex;
+ font-family: $default-font;
+ text-transform: uppercase;
+ opacity: 0.8;
+ min-width: 'fit-content';
}
- }
- &.right {
- flex-direction: row-reverse;
- justify-content: flex-end;
- align-items: center;
- gap: 3px;
+ &.left {
+ flex-direction: row;
+ align-items: center;
+ gap: 3px;
- .formLabel {
- text-align: right;
+ .formLabel {
+ text-align: left;
+ }
}
- }
- &.top {
- flex-direction: column;
- gap: 1px;
- }
+ &.right {
+ flex-direction: row-reverse;
+ justify-content: flex-end;
+ align-items: center;
+ gap: 3px;
- &.top-start {
- flex-direction: column;
- align-items: flex-start;
- }
+ .formLabel {
+ text-align: right;
+ }
+ }
- &.top-end {
- flex-direction: column;
- align-items: flex-end;
- }
-}
+ &.top {
+ flex-direction: column;
+ gap: 1px;
+ }
+ &.top-start {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ &.top-end {
+ flex-direction: column;
+ align-items: flex-end;
+ }
+}
diff --git a/packages/components/src/global/globalTypes.ts b/packages/components/src/global/globalTypes.ts
index aa8451a9c..764fe7422 100644
--- a/packages/components/src/global/globalTypes.ts
+++ b/packages/components/src/global/globalTypes.ts
@@ -1,87 +1,76 @@
-import { PointerEventHandler } from "react"
-import { Size } from "./globalEnums"
+import { PointerEventHandler } from 'react';
+import { Size } from './globalEnums';
-export interface IGlobalProps {
- // Size
- size?: Size
- height?: number
- width?: number
- fillWidth?: boolean
- color?: string
- background?: string
+export enum Type {
+ PRIM = 'primary',
+ SEC = 'secondary',
+ TERT = 'tertiary',
+}
- // Type
- type?: Type
+export type Placement = 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top';
- // Status
- inactive?: boolean
+export type Alignment = 'flex-start' | 'flex-end' | 'center';
- // Content
- tooltip?: string
- tooltipPlacement?: Placement
+export type TextAlignment = 'center' | 'left' | 'right';
- // Label
- label?: string
- hideLabel?: boolean
+export interface IGlobalProps {
+ // Size
+ size?: Size;
+ height?: number | string;
+ width?: number;
+ fillWidth?: boolean;
+ color?: string;
+ background?: string;
- // Label when used in forms
- formLabel?: string
- formLabelPlacement?: Placement
+ // Type
+ type?: Type;
- // Custom style
- style?: React.CSSProperties
+ // Status
+ inactive?: boolean;
- // Global pointer events
- onPointerDown?: PointerEventHandler | undefined;
- onPointerDownCapture?: PointerEventHandler | undefined;
- onPointerMove?: PointerEventHandler | undefined;
- onPointerMoveCapture?: PointerEventHandler | undefined;
- onPointerUp?: PointerEventHandler | undefined;
- onPointerUpCapture?: PointerEventHandler | undefined;
- onPointerCancel?: PointerEventHandler | undefined;
- onPointerCancelCapture?: PointerEventHandler | undefined;
- onPointerEnter?: PointerEventHandler | undefined;
- onPointerEnterCapture?: PointerEventHandler | undefined;
- onPointerLeave?: PointerEventHandler | undefined;
- onPointerLeaveCapture?: PointerEventHandler | undefined;
- onPointerOver?: PointerEventHandler | undefined;
- onPointerOverCapture?: PointerEventHandler | undefined;
- onPointerOut?: PointerEventHandler | undefined;
- onPointerOutCapture?: PointerEventHandler | undefined;
- onGotPointerCapture?: PointerEventHandler | undefined;
- onGotPointerCaptureCapture?: PointerEventHandler | undefined;
- onLostPointerCapture?: PointerEventHandler | undefined;
- onLostPointerCaptureCapture?: PointerEventHandler | undefined;
-}
+ // Content
+ tooltip?: string;
+ tooltipPlacement?: Placement;
-export interface INumberProps extends IGlobalProps {
- min: number,
- max: number,
- step?: number,
- number: number
- setNumber?: (num: number) => unknown,
- unit?: string
-}
+ // Label
+ label?: string;
+ hideLabel?: boolean;
-export enum Type {
- PRIM = "primary",
- SEC = "secondary",
- TERT = "tertiary",
-}
+ // Label when used in forms
+ formLabel?: string;
+ formLabelPlacement?: Placement;
-export type Placement = 'bottom-end'
- | 'bottom-start'
- | 'bottom'
- | 'left-end'
- | 'left-start'
- | 'left'
- | 'right-end'
- | 'right-start'
- | 'right'
- | 'top-end'
- | 'top-start'
- | 'top'
+ // Custom style
+ style?: React.CSSProperties;
-export type Alignment = 'flex-start' | 'flex-end' | 'center'
+ // Global pointer events
+ onPointerDown?: PointerEventHandler | undefined;
+ onPointerDownCapture?: PointerEventHandler | undefined;
+ onPointerMove?: PointerEventHandler | undefined;
+ onPointerMoveCapture?: PointerEventHandler | undefined;
+ onPointerUp?: PointerEventHandler | undefined;
+ onPointerUpCapture?: PointerEventHandler | undefined;
+ onPointerCancel?: PointerEventHandler | undefined;
+ onPointerCancelCapture?: PointerEventHandler | undefined;
+ onPointerEnter?: PointerEventHandler | undefined;
+ onPointerEnterCapture?: PointerEventHandler | undefined;
+ onPointerLeave?: PointerEventHandler | undefined;
+ onPointerLeaveCapture?: PointerEventHandler | undefined;
+ onPointerOver?: PointerEventHandler | undefined;
+ onPointerOverCapture?: PointerEventHandler | undefined;
+ onPointerOut?: PointerEventHandler | undefined;
+ onPointerOutCapture?: PointerEventHandler | undefined;
+ onGotPointerCapture?: PointerEventHandler | undefined;
+ onGotPointerCaptureCapture?: PointerEventHandler | undefined;
+ onLostPointerCapture?: PointerEventHandler | undefined;
+ onLostPointerCaptureCapture?: PointerEventHandler | undefined;
+}
-export type TextAlignment = 'center' | 'left' | 'right' \ No newline at end of file
+export interface INumberProps extends IGlobalProps {
+ min: number;
+ max: number;
+ step?: number;
+ number: number;
+ setNumber?: (num: number) => unknown;
+ unit?: string;
+}
diff --git a/packages/components/src/global/globalUtils.tsx b/packages/components/src/global/globalUtils.tsx
index 05648a863..0f1e0adbc 100644
--- a/packages/components/src/global/globalUtils.tsx
+++ b/packages/components/src/global/globalUtils.tsx
@@ -1,5 +1,5 @@
-import { Colors, Size } from './globalEnums'
-const Color = require('color')
+import { Size } from './globalEnums'
+import Color from 'color';
export interface ILocation {
top: number
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-25 00:16:35 +0000