Re: [pgAdmin][RM5133] UI Improvements for White and Dark Theme - Mailing list pgadmin-hackers

From Aditya Toshniwal
Subject Re: [pgAdmin][RM5133] UI Improvements for White and Dark Theme
Date
Msg-id CAM9w-_k803tJWBkBzbRSM+KrN1MJv40csBWEeYwGgWwRbF4M1g@mail.gmail.com
Whole thread Raw
In response to Re: [pgAdmin][RM5133] UI Improvements for White and Dark Theme  (Akshay Joshi <akshay.joshi@enterprisedb.com>)
List pgadmin-hackers
Hi Hackers,


Attached is the updated patch. Please find the inline comments below.



On Fri, Feb 21, 2020 at 1:15 PM Akshay Joshi <akshay.joshi@enterprisedb.com> wrote:
Hi Aditya

On Thu, Feb 20, 2020 at 1:07 PM Aditya Toshniwal <aditya.toshniwal@enterprisedb.com> wrote:
Hi Hackers,

Attached is the patch to make improvements in the UI for both default and dark themes. Changes include:
1) All the checkboxes are customized now to use theme colors.

    All the checkboxes on Server dialog are not selectable. Connect Now, Save Password, etc...
Fixed. 
2) Switch boxes will use newly introduced ternary color as the off color instead of primary.

    The switch box on the Query History tab is still having old color. Please verify the other switch boxes.
Fixed. 
 
2) "No data" status UI change on dependents, dependency, properties and other places.
3) Event trigger -> Definition input fields UI changes. Document changed.
4) Schema diff cosmetic improvements along with support for dark theme.

  •   Remove the background-color when selecting the checkbox. 
Done. 
  •   Can we change the checkbox(with purple color)? It is not automatically selected/deselected when we select/deselect all the objects.      
The problem is, the underlying library used for the checkboxes does not provide any API to customize it. I tried some hacky ways to do it, but I was able to partially change the checkboxes in the grid. So, I reverted back.
                                        Screenshot 2020-02-21 at 12.08.00 PM.png
  • In Dark Theme object's text is not readable. See the below screenshot. 
Fixed. 
              Screenshot 2020-02-21 at 12.29.58 PM.png
 
5) Improve Style of Dark Mode Code Highlight After Query Execution. Fixes #4996.
6) Background for geometry viewer changed to use #fff for all themes. This will allow it to look cleaner. Fixes #5077.
7) Select2 dropdown selected and hovered item should will have different colors. Also tweaked the tags appearance in multi select boxes. Fixes #4955.

         The hover color looks very light, can we make it a bit dark?
          Screenshot 2020-02-21 at 12.07.26 PM.png
Done. Note that, this is in sync with tree hover/selection colors.
8) Source code pro font updated to latest version to fix firefox monospace issue. Fixes #5184.
9) Other accessibility and cosmetic changes wherever needed.

Thanks @Chethana Kumar for your suggestions and inputs. :)

Kindly review.

    Apart from that, there is a white border visible for the Default Privileges tab in all the dialogs wherever applicable.
Fixed. 
                 Screenshot 2020-02-21 at 12.33.32 PM.png

  Feature tests are failing, please fix them.
The test cases seems to be working fine on my system. :/ 

--
Thanks and Regards,
Aditya Toshniwal
pgAdmin Hacker | Sr. Software Engineer | EnterpriseDB India | Pune
"Don't Complain about Heat, Plant a TREE"


--
Thanks & Regards
Akshay Joshi
Sr. Software Architect
EnterpriseDB Software India Private Limited
Mobile: +91 976-788-8246


--
Thanks and Regards,
Aditya Toshniwal
pgAdmin Hacker | Sr. Software Engineer | EnterpriseDB India | Pune
"Don't Complain about Heat, Plant a TREE"
Attachment

pgadmin-hackers by date:

Previous
From: Akshay Joshi
Date:
Subject: pgAdmin 4 commit: Ensure that AlertifyJS should not be visible as a tit
Next
From: Akshay Joshi
Date:
Subject: pgAdmin 4 commit: Improvements in the UI for both default and dark them