IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2024-12-22 23:23:57 -06:00
Code Issues Packages Projects Releases Wiki Activity

1) Further styling tweaks for Dark Theme.

Browse Source 
2) Theme related code changes are removed from config.py and moved to miscellaneous under a new package - "themes".
This commit is contained in:
Aditya Toshniwal 2019-11-11 18:47:43 +05:30 committed by Akshay Joshi
parent 7282e15ee2
commit c1c682402a
20 changed files with 171 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -36,7 +36,7 @@ runtime/pgAdmin4_resource.rc
runtime/release/
runtime/ui_BrowserWindow.h
web/config_local.py
web/pgadmin.themes.json
web/pgadmin/misc/themes/pgadmin.themes.json
web/geckodriver.log
web/regression/test_config.json
node_modules/

19
web/config.py
View File

@ -487,25 +487,6 @@ try:
except ImportError:
pass
THEMES = {
"standard": {
"disp_name": "Standard",
"cssfile": "pgadmin",
"preview_img": "standard_preview.png"
}
}
OTHER_THEMES = {}
try:
extra_themes = json.load(open('pgadmin.themes.json'))
OTHER_THEMES.update(extra_themes)
except Exception:
pass
# Set OTHER_THEMES to None here to disable all other themes
if OTHER_THEMES is not None:
THEMES.update(OTHER_THEMES)
# SUPPORT_SSH_TUNNEL can be override in local config file and if that
# setting is False in local config then we should not check the Python version.

7
web/pgadmin.themes.json Normal file
View File

@ -0,0 +1,7 @@
{
"dark": {
"disp_name": "dark_(Beta)",
"cssfile": "pgadmin.theme.dark",
"preview_img": "dark_preview.png"
}
}

16
web/pgadmin/__init__.py
View File

@ -711,28 +711,18 @@ def create_app(app_name=None):
from flask_compress import Compress
Compress(app)
from pgadmin.misc.themes import Themes
Themes(app)
@app.context_processor
def inject_blueprint():
"""
Inject a reference to the current blueprint, if any.
Also the get_theme_css func.
"""
def get_theme_css():
misc_preference = Preferences.module('misc')
theme = misc_preference.preference('theme').get()
theme_css = config.THEMES['standard']['cssfile'] + '.css'
if theme not in config.THEMES:
pass
else:
theme_css = config.THEMES[theme]['cssfile'] + '.css'
return theme_css
return {
'current_app': current_app,
'current_blueprint': current_blueprint,
'get_theme_css': get_theme_css,
}
@app.errorhandler(Exception)

4
web/pgadmin/dashboard/static/js/charting.js
View File

@ -32,6 +32,10 @@ export class Chart {
},
shadowSize: 0,
resolution : 3,
grid: {
color: 'transparent',
tickColor: '#8f8f8f',
},
};
this._dataset = null;

19
web/pgadmin/dashboard/static/scss/_dashboard.scss
View File

@ -43,10 +43,23 @@
& .flotr-labels {
color: $color-fg !important;
}
& .flotr-legend {
.flotr-legend-label {
& .flotr-legend {
border: none !important;
padding: 0.25rem 0.5rem;
& .flotr-legend-label {
color: $color-fg !important;
padding-left: 0.25rem;
}
}
& .flotr-legend-color-box>div {
border: none !important;
&>div {
border: none !important;
}
}
& .flotr-legend-bg {
border-radius: $border-radius;
}
}
}

9
web/pgadmin/misc/__init__.py
View File

@ -14,9 +14,8 @@ from flask import url_for, render_template, Response, request
from flask_babelex import gettext
from pgadmin.utils import PgAdminModule
from pgadmin.utils.csrf import pgCSRFProtect
from pgadmin.utils.preferences import Preferences
from pgadmin.utils.session import cleanup_session_files
from pgadmin.misc.themes import get_all_themes
import config
MODULE_NAME = 'misc'
@ -68,16 +67,16 @@ class MiscModule(PgAdminModule):
theme_options = []
for theme in config.THEMES:
for theme, theme_data in (get_all_themes()).items():
theme_options.append({
'label': config.THEMES[theme]['disp_name']
'label': theme_data['disp_name']
.replace('_', ' ')
.replace('-', ' ')
.title(),
'value': theme,
'preview_src': url_for(
'static', filename='js/generated/img/' +
config.THEMES[theme]['preview_img']
theme_data['preview_img']
)
})

49
web/pgadmin/misc/themes/__init__.py Normal file
View File

@ -0,0 +1,49 @@
import os
import json
from pgadmin.utils.preferences import Preferences
def get_all_themes():
theme_file_path = os.path.join(
os.path.dirname(os.path.realpath(__file__)),
'pgadmin.themes.json'
)
all_themes = {
"standard": {
"disp_name": "Standard",
"cssfile": "pgadmin",
"preview_img": "standard_preview.png"
}
}
try:
all_themes.update(json.load(open(theme_file_path)))
except Exception as _:
pass
return all_themes
def Themes(app):
@app.context_processor
def inject_theme_func():
def get_theme_css():
all_themes = get_all_themes()
theme_css = all_themes['standard']['cssfile'] + '.css'
try:
misc_preference = Preferences.module('misc')
theme = misc_preference.preference('theme').get()
if theme not in all_themes:
pass
else:
theme_css = all_themes[theme]['cssfile'] + '.css'
except Exception:
# Let the default theme go if exception occurs
pass
return theme_css
return {
'get_theme_css': get_theme_css,
}

2
web/pgadmin/static/js/backform.pgadmin.js
View File

@ -2067,7 +2067,7 @@ define([
}
let new_value = _.findWhere(this.field.get('options'), {value: evt.params.data.id});
if(new_value.preview_src) {
if(new_value && !_.isUndefined(new_value.preview_src) && new_value.preview_src) {
this.$el.find('.preview-img img').attr('src', new_value.preview_src);
}
},

1
web/pgadmin/static/js/utils.js
View File

@ -207,6 +207,7 @@ export function getRandomInt(min, max) {
}
export function titleize(i_str) {
if(i_str === '' || i_str === null) return i_str;
return i_str.split(' ')
.map(w => w[0].toUpperCase() + w.substr(1).toLowerCase())
.join(' ');

19
web/pgadmin/static/scss/_backgrid.overrides.scss
View File

@ -10,6 +10,14 @@
cursor: pointer;
}
.backgrid .ascending .sort-caret {
border-bottom-color: $color-fg;
}
.backgrid .descending .sort-caret {
border-top-color: $color-fg;
}
.backgrid.backgrid-striped tbody {
& tr:nth-child(even) {
background: $table-bg;
@ -80,8 +88,8 @@
.backgrid thead td,
.backgrid thead th{
background: $color-bg;
background-color: $color-bg !important;
background: $table-bg;
background-color: $table-bg !important;
text-align: left;
}
@ -203,7 +211,7 @@ span.form-control:disabled {
}
.subnode-header {
background-color: $color-bg;
background-color: $header-bg;
color: $color-fg;
border-bottom: $panel-border;
}
@ -290,6 +298,11 @@ table.backgrid {
& td.editor {
background-color: $color-bg !important;
color: $color-fg !important;
& input {
color: $color-fg !important;
}
}
& td.edit-cell.editor:focus {

6
web/pgadmin/static/scss/_pgadmin.style.scss
View File

@ -186,7 +186,7 @@
&.pg-prop-btn-group-below {
text-align: right;
padding: $footer-padding;
background: $color-bg;
background: $header-bg;
border-top: $panel-border;
}
}
@ -353,7 +353,7 @@
display: block;
text-align: left;
cursor: pointer;
background-color: $color-bg;
background-color: $header-bg;
padding: 7px;
font-size: inherit;
border-bottom: $panel-border;
@ -842,7 +842,7 @@ body {
}
.nav-tabs {
background-color: $color-bg;
background-color: $header-bg;
}
.editor-toolbar {

6
web/pgadmin/static/scss/_webcabin.pgadmin.scss
View File

@ -24,7 +24,7 @@
.wcFrameTitleBar {
height: $title-height;
background-color: $color-bg;
background-color: $header-bg;
border-bottom: $panel-border;
}
@ -52,7 +52,7 @@
.wcFrameButtonBar {
height: $title-height;
background-color: $color-bg;
background-color: inherit;
border-bottom: $panel-border;
padding: 0rem 0.25rem;
@ -162,7 +162,7 @@
.wcFloating .wcFrameTitleBar {
height: $title-height;
background-color: $color-bg;
background-color: $header-bg;
border-bottom: $panel-border;
}

21
web/pgadmin/static/scss/resources/_default.variables.scss
View File

@ -18,7 +18,7 @@ $color-secondary: $white !default;
$color-danger: #e53935 !default;
$color-danger-fg: $white !default;
$color-danger-light: #F39999 !default;
$color-danger-lighter: #F39999 !default;
$color-danger-lighter: #FAECEC !default;
$color-success: #43a047 !default;
$color-success-fg: $black !default;
@ -58,6 +58,8 @@ $grid-gutter-width: 15px;
$border-radius: 0.25rem;
$text-muted: $color-gray-dark !default;
$header-bg: $color-bg !default;
$navbar-bg: $color-primary;
$navbar-font-size: 0.925rem;
@ -73,6 +75,8 @@ $navbar-toggler-padding-y: 0.25rem; //no-change
$form-group-margin-bottom: 0.5rem;
$btn-active-box-shadow: none;
$negative-bg: $color-gray-light !default;
$dropdown-bg: $color-bg;
$dropdown-color: $color-fg;
$dropdown-link-color: $color-fg;
@ -100,7 +104,7 @@ $card-spacer-y: 0rem;
$card-spacer-x: 0rem;
$card-border-radius: $border-radius;
$card-border-color: $border-color;
$card-cap-bg: $color-bg;
$card-cap-bg: $header-bg;
$card-bg: $color-bg;
$navbar-padding-y: 0rem;
@ -139,6 +143,11 @@ $input-border-width: $input-btn-border-width;
$input-btn-padding-y: .25rem;
$input-btn-padding-x: .75rem;
$btn-primary-color: $color-primary-fg;
$btn-success-color: $color-success-fg;
$btn-warning-color: $color-warning-fg;
$btn-danger-color: $color-danger-fg;
$component-active-bg: $color-primary;
$input-btn-focus-width: .2rem;
$input-btn-focus-color: rgba($component-active-bg, .25);
@ -183,7 +192,7 @@ $splitter-hover-width: 7px;
$dropdown-submenu-top: -$dropdown-spacer;
$table-bg: $color-bg;
$table-bg: $color-bg !default;
$table-bg-selected: $color-primary-light;
$table-hover-border-color: $color-primary;
$table-hover-border: $panel-border-width solid $color-primary !important;
@ -205,7 +214,7 @@ $sql-title-bg: #5b6d7c;
$sql-title-fg: $white;
// Toolbar + editor title heights + title bottom border
$sql-editor-panel-top: $title-height + $text-height-calc*16px + $sql-title-padding*2 + $panel-border-width;
$sql-gutters-bg: $color-gray-light;
$sql-gutters-bg: $negative-bg;
$sql-history-detail-bg: $color-gray-lighter;
$sql-history-success-bg: $color-primary-light;
$sql-history-success-fg: $active-color;
@ -224,7 +233,6 @@ $explain-sev-4-bg: #880000 !default;
$explain-sev-3-color: #FFFFFF !default;
$explain-sev-4-color: #FFFFFF !default;
$negative-bg: $color-gray-light !default;
$dialog-box-shadow: 0 0.5rem 3rem $shadow-base-color;
$alert-icon-color: $white;
@ -238,6 +246,9 @@ $no-border-radius: 0px !important;
$btn-checkbox-padding: $input-btn-padding-y $input-btn-padding-x;
$scrollbar-color: $color-gray !default;
$scrollbar-hover-color: $color-gray-dark !default;
$security-text-color: $white;
$security-btn-color: #038bba;

8
web/pgadmin/static/scss/resources/_theme.variables.scss.sample
View File

@ -49,6 +49,10 @@ $popover-body-color: $color-fg;
$active-color: $color-primary;
$header-bg: $color-gray-lighter;
$table-bg: $color-gray-lighter;
$color-editor-fg: $color-fg;
$color-editor-keyword: #908;
$color-editor-number: #964;
@ -70,5 +74,9 @@ $explain-sev-4-color: #FFFFFF;
$negative-bg: $color-gray-light;
/* Works only with chromium browsers */
$scrollbar-color: $color-gray-lighter!default;
$scrollbar-hover-color: #666666 !default;
$loader-icon : url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 38 38' style='enable-background:new 0 0 38 38;' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bfill:none;stroke:%23ebeef3;stroke-width:2;%7d .st1%7bfill:none;stroke:%23326690;stroke-width:2;%7d %3c/style%3e%3cg%3e%3cg transform='translate(1 1)'%3e%3ccircle class='st0' cx='18' cy='18' r='18'/%3e%3cpath class='st1' d='M36,18c0-9.9-8.1-18-18-18 '%3e%3canimateTransform accumulate='none' additive='replace' attributeName='transform' calcMode='linear' dur='0.7s' fill='remove' from='0 18 18' repeatCount='indefinite' restart='always' to='360 18 18' type='rotate'%3e%3c/animateTransform%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e ") !default;
$loader-icon-small: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 38 38' style='enable-background:new 0 0 38 38;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23EBEEF3;stroke-width:5;%7D .st1%7Bfill:none;stroke:%23222222;stroke-width:5;%7D%0A%3C/style%3E%3Cg%3E%3Cg transform='translate(1 1)'%3E%3Ccircle class='st0' cx='18' cy='18' r='16'/%3E%3Cpath class='st1' d='M34,18c0-8.8-7.2-16-16-16 '%3E%3CanimateTransform accumulate='none' additive='replace' attributeName='transform' calcMode='linear' dur='0.7s' fill='remove' from='0 18 18' repeatCount='indefinite' restart='always' to='360 18 18' type='rotate'%3E%3C/animateTransform%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") !default;

58
web/pgadmin/static/scss/resources/dark/_theme.variables.scss
View File

@ -1,45 +1,42 @@
$white: #fff;
$black: #000;
$color-bg: #222;
$color-bg: #212121;
$color-fg: #ddd;
$color-primary: #40617d;
$color-primary-fg: $white;
$color-primary: #234d6e;
$color-primary-fg: $color-fg;
$color-primary-light: #536270;
$color-primary-light-fg: $color-primary-fg;
$color-primary-dark: #15354f;
$color-secondary: #424242;
$color-secondary: #6b6b6b;
$color-danger: #ff5370;
$color-danger: #da6758;
$color-danger-fg: $white;
$color-danger-light: #914649;
$color-danger-lighter: #8f8282;
$color-danger-lighter: #212121;
$color-success: #6baa7f;
$color-success: #1a522b;
$color-success-fg: $black;
$color-success-light: #5a7863;
$color-warning: #eea236;
$color-warning-fg: $black;
$color-warning-light: #fce5c5;
$color-warning-light: #b18d5a;
/* For dark theme - colors are in reverse order
* gray-dark is lighter then gray-light
*/
$color-gray-dark: #595959;
$color-gray: #424242;
$color-gray-dark: #212121;
$color-gray: #2e2e2e;
$color-gray-light: #303030;
$color-gray-lighter: #212121;
$color-gray-lighter: #424242;
$color-brand: $white;
$border-color: $color-gray;
$shadow-base-color: $color-gray-lighter;
$border-color: #4a4a4a;
$shadow-base-color: #111111;
$text-muted: #9d9fa1;
$input-bg: $color-gray-lighter;
$input-bg: $color-gray-light;
$input-color: $color-fg;
$input-disabled-bg: $color-bg;
@ -48,16 +45,20 @@ $popover-body-color: $color-fg;
$active-color: $color-fg;
$color-editor-fg: #9cdcfe;
$color-editor-keyword: #c58680;
$color-editor-number: #81bb67;
$color-editor-string: #dcdcaa;
$color-editor-variable: #9cdcfe;
$color-editor-variable-2: #9cdcfe;
$color-editor-builtin: #dcdcaa;
$color-editor-comment: #81bb67;
$color-editor-bracket: #d4d4d4;
$color-editor-operator: #d4d4d4;
$header-bg: $color-gray-lighter;
$table-bg: $color-gray-lighter;
$color-editor-fg: #7dc9f1;
$color-editor-keyword: #db7c74;
$color-editor-number: #7fcc5c;
$color-editor-string: #e4e487;
$color-editor-variable: #7dc9f1;
$color-editor-variable-2: #7dc9f1;
$color-editor-builtin: #e4e487;
$color-editor-comment: #7fcc5c;
$color-editor-bracket: #d6aaaa;
$color-editor-operator: #d6aaaa;
$color-editor-foldmarker: #0000FF !default;
$color-editor-activeline: #50B0F0 !default;
@ -69,5 +70,8 @@ $explain-sev-4-color: $color-fg;
$negative-bg: $color-bg;
$scrollbar-color: $color-gray-lighter!default;
$scrollbar-hover-color: #666666 !default;
$loader-icon : url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 38 38' style='enable-background:new 0 0 38 38;' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bfill:none;stroke:%23ebeef3;stroke-width:2;%7d .st1%7bfill:none;stroke:%2340617d;stroke-width:2;%7d %3c/style%3e%3cg%3e%3cg transform='translate(1 1)'%3e%3ccircle class='st0' cx='18' cy='18' r='18'/%3e%3cpath class='st1' d='M36,18c0-9.9-8.1-18-18-18 '%3e%3canimateTransform accumulate='none' additive='replace' attributeName='transform' calcMode='linear' dur='0.7s' fill='remove' from='0 18 18' repeatCount='indefinite' restart='always' to='360 18 18' type='rotate'%3e%3c/animateTransform%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e ") !default;
$loader-icon-small: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 38 38' style='enable-background:new 0 0 38 38;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23EBEEF3;stroke-width:5;%7D .st1%7Bfill:none;stroke:%2340617d;stroke-width:5;%7D%0A%3C/style%3E%3Cg%3E%3Cg transform='translate(1 1)'%3E%3Ccircle class='st0' cx='18' cy='18' r='16'/%3E%3Cpath class='st1' d='M34,18c0-8.8-7.2-16-16-16 '%3E%3CanimateTransform accumulate='none' additive='replace' attributeName='transform' calcMode='linear' dur='0.7s' fill='remove' from='0 18 18' repeatCount='indefinite' restart='always' to='360 18 18' type='rotate'%3E%3C/animateTransform%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") !default;

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

@ -220,7 +220,7 @@
</ul>
</div>
<div class="btn-group mr-1" role="group" aria-label="">
<select id="btn-rows-limit" class="limit" disabled
<select id="btn-rows-limit" class="limit form-control form-control-sm" disabled
title=""
accesskey=""
tabindex="0">

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

@ -252,6 +252,7 @@ input.editor-checkbox:focus {
.connection_status {
font-size: 1rem;
width: 40px;
}
.icon-query-tool-connected:before {

27
web/pgadmin/tools/sqleditor/static/scss/_sqleditor.scss
View File

@ -18,6 +18,11 @@
z-index: 0;
}
.connection_status {
background-color: $sql-title-bg;
color: $sql-title-fg;
border-right: $border-width solid $border-color;
}
.editor-title {
padding: $sql-title-padding;
@ -39,10 +44,6 @@
background: $color-primary-light;
}
.connection_status {
width: 40px;
}
.ajs-body .warn-icon {
color: $color-warning;
@ -57,16 +58,6 @@
border-bottom: $panel-border;
}
.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;
@ -330,14 +321,6 @@ div.strikeout:after {
}
}
.icon-query-tool-connected {
color: $color-primary;
}
.icon-query-tool-disconnected {
color: $color-danger;
}
.connection_status .obtaining-conn {
background-image: $loader-icon-small !important;
background-position: center center;

2
web/webpack.config.js
View File

@ -35,6 +35,7 @@ const devToolVal = PRODUCTION ? false : 'eval';
const analyzerMode = process.env.ANALYZE=='true' ? 'static' : 'disabled';
const outputPath = __dirname + '/pgadmin/static/js/generated';
const pgadminThemesJson = __dirname + '/pgadmin/misc/themes/pgadmin.themes.json';
// Expose libraries in app context so they need not to
// require('libname') when used in a module
@ -84,7 +85,6 @@ const bundleAnalyzer = new BundleAnalyzerPlugin({
reportFilename: 'analyze_report.html',
});
let pgadminThemesJson = 'pgadmin.themes.json';
const copyFiles = new CopyPlugin([
pgadminThemesJson,
{