ba6262ffe6
## Description Plenty changes related to widgets alignment 1. Paragraph, button, inputs, single checkbox and switch widgets are aligned along the baseline of the text content 2. The icons in the buttons and the single checkbox and switch are now positioned absolutely so as not to affect the height of the components. The height of the components now depends on text content. 3. All unnecessary paddings and borders in the layout have been removed: - Canvas padding: `--outer-spacing-4` - Gap between sections and zones: `--outer-spacing-4` - Zone padding: `--outer-spacing-3` - Gap between widgets: `--outer-spacing-3` 4. In widget selection styles replace `border` with `outline`, since the `outline` one does not take space. 5. Add Changes to the flex-basis calculation method. Now the gap between the zones is taken into account there. 6. Add a lot of small fixes related to the changes described above. https://github.com/appsmithorg/appsmith/assets/11555074/b7c220eb-3e27-4039-9c15-6281bafe8008 Fixes #29364 ## Automation /ok-to-test tags="@tag.Anvil" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!IMPORTANT] > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/8375537665> > Commit: `f85b63c0a49f30b9762379c2f8c3bd38c7a8355f` > Cypress dashboard url: <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8375537665&attempt=2" target="_blank">Click here!</a> > All cypress tests have passed 🎉🎉🎉 <!-- end of auto-generated comment: Cypress test results --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary by CodeRabbit - **New Features** - Improved handling of CSS variable values in Flex components. - Enhanced styling and layout configurations for a better user experience. - **Bug Fixes** - Fixed label positioning and styling issues in Checkbox and Switch components. - Adjusted padding, margin, and sizing for consistency and alignment. - **Refactor** - Enhanced flex layout handling and space distribution logic for improved layout flexibility. - **Style** - Updated component styles for refined user interface aesthetics. - **Chores** - Updated feature flags and configurations for widgets and components to enable new functionalities. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
55 lines
2.0 KiB
TypeScript
55 lines
2.0 KiB
TypeScript
import { Colors } from "constants/Colors";
|
|
import type { CSSProperties } from "react";
|
|
|
|
export const WIDGET_NAME_CANVAS = "widget-name-canvas";
|
|
export const WIDGET_NAME_FONT_SIZE = 14;
|
|
export const WIDGET_NAME_LINE_HEIGHT = Math.floor(WIDGET_NAME_FONT_SIZE * 1.2);
|
|
export const WIDGET_NAME_VERTICAL_PADDING = 4;
|
|
export const WIDGET_NAME_HORIZONTAL_PADDING = 6;
|
|
export const WIDGET_OUTLINE_OFFSET = 7;
|
|
export const WIDGET_NAME_ICON_PADDING = 16;
|
|
export const WIDGET_NAME_OFFSET = 6; // 4px — outline-offset and 2px outline-width of selection border
|
|
|
|
export const DEFAULT_WIDGET_NAME_CANVAS_HEIGHT = 600;
|
|
export const WIDGET_NAME_CANVAS_PADDING = 20;
|
|
|
|
export const WIDGET_NAME_COMPONENT_BUFFER = 8;
|
|
|
|
export const WIDGET_NAME_HEIGHT = Math.floor(
|
|
WIDGET_NAME_LINE_HEIGHT + WIDGET_NAME_VERTICAL_PADDING * 1.5,
|
|
);
|
|
|
|
export const WIDGET_NAME_TEXT_COLOR = Colors.WHITE;
|
|
|
|
//Adding this here as Konva accepts this type of path for SVG
|
|
export const warningSVGPath =
|
|
"M 18 9 C 18 13.9706 13.9706 18 9 18 C 4.0294 18 0 13.9706 0 9 C 0 4.0294 4.0294 0 9 0 C 13.9706 0 18 4.0294 18 9 Z M 7.875 3.9375 V 10.125 H 10.125 V 3.9375 H 7.875 Z M 9 14.0625 C 9.6213 14.0625 10.125 13.5588 10.125 12.9375 C 10.125 12.3162 9.6213 11.8125 9 11.8125 C 8.3787 11.8125 7.875 12.3162 7.875 12.9375 C 7.875 13.5588 8.3787 14.0625 9 14.0625 Z";
|
|
|
|
//Indicates the state of widget name
|
|
export enum WidgetNameState {
|
|
SELECTED = "SELECTED",
|
|
ERROR = "ERROR",
|
|
FOCUSED = "FOCUSED",
|
|
}
|
|
|
|
//fill colors of widget name based on state
|
|
export const WIDGET_NAME_FILL_COLORS = {
|
|
[WidgetNameState.SELECTED]: Colors.JAFFA_DARK,
|
|
[WidgetNameState.FOCUSED]: Colors.WATUSI,
|
|
[WidgetNameState.ERROR]: Colors.DANGER_SOLID,
|
|
};
|
|
|
|
//CSS properties of the wrapper object of the html canvas
|
|
export const widgetNameWrapperStyle: CSSProperties = {
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
zIndex: "var(--on-canvas-ui-z-index)",
|
|
pointerEvents: "none",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
width: "100%",
|
|
height: "100%",
|
|
};
|