Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Merge branch 'feature/tooltip' into 'release'

Browse Source 
Tooltip css fixes.

See merge request theappsmith/internal-tools-client!409
This commit is contained in:
Satbir Singh 2020-03-20 09:45:45 +00:00
commit e30a746b41
4 changed files with 30 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/client/src/components/propertyControls/StyledControls.tsx
View File

@ -41,17 +41,22 @@ export const ControlWrapper = styled.div<ControlWrapperProps>`
export const ControlPropertyLabelContainer = styled.div` export const ControlPropertyLabelContainer = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
& > label { label {
color: ${props => props.theme.colors.paneText}; color: ${props => props.theme.colors.paneText};
margin-bottom: ${props => props.theme.spaces[1]}px; margin-bottom: ${props => props.theme.spaces[1]}px;
font-size: ${props => props.theme.fontSizes[3]}px; font-size: ${props => props.theme.fontSizes[3]}px;
} }
.underline {
color: ${props => props.theme.colors.paneTextUnderline};
}
`; `;
export const JSToggleButton = styled.span<{ active: boolean }>` export const JSToggleButton = styled.span<{ active: boolean }>`
margin: 0 3px; margin: 0 3px;
cursor: pointer; cursor: pointer;
height: 24px;
svg { svg {
height: 24px;
rect { rect {
fill: ${props => fill: ${props =>
props.active props.active

1
app/client/src/constants/Colors.tsx
View File

@ -10,6 +10,7 @@ export const Colors: Record<string, string> = {
MYSTIC: "#E1E8ED", MYSTIC: "#E1E8ED",
AQUA_HAZE: "#EEF2F5", AQUA_HAZE: "#EEF2F5",
GRAY_CHATEAU: "#A2A6A8", GRAY_CHATEAU: "#A2A6A8",
LIGHT_GREYISH_BLUE: "#B0BFCB",
SUNGLOW: "#FFCB33", SUNGLOW: "#FFCB33",
BLACK: "#000000", BLACK: "#000000",

1
app/client/src/constants/DefaultTheme.tsx
View File

@ -332,6 +332,7 @@ export const theme: Theme = {
paneInputBG: Colors.SHARK, paneInputBG: Colors.SHARK,
paneBG: Colors.OUTER_SPACE, paneBG: Colors.OUTER_SPACE,
paneText: Colors.GRAY_CHATEAU, paneText: Colors.GRAY_CHATEAU,
paneTextUnderline: Colors.LIGHT_GREYISH_BLUE,
paneSectionLabel: Colors.CADET_BLUE, paneSectionLabel: Colors.CADET_BLUE,
navBG: Colors.SHARK, navBG: Colors.SHARK,
grid: Colors.GEYSER_LIGHT, grid: Colors.GEYSER_LIGHT,

35
app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx
View File

@ -9,7 +9,7 @@ import { ControlIcons } from "icons/ControlIcons";
import PropertyControlFactory from "utils/PropertyControlFactory"; import PropertyControlFactory from "utils/PropertyControlFactory";
import { WidgetProps } from "widgets/BaseWidget"; import { WidgetProps } from "widgets/BaseWidget";
import { ControlConfig } from "reducers/entityReducers/propertyPaneConfigReducer"; import { ControlConfig } from "reducers/entityReducers/propertyPaneConfigReducer";
import { Tooltip } from "@blueprintjs/core"; import { Tooltip, Position } from "@blueprintjs/core";
type Props = { type Props = {
widgetProperties: WidgetProps; widgetProperties: WidgetProps;
@ -27,21 +27,30 @@ function UnderlinedLabel({
}) { }) {
const toolTipDefined = tooltip !== undefined; const toolTipDefined = tooltip !== undefined;
return ( return (
<Tooltip disabled={!toolTipDefined} content={tooltip} hoverOpenDelay={200}> <Tooltip
disabled={!toolTipDefined}
content={tooltip}
position={Position.TOP}
hoverOpenDelay={200}
>
<div <div
style={ style={{
toolTipDefined height: "22px",
? { }}
height: "20px",
cursor: "help",
}
: {
height: "20px",
}
}
> >
{label} <label
style={
toolTipDefined
? {
cursor: "help",
}
: {}
}
>
{label}
</label>
<span <span
className={"underline"}
style={ style={
toolTipDefined toolTipDefined
? { ? {