IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2025-02-25 18:55:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

Move all CSS into SCSS files for consistency and ease of colour maintenance etc. Fixes #2927

Browse Source
This commit is contained in:
Aditya Toshniwal
2018-09-04 11:24:51 +01:00
committed by Dave Page
parent 61f00a0cbb
commit 82c9cca683
76 changed files with 1956 additions and 1897 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/pgadmin/tools/datagrid/templates/datagrid/index.html
View File

@@ -18,7 +18,7 @@
<span class="sql-editor-busy-text wcLoadingLabel"></span>
</div>
<div class="sql-editor">
<div id="btn-toolbar" class="pg-prop-btn-group bg-gray-2 border-gray-3" role="toolbar" aria-label="">
<div id="btn-toolbar" class="pg-prop-btn-group bg-gray-lighter border-gray-light" role="toolbar" aria-label="">
<div class="btn-group" role="group" aria-label="">
<button id="btn-load-file" type="button" class="btn btn-default btn-load-file"
title=""
@@ -338,7 +338,7 @@
</i>
</div>
<div class="editor-title"
style="background-color: {% if fgcolor %}{{ bgcolor or '#FFFFFF' }}{% else %}{{ bgcolor or '#2C76B4' }}{% endif %}; color: {{ fgcolor or 'white' }};"></div>
style="background-color: {% if fgcolor %}{{ bgcolor or '#FFFFFF' }}{% endif %}; color: {% if fgcolor %}{{ fgcolor }}{% endif %};"></div>
</div>
<div id="editor-panel" tabindex="0"></div>
<iframe id="download-csv" style="display:none"></iframe>

1
web/pgadmin/tools/debugger/__init__.py
View File

@@ -561,7 +561,6 @@ def direct_new(trans_id):
is_desktop_mode=current_app.PGADMIN_RUNTIME,
is_linux=is_linux_platform,
client_platform=user_agent.platform,
stylesheets=[url_for('debugger.static', filename='css/debugger.css')],
)

27
web/pgadmin/tools/debugger/static/css/debugger.css
View File

@@ -35,18 +35,6 @@
width: 0.9em;
}
.debugger-container .CodeMirror-activeline-background {
background: #50B0F0;
}
.CodeMirror-foldmarker {
color: blue;
text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
font-family: "Open Sans";
line-height: .3;
cursor: pointer;
}
.CodeMirror, .CodeMirror-gutters {
min-height: 100%;
}
@@ -67,18 +55,3 @@
.CodeMirror-foldgutter-folded:after {
content: "\25B6";
}
/* To make font same as Query tool in messages tab */
.messages {
white-space: pre-wrap;
font-family: "Source Code Pro";
padding-top: 5px;
padding-left: 10px;
overflow: auto;
height: 100%;
font-size: 0.925em;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}

2
web/pgadmin/tools/debugger/static/js/direct.js
View File

@@ -1061,8 +1061,6 @@ define([
var stack_grid = this.stack_grid = new Backgrid.Grid({
columns: stackGridCols,
row: Backgrid.Row.extend({
highlightColor: '#D9EDF7',
disabledColor: '#F1F1F1',
events: {
click: 'rowClick',
},

26
web/pgadmin/tools/debugger/static/scss/_debugger.scss Normal file
View File

@@ -0,0 +1,26 @@
.debugger-container .CodeMirror-activeline-background {
background: $color-editor-activeline;
}
.CodeMirror-foldmarker {
color: $color-editor-foldmarker;
text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
font-family: $font-family-primary;
line-height: .3;
cursor: pointer;
}
/* To make font same as Query tool in messages tab */
.messages {
white-space: pre-wrap;
font-family: $font-family-editor;
padding-top: 5px;
padding-left: 10px;
overflow: auto;
height: 100%;
font-size: 0.925em;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}

2
web/pgadmin/tools/debugger/templates/debugger/direct.html
View File

@@ -37,7 +37,7 @@ try {
{% endif %}
<div class="debugger_main_container" tabindex="0">
<nav class="navbar-inverse navbar-fixed-top">
<div id="btn-toolbar" class="btn-toolbar pg-prop-btn-group bg-gray-2 border-gray-3" role="toolbar" aria-label="">
<div id="btn-toolbar" class="btn-toolbar pg-prop-btn-group bg-gray-lighter border-gray-light" role="toolbar" aria-label="">
<div class="btn-group" role="group" aria-label="">
<button type="button" class="btn btn-default btn-step-into" id="btn-step-into"
title=""

5
web/pgadmin/tools/grant_wizard/__init__.py
View File

@@ -51,10 +51,7 @@ class GrantWizardModule(PgAdminModule):
Returns:
list: the stylesheets used by this module.
"""
stylesheets = [
url_for('browser.static', filename='css/wizard.css'),
url_for('grant_wizard.static', filename='css/grant_wizard.css')
]
stylesheets = []
return stylesheets
def get_own_javascripts(self):

0
web/pgadmin/tools/grant_wizard/static/css/grant_wizard.css → web/pgadmin/tools/grant_wizard/static/scss/_grant_wizard.scss
View File

4
web/pgadmin/tools/maintenance/__init__.py
View File

@@ -60,9 +60,7 @@ class MaintenanceModule(PgAdminModule):
Returns:
list: the stylesheets used by this module.
"""
stylesheets = [
url_for('maintenance.static', filename='css/maintenance.css')
]
stylesheets = []
return stylesheets
def get_exposed_url_endpoints(self):

4
web/pgadmin/tools/maintenance/static/css/maintenance.css
View File

@@ -1,4 +0,0 @@
.btn-group.pg-maintenance-op label.btn.btn-primary.active {
background-color: aliceblue;
color: #3174AF;
}

4
web/pgadmin/tools/maintenance/static/scss/_maintenance.scss Normal file
View File

@@ -0,0 +1,4 @@
.btn-group.pg-maintenance-op label.btn.btn-primary.active {
background-color: $color-primary-lighter;
color: $color-primary;
}

194
web/pgadmin/tools/sqleditor/static/css/sqleditor.css
View File

@@ -42,18 +42,6 @@
height: 100%;
}
.filter-container {
position: relative;
background-color: white;
border: 1px solid black;
box-shadow: 0.5px 0.5px 5px #000;
padding-bottom: 30px;
top: 10px;
z-index: 1;
margin: auto;
width: 60%;
}
.filter-container .CodeMirror-scroll {
min-height: 120px;
}
@@ -63,13 +51,6 @@
margin-bottom: 5px;
}
.filter-title {
background-color: #2C76B4;
padding: 2px;
color: white;
font-size: 13px;
}
#filter .btn-group {
margin-right: 2px;
float: right;
@@ -104,10 +85,6 @@
user-select: text;
}
.limit-enabled {
background-color: white;
}
.sql-editor-history-container {
height: 100%;
overflow: auto;
@@ -137,18 +114,6 @@
border-bottom: 2px dotted red;
}
#editor-panel .CodeMirror-activeline-background {
background: #D9EDF7;
}
.CodeMirror-foldmarker {
color: blue;
text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
font-family: "Open Sans";
line-height: .3;
cursor: pointer;
}
.CodeMirror {
min-height: 100%;
height: 100%;
@@ -205,21 +170,6 @@
overflow-y: auto;
}
.CodeMirror-hint {
margin: 0;
padding: 0 4px;
border-radius: 2px;
overflow: hidden;
white-space: pre;
color: black;
cursor: pointer;
}
li.CodeMirror-hint-active {
background: #08f;
color: white;
}
.sqleditor-hint {
padding-left: 20px;
}
@@ -267,35 +217,10 @@ li {
border-color: transparent;
}
.grid-header .ui-icon.ui-state-hover {
background-color: white;
}
.slick-cell.cell-move-handle {
font-weight: bold;
text-align: right;
border-right: solid gray;
background: #efefef;
cursor: move;
}
.cell-move-handle:hover {
background: #b6b9bd;
}
.slick-row.selected .cell-move-handle {
background: #D5DC8D;
}
.slick-row .cell-actions {
text-align: left;
}
.slick-row.complete {
background-color: #DFD;
color: #555;
}
/* Slick.Editors.Text, Slick.Editors.Date */
#datagrid .slick-header > input.editor-text {
width: 100%;
@@ -315,15 +240,6 @@ li {
border: 0;
}
.cell-selection {
border-right-color: #ccc;
border-right-style: solid;
background: #f5f5f5;
color: gray;
text-align: right;
font-size: 10px;
}
.slick-row.selected .cell-selection {
background-color: transparent; /* show default selected row background */
}
@@ -334,25 +250,6 @@ li {
background: none;
}
#datagrid .slick-header .slick-header-columns {
background: #ffffff;
height: 40px;
border-bottom: none;
}
#datagrid .slick-header .slick-header-column.ui-state-default {
color: #333333;
padding: 4px 0 3px 6px;
background-color: #E8E8E8;
border-bottom: 1px solid #CCCCCC !important;
border-right: 1px solid #CCCCCC !important;
}
#datagrid .slick-header .slick-header-column.selected {
background-color: #2C76B4;
color: #FFFFFF;
}
#datagrid .slick-header .slick-header-column .column-name {
font-weight: bold;
display: block;
@@ -407,68 +304,11 @@ input.editor-checkbox:focus {
outline: none;
}
/* Remove active cell border */
.slick-cell.active {
border: 1px solid transparent;
border-right: 1px solid #ccc;
border-bottom-color: #ccc;
}
/* To highlight all newly inserted rows */
.grid-canvas .new_row {
background: #dff0d7 !important;
}
/* To highlight all the updated rows */
.grid-canvas .updated_row {
background: #ccc;
}
/* To highlight row at fault */
.grid-canvas .new_row.error, .grid-canvas .updated_row.error {
background: #f2dede !important;
}
/* Disabled row */
.grid-canvas .disabled_row {
background: #eeeeee;
}
/* Disabled cell */
.grid-canvas .disabled_cell {
color: #999999;
}
/* Override selected row color */
#datagrid .slick-row .slick-cell.selected {
background-color: #DEE8F1;
}
/* color the first column */
#datagrid .slick-row .slick-cell.l0.r0 {
background-color: #e8e8e8;
}
#datagrid .slick-row .slick-cell.l0.r0.selected {
background-color: #2C76B4;
}
.slick-cell span[data-cell-type="row-header-selector"] {
display: block;
text-align: center;
}
.slick-cell.selected span[data-cell-type="row-header-selector"] {
color: white;
}
#datagrid div.slick-header.ui-state-default {
background: #ffffff;
border-bottom: none;
border-right: none;
border-top: 1px solid #888;
}
/*
SlickGrid, To fix the issue of width misalignment between Column Header &
actual Column in Mozilla Firefox browser
@@ -496,15 +336,6 @@ input.editor-checkbox:focus {
}
/* Style for text editor */
.pg_text_editor {
z-index:10000;
position:absolute;
background: #fff;
padding: 7px 5px 5px 1px;
border:2px solid #888;
-moz-border-radius:10px;
border-radius:10px;
}
.pg_textarea {
backround:#fff;
width:250px;
@@ -525,11 +356,6 @@ input.editor-checkbox:focus {
border-top: 1px solid #ddd;
}
.connection_status_wrapper {
width: 100%;
background-color: #f7f7f7;
}
.editor-title {
padding: 4px 5px;
font-size: 13px;
@@ -550,16 +376,6 @@ input.editor-checkbox:focus {
margin-left: 2px;
}
.connection_status .fa-clock-o,
.connection_status .fa-hourglass-half {
color: #e8a735;
}
.connection_status .fa-exclamation-circle,
.connection_status .fa-exclamation-triangle {
color: #d0021b;
}
.connection_status .fa-custom {
margin-bottom: -4px;
height: 18px;
@@ -582,12 +398,6 @@ input.editor-checkbox:focus {
outline: 5px auto -webkit-focus-ring-color;
}
.ajs-body .warn-icon {
color:#f1c40f;
font-size: 2em;
margin-right: 20px;
padding-top: 10px;
}
.ajs-body .warn-header {
font-size: 13px;
font-weight: bold;
@@ -630,10 +440,6 @@ input.editor-checkbox:focus {
width:100%;
}
.editor-title-connection {
width:calc(100% - 43px);
}
.connection-status-show {
display: inline-block;
}

2
web/pgadmin/tools/sqleditor/static/js/sqleditor.js
View File

@@ -2048,7 +2048,7 @@ define('tools.querytool', [
self.gridView.query_tool_obj.setOption('readOnly', true);
var cm = self.gridView.query_tool_obj.getWrapperElement();
if (cm) {
cm.className += ' bg-gray-1 opacity-5 hide-cursor-workaround';
cm.className += ' bg-gray-lighter opacity-5 hide-cursor-workaround';
}
self.disable_tool_buttons(true);
self.execute_data_query();

194
web/pgadmin/tools/sqleditor/static/scss/_history.scss Normal file
View File

@@ -0,0 +1,194 @@
.query-history {
height: 100%;
.list-item {
border-bottom: 1px solid $color-gray-light;
}
.entry {
@extend .text-14;
@extend .bg-white;
font-family: $font-family-editor;
border: 2px solid transparent;
margin-left: 1px;
padding: 0 8px 0 5px;
.other-info {
@extend .text-13;
@extend .text-gray;
font-family: $font-family-editor;
display: flex;
flex-direction: row;
justify-content: space-between;
.timestamp {
align-self: flex-start;
}
}
.query {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
user-select: initial;
}
}
.date-label {
font-family: $font-family-editor;
background: $color-gray-lighter;
padding: 2px 9px;
font-size: 11px;
font-weight: bold;
color: $color-gray;
border-bottom: 1px solid $color-gray-light;
}
.entry.error {
@extend .bg-danger-lighter;
}
.entry.selected.error {
background-color: $color-danger-lighter;
}
.entry.selected {
@extend .text-primary;
@extend .border-primary;
@extend .bg-primary-lighter;
font-weight: bold;
border: 2px solid;
.other-info {
@extend .text-primary;
font-weight: bold;
}
}
}
.header-label {
@extend .text-12;
@extend .text-gray;
display: block;
}
.query-detail {
width: 100%;
display: flex;
flex-direction: column;
.error-message-block {
@extend .bg-danger-lighter;
flex: 0.3;
padding-left: 20px;
.history-error-text {
@extend .text-12;
padding: 7px 0;
span {
@extend .text-danger;
font-weight: 500;
margin-right: 8px;
}
}
}
.metadata-block {
flex: 0.4;
padding: 10px 20px;
.metadata {
display: flex;
flex-wrap: wrap;
.item {
flex: 1;
min-width: 130px;
.value {
@extend .text-14;
display: block;
}
.description {
@extend .header-label;
}
}
}
}
.query-statement-block {
flex: 5;
margin-left: 10px;
margin-right: 10px;
height: 0;
position: relative;
.copy-all, .was-copied {
float: left;
position: relative;
z-index: 10;
border: 1px solid $color-gray-light;
color: $color-primary;
font-size: 12px;
box-shadow: 1px 2px 4px 0px $color-gray-light;
padding: 3px 12px 3px 10px;
font-weight: 500;
min-width: 75px;
}
.copy-all {
background-color: $color-bg;
}
.was-copied {
background-color: $color-primary-lighter;
border-color: $color-primary-light;
}
.CodeMirror-scroll {
padding-top: 25px;
}
}
.block-divider {
@extend .border-gray-light;
margin-top: 11px;
margin-bottom: 8px;
}
.message-block {
flex: 2;
display: flex;
padding: 0 20px;
.message {
flex: 2 2 0%;
flex-direction: column;
display: flex;
.message-header {
@extend .header-label;
@extend .not-selectable;
flex: 0 0 auto;
}
.content {
flex: 0 1 auto;
overflow: auto;
position: relative;
height: 100%;
.content-value {
@extend .bg-white;
@extend .text-13;
font-family: $font-family-editor;
border: 0;
padding-left: 0;
position: absolute;
}
}
}
}
}

197
web/pgadmin/tools/sqleditor/static/scss/_sqleditor.scss Normal file
View File

@@ -0,0 +1,197 @@
.filter-title {
background-color: $color-primary;
padding: 2px;
color: $color-fg-inverse;
font-size: 13px;
}
#editor-panel .CodeMirror-activeline-background {
background: $color-primary-lighter;
}
.ajs-body .warn-icon {
color: $color-warning;
font-size: 2em;
margin-right: 20px;
padding-top: 10px;
}
.connection_status_wrapper {
width: 100%;
background-color: $color-gray-white;
}
.connection_status .fa-clock-o,
.connection_status .fa-hourglass-half {
color: $color-warning;
}
.connection_status .fa-exclamation-circle,
.connection_status .fa-exclamation-triangle {
color: $color-danger;
}
li.CodeMirror-hint-active {
background: $color-primary-light;
color: $color-primary-fg;
}
.filter-container {
position: relative;
background-color: $color-bg;
border: 1px solid black;
box-shadow: 0.5px 0.5px 5px #000;
padding-bottom: 30px;
top: 10px;
z-index: 1;
margin: auto;
width: 60%;
}
.limit-enabled {
background-color: $color-bg;
}
.CodeMirror-hint {
margin: 0;
padding: 0 4px;
border-radius: 2px;
overflow: hidden;
white-space: pre;
color: $color-fg;
cursor: pointer;
}
.grid-header .ui-icon.ui-state-hover {
background-color: $color-bg;
}
.slick-cell.selected span[data-cell-type="row-header-selector"] {
color: $color-fg-inverse;
}
.slick-cell.cell-move-handle {
font-weight: bold;
text-align: right;
border-right: solid $color-gray;
background: $color-gray-white;
cursor: move;
}
.cell-move-handle:hover {
background: $color-gray-light;
}
.slick-row.selected .cell-move-handle {
background: $color-warning-light;
}
.slick-row.complete {
background-color: $color-success-lighter;
color: $color-gray-dark;
}
.cell-selection {
border-right-color: $color-gray-light;
border-right-style: solid;
background: $color-gray-lighter;
color: $color-gray;
text-align: right;
font-size: 10px;
}
#datagrid .slick-header .slick-header-columns {
background: $color-bg;
height: 40px;
border-bottom: none;
}
#datagrid .slick-header .slick-header-column.ui-state-default {
color: $color-gray-dark;
padding: 4px 0 3px 6px;
background-color: $color-gray-lighter;
border-bottom: 1px solid $color-gray-light !important;
border-right: 1px solid $color-gray-light !important;
}
#datagrid .slick-header .slick-header-column.selected {
background-color: $color-primary;
color: $color-fg-inverse;
}
/* Remove active cell border */
.slick-cell.active {
border: 1px solid transparent;
border-right: 1px solid $color-gray-light;
border-bottom-color: $color-gray-light;
}
/* To highlight all newly inserted rows */
.grid-canvas .new_row {
background: $color-success-lighter !important;
}
/* To highlight all the updated rows */
.grid-canvas .updated_row {
background: $color-gray-lighter;
}
/* To highlight row at fault */
.grid-canvas .new_row.error, .grid-canvas .updated_row.error {
background: $color-danger-lighter !important;
}
/* Disabled row */
.grid-canvas .disabled_row {
background: $color-gray-lighter;
}
/* Disabled cell */
.grid-canvas .disabled_cell {
color: $color-gray-light;
}
/* Override selected row color */
#datagrid .slick-row .slick-cell.selected {
background-color: $color-primary-lighter;
}
/* color the first column */
#datagrid .slick-row .slick-cell.l0.r0 {
background-color: $color-gray-lighter;
}
#datagrid .slick-row .slick-cell.l0.r0.selected {
background-color: $color-primary;
}
#datagrid div.slick-header.ui-state-default {
background: $color-bg;
border-bottom: none;
border-right: none;
border-top: 1px solid $color-gray;
}
.pg_text_editor {
z-index:10000;
position:absolute;
background: $color-bg;
padding: 7px 5px 5px 1px;
border:2px solid $color-gray;
-moz-border-radius:10px;
border-radius:10px;
}
.CodeMirror-foldmarker {
color: $color-primary;
text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
font-family: "Open Sans";
line-height: .3;
cursor: pointer;
}
.editor-title-connection {
width:calc(100% - 43px);
color: $color-fg-inverse;
background-color: $color-primary;
}

10
web/pgadmin/tools/user_management/static/js/user_management.js
View File

@@ -630,7 +630,7 @@ define([
var footerTpl = _.template([
'<div class="pg-prop-footer" style="visibility:hidden;">',
'<div class="pg-prop-status-bar">',
'<div class="media error-in-footer bg-red-1 border-red-2 font-red-3 text-14">',
'<div class="media error-in-footer bg-danger-lighter border-danger-light text-danger text-14">',
'<div class="media-body media-middle">',
'<div class="alert-icon error-icon">',
'<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>',
@@ -645,9 +645,7 @@ define([
].join('\n')),
$statusBar = $(footerTpl()),
UserRow = Backgrid.Row.extend({
userInvalidColor: 'lightYellow',
userValidColor: '#fff',
userInvalidClass: 'bg-user-invalid',
initialize: function() {
Backgrid.Row.prototype.initialize.apply(this, arguments);
@@ -656,10 +654,10 @@ define([
},
userInvalid: function() {
$(this.el).removeClass('new');
this.el.style.backgroundColor = this.userInvalidColor;
$(this.el).addClass(this.userInvalidClass);
},
userValid: function() {
this.el.style.backgroundColor = this.userValidColor;
$(this.el).removeClass(this.userInvalidClass);
},
}),
UserCollection = Backbone.Collection.extend({

3
web/pgadmin/tools/user_management/static/scss/_user_management.scss Normal file
View File

@@ -0,0 +1,3 @@
.bg-user-invalid {
@extend .bg-warning-lighter;
}