Further style tweaks.

This commit is contained in:
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

View File

@ -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;

View File

@ -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>' +

View File

@ -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;
}
}

View File

@ -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>

View File

@ -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 {

View File

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

View File

@ -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;

View File

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

View File

@ -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;