pgadmin-org
/
pgadmin4
mirror of https://github.com/pgadmin-org/pgadmin4.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Change icon buttons to show tooltip even when disabled. #8449

pull/8530/head
Rohit Bhati 2025-03-08 11:48:08 +05:30 committed by GitHub
parent 1590df8dfd
commit df5dced926
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 23 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
web/pgadmin/static/js/components/Buttons.jsx
View File

@ -176,23 +176,30 @@ export const PgIconButton = forwardRef(({icon, title, shortcut, className, split
shortcutTitle = <ShortcutTitle title={title} accesskey={accesskey} shortcut={shortcut}/>;
}
/* Tooltip does not work for disabled items */
if(props.disabled) {
if(color == 'primary') {
return (
<PrimaryButton ref={ref} style={style}
className={['Buttons-iconButton', (splitButton ? 'Buttons-splitButton' : ''), className].join(' ')}
accessKey={accesskey} data-label={title || ''} {...props}>
{icon}
</PrimaryButton>
<Tooltip title={shortcutTitle || title || ''} aria-label={title || ''} enterDelay={isDropdown ? 1500 : undefined} placement={tooltipPlacement}>
<span>
<PrimaryButton ref={ref} style={style}
className={['Buttons-iconButton', (splitButton ? 'Buttons-splitButton' : ''), className].join(' ')}
accessKey={accesskey} data-label={title || ''} {...props}>
{icon}
</PrimaryButton>
</span>
</Tooltip>
);
} else {
return (
<DefaultButton ref={ref} style={style}
className={['Buttons-iconButton', 'Buttons-iconButtonDefault',(splitButton ? 'Buttons-splitButton' : ''), className].join(' ')}
accessKey={accesskey} data-label={title || ''} {...props}>
{icon}
</DefaultButton>
<Tooltip title={shortcutTitle || title || ''} aria-label={title || ''} enterDelay={isDropdown ? 1500 : undefined} placement={tooltipPlacement}>
<span>
<DefaultButton ref={ref} style={style}
className={['Buttons-iconButton', 'Buttons-iconButtonDefault',(splitButton ? 'Buttons-splitButton' : ''), className].join(' ')}
accessKey={accesskey} data-label={title || ''} {...props}>
{icon}
</DefaultButton>
</span>
</Tooltip>
);
}
} else if(color == 'primary') {

8
web/pgadmin/static/js/helpers/ObjectExplorerToolbar.jsx
View File

@ -18,7 +18,7 @@ import _ from 'lodash';
import PropTypes from 'prop-types';
import CustomPropTypes from '../custom_prop_types';
import usePreferences from '../../../preferences/static/js/store';
import gettext from 'sources/gettext';
function ToolbarButton({menuItem, ...props}) {
return (
@ -73,8 +73,10 @@ export default function ObjectExplorerToolbar() {
<Box display="flex" alignItems="center" gap="2px">
<PgButtonGroup size="small">
<ToolbarButton icon={<QueryToolIcon />} menuItem={menus['query_tool']} shortcut={browserPref?.sub_menu_query_tool} />
<ToolbarButton icon={<ViewDataIcon />} menuItem={menus['view_all_rows_context']} shortcut={browserPref?.sub_menu_view_data} />
<ToolbarButton icon={<RowFilterIcon />} menuItem={menus['view_filtered_rows_context']} />
<ToolbarButton icon={<ViewDataIcon />} menuItem={menus['view_all_rows_context'] ??
{label :gettext('All Rows')}}
shortcut={browserPref?.sub_menu_view_data} />
<ToolbarButton icon={<RowFilterIcon />} menuItem={menus['view_filtered_rows_context'] ?? { label : gettext('Filtered Rows...')}} />
<ToolbarButton icon={<SearchOutlinedIcon style={{height: '1.4rem'}} />} menuItem={menus['search_objects']} shortcut={browserPref?.sub_menu_search_objects} />
{!_.isUndefined(menus['psql']) && <ToolbarButton icon={<TerminalRoundedIcon style={{height: '1.4rem'}}/>} menuItem={menus['psql']} />}
</PgButtonGroup>