Re: pgAdmin 4 commit: Improvement in the look and feel of the whole applica

From: Aditya Toshniwal <aditya(dot)toshniwal(at)enterprisedb(dot)com>
To: Dave Page <dpage(at)pgadmin(dot)org>
Cc: Ashesh Vashi <ashesh(dot)vashi(at)enterprisedb(dot)com>, pgadmin-hackers <pgadmin-hackers(at)lists(dot)postgresql(dot)org>, Akshay Joshi <akshay(dot)joshi(at)enterprisedb(dot)com>, Chethana Kumar <chethana(dot)kumar(at)enterprisedb(dot)com>, Khushboo Vashi <khushboo(dot)vashi(at)enterprisedb(dot)com>
Subject: Re: pgAdmin 4 commit: Improvement in the look and feel of the whole applica
Date: 2018-12-21 14:18:41
Message-ID: CAM9w-_myZ=B-Nzt9DGAnvXVQgz3szAbe13cLPC4kSSXbUQXt6w@mail.gmail.com
Views: Raw Message | Whole Thread | Download mbox | Resend email
Thread:
Lists: pgadmin-hackers

On Fri, Dec 21, 2018 at 7:46 PM Dave Page <dpage(at)pgadmin(dot)org> wrote:

> On Fri, Dec 21, 2018 at 2:14 PM Aditya Toshniwal
> <aditya(dot)toshniwal(at)enterprisedb(dot)com> wrote:
> >
> > For the query tool results grid text pop-out, you mean the border size
> around it ?
> > We don't have any design discussed for it, so could you please propose
> what can be done.
>
> Border, button colours etc. I can't draw anything, but I'd suggest
> that the border should be squared not rounded, and the
> thickness/shadow etc adjusted to match the other styling.
>
Cool.
Button colors are already changed. Others things noted. Will work on it.

> >
> > On Fri, Dec 21, 2018 at 7:35 PM Dave Page <dpage(at)pgadmin(dot)org> wrote:
> >>
> >> On Fri, Dec 21, 2018 at 2:02 PM Aditya Toshniwal
> >> <aditya(dot)toshniwal(at)enterprisedb(dot)com> wrote:
> >> >
> >> >
> >> >
> >> > On Fri, Dec 21, 2018 at 7:29 PM Dave Page <dpage(at)pgadmin(dot)org> wrote:
> >> >>
> >> >> One other issue: I'm seeing that standard sized dialogues (e.g. the
> >> >> Server or Database Properties dialogues) are wrapping their labels
> and
> >> >> controls at the default size. That should not be the case.
> >> >
> >> > Yep. Akshay has logged that in the sheet shared (
> https://drive.google.com/open?id=127BgrvdVUvWSEp-GnQvCDx1WaaemsycxSD0aUpWxb6k
> ).
> >>
> >> OK, but the answer isn't to increase the size of the dialogues as
> >> suggested. The size is fine (though we should review for consistency,
> >> and ensure we are using no more than 3 default standard sizes
> >> throughout the app); we should make the controls display nicely on the
> >> default dialogue size and wrap if the user makes it smaller than we
> >> can display in.
> >>
> >> >> On Fri, Dec 21, 2018 at 12:46 PM Dave Page <dpage(at)pgadmin(dot)org>
> wrote:
> >> >> >
> >> >> > Hi
> >> >> >
> >> >> > On Fri, Dec 21, 2018 at 12:29 PM Aditya Toshniwal
> >> >> > <aditya(dot)toshniwal(at)enterprisedb(dot)com> wrote:
> >> >> > >
> >> >> > > Hi Dave,
> >> >> > >
> >> >> > > On Fri, Dec 21, 2018 at 5:51 PM Dave Page <dpage(at)pgadmin(dot)org>
> wrote:
> >> >> > >>
> >> >> > >> Nice! Thanks Ashesh.
> >> >> > >>
> >> >> > >> Some small issues I spotted:
> >> >> > >>
> >> >> > >> - The font looks somewhat small. How does it compare in size
> to, say,
> >> >> > >> Gmail? I think it needs to be increased to at least that size.
> >> >> > >
> >> >> > > Gmail uses 0.875rem (14px) for the left panel (Inbox, Sent). We
> are using 0.875rem (14px) for main navbar links and 0.815rem(13.04px) for
> all other text.
> >> >> >
> >> >> > Let's increase the default to 0.875, and make the main links
> >> >> > proportionally bigger.
> >> >> >
> >> >> > >> - Dialogues have 2 close buttons next to each other in the
> top-right.
> >> >> > >> Looks like an icon and a text version?
> >> >> > >
> >> >> > > You need to do a yarn install. wcDocker code is changed to fix
> that.
> >> >> >
> >> >> > Yup, that fixed it.
> >> >> >
> >> >> > >> - Why do some Preferences panels use alternate line colouring,
> whilst
> >> >> > >> others don't? I suspect it's because some are actually tables
> under
> >> >> > >> the hood? I think we need consistency there.
> >> >> > >
> >> >> > > Noted.
> >> >> > >>
> >> >> > >>
> >> >> > >> - The Maintenance dialogue looks terrible - it needs to be made
> much
> >> >> > >> more compact. I also seem to be getting a failure to create
> >> >> > >> maintenance jobs (backups etc work fine).
> >> >> > >
> >> >> > > Noted.
> >> >> > >>
> >> >> > >>
> >> >> > >> - I think the buttons on the Browser need borders to match
> other buttons.
> >> >> > >
> >> >> > > It is made consistent with other wcDocker buttons like close,
> right arrow, left arrow. However, we can make it look like other buttons.
> >> >> >
> >> >> > I think they're a different class of buttons - control/navigation
> vs.
> >> >> > function. I think we should make this change as the browser buttons
> >> >> > really are a toolbar just like the larger on on the query tool.
> >> >> >
> >> >> > Thanks!
> >> >> >
> >> >> > >> Thanks!
> >> >> > >>
> >> >> > >> On Fri, Dec 21, 2018 at 12:01 PM Ashesh Vashi
> >> >> > >> <ashesh(dot)vashi(at)enterprisedb(dot)com> wrote:
> >> >> > >> >
> >> >> > >> > Improvement in the look and feel of the whole application
> >> >> > >> >
> >> >> > >> > Changed the SCSS/CSS for the below third party libraries to
> adopt the
> >> >> > >> > new look 'n' feel:
> >> >> > >> > - wcDocker
> >> >> > >> > - Alertify dialogs, and notifications
> >> >> > >> > - AciTree
> >> >> > >> > - Bootstrap Navbar
> >> >> > >> > - Bootstrap Tabs
> >> >> > >> > - Bootstrap Drop-Down menu
> >> >> > >> > - Backgrid
> >> >> > >> > - Select2
> >> >> > >> >
> >> >> > >> > Adopated the new the look 'n' feel for the dialogs, wizard,
> properties,
> >> >> > >> > tab panels, tabs, fieldset, subnode control, spinner control,
> HTML
> >> >> > >> > table, and other form controls.
> >> >> > >> >
> >> >> > >> > - Font is changed to Roboto
> >> >> > >> > - Using SCSS variables to define the look 'n' feel
> >> >> > >> > - Designer background images for the Login, and Forget
> password pages in
> >> >> > >> > 'web' mode
> >> >> > >> > - Improved the look 'n' feel for the key selection in the
> preferences
> >> >> > >> > dialog
> >> >> > >> > - Table classes consistency changes across the application
> >> >> > >> > - File Open and Save dialog list view changes
> >> >> > >> >
> >> >> > >> > Author(s): Aditya Toshniwal & Khushboo Vashi
> >> >> > >> >
> >> >> > >> > Branch
> >> >> > >> > ------
> >> >> > >> > master
> >> >> > >> >
> >> >> > >> > Details
> >> >> > >> > -------
> >> >> > >> >
> https://git.postgresql.org/gitweb?p=pgadmin4.git;a=commitdiff;h=5799ac14ba17dc25fbec184b3b2c6afbe37f1f74
> >> >> > >> >
> >> >> > >> > Modified Files
> >> >> > >> > --------------
> >> >> > >> > web/package.json | 2 +-
> >> >> > >> > .../static/js/fts_configuration.js | 2 +-
> >> >> > >> > .../databases/schemas/functions/__init__.py | 4 +-
> >> >> > >> > .../function => static}/css/function.css | 0
> >> >> > >> > .../templates/trigger_function/css/function.css | 3 -
> >> >> > >> > .../{templates/edbfunc => static}/css/edbfunc.css | 0
> >> >> > >> > .../static/js/exclusion_constraint.js | 18 +-
> >> >> > >> > .../foreign_key/static/js/foreign_key.js | 17 +-
> >> >> > >> > .../schemas/tables/rules/static/css/rule.css | 7 +
> >> >> > >> > .../tables/rules/templates/rules/css/rule.css | 8 -
> >> >> > >> > .../databases/schemas/views/static/css/view.css | 7 +
> >> >> > >> > .../schemas/views/templates/mview/css/mview.css | 4 -
> >> >> > >> > .../schemas/views/templates/view/css/view.css | 4 -
> >> >> > >> > .../pgagent/schedules/static/js/pga_schedule.js | 3 +-
> >> >> > >> > .../servers/pgagent/static/css/pga_job.css | 3 +
> >> >> > >> > .../pgagent/templates/pga_job/css/pga_job.css | 13 -
> >> >> > >> > .../server_groups/servers/static/css/servers.css | 4 +
> >> >> > >> > .../server_groups/servers/static/js/server.js | 22 +-
> >> >> > >> > .../server_groups/servers/static/js/variable.js | 4 +-
> >> >> > >> > .../servers/tablespaces/static/js/tablespace.js | 13 +-
> >> >> > >> > .../servers/templates/css/servers.css | 4 -
> >> >> > >> > web/pgadmin/browser/static/css/browser.css | 13 -
> >> >> > >> > web/pgadmin/browser/static/css/wizard.css | 21 +-
> >> >> > >> > web/pgadmin/browser/static/js/browser.js | 26 +-
> >> >> > >> > web/pgadmin/browser/static/js/collection.js | 16 +-
> >> >> > >> > web/pgadmin/browser/static/js/keyboard.js | 14 +-
> >> >> > >> > web/pgadmin/browser/static/js/menu.js | 28 +-
> >> >> > >> > web/pgadmin/browser/static/js/node.js | 53 +-
> >> >> > >> > web/pgadmin/browser/static/js/node.ui.js | 4 +-
> >> >> > >> > web/pgadmin/browser/static/js/panel.js | 15 +-
> >> >> > >> > web/pgadmin/browser/static/js/toolbar.js | 3 -
> >> >> > >> > web/pgadmin/browser/static/js/wizard.js | 58 +-
> >> >> > >> > web/pgadmin/browser/static/scss/_browser.scss | 43 +-
> >> >> > >> > web/pgadmin/browser/static/scss/_wizard.scss | 41 +-
> >> >> > >> > web/pgadmin/browser/templates/browser/css/node.css | 2 +-
> >> >> > >> > web/pgadmin/browser/templates/browser/index.html | 9 +-
> >> >> > >> > web/pgadmin/dashboard/__init__.py | 2 +-
> >> >> > >> > web/pgadmin/dashboard/static/css/dashboard.css | 21 +-
> >> >> > >> > web/pgadmin/dashboard/static/js/dashboard.js | 120 +-
> >> >> > >> > web/pgadmin/dashboard/static/scss/_dashboard.scss | 44 +-
> >> >> > >> > .../templates/dashboard/database_dashboard.html | 171 ++-
> >> >> > >> > .../templates/dashboard/server_dashboard.html | 197 ++-
> >> >> > >> > .../templates/dashboard/welcome_dashboard.html | 30 +-
> >> >> > >> > web/pgadmin/feature_tests/browser_tool_bar_test.py | 23 +-
> >> >> > >> > web/pgadmin/feature_tests/file_manager_test.py | 23 +-
> >> >> > >> > .../feature_tests/keyboard_shortcut_test.py | 5 +-
> >> >> > >> > .../feature_tests/pg_datatype_validation_test.py | 5 +-
> >> >> > >> > .../pg_utilities_backup_restore_test.py | 28 +-
> >> >> > >> > .../feature_tests/pg_utilities_maintenance_test.py | 16 +-
> >> >> > >> > .../feature_tests/query_tool_journey_test.py | 5 +-
> >> >> > >> > web/pgadmin/feature_tests/query_tool_tests.py | 117 +-
> >> >> > >> > web/pgadmin/feature_tests/view_data_dml_queries.py | 16 +-
> >> >> > >> > .../misc/bgprocess/static/css/bgprocess.css | 11 -
> >> >> > >> > web/pgadmin/misc/bgprocess/static/js/bgprocess.js | 173 ++-
> >> >> > >> > .../misc/bgprocess/static/scss/_bgprocess.scss | 81 +-
> >> >> > >> > web/pgadmin/misc/depends/static/js/depends.js | 3 +-
> >> >> > >> > .../misc/file_manager/static/css/file_manager.css | 141 +-
> >> >> > >> > .../misc/file_manager/static/js/create_dialogue.js | 9 +-
> >> >> > >> > .../misc/file_manager/static/js/select_dialogue.js | 19 +-
> >> >> > >> > web/pgadmin/misc/file_manager/static/js/utility.js | 77 +-
> >> >> > >> > .../file_manager/static/scss/_file_manager.scss | 157 +--
> >> >> > >> > .../file_manager/templates/file_manager/index.html | 95 +-
> >> >> > >> > .../misc/statistics/static/js/statistics.js | 3 +-
> >> >> > >> > web/pgadmin/preferences/static/css/preferences.css | 14 -
> >> >> > >> > web/pgadmin/preferences/static/js/preferences.js | 31 +-
> >> >> > >> > .../preferences/static/scss/_preferences.scss | 16 +
> >> >> > >> > web/pgadmin/static/css/pgadmin.css | 81 +-
> >> >> > >> > web/pgadmin/static/fonts/Roboto-Bold.ttf | Bin 0
> -> 170760 bytes
> >> >> > >> > web/pgadmin/static/fonts/Roboto-Medium.ttf | Bin 0
> -> 172064 bytes
> >> >> > >> > web/pgadmin/static/fonts/Roboto-Regular.ttf | Bin 0
> -> 171676 bytes
> >> >> > >> > web/pgadmin/static/img/collapse_expand.svg | 15 +
> >> >> > >> > web/pgadmin/static/img/forgot_password.svg | 283 ++++
> >> >> > >> > web/pgadmin/static/img/login.svg | 1 +
> >> >> > >> > web/pgadmin/static/js/alertify.pgadmin.defaults.js | 82 +-
> >> >> > >> > web/pgadmin/static/js/backform.pgadmin.js | 80 +-
> >> >> > >> > web/pgadmin/static/js/backgrid.pgadmin.js | 33 +-
> >> >> > >> > web/pgadmin/static/js/slickgrid/editors.js | 8 +-
> >> >> > >> > web/pgadmin/static/js/sqleditor/filter_dialog.js | 33 +-
> >> >> > >> > .../static/js/sqleditor/query_tool_preferences.js | 15 +-
> >> >> > >> > web/pgadmin/static/scss/_aci_tree.overrides.scss | 75 +-
> >> >> > >> > web/pgadmin/static/scss/_alert.scss | 12 +-
> >> >> > >> > web/pgadmin/static/scss/_alertify.overrides.scss | 150 +-
> >> >> > >> > web/pgadmin/static/scss/_backform.overrides.scss | 8 +
> >> >> > >> > web/pgadmin/static/scss/_backgrid.overrides.scss | 251 +++-
> >> >> > >> > web/pgadmin/static/scss/_bootstrap.overrides.scss | 230 ++--
> >> >> > >> > web/pgadmin/static/scss/_codemirror.overrides.scss | 94 +-
> >> >> > >> > web/pgadmin/static/scss/_pgadmin.grid.scss | 56 +
> >> >> > >> > web/pgadmin/static/scss/_pgadmin.style.scss | 1440
> +++++---------------
> >> >> > >> > web/pgadmin/static/scss/_select2.overrides.scss | 24 +-
> >> >> > >> > web/pgadmin/static/scss/_webcabin.overrides.scss | 368
> -----
> >> >> > >> > web/pgadmin/static/scss/_webcabin.pgadmin.scss | 250 ++++
> >> >> > >> > web/pgadmin/static/scss/pgadmin.scss | 10 +-
> >> >> > >> > .../static/scss/resources/_default.style.scss | 90 +-
> >> >> > >> > .../static/scss/resources/_default.variables.scss | 203 ++-
> >> >> > >> > web/pgadmin/static/vendor/backform/backform.js | 645
> +++++++++
> >> >> > >> > .../templates/security/change_password.html | 43 +-
> >> >> > >> > .../templates/security/forgot_password.html | 9 +-
> >> >> > >> > web/pgadmin/templates/security/login_user.html | 16 +-
> >> >> > >> > web/pgadmin/templates/security/panel.html | 23 +-
> >> >> > >> > web/pgadmin/tools/backup/__init__.py | 6 +-
> >> >> > >> > web/pgadmin/tools/backup/static/js/backup.js | 8 +-
> >> >> > >> > .../backup/static/js/backup_dialog_wrapper.js | 22 +-
> >> >> > >> > web/pgadmin/tools/datagrid/__init__.py | 1 -
> >> >> > >> > web/pgadmin/tools/datagrid/static/js/datagrid.js | 38 +-
> >> >> > >> > .../tools/datagrid/templates/datagrid/filter.html | 2 -
> >> >> > >> > .../tools/datagrid/templates/datagrid/index.html | 193 ++-
> >> >> > >> > web/pgadmin/tools/debugger/static/css/debugger.css | 34 +-
> >> >> > >> > web/pgadmin/tools/debugger/static/js/debugger.js | 2 +-
> >> >> > >> > .../tools/debugger/static/js/debugger_ui.js | 28 +-
> >> >> > >> > web/pgadmin/tools/debugger/static/js/direct.js | 13 +-
> >> >> > >> > .../tools/debugger/static/scss/_debugger.scss | 8 -
> >> >> > >> > .../tools/debugger/templates/debugger/direct.html | 89 +-
> >> >> > >> > .../tools/grant_wizard/static/js/grant_wizard.js | 27 +-
> >> >> > >> > .../grant_wizard/static/scss/_grant_wizard.scss | 31 +-
> >> >> > >> > .../tools/import_export/static/js/import_export.js | 24 +-
> >> >> > >> > web/pgadmin/tools/maintenance/__init__.py | 10 +-
> >> >> > >> > .../tools/maintenance/static/js/maintenance.js | 24 +-
> >> >> > >> > .../maintenance/static/scss/_maintenance.scss | 2 +-
> >> >> > >> > web/pgadmin/tools/restore/__init__.py | 14 +-
> >> >> > >> > web/pgadmin/tools/restore/static/js/restore.js | 8 +-
> >> >> > >> > .../restore/static/js/restore_dialog_wrapper.js | 24 +-
> >> >> > >> > .../tools/sqleditor/static/css/sqleditor.css | 128 +-
> >> >> > >> > web/pgadmin/tools/sqleditor/static/js/sqleditor.js | 35 +-
> >> >> > >> > .../tools/sqleditor/static/scss/_history.scss | 42 +-
> >> >> > >> > .../tools/sqleditor/static/scss/_sqleditor.scss | 128 +-
> >> >> > >> > .../user_management/static/css/user_management.css | 37 -
> >> >> > >> > .../user_management/static/js/user_management.js | 53 +-
> >> >> > >> > .../static/scss/_user_management.scss | 12 +-
> >> >> > >> > .../javascript/alerts/alertify_wrapper_spec.js | 4 +-
> >> >> > >> > .../backup/backup_dialog_wrapper_spec.js | 8 +-
> >> >> > >> > .../restore/restore_dialog_wrapper_spec.js | 8 +-
> >> >> > >> > web/webpack.config.js | 2 +-
> >> >> > >> > web/webpack.shim.js | 2 +-
> >> >> > >> > web/webpack.test.config.js | 1 +
> >> >> > >> > web/yarn.lock | 1015
> +++++++++++++-
> >> >> > >> > 135 files changed, 5002 insertions(+), 3850 deletions(-)
> >> >> > >> >
> >> >> > >>
> >> >> > >>
> >> >> > >> --
> >> >> > >> Dave Page
> >> >> > >> Blog: http://pgsnake.blogspot.com
> >> >> > >> Twitter: @pgsnake
> >> >> > >>
> >> >> > >> EnterpriseDB UK: http://www.enterprisedb.com
> >> >> > >> The Enterprise PostgreSQL Company
> >> >> > >
> >> >> > >
> >> >> > >
> >> >> > > --
> >> >> > > Thanks and Regards,
> >> >> > > Aditya Toshniwal
> >> >> > > Software Engineer | EnterpriseDB Software Solutions | Pune
> >> >> > > "Don't Complain about Heat, Plant a tree"
> >> >> >
> >> >> >
> >> >> >
> >> >> > --
> >> >> > Dave Page
> >> >> > Blog: http://pgsnake.blogspot.com
> >> >> > Twitter: @pgsnake
> >> >> >
> >> >> > EnterpriseDB UK: http://www.enterprisedb.com
> >> >> > The Enterprise PostgreSQL Company
> >> >>
> >> >>
> >> >>
> >> >> --
> >> >> Dave Page
> >> >> Blog: http://pgsnake.blogspot.com
> >> >> Twitter: @pgsnake
> >> >>
> >> >> EnterpriseDB UK: http://www.enterprisedb.com
> >> >> The Enterprise PostgreSQL Company
> >> >
> >> >
> >> >
> >> > --
> >> > Thanks and Regards,
> >> > Aditya Toshniwal
> >> > Software Engineer | EnterpriseDB Software Solutions | Pune
> >> > "Don't Complain about Heat, Plant a tree"
> >>
> >>
> >>
> >> --
> >> Dave Page
> >> Blog: http://pgsnake.blogspot.com
> >> Twitter: @pgsnake
> >>
> >> EnterpriseDB UK: http://www.enterprisedb.com
> >> The Enterprise PostgreSQL Company
> >
> >
> >
> > --
> > Thanks and Regards,
> > Aditya Toshniwal
> > Software Engineer | EnterpriseDB Software Solutions | Pune
> > "Don't Complain about Heat, Plant a tree"
>
>
>
> --
> Dave Page
> Blog: http://pgsnake.blogspot.com
> Twitter: @pgsnake
>
> EnterpriseDB UK: http://www.enterprisedb.com
> The Enterprise PostgreSQL Company
>

--
Thanks and Regards,
Aditya Toshniwal
Software Engineer | EnterpriseDB Software Solutions | Pune
"Don't Complain about Heat, Plant a tree"

In response to

Responses

Browse pgadmin-hackers by date

  From Date Subject
Next Message Akshay Joshi 2018-12-24 02:17:37 Re: [pgAdmin4][Patch] - RM 3780 pgAdmin4 lacks ability to specify NULL values in CSV export
Previous Message Dave Page 2018-12-21 14:16:18 Re: pgAdmin 4 commit: Improvement in the look and feel of the whole applica