PromucFlow_constructor/app/client/src/icons/ControlIcons.tsx

394 lines
13 KiB
TypeScript
Raw Normal View History

import React, { JSXElementConstructor } from "react";
2019-11-25 05:07:27 +00:00
import { IconProps, IconWrapper } from "constants/IconConstants";
import { ReactComponent as DeleteIcon } from "assets/icons/control/delete.svg";
import { ReactComponent as MoveIcon } from "assets/icons/control/move.svg";
import { ReactComponent as EditIcon } from "assets/icons/control/edit.svg";
2019-11-21 10:52:49 +00:00
import { ReactComponent as ViewIcon } from "assets/icons/control/view.svg";
import { ReactComponent as MoreVerticalIcon } from "assets/icons/control/more-vertical.svg";
2020-01-24 09:54:40 +00:00
import { ReactComponent as OverflowMenuIcon } from "assets/icons/menu/overflow-menu.svg";
import { ReactComponent as JsToggleIcon } from "assets/icons/control/js-toggle.svg";
2020-04-15 11:42:11 +00:00
import { ReactComponent as IncreaseIcon } from "assets/icons/control/increase.svg";
import { ReactComponent as DecreaseIcon } from "assets/icons/control/decrease.svg";
import { ReactComponent as DraggableIcon } from "assets/icons/control/draggable.svg";
import { ReactComponent as CloseCircleIcon } from "assets/icons/control/close-circle.svg";
import { ReactComponent as AddCircleIcon } from "assets/icons/control/add-circle.svg";
2020-05-28 18:10:26 +00:00
import { ReactComponent as HelpIcon } from "assets/icons/control/help.svg";
import { ReactComponent as CollapseIcon } from "assets/icons/control/collapse.svg";
import { ReactComponent as PickMyLocationSelectedIcon } from "assets/icons/control/pick-location-selected.svg";
import { ReactComponent as RemoveIcon } from "assets/icons/control/remove.svg";
import { ReactComponent as DragIcon } from "assets/icons/control/drag.svg";
import { ReactComponent as SortIcon } from "assets/icons/control/sort-icon.svg";
2020-08-18 06:40:11 +00:00
import { ReactComponent as EditWhiteIcon } from "assets/icons/control/edit-white.svg";
import { ReactComponent as LaunchIcon } from "assets/icons/control/launch.svg";
import { ReactComponent as BackIcon } from "assets/icons/control/back.svg";
import { ReactComponent as DeleteColumnIcon } from "assets/icons/control/delete-column.svg";
import { ReactComponent as BoldFontIcon } from "assets/icons/control/bold.svg";
import { ReactComponent as UnderlineIcon } from "assets/icons/control/underline.svg";
import { ReactComponent as ItalicsFontIcon } from "assets/icons/control/italics.svg";
import { ReactComponent as LeftAlignIcon } from "assets/icons/control/left-align.svg";
import { ReactComponent as CenterAlignIcon } from "assets/icons/control/center-align.svg";
import { ReactComponent as RightAlignIcon } from "assets/icons/control/right-align.svg";
import { ReactComponent as VerticalAlignBottom } from "assets/icons/control/vertical_align_bottom.svg";
import { ReactComponent as VerticalAlignCenter } from "assets/icons/control/vertical_align_center.svg";
import { ReactComponent as VerticalAlignTop } from "assets/icons/control/vertical_align_top.svg";
import { ReactComponent as Copy2Icon } from "assets/icons/control/copy2.svg";
import { ReactComponent as CutIcon } from "assets/icons/control/cut.svg";
import { ReactComponent as GroupIcon } from "assets/icons/control/group.svg";
import { ReactComponent as HeadingOneIcon } from "assets/icons/control/heading_1.svg";
import { ReactComponent as HeadingTwoIcon } from "assets/icons/control/heading_2.svg";
import { ReactComponent as HeadingThreeIcon } from "assets/icons/control/heading_3.svg";
import { ReactComponent as ParagraphIcon } from "assets/icons/control/paragraph.svg";
import { ReactComponent as ParagraphTwoIcon } from "assets/icons/control/paragraph_2.svg";
import { ReactComponent as BulletsIcon } from "assets/icons/control/bullets.svg";
import { ReactComponent as DividerCapRightIcon } from "assets/icons/control/divider_cap_right.svg";
import { ReactComponent as DividerCapLeftIcon } from "assets/icons/control/divider_cap_left.svg";
import { ReactComponent as DividerCapAllIcon } from "assets/icons/control/divider_cap_all.svg";
[Feature] new nav sniping mode (#5746) * added sniping mode toggle option to header * added cover to components on hover in sniping mode * fixed the transition time * using filled icon * Show dependencies in action pane * Added a wrapper to make a widget snipeable * removed older parts of sniping from Positioned Container * removed onclick action from snipeable wrapper * Showing widget name in different color * Added a mechanism to send user to sniping mode from successful API screen * created new property pane saga to bind the data * Fix datasource list width issue * Fix sidebar going out of view when the response is a table * Minor refactor * Show add widgets section on the sidebar * Stop showing autocomplete option after adding a widget * fetching pageId, appId from store * Get suggested widget from response * Fix table data not getting evaluated after adding binding * Fix property pane going below the entity explorer while navigating from query/api pane * Fix width of sidepane shifting for apis * Fix vertical margins of connections * Fix api pane suggested widget showing up for errors * Fix margins * can show select in canvas btn in sidebar * can get the action object at the end to bind the data * updated saga and action names * can bind data to table * Use themes * Use new image url for Table widget * Added conditional mapping for sniping mode binding. * updated the widget name tags and seq of calls to open property pane * pushed all sniping mode decoration to header * moved setting sniping mode logic to editor reducer * Added keyboard short cut to get out of sniping mode * updated reset sniping mechanism * removed a divider line * if there are no relationships, will not show the complete section * Connect Data will automatically show relevant tab in integrations * Update list and dropdown image urls * Remove create table button * no wrapping bind to text * minor review considerations * showing the widget name to left in sniping mode * can set data to datepicker * will not show snipe btn if there are no widgets in canvas * Changes for multiple suggested widgets * removed dependency of sniping from suggested widgets * Added analytics events for sniping mode * logic for binding data to a widget, moved to snipeable component * changed binding widget func from capture to onClick and took care of sniping from widget wrapper too. * added tests to check sniping mode for table * updated test spec * minor fix * Fix copy changes * Update test to use table widget from suggested widget list * if fails to bind will generate warning and keep user in sniping mode * in sniping mode will only show name plate if it is under focus * fixed the test case * added a comment * minor fix to capture on click event in sniping mode * updated text * Hide connections UI when there are no connections * Increase width to 90% * Show placeholder text and back button in sidepane * Show tooltip on hover * Add analyitcs events for suggested widgets and connections * Update label based on whether widgets are there or not * binding related changes * renamed the saga file containing sinping mode sagas * Changes for inspect entity * Revert "binding related changes" temporarily This reverts commit 54ae9667fecf24bc3cf9912a5356d06600b25c84. * Update suggested widgets url * Update table url * Fix chart data field not getting evaluated * a minor fix to show proper tool tip when user hovers on widget name * Show sidepane when there is output * Update locators * Use constants for messages * Update file name to ApiRightPane * Remove delay * Revert "Revert "binding related changes" temporarily" This reverts commit ee7f75e83218137250b4b9a28fcf63080c185150. * Fix width * Fix overlap Co-authored-by: Akash N <akash@codemonk.in>
2021-07-26 16:44:10 +00:00
import { ReactComponent as TrendingFlat } from "assets/icons/ads/trending-flat.svg";
import { ReactComponent as AlignLeftIcon } from "assets/icons/control/align_left.svg";
import { ReactComponent as AlignRightIcon } from "assets/icons/control/align_right.svg";
import { ReactComponent as BorderRadiusSharpIcon } from "assets/icons/control/border-radius-sharp.svg";
import { ReactComponent as BorderRadiusRoundedIcon } from "assets/icons/control/border-radius-rounded.svg";
import { ReactComponent as BorderRadiusCircleIcon } from "assets/icons/control/border-radius-circle.svg";
import { ReactComponent as BoxShadowNoneIcon } from "assets/icons/control/box-shadow-none.svg";
import { ReactComponent as BoxShadowVariant1Icon } from "assets/icons/control/box-shadow-variant1.svg";
import { ReactComponent as BoxShadowVariant2Icon } from "assets/icons/control/box-shadow-variant2.svg";
import { ReactComponent as BoxShadowVariant3Icon } from "assets/icons/control/box-shadow-variant3.svg";
import { ReactComponent as BoxShadowVariant4Icon } from "assets/icons/control/box-shadow-variant4.svg";
import { ReactComponent as BoxShadowVariant5Icon } from "assets/icons/control/box-shadow-variant5.svg";
import IncreaseV2Icon from "remixicon-react/AddLineIcon";
import PlayIcon from "assets/icons/control/play-icon.png";
import CopyIcon from "remixicon-react/FileCopyLineIcon";
import QuestionIcon from "remixicon-react/QuestionLineIcon";
import SettingsIcon from "remixicon-react/Settings5LineIcon";
import EyeIcon from "remixicon-react/EyeLineIcon";
import EyeOffIcon from "remixicon-react/EyeOffLineIcon";
import CloseIcon from "remixicon-react/CloseLineIcon";
2020-06-10 17:31:20 +00:00
/* eslint-disable react/display-name */
export const ControlIcons: {
[id: string]: JSXElementConstructor<IconProps>;
} = {
DELETE_CONTROL: (props: IconProps) => (
<IconWrapper {...props}>
<DeleteIcon />
</IconWrapper>
),
MOVE_CONTROL: (props: IconProps) => (
<IconWrapper {...props}>
<MoveIcon />
</IconWrapper>
),
EDIT_CONTROL: (props: IconProps) => (
<IconWrapper {...props}>
<EditIcon />
</IconWrapper>
),
VIEW_CONTROL: (props: IconProps) => (
<IconWrapper {...props}>
<ViewIcon />
</IconWrapper>
),
2019-11-21 10:52:49 +00:00
MORE_VERTICAL_CONTROL: (props: IconProps) => (
<IconWrapper {...props}>
<MoreVerticalIcon />
</IconWrapper>
),
2020-01-24 09:54:40 +00:00
MORE_HORIZONTAL_CONTROL: (props: IconProps) => (
<IconWrapper {...props}>
<OverflowMenuIcon />
</IconWrapper>
),
JS_TOGGLE: (props: IconProps) => (
<IconWrapper {...props}>
<JsToggleIcon />
</IconWrapper>
),
2020-04-15 11:42:11 +00:00
INCREASE_CONTROL: (props: IconProps) => (
<IconWrapper {...props}>
<IncreaseIcon />
</IconWrapper>
),
DECREASE_CONTROL: (props: IconProps) => (
<IconWrapper {...props}>
<DecreaseIcon />
</IconWrapper>
),
DRAGGABLE_CONTROL: (props: IconProps) => (
<IconWrapper {...props}>
<DraggableIcon />
</IconWrapper>
),
CLOSE_CONTROL: (props: IconProps) => (
<IconWrapper {...props}>
<CloseIcon />
</IconWrapper>
),
CLOSE_CIRCLE_CONTROL: (props: IconProps) => (
<IconWrapper {...props}>
<CloseCircleIcon />
</IconWrapper>
),
ADD_CIRCLE_CONTROL: (props: IconProps) => (
<IconWrapper {...props}>
<AddCircleIcon />
</IconWrapper>
),
PICK_MY_LOCATION_SELECTED_CONTROL: (props: IconProps) => (
2020-04-15 11:42:11 +00:00
<IconWrapper {...props}>
<PickMyLocationSelectedIcon />
2020-04-15 11:42:11 +00:00
</IconWrapper>
),
2020-06-10 17:31:20 +00:00
SETTINGS_CONTROL: (props: IconProps) => (
2020-05-22 11:03:35 +00:00
<IconWrapper {...props}>
2020-06-10 17:31:20 +00:00
<SettingsIcon />
2020-05-22 11:03:35 +00:00
</IconWrapper>
),
2020-05-28 18:10:26 +00:00
HELP_CONTROL: (props: IconProps) => (
<IconWrapper {...props}>
<HelpIcon />
</IconWrapper>
),
PLAY_VIDEO: (props: IconProps) => (
2020-06-22 13:46:19 +00:00
<IconWrapper {...props}>
<img
alt="Datasource"
src={PlayIcon}
style={{ height: "30px", width: "30px" }}
/>
2020-06-22 13:46:19 +00:00
</IconWrapper>
),
REMOVE_CONTROL: (props: IconProps) => (
<IconWrapper {...props}>
<RemoveIcon />
</IconWrapper>
),
DRAG_CONTROL: (props: IconProps) => (
<IconWrapper {...props}>
<DragIcon />
</IconWrapper>
),
COLLAPSE_CONTROL: (props: IconProps) => (
<IconWrapper {...props}>
<CollapseIcon />
</IconWrapper>
),
SORT_CONTROL: (props: IconProps) => (
<IconWrapper {...props}>
<SortIcon />
</IconWrapper>
),
2020-08-18 06:40:11 +00:00
EDIT_WHITE: (props: IconProps) => (
<IconWrapper {...props}>
<EditWhiteIcon />
</IconWrapper>
),
LAUNCH_CONTROL: (props: IconProps) => (
<IconWrapper {...props}>
<LaunchIcon />
</IconWrapper>
),
BACK_CONTROL: (props: IconProps) => (
<IconWrapper {...props}>
<BackIcon />
</IconWrapper>
),
SHOW_COLUMN: (props: IconProps) => (
<IconWrapper {...props}>
<EyeIcon />
</IconWrapper>
),
HIDE_COLUMN: (props: IconProps) => (
<IconWrapper {...props}>
<EyeOffIcon />
</IconWrapper>
),
DELETE_COLUMN: (props: IconProps) => (
<IconWrapper {...props}>
<DeleteColumnIcon />
</IconWrapper>
),
BOLD_FONT: (props: IconProps) => (
<IconWrapper {...props}>
<BoldFontIcon />
</IconWrapper>
),
UNDERLINE: (props: IconProps) => (
<IconWrapper {...props}>
<UnderlineIcon />
</IconWrapper>
),
ITALICS_FONT: (props: IconProps) => (
<IconWrapper {...props}>
<ItalicsFontIcon />
</IconWrapper>
),
LEFT_ALIGN: (props: IconProps) => (
<IconWrapper {...props}>
<LeftAlignIcon />
</IconWrapper>
),
CENTER_ALIGN: (props: IconProps) => (
<IconWrapper {...props}>
<CenterAlignIcon />
</IconWrapper>
),
RIGHT_ALIGN: (props: IconProps) => (
<IconWrapper {...props}>
<RightAlignIcon />
</IconWrapper>
),
VERTICAL_TOP: (props: IconProps) => (
<IconWrapper {...props}>
<VerticalAlignTop />
</IconWrapper>
),
VERTICAL_CENTER: (props: IconProps) => (
<IconWrapper {...props}>
<VerticalAlignCenter />
</IconWrapper>
),
VERTICAL_BOTTOM: (props: IconProps) => (
<IconWrapper {...props}>
<VerticalAlignBottom />
</IconWrapper>
),
COPY_CONTROL: (props: IconProps) => (
<IconWrapper {...props}>
<CopyIcon />
</IconWrapper>
),
COPY2_CONTROL: (props: IconProps) => (
<IconWrapper {...props}>
<Copy2Icon />
</IconWrapper>
),
CUT_CONTROL: (props: IconProps) => (
<IconWrapper {...props}>
<CutIcon />
</IconWrapper>
),
GROUP_CONTROL: (props: IconProps) => (
<IconWrapper {...props}>
<GroupIcon />
</IconWrapper>
),
HEADING_ONE: (props: IconProps) => (
<IconWrapper {...props}>
<HeadingOneIcon />
</IconWrapper>
),
HEADING_TWO: (props: IconProps) => (
<IconWrapper {...props}>
<HeadingTwoIcon />
</IconWrapper>
),
HEADING_THREE: (props: IconProps) => (
<IconWrapper {...props}>
<HeadingThreeIcon />
</IconWrapper>
),
PARAGRAPH: (props: IconProps) => (
<IconWrapper {...props}>
<ParagraphIcon />
</IconWrapper>
),
PARAGRAPH_TWO: (props: IconProps) => (
<IconWrapper {...props}>
<ParagraphTwoIcon />
</IconWrapper>
),
BULLETS: (props: IconProps) => (
<IconWrapper {...props}>
<BulletsIcon />
</IconWrapper>
),
DIVIDER_CAP_RIGHT: (props: IconProps) => (
<IconWrapper {...props}>
<DividerCapRightIcon />
</IconWrapper>
),
DIVIDER_CAP_LEFT: (props: IconProps) => (
<IconWrapper {...props}>
<DividerCapLeftIcon />
</IconWrapper>
),
DIVIDER_CAP_ALL: (props: IconProps) => (
<IconWrapper {...props}>
<DividerCapAllIcon />
</IconWrapper>
),
[Feature] new nav sniping mode (#5746) * added sniping mode toggle option to header * added cover to components on hover in sniping mode * fixed the transition time * using filled icon * Show dependencies in action pane * Added a wrapper to make a widget snipeable * removed older parts of sniping from Positioned Container * removed onclick action from snipeable wrapper * Showing widget name in different color * Added a mechanism to send user to sniping mode from successful API screen * created new property pane saga to bind the data * Fix datasource list width issue * Fix sidebar going out of view when the response is a table * Minor refactor * Show add widgets section on the sidebar * Stop showing autocomplete option after adding a widget * fetching pageId, appId from store * Get suggested widget from response * Fix table data not getting evaluated after adding binding * Fix property pane going below the entity explorer while navigating from query/api pane * Fix width of sidepane shifting for apis * Fix vertical margins of connections * Fix api pane suggested widget showing up for errors * Fix margins * can show select in canvas btn in sidebar * can get the action object at the end to bind the data * updated saga and action names * can bind data to table * Use themes * Use new image url for Table widget * Added conditional mapping for sniping mode binding. * updated the widget name tags and seq of calls to open property pane * pushed all sniping mode decoration to header * moved setting sniping mode logic to editor reducer * Added keyboard short cut to get out of sniping mode * updated reset sniping mechanism * removed a divider line * if there are no relationships, will not show the complete section * Connect Data will automatically show relevant tab in integrations * Update list and dropdown image urls * Remove create table button * no wrapping bind to text * minor review considerations * showing the widget name to left in sniping mode * can set data to datepicker * will not show snipe btn if there are no widgets in canvas * Changes for multiple suggested widgets * removed dependency of sniping from suggested widgets * Added analytics events for sniping mode * logic for binding data to a widget, moved to snipeable component * changed binding widget func from capture to onClick and took care of sniping from widget wrapper too. * added tests to check sniping mode for table * updated test spec * minor fix * Fix copy changes * Update test to use table widget from suggested widget list * if fails to bind will generate warning and keep user in sniping mode * in sniping mode will only show name plate if it is under focus * fixed the test case * added a comment * minor fix to capture on click event in sniping mode * updated text * Hide connections UI when there are no connections * Increase width to 90% * Show placeholder text and back button in sidepane * Show tooltip on hover * Add analyitcs events for suggested widgets and connections * Update label based on whether widgets are there or not * binding related changes * renamed the saga file containing sinping mode sagas * Changes for inspect entity * Revert "binding related changes" temporarily This reverts commit 54ae9667fecf24bc3cf9912a5356d06600b25c84. * Update suggested widgets url * Update table url * Fix chart data field not getting evaluated * a minor fix to show proper tool tip when user hovers on widget name * Show sidepane when there is output * Update locators * Use constants for messages * Update file name to ApiRightPane * Remove delay * Revert "Revert "binding related changes" temporarily" This reverts commit ee7f75e83218137250b4b9a28fcf63080c185150. * Fix width * Fix overlap Co-authored-by: Akash N <akash@codemonk.in>
2021-07-26 16:44:10 +00:00
BIND_DATA_CONTROL: (props: IconProps) => (
<IconWrapper {...props}>
<TrendingFlat />
</IconWrapper>
),
ICON_ALIGN_LEFT: (props: IconProps) => (
<IconWrapper {...props}>
<AlignLeftIcon />
</IconWrapper>
),
ICON_ALIGN_RIGHT: (props: IconProps) => (
<IconWrapper {...props}>
<AlignRightIcon />
</IconWrapper>
),
BORDER_RADIUS_SHARP: (props: IconProps) => (
<IconWrapper {...props}>
<BorderRadiusSharpIcon />
</IconWrapper>
),
BORDER_RADIUS_ROUNDED: (props: IconProps) => (
<IconWrapper {...props}>
<BorderRadiusRoundedIcon />
</IconWrapper>
),
BORDER_RADIUS_CIRCLE: (props: IconProps) => (
<IconWrapper {...props}>
<BorderRadiusCircleIcon />
</IconWrapper>
),
BOX_SHADOW_NONE: (props: IconProps) => (
<IconWrapper {...props}>
<BoxShadowNoneIcon />
</IconWrapper>
),
BOX_SHADOW_VARIANT1: (props: IconProps) => (
<IconWrapper {...props}>
<BoxShadowVariant1Icon />
</IconWrapper>
),
BOX_SHADOW_VARIANT2: (props: IconProps) => (
<IconWrapper {...props}>
<BoxShadowVariant2Icon />
</IconWrapper>
),
BOX_SHADOW_VARIANT3: (props: IconProps) => (
<IconWrapper {...props}>
<BoxShadowVariant3Icon />
</IconWrapper>
),
BOX_SHADOW_VARIANT4: (props: IconProps) => (
<IconWrapper {...props}>
<BoxShadowVariant4Icon />
</IconWrapper>
),
BOX_SHADOW_VARIANT5: (props: IconProps) => (
<IconWrapper {...props}>
<BoxShadowVariant5Icon />
</IconWrapper>
),
INCREASE_CONTROL_V2: (props: IconProps) => (
<IconWrapper {...props}>
<IncreaseV2Icon />
</IconWrapper>
),
QUESTION: (props: IconProps) => (
<IconWrapper {...props}>
<QuestionIcon />
</IconWrapper>
),
};
2019-11-21 10:52:49 +00:00
export type ControlIconName = keyof typeof ControlIcons;