diff --git a/web/pgadmin/static/js/Theme/dark.js b/web/pgadmin/static/js/Theme/dark.js index 457550b3f..aaf0b984c 100644 --- a/web/pgadmin/static/js/Theme/dark.js +++ b/web/pgadmin/static/js/Theme/dark.js @@ -108,7 +108,8 @@ export default function(basicSettings) { sourceRowColor: '#402025', targetRowColor: '#6b5438', diffColorFg: '#d4d4d4', - diffSelectFG: '#d4d4d4' + diffSelectFG: '#d4d4d4', + diffSelCheckbox: '#323E43' } } }); diff --git a/web/pgadmin/static/js/Theme/high_contrast.js b/web/pgadmin/static/js/Theme/high_contrast.js index 482c2496d..f8cb86056 100644 --- a/web/pgadmin/static/js/Theme/high_contrast.js +++ b/web/pgadmin/static/js/Theme/high_contrast.js @@ -106,7 +106,8 @@ export default function(basicSettings) { sourceRowColor: '#EE97A5', targetRowColor: '#FFAD65', diffColorFg: '#FFFFFF', - diffSelectFG: '#010B15' + diffSelectFG: '#010B15', + diffSelCheckbox: '#010b15', } } }); diff --git a/web/pgadmin/static/js/Theme/standard.js b/web/pgadmin/static/js/Theme/standard.js index 1fea4e6b0..2d9d4e7f2 100644 --- a/web/pgadmin/static/js/Theme/standard.js +++ b/web/pgadmin/static/js/Theme/standard.js @@ -127,7 +127,8 @@ export default function(basicSettings) { sourceRowColor: '#ffebee', targetRowColor: '#fbe3bf', diffColorFg: '#222', - diffSelectFG: '#222' + diffSelectFG: '#222', + diffSelCheckbox: '#d6effc' } } }); diff --git a/web/pgadmin/static/js/components/CodeMirror.jsx b/web/pgadmin/static/js/components/CodeMirror.jsx index 279741f00..b0d496624 100644 --- a/web/pgadmin/static/js/components/CodeMirror.jsx +++ b/web/pgadmin/static/js/components/CodeMirror.jsx @@ -17,7 +17,7 @@ import gettext from 'sources/gettext'; import { Box, InputAdornment, makeStyles } from '@material-ui/core'; import clsx from 'clsx'; import { InputText } from './FormComponents'; -import { PgIconButton } from './Buttons'; +import { DefaultButton, PgIconButton } from './Buttons'; import CloseIcon from '@material-ui/icons/CloseRounded'; import ArrowDownwardRoundedIcon from '@material-ui/icons/ArrowDownwardRounded'; import ArrowUpwardRoundedIcon from '@material-ui/icons/ArrowUpwardRounded'; @@ -27,6 +27,8 @@ import _ from 'lodash'; import { RegexIcon, FormatCaseIcon } from './ExternalIcon'; import { isMac } from '../keyboard_shortcuts'; import { checkTrojanSource } from '../utils'; +import { copyToClipboard } from '../clipboard'; +import { useDelayedCaller } from '../../../static/js/custom_hooks'; const useStyles = makeStyles((theme)=>({ root: { @@ -49,6 +51,12 @@ const useStyles = makeStyles((theme)=>({ }, marginTop: { marginTop: '0.25rem', + }, + copyButton: { + position: 'absolute', + zIndex: 99, + right: '4px', + width: '66px', } })); @@ -280,6 +288,29 @@ FindDialog.propTypes = { onClose: PropTypes.func, }; +export function CopyButton({show, copyText}) { + const classes = useStyles(); + const [copyBtnLabel, setCopyBtnLabel] = useState(gettext('Copy')); + const revertCopiedText = useDelayedCaller(()=>{ + setCopyBtnLabel(gettext('Copy')); + }); + + return ( + + { + copyToClipboard(copyText); + setCopyBtnLabel(gettext('Copied!')); + revertCopiedText(1500); + }}>{copyBtnLabel} + + ); +} + +CopyButton.propTypes = { + show: PropTypes.bool, + copyText: PropTypes.string +}; + function handleDrop(editor, e) { let dropDetails = null; try { @@ -330,13 +361,14 @@ function handlePaste(_editor, e) { } /* React wrapper for CodeMirror */ -export default function CodeMirror({currEditor, name, value, options, events, readonly, disabled, className, autocomplete=false, gutters=['CodeMirror-linenumbers', 'CodeMirror-foldgutter']}) { +export default function CodeMirror({currEditor, name, value, options, events, readonly, disabled, className, autocomplete=false, gutters=['CodeMirror-linenumbers', 'CodeMirror-foldgutter'], showCopyBtn=false}) { const taRef = useRef(); const editor = useRef(); const cmWrapper = useRef(); const isVisibleTrack = useRef(); const classes = useStyles(); const [[showFind, isReplace], setShowFind] = useState([false, false]); + const [showCopy, setShowCopy] = useState(false); const defaultOptions = useMemo(()=>{ let goLeftKey = 'Ctrl-Alt-Left', goRightKey = 'Ctrl-Alt-Right', @@ -437,6 +469,8 @@ export default function CodeMirror({currEditor, name, value, options, events, re }; }, []); + + const initPreferences = ()=>{ reflectPreferences(); pgWindow?.pgAdmin?.Browser?.onPreferencesChange('sqleditor', function() { @@ -509,8 +543,12 @@ export default function CodeMirror({currEditor, name, value, options, events, re }; return ( -
+
{ showCopyBtn && value.length > 0 && setShowCopy(true);}} + onMouseLeave={() => {showCopyBtn && setShowCopy(false);}} + > +