public inbox for [email protected]
help / color / mirror / Atom feedFrom: Aditya Toshniwal <[email protected]>
To: pgadmin-hackers <[email protected]>
Subject: [pgAdmin][RM6846] Dark theme UI related fixes
Date: Mon, 4 Oct 2021 11:56:52 +0530
Message-ID: <CAM9w-_=E7hLeZXub18kT0uDoF7q7=1VojXcOnaUBj7_L-tMopw@mail.gmail.com> (raw)
Hi Hackers,
Attached patch fixes some visibility issues in the dark UI theme.
Please review.
--
Thanks,
Aditya Toshniwal
pgAdmin Hacker | Software Architect | *edbpostgres.com*
<http://edbpostgres.com;
"Don't Complain about Heat, Plant a TREE"
Attachments:
[application/octet-stream] RM6846.patch (5.2K, 3-RM6846.patch)
download | inline diff:
diff --git a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/columns/static/js/column.ui.js b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/columns/static/js/column.ui.js
index ea6ba8bc9..ee6edcd1b 100644
--- a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/columns/static/js/column.ui.js
+++ b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/columns/static/js/column.ui.js
@@ -275,8 +275,13 @@ export default class ColumnSchema extends BaseUISchema {
return _.isUndefined(this.nodeInfo['table'] || this.nodeInfo['view'] || this.nodeInfo['mview']);
},
},{
- id: 'attlen', label: gettext('Length/Precision'), cell: 'int',
+ id: 'attlen', label: gettext('Length/Precision'),
deps: ['cltype'], type: 'int', group: gettext('Definition'), width: 120, disableResizing: true,
+ cell: (state)=>{
+ return {
+ cell: obj.attlenRange(state) ? 'int' : '',
+ };
+ },
depChange: (state)=>{
let range = this.attlenRange(state);
if(range) {
@@ -300,8 +305,13 @@ export default class ColumnSchema extends BaseUISchema {
return Boolean(obj.attlenRange(state));
},
},{
- id: 'attprecision', label: gettext('Scale'), cell: 'int', width: 60, disableResizing: true,
+ id: 'attprecision', label: gettext('Scale'), width: 60, disableResizing: true,
deps: ['cltype'], type: 'int', group: gettext('Definition'),
+ cell: (state)=>{
+ return {
+ cell: obj.attlenRange(state) ? 'int' : '',
+ };
+ },
depChange: (state)=>{
let range = this.attprecisionRange(state);
if(range) {
diff --git a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/static/js/partition.utils.ui.js b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/static/js/partition.utils.ui.js
index aa71e3732..8d0212ea0 100644
--- a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/static/js/partition.utils.ui.js
+++ b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/static/js/partition.utils.ui.js
@@ -264,7 +264,7 @@ export class PartitionsSchema extends BaseUISchema {
}
return false;
},
- disabled: function(state) {
+ readonly: function(state) {
if(obj.top && obj.top.sessData.partition_type == 'list' && obj.isNew(state)
&& state.is_default !== true) {
return false;
diff --git a/web/pgadmin/static/js/Theme/dark.js b/web/pgadmin/static/js/Theme/dark.js
index 3d5cd3abc..aecc75c44 100644
--- a/web/pgadmin/static/js/Theme/dark.js
+++ b/web/pgadmin/static/js/Theme/dark.js
@@ -26,7 +26,7 @@ export default function(basicSettings) {
},
primary: {
main: '#234d6e',
- light: '#d6effc',
+ light: '#323E43',
contrastText: '#fff',
hoverMain: darken('#234d6e', 0.25),
hoverBorderColor: darken('#234d6e', 0.25),
diff --git a/web/pgadmin/static/js/Theme/index.jsx b/web/pgadmin/static/js/Theme/index.jsx
index 784b8840d..8126a3075 100644
--- a/web/pgadmin/static/js/Theme/index.jsx
+++ b/web/pgadmin/static/js/Theme/index.jsx
@@ -233,6 +233,11 @@ function getFinalTheme(baseTheme) {
mixins: mixins,
overrides: {
MuiOutlinedInput: {
+ root: {
+ '&.Mui-disabled .MuiOutlinedInput-notchedOutline': {
+ borderColor: baseTheme.otherVars.inputBorderColor,
+ },
+ },
notchedOutline: {
borderColor: baseTheme.otherVars.inputBorderColor,
}
@@ -259,12 +264,16 @@ function getFinalTheme(baseTheme) {
root: {
backgroundColor: baseTheme.palette.background.default,
textOverflow: 'ellipsis',
+ '&.Mui-disabled': {
+ backgroundColor: baseTheme.otherVars.inputDisabledBg,
+ },
},
inputMultiline: {
fontSize: baseTheme.typography.fontSize,
height: 'unset',
backgroundColor: baseTheme.palette.background.default,
'&[readonly], &.Mui-disabled': {
+ color: baseTheme.palette.text.muted,
backgroundColor: baseTheme.otherVars.inputDisabledBg,
},
},
@@ -273,6 +282,7 @@ function getFinalTheme(baseTheme) {
height: 'unset',
backgroundColor: baseTheme.palette.background.default,
'&[readonly], &.Mui-disabled': {
+ color: baseTheme.palette.text.muted,
backgroundColor: baseTheme.otherVars.inputDisabledBg,
},
}
diff --git a/web/pgadmin/static/js/components/FormComponents.jsx b/web/pgadmin/static/js/components/FormComponents.jsx
index 58afb7c37..160a2b57c 100644
--- a/web/pgadmin/static/js/components/FormComponents.jsx
+++ b/web/pgadmin/static/js/components/FormComponents.jsx
@@ -589,6 +589,7 @@ const customReactSelectStyles = (theme, readonly)=>({
...provided,
minHeight: '0',
backgroundColor: readonly ? theme.otherVars.inputDisabledBg : theme.palette.background.default,
+ color: readonly ? theme.palette.text.muted : theme.palette.text.primary,
borderColor: theme.otherVars.inputBorderColor,
...(state.isFocused ? {
borderColor: theme.palette.primary.main,
view thread (2+ messages) latest in thread
reply
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Reply to all the recipients using the --to and --cc options:
reply via email
To: [email protected]
Cc: [email protected]
Subject: Re: [pgAdmin][RM6846] Dark theme UI related fixes
In-Reply-To: <CAM9w-_=E7hLeZXub18kT0uDoF7q7=1VojXcOnaUBj7_L-tMopw@mail.gmail.com>
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
This inbox is served by agora; see mirroring instructions
for how to clone and mirror all data and code used for this inbox