public inbox for [email protected]
help / color / mirror / Atom feedFrom: Nikhil Mohite <[email protected]>
To: Akshay Joshi <[email protected]>
Cc: pgadmin-hackers <[email protected]>
Subject: Re: [pgAdmin][RM-7149]: [React] Port preferences dialog to React.
Date: Fri, 1 Apr 2022 17:28:57 +0530
Message-ID: <CAOBg0AO6BV_WfB7d=Ld+gPp02fuRkyXUN-qyhpe12GM+sKuunQ@mail.gmail.com> (raw)
In-Reply-To: <CAOBg0APEg6BZ9a6KV8EVJOFbDmx8tmsbdcz6i6TB6E2P1+jRMA@mail.gmail.com>
References: <CAOBg0AMfBEFesek3Uoet9zuNbHP5xA8OzWNGkP8JTt5CrGk9_w@mail.gmail.com>
<CANxoLDcivDBj9=E5q45DEF6f3iczQNZDT3wEOVH=QHGsUD8vUA@mail.gmail.com>
<CAOBg0APBNYjYzguSmW4_LAyPib+SFUDHwBv74-AT5UeWBw4rjQ@mail.gmail.com>
<CANxoLDe5Z0EKagvCYC6bSag4cb3SG5hJRzBegrz2cXgQCGmhJA@mail.gmail.com>
<CAOBg0AMYtPxsdnPPWPi8MSEMFPtmNeTJZa=h-TatSOSkKEXjkA@mail.gmail.com>
<CAOBg0APEg6BZ9a6KV8EVJOFbDmx8tmsbdcz6i6TB6E2P1+jRMA@mail.gmail.com>
Hi Akshay,
PFA patch to fix the issue with maximize button on preferences dialog.
On Tue, Mar 29, 2022 at 3:35 PM Nikhil Mohite <
[email protected]> wrote:
> Hi Akshay,
>
> PFA updated patch resolved the following issues in the preferences dialog:
>
> 1. Show a single note in the binary path.
> 2. Resolved issue in the keyboard shortcut.
>
>
>
> On Wed, Mar 23, 2022 at 12:14 PM Nikhil Mohite <
> [email protected]> wrote:
>
>> Hi Akshay,
>>
>> Please find the updated patch, resolved the following issues in the
>> preferences dialog.
>>
>> 1. Add server mode validation in the binary path.
>> 2. Updated preferences tree rendering to avoid using the ReactDOM
>> render.
>> 3. Updated CSS for keyboard shortcuts checkbox border makes it
>> consistent with input box border.
>> 4. Fixed jasmine test case and improved code coverage.
>> 5. Fixed sonarqube issues.
>> 6. Added validation to disable "*Maximum column with" option *if "*Column
>> **sized by" option *is set to *"Column name"* in *Query Tool ->
>> Result grid*.
>> 7. Updated documentation with the latest screenshots.
>> 8. Updated documentation to fix issue #7261
>> <https://redmine.postgresql.org/issues/7261;: Typo on the document.
>>
>>
>>
>> On Mon, Mar 21, 2022 at 1:31 PM Akshay Joshi <
>> [email protected]> wrote:
>>
>>> Thanks, the patch applied. Screenshots are still not the latest. Take
>>> all the screenshots with the latest changes and send them back.
>>>
>>> On Mon, Mar 21, 2022 at 10:00 AM Nikhil Mohite <
>>> [email protected]> wrote:
>>>
>>>> Hi Akshay,
>>>>
>>>> PFA patch v2 resolved all the review comments.
>>>>
>>>> On Wed, Mar 9, 2022 at 5:48 PM Akshay Joshi <
>>>> [email protected]> wrote:
>>>>
>>>>> Hi Nikhil
>>>>>
>>>>> Below are the review comments:
>>>>> *GUI:*
>>>>>
>>>>> - By default, all nodes should be expanded, and at least one node
>>>>> should be selected (Check existing behavior).
>>>>> - Reduce the space between the expand/collapse (>) icon and the
>>>>> tress node label. It is most likely icons that are taking up that space.
>>>>> - Unable to select parent node. With old behavior when we select
>>>>> the parent node its immediate first child is selected and the appropriate
>>>>> page is displayed on the right side.
>>>>> - The maximize button should be consistent with all other dialogs.
>>>>> - Maximize not working properly, move the dialog bit up, and then
>>>>> click Maximize button, dialog is not visible correctly.
>>>>> - The help button is missing at the bottom.
>>>>> - A documentation update is missing.
>>>>> - Keyboard Shortcuts (Browser, Debugger, Query Tool, and ERD Tool) *Fix
>>>>> for all*
>>>>> - Between the 'Key' label and control, there should be a margin.
>>>>> - Reduce the width of the key control.
>>>>> - The key control loses focus when the key is pressed. Verify
>>>>> old behavior.
>>>>> - Nodes: Can we add a message or label at the top about settings?
>>>>> Previously, we had a switch control with a 'Show/Hide' label that was clear
>>>>> to the end-user.
>>>>> - Dashboard -> Display -> Long-running query thresholds:
>>>>> - Between the 'Warning'/'Alert' label and their control, there
>>>>> should be a margin.
>>>>> - There is no '*in minutes*' label at the end.
>>>>> - Miscellaneous -> Themes: Themes preview is not visible.
>>>>> - Binary Paths:
>>>>> - 'Set as default' should be disabled until a path is provided.
>>>>> - 'Set as default' must be a radio button, only one binary path
>>>>> can be set to default not all.
>>>>> - Unable to select binary path as select dialog is hidden
>>>>> behind the preferences dialog. It seems the preferences dialog is the modal
>>>>> dialog.
>>>>> - Adjust the validation icon properly, space should not be
>>>>> there at the end.
>>>>> - [image: Screenshot 2022-03-09 at 4.34.08 PM.png]
>>>>> - Query Tool: CSV/TXT Output node should be after Auto completion.
>>>>> - Browser -> Tab settings and Storage -> Options have identical
>>>>> right side page. Remove the controls appropriately.
>>>>>
>>>>> I tried but was unable to reproduce the issue.
>>>>
>>>>>
>>>>> *Code:*
>>>>>
>>>>> - Add comments/function header for all the new functions created.
>>>>>
>>>>>
>>>>> On Mon, Mar 7, 2022 at 5:54 PM Nikhil Mohite <
>>>>> [email protected]> wrote:
>>>>>
>>>>>> Hi Hackers,
>>>>>>
>>>>>> Please find attached the patch for RM-7149
>>>>>> <https://redmine.postgresql.org/issues/7149;: [React] Port
>>>>>> preferences dialog to React.
>>>>>>
>>>>>> --
>>>>>> *Thanks & Regards,*
>>>>>> *Nikhil Mohite*
>>>>>> *Senior Software Engineer.*
>>>>>> *EDB Postgres* <https://www.enterprisedb.com/;
>>>>>> *Mob.No: +91-7798364578.*
>>>>>>
>>>>>
>>>>>
>>>>> --
>>>>> *Thanks & Regards*
>>>>> *Akshay Joshi*
>>>>> *pgAdmin Hacker | Principal Software Architect*
>>>>> *EDB Postgres <http://edbpostgres.com>*
>>>>>
>>>>> *Mobile: +91 976-788-8246*
>>>>>
>>>>
>>>> Regards,
>>>> Nikhil Mohite
>>>>
>>>
>>>
>>> --
>>> *Thanks & Regards*
>>> *Akshay Joshi*
>>> *pgAdmin Hacker | Principal Software Architect*
>>> *EDB Postgres <http://edbpostgres.com>*
>>>
>>> *Mobile: +91 976-788-8246*
>>>
>> Regards,
>> Nikhil Mohite
>>
>
> Regards,
> Nikhil Mohite
>
Regards,
Nikhil Mohite
Attachments:
[image/png] Screenshot 2022-03-09 at 4.34.08 PM.png (10.3K, 3-Screenshot%202022-03-09%20at%204.34.08%20PM.png)
download | view image
[application/octet-stream] RM-7149_v5.patch (6.2K, 4-RM-7149_v5.patch)
download | inline diff:
diff --git a/web/pgadmin/static/img/fonticon/close_fullscreen.svg b/web/pgadmin/static/img/fonticon/close_fullscreen.svg
new file mode 100644
index 00000000..3957c94a
--- /dev/null
+++ b/web/pgadmin/static/img/fonticon/close_fullscreen.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="18px" viewBox="0 0 24 24" width="18px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M22,3.41l-5.29,5.29L20,12h-8V4l3.29,3.29L20.59,2L22,3.41z M3.41,22l5.29-5.29L12,20v-8H4l3.29,3.29L2,20.59L3.41,22z"/></svg>
\ No newline at end of file
diff --git a/web/pgadmin/static/img/fonticon/expand.svg b/web/pgadmin/static/img/fonticon/expand.svg
deleted file mode 100644
index 552bd9d1..00000000
--- a/web/pgadmin/static/img/fonticon/expand.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="512px" height="512px" viewBox="-32 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M212.686 315.314L120 408l32.922 31.029c15.12 15.12 4.412 40.971-16.97 40.971h-112C10.697 480 0 469.255 0 456V344c0-21.382 25.803-32.09 40.922-16.971L72 360l92.686-92.686c6.248-6.248 16.379-6.248 22.627 0l25.373 25.373c6.249 6.248 6.249 16.378 0 22.627zm22.628-118.628L328 104l-32.922-31.029C279.958 57.851 290.666 32 312.048 32h112C437.303 32 448 42.745 448 56v112c0 21.382-25.803 32.09-40.922 16.971L376 152l-92.686 92.686c-6.248 6.248-16.379 6.248-22.627 0l-25.373-25.373c-6.249-6.248-6.249-16.378 0-22.627z"/></svg>
\ No newline at end of file
diff --git a/web/pgadmin/static/img/fonticon/minimize_collapse.svg b/web/pgadmin/static/img/fonticon/minimize_collapse.svg
deleted file mode 100644
index 43950564..00000000
--- a/web/pgadmin/static/img/fonticon/minimize_collapse.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g data-name="Layer 2"><g data-name="collapse"><rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"/><path d="M19 9h-2.58l3.29-3.29a1 1 0 1 0-1.42-1.42L15 7.57V5a1 1 0 0 0-1-1 1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h5a1 1 0 0 0 0-2z"/><path d="M10 13H5a1 1 0 0 0 0 2h2.57l-3.28 3.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0L9 16.42V19a1 1 0 0 0 1 1 1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1z"/></g></g></svg>
\ No newline at end of file
diff --git a/web/pgadmin/static/img/fonticon/open_in_full.svg b/web/pgadmin/static/img/fonticon/open_in_full.svg
new file mode 100644
index 00000000..f783c72b
--- /dev/null
+++ b/web/pgadmin/static/img/fonticon/open_in_full.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="18px" viewBox="0 0 24 24" width="18px" fill="#000000"><rect fill="none" height="24" width="24"/><polygon points="21,11 21,3 13,3 16.29,6.29 6.29,16.29 3,13 3,21 11,21 7.71,17.71 17.71,7.71"/></svg>
\ No newline at end of file
diff --git a/web/pgadmin/static/js/components/ExternalIcon.jsx b/web/pgadmin/static/js/components/ExternalIcon.jsx
index a1e0e739..2c643376 100644
--- a/web/pgadmin/static/js/components/ExternalIcon.jsx
+++ b/web/pgadmin/static/js/components/ExternalIcon.jsx
@@ -11,8 +11,8 @@ import DisconnectedSvg from '../../img/fonticon/disconnected.svg?svgr';
import RegexSvg from '../../img/fonticon/regex.svg?svgr';
import FormatCaseSvg from '../../img/fonticon/format_case.svg?svgr';
import PropTypes from 'prop-types';
-import Expand from '../../img/fonticon/expand.svg?svgr';
-import Collapse from '../../img/fonticon/minimize_collapse.svg?svgr';
+import Expand from '../../img/fonticon/open_in_full.svg?svgr';
+import Collapse from '../../img/fonticon/close_fullscreen.svg?svgr';
export default function ExternalIcon({Icon, ...props}) {
return <Icon className={'MuiSvgIcon-root'} {...props} />;
@@ -33,6 +33,6 @@ export const ConnectedIcon = ()=><ExternalIcon Icon={ConnectedSvg} style={{heigh
export const DisonnectedIcon = ()=><ExternalIcon Icon={DisconnectedSvg} style={{height: '0.7em'}} />;
export const RegexIcon = ()=><ExternalIcon Icon={RegexSvg} />;
export const FormatCaseIcon = ()=><ExternalIcon Icon={FormatCaseSvg} />;
-export const ExpandDialogIcon = ()=><ExternalIcon Icon={Expand} style={{height: 'auto', width: '1em'}} />;
-export const MinimizeDialogIcon = ()=><ExternalIcon Icon={Collapse} style={{height: 'auto'}} />;
+export const ExpandDialogIcon = ()=><ExternalIcon Icon={Expand} style={{height: '1.2em'}} />;
+export const MinimizeDialogIcon = ()=><ExternalIcon Icon={Collapse} style={{height: '1.4em'}} />;
diff --git a/web/pgadmin/static/js/helpers/ModalProvider.jsx b/web/pgadmin/static/js/helpers/ModalProvider.jsx
index b955d9c3..1f6d0743 100644
--- a/web/pgadmin/static/js/helpers/ModalProvider.jsx
+++ b/web/pgadmin/static/js/helpers/ModalProvider.jsx
@@ -226,6 +226,10 @@ const useModalStyles = makeStyles(() => ({
transition: 'none',
flexShrink: 0,
userSelect: 'none',
+ },
+ iconButtonStyle: {
+ marginLeft: 'auto',
+ marginRight: '0.3em'
}
}));
@@ -251,11 +255,11 @@ function ModalContainer({ id, title, content, dialogHeight, dialogWidth, fullScr
<Box className={classes.title} marginRight="0.25rem" >{title}</Box>
{
showFullScreen && !isfullScreen &&
- <Box marginLeft="auto"><PgIconButton title={gettext('Maximize')} icon={<ExpandDialogIcon className={classes.icon} />} size="xs" noBorder onClick={() => { setIsFullScreen(!isfullScreen); }} /></Box>
+ <Box className={classes.iconButtonStyle}><PgIconButton title={gettext('Maximize')} icon={<ExpandDialogIcon className={classes.icon} />} size="xs" noBorder onClick={() => { setIsFullScreen(!isfullScreen); }} /></Box>
}
{
showFullScreen && isfullScreen &&
- <Box marginLeft="auto"><PgIconButton title={gettext('Minimize')} icon={<MinimizeDialogIcon className={classes.icon} />} size="xs" noBorder onClick={() => { setIsFullScreen(!isfullScreen); }} /></Box>
+ <Box className={classes.iconButtonStyle}><PgIconButton title={gettext('Minimize')} icon={<MinimizeDialogIcon className={classes.icon} />} size="xs" noBorder onClick={() => { setIsFullScreen(!isfullScreen); }} /></Box>
}
<Box marginLeft="auto"><PgIconButton title={gettext('Close')} icon={<CloseIcon />} size="xs" noBorder onClick={closeModal} /></Box>
view thread (7+ messages) latest in thread
reply
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Reply to all the recipients using the --to and --cc options:
reply via email
To: [email protected]
Cc: [email protected], [email protected]
Subject: Re: [pgAdmin][RM-7149]: [React] Port preferences dialog to React.
In-Reply-To: <CAOBg0AO6BV_WfB7d=Ld+gPp02fuRkyXUN-qyhpe12GM+sKuunQ@mail.gmail.com>
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
This inbox is served by agora; see mirroring instructions
for how to clone and mirror all data and code used for this inbox