Icon and toolbar cleanup/consistency.

pull/3/head
Dave Page 2016-04-15 13:29:57 +01:00
parent 58fcbd943a
commit 4d7d3bd5e1
9 changed files with 70 additions and 49 deletions

View File

@ -7,7 +7,7 @@ function(_, pgAdmin) {
pgAdmin.Browser.Frame = function(options) {
var defaults = [
'name', 'title', 'width', 'height', 'showTitle', 'isCloseable',
'isPrivate', 'url'];
'isPrivate', 'url', 'icon'];
_.extend(this, _.pick(options, defaults));
}
@ -20,6 +20,7 @@ function(_, pgAdmin) {
isClosable: true,
isPrivate: false,
url: '',
icon: '',
panel: null,
frame: null,
load: function(docker) {
@ -31,8 +32,12 @@ function(_, pgAdmin) {
onCreate: function(myPanel) {
$(myPanel).data('pgAdminName', that.name);
myPanel.initSize(that.width, that.height);
if (myPanel.showTitle == false)
myPanel.title(false);
myPanel.icon(that.icon)
myPanel.closeable(!!that.isCloseable);
var $frameArea = $('<div style="width:100%;height:100%;position:relative;display:table">');

View File

@ -7,7 +7,7 @@ function(_, pgAdmin) {
pgAdmin.Browser.Panel = function(options) {
var defaults = [
'name', 'title', 'width', 'height', 'showTitle', 'isCloseable',
'isPrivate', 'content', 'events'];
'isPrivate', 'content', 'icon', 'events'];
_.extend(this, _.pick(options, defaults));
}
@ -20,6 +20,7 @@ function(_, pgAdmin) {
isCloseable: true,
isPrivate: false,
content: '',
icon: '',
panel: null,
load: function(docker, title) {
var that = this;
@ -30,10 +31,15 @@ function(_, pgAdmin) {
onCreate: function(myPanel) {
$(myPanel).data('pgAdminName', that.name);
myPanel.initSize(that.width, that.height);
if (!that.showTitle)
myPanel.title(false);
else
else {
myPanel.title(title || that.title);
if (that.icon != '')
myPanel.icon(that.icon)
}
myPanel.closeable(!!that.isCloseable);
myPanel.layout().addItem(
$('<div>', {

View File

@ -64,6 +64,7 @@ function(require, $, _, S, Bootstrap, pgAdmin, alertify, CodeMirror) {
'properties': new pgAdmin.Browser.Panel({
name: 'properties',
title: '{{ _('Properties') }}',
icon: 'fa fa-cogs',
width: 500,
isCloseable: false,
isPrivate: true,
@ -74,6 +75,7 @@ function(require, $, _, S, Bootstrap, pgAdmin, alertify, CodeMirror) {
'statistics': new pgAdmin.Browser.Panel({
name: 'statistics',
title: '{{ _('Statistics') }}',
icon: 'fa fa-line-chart',
width: 500,
isCloseable: false,
isPrivate: true,
@ -84,6 +86,7 @@ function(require, $, _, S, Bootstrap, pgAdmin, alertify, CodeMirror) {
'sql': new pgAdmin.Browser.Panel({
name: 'sql',
title: '{{ _('SQL') }}',
icon: 'fa fa-file-text-o',
width: 500,
isCloseable: false,
isPrivate: true,
@ -93,6 +96,7 @@ function(require, $, _, S, Bootstrap, pgAdmin, alertify, CodeMirror) {
'dependencies': new pgAdmin.Browser.Panel({
name: 'dependencies',
title: '{{ _('Dependencies') }}',
icon: 'fa fa-hand-o-up',
width: 500,
isCloseable: false,
isPrivate: true,
@ -103,6 +107,7 @@ function(require, $, _, S, Bootstrap, pgAdmin, alertify, CodeMirror) {
'dependents': new pgAdmin.Browser.Panel({
name: 'dependents',
title: '{{ _('Dependents') }}',
icon: 'fa fa-hand-o-down',
width: 500,
isCloseable: false,
isPrivate: true,
@ -111,6 +116,7 @@ function(require, $, _, S, Bootstrap, pgAdmin, alertify, CodeMirror) {
})/* Add hooked-in panels by extensions */{% for panel_item in current_app.panels %}{% if not panel_item.isIframe %},'{{ panel_item.name }}' : new pgAdmin.Browser.Panel({
name: '{{ panel_item.name }}',
title: '{{ panel_item.title }}',
icon: '{{ panel_item.icon }}',
width: {{ panel_item.width }},
height: {{ panel_item.height }},
showTitle: {% if panel_item.showTitle %}true{% else %}false{% endif %},
@ -126,6 +132,7 @@ function(require, $, _, S, Bootstrap, pgAdmin, alertify, CodeMirror) {
'dashboard': new pgAdmin.Browser.Frame({
name: 'dashboard',
title: '{{ _('Dashboard') }}',
icon: 'fa fa-tachometer',
width: 500,
isCloseable: false,
isPrivate: true,
@ -134,6 +141,7 @@ function(require, $, _, S, Bootstrap, pgAdmin, alertify, CodeMirror) {
'{{ panel_item.name }}' : new pgAdmin.Browser.Frame({
name: '{{ panel_item.name }}',
title: '{{ panel_item.title }}',
icon: '{{ panel_item.icon }}',
width: {{ panel_item.width }},
height: {{ panel_item.height }},
showTitle: {% if panel_item.showTitle %}true{% else %}false{% endif %},

View File

@ -670,12 +670,6 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, pgBrowser, Backform) {
// Create a view to show the properties in fieldsets
view = that.getView(item, 'properties', content, data, 'fieldset');
if (view) {
panel.icon(
_.isFunction(that['node_image']) ?
(that['node_image']).apply(that, [data, view.model]) :
(that['node_image'] || ('icon-' + that.type))
);
// Save it for release it later
j.data('obj-view', view);
@ -701,7 +695,7 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, pgBrowser, Backform) {
label: '', type: 'help',
tooltip: '{{ _("Help on the SQL for this object type") }}',
extraClasses: ['btn-default'],
icon: 'fa fa-lg fa-question-circle',
icon: 'fa fa-lg fa-info',
disabled: (that.sqlAlterHelp == '' && that.sqlCreateHelp == '') ? true : false,
register: function(btn) {
btn.click(function() {
@ -755,11 +749,7 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, pgBrowser, Backform) {
// Update the panel
iframe = $(pnlSqlHelp).data('embeddedFrame');
pnlSqlHelp.title('SQL: ' + that.label);
pnlSqlHelp.icon(
_.isFunction(that['node_image']) ?
(that['node_image']).apply(that, [data, view.model]) :
(that['node_image'] || ('icon-' + that.type))
);
pnlSqlHelp.focus();
iframe.openURL(url);
}.bind(panel),
@ -828,9 +818,9 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, pgBrowser, Backform) {
// Create proper buttons
createButtons([{
label: '', type: 'help',
tooltip: '{{ _("Help on the SQL for this object type") }}',
tooltip: '{{ _("SQL info for this object type") }}',
extraClasses: ['btn-default'],
icon: 'fa fa-lg fa-question-circle',
icon: 'fa fa-lg fa-info',
disabled: that.sqlCreateHelp == '' ? true : false,
register: function(btn) {
btn.click(function() {

View File

@ -28,18 +28,21 @@ class HelpModule(PgAdminModule):
label=gettext('Online Help'),
priority=100,
target='_blank',
icon='fa fa-question',
url=url_for('help.static', filename='index.html')),
MenuItem(name='mnu_pgadmin_website',
label= gettext('pgAdmin Website'),
priority= 200,
target= '_blank',
icon='fa fa-external-link',
url= 'http://www.pgadmin.org/' ),
MenuItem(name= 'mnu_postgresql_website',
label= gettext('PostgreSQL Website'),
priority= 300,
target= '_blank',
icon='fa fa-external-link',
url= 'http://www.postgresql.org/' )]}
def get_panels(self):
@ -48,21 +51,25 @@ class HelpModule(PgAdminModule):
name='pnl_online_help',
priority=100,
title=gettext('Online Help'),
icon='fa fa-question',
content=url_for('help.static', filename='index.html')),
Panel(name='pnl_pgadmin_website',
priority=200,
title=gettext('pgAdmin Website'),
icon='fa fa-external-link',
content='http://www.pgadmin.org/'),
Panel(name='pnl_postgresql_website',
priority=300,
title=gettext('PostgreSQL Website'),
icon='fa fa-external-link',
content='http://www.postgresql.org/'),
Panel(name='pnl_sql_help',
priority=400,
isPrivate=True,
icon='fa fa-info',
title=gettext('SQL Help'))]
def register_preferences(self):

View File

@ -788,6 +788,36 @@ div.inline-tab-panel > ul.tab-content > div.tab-pane > *:last-child {
padding: 3px 3px;
}
.pg-prop-btn-group > .btn {
min-width: 40px;
}
.pg-prop-btn-group > .btn-group > .btn {
min-width: 40px;
}
.pg-prop-btn-group > .btn-group > .btn + .dropdown-toggle {
min-width: 20px;
}
.pg-prop-btn-group button.dropdown-toggle {
padding-left: 5px !important;
padding-right: 5px !important;
}
.pg-prop-btn-group .dropdown-menu {
min-width: initial;
}
.pg-prop-btn-group .backgrid-filter.form-search {
position: relative;
width: 248px;
height: 30px;
float: right;
margin-top: 2px;
margin-right: 10px;
}
td.edit-cell.editable.sortable.renderable.editor {
outline: 0px;
}

View File

@ -254,6 +254,7 @@
text-align: center;
padding-left: 20px;
margin-top: -5px;
margin-right: 5px;
}
.wcFrameTitleBar {
@ -324,3 +325,7 @@ ul.dropdown-menu > li.menu-item > a > i.wcTabIcon {
span.fa.fa-arrow-left, .fa-arrow-right {
margin-top: 4px;
}
.wcMenuSubMenu {
visibility: hidden;
}

View File

@ -53,36 +53,6 @@
font-size: 13px;
}
.sql-editor-btn-group {
background-color: #D2D2D2;
border: 2px solid #A9A9A9;
left: 0px;
right: 0px;
padding: 2px;
}
.sql-editor-btn-group button {
padding: 5px;
}
.sql-editor-btn-group button.dropdown-toggle {
padding-left: 5px !important;
padding-right: 5px !important;
}
.sql-editor-btn-group .dropdown-menu {
min-width: initial;
}
.sql-editor-btn-group .backgrid-filter.form-search {
position: relative;
width: 248px;
height: 30px;
float: right;
margin-top: 2px;
margin-right: 10px;
}
#output-panel .wcDocker {
top: 0px;
bottom: 0px;

View File

@ -166,7 +166,7 @@ define(
* the backgrid inside this div.
*/
template: _.template([
'<div id="btn-toolbar" class="sql-editor-btn-group" role="toolbar" aria-label="">',
'<div id="btn-toolbar" class="pg-prop-btn-group" role="toolbar" aria-label="">',
'<div class="btn-group" role="group" aria-label="">',
'<button id="btn-save" type="button" class="btn btn-default" title="{{ _('Save') }}" disabled>',
'<i class="fa fa-floppy-o" aria-hidden="true"></i>',
@ -468,7 +468,7 @@ define(
self.$el.find('#datagrid-paginator').append(paginator.render().el);
// Render the client side filter
self.$el.find('.sql-editor-btn-group').append(clientSideFilter.render().el);
self.$el.find('.pg-prop-btn-group').append(clientSideFilter.render().el);
// Forcefully sorting by the first column.
if (columns.length > 1) {