mirror of
https://github.com/pgadmin-org/pgadmin4.git
synced 2025-02-25 18:55:31 -06:00
Cleanup styling of wcDocker tab control buttons.
This commit is contained in:
parent
ca277bc8b6
commit
22841f8664
@ -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;
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
||||||
|
@ -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><</div>');
|
||||||
|
- this.$tabRight = $('<div class="wcFrameButton" title="Scroll tabs to the right."><span class="fa fa-arrow-right"></span>></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><</div>');
|
||||||
|
- this.$tabRight = $('<div class="wcFrameButton" title="Scroll tabs to the right."><span class="fa fa-arrow-right"></span>></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>');
|
@ -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><</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>></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><</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>></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
Loading…
Reference in New Issue
Block a user