Cleanup styling of wcDocker tab control buttons.

This commit is contained in:
Arun Kollan 2016-04-07 13:40:16 +01:00 committed by Dave Page
parent ca277bc8b6
commit 22841f8664
5 changed files with 128 additions and 77 deletions

View File

@ -300,24 +300,21 @@ iframe {
} }
.obj_properties fieldset > .fieldset-content { .obj_properties fieldset > .fieldset-content {
border-radius:5px; border-radius:5px;
padding: 5px 10px; padding: 5px 10px;
width: 99.8%; border-color: #92AFC8;
margin: 0 0.1%; border-width: 2px;
border-color: #92AFC8; border-style: ridge;
border-width: 2px;
border-style: ridge;
background-color: ##D7D8DD;
} }
.obj_properties .badge { .obj_properties .badge {
display: block; display: block;
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
margin-bottom: 1px; margin-bottom: 1px;
background-color: #2C76B4; background-color: #2C76B4;
border-radius:5px; border-radius:5px;
padding: 5px 7px; padding: 5px 7px;
} }
.obj_properties .badge .caret { .obj_properties .badge .caret {
@ -343,9 +340,7 @@ iframe {
} }
.obj_properties table { .obj_properties table {
display: table !important; display: table !important;
width: 98%;
margin: 0.8%;
} }
.obj_properties table tr { .obj_properties table tr {
@ -384,8 +379,8 @@ iframe {
} }
.pg-prop-btn-group button { .pg-prop-btn-group button {
padding: 5px; padding: 5px;
margin: 2px 5px; margin: 2px 5px;
} }
.pg-prop-btn-group button:not(:first-child):not(:last-child) { .pg-prop-btn-group button:not(:first-child):not(:last-child) {
@ -395,8 +390,6 @@ iframe {
.pg-prop-content { .pg-prop-content {
position: absolute; position: absolute;
overflow: auto; overflow: auto;
top: 3px;
bottom: 0;
padding-bottom: 7px; padding-bottom: 7px;
padding-top: 0; padding-top: 0;
padding-right: 0; padding-right: 0;
@ -408,7 +401,7 @@ iframe {
} }
.has-pg-prop-btn-group { .has-pg-prop-btn-group {
top: 43px; top: 48px;
} }
.pg-prop-content > div { .pg-prop-content > div {
@ -476,8 +469,8 @@ fieldset[disabled] .form-control {
} }
.backgrid th, .backgrid td { .backgrid th, .backgrid td {
line-height: 18px; line-height: 18px;
font-size: 12px; font-size: 12px;
} }
.backgrid th { .backgrid th {
@ -727,74 +720,69 @@ div.inline-tab-panel > ul.nav-tabs > li > a,
div.inline-tab-panel > ul.nav-tabs > li > a:active, div.inline-tab-panel > ul.nav-tabs > li > a:active,
div.inline-tab-panel > ul.nav-tabs > li > a:hover, div.inline-tab-panel > ul.nav-tabs > li > a:hover,
div.inline-tab-panel > ul.nav-tabs > li > a:focus { div.inline-tab-panel > ul.nav-tabs > li > a:focus {
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-top-right-radius: 5px; border-top-right-radius: 5px;
} }
div.inline-tab-panel > ul.nav-tabs > li:first-child > a, div.inline-tab-panel > ul.nav-tabs > li:first-child > a,
div.inline-tab-panel > ul.nav-tabs > li:first-child > a:active, div.inline-tab-panel > ul.nav-tabs > li:first-child > a:active,
div.inline-tab-panel > ul.nav-tabs > li:first-child > a:hover, div.inline-tab-panel > ul.nav-tabs > li:first-child > a:hover,
div.inline-tab-panel > ul.nav-tabs > li:first-child > a:focus { div.inline-tab-panel > ul.nav-tabs > li:first-child > a:focus {
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-top-right-radius: 5px; border-top-right-radius: 5px;
margin-left: 1px; margin-left: 1px;
} }
div.inline-tab-panel > ul.tab-content { div.inline-tab-panel > ul.tab-content {
padding-left: 5px; padding-right: 5px; border-color: #DDD; padding-left: 5px; padding-right: 5px; border-color: #DDD;
border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
border-width: 0px 1px 1px 1px; border-bottom-right-radius: 5px; border-width: 0px 1px 1px 1px; border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px; border-style: solid solid; border-bottom-left-radius: 5px; border-style: solid solid;
} }
div.inline-tab-panel > ul.tab-content > div.tab-pane { div.inline-tab-panel > ul.tab-content > div.tab-pane {
min-height: 150px; padding: 0px !important; min-height: 150px; padding: 0px !important;
} }
div.inline-tab-panel > ul.tab-content > div.tab-pane > *:first-child { div.inline-tab-panel > ul.tab-content > div.tab-pane > *:first-child {
margin-top: 5px; margin-top: 5px;
} }
div.inline-tab-panel > ul.tab-content > div.tab-pane > *:last-child { div.inline-tab-panel > ul.tab-content > div.tab-pane > *:last-child {
margin-bottom: 5px; margin-bottom: 5px;
} }
.pgadmin-control-error-message
{ .pgadmin-control-error-message{
padding-left: 4px; padding-left: 4px;
} }
.btn-group-sm>.btn, .btn-sm
{ .btn-group-sm>.btn, .btn-sm{
font-size: 11px; font-size: 11px;
padding: 3px 3px; padding: 3px 3px;
} }
td.edit-cell.editable.sortable.renderable.editor { td.edit-cell.editable.sortable.renderable.editor {
outline: 0px; outline: 0px;
} }
.privilege_label .privilege_label{
{ font-size: 10px!important;
font-size: 10px!important;
}
.backgrid th, .backgrid td
{
padding: 2px;
font-weight: normal!important;
}
.pg-panel-depends-container > table > thead > tr > th {
padding: 2px;
} }
.backgrid th:first-child , .backgrid th:last-child{ .backgrid th, .backgrid td{
border-left-color: #2C76B4; padding: 2px;
font-weight: normal!important;
} }
.backgrid th:last-child{ .subnode > table.backgrid > thead > tr > th:first-child{
border-right-color: #2C76B4; border-left-color: #2C76B4;
} }
.select2-container .select2-selection--single .select2-selection__rendered
{ .subnode > table.backgrid > thead > tr > th:last-child{
padding-left: 3px; border-right-color: #2C76B4;
}
.select2-container .select2-selection--single .select2-selection__rendered{
padding-left: 5px;
} }
/* Message panel shown on browser tabs */ /* Message panel shown on browser tabs */
@ -908,6 +896,23 @@ ul.nav.nav-tabs {
padding-top: 4px; padding-top: 4px;
} }
.btn-primary{ .pg-panel-depends-container >table.backgrid.table-bordered {
margin: 2px 13px !important; border: 0px;
} }
.pg-panel-depends-container > table > thead > tr > th {
padding: 2px;
border: 1px solid #ddd;
}
.pg-panel-depends-container > table > thead > tr > th:first-child {
border-left: 0px;
}
.pg-panel-depends-container > table > thead > tr > th:last-child {
border-right: 0px;
}
.btn-primary{
margin: 2px 13px !important;
}

View File

@ -37,15 +37,24 @@
.wcFrameButton { .wcFrameButton {
width: 20px; width: 20px;
height: 20px; height: 20px;
border: 2px solid #8A0D0D; border: 2px solid #9E9E9E;
background-color: #A56D6D; background-color: #ddd;
font-size: 12px; font-size: 12px;
border-radius: 5px 5px 5px 5px;
margin-right: 2px;
} }
.wcFrameMiniButton { .wcFrameMiniButton {
width: 8px; width: 8px;
} }
.wcFrameButton.wcFrameButtonLeft {
right: 10px;
}
.wcFrameButton.wcFrameButtonRight {
right: 10px;
}
.wcFrameButton:hover { .wcFrameButton:hover {
border: 2px solid #CCCCCC; border: 2px solid #CCCCCC;
} }
@ -263,11 +272,9 @@
} }
.wcFrameButtonBar { .wcFrameButtonBar {
top: 7px; top: 5px;
right: 5px; right: 5px;
color: white;
} }
.context-menu-list { .context-menu-list {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px; font-size: 13px;
@ -313,3 +320,12 @@ font-size: 13px;
ul.dropdown-menu > li.menu-item > a > i.wcTabIcon { ul.dropdown-menu > li.menu-item > a > i.wcTabIcon {
width: 14px; width: 14px;
} }
.wcFrameButton .fa.fa-close {
margin-top: 3.5px;
padding-left: 1px;
}
span.fa.fa-arrow-left, .fa-arrow-right {
margin-top: 4px;
}

View File

@ -1,3 +1,4 @@
16/03/2016
The wcDocker theme frame width has been changed from 6px to 4px. This change has The wcDocker theme frame width has been changed from 6px to 4px. This change has
been brought about to keep the width of the frame consistent with the width of been brought about to keep the width of the frame consistent with the width of
the window divider. the window divider.
@ -35,3 +36,32 @@ index 954d73e..bc64b3b 100755
The same changes have been made to wcDocker-min.js and is not included as the The same changes have been made to wcDocker-min.js and is not included as the
file is tidy formatted. file is tidy formatted.
06/04/2016
The wcDocker is updated to remove the extra left and the right arrows ( signs ) which are not required for tab navigation. New rules has been added to set the position for each specific navigational buttons ; left & right
diff --git a/web/pgadmin/static/js/wcDocker/wcDocker.js b/web/pgadmin/static/js/wcDocker/wcDocker.js
index bc64b3b..b4a5193 100755
--- a/web/pgadmin/static/js/wcDocker/wcDocker.js
+++ b/web/pgadmin/static/js/wcDocker/wcDocker.js
@@ -3392,8 +3392,8 @@ define('wcDocker/frame',[
this.$tabBar = $('<div class="wcFrameTitleBar">');
this.$tabScroll = $('<div class="wcTabScroller">');
this.$center = $('<div class="wcFrameCenter wcPanelBackground">');
- this.$tabLeft = $('<div class="wcFrameButton" title="Scroll tabs to the left."><span class="fa fa-arrow-left"></span>&lt;</div>');
- this.$tabRight = $('<div class="wcFrameButton" title="Scroll tabs to the right."><span class="fa fa-arrow-right"></span>&gt;</div>');
+ this.$tabLeft = $('<div class="wcFrameButton wcFrameButtonLeft" title="Scroll tabs to the left."><span class="fa fa-arrow-left"></span></div>');
+ this.$tabRight = $('<div class="wcFrameButton wcFrameButtonRight" title="Scroll tabs to the right."><span class="fa fa-arrow-right"></span></div>');
this.$close = $('<div class="wcFrameButton" title="Close the currently active panel tab"><div class="fa fa-close"></div>X</div>');
this.$collapse = $('<div class="wcFrameButton" title="Collapse the active panel"><div class="fa fa-download"></div>C</div>');
@@ -5985,8 +5985,8 @@ define('wcDocker/tabframe',[
this.$tabBar = $('<div class="wcFrameTitleBar wcCustomTabTitle wcWide">');
this.$tabScroll = $('<div class="wcTabScroller">');
this.$center = $('<div class="wcFrameCenter wcPanelBackground">');
- this.$tabLeft = $('<div class="wcFrameButton" title="Scroll tabs to the left."><span class="fa fa-arrow-left"></span>&lt;</div>');
- this.$tabRight = $('<div class="wcFrameButton" title="Scroll tabs to the right."><span class="fa fa-arrow-right"></span>&gt;</div>');
+ this.$tabLeft = $('<div class="wcFrameButton wcFrameButtonLeft" title="Scroll tabs to the left."><span class="fa fa-arrow-left"></span></div>');
+ this.$tabRight = $('<div class="wcFrameButton wcFrameButtonRight" title="Scroll tabs to the right."><span class="fa fa-arrow-right"></span></div>');
this.$close = $('<div class="wcFrameButton" title="Close the currently active panel tab"><span class="fa fa-close"></span>X</div>');
//this.$maximize = $('<div class="wcFrameButton" title="Close the currently active panel tab"><span class="fa fa-expand"></span>X</div>');

View File

@ -3392,8 +3392,8 @@ define('wcDocker/frame',[
this.$tabBar = $('<div class="wcFrameTitleBar">'); this.$tabBar = $('<div class="wcFrameTitleBar">');
this.$tabScroll = $('<div class="wcTabScroller">'); this.$tabScroll = $('<div class="wcTabScroller">');
this.$center = $('<div class="wcFrameCenter wcPanelBackground">'); this.$center = $('<div class="wcFrameCenter wcPanelBackground">');
this.$tabLeft = $('<div class="wcFrameButton" title="Scroll tabs to the left."><span class="fa fa-arrow-left"></span>&lt;</div>'); this.$tabLeft = $('<div class="wcFrameButton wcFrameButtonLeft" title="Scroll tabs to the left."><span class="fa fa-arrow-left"></span></div>');
this.$tabRight = $('<div class="wcFrameButton" title="Scroll tabs to the right."><span class="fa fa-arrow-right"></span>&gt;</div>'); this.$tabRight = $('<div class="wcFrameButton wcFrameButtonRight" title="Scroll tabs to the right."><span class="fa fa-arrow-right"></span></div>');
this.$close = $('<div class="wcFrameButton" title="Close the currently active panel tab"><div class="fa fa-close"></div>X</div>'); this.$close = $('<div class="wcFrameButton" title="Close the currently active panel tab"><div class="fa fa-close"></div>X</div>');
this.$collapse = $('<div class="wcFrameButton" title="Collapse the active panel"><div class="fa fa-download"></div>C</div>'); this.$collapse = $('<div class="wcFrameButton" title="Collapse the active panel"><div class="fa fa-download"></div>C</div>');
@ -5985,8 +5985,8 @@ define('wcDocker/tabframe',[
this.$tabBar = $('<div class="wcFrameTitleBar wcCustomTabTitle wcWide">'); this.$tabBar = $('<div class="wcFrameTitleBar wcCustomTabTitle wcWide">');
this.$tabScroll = $('<div class="wcTabScroller">'); this.$tabScroll = $('<div class="wcTabScroller">');
this.$center = $('<div class="wcFrameCenter wcPanelBackground">'); this.$center = $('<div class="wcFrameCenter wcPanelBackground">');
this.$tabLeft = $('<div class="wcFrameButton" title="Scroll tabs to the left."><span class="fa fa-arrow-left"></span>&lt;</div>'); this.$tabLeft = $('<div class="wcFrameButton wcFrameButtonLeft" title="Scroll tabs to the left."><span class="fa fa-arrow-left"></span></div>');
this.$tabRight = $('<div class="wcFrameButton" title="Scroll tabs to the right."><span class="fa fa-arrow-right"></span>&gt;</div>'); this.$tabRight = $('<div class="wcFrameButton wcFrameButtonRight" title="Scroll tabs to the right."><span class="fa fa-arrow-right"></span></div>');
this.$close = $('<div class="wcFrameButton" title="Close the currently active panel tab"><span class="fa fa-close"></span>X</div>'); this.$close = $('<div class="wcFrameButton" title="Close the currently active panel tab"><span class="fa fa-close"></span>X</div>');
//this.$maximize = $('<div class="wcFrameButton" title="Close the currently active panel tab"><span class="fa fa-expand"></span>X</div>'); //this.$maximize = $('<div class="wcFrameButton" title="Close the currently active panel tab"><span class="fa fa-expand"></span>X</div>');

File diff suppressed because one or more lines are too long