mirror of
https://github.com/ToolJet/ToolJet
synced 2026-05-24 01:18:23 +00:00
Fix ui feedback
This commit is contained in:
Nakul Nagargade
parent
f7f156f424
commit
16ab953649
7 changed files with 26 additions and 12 deletions
|
|
@ -83,7 +83,7 @@ export const linkConfig = {
|
|||
accordian: 'Link text',
|
||||
},
|
||||
textSize: {
|
||||
type: 'number',
|
||||
type: 'numberInput',
|
||||
displayName: 'Text size',
|
||||
validation: {
|
||||
schema: { type: 'number' },
|
||||
|
|
@ -208,7 +208,7 @@ export const linkConfig = {
|
|||
},
|
||||
events: [],
|
||||
styles: {
|
||||
textColor: { value: '#375FCF' },
|
||||
textColor: { value: '#4368E3' },
|
||||
textSize: { value: '{{14}}' },
|
||||
underline: { value: 'on-hover' },
|
||||
verticalAlignment: { value: 'center' },
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ import { KanbanBoard } from '@/Editor/Components/KanbanBoard/KanbanBoard';
|
|||
import { Steps } from '@/Editor/Components/Steps';
|
||||
import { TreeSelect } from '@/Editor/Components/TreeSelect';
|
||||
import { Icon } from '@/Editor/Components/Icon';
|
||||
import { Link } from '@/Editor/Components/Link';
|
||||
import { Link } from '@/Editor/Components/Link/Link';
|
||||
// import { Form } from '@/Editor/Components/Form/Form';
|
||||
import { BoundedBox } from '@/Editor/Components/BoundedBox/BoundedBox';
|
||||
import { isPDFSupported } from '@/_helpers/appUtils';
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import React, { useRef, useEffect, useState } from 'react';
|
|||
import * as Icons from '@tabler/icons-react';
|
||||
import cx from 'classnames';
|
||||
import Loader from '@/ToolJetUI/Loader/Loader';
|
||||
import './link.scss';
|
||||
|
||||
export const Link = ({ height, properties, styles, fireEvent, setExposedVariables, dataCy }) => {
|
||||
const { linkTarget, linkText, targetType, visibility, disabledState, loadingState } = properties;
|
||||
|
|
@ -19,11 +20,13 @@ export const Link = ({ height, properties, styles, fireEvent, setExposedVariable
|
|||
alignItems: verticalAlignment === 'top' ? 'flex-start' : verticalAlignment === 'center' ? 'center' : 'flex-end',
|
||||
justifyContent:
|
||||
horizontalAlignment === 'left' ? 'flex-start' : horizontalAlignment === 'center' ? 'center' : 'flex-end',
|
||||
height,
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
boxShadow,
|
||||
cursor: isDisabled ? 'not-allowed' : 'pointer',
|
||||
opacity: isDisabled ? 0.5 : 1,
|
||||
pointerEvents: isDisabled ? 'none' : 'auto',
|
||||
fontWeight: '500',
|
||||
};
|
||||
// eslint-disable-next-line import/namespace
|
||||
const IconElement = Icons?.[icon] == undefined ? Icons['IconHome2'] : Icons[icon];
|
||||
|
|
@ -112,13 +115,16 @@ export const Link = ({ height, properties, styles, fireEvent, setExposedVariable
|
|||
style={{ color: textColor, fontSize: textSize }}
|
||||
ref={clickRef}
|
||||
>
|
||||
<span className="d-flex align-items-center justify-content-center">
|
||||
<span className="d-flex justify-content-center">
|
||||
{iconVisibility && (
|
||||
<IconElement
|
||||
style={{
|
||||
width: textSize,
|
||||
height: textSize,
|
||||
width: `${textSize}px`,
|
||||
height: `${textSize}px`,
|
||||
minWidth: `${textSize}px`,
|
||||
minHeight: `${textSize}px`,
|
||||
marginRight: '4px',
|
||||
marginTop: '3px',
|
||||
}}
|
||||
stroke={1.5}
|
||||
/>
|
||||
8
frontend/src/Editor/Components/Link/link.scss
Normal file
8
frontend/src/Editor/Components/Link/link.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
.link-widget {
|
||||
a {
|
||||
text-underline-offset: 4px; // Adds space between text and underline
|
||||
&:hover {
|
||||
// color: var(--interactive-overlays-fill-hover) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -83,7 +83,7 @@ export const linkConfig = {
|
|||
accordian: 'Link text',
|
||||
},
|
||||
textSize: {
|
||||
type: 'number',
|
||||
type: 'numberInput',
|
||||
displayName: 'Text size',
|
||||
validation: {
|
||||
schema: { type: 'number' },
|
||||
|
|
@ -208,7 +208,7 @@ export const linkConfig = {
|
|||
},
|
||||
events: [],
|
||||
styles: {
|
||||
textColor: { value: '#375FCF' },
|
||||
textColor: { value: '#4368E3' },
|
||||
textSize: { value: '{{14}}' },
|
||||
underline: { value: 'on-hover' },
|
||||
verticalAlignment: { value: 'center' },
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ import { Kanban } from '@/Editor/Components/Kanban/Kanban';
|
|||
import { Steps } from '@/Editor/Components/Steps';
|
||||
import { TreeSelect } from '@/Editor/Components/TreeSelect';
|
||||
import { Icon } from '@/Editor/Components/Icon';
|
||||
import { Link } from '@/Editor/Components/Link';
|
||||
import { Link } from '@/Editor/Components/Link/Link';
|
||||
import { Form } from '@/Editor/Components/Form/Form';
|
||||
import { BoundedBox } from '@/Editor/Components/BoundedBox/BoundedBox';
|
||||
import { isPDFSupported } from '@/_helpers/appUtils';
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@ export const linkConfig = {
|
|||
accordian: 'Link text',
|
||||
},
|
||||
textSize: {
|
||||
type: 'number',
|
||||
type: 'numberInput',
|
||||
displayName: 'Text size',
|
||||
validation: {
|
||||
schema: { type: 'number' },
|
||||
|
|
@ -208,7 +208,7 @@ export const linkConfig = {
|
|||
},
|
||||
events: [],
|
||||
styles: {
|
||||
textColor: { value: '#375FCF' },
|
||||
textColor: { value: '#4368E3' },
|
||||
textSize: { value: '{{14}}' },
|
||||
underline: { value: 'on-hover' },
|
||||
verticalAlignment: { value: 'center' },
|
||||
|
|
|
|||
Loading…
Reference in a new issue