feat: Widget Discoverability (#24934)

## Description
Grouping the widgets into categories to make it easier for people to
find widgets. This will be behind the feature flag
`release_widgetdiscovery_enabled`

<img
src="https://github.com/appsmithorg/appsmith/assets/22471214/4932a091-1831-4d95-b722-3301580fb6be"
height="300px" />

Project home [here on
Notion](https://www.notion.so/appsmith/Widget-Discoverability-755cf059a1904950888304b90b74106f?d=8bc3059134984787900a69963dd13d90#27967092cfa74505bab55bd163d28c18).

#### PR fixes following issue(s)
#24865
#24867
#24868
#24869

#### Media
> A video or a GIF is preferred. when using Loom, don’t embed because it
looks like it’s a GIF. instead, just link to the video
>
>
#### Type of change
> Please delete options that are not relevant.
- Bug fix (non-breaking change which fixes an issue)
- New feature (non-breaking change which adds functionality)
- Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- Chore (housekeeping or task changes that don't impact user perception)
- This change requires a documentation update
>
>
>
## Testing
>
#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
> Delete anything that is not relevant
- [x] Manual
- [ ] Jest
- [x] Cypress
>
>
#### Test Plan
> (https://github.com/appsmithorg/TestSmith/issues/2440)
>
>
#### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)
>
>
>
## Checklist:
#### Dev activity
- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [x] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [x] Test plan has been peer reviewed by project stakeholders and other
QA members
- [x] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [x] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed
This commit is contained in:
Dhruvik Neharia 2023-07-22 11:27:18 +05:30 committed by GitHub
parent 5024a52ccd
commit a8faba4b86
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
111 changed files with 816 additions and 127 deletions

View File

@ -0,0 +1,198 @@
import { featureFlagIntercept } from "../../../../support/Objects/FeatureFlags";
import {
entityExplorer,
agHelper,
locators,
} from "../../../../support/Objects/ObjectsCore";
describe("Entity explorer tests related to widgets and validation", function () {
// Taken from here appsmith/app/client/src/constants/WidgetConstants.tsx
const WIDGET_TAGS: Record<string, string> = {
SUGGESTED_WIDGETS: "Suggested",
INPUTS: "Inputs",
BUTTONS: "Buttons",
SELECT: "Select",
DISPLAY: "Display",
LAYOUT: "Layout",
MEDIA: "Media",
TOGGLES: "Toggles",
SLIDERS: "Sliders",
CONTENT: "Content",
EXTERNAL: "External",
};
// Taken from here appsmith/app/client/src/constants/WidgetConstants.tsx
const SUGGESTED_WIDGETS_ORDER: Record<string, number> = {
TABLE_WIDGET_V2: 1,
JSON_FORM_WIDGET: 2,
INPUT_WIDGET_V2: 3,
TEXT_WIDGET: 4,
SELECT_WIDGET: 5,
LIST_WIDGET_V2: 6,
};
// When adding a new widget or tag, we need to manually add it to this list.
const WIDGETS_CATALOG: Record<string, string[]> = {
Suggested: ["Input", "JSON Form", "List", "Select", "Table", "Text"],
Inputs: [
"Currency Input",
"DatePicker",
"FilePicker",
"Input",
"Phone Input",
"Rich Text Editor",
],
Buttons: ["Button", "Button Group", "Icon button", "Menu button"],
Select: ["Multi TreeSelect", "MultiSelect", "Select", "TreeSelect"],
Display: ["Chart", "Iframe", "List", "Map Chart", "Stats Box", "Table"],
Layout: ["Container", "Divider", "Form", "JSON Form", "Modal", "Tabs"],
Media: ["Audio", "Document Viewer", "Image", "Video"],
Toggles: [
"Checkbox",
"Checkbox Group",
"Radio Group",
"Switch",
"Switch Group",
],
Sliders: ["Category Slider", "Number Slider", "Range Slider"],
Content: ["Map", "Progress", "Rating", "Text"],
External: ["Audio Recorder", "Camera", "Code Scanner"],
};
before(() => {
featureFlagIntercept(
{
release_widgetdiscovery_enabled: true,
},
false,
);
agHelper.RefreshPage();
});
const getTotalNumberOfWidgets = () => {
return Object.values(WIDGETS_CATALOG).reduce(
(totalLength, widgets) => totalLength + widgets.length,
0,
);
};
it("1. All widget tags should be visible and open by default.", () => {
entityExplorer.NavigateToSwitcher("Widgets");
agHelper.AssertElementLength(
entityExplorer._widgetTagsList,
Object.keys(WIDGET_TAGS).length,
);
agHelper.GetElement(entityExplorer._widgetTagsList).each(($widgetTag) => {
cy.wrap($widgetTag)
.find(locators._adsV2Content)
.should("have.css", "display", "flex");
});
});
it("2. All widgets should be present within their tags and these tags should be collapsible", () => {
agHelper.GetElement(entityExplorer._widgetTagsList).each(($widgetTag) => {
// check that tags are collapsible
cy.wrap($widgetTag).find(locators._adsV2CollapsibleHeader).click({
force: true,
});
cy.wrap($widgetTag)
.find(locators._adsV2Content)
.should("have.css", "display", "none");
cy.wrap($widgetTag).find(locators._adsV2CollapsibleHeader).click({
force: true,
});
// check that all widgets are present within their tags
const widgetsInThisTag: string[] = [];
cy.wrap($widgetTag)
.find(entityExplorer._widgetCardTitle)
.each(($widgetName) => {
const value = $widgetName.text();
widgetsInThisTag.push(value);
})
.then(() => {
cy.wrap($widgetTag)
.find(
`${locators._adsV2CollapsibleHeader} span${locators._adsV2Text}`,
)
.then(($widgetTagTitle) => {
const expectedWidgetsInThisTag =
WIDGETS_CATALOG[$widgetTagTitle.text()].sort();
widgetsInThisTag.sort();
expect(widgetsInThisTag).to.deep.eq(expectedWidgetsInThisTag);
});
});
});
});
it("3. All widgets should be ordered alphabetically within their tags, except Essential widgets, which should be sorted by their static rank.", () => {
agHelper
.GetElement(
`${entityExplorer._widgetTagsList}:not(${entityExplorer._widgetTagSuggestedWidgets})`,
)
.each(($widgetTag) => {
const widgetsInThisTag: string[] = [];
cy.wrap($widgetTag)
.find(entityExplorer._widgetCardTitle)
.each(($widgetName) => {
const value = $widgetName.text();
widgetsInThisTag.push(value);
})
.then(() => {
const sortedWidgetsInThisTag = [...widgetsInThisTag].sort();
expect(widgetsInThisTag).to.deep.eq(sortedWidgetsInThisTag);
});
});
const widgetsInEssentialWidgetsTag: string[] = [];
agHelper
.GetElement(
`${entityExplorer._widgetTagsList}${entityExplorer._widgetTagSuggestedWidgets}`,
)
.find(entityExplorer._widgetCardTitle)
.each(($widgetName) => {
const value = $widgetName.text();
widgetsInEssentialWidgetsTag.push(value);
})
.then(() => {
const sortedWidgetsInEssentialWidgetsTag = [
...widgetsInEssentialWidgetsTag,
].sort(
(a, b) => SUGGESTED_WIDGETS_ORDER[a] - SUGGESTED_WIDGETS_ORDER[b],
);
expect(widgetsInEssentialWidgetsTag).to.deep.eq(
sortedWidgetsInEssentialWidgetsTag,
);
});
});
it("4. Widget search should work", () => {
agHelper.TypeText(entityExplorer._widgetSearchInput, "text");
agHelper.AssertElementLength(entityExplorer._widgetCards, 3);
agHelper.TypeText(entityExplorer._widgetSearchInput, "p");
agHelper.AssertElementLength(entityExplorer._widgetCards, 2);
agHelper.ClearTextField(entityExplorer._widgetSearchInput);
agHelper.TypeText(entityExplorer._widgetSearchInput, "cypress");
agHelper.AssertElementLength(entityExplorer._widgetCards, 0);
agHelper.ClearTextField(entityExplorer._widgetSearchInput);
agHelper.AssertElementLength(
entityExplorer._widgetCards,
getTotalNumberOfWidgets(),
);
});
});

View File

@ -10,6 +10,7 @@ function dragAndDropToWidget(widgetType, destinationWidget, { x, y }) {
const selector = `.t--widget-card-draggable-${widgetType}`;
cy.wait(800);
cy.get(selector)
.first()
.scrollIntoView()
.trigger("dragstart", { force: true })
.trigger("mousemove", x, y, { force: true });

View File

@ -23,9 +23,11 @@ describe("Modal focus", function () {
cy.wait(500);
//drag input field into modal
cy.get(".t--widget-card-draggable-inputwidgetv2").trigger("dragstart", {
force: true,
});
cy.get(".t--widget-card-draggable-inputwidgetv2")
.first()
.trigger("dragstart", {
force: true,
});
cy.get(widgets.modalWidget)
.scrollIntoView()

View File

@ -259,6 +259,9 @@ export class CommonLocators {
_pagination = ".rc-pagination";
_controlOption = ".t--property-control-options";
_canvasBody = "[data-testid='div-selection-0']";
_adsV2Content = ".ads-v2__content";
_adsV2CollapsibleHeader = ".ads-v2-collapsible__header";
_adsV2Text = ".ads-v2-text";
_svg = "svg";
public ds_editor_env_filter = (envName: string) =>

View File

@ -86,6 +86,12 @@ export class EntityExplorer {
"//span[text()='" +
dbName +
"']/following-sibling::div[contains(@class, 't--entity') and contains(@class, 'action')]//div[contains(@class, 't--entity-name')]";
_widgetTagsList =
"[data-testid='widget-sidebar-scrollable-wrapper'] .widget-tag-collapisble";
_widgetCards = ".t--widget-card-draggable";
_widgetSearchInput = "#entity-explorer-search";
_widgetCardTitle = ".t--widget-card-draggable span.ads-v2-text";
_widgetTagSuggestedWidgets = ".widget-tag-collapisble-suggested";
public SelectEntityByName(
entityNameinLeftSidebar: string,

View File

@ -788,6 +788,7 @@ Cypress.Commands.add("dragAndDropToCanvas", (widgetType, { x, y }) => {
const selector = `.t--widget-card-draggable-${widgetType}`;
cy.wait(500);
cy.get(selector)
.first()
.trigger("dragstart", { force: true })
.trigger("mousemove", x, y, { force: true });
@ -806,11 +807,13 @@ Cypress.Commands.add(
const selector = `.t--widget-card-draggable-${widgetType}`;
cy.wait(800);
cy.get(selector)
.first()
.scrollIntoView()
.trigger("dragstart", { force: true })
.trigger("mousemove", x, y, { force: true });
const selector2 = `.t--draggable-${destinationWidget}`;
cy.get(selector2)
.first()
.scrollIntoView()
.trigger("mousemove", x, y, { eventConstructor: "MouseEvent" })
.trigger("mousemove", x, y, { eventConstructor: "MouseEvent" })
@ -824,6 +827,7 @@ Cypress.Commands.add(
const selector = `.t--widget-card-draggable-${widgetType}`;
cy.wait(800);
cy.get(selector)
.first()
.scrollIntoView()
.trigger("dragstart", { force: true })
.trigger("mousemove", x, y, { force: true });

View File

@ -93,7 +93,7 @@
"cypress-log-to-output": "^1.1.2",
"dayjs": "^1.10.6",
"deep-diff": "^1.0.2",
"design-system": "npm:@appsmithorg/design-system@2.1.16",
"design-system": "npm:@appsmithorg/design-system@2.1.17",
"design-system-old": "npm:@appsmithorg/design-system-old@1.1.11",
"downloadjs": "^1.4.7",
"fast-deep-equal": "^3.1.3",

View File

@ -13,6 +13,7 @@ export const FEATURE_FLAG = {
ab_ds_schema_enabled: "ab_ds_schema_enabled",
ab_ds_binding_enabled: "ab_ds_binding_enabled",
release_scim_provisioning_enabled: "release_scim_provisioning_enabled",
release_widgetdiscovery_enabled: "release_widgetdiscovery_enabled",
} as const;
export type FeatureFlag = keyof typeof FEATURE_FLAG;
@ -30,6 +31,7 @@ export const DEFAULT_FEATURE_FLAG_VALUE: FeatureFlags = {
ab_ds_schema_enabled: false,
ab_ds_binding_enabled: false,
release_scim_provisioning_enabled: false,
release_widgetdiscovery_enabled: false,
};
export const AB_TESTING_EVENT_KEYS = {

View File

@ -1,6 +1,7 @@
import type { SupportedLayouts } from "reducers/entityReducers/pageListReducer";
import type { WidgetType as FactoryWidgetType } from "utils/WidgetFactory";
import { THEMEING_TEXT_SIZES } from "./ThemeConstants";
import type { WidgetCardProps } from "widgets/BaseWidget";
export type WidgetType = FactoryWidgetType;
export const SKELETON_WIDGET_TYPE = "SKELETON_WIDGET";
@ -209,6 +210,7 @@ export const WIDGET_PROPS_TO_SKIP_FROM_EVAL = {
displayName: true,
topRowBeforeCollapse: false,
bottomRowBeforeCollapse: false,
tags: false,
};
/**
@ -223,3 +225,30 @@ export const FLEXBOX_PADDING = 4;
export const MAX_MODAL_WIDTH_FROM_MAIN_WIDTH = 0.95;
export const FILE_SIZE_LIMIT_FOR_BLOBS = 5000 * 1024; // 5MB
export const WIDGET_TAGS = {
SUGGESTED_WIDGETS: "Suggested",
INPUTS: "Inputs",
BUTTONS: "Buttons",
SELECT: "Select",
DISPLAY: "Display",
LAYOUT: "Layout",
MEDIA: "Media",
TOGGLES: "Toggles",
SLIDERS: "Sliders",
CONTENT: "Content",
EXTERNAL: "External",
} as const;
export type WidgetTags = (typeof WIDGET_TAGS)[keyof typeof WIDGET_TAGS];
export type WidgetCardsGroupedByTags = Record<WidgetTags, WidgetCardProps[]>;
export const SUGGESTED_WIDGETS_ORDER: Record<WidgetType, number> = {
TABLE_WIDGET_V2: 1,
JSON_FORM_WIDGET: 2,
INPUT_WIDGET_V2: 3,
TEXT_WIDGET: 4,
SELECT_WIDGET: 5,
LIST_WIDGET_V2: 6,
};

View File

@ -43,6 +43,8 @@ import {
import type { AppState } from "@appsmith/reducers";
import { getCurrentWorkspaceId } from "@appsmith/selectors/workspaceSelectors";
import { getInstanceId } from "@appsmith//selectors/tenantSelectors";
import classNames from "classnames";
import { selectFeatureFlags } from "@appsmith/selectors/featureFlagsSelectors";
const ENTITY_HEIGHT = 36;
const MIN_PAGES_HEIGHT = 60;
@ -94,6 +96,7 @@ function Pages() {
const storedHeightKey = "pagesContainerHeight_" + applicationId;
const storedHeight = localStorage.getItem(storedHeightKey);
const location = useLocation();
const featureFlags = useSelector(selectFeatureFlags);
const resizeAfterCallback = (data: CallbackResponseType) => {
localStorage.setItem(storedHeightKey, data.height.toString());
@ -223,7 +226,10 @@ function Pages() {
<StyledEntity
addButtonHelptext={createMessage(ADD_PAGE_TOOLTIP)}
alwaysShowRightIcon
className="group pages"
className={classNames({
"group pages": true,
"p-3 pb-0": featureFlags.release_widgetdiscovery_enabled,
})}
collapseRef={pageResizeRef}
customAddButton={
<AddPageContextMenu

View File

@ -16,6 +16,8 @@ import WidgetSidebar from "../WidgetSidebar";
import EntityExplorer from "./EntityExplorer";
import { getExplorerSwitchIndex } from "selectors/editorContextSelectors";
import { setExplorerSwitchIndex } from "actions/editorContextActions";
import { selectFeatureFlags } from "@appsmith/selectors/featureFlagsSelectors";
import WidgetSidebarWithTags from "../WidgetSidebarWithTags";
const selectForceOpenWidgetPanel = (state: AppState) =>
state.ui.onBoarding.forceOpenWidgetPanel;
@ -39,6 +41,7 @@ function ExplorerContent() {
const pageId = useSelector(getCurrentPageId);
const location = useLocation();
const activeSwitchIndex = useSelector(getExplorerSwitchIndex);
const featureFlags = useSelector(selectFeatureFlags);
const setActiveSwitchIndex = (index: number) => {
dispatch(setExplorerSwitchIndex(index));
@ -79,14 +82,23 @@ function ExplorerContent() {
<div
className={`flex-1 flex flex-col overflow-hidden ${tailwindLayers.entityExplorer}`}
>
<div className={`flex-shrink-0 px-2 mt-1 py-2 border-t`}>
<div
className="flex-shrink-0 p-3 pb-2 mt-1 border-t"
data-testid="explorer-tab-options"
>
<SegmentedControl
onChange={onChange}
options={options}
value={activeOption}
/>
</div>
<WidgetSidebar isActive={activeOption === "widgets"} />
{featureFlags.release_widgetdiscovery_enabled ? (
<WidgetSidebarWithTags isActive={activeOption === "widgets"} />
) : (
<WidgetSidebar isActive={activeOption === "widgets"} />
)}
<EntityExplorer isActive={activeOption === "explorer"} />
</div>
);

View File

@ -6,22 +6,23 @@ import AnalyticsUtil from "utils/AnalyticsUtil";
import { generateReactKey } from "utils/generators";
import { useWidgetSelection } from "utils/hooks/useWidgetSelection";
import { IconWrapper } from "constants/IconConstants";
import { Text } from "design-system";
type CardProps = {
details: WidgetCardProps;
};
export const Wrapper = styled.div`
padding: 10px 5px 10px 5px;
border-radius: var(--ads-v2-border-radius);
border: none;
position: relative;
color: var(--ads-v2-color-fg);
height: 72px;
min-height: 70px;
display: flex;
align-items: center;
align-items: flex-start;
justify-content: center;
cursor: grab;
img {
cursor: grab;
}
@ -31,6 +32,8 @@ export const Wrapper = styled.div`
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 2px;
text-align: center;
}
&:hover {
@ -54,21 +57,6 @@ export const BetaLabel = styled.div`
right: -2%;
`;
export const IconLabel = styled.h5`
min-height: 32px;
text-align: center;
margin: 0;
/* text-transform: uppercase; */
font-weight: ${(props) => props.theme.fontWeights[1]};
flex-shrink: 1;
font-size: 11px;
line-height: ${(props) => props.theme.lineHeights[2]}px;
&::selection {
background: none;
}
`;
function WidgetCard(props: CardProps) {
const { setDraggingNewWidget } = useWidgetDragResize();
const { deselectAll } = useWidgetSelection();
@ -89,7 +77,8 @@ function WidgetCard(props: CardProps) {
};
const type = `${props.details.type.split("_").join("").toLowerCase()}`;
const className = `t--widget-card-draggable-${type}`;
const className = `t--widget-card-draggable t--widget-card-draggable-${type}`;
return (
<Wrapper
className={className}
@ -97,11 +86,11 @@ function WidgetCard(props: CardProps) {
draggable
onDragStart={onDragStart}
>
<div>
<div className="gap-2 mt-2">
<IconWrapper>
<img className="w-6 h-6" src={props.details.icon} />
</IconWrapper>
<IconLabel>{props.details.displayName}</IconLabel>
<Text kind="body-s">{props.details.displayName}</Text>
{props.details.isBeta && <BetaLabel>Beta</BetaLabel>}
</div>
</Wrapper>

View File

@ -3,7 +3,6 @@ import { useSelector } from "react-redux";
import WidgetCard from "./WidgetCard";
import { getWidgetCards } from "selectors/editorSelectors";
import { SearchInput } from "design-system";
import { ENTITY_EXPLORER_SEARCH_ID } from "constants/Explorer";
import { debounce } from "lodash";
import {

View File

@ -0,0 +1,160 @@
import React, { useEffect, useMemo, useRef, useState } from "react";
import { useSelector } from "react-redux";
import WidgetCard from "./WidgetCard";
import { getWidgetCards } from "selectors/editorSelectors";
import { ENTITY_EXPLORER_SEARCH_ID } from "constants/Explorer";
import { debounce, sortBy } from "lodash";
import Fuse from "fuse.js";
import type { WidgetCardProps } from "widgets/BaseWidget";
import AnalyticsUtil from "utils/AnalyticsUtil";
import {
SUGGESTED_WIDGETS_ORDER,
WIDGET_TAGS,
type WidgetCardsGroupedByTags,
type WidgetTags,
} from "constants/WidgetConstants";
import { groupWidgetCardsByTags } from "./utils";
import {
Collapsible,
CollapsibleHeader,
CollapsibleContent,
SearchInput,
Text,
} from "design-system";
function WidgetSidebarWithTags({ isActive }: { isActive: boolean }) {
const cards = useSelector(getWidgetCards);
const groupedCards = useMemo(() => groupWidgetCardsByTags(cards), [cards]);
const [filteredCards, setFilteredCards] =
useState<WidgetCardsGroupedByTags>(groupedCards);
const searchInputRef = useRef<HTMLInputElement | null>(null);
const [isSearching, setIsSearching] = useState(false);
const fuse = useMemo(() => {
const options = {
keys: [
{
name: "displayName",
weight: 0.8,
},
{
name: "searchTags",
weight: 0.1,
},
{
name: "tags",
weight: 0.1,
},
],
threshold: 0.2,
distance: 100,
};
return new Fuse(cards, options);
}, [cards]);
const sendWidgetSearchAnalytics = debounce((value: string) => {
if (value !== "") {
AnalyticsUtil.logEvent("WIDGET_SEARCH", { value });
}
}, 1000);
const filterCards = (keyword: string) => {
setIsSearching(true);
sendWidgetSearchAnalytics(keyword);
if (keyword.trim().length > 0) {
const searchResult = fuse.search(keyword);
setFilteredCards(groupWidgetCardsByTags(searchResult));
} else {
setFilteredCards(groupedCards);
setIsSearching(false);
}
};
useEffect(() => {
if (isActive) searchInputRef.current?.focus();
}, [isActive]);
const search = debounce((value: string) => {
filterCards(value.toLowerCase());
}, 300);
return (
<div
className={`flex flex-col t--widget-sidebar overflow-hidden ${
isActive ? "" : "hidden"
}`}
>
<div className="sticky top-0 px-3 mt-0.5">
<SearchInput
autoComplete="off"
autoFocus
id={ENTITY_EXPLORER_SEARCH_ID}
onChange={search}
placeholder="Search widgets"
ref={searchInputRef}
type="text"
/>
</div>
<div
className="flex-grow px-3 mt-2 overflow-y-scroll"
data-testid="widget-sidebar-scrollable-wrapper"
>
<div>
{Object.keys(filteredCards).map((tag) => {
const cardsForThisTag: WidgetCardProps[] =
filteredCards[tag as WidgetTags];
if (!cardsForThisTag?.length) {
return null;
}
// We don't need to show suggested widgets when the user is searching
if (isSearching && tag === WIDGET_TAGS.SUGGESTED_WIDGETS) {
return null;
}
return (
<Collapsible
className={`pb-2 widget-tag-collapisble widget-tag-collapisble-${tag
.toLowerCase()
.replace(/ /g, "-")}`}
isOpen
key={tag}
>
<CollapsibleHeader arrowPosition="start">
<Text
className="select-none"
color="var(--ads-v2-color-gray-600)"
kind="heading-xs"
>
{tag}
</Text>
</CollapsibleHeader>
<CollapsibleContent>
<div className="grid items-stretch grid-cols-3 gap-x-2 gap-y-1 justify-items-stretch">
{tag === WIDGET_TAGS.SUGGESTED_WIDGETS
? sortBy(cardsForThisTag, (widget) => {
return SUGGESTED_WIDGETS_ORDER[widget.type];
}).map((card) => (
<WidgetCard details={card} key={card.key} />
))
: cardsForThisTag.map((card) => (
<WidgetCard details={card} key={card.key} />
))}
</div>
</CollapsibleContent>
</Collapsible>
);
})}
</div>
</div>
</div>
);
}
WidgetSidebarWithTags.displayName = "WidgetSidebarWithTags";
export default WidgetSidebarWithTags;

View File

@ -3,7 +3,12 @@ import _, { debounce, random } from "lodash";
import { useEffect, useMemo, useState } from "react";
import ReactDOM from "react-dom";
import { useLocation } from "react-router";
import type { WidgetType } from "constants/WidgetConstants";
import type {
WidgetCardsGroupedByTags,
WidgetTags,
WidgetType,
} from "constants/WidgetConstants";
import { WIDGET_TAGS } from "constants/WidgetConstants";
import ResizeObserver from "resize-observer-polyfill";
import WidgetFactory from "utils/WidgetFactory";
import {
@ -13,6 +18,7 @@ import {
import type { URLBuilderParams } from "RouteBuilder";
import { useSelector } from "react-redux";
import { getCurrentPageId } from "selectors/editorSelectors";
import type { WidgetCardProps } from "widgets/BaseWidget";
export const draggableElement = (
id: string,
@ -305,3 +311,24 @@ export const generateRandomNumbers = (
) => {
return random(lowerBound, upperBound, allowFloating);
};
export const groupWidgetCardsByTags = (widgetCards: WidgetCardProps[]) => {
const tagsOrder = Object.values(WIDGET_TAGS);
const groupedCards: WidgetCardsGroupedByTags = {} as WidgetCardsGroupedByTags;
tagsOrder.forEach((tag: WidgetTags) => {
groupedCards[tag] = [];
});
widgetCards.forEach((item) => {
if (item.tags) {
item.tags.forEach((tag) => {
if (groupedCards[tag]) {
groupedCards[tag].push(item);
}
});
}
});
return groupedCards;
};

View File

@ -349,6 +349,7 @@ export const getWidgetCards = createSelector(
iconSVG,
key,
searchTags,
tags,
type,
} = config;
let { columns, rows } = config;
@ -368,6 +369,7 @@ export const getWidgetCards = createSelector(
displayName,
icon: iconSVG,
searchTags,
tags,
isDynamicHeight: isAutoHeightEnabledForWidget(config as WidgetProps),
};
});

View File

@ -91,6 +91,7 @@ export const configureWidget = (config: WidgetConfiguration) => {
...config.defaults,
...features,
searchTags: config.searchTags,
tags: config.tags,
type: config.type,
hideCard: !!config.hideCard || !config.iconSVG,
isDeprecated: !!config.isDeprecated,

View File

@ -1 +1,4 @@
<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="#4c5664"><path d="m23.7299 14.3547c0-.6242-.4316-1.1349-.9592-1.1349-.5275 0-.9591.5107-.9591 1.1349 0 3.9148-2.6856 7.0354-5.9467 7.0354-3.261 0-5.94663-3.1206-5.94663-7.0354 0-.6242-.4316-1.1349-.95914-1.1349-.52752 0-.95913.5107-.95913 1.1349 0 4.7658 3.0213 8.6808 6.9057 9.1914v3.5178h-2.158c-.5275 0-.9591.5106-.9591 1.1346 0 .6242.4316 1.1348.9591 1.1348h6.1864c.5276 0 .9592-.5106.9592-1.1348 0-.624-.4316-1.1346-.9592-1.1346h-2.1101v-3.5178c3.8845-.5106 6.9059-4.4256 6.9059-9.1914z"/><path d="m16.0088 2.66666h-.2879c-2.206 0-4.0283 2.15602-4.0283 4.76596v6.86528c0 2.61 1.8223 4.766 4.0283 4.766h.2879c2.206 0 4.0283-2.156 4.0283-4.766v-6.86528c0-2.60994-1.8223-4.76596-4.0283-4.76596z"/></g></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.5179 10.6427C18.5179 10.1277 18.147 9.70636 17.6936 9.70636C17.2403 9.70636 16.8694 10.1277 16.8694 10.6427C16.8694 13.8724 14.5614 16.4469 11.7589 16.4469C8.95648 16.4469 6.64851 13.8724 6.64851 10.6427C6.64851 10.1277 6.27761 9.70636 5.82425 9.70636C5.37092 9.70636 5 10.1277 5 10.6427C5 14.5744 7.59643 17.8043 10.9346 18.2256V21.1278H9.08006C8.62674 21.1278 8.25583 21.549 8.25583 22.0638C8.25583 22.5788 8.62674 23 9.08006 23H14.3965C14.8499 23 15.2208 22.5788 15.2208 22.0638C15.2208 21.549 14.8499 21.1278 14.3965 21.1278H12.5831V18.2256C15.9214 17.8043 18.5179 14.5744 18.5179 10.6427Z" fill="#4C5664"/>
<path d="M11.8823 1.00002H11.6349C9.73914 1.00002 8.1731 2.77873 8.1731 4.93194V10.5958C8.1731 12.749 9.73914 14.5278 11.6349 14.5278H11.8823C13.7781 14.5278 15.3442 12.749 15.3442 10.5958V4.93194C15.3442 2.77873 13.7781 1.00002 11.8823 1.00002Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 813 B

After

Width:  |  Height:  |  Size: 992 B

View File

@ -1,13 +1,14 @@
import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
import { ResponsiveBehavior } from "utils/autoLayout/constants";
import IconSVG from "./icon.svg";
import Widget from "./widget";
import { WIDGET_TAGS } from "constants/WidgetConstants";
export const CONFIG = {
type: Widget.getWidgetType(),
name: "Audio Recorder",
iconSVG: IconSVG,
tags: [WIDGET_TAGS.EXTERNAL],
needsMeta: true,
searchTags: ["sound recorder", "voice recorder"],
defaults: {

View File

@ -1 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" fill="none" viewBox="0 0 18 14"><path fill="#4c5664" d="M0.5 11V3H2.5V11H0.5Z"/><path fill="#4c5664" d="M3.5 13V1H5.5V13H3.5Z"/><path fill="#4c5664" d="M6.5 10V5H8.5V10H6.5Z"/><path fill="#4c5664" d="M9.5 14V0H11.5V14H9.5Z"/><path fill="#4c5664" d="M12.5 12V2H14.5V12H12.5Z"/><path fill="#4c5664" d="M15.5 10V4H17.5V10H15.5Z"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 16V8H5V16H3Z" fill="#4C5664"/>
<path d="M6 18V6H8V18H6Z" fill="#4C5664"/>
<path d="M9 15V10H11V15H9Z" fill="#4C5664"/>
<path d="M12 19V5H14V19H12Z" fill="#4C5664"/>
<path d="M15 17V7H17V17H15Z" fill="#4C5664"/>
<path d="M18 15V9H20V15H18Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 396 B

After

Width:  |  Height:  |  Size: 372 B

View File

@ -1,15 +1,16 @@
import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
import { ResponsiveBehavior } from "utils/autoLayout/constants";
import IconSVG from "./icon.svg";
import Widget from "./widget";
import { ASSETS_CDN_URL } from "constants/ThirdPartyConstants";
import { getAssetUrl } from "@appsmith/utils/airgapHelpers";
import { WIDGET_TAGS } from "constants/WidgetConstants";
export const CONFIG = {
type: Widget.getWidgetType(),
name: "Audio",
iconSVG: IconSVG,
tags: [WIDGET_TAGS.MEDIA],
needsMeta: true,
searchTags: ["mp3", "sound", "wave", "player"],
defaults: {

View File

@ -1 +1,4 @@
<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="#4c5664"><path clip-rule="evenodd" d="m2.66675 8h26.66665v16h-26.66665zm2.66666 13.3333v-10.6666h21.33329v10.6666z" fill-rule="evenodd"/><path d="m6.66675 20v-8h1.33333v8z"/></g></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 5H23V18.2H1V5ZM3.2 16V7.20003H20.8V16H3.2Z" fill="#4B4848"/>
<path d="M4.30005 14.9V8.29999H5.40005V14.9H4.30005Z" fill="#4B4848"/>
</svg>

Before

Width:  |  Height:  |  Size: 288 B

After

Width:  |  Height:  |  Size: 287 B

View File

@ -22,6 +22,7 @@ import type {
CSSUnit,
PositionType,
RenderMode,
WidgetTags,
WidgetType,
} from "constants/WidgetConstants";
import { FLEXBOX_PADDING } from "constants/WidgetConstants";
@ -911,6 +912,7 @@ export interface WidgetCardProps {
displayName: string;
icon: string;
isBeta?: boolean;
tags?: WidgetTags[];
}
export const WidgetOperations = {

View File

@ -1 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="13" fill="none" viewBox="0 0 32 13"><mask id="path-1-inside-1" fill="#fff"><path fill-rule="evenodd" d="M0 2C0 0.895431 0.895431 0 2 0H9.5V13H2C0.895431 13 0 12.1046 0 11V2ZM11 13V0H21V13H11ZM22.5 13H30C31.1046 13 32 12.1046 32 11V2C32 0.895431 31.1046 0 30 0H22.5V13Z" clip-rule="evenodd"/></mask><path fill="#4c5664" fill-rule="evenodd" d="M0 2C0 0.895431 0.895431 0 2 0H9.5V13H2C0.895431 13 0 12.1046 0 11V2ZM11 13V0H21V13H11ZM22.5 13H30C31.1046 13 32 12.1046 32 11V2C32 0.895431 31.1046 0 30 0H22.5V13Z" clip-rule="evenodd"/><path fill="#4c5664" d="M9.5 0H10.5V-1H9.5V0ZM9.5 13V14H10.5V13H9.5ZM11 0V-1H10V0H11ZM11 13H10V14H11V13ZM21 0H22V-1H21V0ZM21 13V14H22V13H21ZM22.5 13H21.5V14H22.5V13ZM22.5 0V-1H21.5V0H22.5ZM2 -1C0.343146 -1 -1 0.343146 -1 2H1C1 1.44772 1.44772 1 2 1V-1ZM9.5 -1H2V1H9.5V-1ZM10.5 13V0H8.5V13H10.5ZM2 14H9.5V12H2V14ZM-1 11C-1 12.6569 0.343146 14 2 14V12C1.44772 12 1 11.5523 1 11H-1ZM-1 2V11H1V2H-1ZM10 0V13H12V0H10ZM21 -1H11V1H21V-1ZM22 13V0H20V13H22ZM11 14H21V12H11V14ZM22.5 14H30V12H22.5V14ZM30 14C31.6569 14 33 12.6569 33 11H31C31 11.5523 30.5523 12 30 12V14ZM33 11V2H31V11H33ZM33 2C33 0.343146 31.6569 -1 30 -1V1C30.5523 1 31 1.44772 31 2H33ZM30 -1H22.5V1H30V-1ZM21.5 0V13H23.5V0H21.5Z" mask="url(#path-1-inside-1)"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_35_3375" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="8" width="22" height="9">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 9.375C1 8.61561 1.61561 8 2.375 8H7.53125V16.9375H2.375C1.61561 16.9375 1 16.3219 1 15.5625V9.375ZM8.5625 16.9375V8H15.4375V16.9375H8.5625ZM16.4688 16.9375H21.625C22.3844 16.9375 23 16.3219 23 15.5625V9.375C23 8.61561 22.3844 8 21.625 8H16.4688V16.9375Z" fill="white"/>
</mask>
<g mask="url(#mask0_35_3375)">
<path d="M7.53125 8H8.21875V7.3125H7.53125V8ZM7.53125 16.9375V17.625H8.21875V16.9375H7.53125ZM8.5625 8V7.3125H7.875V8H8.5625ZM8.5625 16.9375H7.875V17.625H8.5625V16.9375ZM15.4375 8H16.125V7.3125H15.4375V8ZM15.4375 16.9375V17.625H16.125V16.9375H15.4375ZM16.4688 16.9375H15.7812V17.625H16.4688V16.9375ZM16.4688 8V7.3125H15.7812V8H16.4688ZM2.375 7.3125C1.23591 7.3125 0.3125 8.23591 0.3125 9.375H1.6875C1.6875 8.99531 1.99531 8.6875 2.375 8.6875V7.3125ZM7.53125 7.3125H2.375V8.6875H7.53125V7.3125ZM8.21875 16.9375V8H6.84375V16.9375H8.21875ZM2.375 17.625H7.53125V16.25H2.375V17.625ZM0.3125 15.5625C0.3125 16.7016 1.23591 17.625 2.375 17.625V16.25C1.99531 16.25 1.6875 15.9422 1.6875 15.5625H0.3125ZM0.3125 9.375V15.5625H1.6875V9.375H0.3125ZM7.875 8V16.9375H9.25V8H7.875ZM15.4375 7.3125H8.5625V8.6875H15.4375V7.3125ZM16.125 16.9375V8H14.75V16.9375H16.125ZM8.5625 17.625H15.4375V16.25H8.5625V17.625ZM16.4688 17.625H21.625V16.25H16.4688V17.625ZM21.625 17.625C22.7641 17.625 23.6875 16.7016 23.6875 15.5625H22.3125C22.3125 15.9422 22.0047 16.25 21.625 16.25V17.625ZM23.6875 15.5625V9.375H22.3125V15.5625H23.6875ZM23.6875 9.375C23.6875 8.23591 22.7641 7.3125 21.625 7.3125V8.6875C22.0047 8.6875 22.3125 8.99531 22.3125 9.375H23.6875ZM21.625 7.3125H16.4688V8.6875H21.625V7.3125ZM15.7812 8V16.9375H17.1562V8H15.7812Z" fill="#4C5664"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 9.375C1 8.61561 1.61561 8 2.375 8H7.53125V16.9375H2.375C1.61561 16.9375 1 16.3219 1 15.5625V9.375ZM8.5625 16.9375V8H15.4375V16.9375H8.5625ZM16.4688 16.9375H21.625C22.3844 16.9375 23 16.3219 23 15.5625V9.375C23 8.61561 22.3844 8 21.625 8H16.4688V16.9375Z" fill="#4C5664"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -8,6 +8,7 @@ import { BlueprintOperationTypes } from "widgets/constants";
import IconSVG from "./icon.svg";
import Widget from "./widget";
import type { ButtonGroupWidgetProps } from "./widget";
import { WIDGET_TAGS } from "constants/WidgetConstants";
export const CONFIG = {
type: Widget.getWidgetType(),
@ -16,6 +17,7 @@ export const CONFIG = {
needsMeta: false, // Defines if this widget adds any meta properties
isCanvas: false, // Defines if this widget has a canvas within in which we can drop other widgets
searchTags: ["click", "submit"],
tags: [WIDGET_TAGS.BUTTONS],
defaults: {
rows: 4,
columns: 24,

View File

@ -1 +1,3 @@
<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m24 19v-8h-16v10h8v-2h-6v-6h12v6zm-9.4727 3.0555c1.1911-.4051 1.3299-.3724 2.2775.6936.0151.0138.0302.0277.0453.0416.239.2192.4717.4326.7838.3138.3327-.1256.4008-.3158.4008-.6439v-6.4815c0-.4464.5133-.953 1.0043-.953.4911 0 .9938.5066.9938.953v3.4791l2.7653 1.2297c.4139.184.6524.6233.5813 1.0707l-.5152 3.2414h-6.8642l-.4913-1z" fill="#4c5664" fill-rule="evenodd"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21 14V4H1V16.5H11V14H3.5V6.5H18.5V14H21ZM9.15912 17.8194C10.648 17.313 10.8215 17.3539 12.006 18.6864C12.0249 18.7036 12.0437 18.721 12.0626 18.7384C12.3614 19.0124 12.6522 19.2791 13.0424 19.1306C13.4583 18.9736 13.5434 18.7359 13.5434 18.3258V10.2239C13.5434 9.66588 14.185 9.03263 14.7987 9.03263C15.4126 9.03263 16.041 9.66588 16.041 10.2239V14.5728L19.4976 16.1099C20.015 16.3399 20.3131 16.889 20.2243 17.4482L19.5802 21.5H11L10.3859 20.25L9.15912 17.8194Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 496 B

After

Width:  |  Height:  |  Size: 634 B

View File

@ -5,14 +5,15 @@ import {
} from "components/constants";
import { BUTTON_MIN_WIDTH } from "constants/minWidthConstants";
import { ResponsiveBehavior } from "utils/autoLayout/constants";
import IconSVG from "./icon.svg";
import Widget from "./widget";
import { WIDGET_TAGS } from "constants/WidgetConstants";
export const CONFIG = {
type: Widget.getWidgetType(),
name: "Button",
iconSVG: IconSVG,
tags: [WIDGET_TAGS.BUTTONS],
needsMeta: true,
searchTags: ["click", "submit"],
defaults: {

4
app/client/src/widgets/CameraWidget/icon.svg Executable file → Normal file
View File

@ -1 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="#4c5664"><path fill="none" d="M0 0h24v24H0z"/><path d="M9 3h6l2 2h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h4l2-2zm3 16a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm0-2a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/></g></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 3H15L17 5H21C21.2652 5 21.5196 5.10536 21.7071 5.29289C21.8946 5.48043 22 5.73478 22 6V20C22 20.2652 21.8946 20.5196 21.7071 20.7071C21.5196 20.8946 21.2652 21 21 21H3C2.73478 21 2.48043 20.8946 2.29289 20.7071C2.10536 20.5196 2 20.2652 2 20V6C2 5.73478 2.10536 5.48043 2.29289 5.29289C2.48043 5.10536 2.73478 5 3 5H7L9 3ZM12 19C13.5913 19 15.1174 18.3679 16.2426 17.2426C17.3679 16.1174 18 14.5913 18 13C18 11.4087 17.3679 9.88258 16.2426 8.75736C15.1174 7.63214 13.5913 7 12 7C10.4087 7 8.88258 7.63214 7.75736 8.75736C6.63214 9.88258 6 11.4087 6 13C6 14.5913 6.63214 16.1174 7.75736 17.2426C8.88258 18.3679 10.4087 19 12 19ZM12 17C10.9391 17 9.92172 16.5786 9.17157 15.8284C8.42143 15.0783 8 14.0609 8 13C8 11.9391 8.42143 10.9217 9.17157 10.1716C9.92172 9.42143 10.9391 9 12 9C13.0609 9 14.0783 9.42143 14.8284 10.1716C15.5786 10.9217 16 11.9391 16 13C16 14.0609 15.5786 15.0783 14.8284 15.8284C14.0783 16.5786 13.0609 17 12 17Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 311 B

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@ -2,11 +2,13 @@ import { ResponsiveBehavior } from "utils/autoLayout/constants";
import { CameraModeTypes } from "./constants";
import IconSVG from "./icon.svg";
import Widget from "./widget";
import { WIDGET_TAGS } from "constants/WidgetConstants";
export const CONFIG = {
type: Widget.getWidgetType(),
name: "Camera", // The display name which will be made in uppercase and show in the widgets panel ( can have spaces )
iconSVG: IconSVG,
tags: [WIDGET_TAGS.EXTERNAL],
needsMeta: true, // Defines if this widget adds any meta properties
isCanvas: false, // Defines if this widget has a canvas within in which we can drop other widgets
searchTags: ["photo", "video recorder"],

View File

@ -1,6 +1,6 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M26.0117 13.5V7.5H28.3069C28.8558 7.5 29.2882 7.63444 29.6042 7.90333C29.923 8.17221 30.0824 8.53673 30.0824 8.99688C30.0824 9.30735 29.9812 9.58732 29.7789 9.8368C29.5793 10.0863 29.3353 10.2374 29.0471 10.29V10.3565C29.4573 10.4092 29.783 10.5672 30.0242 10.8306C30.2654 11.0911 30.3859 11.4196 30.3859 11.816C30.3859 12.3455 30.2058 12.7585 29.8454 13.0551C29.4878 13.3517 28.9902 13.5 28.3527 13.5H26.0117ZM26.7602 12.8389H28.2404C28.6922 12.8389 29.0346 12.7488 29.2674 12.5686C29.5003 12.3884 29.6167 12.1251 29.6167 11.7786C29.6167 11.08 29.1344 10.7308 28.1697 10.7308H26.7602V12.8389ZM26.7602 10.0863H27.9577C28.8697 10.0863 29.3256 9.76611 29.3256 9.12578C29.3256 8.82086 29.2217 8.58385 29.0138 8.41476C28.8087 8.24567 28.5204 8.16112 28.1489 8.16112H26.7602V10.0863Z" fill="#4c5664" stroke="#4C5664" stroke-width="0.3"/>
<path d="M1.61719 13.5L4.18724 7.5H5.04714L7.61719 13.5H6.70414L6.00366 11.7827H3.23071L2.53023 13.5H1.61719ZM3.48675 11.1466H5.74762L4.65583 8.46882H4.57854L3.48675 11.1466Z" fill="#4c5664" stroke="#4C5664" stroke-width="0.3"/>
<path d="M30 18.5H2V21.5H30V18.5Z" fill="#4c5664"/>
<circle cx="19.5" cy="20" r="4.5" fill="#4c5664"/>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.655 10.5883V6H21.4102C21.8299 6 22.1606 6.10281 22.4022 6.30843C22.646 6.51405 22.7679 6.79281 22.7679 7.14469C22.7679 7.38211 22.6905 7.59621 22.5358 7.787C22.3832 7.97779 22.1966 8.09334 21.9762 8.13357V8.18442C22.2899 8.22472 22.539 8.34555 22.7234 8.54697C22.9079 8.74618 23 8.99739 23 9.30053C23 9.70545 22.8623 10.0213 22.5867 10.2481C22.3132 10.4749 21.9327 10.5883 21.4452 10.5883H19.655ZM20.2274 10.0828H21.3593C21.7048 10.0828 21.9666 10.0139 22.1447 9.87606C22.3228 9.73825 22.4118 9.5369 22.4118 9.27193C22.4118 8.73769 22.043 8.47065 21.3052 8.47065H20.2274V10.0828ZM20.2274 7.97779H21.1431C21.8405 7.97779 22.1892 7.73294 22.1892 7.24327C22.1892 7.01009 22.1097 6.82884 21.9507 6.69953C21.7939 6.57023 21.5734 6.50557 21.2893 6.50557H20.2274V7.97779Z" fill="#4C5664" stroke="#4C5664" stroke-width="0.3"/>
<path d="M1 10.5883L2.96537 6H3.62295L5.58832 10.5883H4.89009L4.35442 9.27506H2.23389L1.69822 10.5883H1ZM2.42969 8.78862H4.15862L3.32371 6.74087H3.2646L2.42969 8.78862Z" fill="#4C5664" stroke="#4C5664" stroke-width="0.3"/>
<path d="M22.7049 14.4119H1.29272V16.7061H22.7049V14.4119Z" fill="#4C5664"/>
<path d="M14.6753 19.0002C16.5758 19.0002 18.1165 17.4595 18.1165 15.559C18.1165 13.6584 16.5758 12.1178 14.6753 12.1178C12.7748 12.1178 11.2341 13.6584 11.2341 15.559C11.2341 17.4595 12.7748 19.0002 14.6753 19.0002Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -1,9 +1,9 @@
import { Alignment } from "@blueprintjs/core";
import { LabelPosition } from "components/constants";
import { ResponsiveBehavior } from "utils/autoLayout/constants";
import IconSVG from "./icon.svg";
import Widget from "./widget";
import { WIDGET_TAGS } from "constants/WidgetConstants";
export const CONFIG = {
type: Widget.getWidgetType(),
@ -11,6 +11,7 @@ export const CONFIG = {
needsMeta: true,
searchTags: ["range"],
iconSVG: IconSVG,
tags: [WIDGET_TAGS.SLIDERS],
defaults: {
options: [
{ label: "xs", value: "xs" },

View File

@ -1 +1,5 @@
<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="#4c5664"><path d="m10.6666 22.6667v6.6666h-5.33335v-6.6666z"/><path d="m18.6666 16v13.3333h-5.3333v-13.3333z"/><path d="m26.6666 2.66666v26.66664h-5.3333v-26.66664z"/></g></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.40002 16.5V22H3V16.5H7.40002Z" fill="#4C5664"/>
<path d="M14 11V22H9.60004V11H14Z" fill="#4C5664"/>
<path d="M20.6002 1.99997V22H16.2002V1.99997H20.6002Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 281 B

After

Width:  |  Height:  |  Size: 287 B

View File

@ -1,16 +1,17 @@
import { Colors } from "constants/Colors";
import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
import { ResponsiveBehavior } from "utils/autoLayout/constants";
import { generateReactKey } from "widgets/WidgetUtils";
import { LabelOrientation } from "./constants";
import IconSVG from "./icon.svg";
import Widget from "./widget";
import { WIDGET_TAGS } from "constants/WidgetConstants";
export const CONFIG = {
type: Widget.getWidgetType(),
name: "Chart",
iconSVG: IconSVG,
tags: [WIDGET_TAGS.DISPLAY],
needsMeta: true,
searchTags: ["graph", "visuals", "visualisations"],
defaults: {

View File

@ -1 +1,7 @@
<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="#4c5664"><path d="m4.8147 16.815 1.14288-1.1428 1.14286 1.1428 2.85719-2.8571 1.14287 1.1428-4.00006 4.0001z"/><path d="m4.8147 8.00004 1.14288-1.14287 1.14286 1.14287 2.85719-2.85719 1.14287 1.14288-4.00006 4.00007z"/><path d="m26.6666 6.66666h-13.3333v2.66666h13.3333z"/><path d="m26.6666 14.6667h-13.3333v2.6666h13.3333z"/><path d="m26.6666 22.6667h-13.3333v2.6666h13.3333z"/></g></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 13.7513L2.15063 12.6007L3.30123 13.7513L6.17779 10.8748L7.3284 12.0253L3.30123 16.0526L1 13.7513Z" fill="#4C5664"/>
<path d="M1 4.87655L2.15063 3.72594L3.30123 4.87655L6.17779 2L7.3284 3.15063L3.30123 7.17781L1 4.87655Z" fill="#4C5664"/>
<path d="M22.9998 3.53413H9.57617V6.21887H22.9998V3.53413Z" fill="#4C5664"/>
<path d="M22.9998 11.5883H9.57617V14.273H22.9998V11.5883Z" fill="#4C5664"/>
<path d="M22.9998 19.6426H9.57617V22.3273H22.9998V19.6426Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 493 B

After

Width:  |  Height:  |  Size: 583 B

View File

@ -1,8 +1,8 @@
import { Alignment } from "@blueprintjs/core";
import { LabelPosition } from "components/constants";
import IconSVG from "./icon.svg";
import Widget from "./widget";
import { WIDGET_TAGS } from "constants/WidgetConstants";
export const CONFIG = {
features: {
@ -14,6 +14,7 @@ export const CONFIG = {
type: Widget.getWidgetType(),
name: "Checkbox Group",
iconSVG: IconSVG,
tags: [WIDGET_TAGS.TOGGLES],
needsMeta: true,
defaults: {
rows: 6,

View File

@ -1 +1,3 @@
<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m25.3334 25.3333v-18.66664h-18.66665v18.66664zm-15.99999-15.99998v13.33338h13.33329v-13.33338zm3.21889 5.42618-1.8856 1.8856 3.7712 3.7712 6.5997-6.5997-1.8856-1.8856-4.7141 4.7141z" fill="#4c5664" fill-rule="evenodd"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23 23V0.999969H1V23H23ZM4.14285 4.14282V19.8572H19.8571V4.14282H4.14285ZM7.93655 10.538L5.71423 12.7603L10.1589 17.2049L17.9371 9.42669L15.7148 7.20438L10.1589 12.7603L7.93655 10.538Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 349 B

After

Width:  |  Height:  |  Size: 355 B

View File

@ -2,9 +2,9 @@ import { LabelPosition } from "components/constants";
import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
import { ResponsiveBehavior } from "utils/autoLayout/constants";
import { AlignWidgetTypes } from "widgets/constants";
import IconSVG from "./icon.svg";
import Widget from "./widget";
import { WIDGET_TAGS } from "constants/WidgetConstants";
export const CONFIG = {
features: {
@ -16,6 +16,7 @@ export const CONFIG = {
type: Widget.getWidgetType(),
name: "Checkbox",
iconSVG: IconSVG,
tags: [WIDGET_TAGS.TOGGLES],
needsMeta: true,
searchTags: ["boolean"],
defaults: {

View File

@ -1 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><path fill="none" d="M0 0h24v24H0z"/><path d="M15 3h6v5h-2V5h-4V3zM9 3v2H5v3H3V3h6zm6 18v-2h4v-3h2v5h-6zm-6 0H3v-5h2v3h4v2zM3 11h18v2H3v-2z"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.6667 1H23V7.11111H20.5556V3.44444H15.6667V1ZM8.33333 1V3.44444H3.44444V7.11111H1V1H8.33333ZM15.6667 23V20.5556H20.5556V16.8889H23V23H15.6667ZM8.33333 23H1V16.8889H3.44444V20.5556H8.33333V23ZM1 10.7778H23V13.2222H1V10.7778Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 231 B

After

Width:  |  Height:  |  Size: 357 B

View File

@ -3,11 +3,13 @@ import Widget from "./widget";
import { ButtonPlacementTypes } from "components/constants";
import { ScannerLayout } from "./constants";
import { ResponsiveBehavior } from "utils/autoLayout/constants";
import { WIDGET_TAGS } from "constants/WidgetConstants";
export const CONFIG = {
type: Widget.getWidgetType(),
name: "Code Scanner",
iconSVG: IconSVG,
tags: [WIDGET_TAGS.EXTERNAL],
needsMeta: true,
searchTags: [
"barcode scanner",

View File

@ -1 +1,14 @@
<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="#4c5664"><path d="m2.66658 2.66666h5.33334v2.66666h-2.66667v2.66667h-2.66667z"/><path d="m29.3333 29.3333h-5.3334v-2.6666h2.6667v-2.6667h2.6667z"/><path d="m2.66658 29.3333v-5.3333h2.66667v2.6667h2.66667v2.6666z"/><path d="m2.66658 14.6667v-4h2.66667v4z"/><path d="m26.6666 14.6667v-4h2.6667v4z"/><path d="m14.6666 5.33332h-4v-2.66666h4z"/><path d="m14.6666 29.3333h-4v-2.6666h4z"/><path d="m2.66658 21.3333v-4h2.66667v4z"/><path d="m26.6666 21.3333v-4h2.6667v4z"/><path d="m21.3332 5.33332h-4l.0001-2.66666h4z"/><path d="m21.3333 29.3333h-4v-2.6666h3.9999z"/><path d="m29.3333 7.99999v-5.33333h-5.3334v2.66666h2.6667v2.66667z"/></g></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 0.999969H5.4V3.19996H3.2V5.39996H1V0.999969Z" fill="#4C5664"/>
<path d="M22.9997 22.9999H18.5997V20.7999H20.7997V18.5999H22.9997V22.9999Z" fill="#4C5664"/>
<path d="M1 22.9999V18.5999H3.2V20.7999H5.4V22.9999H1Z" fill="#4C5664"/>
<path d="M1 10.9V7.60001H3.2V10.9H1Z" fill="#4C5664"/>
<path d="M20.8 10.9V7.60001H23V10.9H20.8Z" fill="#4C5664"/>
<path d="M10.9 3.19996H7.59998V0.999969H10.9V3.19996Z" fill="#4C5664"/>
<path d="M10.9 22.9999H7.59998V20.8H10.9V22.9999Z" fill="#4C5664"/>
<path d="M1 16.3999V13.0999H3.2V16.3999H1Z" fill="#4C5664"/>
<path d="M20.8 16.3999V13.0999H23V16.3999H20.8Z" fill="#4C5664"/>
<path d="M16.4002 3.19996H13.1002L13.1003 0.999969H16.4003L16.4002 3.19996Z" fill="#4C5664"/>
<path d="M16.4002 22.9999H13.1002V20.8H16.4001L16.4002 22.9999Z" fill="#4C5664"/>
<path d="M22.9997 5.39996V0.999969H18.5997V3.19996H20.7997V5.39996H22.9997Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 743 B

After

Width:  |  Height:  |  Size: 996 B

View File

@ -1,7 +1,11 @@
import { ButtonBoxShadowTypes } from "components/constants";
import { Colors } from "constants/Colors";
import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
import { GridDefaults, WidgetHeightLimits } from "constants/WidgetConstants";
import {
GridDefaults,
WIDGET_TAGS,
WidgetHeightLimits,
} from "constants/WidgetConstants";
import {
FlexVerticalAlignment,
ResponsiveBehavior,
@ -15,6 +19,7 @@ export const CONFIG = {
type: Widget.getWidgetType(),
name: "Container",
iconSVG: IconSVG,
tags: [WIDGET_TAGS.LAYOUT],
isCanvas: true,
features: {
dynamicHeight: {

View File

@ -1 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" fill="none" viewBox="0 0 20 12"><path fill="#4c5664" fill-rule="evenodd" d="M0 0H20V12H0V0ZM2 10V2H18V10H2Z" clip-rule="evenodd"/><path fill="#4c5664" d="M4.81348 8.41895H5.15625V7.93262C5.93555 7.87695 6.52441 7.46094 6.52441 6.74023V6.73438C6.52441 6.10156 6.10254 5.78516 5.32031 5.60352L5.15625 5.56543V4.42871C5.50781 4.47852 5.75098 4.68652 5.78906 5.0293L5.79199 5.03516L6.47168 5.03223V5.0293C6.44531 4.3584 5.91797 3.90137 5.15625 3.83984V3.34766H4.81348V3.83984C4.04883 3.89258 3.50098 4.3291 3.50098 5V5.00586C3.50098 5.61523 3.91113 5.95508 4.66406 6.12793L4.81348 6.16309V7.34668C4.37402 7.2998 4.15723 7.07129 4.10742 6.75195L4.10449 6.74609L3.4248 6.74902L3.42188 6.75195C3.44531 7.46094 4.03711 7.88281 4.81348 7.93262V8.41895ZM4.20703 4.95312V4.94727C4.20703 4.69531 4.41504 4.47559 4.81348 4.42871V5.48633C4.37988 5.37207 4.20703 5.19922 4.20703 4.95312ZM5.81836 6.80469V6.81055C5.81836 7.10059 5.61328 7.30859 5.15625 7.34668V6.24219C5.65723 6.36816 5.81836 6.52637 5.81836 6.80469Z"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 5H23V18.2H1V5ZM3.2 16V7.2H20.8V16H3.2Z" fill="#4C5664"/>
<path d="M6.29443 14.2608H6.67148V13.7258C7.52871 13.6646 8.17645 13.207 8.17645 12.4142V12.4078C8.17645 11.7117 7.7124 11.3636 6.85194 11.1638L6.67148 11.1219V9.87153C7.05819 9.92632 7.32568 10.1551 7.36757 10.5322L7.37079 10.5386L8.11845 10.5354V10.5322C8.08945 9.79419 7.50937 9.29145 6.67148 9.22377V8.68237H6.29443V9.22377C5.45332 9.28178 4.85068 9.76196 4.85068 10.4999V10.5064C4.85068 11.1767 5.30185 11.5505 6.13007 11.7407L6.29443 11.7793V13.0813C5.81103 13.0297 5.57256 12.7784 5.51777 12.4271L5.51454 12.4206L4.76688 12.4239L4.76367 12.4271C4.78944 13.207 5.44042 13.671 6.29443 13.7258V14.2608ZM5.62734 10.4484V10.4419C5.62734 10.1648 5.85615 9.9231 6.29443 9.87153V11.0349C5.81747 10.9092 5.62734 10.7191 5.62734 10.4484ZM7.3998 12.4851V12.4916C7.3998 12.8106 7.17421 13.0394 6.67148 13.0813V11.8664C7.22256 12.0049 7.3998 12.179 7.3998 12.4851Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -3,10 +3,10 @@ import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
import { ResponsiveBehavior } from "utils/autoLayout/constants";
import { DynamicHeight } from "utils/WidgetFeatures";
import { CONFIG as BaseConfig } from "widgets/BaseInputWidget";
import { getDefaultCurrency } from "./component/CurrencyCodeDropdown";
import IconSVG from "./icon.svg";
import Widget from "./widget";
import { WIDGET_TAGS } from "constants/WidgetConstants";
export const CONFIG = {
features: {
@ -19,6 +19,7 @@ export const CONFIG = {
type: Widget.getWidgetType(),
name: "Currency Input",
iconSVG: IconSVG,
tags: [WIDGET_TAGS.INPUTS],
needsMeta: true,
searchTags: ["amount", "total"],
defaults: {

View File

@ -1 +1,12 @@
<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="#4c5664"><path clip-rule="evenodd" d="m2.66675 5.33335h7.99995 10.6667 2.6667 5.3333v24.00005h-26.66665zm2.66666 21.33335v-13.3333-2.6667-2.66668h21.33329v2.66668 2.6667 13.3333z" fill-rule="evenodd"/><path d="m8.00008 2.66669v2.66666h2.66662v-2.66666z"/><path d="m21.3334 2.66669v2.66666h2.6667v-2.66666z"/><path d="m5.33341 13.3334h21.33329v-2.6667h-21.33329z"/><path d="m9.33342 18.6667v-2.6667h2.66668v2.6667z"/><path d="m9.33342 24v-2.6666h2.66668v2.6666z"/><path d="m14.6667 18.6667v-2.6667h2.6667v2.6667z"/><path d="m14.6667 24v-2.6666h2.6667v2.6666z"/><path d="m20.0001 18.6667v-2.6667h2.6666v2.6667z"/><path d="m20.0001 24v-2.6666h2.6666v2.6666z"/></g></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 3.20001H7.59996H16.4H18.6H23V23.0001H1V3.20001ZM3.2 20.8V9.80006V7.60003V5.40002H20.8V7.60003V9.80006V20.8H3.2Z" fill="#4C5664"/>
<path d="M5.39978 1V3.2H7.59974V1H5.39978Z" fill="#4C5664"/>
<path d="M16.4003 1V3.2H18.6003V1H16.4003Z" fill="#4C5664"/>
<path d="M3.20032 9.80003H20.8003V7.60001H3.20032V9.80003Z" fill="#4C5664"/>
<path d="M6.50024 14.2V12H8.70026V14.2H6.50024Z" fill="#4C5664"/>
<path d="M6.50024 18.6V16.4H8.70026V18.6H6.50024Z" fill="#4C5664"/>
<path d="M10.9 14.2V12H13.1001V14.2H10.9Z" fill="#4C5664"/>
<path d="M10.9 18.6V16.4H13.1001V18.6H10.9Z" fill="#4C5664"/>
<path d="M15.2997 14.2V12H17.4996V14.2H15.2997Z" fill="#4C5664"/>
<path d="M15.2997 18.6V16.4H17.4996V18.6H15.2997Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 771 B

After

Width:  |  Height:  |  Size: 874 B

View File

@ -4,10 +4,10 @@ import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
import moment from "moment";
import { ResponsiveBehavior } from "utils/autoLayout/constants";
import { DynamicHeight } from "utils/WidgetFeatures";
import { TimePrecision } from "./constants";
import IconSVG from "./icon.svg";
import Widget from "./widget";
import { WIDGET_TAGS } from "constants/WidgetConstants";
export const CONFIG = {
features: {
@ -20,6 +20,7 @@ export const CONFIG = {
type: Widget.getWidgetType(),
name: "DatePicker",
iconSVG: IconSVG,
tags: [WIDGET_TAGS.INPUTS],
needsMeta: true,
searchTags: ["calendar"],
defaults: {

View File

@ -1 +1,3 @@
<svg width="20" height="4" viewBox="0 0 20 4" fill="#4c5664" xmlns="http://www.w3.org/2000/svg"><rect width="20" height="3"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 10.7778H23V13.2222H1V10.7778Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 131 B

After

Width:  |  Height:  |  Size: 163 B

View File

@ -1,14 +1,15 @@
import { Colors } from "constants/Colors";
import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
import { ResponsiveBehavior } from "utils/autoLayout/constants";
import IconSVG from "./icon.svg";
import Widget from "./widget";
import { WIDGET_TAGS } from "constants/WidgetConstants";
export const CONFIG = {
type: Widget.getWidgetType(),
name: "Divider",
iconSVG: IconSVG,
tags: [WIDGET_TAGS.LAYOUT],
searchTags: ["line"],
defaults: {
rows: 4,

View File

@ -1 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="27" fill="#4c5664" viewBox="0 0 22 27"><path d="M4.66675 16.2654H5.69897V14.7103H6.70044C7.7395 14.7103 8.43335 14.0403 8.43335 13.0252V13.0184C8.43335 12.0032 7.7395 11.3333 6.70044 11.3333H4.66675V16.2654ZM6.44751 12.1502C7.03882 12.1502 7.38745 12.4612 7.38745 13.0218V13.0286C7.38745 13.5892 7.03882 13.9036 6.44751 13.9036H5.69897V12.1502H6.44751Z"/><path d="M9.16201 16.2654H11.1034C12.58 16.2654 13.4174 15.3631 13.4174 13.7703V13.7635C13.4174 12.2186 12.5697 11.3333 11.1034 11.3333H9.16201V16.2654ZM10.1942 15.4144V12.1844H10.9394C11.8349 12.1844 12.3646 12.7654 12.3646 13.7806V13.7874C12.3646 14.8401 11.8519 15.4144 10.9394 15.4144H10.1942Z"/><path d="M14.1768 16.2654H15.209V14.324H17.2154V13.5071H15.209V12.1844H17.4068V11.3333H14.1768V16.2654Z"/><path fill-rule="evenodd" d="M0 26.6667H21.3333V0H4.80651L0 4.83331V26.6667ZM18.6667 24H2.66667V6.33331L6.16675 2.66667H18.6667V24Z" clip-rule="evenodd"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.85034 14.4189H7.70192V13.1359H8.52813C9.38536 13.1359 9.95778 12.5832 9.95778 11.7457V11.7401C9.95778 10.9026 9.38536 10.3499 8.52813 10.3499H6.85034V14.4189ZM8.31947 11.0239C8.8073 11.0239 9.09492 11.2804 9.09492 11.7429V11.7485C9.09492 12.211 8.8073 12.4704 8.31947 12.4704H7.70192V11.0239H8.31947Z" fill="#4C5664"/>
<path d="M10.5588 14.4189H12.1605C13.3787 14.4189 14.0695 13.6745 14.0695 12.3604V12.3548C14.0695 11.0803 13.3702 10.3499 12.1605 10.3499H10.5588V14.4189ZM11.4104 13.7168V11.0521H12.0252C12.764 11.0521 13.201 11.5314 13.201 12.3689V12.3745C13.201 13.243 12.778 13.7168 12.0252 13.7168H11.4104Z" fill="#4C5664"/>
<path d="M14.6958 14.4189H15.5474V12.8172H17.2026V12.1433H15.5474V11.0521H17.3605V10.3499H14.6958V14.4189Z" fill="#4C5664"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 23H20.6V1H6.96537L3 4.98748V23ZM18.4 20.8H5.2V6.22497L8.08756 3.2H18.4V20.8Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 980 B

After

Width:  |  Height:  |  Size: 1018 B

View File

@ -2,6 +2,7 @@ import { ResponsiveBehavior } from "utils/autoLayout/constants";
import IconSVG from "./icon.svg";
import Widget from "./widget";
import { isAirgapped } from "@appsmith/utils/airgapHelpers";
import { WIDGET_TAGS } from "constants/WidgetConstants";
const isAirgappedInstance = isAirgapped();
@ -9,6 +10,7 @@ export const CONFIG = {
type: Widget.getWidgetType(),
name: "Document Viewer", // The display name which will be made in uppercase and show in the widgets panel ( can have spaces )
iconSVG: IconSVG,
tags: [WIDGET_TAGS.MEDIA],
needsMeta: false, // Defines if this widget adds any meta properties
isCanvas: false, // Defines if this widget has a canvas within in which we can drop other widgets
searchTags: ["pdf"],

View File

@ -1 +1,3 @@
<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m24.7267 26.2857h-3.7402-3.1173v-7.4857h2.4942l-4.3636-5.4857-4.3636 5.4857h2.4927v7.4857h-3.1165-3.74023c-2.75408 0-4.98701-2.4563-4.98701-5.4858 0-2.5618 1.60457-4.6971 3.7627-5.2992.23937-5.4473 4.31754-9.78647 9.32824-9.78647 4.9546 0 8.999 4.24183 9.3194 9.60407 2.7965-.0219 5.0182 2.4686 5.0182 5.4816 0 3.0295-2.2329 5.4858-4.987 5.4858z" fill="#4c5664" fill-rule="evenodd"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19 20.5001H16.0001H13.4997V14.4959H15.5003L12.0003 10.0959L8.50032 14.4959H10.4997V20.5001H7.99998H5C2.791 20.5001 1 18.5299 1 16.1C1 14.0452 2.287 12.3325 4.018 11.8496C4.21 7.48038 7.48103 4 11.5 4C15.474 4 18.718 7.40231 18.975 11.7033C21.218 11.6857 23 13.6833 23 16.1C23 18.5299 21.209 20.5001 19 20.5001Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 513 B

After

Width:  |  Height:  |  Size: 482 B

View File

@ -1,14 +1,15 @@
import { BUTTON_MIN_WIDTH } from "constants/minWidthConstants";
import { ResponsiveBehavior } from "utils/autoLayout/constants";
import FileDataTypes from "./constants";
import IconSVG from "./icon.svg";
import Widget from "./widget";
import { WIDGET_TAGS } from "constants/WidgetConstants";
export const CONFIG = {
type: Widget.getWidgetType(),
name: "FilePicker",
iconSVG: IconSVG,
tags: [WIDGET_TAGS.INPUTS],
needsMeta: true,
searchTags: ["upload"],
defaults: {

View File

@ -1 +1,7 @@
<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="#4c5664"><path clip-rule="evenodd" d="m5.33325 2.66669v26.66671h21.33335v-26.66671zm2.66667 24.00001v-21.33335h15.99998v21.33335z" fill-rule="evenodd"/><path d="m10.6666 10.6667v-2.66668h8v2.66668z"/><path d="m10.6666 14.6667v-2.6667h9.3333v2.6667z"/><path d="m10.6666 18.6667v-2.6667h8v2.6667z"/><path d="m15.9999 24.6667v-3.3333h5.3334v3.3333z"/></g></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0.999939V22.9999H20.6V0.999939H3ZM5.2 20.7999V3.19993H18.4V20.7999H5.2Z" fill="#4C5664"/>
<path d="M7.39978 7.59997V5.39996H13.9998V7.59997H7.39978Z" fill="#4C5664"/>
<path d="M7.39978 10.8999V8.69986H15.0997V10.8999H7.39978Z" fill="#4C5664"/>
<path d="M7.39978 14.1999V11.9998H13.9998V14.1999H7.39978Z" fill="#4C5664"/>
<path d="M11.8003 19.1499V16.4H16.2003V19.1499H11.8003Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 462 B

After

Width:  |  Height:  |  Size: 550 B

View File

@ -1,7 +1,7 @@
import { ButtonVariantTypes, RecaptchaTypes } from "components/constants";
import { Colors } from "constants/Colors";
import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
import { GridDefaults } from "constants/WidgetConstants";
import { GridDefaults, WIDGET_TAGS } from "constants/WidgetConstants";
import get from "lodash/get";
import type { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer";
import type { FlexLayer } from "utils/autoLayout/autoLayoutTypes";
@ -22,6 +22,7 @@ export const CONFIG = {
type: Widget.getWidgetType(),
name: "Form",
iconSVG: IconSVG,
tags: [WIDGET_TAGS.LAYOUT],
needsMeta: true,
isCanvas: true,
features: {

View File

@ -1 +1,3 @@
<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m15.9999 30.6666c8.1001 0 14.6667-6.5665 14.6667-14.6666 0-8.10019-6.5666-14.66669-14.6667-14.66669-8.10016 0-14.66665 6.5665-14.66665 14.66669 0 8.1001 6.56649 14.6666 14.66665 14.6666zm1.3334-16v-5.99995h-2.6667v5.99995h-6.66668v2.6667h6.66668v6.6667h2.6667v-6.6667h6v-2.6667z" fill="#4c5664" fill-rule="evenodd"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 23.0001C18.0751 23.0001 23 18.0752 23 12.0001C23 5.92494 18.0751 1.00006 12 1.00006C5.92487 1.00006 1 5.92494 1 12.0001C1 18.0752 5.92487 23.0001 12 23.0001ZM13.0001 11V6.50007H11V11H6.00001V13.0001H11V18.0001H13.0001V13.0001H17.5001V11H13.0001Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 446 B

After

Width:  |  Height:  |  Size: 420 B

View File

@ -4,11 +4,13 @@ import { ICON_BUTTON_MIN_WIDTH } from "constants/minWidthConstants";
import { ResponsiveBehavior } from "utils/autoLayout/constants";
import IconSVG from "./icon.svg";
import Widget from "./widget";
import { WIDGET_TAGS } from "constants/WidgetConstants";
export const CONFIG = {
type: Widget.getWidgetType(),
name: "Icon button",
iconSVG: IconSVG,
tags: [WIDGET_TAGS.BUTTONS],
searchTags: ["click", "submit"],
defaults: {
iconName: IconNames.PLUS,

View File

@ -1 +1,3 @@
<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m28.7999 3.20001v7.99999h-3.2v-4.79999h-19.19995v4.79999h-3.2v-7.99999zm-25.59995 25.59999v-8h3.2v4.8h19.19995v-4.8h3.2v8zm18.44255-16.7948.8447-.8278 3.8942 3.8942.8193.8361-.8193.8363-4.3842 4.3842-.8361-.8363-.8362-.8364 3.5478-3.5477-3.058-3.0583zm-11.4891 9.123.8447-.8279.8278-.8443-3.05808-3.0582 3.54778-3.5478-.8362-.8364-.8361-.8363-4.38417 4.3842-.81932.8363.81932.8361zm10.6821-12.51198-2.1496-.98653-6.9057 15.04761 2.1496.9866z" fill="#4c5664" fill-rule="evenodd"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23 1.00006V7.87506H20.25V3.75007H3.75001V7.87506H1V1.00006H23ZM1 23.0001V16.1251H3.75001V20.2501H20.25V16.1251H23V23.0001H1ZM16.8491 8.56704L17.575 7.85564L20.9216 11.2022L21.6257 11.9208L20.9216 12.6394L17.1539 16.4071L16.4354 15.6884L15.7168 14.9696L18.7657 11.9208L16.1377 9.29261L16.8491 8.56704ZM6.97563 16.4071L7.70155 15.6957L8.41294 14.9701L5.7849 12.3419L8.83378 9.29304L8.11517 8.57425L7.39664 7.85556L3.62899 11.6232L2.92488 12.3419L3.62899 13.0605L6.97563 16.4071ZM16.1556 5.65463L14.3083 4.80682L8.37367 17.7384L10.221 18.5863L16.1556 5.65463Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 609 B

After

Width:  |  Height:  |  Size: 728 B

View File

@ -2,6 +2,7 @@ import { ResponsiveBehavior } from "utils/autoLayout/constants";
import IconSVG from "./icon.svg";
import Widget from "./widget";
import { isAirgapped } from "@appsmith/utils/airgapHelpers";
import { WIDGET_TAGS } from "constants/WidgetConstants";
const isAirgappedInstance = isAirgapped();
@ -13,6 +14,7 @@ export const CONFIG = {
type: Widget.getWidgetType(),
name: "Iframe",
iconSVG: IconSVG,
tags: [WIDGET_TAGS.DISPLAY],
needsMeta: true,
searchTags: ["embed"],
defaults: {

View File

@ -1 +1,5 @@
<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="#4c5664"><path clip-rule="evenodd" d="m2.66675 2.66669h26.66665v26.66671h-26.66665zm2.66666 24.00001v-21.33335h21.33329v21.33335z" fill-rule="evenodd"/><path d="m13.3334 18.6667-7.99999 5.3333v3.3334h21.33329v-6l-5.3333-6.6667-5.3333 6.6667z"/><path d="m13.3334 10.6667c0 1.4727-1.1939 2.6667-2.6667 2.6667-1.47271 0-2.66662-1.194-2.66662-2.6667 0-1.47277 1.19391-2.66668 2.66662-2.66668 1.4728 0 2.6667 1.19391 2.6667 2.66668z"/></g></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 1H23V23H1V1ZM3.2 20.8V3.2H20.8V20.8H3.2Z" fill="#4C5664"/>
<path d="M9.80031 14.2L3.20032 18.6V21.35H20.8003V16.4L16.4003 10.9L12.0003 16.4L9.80031 14.2Z" fill="#4C5664"/>
<path d="M9.79977 7.59999C9.79977 8.81497 8.8148 9.80002 7.59974 9.80002C6.38476 9.80002 5.39978 8.81497 5.39978 7.59999C5.39978 6.38496 6.38476 5.39998 7.59974 5.39998C8.8148 5.39998 9.79977 6.38496 9.79977 7.59999Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 544 B

After

Width:  |  Height:  |  Size: 562 B

View File

@ -2,11 +2,13 @@ import { ASSETS_CDN_URL } from "constants/ThirdPartyConstants";
import IconSVG from "./icon.svg";
import Widget from "./widget";
import { getAssetUrl } from "@appsmith/utils/airgapHelpers";
import { WIDGET_TAGS } from "constants/WidgetConstants";
export const CONFIG = {
type: Widget.getWidgetType(),
name: "Image",
iconSVG: IconSVG,
tags: [WIDGET_TAGS.MEDIA],
defaults: {
defaultImage: getAssetUrl(`${ASSETS_CDN_URL}/widgets/default.png`),
imageShape: "RECTANGLE",

View File

@ -1 +1,4 @@
<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="#4c5664"><path clip-rule="evenodd" d="m2.66675 8h26.66665v16h-26.66665zm2.66666 13.3333v-10.6666h21.33329v10.6666z" fill-rule="evenodd"/><path d="m6.66675 20v-8h1.33333v8z"/></g></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 5H23V18.2H1V5ZM3.2 16V7.20003H20.8V16H3.2Z" fill="#4C5664"/>
<path d="M4.30005 14.9V8.3H5.40005V14.9H4.30005Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 288 B

After

Width:  |  Height:  |  Size: 283 B

View File

@ -7,6 +7,7 @@ import type { BaseInputWidgetProps } from "widgets/BaseInputWidget/widget";
import IconSVG from "./icon.svg";
import Widget from "./widget";
import { WIDGET_TAGS } from "constants/WidgetConstants";
export const CONFIG = {
features: {
@ -19,6 +20,7 @@ export const CONFIG = {
type: Widget.getWidgetType(),
name: "Input",
iconSVG: IconSVG,
tags: [WIDGET_TAGS.SUGGESTED_WIDGETS, WIDGET_TAGS.INPUTS],
needsMeta: true,
searchTags: ["form", "text input", "number", "textarea"],
defaults: {

View File

@ -1 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32"><path fill="#4c5664" fill-rule="evenodd" d="M5.3335 2.6665V29.3332H26.6668V2.6665H5.3335ZM8.00016 26.6665V5.33317H24.0002V26.6665H8.00016Z" clip-rule="evenodd"/><path fill="#4c5664" d="M13 18.04V15H20.5V18.04H13Z"/><path fill="#4c5664" d="M17 23V20.2H22V23H17Z"/><path fill="#4c5664" d="M10 11V8H18V11H10Z"/><path stroke="#4C5664" stroke-width=".7" d="M13 13V10H20V13H13Z"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 1V23H20.6V1H3ZM5.19999 20.8V3.2H18.4V20.8H5.19999Z" fill="#4C5664"/>
<path d="M9.32446 13.6831V11.1751H15.512V13.6831H9.32446Z" fill="#4C5664"/>
<path d="M12.6245 17.7751V15.4651H16.7495V17.7751H12.6245Z" fill="#4C5664"/>
<path d="M6.84949 7.87513V5.40013H13.4495V7.87513H6.84949Z" fill="#4C5664"/>
<path d="M9.32446 9.52512V7.05013H15.0995V9.52512H9.32446Z" stroke="#4C5664" stroke-width="0.7"/>
</svg>

Before

Width:  |  Height:  |  Size: 475 B

After

Width:  |  Height:  |  Size: 552 B

View File

@ -8,6 +8,7 @@ import { BlueprintOperationTypes } from "widgets/constants";
import IconSVG from "./icon.svg";
import type { JSONFormWidgetProps } from "./widget";
import Widget from "./widget";
import { WIDGET_TAGS } from "constants/WidgetConstants";
const SUBMIT_BUTTON_DEFAULT_STYLES = {
buttonVariant: ButtonVariantTypes.PRIMARY,
@ -28,6 +29,7 @@ export const CONFIG = {
type: Widget.getWidgetType(),
name: "JSON Form",
iconSVG: IconSVG,
tags: [WIDGET_TAGS.SUGGESTED_WIDGETS, WIDGET_TAGS.LAYOUT],
needsMeta: true,
defaults: {
responsiveBehavior: ResponsiveBehavior.Fill,

View File

@ -1 +1,3 @@
<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m12.0001 5.33331h-5.33335v5.33329h5.33335zm13.3333 1.33334h-10.6667v2.66666h10.6667zm-10.6667 7.99995h10.6667v2.6667h-10.6667zm10.6667 8h-10.6667v2.6667h10.6667zm-18.66665-9.3333h5.33335v5.3333h-5.33335zm5.33335 8h-5.33335v5.3333h5.33335z" fill="#4c5664" fill-rule="evenodd"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.50003 1.00006H2V6.50003H7.50003V1.00006ZM21.25 2.37507H10.25V5.12507H21.25V2.37507ZM10.25 10.625H21.25V13.3751H10.25V10.625ZM21.25 18.8751H10.25V21.6251H21.25V18.8751ZM2 9.25007H7.50003V14.75H2V9.25007ZM7.50003 17.5001H2V23.0001H7.50003V17.5001Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 406 B

After

Width:  |  Height:  |  Size: 419 B

View File

@ -12,7 +12,7 @@ import {
} from "./widget/helper";
import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
import { getWidgetBluePrintUpdates } from "utils/WidgetBlueprintUtils";
import { GridDefaults } from "constants/WidgetConstants";
import { GridDefaults, WIDGET_TAGS } from "constants/WidgetConstants";
import type { FlexLayer } from "utils/autoLayout/autoLayoutTypes";
import type { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer";
import {
@ -48,6 +48,7 @@ export const CONFIG = {
type: Widget.getWidgetType(),
name: "List",
iconSVG: IconSVG,
tags: [WIDGET_TAGS.SUGGESTED_WIDGETS, WIDGET_TAGS.DISPLAY],
needsMeta: true,
isCanvas: true,
defaults: {

7
app/client/src/widgets/MapChartWidget/icon.svg Executable file → Normal file
View File

@ -1 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#4c5664" fill-rule="evenodd" d="M9.50001 11.8034V18.5L14.5 21V11.55L12 15C11.3917 14.2179 10.4119 12.9626 9.50001 11.8034Z" clip-rule="evenodd"/><path fill="#4c5664" fill-rule="evenodd" d="M15.5 10.17V21L20.5 18V6L17 8.1L15.5 10.17Z" clip-rule="evenodd"/><path fill="#4c5664" d="M3.5 9V21L8.5 18V10.5374C8.5 10.5374 7.83441 9.63336 7.5 9C7.12002 8.28033 6.72229 7.06662 6.72229 7.06662L3.5 9Z"/><path fill="#4c5664" fill-rule="evenodd" d="M9.1559 9.87818C8.30481 8.73014 7.6 7.67255 7.6 6.35454C7.6 3.95998 9.56392 2.01104 11.9821 2H12.0032C14.431 2 16.4065 3.95362 16.4065 6.35454C16.4065 7.67255 15.7017 8.73038 14.8506 9.87818C14.8506 9.87818 12.1182 13.3703 12.0069 13.5208L9.1559 9.87818Z" clip-rule="evenodd"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.94727 12.3513V20.1053L14.7367 23V12.0579L11.842 16.0527C11.1376 15.1471 10.0031 13.6936 8.94727 12.3513Z" fill="#4C5664"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.8945 10.46V23L21.684 19.5263V5.63161L17.6314 8.06318L15.8945 10.46Z" fill="#4C5664"/>
<path d="M2 9.10533V23L7.78946 19.5264V10.8855C7.78946 10.8855 7.01878 9.83869 6.63157 9.10533C6.1916 8.27203 5.73107 6.86668 5.73107 6.86668L2 9.10533Z" fill="#4C5664"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.54864 10.1221C7.56316 8.79278 6.74707 7.56821 6.74707 6.04209C6.74707 3.26945 9.02108 1.01278 11.8211 1H11.8455C14.6566 1 16.9441 3.26208 16.9441 6.04209C16.9441 7.56821 16.128 8.79306 15.1425 10.1221C15.1425 10.1221 11.9787 14.1656 11.8498 14.3399L8.54864 10.1221Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 829 B

After

Width:  |  Height:  |  Size: 924 B

View File

@ -1,14 +1,15 @@
import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
import { ResponsiveBehavior } from "utils/autoLayout/constants";
import { dataSetForWorld, MapTypes } from "./constants";
import IconSVG from "./icon.svg";
import Widget from "./widget";
import { WIDGET_TAGS } from "constants/WidgetConstants";
export const CONFIG = {
type: Widget.getWidgetType(),
name: "Map Chart", // The display name which will be made in uppercase and show in the widgets panel ( can have spaces )
iconSVG: IconSVG,
tags: [WIDGET_TAGS.DISPLAY],
needsMeta: true, // Defines if this widget adds any meta properties
isCanvas: false, // Defines if this widget has a canvas within in which we can drop other widgets
searchTags: ["graph", "visuals", "visualisations"],

View File

@ -1 +1,4 @@
<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="#4c5664"><path d="m16 15.6667c1.4728 0 2.6667-1.1939 2.6667-2.6667s-1.1939-2.6667-2.6667-2.6667-2.6667 1.1939-2.6667 2.6667 1.1939 2.6667 2.6667 2.6667z"/><path clip-rule="evenodd" d="m24 13c0 1.7856-.585 3.4345-1.5737 4.7656l-6.4264 8.5677-6.42616-8.5677c-.98876-1.3311-1.57374-2.98-1.57374-4.7656 0-4.41828 3.5817-8 8-8s8 3.58172 8 8zm-2.6667 0c0 1.1915-.3875 2.2847-1.0443 3.1709l-4.2891 5.7182-4.2888-5.7181c-.6569-.8862-1.0444-1.9795-1.0444-3.171 0-2.9455 2.3878-5.33333 5.3333-5.33333s5.3333 2.38783 5.3333 5.33333z" fill-rule="evenodd"/></g></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.2497 12.0001C13.7685 12.0001 14.9997 10.7689 14.9997 9.25002C14.9997 7.7312 13.7685 6.49998 12.2497 6.49998C10.7308 6.49998 9.49963 7.7312 9.49963 9.25002C9.49963 10.7689 10.7308 12.0001 12.2497 12.0001Z" fill="#4C5664"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 9.25001C20.5 11.0914 19.8967 12.7918 18.8771 14.1645L12.2499 23L5.62292 14.1645C4.60326 12.7918 4 11.0914 4 9.25001C4 4.69365 7.69363 1 12.25 1C16.8064 1 20.5 4.69365 20.5 9.25001ZM17.75 9.25001C17.75 10.4787 17.3504 11.6061 16.6731 12.52L12.2499 18.4169L7.82708 12.5201C7.14965 11.6062 6.75004 10.4787 6.75004 9.25001C6.75004 6.21246 9.21246 3.75001 12.25 3.75001C15.2876 3.75001 17.75 6.21246 17.75 9.25001Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 658 B

After

Width:  |  Height:  |  Size: 821 B

View File

@ -1,13 +1,14 @@
import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
import { ResponsiveBehavior } from "utils/autoLayout/constants";
import IconSVG from "./icon.svg";
import Widget from "./widget";
import { WIDGET_TAGS } from "constants/WidgetConstants";
export const CONFIG = {
type: Widget.getWidgetType(),
name: "Map",
iconSVG: IconSVG,
tags: [WIDGET_TAGS.CONTENT],
needsMeta: true,
defaults: {
rows: 40,

View File

@ -1 +1,5 @@
<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="#4c5664"><path d="m18.6666 5.33331h-5.3333v5.33329h5.3333z"/><path d="m18.6666 13.3333h-5.3333v5.3333h5.3333z"/><path d="m18.6666 21.3333h-5.3333v5.3333h5.3333z"/></g></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.5 1.00006H9V6.50003H14.5V1.00006Z" fill="#4C5664"/>
<path d="M14.5 9.25008H9V14.7501H14.5V9.25008Z" fill="#4C5664"/>
<path d="M14.5 17.5001H9V23.0001H14.5V17.5001Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 277 B

After

Width:  |  Height:  |  Size: 298 B

View File

@ -2,11 +2,13 @@ import Widget from "./widget";
import IconSVG from "./icon.svg";
import { ButtonPlacementTypes, ButtonVariantTypes } from "components/constants";
import { MenuItemsSource } from "./constants";
import { WIDGET_TAGS } from "constants/WidgetConstants";
export const CONFIG = {
type: Widget.getWidgetType(),
name: "Menu button",
iconSVG: IconSVG,
tags: [WIDGET_TAGS.BUTTONS],
defaults: {
label: "Open Menu",
menuVariant: ButtonVariantTypes.PRIMARY,

View File

@ -1 +1,5 @@
<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="#4c5664"><path clip-rule="evenodd" d="m2.66675 29.3334v-26.66671h26.66665v26.66671zm2.66666-2.6667v-21.33335h21.33329v21.33335z" fill-rule="evenodd"/><path d="m23.9334 15.152-6.5997-6.59967 1.8857-1.88562 6.5996 6.59969z"/><path d="m25.8188 8.55231-6.5996 6.59969-1.8857-1.8856 6.5997-6.5997z"/></g></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 23V1H23V23H1ZM3.2 20.8V3.2H20.8V20.8H3.2Z" fill="#4C5664"/>
<path d="M18.545 11.3004L13.1002 5.85564L14.6559 4.3L20.1006 9.74475L18.545 11.3004Z" fill="#4C5664"/>
<path d="M20.1006 5.85563L14.6559 11.3004L13.1002 9.74476L18.545 4.3L20.1006 5.85563Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 409 B

After

Width:  |  Height:  |  Size: 422 B

View File

@ -4,11 +4,10 @@ import {
ButtonBorderRadiusTypes,
ButtonVariantTypes,
} from "components/constants";
import { GridDefaults } from "constants/WidgetConstants";
import { GridDefaults, WIDGET_TAGS } from "constants/WidgetConstants";
import type { WidgetProps } from "widgets/BaseWidget";
import type { FlattenedWidgetProps } from "widgets/constants";
import { BlueprintOperationTypes } from "widgets/constants";
import IconSVG from "./icon.svg";
import Widget from "./widget";
import type { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer";
@ -27,6 +26,7 @@ export const CONFIG = {
type: Widget.getWidgetType(),
name: "Modal",
iconSVG: IconSVG,
tags: [WIDGET_TAGS.LAYOUT],
needsMeta: true,
isCanvas: true,
features: {

View File

@ -1 +1,8 @@
<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g fill="#4c5664"><path d="m2 2h20v8h-20z"/><path d="m9.99985 12.05h6.99995v1.5h-6.99995z"/><path d="m9.99985 16.75h5.99995v1.5h-5.99995z"/><path d="m7.99985 12.5h-3l1.5 1.5z"/><path d="m8 17h-3l1.5 1.5z"/><path clip-rule="evenodd" d="m2 8.5v13.5h18v-13.5zm1.5 12v-10.5h15v10.5z" fill-rule="evenodd"/></g></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1H23V9.8H1V1Z" fill="#4C5664"/>
<path d="M9.80005 12.0551H17.5V13.7051H9.80005V12.0551Z" fill="#4C5664"/>
<path d="M9.80005 17.225H16.4V18.875H9.80005V17.225Z" fill="#4C5664"/>
<path d="M7.60005 12.55H4.30005L5.95005 14.2L7.60005 12.55Z" fill="#4C5664"/>
<path d="M7.60005 17.5H4.30005L5.95005 19.15L7.60005 17.5Z" fill="#4C5664"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 8.14999V23H20.8V8.14999H1ZM2.65 21.35V9.79999H19.15V21.35H2.65Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 406 B

After

Width:  |  Height:  |  Size: 581 B

View File

@ -3,9 +3,9 @@ import { LabelPosition } from "components/constants";
import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
import { ResponsiveBehavior } from "utils/autoLayout/constants";
import { DynamicHeight } from "utils/WidgetFeatures";
import IconSVG from "./icon.svg";
import Widget from "./widget";
import { WIDGET_TAGS } from "constants/WidgetConstants";
export const CONFIG = {
features: {
@ -18,6 +18,7 @@ export const CONFIG = {
type: Widget.getWidgetType(),
name: "Multi TreeSelect",
iconSVG: IconSVG,
tags: [WIDGET_TAGS.SELECT],
needsMeta: true,
searchTags: ["dropdown", "multiselecttree"],
defaults: {

View File

@ -1 +1,10 @@
<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m2.75 2.75h18.5v6.5h-18.5z" stroke="#4C5664" stroke-width="1.5"/><g fill="#4c5664"><path d="m9.99985 12.05h6.99995v1.5h-6.99995z"/><path d="m9.99985 16.75h5.99995v1.5h-5.99995z"/><path d="m7.99985 12.5h-3l1.5 1.5z"/><path d="m8 17h-3l1.5 1.5z"/><path clip-rule="evenodd" d="m2 8.5v13.5h18v-13.5zm1.5 12v-10.5h15v10.5z" fill-rule="evenodd"/><path d="m14 5.25h5v1.5h-5z"/><path clip-rule="evenodd" d="m7 5.25h-2v1.5h2zm1 1.5h5v-1.5h-5z" fill-rule="evenodd"/></g></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.85718 1H23V8.42857H1.85718V1Z" stroke="#4C5664" stroke-width="1.5"/>
<path d="M10.1428 11.6286H18.1428V13.3429H10.1428V11.6286Z" fill="#4C5664"/>
<path d="M10.1428 17H16.9999V18.7143H10.1428V17Z" fill="#4C5664"/>
<path d="M7.85704 12.1429H4.42847L6.14275 13.8571L7.85704 12.1429Z" fill="#4C5664"/>
<path d="M7.85704 17.2857H4.42847L6.14275 19L7.85704 17.2857Z" fill="#4C5664"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 7.57143V23H21.5714V7.57143H1ZM2.71429 21.2857V9.28571H19.8571V21.2857H2.71429Z" fill="#4C5664"/>
<path d="M14.7144 3.85715H20.4286V5.57143H14.7144V3.85715Z" fill="#4C5664"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.71418 3.85715H4.42847V5.57143H6.71418V3.85715ZM7.85704 5.57143H13.5713V3.85715H7.85704V5.57143Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 570 B

After

Width:  |  Height:  |  Size: 885 B

View File

@ -3,9 +3,9 @@ import { LabelPosition } from "components/constants";
import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
import { ResponsiveBehavior } from "utils/autoLayout/constants";
import { DynamicHeight } from "utils/WidgetFeatures";
import IconSVG from "./icon.svg";
import Widget from "./widget";
import { WIDGET_TAGS } from "constants/WidgetConstants";
export const CONFIG = {
features: {
@ -18,6 +18,7 @@ export const CONFIG = {
type: Widget.getWidgetType(),
name: "MultiSelect",
iconSVG: IconSVG,
tags: [WIDGET_TAGS.SELECT],
needsMeta: true,
searchTags: ["dropdown", "tags"],
defaults: {

View File

@ -1,6 +1,6 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M26.1172 11.7026H26.0106L26.0174 11.809C26.0515 12.3404 26.2604 12.7763 26.6448 13.1091L26.6452 13.1093C27.029 13.4388 27.5124 13.6006 28.0874 13.6006C28.7159 13.6006 29.2352 13.409 29.6357 13.0199L29.636 13.0196C30.0368 12.6274 30.2348 12.117 30.2348 11.4979C30.2348 10.899 30.0512 10.4017 29.6787 10.0149C29.3058 9.62763 28.8238 9.43582 28.2418 9.43582C27.7528 9.43582 27.3538 9.56707 27.0557 9.83747L27.1959 8.25464H29.8017H29.9017V8.15464V7.50061V7.40061H29.8017H26.5315H26.4407L26.432 7.491L26.1111 10.8139L26.1005 10.9236H26.2106H26.8971H26.9552L26.984 10.8732C27.0939 10.6809 27.2454 10.5331 27.4402 10.4282L27.4402 10.4282L27.441 10.4277C27.636 10.3202 27.8575 10.2655 28.1077 10.2655C28.4681 10.2655 28.7521 10.3824 28.9694 10.612L28.9694 10.612L28.9702 10.6128C29.1903 10.8404 29.3036 11.139 29.3036 11.5182C29.3036 11.8975 29.1903 12.1945 28.9705 12.4192L28.9701 12.4196C28.7535 12.6437 28.4654 12.7588 28.0955 12.7588C27.7717 12.7588 27.5068 12.6688 27.2944 12.4936C27.0854 12.3164 26.9657 12.0849 26.9357 11.7924L26.9265 11.7026H26.8362H26.1172Z" fill="#4c5664" stroke="#4C5664" stroke-width="0.2"/>
<path d="M1.76328 9.43702V9.633L1.92197 9.51799L3.3558 8.47875V13.4994V13.5994H3.4558H4.20424H4.30424V13.4994V7.49939V7.39939H4.20424H3.45995H3.42775L3.40159 7.41819L1.80492 8.5658L1.76328 8.59572V8.647V9.43702Z" fill="#4c5664" stroke="#4C5664" stroke-width="0.2"/>
<path d="M30 18.5006H2V21.5006H30V18.5006Z" fill="#4c5664"/>
<circle cx="12.5" cy="20.0006" r="4.5" fill="#4c5664"/>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.8183 8.32513H19.7359L19.7412 8.40735C19.7675 8.81797 19.9289 9.15479 20.226 9.41195L20.2263 9.4121C20.5228 9.66671 20.8964 9.79173 21.3407 9.79173C21.8263 9.79173 22.2276 9.64368 22.537 9.34302L22.5373 9.34279C22.847 9.03973 23 8.64534 23 8.16696C23 7.70418 22.8581 7.31991 22.5703 7.02103C22.2821 6.72178 21.9097 6.57357 21.46 6.57357C21.0821 6.57357 20.7738 6.67499 20.5435 6.88393L20.6518 5.66086H22.6653H22.7426V5.58359V5.07822V5.00095H22.6653H20.1384H20.0682L20.0615 5.07079L19.8136 7.63843L19.8054 7.72319H19.8904H20.4209H20.4658L20.4881 7.68425C20.573 7.53566 20.69 7.42145 20.8406 7.34039L20.8412 7.34001C20.9919 7.25694 21.163 7.21467 21.3563 7.21467C21.6348 7.21467 21.8543 7.305 22.0222 7.48242L22.0228 7.48303C22.1929 7.6589 22.2804 7.88963 22.2804 8.18264C22.2804 8.47573 22.1929 8.70523 22.023 8.87885L22.0227 8.87916C21.8554 9.05233 21.6327 9.14127 21.3469 9.14127C21.0967 9.14127 20.892 9.07172 20.7279 8.93634C20.5664 8.79942 20.4739 8.62054 20.4507 8.39452L20.4436 8.32513H20.3739H19.8183Z" fill="#4C5664" stroke="#4C5664" stroke-width="0.2"/>
<path d="M1 6.57449V6.72593L1.12262 6.63706L2.23055 5.83403V9.71353V9.7908H2.30782H2.88615H2.96342V9.71353V5.07727V5H2.88615H2.31103H2.28615L2.26594 5.01453L1.03218 5.90129L1 5.92441V5.96404V6.57449Z" fill="#4C5664" stroke="#4C5664" stroke-width="0.2"/>
<path d="M22.8185 13.578H1.18262V15.8961H22.8185V13.578Z" fill="#4C5664"/>
<path d="M7.75063 18.2143C9.67103 18.2143 11.2278 16.6575 11.2278 14.7371C11.2278 12.8167 9.67103 11.2599 7.75063 11.2599C5.83023 11.2599 4.27344 12.8167 4.27344 14.7371C4.27344 16.6575 5.83023 18.2143 7.75063 18.2143Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -1,9 +1,9 @@
import { Alignment } from "@blueprintjs/core";
import { LabelPosition } from "components/constants";
import { ResponsiveBehavior } from "utils/autoLayout/constants";
import IconSVG from "./icon.svg";
import Widget from "./widget";
import { WIDGET_TAGS } from "constants/WidgetConstants";
export const CONFIG = {
type: Widget.getWidgetType(),
@ -11,6 +11,7 @@ export const CONFIG = {
needsMeta: true,
searchTags: ["range"],
iconSVG: IconSVG,
tags: [WIDGET_TAGS.SLIDERS],
defaults: {
min: 0,
max: 100,

View File

@ -1 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" fill="none" viewBox="0 0 20 12"><path fill="#4c5664" fill-rule="evenodd" d="M0 0H20V12H0V0ZM2 10V2H18V10H2Z" clip-rule="evenodd"/><path fill="#4c5664" d="M4.5915 5.6705C4.82608 6.08262 5.16738 6.42392 5.5795 6.6585L5.8005 6.349C5.83604 6.29923 5.88859 6.26422 5.9482 6.25058C6.00781 6.23695 6.07036 6.24563 6.124 6.275C6.47758 6.46823 6.86805 6.58444 7.26975 6.616C7.33244 6.62097 7.39096 6.64938 7.43364 6.69558C7.47631 6.74178 7.50001 6.80236 7.5 6.86525V7.98075C7.50001 8.04265 7.47706 8.10235 7.43559 8.1483C7.39412 8.19425 7.33708 8.22319 7.2755 8.2295C7.143 8.24325 7.0095 8.25 6.875 8.25C4.735 8.25 3 6.515 3 4.375C3 4.2405 3.00675 4.107 3.0205 3.9745C3.02681 3.91292 3.05575 3.85588 3.1017 3.81441C3.14765 3.77294 3.20735 3.74999 3.26925 3.75H4.38475C4.44764 3.74999 4.50822 3.77369 4.55442 3.81636C4.60062 3.85904 4.62903 3.91756 4.634 3.98025C4.66556 4.38195 4.78177 4.77242 4.975 5.126C5.00437 5.17964 5.01305 5.24219 4.99942 5.3018C4.98578 5.36141 4.95077 5.41396 4.901 5.4495L4.5915 5.6705ZM3.961 5.50625L4.436 5.167C4.3012 4.87602 4.20884 4.56721 4.16175 4.25H3.5025C3.501 4.2915 3.50025 4.33325 3.50025 4.375C3.5 6.239 5.011 7.75 6.875 7.75C6.91675 7.75 6.9585 7.74925 7 7.7475V7.08825C6.68279 7.04116 6.37398 6.9488 6.083 6.814L5.74375 7.289C5.60717 7.23593 5.4745 7.17327 5.34675 7.1015L5.33225 7.09325C4.84189 6.81418 4.43582 6.40811 4.15675 5.91775L4.1485 5.90325C4.07673 5.7755 4.01407 5.64283 3.961 5.50625Z"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 5H23V18.2H1V5ZM3.2 16V7.2H20.8V16H3.2Z" fill="#4C5664"/>
<path d="M6.0507 11.2375C6.30874 11.6909 6.68417 12.0663 7.1375 12.3243L7.3806 11.9839C7.41969 11.9292 7.4775 11.8906 7.54307 11.8756C7.60864 11.8606 7.67744 11.8702 7.73645 11.9025C8.12539 12.1151 8.5549 12.2429 8.99677 12.2776C9.06573 12.2831 9.1301 12.3143 9.17705 12.3651C9.22399 12.416 9.25006 12.4826 9.25005 12.5518V13.7788C9.25006 13.8469 9.22481 13.9126 9.1792 13.9631C9.13358 14.0137 9.07084 14.0455 9.0031 14.0524C8.85735 14.0676 8.7105 14.075 8.56255 14.075C6.20855 14.075 4.30005 12.1665 4.30005 9.8125C4.30005 9.66455 4.30747 9.5177 4.3226 9.37195C4.32954 9.30421 4.36137 9.24147 4.41192 9.19585C4.46246 9.15023 4.52813 9.12499 4.59622 9.125H5.82327C5.89245 9.12499 5.95909 9.15106 6.00991 9.198C6.06073 9.24494 6.09198 9.30932 6.09745 9.37827C6.13216 9.82014 6.26 10.2497 6.47255 10.6386C6.50486 10.6976 6.5144 10.7664 6.49941 10.832C6.48441 10.8976 6.4459 10.9554 6.39115 10.9944L6.0507 11.2375ZM5.35715 11.0569L5.87965 10.6837C5.73137 10.3636 5.62977 10.0239 5.57797 9.675H4.8528C4.85115 9.72065 4.85032 9.76657 4.85032 9.8125C4.85005 11.8629 6.51215 13.525 8.56255 13.525C8.60847 13.525 8.6544 13.5242 8.70005 13.5222V12.7971C8.35112 12.7453 8.01143 12.6437 7.69135 12.4954L7.31817 13.0179C7.16794 12.9595 7.022 12.8906 6.88147 12.8116L6.86552 12.8026C6.32613 12.4956 5.87945 12.0489 5.57247 11.5095L5.5634 11.4936C5.48445 11.353 5.41553 11.2071 5.35715 11.0569Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -3,10 +3,10 @@ import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
import { ResponsiveBehavior } from "utils/autoLayout/constants";
import { DynamicHeight } from "utils/WidgetFeatures";
import { CONFIG as BaseConfig } from "widgets/BaseInputWidget";
import { getDefaultISDCode } from "./component/ISDCodeDropdown";
import IconSVG from "./icon.svg";
import Widget from "./widget";
import { WIDGET_TAGS } from "constants/WidgetConstants";
export const CONFIG = {
features: {
@ -19,6 +19,7 @@ export const CONFIG = {
type: Widget.getWidgetType(),
name: "Phone Input",
iconSVG: IconSVG,
tags: [WIDGET_TAGS.INPUTS],
needsMeta: true,
searchTags: ["call"],
defaults: {

View File

@ -1 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><g clip-path="url(#clip0_172_5437)"><path fill="#4c5664" d="M2 9H14V15H2V9Z"/><path fill="#4c5664" fill-rule="evenodd" d="M14 9.75L15 9H17L14 11.25V9.75Z" clip-rule="evenodd"/><path fill="#4c5664" fill-rule="evenodd" d="M14 12.75L19 9H21L14 14.25V12.75Z" clip-rule="evenodd"/><path fill="#4c5664" fill-rule="evenodd" d="M22 14.25V12.75L19 15H21L22 14.25Z" clip-rule="evenodd"/><path fill="#4c5664" fill-rule="evenodd" d="M22 11.25V9.75L15 15H17L22 11.25Z" clip-rule="evenodd"/><path fill="#4c5664" fill-rule="evenodd" d="M21 9H19L14 12.75V14.25L21 9ZM15 15H17L22 11.25V9.75L15 15ZM21 15H19L22 12.75V14.25L21 15ZM15 9H17L14 11.25V9.75L15 9Z" clip-rule="evenodd"/></g><defs><clipPath id="clip0_172_5437"><rect width="24" height="24" fill="#fff"/></clipPath></defs></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 9H14.2V15.6H1V9Z" fill="#4C5664"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.2 9.825L15.3 9H17.5L14.2 11.475V9.825Z" fill="#4C5664"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.2 13.125L19.7 9H21.9L14.2 14.775V13.125Z" fill="#4C5664"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M23 14.775V13.125L19.7 15.6H21.9L23 14.775Z" fill="#4C5664"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M23 11.475V9.825L15.3 15.6H17.5L23 11.475Z" fill="#4C5664"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.9 9H19.7L14.2 13.125V14.775L21.9 9ZM15.3 15.6H17.5L23 11.475V9.825L15.3 15.6ZM21.9 15.6H19.7L23 13.125V14.775L21.9 15.6ZM15.3 9H17.5L14.2 11.475V9.825L15.3 9Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 863 B

After

Width:  |  Height:  |  Size: 823 B

View File

@ -3,11 +3,13 @@ import IconSVG from "./icon.svg";
import { ProgressType } from "./constants";
import { Colors } from "constants/Colors";
import { ResponsiveBehavior } from "utils/autoLayout/constants";
import { WIDGET_TAGS } from "constants/WidgetConstants";
export const CONFIG = {
type: Widget.getWidgetType(),
name: "Progress", // The display name which will be made in uppercase and show in the widgets panel ( can have spaces )
iconSVG: IconSVG,
tags: [WIDGET_TAGS.CONTENT],
needsMeta: false, // Defines if this widget adds any meta properties
isCanvas: false, // Defines if this widget has a canvas within in which we can drop other widgets
searchTags: ["percent"],

View File

@ -1 +1,4 @@
<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="#4c5664"><path clip-rule="evenodd" d="m16.0001 6.66669c5.1546 0 9.3333 4.17871 9.3333 9.33331 0 5.1547-4.1787 9.3334-9.3333 9.3334-5.1547 0-9.33335-4.1787-9.33335-9.3334 0-5.1546 4.17865-9.33331 9.33335-9.33331zm0 16.00001c-3.6819 0-6.66669-2.9848-6.66669-6.6667s2.98479-6.66665 6.66669-6.66665 6.6666 2.98475 6.6666 6.66665-2.9847 6.6667-6.6666 6.6667z" fill-rule="evenodd"/><path d="m16.0001 20c-2.2092 0-4-1.7908-4-4 0-2.2091 1.7908-4 4-4 2.2091 0 4 1.7909 4 4 0 2.2092-1.7909 4-4 4z"/></g></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 1C18.0751 1 23 5.92491 23 12C23 18.0752 18.0751 23.0001 12 23.0001C5.92484 23.0001 1 18.0752 1 12C1 5.92491 5.92484 1 12 1ZM12 19.8572C7.66064 19.8572 4.14285 16.3394 4.14285 12C4.14285 7.6606 7.66064 4.14285 12 4.14285C16.3394 4.14285 19.8571 7.6606 19.8571 12C19.8571 16.3394 16.3394 19.8572 12 19.8572Z" fill="#4C5664"/>
<path d="M11.9996 16.7143C9.39586 16.7143 7.28528 14.6037 7.28528 12C7.28528 9.3964 9.39586 7.28569 11.9996 7.28569C14.6032 7.28569 16.7139 9.3964 16.7139 12C16.7139 14.6037 14.6032 16.7143 11.9996 16.7143Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 603 B

After

Width:  |  Height:  |  Size: 705 B

View File

@ -1,13 +1,14 @@
import { Alignment } from "@blueprintjs/core";
import { LabelPosition } from "components/constants";
import IconSVG from "./icon.svg";
import Widget from "./widget";
import { WIDGET_TAGS } from "constants/WidgetConstants";
export const CONFIG = {
type: Widget.getWidgetType(),
name: "Radio Group",
iconSVG: IconSVG,
tags: [WIDGET_TAGS.TOGGLES],
needsMeta: true,
features: {
dynamicHeight: {

View File

@ -1,7 +1,7 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M26.1172 11.7026H26.0106L26.0174 11.809C26.0515 12.3404 26.2604 12.7763 26.6448 13.1091L26.6452 13.1093C27.029 13.4388 27.5124 13.6006 28.0874 13.6006C28.7159 13.6006 29.2352 13.409 29.6357 13.0199L29.636 13.0196C30.0368 12.6274 30.2348 12.117 30.2348 11.4979C30.2348 10.899 30.0512 10.4017 29.6787 10.0149C29.3058 9.62763 28.8238 9.43582 28.2418 9.43582C27.7528 9.43582 27.3538 9.56707 27.0557 9.83747L27.1959 8.25464H29.8017H29.9017V8.15464V7.50061V7.40061H29.8017H26.5315H26.4407L26.432 7.491L26.1111 10.8139L26.1005 10.9236H26.2106H26.8971H26.9552L26.984 10.8732C27.0939 10.6809 27.2454 10.5331 27.4402 10.4282L27.4402 10.4282L27.441 10.4277C27.636 10.3202 27.8575 10.2655 28.1077 10.2655C28.4681 10.2655 28.7521 10.3824 28.9694 10.612L28.9694 10.612L28.9702 10.6128C29.1903 10.8404 29.3036 11.139 29.3036 11.5182C29.3036 11.8975 29.1903 12.1945 28.9705 12.4192L28.9701 12.4196C28.7535 12.6437 28.4654 12.7588 28.0955 12.7588C27.7717 12.7588 27.5068 12.6688 27.2944 12.4936C27.0854 12.3164 26.9657 12.0849 26.9357 11.7924L26.9265 11.7026H26.8362H26.1172Z" fill="#4c5664" stroke="#4C5664" stroke-width="0.2"/>
<path d="M1.76328 9.43702V9.633L1.92197 9.51799L3.3558 8.47875V13.4994V13.5994H3.4558H4.20424H4.30424V13.4994V7.49939V7.39939H4.20424H3.45995H3.42775L3.40159 7.41819L1.80492 8.5658L1.76328 8.59572V8.647V9.43702Z" fill="#4c5664" stroke="#4C5664" stroke-width="0.2"/>
<path d="M30 18.5006H2V21.5006H30V18.5006Z" fill="#4c5664"/>
<circle cx="10.5" cy="20.0006" r="4.5" fill="#4c5664"/>
<circle cx="21.5" cy="20.0006" r="4.5" fill="#4c5664"/>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.8183 8.32513H19.736L19.7412 8.40735C19.7676 8.81797 19.929 9.15479 20.226 9.41195L20.2263 9.4121C20.5229 9.66671 20.8964 9.79173 21.3407 9.79173C21.8264 9.79173 22.2276 9.64368 22.5371 9.34302L22.5373 9.34279C22.847 9.03973 23 8.64534 23 8.16696C23 7.70418 22.8582 7.31991 22.5703 7.02103C22.2822 6.72178 21.9097 6.57357 21.46 6.57357C21.0822 6.57357 20.7739 6.67499 20.5435 6.88393L20.6519 5.66086H22.6654H22.7426V5.58359V5.07822V5.00095H22.6654H20.1385H20.0683L20.0616 5.07079L19.8136 7.63843L19.8054 7.72319H19.8905H20.421H20.4659L20.4881 7.68425C20.573 7.53566 20.6901 7.42145 20.8406 7.34039L20.8412 7.34001C20.9919 7.25694 21.1631 7.21467 21.3564 7.21467C21.6349 7.21467 21.8543 7.305 22.0223 7.48242L22.0229 7.48303C22.1929 7.6589 22.2805 7.88963 22.2805 8.18264C22.2805 8.47573 22.1929 8.70523 22.0231 8.87885L22.0228 8.87916C21.8554 9.05233 21.6328 9.14127 21.347 9.14127C21.0968 9.14127 20.8921 9.07172 20.728 8.93634C20.5665 8.79942 20.474 8.62054 20.4508 8.39452L20.4437 8.32513H20.3739H19.8183Z" fill="#4C5664" stroke="#4C5664" stroke-width="0.2"/>
<path d="M1 6.57449V6.72593L1.12262 6.63706L2.23055 5.83403V9.71353V9.7908H2.30782H2.88615H2.96342V9.71353V5.07727V5H2.88615H2.31103H2.28615L2.26594 5.01453L1.03218 5.90129L1 5.92441V5.96404V6.57449Z" fill="#4C5664" stroke="#4C5664" stroke-width="0.2"/>
<path d="M22.8185 13.578H1.18262V15.8961H22.8185V13.578Z" fill="#4C5664"/>
<path d="M7.75063 18.2143C9.67103 18.2143 11.2278 16.6575 11.2278 14.7371C11.2278 12.8167 9.67103 11.2599 7.75063 11.2599C5.83023 11.2599 4.27344 12.8167 4.27344 14.7371C4.27344 16.6575 5.83023 18.2143 7.75063 18.2143Z" fill="#4C5664"/>
<path d="M16.2504 18.2143C18.1708 18.2143 19.7276 16.6575 19.7276 14.7371C19.7276 12.8167 18.1708 11.2599 16.2504 11.2599C14.33 11.2599 12.7732 12.8167 12.7732 14.7371C12.7732 16.6575 14.33 18.2143 16.2504 18.2143Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@ -1,15 +1,16 @@
import { Alignment } from "@blueprintjs/core";
import { LabelPosition } from "components/constants";
import { ResponsiveBehavior } from "utils/autoLayout/constants";
import IconSVG from "./icon.svg";
import Widget from "./widget";
import { WIDGET_TAGS } from "constants/WidgetConstants";
export const CONFIG = {
type: Widget.getWidgetType(),
name: "Range Slider",
needsMeta: true,
iconSVG: IconSVG,
tags: [WIDGET_TAGS.SLIDERS],
defaults: {
min: 0,
max: 100,

View File

@ -1 +1,3 @@
<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path d="m15.8562 7.06976 2.6109 4.48144c.1811.3552.6601.6927 1.0644.7496l5.3058 1.0236-3.6923 3.7917c-.2928.2766-.4757.8223-.4066 1.2127l.6054 5.1131-4.8298-2.1397c-.3619-.1845-.9539-.1845-1.3159 0l-4.8294 2.1379.6053-5.113c.0691-.3904-.1137-.9366-.4065-1.2128l-3.59069-3.7917 5.20419-1.0236c.4047-.057.8837-.3944 1.0643-.7496z" fill="#4c5664"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.9374 2L15.1534 7.5201C15.3765 7.95762 15.9665 8.37335 16.4645 8.44343L23 9.70427L18.4519 14.3748C18.0913 14.7155 17.866 15.3877 17.9511 15.8685L18.6968 22.1667L12.7476 19.5311C12.3018 19.3038 11.5726 19.3038 11.1267 19.5311L5.17803 22.1645L5.92362 15.8664C6.00873 15.3856 5.78356 14.7128 5.4229 14.3726L1 9.70206L7.41036 8.44122C7.90886 8.37101 8.49888 7.95541 8.72133 7.51788L11.9374 2Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 447 B

After

Width:  |  Height:  |  Size: 522 B

View File

@ -2,6 +2,7 @@ import { Colors } from "constants/Colors";
import IconSVG from "./icon.svg";
import Widget from "./widget";
import type { RateWidgetProps } from "./widget";
import { WIDGET_TAGS } from "constants/WidgetConstants";
export const CONFIG = {
features: {
@ -13,6 +14,7 @@ export const CONFIG = {
type: Widget.getWidgetType(),
name: "Rating",
iconSVG: IconSVG,
tags: [WIDGET_TAGS.CONTENT],
needsMeta: true,
searchTags: ["stars"],
defaults: {

View File

@ -1 +1,3 @@
<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m25.3334 6.66669h-18.66665v2.66666h18.66665zm-2.6667 5.33331h-15.99995v2.6667h15.99995zm-15.99995 5.3334h13.33335v2.6666h-13.33335zm18.66665 5.3333h-18.66665v2.6667h18.66665z" fill="#4c5664" fill-rule="evenodd"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23 0.999939H1V4.14279H23V0.999939ZM19.8571 7.28563H1V10.4285H19.8571V7.28563ZM1 13.5714H16.7143V16.7142H1V13.5714ZM23 19.8571H1V23H23V19.8571Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 342 B

After

Width:  |  Height:  |  Size: 314 B

View File

@ -3,14 +3,15 @@ import { LabelPosition } from "components/constants";
import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
import { ResponsiveBehavior } from "utils/autoLayout/constants";
import { DynamicHeight } from "utils/WidgetFeatures";
import IconSVG from "./icon.svg";
import Widget from "./widget";
import { WIDGET_TAGS } from "constants/WidgetConstants";
export const CONFIG = {
type: Widget.getWidgetType(),
name: "Rich Text Editor",
iconSVG: IconSVG,
tags: [WIDGET_TAGS.INPUTS],
needsMeta: true,
searchTags: ["input", "rte"],
features: {

View File

@ -1 +1,3 @@
<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m28 9.33331h-24v13.33329h24zm-21.33333 2.66669v8h18.66663v-8zm10.66773 3.0666 3.0666 3.0667 3.0667-3.0667-1.2267-1.2266-1.84 1.84-1.8399-1.84z" fill="#4c5664" fill-rule="evenodd"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23 6.00006H1V18.2222H23V6.00006ZM3.44445 8.44453V15.7779H20.5555V8.44453H3.44445ZM13.2232 11.2556L16.0342 14.0667L18.8454 11.2556L17.7209 10.1312L16.0342 11.8179L14.3477 10.1312L13.2232 11.2556Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 310 B

After

Width:  |  Height:  |  Size: 366 B

View File

@ -6,6 +6,7 @@ import { DynamicHeight } from "utils/WidgetFeatures";
import IconSVG from "./icon.svg";
import Widget from "./widget";
import { WIDGET_TAGS } from "constants/WidgetConstants";
export const CONFIG = {
features: {
@ -18,6 +19,7 @@ export const CONFIG = {
type: Widget.getWidgetType(),
name: "Select",
iconSVG: IconSVG,
tags: [WIDGET_TAGS.SUGGESTED_WIDGETS, WIDGET_TAGS.SELECT],
needsMeta: true,
searchTags: ["dropdown"],
defaults: {

View File

@ -1 +1,3 @@
<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m28 9.33331h-24v13.33329h24zm-21.33333 2.66669v8h18.66663v-8zm10.66773 3.0666 3.0666 3.0667 3.0667-3.0667-1.2267-1.2266-1.84 1.84-1.8399-1.84z" fill="#4c5664" fill-rule="evenodd"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23 6.00006H1V18.2222H23V6.00006ZM3.44445 8.44453V15.7779H20.5555V8.44453H3.44445ZM13.2232 11.2556L16.0342 14.0667L18.8454 11.2556L17.7209 10.1312L16.0342 11.8179L14.3477 10.1312L13.2232 11.2556Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 310 B

After

Width:  |  Height:  |  Size: 366 B

View File

@ -3,9 +3,9 @@ import { LabelPosition } from "components/constants";
import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
import { ResponsiveBehavior } from "utils/autoLayout/constants";
import { DynamicHeight } from "utils/WidgetFeatures";
import IconSVG from "./icon.svg";
import Widget from "./widget";
import { WIDGET_TAGS } from "constants/WidgetConstants";
export const CONFIG = {
features: {
@ -19,6 +19,7 @@ export const CONFIG = {
name: "TreeSelect",
searchTags: ["dropdown", "singleselecttree"],
iconSVG: IconSVG,
tags: [WIDGET_TAGS.SELECT],
needsMeta: true,
defaults: {
rows: 7,

View File

@ -1 +1,3 @@
<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m0 10c0-1.10457.895431-2 2-2h28c1.1046 0 2 .89543 2 2v12c0 1.1046-.8954 2-2 2h-28c-1.104569 0-2-.8954-2-2zm22.9758 3.778c-.0012-.1311.0497-.2564.1416-.3485.0918-.092.2171-.1432.3482-.1422l4.1957.0306c.1311.001.2574.054.351.1474.0935.0934.1468.2195.148.3506l.0392 4.1956c-.0011.1296-.053.2528-.1446.343s-.2156.1402-.3453.1393c-.1296-.001-.2546-.0528-.3479-.1443-.0933-.0916-.1476-.2155-.151-.3452l-.028-3.002-4.0132 4.0214c-.0919.092-.2172.1432-.3483.1422-.1311-.0009-.2574-.0539-.351-.1473-.0936-.0935-.1469-.2196-.1481-.3507-.0012-.1312.0497-.2566.1416-.3486l4.0132-4.0214-3.0021-.0219c-.1311-.0009-.2573-.054-.3509-.1473-.0936-.0934-.1468-.2196-.1481-.3507zm-18.03439-.821v7.043h1.3125v-8.4551h-1.30664l-2.22657 1.5703v1.3418l2.1211-1.5zm5.29999-.873c-.53124.4922-.79687 1.1269-.79687 1.9043v.0176h1.24217v-.0176c0-.4531.1426-.8184.4278-1.0957.289-.2774.666-.416 1.1308-.416.4375 0 .8027.1289 1.0957.3867s.4395.5801.4395.9668c0 .3125-.0938.6191-.2813.9199-.1875.2969-.5625.7383-1.125 1.3242l-2.85936 2.9766v.9492h5.69536v-1.1777h-3.8672v-.0996l1.8808-1.9043c.7071-.7149 1.1914-1.2911 1.4532-1.7286.2656-.4414.3984-.8867.3984-1.3359 0-.6953-.2637-1.2715-.791-1.7285-.5274-.457-1.1934-.6856-1.9981-.6856-.832 0-1.5136.2481-2.0449.7442z" fill="#4c5664" fill-rule="evenodd"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 8.375C1 7.61561 1.61561 7 2.375 7H21.625C22.3844 7 23 7.61561 23 8.375V16.625C23 17.3844 22.3844 18 21.625 18H2.375C1.61561 18 1 17.3844 1 16.625V8.375ZM16.7959 10.9724C16.795 10.8822 16.83 10.7961 16.8932 10.7328C16.9563 10.6695 17.0425 10.6343 17.1326 10.635L20.0171 10.6561C20.1073 10.6567 20.1941 10.6932 20.2585 10.7574C20.3227 10.8216 20.3594 10.9083 20.3602 10.9984L20.3872 13.8829C20.3864 13.972 20.3507 14.0567 20.2877 14.1187C20.2248 14.1807 20.1395 14.2151 20.0504 14.2145C19.9613 14.2138 19.8753 14.1782 19.8112 14.1153C19.747 14.0523 19.7097 13.9671 19.7074 13.878L19.6881 11.8141L16.929 14.5788C16.8659 14.642 16.7797 14.6772 16.6896 14.6766C16.5994 14.6759 16.5126 14.6395 16.4483 14.5753C16.3839 14.511 16.3473 14.4243 16.3464 14.3342C16.3456 14.244 16.3806 14.1578 16.4438 14.0945L19.2029 11.3298L17.1389 11.3148C17.0488 11.3141 16.962 11.2776 16.8977 11.2135C16.8333 11.1493 16.7968 11.0625 16.7959 10.9724ZM4.39722 10.4079V15.25H5.29956V9.43712H4.40125L2.87048 10.5167V11.4392L4.32874 10.4079H4.39722ZM8.04096 9.80775C7.67573 10.1461 7.49311 10.5825 7.49311 11.117V11.1291H8.34711V11.117C8.34711 10.8055 8.44514 10.5543 8.64122 10.3637C8.83991 10.173 9.09909 10.0777 9.41864 10.0777C9.71943 10.0777 9.9705 10.1663 10.1719 10.3435C10.3734 10.5208 10.4741 10.7423 10.4741 11.0082C10.4741 11.223 10.4096 11.4338 10.2807 11.6406C10.1518 11.8447 9.89398 12.1482 9.50726 12.551L7.54145 14.5974V15.25H11.457V14.4403H8.79831V14.3719L10.0914 13.0626C10.5775 12.5712 10.9104 12.175 11.0904 11.8742C11.273 11.5708 11.3643 11.2646 11.3643 10.9558C11.3643 10.4778 11.183 10.0817 10.8205 9.76746C10.4579 9.45328 10.0001 9.29611 9.44683 9.29611C8.87483 9.29611 8.40623 9.46668 8.04096 9.80775Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -5,9 +5,8 @@ import {
Positioning,
ResponsiveBehavior,
} from "utils/autoLayout/constants";
import { GridDefaults } from "constants/WidgetConstants";
import { GridDefaults, WIDGET_TAGS } from "constants/WidgetConstants";
import type { WidgetProps } from "widgets/BaseWidget";
import IconSVG from "./icon.svg";
import Widget from "./widget";
import type { FlattenedWidgetProps } from "widgets/constants";
@ -28,6 +27,7 @@ export const CONFIG = {
type: Widget.getWidgetType(),
name: "Stats Box",
iconSVG: IconSVG,
tags: [WIDGET_TAGS.DISPLAY],
needsMeta: true,
searchTags: ["statbox"],
isCanvas: true,

10
app/client/src/widgets/SwitchGroupWidget/icon.svg Executable file → Normal file
View File

@ -1 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#4c5664" fill-rule="evenodd" d="M11 6C11 4.89543 10.1046 4 9 4H6C4.89543 4 4 4.89543 4 6C4 7.10457 4.89543 8 6 8H9C10.1046 8 11 7.10457 11 6ZM9 7C9.55228 7 10 6.55228 10 6C10 5.44772 9.55228 5 9 5C8.44772 5 8 5.44772 8 6C8 6.55228 8.44772 7 9 7Z" clip-rule="evenodd"/><path fill="#4c5664" d="M12.9998 5.80005C12.9998 5.38584 13.3355 5.05005 13.7498 5.05005L19.2498 5.05005C19.664 5.05005 19.9998 5.38584 19.9998 5.80005C19.9998 6.21426 19.664 6.55005 19.2498 6.55005L13.7498 6.55005C13.3355 6.55005 12.9998 6.21426 12.9998 5.80005Z"/><path fill="#4c5664" fill-rule="evenodd" d="M11 12C11 10.8954 10.1046 10 9 10H6C4.89543 10 4 10.8954 4 12C4 13.1046 4.89543 14 6 14H9C10.1046 14 11 13.1046 11 12ZM9 13C9.55228 13 10 12.5523 10 12C10 11.4477 9.55228 11 9 11C8.44772 11 8 11.4477 8 12C8 12.5523 8.44772 13 9 13Z" clip-rule="evenodd"/><path fill="#4c5664" d="M12.9998 11.8C12.9998 11.3858 13.3355 11.05 13.7498 11.05L19.2498 11.05C19.664 11.05 19.9998 11.3858 19.9998 11.8C19.9998 12.2143 19.664 12.55 19.2498 12.55L13.7498 12.55C13.3355 12.55 12.9998 12.2143 12.9998 11.8Z"/><circle cx="6" cy="18" r="1" fill="#4c5664"/><path stroke="#4C5664" stroke-width=".5" d="M4.25 18C4.25 17.0335 5.0335 16.25 6 16.25H9C9.9665 16.25 10.75 17.0335 10.75 18C10.75 18.9665 9.9665 19.75 9 19.75H6C5.0335 19.75 4.25 18.9665 4.25 18Z"/><path fill="#4c5664" d="M13 17.8C13 17.3858 13.3358 17.05 13.75 17.05L19.25 17.05C19.6642 17.05 20 17.3858 20 17.8C20 18.2143 19.6642 18.55 19.25 18.55L13.75 18.55C13.3358 18.55 13 18.2143 13 17.8Z"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.625 3.75C10.625 2.23122 9.39382 1 7.875 1H3.75C2.23122 1 1 2.23122 1 3.75C1 5.26878 2.23122 6.5 3.75 6.5H7.875C9.39382 6.5 10.625 5.26878 10.625 3.75ZM7.875 5.125C8.63439 5.125 9.25 4.50939 9.25 3.75C9.25 2.99062 8.63439 2.375 7.875 2.375C7.11561 2.375 6.5 2.99062 6.5 3.75C6.5 4.50939 7.11561 5.125 7.875 5.125Z" fill="#4C5664"/>
<path d="M13.375 3.47507C13.375 2.90553 13.8366 2.44382 14.4062 2.44382H21.9688C22.5383 2.44382 23 2.90553 23 3.47507C23 4.04461 22.5383 4.50632 21.9688 4.50632H14.4062C13.8366 4.50632 13.375 4.04461 13.375 3.47507Z" fill="#4C5664"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.625 12C10.625 10.4812 9.39382 9.25 7.875 9.25H3.75C2.23122 9.25 1 10.4812 1 12C1 13.5188 2.23122 14.75 3.75 14.75H7.875C9.39382 14.75 10.625 13.5188 10.625 12ZM7.875 13.375C8.63439 13.375 9.25 12.7594 9.25 12C9.25 11.2406 8.63439 10.625 7.875 10.625C7.11561 10.625 6.5 11.2406 6.5 12C6.5 12.7594 7.11561 13.375 7.875 13.375Z" fill="#4C5664"/>
<path d="M13.375 11.7251C13.375 11.1555 13.8366 10.6938 14.4062 10.6938H21.9688C22.5383 10.6938 23 11.1555 23 11.7251C23 12.2947 22.5383 12.7563 21.9688 12.7563H14.4062C13.8366 12.7563 13.375 12.2947 13.375 11.7251Z" fill="#4C5664"/>
<path d="M3.75 21.625C4.50939 21.625 5.125 21.0094 5.125 20.25C5.125 19.4906 4.50939 18.875 3.75 18.875C2.99061 18.875 2.375 19.4906 2.375 20.25C2.375 21.0094 2.99061 21.625 3.75 21.625Z" fill="#4C5664"/>
<path d="M1.34375 20.25C1.34375 18.9211 2.42106 17.8438 3.75 17.8438H7.875C9.20394 17.8438 10.2812 18.9211 10.2812 20.25C10.2812 21.5789 9.20394 22.6562 7.875 22.6562H3.75C2.42106 22.6562 1.34375 21.5789 1.34375 20.25Z" stroke="#4C5664" stroke-width="0.5"/>
<path d="M13.375 19.9751C13.375 19.4055 13.8367 18.9438 14.4062 18.9438H21.9688C22.5383 18.9438 23 19.4055 23 19.9751C23 20.5447 22.5383 21.0063 21.9688 21.0063H14.4062C13.8367 21.0063 13.375 20.5447 13.375 19.9751Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -1,8 +1,8 @@
import { Alignment } from "@blueprintjs/core";
import { LabelPosition } from "components/constants";
import IconSVG from "./icon.svg";
import Widget from "./widget";
import { WIDGET_TAGS } from "constants/WidgetConstants";
export const CONFIG = {
features: {
@ -14,6 +14,7 @@ export const CONFIG = {
type: Widget.getWidgetType(),
name: "Switch Group", // The display name which will be made in uppercase and show in the widgets panel ( can have spaces )
iconSVG: IconSVG,
tags: [WIDGET_TAGS.TOGGLES],
needsMeta: true, // Defines if this widget adds any meta properties
isCanvas: false, // Defines if this widget has a canvas within in which we can drop other widgets
defaults: {

View File

@ -1 +1,4 @@
<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g fill="#4c5664"><path clip-rule="evenodd" d="m3 12c0-3.31371 2.68629-6 6-6h6c3.3137 0 6 2.68629 6 6 0 3.3137-2.6863 6-6 6h-6c-3.31371 0-6-2.6863-6-6zm6.25 4c-2.20914 0-4-1.7909-4-4 0-2.20914 1.79086-4 4-4h5.5c2.2091 0 4 1.79086 4 4 0 2.2091-1.7909 4-4 4z" fill-rule="evenodd"/><path d="m15 9c1.6569 0 3 1.3431 3 3s-1.3431 3-3 3-3-1.3431-3-3 1.3431-3 3-3z"/></g></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 12.3333C1 8.28324 4.28324 5 8.33333 5H15.6667C19.7167 5 23 8.28324 23 12.3333C23 16.3834 19.7167 19.6667 15.6667 19.6667H8.33333C4.28324 19.6667 1 16.3834 1 12.3333ZM8.63889 17.2222C5.93883 17.2222 3.75 15.0333 3.75 12.3333C3.75 9.63327 5.93883 7.44444 8.63889 7.44444H15.3611C18.0611 7.44444 20.25 9.63327 20.25 12.3333C20.25 15.0333 18.0611 17.2222 15.3611 17.2222H8.63889Z" fill="#4C5664"/>
<path d="M15.6667 8.66667C17.6918 8.66667 19.3333 10.3082 19.3333 12.3333C19.3333 14.3584 17.6918 16 15.6667 16C13.6416 16 12 14.3584 12 12.3333C12 10.3082 13.6416 8.66667 15.6667 8.66667Z" fill="#4C5664"/>
</svg>

Before

Width:  |  Height:  |  Size: 464 B

After

Width:  |  Height:  |  Size: 756 B

Some files were not shown because too many files have changed in this diff Show More