Re: pgAdmin 4 commit: Improvement in the look and feel of the whole applica - Mailing list pgadmin-hackers

On Fri, Dec 21, 2018 at 2:14 PM Aditya Toshniwal
<aditya.toshniwal@enterprisedb.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.

>
> On Fri, Dec 21, 2018 at 7:35 PM Dave Page <dpage@pgadmin.org> wrote:
>>
>> On Fri, Dec 21, 2018 at 2:02 PM Aditya Toshniwal
>> <aditya.toshniwal@enterprisedb.com> wrote:
>> >
>> >
>> >
>> > On Fri, Dec 21, 2018 at 7:29 PM Dave Page <dpage@pgadmin.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@pgadmin.org> wrote:
>> >> >
>> >> > Hi
>> >> >
>> >> > On Fri, Dec 21, 2018 at 12:29 PM Aditya Toshniwal
>> >> > <aditya.toshniwal@enterprisedb.com> wrote:
>> >> > >
>> >> > > Hi Dave,
>> >> > >
>> >> > > On Fri, Dec 21, 2018 at 5:51 PM Dave Page <dpage@pgadmin.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.vashi@enterprisedb.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