pgadmin-org
/
pgadmin4
mirror of https://github.com/pgadmin-org/pgadmin4.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Further style tweaks.

pull/19/head
Aditya Toshniwal 2019-01-07 14:24:44 +05:30 committed by Dave Page
parent c5d49bd862
commit e9ba2e036a
9 changed files with 79 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/pgadmin/misc/file_manager/static/css/file_manager.css
View File

@ -20,20 +20,6 @@
height: 17px; 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 { .fileinfo > h1 {
font-size: 16px; font-size: 16px;
margin: 100px auto; margin: 100px auto;
@ -86,7 +72,6 @@ x:-o-prefocus, .file-input-container {top:16px;width:198px;}
} }
div.clip { div.clip {
width: 30px;
height: 30px; height: 30px;
margin: 10px auto; margin: 10px auto;
overflow: hidden; overflow: hidden;

36
web/pgadmin/misc/file_manager/static/js/utility.js
View File

@ -533,7 +533,7 @@ define([
var class_type; var class_type;
if ((data[key]).file_type == 'dir') { 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') { } else if ((data[key]).file_type == 'drive') {
class_type = 'fa fa-hdd-o fm_drive'; class_type = 'fa fa-hdd-o fm_drive';
} else { } else {
@ -560,9 +560,9 @@ define([
result += '<span>' + fm_filename + '</span>'; result += '<span>' + fm_filename + '</span>';
} else { } else {
result += 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 class="less_text" title="' + fm_filename + '">' + fm_filename +
'</span></p>'; '</span></div>';
} }
if (props.Width && props.Width != '') { if (props.Width && props.Width != '') {
result += '<span class="meta dimensions">' + result += '<span class="meta dimensions">' +
@ -611,7 +611,7 @@ define([
if ((data[key]).file_type == 'dir') { if ((data[key]).file_type == 'dir') {
class_type = 'tbl_folder'; 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') { } else if ((data[key]).file_type == 'drive') {
class_type = 'tbl_drive'; class_type = 'tbl_drive';
icon_type = 'fa fa-hdd-o'; icon_type = 'fa fa-hdd-o';
@ -639,11 +639,13 @@ define([
result += '<span title="' + (data[key]).Filename + '">' + result += '<span title="' + (data[key]).Filename + '">' +
fm_filename + '</span></td>'; fm_filename + '</span></td>';
} else { } 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>' + '<span class="'+icon_type+'"></span>' +
data_protected + data_protected +
'<span class="less_text ml-2" title="' + fm_filename + '">' + fm_filename + '</span>' + '<span class="less_text ml-2" title="' + fm_filename + '">' + fm_filename + '</span>' +
'</p></td>'; '</div>' +
'</div></td>';
} }
if (props.Size && props.Size != '') { if (props.Size && props.Size != '') {
result += '<td><span title="' + props.Size + '">' + result += '<td><span title="' + props.Size + '">' +
@ -698,7 +700,7 @@ define([
if ($('.fileinfo').data('view') == 'grid') { if ($('.fileinfo').data('view') == 'grid') {
e.stopPropagation(); 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')); orig_value = decodeURI($this.find('span.less_text').attr('title'));
newvalue = orig_value.substring(0, orig_value.indexOf('.')); newvalue = orig_value.substring(0, orig_value.indexOf('.'));
@ -713,7 +715,7 @@ define([
$('.file_manager').off().on('keyup', function(e) { $('.file_manager').off().on('keyup', function(e) {
if (e.keyCode == 13) { if (e.keyCode == 13) {
e.stopPropagation(); e.stopPropagation();
$('.fileinfo #contents li.selected p').find( $('.fileinfo #contents li.selected div').find(
'input' 'input'
).trigger('blur'); ).trigger('blur');
} }
@ -721,7 +723,7 @@ define([
} else if ($('.fileinfo').data('view') == 'list') { } else if ($('.fileinfo').data('view') == 'list') {
e.stopPropagation(); e.stopPropagation();
$this = $('.fileinfo').find( $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()), orig_value = decodeURI($this.find('span.less_text').html()),
newvalue = orig_value.substring(0, orig_value.lastIndexOf('.')); newvalue = orig_value.substring(0, orig_value.lastIndexOf('.'));
@ -737,7 +739,7 @@ define([
$('.file_manager').off().on('keyup', function(e) { $('.file_manager').off().on('keyup', function(e) {
if (e.keyCode == 13) { if (e.keyCode == 13) {
e.stopPropagation(); e.stopPropagation();
$('.fileinfo table#contents tr.selected td p').find( $('.fileinfo table#contents tr.selected td div').find(
'input' 'input'
).trigger('blur'); ).trigger('blur');
} }
@ -746,7 +748,7 @@ define([
}); });
// Rename UI handling // 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(); e.stopPropagation();
var old_name = decodeURI($(this).siblings('span').attr('title')); 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', 'blur dblclick', 'input',
function(e) { function(e) {
var old_name = decodeURI($(this).siblings('span').attr('title')), 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'> select_box = `<div class='change_file_types d-flex align-items-center p-1'>
<div> <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'> <input type='checkbox' id='show_hidden' onclick='pgAdmin.FileUtils.handleClick(this)' tabindex='11'>
</div> </div>
<div class="ml-auto"> <div class="ml-auto">
@ -1415,7 +1417,7 @@ define([
// we remove simple file upload element // we remove simple file upload element
$('.file-input-container').remove(); $('.file-input-container').remove();
$('.upload').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() { $('#uploader .upload').off().on('click', function() {
// we create prompt // we create prompt
@ -1579,8 +1581,8 @@ define([
// template for creating new folder // template for creating new folder
folder_div = folder_div =
'<li class=\'cap_download cap_delete cap_select_file cap_select_folder cap_rename cap_create cap_upload\'>' + '<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>' + '<div class=\'clip\'><span data-alt=\'\' class=\'fa fa-folder-open fm_folder_grid\'></span></div>' +
'<p><input type=\'text\' class=\'fm_file_rename\'><span title=\'\'>New_Folder</span></p>' + '<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>'; '<span class=\'meta size\'></span><span class=\'meta created\'></span><span class=\'meta modified\'></span></li>';
path = $('.currentpath').val(); 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\'>' + '<tr class=\'cap_download cap_delete cap_select_file cap_select_folder cap_rename cap_create cap_upload\'>' +
'<td title=\'\' class=\' tbl_folder\'>' + '<td title=\'\' class=\' tbl_folder\'>' +
'<input type=\'text\' class=\'fm_file_rename\'>'+ '<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>' + '<span>' + lg.new_folder + '</span>' +
'</td>'+ '</td>'+
'<td><span title=\'\'></span></td>' + '<td><span title=\'\'></span></td>' +

45
web/pgadmin/misc/file_manager/static/scss/_file_manager.scss
View File

@ -40,8 +40,8 @@
.file_listing_table tbody tr td:nth-child(1), .file_listing_table tbody tr td:nth-child(1),
.file_listing_table thead tr th:nth-child(1) { .file_listing_table thead tr th:nth-child(1) {
width: 100%; width: 400px;
min-width: 100%; min-width: 400px;
} }
.file_listing_table tbody tr td:nth-child(2), .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 tbody tr td:nth-child(3),
.file_listing_table thead tr th:nth-child(3) { .file_listing_table thead tr th:nth-child(3) {
width: 200px; width: 100%;
min-width: 200px; min-width: 100%;
max-width: 200px; max-width: 100%;
} }
} }
@ -66,12 +66,39 @@
background: $table-hover-bg-color; background: $table-hover-bg-color;
} }
.fileinfo table#contents tr td p { .fileinfo table#contents tr td {
font-family: $font-family-primary; 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; font-size: xx-large !important;
}
.fm_folder_list,
.fm_folder_grid {
color: $color-warning; color: $color-warning;
} }
@ -118,7 +145,7 @@
height: 80px; height: 80px;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
margin-bottom: 10px; margin: 0.5rem;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
@ -338,4 +365,4 @@
.cap_select_file { .cap_select_file {
cursor: pointer; cursor: pointer;
} }

31
web/pgadmin/misc/file_manager/templates/file_manager/index.html
View File

@ -8,12 +8,13 @@
<div class="flex-grow-1 mr-1"> <div class="flex-grow-1 mr-1">
<div class="input-group" role="group"> <div class="input-group" role="group">
<div class="input-group-prepend"> <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"> tabindex="1">
<span class="fa fa-home fa-lg"></span> <span class="fa fa-home sql-icon-lg"></span>
</button> </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"> disabled tabindex="2">
<span class="fa fa-level-up sql-icon-lg"></span>
</button> </button>
</div> </div>
<input id="file-input-path" class="form-control input-path text-truncate" title="" type="text" tabindex="3" autofocus/> <input id="file-input-path" class="form-control input-path text-truncate" title="" type="text" tabindex="3" autofocus/>
@ -23,32 +24,32 @@
<div> <div>
<input class="mode" name="mode" type="hidden" value="add"/> <input class="mode" name="mode" type="hidden" value="add"/>
<input class="currentpath" name="currentpath" type="hidden"/> <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"> tabindex="4">
<span class="fa fa-refresh fa-lg"></span> <span class="fa fa-refresh sql-icon-lg"></span>
</button> </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> disabled>
<span class="fa fa-download fa-lg"></span> <span class="fa fa-download sql-icon-lg"></span>
</button> </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> disabled>
<span class="fa fa-trash fa-lg"></span> <span class="fa fa-trash sql-icon-lg"></span>
</button> </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"> 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>
<button name="newfolder" type="button" title="{{ _('Create new folder') }}" value="New Folder" <button name="newfolder" type="button" title="{{ _('Create new folder') }}" value="New Folder"
class="btn btn-sm create" tabindex="8"> class="btn btn-sm btn-secondary create" tabindex="8">
<span class="fa fa-folder-open fa-lg"></span> <span class="fa fa-folder-open sql-icon-lg"></span>
</button> </button>
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<button class="ON btn btn-secondary btn-sm grid" type="button" title="{{ _('View as grid') }}" tabindex="9"> <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>
<button type="button" class="btn btn-secondary btn-sm list" title="{{ _('View as table') }}" tabindex="10"> <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> </button>
</div> </div>
</div> </div>

4
web/pgadmin/static/scss/_bootstrap.overrides.scss
View File

@ -266,7 +266,6 @@ td.switch-cell > div.bootstrap-switch {
border: none !important; border: none !important;
padding: $tabs-padding; padding: $tabs-padding;
color: $color-fg-theme; color: $color-fg-theme;
font-weight: bold;
&.active { &.active {
border-bottom: $active-border !important; border-bottom: $active-border !important;
color: $color-primary; color: $color-primary;
@ -290,10 +289,11 @@ td.switch-cell > div.bootstrap-switch {
margin-right: 0rem; margin-right: 0rem;
padding-left: 0.5rem !important; padding-left: 0.5rem !important;
padding-right: 1rem !important; padding-right: 1rem !important;
min-height: $title-height; min-height: $navbar-height;
padding: 0rem; padding: 0rem;
display: flex; display: flex;
align-items: center !important; align-items: center !important;
font-weight: bold;
} }
.navbar-brand:hover { .navbar-brand:hover {

1
web/pgadmin/static/scss/_codemirror.overrides.scss
View File

@ -9,6 +9,7 @@
.CodeMirror { .CodeMirror {
font-size: 1em; font-size: 1em;
font-family: monospace, monospace;
} }
/* Ensure the codemirror editor displays full height gutters when resized */ /* Ensure the codemirror editor displays full height gutters when resized */

7
web/pgadmin/static/scss/_pgadmin.style.scss
View File

@ -145,17 +145,16 @@
@media (min-width: 768px) { @media (min-width: 768px) {
.pg-navbar { .pg-navbar {
height: $title-height; height: $navbar-height;
} }
.pg-docker { .pg-docker {
top: $title-height !important; top: $navbar-height !important;
} }
} }
.pg-navbar { .pg-navbar {
font-size: $navbar-font-size; font-size: $navbar-font-size;
font-weight: bold;
padding-left: 0rem; padding-left: 0rem;
padding-right: 0.5rem; padding-right: 0.5rem;
& .nav-item .nav-link{ & .nav-item .nav-link{
@ -163,7 +162,7 @@
} }
.pg-navbar-brand-arrow { .pg-navbar-brand-arrow {
border: $title-height/2 solid $color-fg; border: $navbar-height/2 solid $color-fg;
border-right-color: transparent; border-right-color: transparent;
border-bottom-color: transparent; border-bottom-color: transparent;
border-top-color: transparent; border-top-color: transparent;

1
web/pgadmin/static/scss/_webcabin.pgadmin.scss
View File

@ -79,7 +79,6 @@
color: $color-fg-theme; color: $color-fg-theme;
padding: $tabs-padding; padding: $tabs-padding;
margin: 0px; margin: 0px;
font-weight: bold;
} }
.wcFloating { .wcFloating {

3
web/pgadmin/static/scss/resources/_default.variables.scss
View File

@ -155,7 +155,8 @@ $footer-height-calc: $footer-min-height+$footer-padding*2;
$navbar-font-size: 0.925rem; $navbar-font-size: 0.925rem;
$navbar-user-font-size: 0.875rem; $navbar-user-font-size: 0.875rem;
$navbar-dropdown-top: 100%; $navbar-height: 40px;
$navbar-dropdown-top: 110%;
$dropdown-submenu-top: -$dropdown-spacer; $dropdown-submenu-top: -$dropdown-spacer;
$table-bg: $color-bg-theme; $table-bg: $color-bg-theme;