Forker/OpenNoodl
1
0
Fork 0
mirror of https://github.com/The-Low-Code-Foundation/OpenNoodl.git synced 2026-01-13 15:52:56 +01:00
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Fixed visual issues with new dashboard and added folder attribution

Browse Source
This commit is contained in:
Richard Osborne
2025-12-31 21:40:47 +01:00
parent 73b5a42122
commit 2e46ab7ea7
41 changed files with 6481 additions and 1619 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
packages/noodl-core-ui/src/components/inputs/LegacyIconButton/LegacyIconButton.tsx
View File

@@ -1,49 +1,31 @@
import classNames from 'classnames';
import React, {
CSSProperties,
MouseEvent,
MouseEventHandler,
SyntheticEvent,
} from 'react';
import css from './LegacyIconButton.module.scss';
export enum LegacyIconButtonIcon {
VerticalDots = 'vertical-dots',
Close = 'close',
CloseDark = 'close-dark',
CaretDown = 'caret-down',
Generate = 'generate',
}
export interface LegacyIconButtonProps {
icon: LegacyIconButtonIcon;
isRotated180?: boolean;
onClick?: MouseEventHandler<HTMLButtonElement>;
style?: CSSProperties;
testId?: string;
}
export function LegacyIconButton({
icon,
isRotated180,
style,
onClick,
testId,
}: LegacyIconButtonProps) {
return (
<button
className={css['Root']}
onClick={onClick}
style={style}
data-test={testId}
>
<img
className={classNames([
css['Icon'],
isRotated180 && css['is-rotated-180'],
])}
src={`../assets/icons/icon-button/${icon}.svg`}
/>
</button>
);
}
import classNames from 'classnames';
import React, { CSSProperties, MouseEvent, MouseEventHandler, SyntheticEvent } from 'react';
import css from './LegacyIconButton.module.scss';
export enum LegacyIconButtonIcon {
VerticalDots = 'vertical-dots',
Close = 'close',
CloseDark = 'close-dark',
CaretDown = 'caret-down',
Generate = 'generate'
}
export interface LegacyIconButtonProps {
icon: LegacyIconButtonIcon;
isRotated180?: boolean;
onClick?: MouseEventHandler<HTMLButtonElement>;
style?: CSSProperties;
testId?: string;
}
export function LegacyIconButton({ icon, isRotated180, style, onClick, testId }: LegacyIconButtonProps) {
return (
<button className={css['Root']} onClick={onClick} style={style} data-test={testId}>
<img
className={classNames([css['Icon'], isRotated180 && css['is-rotated-180']])}
src={`/assets/icons/icon-button/${icon}.svg`}
/>
</button>
);
}

4
packages/noodl-core-ui/src/components/inputs/TextInput/TextInput.module.scss
View File

@@ -103,12 +103,12 @@
left: 0;
visibility: hidden;
height: 0;
overflow: overlay;
overflow: hidden;
white-space: pre;
}
.InputWrapper {
overflow-x: overlay;
overflow-x: hidden;
flex-grow: 1;
padding-top: 1px;
}

76
packages/noodl-core-ui/src/components/inputs/ToggleSwitch/ToggleSwitch.module.scss
View File

@@ -1,38 +1,38 @@
.Root {
}
.Track {
box-sizing: border-box;
height: 24px;
width: 42px;
border-radius: 12px;
background-color: var(--theme-color-bg-1);
cursor: pointer;
display: flex;
align-items: center;
padding: 3px;
margin-left: 8px;
margin-right: 8px;
}
.Indicator {
width: 18px;
height: 18px;
border-radius: 50%;
background-color: var(--theme-color-bg-3);
transition: transform var(--speed-quick) var(--easing-base),
background-color var(--speed-quick) var(--easing-base);
&.is-checked {
transform: translateX(100%);
}
&.is-always-active-color,
&.is-checked {
background-color: var(--theme-color-secondary-bright);
}
}
.Input {
display: none;
}
.Root {
}
.Track {
box-sizing: border-box;
height: 24px;
width: 42px;
border-radius: 12px;
background-color: var(--theme-color-bg-3);
cursor: pointer;
display: flex;
align-items: center;
padding: 3px;
margin-left: 8px;
margin-right: 8px;
border: 1px solid var(--theme-color-border-default);
}
.Indicator {
width: 18px;
height: 18px;
border-radius: 50%;
background-color: var(--theme-color-bg-3);
transition: transform var(--speed-quick) var(--easing-base), background-color var(--speed-quick) var(--easing-base);
&.is-checked {
transform: translateX(100%);
}
&.is-always-active-color,
&.is-checked {
background-color: var(--theme-color-secondary-bright);
}
}
.Input {
display: none;
}

202
packages/noodl-core-ui/src/components/popups/MenuDialog/MenuDialog.module.scss
View File

@@ -1,97 +1,105 @@
.Root {
padding: 4px;
max-height: 400px;
overflow: hidden overlay;
&.is-width-small {
width: 140px;
}
&.is-width-default {
width: 200px;
}
&.is-width-medium {
width: 250px;
}
&.is-width-large {
width: 400px;
}
}
.Item {
padding: 8px;
cursor: pointer;
border-radius: 1px;
transition: background-color var(--speed-turbo) var(--easing-base);
&.is-highlighted:not(.is-disabled) {
background-color: var(--theme-color-secondary-highlight);
h2 {
color: var(--theme-color-on-secondary);
}
}
&.is-danger {
.Icon path {
fill: var(--theme-color-danger) !important;
}
}
&.is-disabled {
.Icon path {
fill: var(--theme-color-fg-muted);
}
.Label span {
color: var(--theme-color-fg-muted);
}
}
&:not(.has-component):not(.is-highlighted):not(.is-disabled):hover {
background-color: var(--theme-color-bg-3);
.Label span {
color: var(--theme-color-fg-highlight);
}
&.is-danger .Label span {
color: var(--theme-color-danger);
}
}
}
.Label {
display: flex;
align-items: center;
&.has-bottom-spacing {
padding-bottom: 8px;
}
}
.Icon {
margin: -4px 8px -4px 0;
path {
fill: var(--theme-color-fg-default-contrast);
.Item:not(.has-component):not(.is-disabled):hover & {
fill: var(--theme-color-fg-highlight);
}
}
}
.Divider {
width: calc(100% + 8px);
height: 1px;
background-color: var(--theme-color-bg-3);
margin: 4px -4px;
}
.EndSlot {
display: flex;
align-items: center;
}
.Root {
padding: 4px;
max-height: 400px;
overflow: hidden overlay;
&.is-width-small {
width: 140px;
}
&.is-width-default {
width: 200px;
}
&.is-width-medium {
width: 250px;
}
&.is-width-large {
width: 400px;
}
}
.Item {
padding: 8px;
cursor: pointer;
border-radius: 1px;
transition: background-color var(--speed-turbo) var(--easing-base);
&.is-highlighted:not(.is-disabled) {
background-color: var(--theme-color-primary);
h2 {
color: var(--theme-color-on-primary);
}
.Label span {
color: var(--theme-color-on-primary);
}
.Icon path {
fill: var(--theme-color-on-primary);
}
}
&.is-danger {
.Icon path {
fill: var(--theme-color-danger) !important;
}
}
&.is-disabled {
.Icon path {
fill: var(--theme-color-fg-muted);
}
.Label span {
color: var(--theme-color-fg-muted);
}
}
&:not(.has-component):not(.is-highlighted):not(.is-disabled):hover {
background-color: var(--theme-color-bg-3);
.Label span {
color: var(--theme-color-fg-highlight);
}
&.is-danger .Label span {
color: var(--theme-color-danger);
}
}
}
.Label {
display: flex;
align-items: center;
&.has-bottom-spacing {
padding-bottom: 8px;
}
}
.Icon {
margin: -4px 8px -4px 0;
path {
fill: var(--theme-color-fg-default-contrast);
.Item:not(.has-component):not(.is-disabled):hover & {
fill: var(--theme-color-fg-highlight);
}
}
}
.Divider {
width: calc(100% + 8px);
height: 1px;
background-color: var(--theme-color-bg-3);
margin: 4px -4px;
}
.EndSlot {
display: flex;
align-items: center;
}