IntenseWebs/pgadmin4
3
0 Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2026-11-02 08:10:03 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fixed dark theme-related CSS and modify the color codes. Fixes #5287

Browse Source 
Fixed backgrid row hover issue where on hover background color is set for edit and delete cell only. Fixes #5470
This commit is contained in:
Aditya Toshniwal authored and Akshay Joshi committed 2020-07-03 11:47:40 +05:30
1 parent dd4dc19add
commit 341c3aded6
17 files changed
+88 -61
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

web/pgadmin/static/js/alertify.pgadmin.defaults.js
+3 -3
View File
@@ -440,7 +440,7 @@ define([
var alertMessage =
`<div class="d-flex px-3 py-2">
<div class="pr-2">
<i class="fa fa-check text-success" aria-hidden="true"></i>
<i class="fa fa-check" aria-hidden="true"></i>
</div>
<div class="text-body" role="status">${message}</div>
</div>`;
@@ -450,7 +450,7 @@ define([
var alertMessage =
`<div class="d-flex px-3 py-2">
<div class="pr-2">
<i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
</div>
<div class="text-body" role="status">${message}</div>
</div>`;
@@ -460,7 +460,7 @@ define([
var alertMessage =
`<div class="d-flex px-3 py-2">
<div class="mr-3">
<i class="fa fa-info text-primary" aria-hidden="true"></i>
<i class="fa fa-info-circle" aria-hidden="true"></i>
</div>
<div class="text-body" role="status">${message}</div>
</div>`;
web/pgadmin/static/scss/_alert.scss
+10 -6
View File
@@ -44,6 +44,7 @@
align-self: center;
// To make sure IE picks up the correct font
font-family: $font-family-primary;
color: $color-fg;
}
.alert-info {
@@ -114,20 +115,23 @@
.error-in-footer {
border-radius: $border-radius;
border: 1px solid $color-danger-light;
background: $color-danger-lighter;
background: $alert-danger-bg;
border: $border-width solid $alert-danger-color;
color: $alert-danger-color;
}
.success-in-footer {
border-radius: $border-radius;
border: 1px solid $color-success-light;
background: $color-success-light;
background: $alert-success-bg;
border: $border-width solid $alert-success-color;
color: $alert-success-color;
}
.info-in-footer {
border-radius: $border-radius;
border: 1px solid $color-primary;
background: $color-primary-light;
background: $alert-primary-bg;
border: $border-width solid $alert-primary-color;
color: $alert-primary-color;
.fa {
font-size: 1rem;
web/pgadmin/static/scss/_alertify.overrides.scss
+9 -6
View File
@@ -214,20 +214,23 @@
}
.ajs-message.ajs-error.ajs-visible {
background: $color-danger-lighter;
border: $border-width solid $color-danger;
background: $alert-danger-bg;
border: $border-width solid $alert-danger-color;
color: $alert-danger-color;
@extend .ajs-text-smoothing;
}
.ajs-message.ajs-success.ajs-visible {
background: $color-success-light;
border: $border-width solid $color-success;
background: $alert-success-bg;
border: $border-width solid $alert-success-color;
color: $alert-success-color;
@extend .ajs-text-smoothing;
}
.ajs-message.ajs-visible {
background: $color-primary-light;
border: $border-width solid $color-primary;
background: $alert-primary-bg;
border: $border-width solid $alert-primary-color;
color: $alert-primary-color;
@extend .ajs-text-smoothing;
}
web/pgadmin/static/scss/_backgrid.overrides.scss
+13 -5
View File
@@ -5,6 +5,13 @@
.backgrid td {
font-weight: normal!important;
&.editable {
& .display-text {
overflow: hidden;
text-overflow: ellipsis;
@extend .form-control;
}
}
}
.backgrid.table th.sortable > button {
@@ -62,6 +69,12 @@
z-index: 10 !important;
}
.backgrid td.editor {
& input[type=text], & input[type=password] {
@extend .form-control;
}
}
.backgrid .string-cell.editor input[type=password] {
text-align: left;
}
@@ -97,7 +110,6 @@
}
.backgrid:not(.presentation) td.renderable:not(.editable):not(.delete-cell) {
background-color: $color-gray-lighter;
// if transparent border then setting color will help
border-bottom-color: $color-gray-lighter;
}
@@ -106,10 +118,6 @@
background-color: $color-gray-light;
}
.backgrid:not(.presentation) td.renderable.editable:not(.delete-cell):not(.edit-cell) {
background-color: $input-bg;
}
.sql-editor-grid-container .backgrid > thead > th.renderable,
.sql-editor-grid-container .backgrid > tbody > td.renderable {
white-space: pre-wrap;
web/pgadmin/static/scss/_bootstrap.overrides.scss
-7
View File
@@ -297,13 +297,6 @@ td.switch-cell > div.toggle {
font-weight: bold;
}
.navbar-brand:hover {
color: $color-brand !important;
}
.navbar-brand:focus {
color: $color-brand !important;
}
.btn-sm-sq {
@extend .btn-sm;
line-height: 0.7rem;
web/pgadmin/static/scss/pgadmin.scss
+5
View File
@@ -5,6 +5,11 @@ $theme-colors: (
"warning": $color-warning,
);
/* Certain variables are required in JS directly */
:root {
--border-color: #{$border-color};
}
@import "node_modules/bootstrap/scss/bootstrap";
@import 'webcabin.pgadmin';
web/pgadmin/static/scss/resources/_default.style.scss
-8
View File
@@ -10,10 +10,6 @@
&-light{
background-color: $color-primary-light;
}
&-dark{
background-color: $color-primary-dark;
}
}
.bg-danger {
@@ -69,10 +65,6 @@
&-light {
border-color: $color-primary-light;
}
&-dark {
border-color: $color-primary-dark;
}
}
.border-danger {
web/pgadmin/static/scss/resources/_default.variables.scss
+8 -1
View File
@@ -11,7 +11,6 @@ $color-primary: #326690 !default;
$color-primary-fg: $white !default;
$color-primary-light: #d6effc !default;
$color-primary-light-fg: $color-primary !default;
$color-primary-dark: #295c85 !default;
$color-secondary: $white !default;
@@ -65,6 +64,13 @@ $header-bg: $color-bg !default;
$tree-font-size: 0.815rem;
$alert-primary-bg: $color-primary-light !default;
$alert-primary-color: $color-primary !default;
$alert-danger-bg: $color-danger-lighter !default;
$alert-danger-color: $color-danger !default;
$alert-success-bg: $color-success-light !default;
$alert-success-color: $color-success !default;
$navbar-bg: $color-primary;
$navbar-font-size: 0.925rem;
$navbar-height: 32px;
@@ -130,6 +136,7 @@ $nav-tabs-link-active-border-color: none;
$table-cell-padding: 0.25rem;
$table-header-cell-padding: 0.75rem;
$table-hover-bg: none; //we will use our own classes
$table-hover-color: #000 !default;
$table-active-bg: $color-primary-light;
$table-border-width: $border-width;
$table-border-color: $border-color;
web/pgadmin/static/scss/resources/_theme.variables.scss.sample
+7 -1
View File
@@ -4,7 +4,6 @@ $color-primary: #326690;
$color-primary-fg: $white;
$color-primary-light: #d6effc;
$color-primary-light-fg: $color-primary;
$color-primary-dark: #295c85;
$color-secondary: $white;
$color-ternary: #5b6d7c;
$color-ternary-fg: $white;
@@ -27,9 +26,16 @@ $border-color: #dde0e6;
$shadow-base-color: $color-gray-dark;
$text-muted: $color-gray-dark;
$header-bg: $color-bg;
$alert-primary-bg: $color-primary-light !default;
$alert-primary-color: $color-primary !default;
$alert-danger-bg: $color-danger-lighter !default;
$alert-danger-color: $color-danger !default;
$alert-success-bg: $color-success-light !default;
$alert-success-color: $color-success !default;
$negative-bg: $color-gray-light;
$popover-bg: $color-gray-dark;
$popover-body-color: $white;
$table-hover-color: #000;
$input-bg: $white;
$input-color: $color-fg;
$input-border-color: $border-color;
web/pgadmin/static/scss/resources/dark/_theme.variables.scss
+10 -1
View File
@@ -8,7 +8,6 @@ $color-primary: #234d6e;
$color-primary-fg: $color-fg;
$color-primary-light: #323E43;
$color-primary-light-fg: $color-primary-fg;
$color-primary-dark: #15354f;
$color-secondary: #6b6b6b;
@@ -36,6 +35,9 @@ $border-color: #4a4a4a;
$shadow-base-color: #111111;
$text-muted: #8A8A8A;
$table-hover-color: #fff;
$input-bg: $color-bg;
$input-color: $color-fg;
$input-border-color: #6b6b6b;
@@ -48,6 +50,13 @@ $active-color: $color-fg;
$header-bg: $color-gray-lighter;
$alert-primary-bg: $color-bg;
$alert-primary-color: #50B0F0;
$alert-danger-bg: $color-bg;
$alert-danger-color: $color-danger;
$alert-success-bg: $color-bg;
$alert-success-color: $color-success;
$table-bg: $color-gray-lighter;
$color-editor-fg: #7dc9f1;
web/pgadmin/static/vendor/backgrid/backgrid.js
Vendored
+8 -1
View File
@@ -889,7 +889,8 @@ var Cell = Backgrid.Cell = Backbone.View.extend({
$el.empty();
var model = this.model;
var columnName = this.column.get("name");
$el.text(this.formatter.fromRaw(model.get(columnName), model));
var value = this.formatter.fromRaw(model.get(columnName), model);
$el.append($(`<span class="display-text" title="${value}">${value}</span>`));
$el.addClass(columnName);
this.updateStateClassesMaybe();
this.delegateEvents();
@@ -932,9 +933,15 @@ var Cell = Backgrid.Cell = Backbone.View.extend({
// Need to redundantly undelegate events for Firefox
this.undelegateEvents();
var dispText = this.$el.find('.display-text');
var width = '100%';
if(dispText.length === 1) {
width = dispText.width();
}
this.$el.empty();
this.$el.append(this.currentEditor.$el);
this.currentEditor.render();
this.currentEditor.$el.css('min-width',width);
this.$el.addClass("editor");
model.trigger("backgrid:editing", model, column, this, this.currentEditor);