public inbox for [email protected]
help / color / mirror / Atom feedFrom: Aditya Toshniwal <[email protected]>
To: Dave Page <[email protected]>
Cc: Akshay Joshi <[email protected]>
Cc: pgadmin-hackers <[email protected]>
Subject: Re: pgAdmin 4 commit: Improvement in the look and feel of the whole applica
Date: Mon, 7 Jan 2019 10:44:18 +0530
Message-ID: <CAM9w-_=+ONV6MNjDPStk6KsQoYqKQ3OW1U_1Wk7396qDMGgN=g@mail.gmail.com> (raw)
In-Reply-To: <CA+OCxoz419cvzChkxULcK4MvvaE+D=u5GEVjV1u3SYGF9g5+LA@mail.gmail.com>
References: <[email protected]>
<CA+OCxoyp8XjOa0xdiqoohiQ1Bm0fcrruXTWu-Y_mqY5LaGeBoQ@mail.gmail.com>
<CAM9w-_ngsgJxJOJKngc-3W8tqNymKeZjBCuW2_VN-nb4k5du=g@mail.gmail.com>
<CA+OCxoxHWJK+XA6zROKWznJkJf1=adDEoafqCoz9BPnMvmtzAg@mail.gmail.com>
<CA+OCxoyuDXfZR2zNKONy-CWWYbo_xAeLZRVZwVZ=1_gU+4zUAg@mail.gmail.com>
<CAM9w-_mXaptQzE45a3eRfLB5qG0R+qUm6JnAnR4C6rOZ8fiJFw@mail.gmail.com>
<CA+OCxowym3tJZfDkOJkqfsNbaxT=Z=nnxCEQWF4nm+HL5q8_qQ@mail.gmail.com>
<CAM9w-_nXoXLjm4jyJKsZ1vOXJLei7akyrBQMOY+p_jmDzmEmdg@mail.gmail.com>
<CA+OCxow69BHrCT7JcdfVyFwn0JnWEszaMdwxuWaxBddKf=h4mg@mail.gmail.com>
<CAM9w-_myZ=B-Nzt9DGAnvXVQgz3szAbe13cLPC4kSSXbUQXt6w@mail.gmail.com>
<CAM9w-_=sK8X=VXE8mqVY6+McuM=EXwg8_xJ56tf_0pHDvvH7uQ@mail.gmail.com>
<CAM9w-_nkvOB5VTGwLkhDiNUYGF1yho0H6BniUoKFM8vveb3zKg@mail.gmail.com>
<CANxoLDeLe0YKm4hZOpwFX79p+DuR0ocibYkH8WFLtk6XwLNK2w@mail.gmail.com>
<CAM9w-_niKinU7MWXxth4Em9BQc=xDKOwgbApL58viZq2zJ=phw@mail.gmail.com>
<CA+OCxow9Kw-KAL366JBPxZ1p4cRDuMe=DWv7v5AygAcm8v19hQ@mail.gmail.com>
<CAM9w-_k95kK6PHtcgh-eQwH_h6HYV64gbLqdS3Lp7zwWDrw0hA@mail.gmail.com>
<CA+OCxoyBjf2bV+ybc6Cj8759K_FzL+585LKgCo8kersTK+eeHQ@mail.gmail.com>
<CAM9w-_=8Fz0Ly4KuvzED-ayjgqDvVwTsfWuQpFB8YQvcF-TgTQ@mail.gmail.com>
<CA+OCxoz419cvzChkxULcK4MvvaE+D=u5GEVjV1u3SYGF9g5+LA@mail.gmail.com>
Hi Hackers,
Attached is the patch to incorporate the changes discussed in trailing
mail(s).
Kindly review.
On Fri, Jan 4, 2019 at 3:31 PM Dave Page <[email protected]> wrote:
> On Fri, Jan 4, 2019 at 9:58 AM Aditya Toshniwal
> <[email protected]> wrote:
> >
> > Hi,
> >
> > On Fri, Jan 4, 2019 at 2:53 PM Dave Page <[email protected]> wrote:
> >>
> >> Hi
> >>
> >> On Fri, Jan 4, 2019 at 4:51 AM Aditya Toshniwal <
> [email protected]> wrote:
> >>>
> >>> Hi Dave,
> >>>
> >>> On Thu, Jan 3, 2019 at 8:39 PM Dave Page <[email protected]> wrote:
> >>>>
> >>>>
> >>>> A few other things that I noticed (or have been bugging me):
> >>>>
> >>>> - The menu bar seems a little cramped. Taking pg-navbar from 32 to
> 40px and setting the font-weight to normal on the menu options (but not the
> product name) seems much better to me (and adjusting everything else as
> required of course).
> >>>
> >>> Giving too much space for the navbar will reduce the usable space for
> other things. It is good enough(32) to be used easily, and is equal to all
> the other headers in app (including tabs) giving a feel of native desktop
> application. You'll find even smaller menu heights in native desktop
> application. We can make font weight to normal and may be slightly increase
> horizontal spacing between the menu links.
> >>
> >>
> >> 8 pixels isn't going to make a noticeable difference to the workspace
> for users, and would leave the bar smaller than the 50px it's been for the
> last couple of years (iirc). I think it needs it to avoid looking cramped -
> please make the change.
> >
> > Will do.
> > One more doubt regarding bold headers, should I remove bold headers in
> dashboard graph header, subnode headers (eg.table->columns), properties tab
> accrordian headers ?
>
> No, please don't. I left them bold and the styling seemed like it
> worked. We can tweak again if others disagree later.
>
> Thanks!
>
> BTW - Chrome 71 shows the offset headers in the file dialogue as well.
>
> >>>>
> >>>> - In the file dialogue, the column headers don't line up with the
> columns in the rows.
> >>>
> >>> I could not see this on my machine (screenshot attached). Could you
> please share the screenshot.
> >>
> >>
> >> Attached - thanks! This is Chrome 70.0.3538.102 on MacOS.
> >>
> >> --
> >> 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"
Attachments:
[application/octet-stream] RM3692.part4.patch (17.2K, 3-RM3692.part4.patch)
download | inline diff:
diff --git a/web/pgadmin/misc/file_manager/static/css/file_manager.css b/web/pgadmin/misc/file_manager/static/css/file_manager.css
index dd7596b4..571e90e8 100644
--- a/web/pgadmin/misc/file_manager/static/css/file_manager.css
+++ b/web/pgadmin/misc/file_manager/static/css/file_manager.css
@@ -20,20 +20,6 @@
height: 17px;
}
-.fileinfo #contents li p > span.less_text,
-.fileinfo table#contents tr td:first-child p span.less_text {
- width: 100%;
- text-overflow: ellipsis;
- overflow: hidden;
- text-align: center;
- white-space: nowrap;
-}
-
-.fileinfo table#contents tr td p {
- display: inline-block;
- margin-bottom: 0;
-}
-
.fileinfo > h1 {
font-size: 16px;
margin: 100px auto;
@@ -86,7 +72,6 @@ x:-o-prefocus, .file-input-container {top:16px;width:198px;}
}
div.clip {
- width: 30px;
height: 30px;
margin: 10px auto;
overflow: hidden;
diff --git a/web/pgadmin/misc/file_manager/static/js/utility.js b/web/pgadmin/misc/file_manager/static/js/utility.js
index ae6b8b34..5e9eb2f0 100644
--- a/web/pgadmin/misc/file_manager/static/js/utility.js
+++ b/web/pgadmin/misc/file_manager/static/js/utility.js
@@ -533,7 +533,7 @@ define([
var class_type;
if ((data[key]).file_type == 'dir') {
- class_type = 'fa fa-folder-open fm_folder';
+ class_type = 'fa fa-folder-open fm_folder_grid';
} else if ((data[key]).file_type == 'drive') {
class_type = 'fa fa-hdd-o fm_drive';
} else {
@@ -560,9 +560,9 @@ define([
result += '<span>' + fm_filename + '</span>';
} else {
result +=
- '<p><input type="text" class="fm_file_rename" />' +
+ '<div><input type="text" class="fm_file_rename" />' +
'<span class="less_text" title="' + fm_filename + '">' + fm_filename +
- '</span></p>';
+ '</span></div>';
}
if (props.Width && props.Width != '') {
result += '<span class="meta dimensions">' +
@@ -611,7 +611,7 @@ define([
if ((data[key]).file_type == 'dir') {
class_type = 'tbl_folder';
- icon_type = 'fa fa-folder-open';
+ icon_type = 'fa fa-folder-open fm_folder_list';
} else if ((data[key]).file_type == 'drive') {
class_type = 'tbl_drive';
icon_type = 'fa fa-hdd-o';
@@ -639,11 +639,13 @@ define([
result += '<span title="' + (data[key]).Filename + '">' +
fm_filename + '</span></td>';
} else {
- result += '<p><input type="text" class="fm_file_rename"/>'+
+ result += '<div><input type="text" class="fm_file_rename"/>'+
+ '<div class="d-flex">' +
'<span class="'+icon_type+'"></span>' +
data_protected +
'<span class="less_text ml-2" title="' + fm_filename + '">' + fm_filename + '</span>' +
- '</p></td>';
+ '</div>' +
+ '</div></td>';
}
if (props.Size && props.Size != '') {
result += '<td><span title="' + props.Size + '">' +
@@ -698,7 +700,7 @@ define([
if ($('.fileinfo').data('view') == 'grid') {
e.stopPropagation();
- $this = $('.file_manager').find('#contents li.selected p');
+ $this = $('.file_manager').find('#contents li.selected div');
orig_value = decodeURI($this.find('span.less_text').attr('title'));
newvalue = orig_value.substring(0, orig_value.indexOf('.'));
@@ -713,7 +715,7 @@ define([
$('.file_manager').off().on('keyup', function(e) {
if (e.keyCode == 13) {
e.stopPropagation();
- $('.fileinfo #contents li.selected p').find(
+ $('.fileinfo #contents li.selected div').find(
'input'
).trigger('blur');
}
@@ -721,7 +723,7 @@ define([
} else if ($('.fileinfo').data('view') == 'list') {
e.stopPropagation();
$this = $('.fileinfo').find(
- 'table#contents tbody tr.selected td:first-child p'
+ 'table#contents tbody tr.selected td:first-child div'
);
orig_value = decodeURI($this.find('span.less_text').html()),
newvalue = orig_value.substring(0, orig_value.lastIndexOf('.'));
@@ -737,7 +739,7 @@ define([
$('.file_manager').off().on('keyup', function(e) {
if (e.keyCode == 13) {
e.stopPropagation();
- $('.fileinfo table#contents tr.selected td p').find(
+ $('.fileinfo table#contents tr.selected td div').find(
'input'
).trigger('blur');
}
@@ -746,7 +748,7 @@ define([
});
// Rename UI handling
- $('.fileinfo #contents li p').on('blur dblclick', 'input', function(e) {
+ $('.fileinfo #contents li div').on('blur dblclick', 'input', function(e) {
e.stopPropagation();
var old_name = decodeURI($(this).siblings('span').attr('title'));
@@ -824,7 +826,7 @@ define([
}
});
- $('.fileinfo table#contents tr td p').on(
+ $('.fileinfo table#contents tr td div').on(
'blur dblclick', 'input',
function(e) {
var old_name = decodeURI($(this).siblings('span').attr('title')),
@@ -1141,7 +1143,7 @@ define([
select_box = `<div class='change_file_types d-flex align-items-center p-1'>
<div>
- ${gettext('Show hidden files and folders')} ?
+ ${gettext('Show hidden files and folders')}?
<input type='checkbox' id='show_hidden' onclick='pgAdmin.FileUtils.handleClick(this)' tabindex='11'>
</div>
<div class="ml-auto">
@@ -1415,7 +1417,7 @@ define([
// we remove simple file upload element
$('.file-input-container').remove();
$('.upload').remove();
- $('.create').before('<button value="Upload" type="button" title="Upload File" name="upload" id="upload" class="btn fa fa-upload upload" tabindex="6"><span></span></button> ');
+ $('.create').before('<button value="Upload" type="button" title="Upload File" name="upload" id="upload" class="btn btn-sm btn-secondary upload" tabindex="6"><span class="fa fa-upload sql-icon-lg"></span></button> ');
$('#uploader .upload').off().on('click', function() {
// we create prompt
@@ -1579,8 +1581,8 @@ define([
// template for creating new folder
folder_div =
'<li class=\'cap_download cap_delete cap_select_file cap_select_folder cap_rename cap_create cap_upload\'>' +
- '<div class=\'clip\'><span data-alt=\'\' class=\'fa fa-folder-open fm_folder\'></span></div>' +
- '<p><input type=\'text\' class=\'fm_file_rename\'><span title=\'\'>New_Folder</span></p>' +
+ '<div class=\'clip\'><span data-alt=\'\' class=\'fa fa-folder-open fm_folder_grid\'></span></div>' +
+ '<div><input type=\'text\' class=\'fm_file_rename\'><span title=\'\'>New_Folder</span></div>' +
'<span class=\'meta size\'></span><span class=\'meta created\'></span><span class=\'meta modified\'></span></li>';
path = $('.currentpath').val();
@@ -1619,7 +1621,7 @@ define([
'<tr class=\'cap_download cap_delete cap_select_file cap_select_folder cap_rename cap_create cap_upload\'>' +
'<td title=\'\' class=\' tbl_folder\'>' +
'<input type=\'text\' class=\'fm_file_rename\'>'+
- '<span class="fa fa-folder-open"></span>' +
+ '<span class="fa fa-folder-open fm_folder_list"></span>' +
'<span>' + lg.new_folder + '</span>' +
'</td>'+
'<td><span title=\'\'></span></td>' +
diff --git a/web/pgadmin/misc/file_manager/static/scss/_file_manager.scss b/web/pgadmin/misc/file_manager/static/scss/_file_manager.scss
index 404bf6d1..45bcfebb 100644
--- a/web/pgadmin/misc/file_manager/static/scss/_file_manager.scss
+++ b/web/pgadmin/misc/file_manager/static/scss/_file_manager.scss
@@ -40,8 +40,8 @@
.file_listing_table tbody tr td:nth-child(1),
.file_listing_table thead tr th:nth-child(1) {
- width: 100%;
- min-width: 100%;
+ width: 400px;
+ min-width: 400px;
}
.file_listing_table tbody tr td:nth-child(2),
@@ -53,9 +53,9 @@
.file_listing_table tbody tr td:nth-child(3),
.file_listing_table thead tr th:nth-child(3) {
- width: 200px;
- min-width: 200px;
- max-width: 200px;
+ width: 100%;
+ min-width: 100%;
+ max-width: 100%;
}
}
@@ -66,12 +66,39 @@
background: $table-hover-bg-color;
}
-.fileinfo table#contents tr td p {
+.fileinfo table#contents tr td {
font-family: $font-family-primary;
}
-.fm_folder {
+.fileinfo #contents li span.less_text {
+ width: 100%;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ text-align: center;
+ white-space: nowrap;
+ display: block;
+}
+
+.fileinfo table#contents tr td:first-child {
+ & span.less_text {
+ width: 100%;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ max-width: calc(400px - 30px);
+ }
+
+ & .fa {
+ line-height: inherit;
+ }
+}
+
+.fm_folder_grid {
font-size: xx-large !important;
+}
+
+.fm_folder_list,
+.fm_folder_grid {
color: $color-warning;
}
@@ -118,7 +145,7 @@
height: 80px;
text-align: center;
overflow: hidden;
- margin-bottom: 10px;
+ margin: 0.5rem;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
@@ -338,4 +365,4 @@
.cap_select_file {
cursor: pointer;
-}
+}
\ No newline at end of file
diff --git a/web/pgadmin/misc/file_manager/templates/file_manager/index.html b/web/pgadmin/misc/file_manager/templates/file_manager/index.html
index f854545e..86cf6fd6 100644
--- a/web/pgadmin/misc/file_manager/templates/file_manager/index.html
+++ b/web/pgadmin/misc/file_manager/templates/file_manager/index.html
@@ -8,12 +8,13 @@
<div class="flex-grow-1 mr-1">
<div class="input-group" role="group">
<div class="input-group-prepend">
- <button name="home" type="button" value="Home" title="{{ _('Home') }}" class="btn btn-secondary bg-gray-lighter home"
+ <button name="home" type="button" value="Home" title="{{ _('Home') }}" class="btn btn-secondary home"
tabindex="1">
- <span class="fa fa-home fa-lg"></span>
+ <span class="fa fa-home sql-icon-lg"></span>
</button>
- <button name="level-up" type="button" title="{{ _('Back') }}" value="LevelUp" class="btn btn-secondary bg-gray-lighter fa fa-level-up level-up"
+ <button name="level-up" type="button" title="{{ _('Back') }}" value="LevelUp" class="btn btn-secondary level-up"
disabled tabindex="2">
+ <span class="fa fa-level-up sql-icon-lg"></span>
</button>
</div>
<input id="file-input-path" class="form-control input-path text-truncate" title="" type="text" tabindex="3" autofocus/>
@@ -23,32 +24,32 @@
<div>
<input class="mode" name="mode" type="hidden" value="add"/>
<input class="currentpath" name="currentpath" type="hidden"/>
- <button type="button" title="{{ _('Refresh') }}" class="btn btn-sm refresh"
+ <button type="button" title="{{ _('Refresh') }}" class="btn btn-sm btn-secondary refresh"
tabindex="4">
- <span class="fa fa-refresh fa-lg"></span>
+ <span class="fa fa-refresh sql-icon-lg"></span>
</button>
- <button type="button" title="{{ _('Download File') }}" class="btn btn-sm download"
+ <button type="button" title="{{ _('Download File') }}" class="btn btn-sm btn-secondary download"
disabled>
- <span class="fa fa-download fa-lg"></span>
+ <span class="fa fa-download sql-icon-lg"></span>
</button>
- <button name="delete" type="button" title="{{ _('Delete File/Folder') }}" class="btn btn-sm delete"
+ <button name="delete" type="button" title="{{ _('Delete File/Folder') }}" class="btn btn-sm btn-secondary delete"
disabled>
- <span class="fa fa-trash fa-lg"></span>
+ <span class="fa fa-trash sql-icon-lg"></span>
</button>
- <button name="rename" type="button" title="{{ _('Rename File/Folder') }}" class="btn btn-sm rename"
+ <button name="rename" type="button" title="{{ _('Rename File/Folder') }}" class="btn btn-sm btn-secondary rename"
tabindex="5">
- <span class="fa fa-pencil-square-o fa-lg"></span>
+ <span class="fa fa-pencil-square-o sql-icon-lg"></span>
</button>
<button name="newfolder" type="button" title="{{ _('Create new folder') }}" value="New Folder"
- class="btn btn-sm create" tabindex="8">
- <span class="fa fa-folder-open fa-lg"></span>
+ class="btn btn-sm btn-secondary create" tabindex="8">
+ <span class="fa fa-folder-open sql-icon-lg"></span>
</button>
<div class="btn-group" role="group">
<button class="ON btn btn-secondary btn-sm grid" type="button" title="{{ _('View as grid') }}" tabindex="9">
- <span class="fa fa-th fa-lg"></span>
+ <span class="fa fa-th sql-icon-lg"></span>
</button>
<button type="button" class="btn btn-secondary btn-sm list" title="{{ _('View as table') }}" tabindex="10">
- <span class="fa fa-list fa-lg"></span>
+ <span class="fa fa-list sql-icon-lg"></span>
</button>
</div>
</div>
diff --git a/web/pgadmin/static/scss/_bootstrap.overrides.scss b/web/pgadmin/static/scss/_bootstrap.overrides.scss
index 8ab15ad5..febe7ad7 100644
--- a/web/pgadmin/static/scss/_bootstrap.overrides.scss
+++ b/web/pgadmin/static/scss/_bootstrap.overrides.scss
@@ -266,7 +266,6 @@ td.switch-cell > div.bootstrap-switch {
border: none !important;
padding: $tabs-padding;
color: $color-fg-theme;
- font-weight: bold;
&.active {
border-bottom: $active-border !important;
color: $color-primary;
@@ -290,10 +289,11 @@ td.switch-cell > div.bootstrap-switch {
margin-right: 0rem;
padding-left: 0.5rem !important;
padding-right: 1rem !important;
- min-height: $title-height;
+ min-height: $navbar-height;
padding: 0rem;
display: flex;
align-items: center !important;
+ font-weight: bold;
}
.navbar-brand:hover {
diff --git a/web/pgadmin/static/scss/_codemirror.overrides.scss b/web/pgadmin/static/scss/_codemirror.overrides.scss
index 70747ced..f2222017 100644
--- a/web/pgadmin/static/scss/_codemirror.overrides.scss
+++ b/web/pgadmin/static/scss/_codemirror.overrides.scss
@@ -9,6 +9,7 @@
.CodeMirror {
font-size: 1em;
+ font-family: monospace, monospace;
}
/* Ensure the codemirror editor displays full height gutters when resized */
diff --git a/web/pgadmin/static/scss/_pgadmin.style.scss b/web/pgadmin/static/scss/_pgadmin.style.scss
index 3e131848..1ad4b91f 100644
--- a/web/pgadmin/static/scss/_pgadmin.style.scss
+++ b/web/pgadmin/static/scss/_pgadmin.style.scss
@@ -145,17 +145,16 @@
@media (min-width: 768px) {
.pg-navbar {
- height: $title-height;
+ height: $navbar-height;
}
.pg-docker {
- top: $title-height !important;
+ top: $navbar-height !important;
}
}
.pg-navbar {
font-size: $navbar-font-size;
- font-weight: bold;
padding-left: 0rem;
padding-right: 0.5rem;
& .nav-item .nav-link{
@@ -163,7 +162,7 @@
}
.pg-navbar-brand-arrow {
- border: $title-height/2 solid $color-fg;
+ border: $navbar-height/2 solid $color-fg;
border-right-color: transparent;
border-bottom-color: transparent;
border-top-color: transparent;
diff --git a/web/pgadmin/static/scss/_webcabin.pgadmin.scss b/web/pgadmin/static/scss/_webcabin.pgadmin.scss
index 79f68ecc..55e35628 100644
--- a/web/pgadmin/static/scss/_webcabin.pgadmin.scss
+++ b/web/pgadmin/static/scss/_webcabin.pgadmin.scss
@@ -79,7 +79,6 @@
color: $color-fg-theme;
padding: $tabs-padding;
margin: 0px;
- font-weight: bold;
}
.wcFloating {
diff --git a/web/pgadmin/static/scss/resources/_default.variables.scss b/web/pgadmin/static/scss/resources/_default.variables.scss
index 060e915f..1a263784 100644
--- a/web/pgadmin/static/scss/resources/_default.variables.scss
+++ b/web/pgadmin/static/scss/resources/_default.variables.scss
@@ -155,7 +155,8 @@ $footer-height-calc: $footer-min-height+$footer-padding*2;
$navbar-font-size: 0.925rem;
$navbar-user-font-size: 0.875rem;
-$navbar-dropdown-top: 100%;
+$navbar-height: 40px;
+$navbar-dropdown-top: 110%;
$dropdown-submenu-top: -$dropdown-spacer;
$table-bg: $color-bg-theme;
view thread (29+ 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], [email protected], [email protected]
Subject: Re: pgAdmin 4 commit: Improvement in the look and feel of the whole applica
In-Reply-To: <CAM9w-_=+ONV6MNjDPStk6KsQoYqKQ3OW1U_1Wk7396qDMGgN=g@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