Sorry Dave. It looks like we had formatted the patch incorrectly. We have
recreated the patch.
Matt and Sarah
On Wed, Jul 5, 2017 at 10:49 AM, Dave Page <dp...@pgadmin.org> wrote:
> Hi
>
> On Wed, Jul 5, 2017 at 2:54 PM, Matthew Kleiman <mklei...@pivotal.io>
> wrote:
>
>> 1) I see the font used for class .query-history .entry is monospace,
>>> shouldn't it be Helvetica as per style guide ? the font for Messages > text
>>> is also monospace.
>>>
>>
>> As per Dave's comment, we have added this to the styleguide backlog. We
>> will be adding monospace entries to the styleguide.
>>
>> 2) Can 1px top border be added above first entry in left panel to
>>> differentiate from above panels ?
>>
>>
>> We have updated the patch to include a 1px solid #cccccc border at the
>> top.
>>
>> 3) No query execution message appears if i run same query second time,
>>> please refer screenshot.
>>
>>
>> Appears to be fixed with Murtuza's patch.
>>
>
> I get the following error with this patch when bundling:
>
> [235] ./scss/pgadmin.scss 1.1 kB {3} [built] [failed] [1 error]
> + 363 hidden modules
>
> ERROR in ./scss/pgadmin.scss
> Module build failed:
> @import 'primaryblue';
> ^
> File to import not found or unreadable: primaryblue.
> Parent style sheet: stdin
> in /Users/dpage/git/pgadmin4/web/pgadmin/static/scss/pgadmin.scss
> (line 4, column 1)
>
> ERROR in ./scss/pgadmin.scss
> Module build failed: ModuleBuildError: Module build failed:
> @import 'primaryblue';
> ^
> File to import not found or unreadable: primaryblue.
> Parent style sheet: stdin
> in /Users/dpage/git/pgadmin4/web/pgadmin/static/scss/pgadmin.scss
> (line 4, column 1)
> at runLoaders (/Users/dpage/git/pgadmin4/web/node_modules/webpack/lib/
> NormalModule.js:192:19)
> at /Users/dpage/git/pgadmin4/web/node_modules/loader-runner/
> lib/LoaderRunner.js:364:11
> at /Users/dpage/git/pgadmin4/web/node_modules/loader-runner/
> lib/LoaderRunner.js:230:18
> at context.callback (/Users/dpage/git/pgadmin4/
> web/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
> at Object.asyncSassJobQueue.push [as callback]
> (/Users/dpage/git/pgadmin4/web/node_modules/sass-loader/
> lib/loader.js:55:13)
> at Object.<anonymous> (/Users/dpage/git/pgadmin4/
> web/node_modules/async/dist/async.js:2243:31)
> at Object.callback (/Users/dpage/git/pgadmin4/
> web/node_modules/async/dist/async.js:906:16)
> at options.error (/Users/dpage/git/pgadmin4/
> web/node_modules/node-sass/lib/index.js:294:32)
> Child extract-text-webpack-plugin:
> [0] /Users/dpage/git/pgadmin4/web/~/css-loader!/Users/dpage/git/
> pgadmin4/web/~/sass-loader/lib/loader.js!./scss/pgadmin.scss 247 bytes
> {0} [built] [failed] [1 error]
>
> ERROR in /Users/dpage/git/pgadmin4/web/~/css-loader!/Users/dpage/git/
> pgadmin4/web/~/sass-loader/lib/loader.js!./scss/pgadmin.scss
> Module build failed:
> @import 'primaryblue';
> ^
> File to import not found or unreadable: primaryblue.
> Parent style sheet: stdin
> in /Users/dpage/git/pgadmin4/web/pgadmin/static/scss/pgadmin.scss
> (line 4, column 1)
>
>
>
> --
> Dave Page
> Blog: http://pgsnake.blogspot.com
> Twitter: @pgsnake
>
> EnterpriseDB UK: http://www.enterprisedb.com
> The Enterprise PostgreSQL Company
>
diff --git a/web/pgadmin/static/jsx/history/detail/history_detail_message.jsx
b/web/pgadmin/static/jsx/history/detail/history_detail_message.jsx
index 7a379678..8cf077ab 100644
--- a/web/pgadmin/static/jsx/history/detail/history_detail_message.jsx
+++ b/web/pgadmin/static/jsx/history/detail/history_detail_message.jsx
@@ -10,44 +10,17 @@
import React from 'react';
import Shapes from '../../react_shapes';
-import NonSelectableElementStyle from '../../styles/non_selectable';
-import MessageHeaderStyle from '../../styles/header_label';
-
-const containerStyle = {
- flex: '2 2 0%',
- flexDirection: 'column',
- display: 'flex',
-};
-
-const messageContainerStyle = {
- flex: '0 1 auto',
- overflow: 'auto',
- position: 'relative',
- height: '100%',
-};
-
-const errorMessageStyle = {
- border: '0',
- paddingLeft: '0',
- backgroundColor: '#ffffff',
- fontSize: '13px',
- position: 'absolute',
-};
-
-const messageLabelStyle = _.extend({flex: '0 0 auto'},
- MessageHeaderStyle,
- NonSelectableElementStyle);
export default class HistoryDetailMessage extends React.Component {
render() {
return (
- <div style={containerStyle}>
- <div style={messageLabelStyle}>
+ <div className='message'>
+ <div className='message-header'>
Messages
</div>
- <div style={messageContainerStyle}>
- <pre style={errorMessageStyle}>
+ <div className='content'>
+ <pre className='content-value'>
{this.props.historyEntry.message}
</pre>
</div>
diff --git a/web/pgadmin/static/jsx/history/detail/history_detail_metadata.jsx
b/web/pgadmin/static/jsx/history/detail/history_detail_metadata.jsx
index bfe2b53f..3331f152 100644
--- a/web/pgadmin/static/jsx/history/detail/history_detail_metadata.jsx
+++ b/web/pgadmin/static/jsx/history/detail/history_detail_metadata.jsx
@@ -10,18 +10,6 @@
import React from 'react';
import moment from 'moment';
import Shapes from '../../react_shapes';
-import HeaderDescriptionStyle from '../../styles/header_label';
-
-const queryMetaDataStyle = {
- flex: 1,
-};
-const headerStyle = {
- display: 'flex',
-};
-const headerValueStyle = {
- display: 'block',
- fontSize: '14px',
-};
export default class HistoryDetailMetadata extends React.Component {
@@ -30,18 +18,18 @@ export default class HistoryDetailMetadata extends
React.Component {
}
queryMetaData(data, description) {
- return <div style={queryMetaDataStyle}>
- <span style={headerValueStyle}>
+ return <div className='item'>
+ <span className='value'>
{data}
</span>
- <span style={HeaderDescriptionStyle}>
+ <span className='description'>
{description}
</span>
</div>;
}
render() {
- return <div style={headerStyle}>
+ return <div className='metadata'>
{this.queryMetaData(this.formatDate(this.props.historyEntry.start_time),
'Date')}
{this.queryMetaData(this.props.historyEntry.row_affected.toLocaleString(),
'Rows Affected')}
{this.queryMetaData(this.props.historyEntry.total_time, 'Duration')}
diff --git a/web/pgadmin/static/jsx/history/entry/query_history_error_entry.jsx
b/web/pgadmin/static/jsx/history/entry/query_history_error_entry.jsx
deleted file mode 100644
index 5071d1b2..00000000
--- a/web/pgadmin/static/jsx/history/entry/query_history_error_entry.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-/////////////////////////////////////////////////////////////
-//
-// pgAdmin 4 - PostgreSQL Tools
-//
-// Copyright (C) 2013 - 2017, The pgAdmin Development Team
-// This software is released under the PostgreSQL Licence
-//
-//////////////////////////////////////////////////////////////
-
-import QueryHistoryVanillaEntry from './query_history_vanilla_entry';
-import update from 'immutability-helper';
-import {errorStyle} from '../../styles/history_entry_styles';
-
-export default class QueryHistoryErrorEntry extends QueryHistoryVanillaEntry {
- componentWillMount() {
- this.setState({
- outerDivStyle: update(this.state.outerDivStyle, {$merge: errorStyle}),
- });
- }
-}
\ No newline at end of file
diff --git
a/web/pgadmin/static/jsx/history/entry/query_history_selected_entry.jsx
b/web/pgadmin/static/jsx/history/entry/query_history_selected_entry.jsx
deleted file mode 100644
index 36940456..00000000
--- a/web/pgadmin/static/jsx/history/entry/query_history_selected_entry.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/////////////////////////////////////////////////////////////
-//
-// pgAdmin 4 - PostgreSQL Tools
-//
-// Copyright (C) 2013 - 2017, The pgAdmin Development Team
-// This software is released under the PostgreSQL Licence
-//
-//////////////////////////////////////////////////////////////
-
-import QueryHistoryVanillaEntry from './query_history_vanilla_entry';
-import update from 'immutability-helper';
-import {selectedFontStyle, selectedOuterStyle} from
'../../styles/history_entry_styles';
-
-export default class QueryHistorySelectedEntry extends
QueryHistoryVanillaEntry {
- componentWillMount() {
- this.setState({
- outerDivStyle: update(this.state.outerDivStyle, {$merge:
selectedOuterStyle}),
- secondLineStyle: update(this.state.secondLineStyle, {$merge:
selectedFontStyle}),
- });
- }
-}
\ No newline at end of file
diff --git
a/web/pgadmin/static/jsx/history/entry/query_history_selected_error_entry.jsx
b/web/pgadmin/static/jsx/history/entry/query_history_selected_error_entry.jsx
deleted file mode 100644
index 5d73f46b..00000000
---
a/web/pgadmin/static/jsx/history/entry/query_history_selected_error_entry.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-/////////////////////////////////////////////////////////////
-//
-// pgAdmin 4 - PostgreSQL Tools
-//
-// Copyright (C) 2013 - 2017, The pgAdmin Development Team
-// This software is released under the PostgreSQL Licence
-//
-//////////////////////////////////////////////////////////////
-
-import QueryHistoryVanillaEntry from './query_history_vanilla_entry';
-import update from 'immutability-helper';
-import {selectedFontStyle, selectedOuterStyle, selectedErrorBgColor} from
'../../styles/history_entry_styles';
-
-export default class QueryHistorySelectedErrorEntry extends
QueryHistoryVanillaEntry {
- componentWillMount() {
- let selectedErrorStyle = update(selectedOuterStyle, {$merge:
selectedErrorBgColor});
- this.setState({
- outerDivStyle: update(this.state.outerDivStyle, {$merge:
selectedErrorStyle}),
- secondLineStyle: update(this.state.secondLineStyle, {$merge:
selectedFontStyle}),
- });
- }
-}
\ No newline at end of file
diff --git
a/web/pgadmin/static/jsx/history/entry/query_history_vanilla_entry.jsx
b/web/pgadmin/static/jsx/history/entry/query_history_vanilla_entry.jsx
deleted file mode 100644
index b52a76d1..00000000
--- a/web/pgadmin/static/jsx/history/entry/query_history_vanilla_entry.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-/////////////////////////////////////////////////////////////
-//
-// pgAdmin 4 - PostgreSQL Tools
-//
-// Copyright (C) 2013 - 2017, The pgAdmin Development Team
-// This software is released under the PostgreSQL Licence
-//
-//////////////////////////////////////////////////////////////
-
-import React from 'react';
-import moment from 'moment';
-import Shapes from '../../react_shapes';
-import {plainOuterDivStyle, plainSecondLineStyle, sqlStyle, timestampStyle}
from '../../styles/history_entry_styles';
-
-export default class QueryHistoryVanillaEntry extends React.Component {
- formatDate(date) {
- return (moment(date).format('MMM D YYYY [–] HH:mm:ss'));
- }
-
- constructor(props) {
- super(props);
- this.state = {
- outerDivStyle: plainOuterDivStyle,
- secondLineStyle: plainSecondLineStyle,
- };
- }
-
- render() {
- return (
- <div style={this.state.outerDivStyle}>
- <div style={sqlStyle}>
- {this.props.historyEntry.query}
- </div>
- <div style={this.state.secondLineStyle}>
- <div style={timestampStyle}>
- {this.formatDate(this.props.historyEntry.start_time)}
- </div>
- </div>
- </div>
- );
- }
-}
-
-QueryHistoryVanillaEntry.propTypes = {
- historyEntry: Shapes.historyDetail,
- isSelected: React.PropTypes.bool,
-};
\ No newline at end of file
diff --git a/web/pgadmin/static/jsx/history/query_history.jsx
b/web/pgadmin/static/jsx/history/query_history.jsx
index 37c7ee7d..0d9222db 100644
--- a/web/pgadmin/static/jsx/history/query_history.jsx
+++ b/web/pgadmin/static/jsx/history/query_history.jsx
@@ -19,9 +19,6 @@ const queryEntryListDivStyle = {
const queryDetailDivStyle = {
display: 'flex',
};
-const liStyle = {
- borderBottom: '1px solid #cccccc',
-};
export default class QueryHistory extends React.Component {
@@ -75,11 +72,11 @@ export default class QueryHistory extends React.Component {
return (
<SplitPane defaultSize="50%" split="vertical"
pane1Style={queryEntryListDivStyle}
pane2Style={queryDetailDivStyle}>
- <div id='query_list'>
+ <div id='query_list' className="query-history">
<ul>
{this.retrieveOrderedHistory()
.map((entry, index) =>
- <li key={index} style={liStyle}
onClick={this.onClickHandler.bind(this, index)}>
+ <li key={index} className='list-item'
onClick={this.onClickHandler.bind(this, index)}>
<QueryHistoryEntry historyEntry={entry} isSelected={index ==
this.state.selectedEntry}/>
</li>)
.value()
diff --git a/web/pgadmin/static/jsx/history/query_history_detail.jsx
b/web/pgadmin/static/jsx/history/query_history_detail.jsx
index 254213dd..ec391f6a 100644
--- a/web/pgadmin/static/jsx/history/query_history_detail.jsx
+++ b/web/pgadmin/static/jsx/history/query_history_detail.jsx
@@ -13,54 +13,22 @@ import HistoryDetailQuery from
'./detail/history_detail_query';
import HistoryDetailMessage from './detail/history_detail_message';
import Shapes from '../react_shapes';
-const outerStyle = {
- width: '100%',
- paddingTop: '10px',
- display: 'flex',
- flexDirection: 'column',
-};
-
-const detailVerticalTop = {
- flex: 1,
- padding: '0 10px',
-};
-
-const detailVerticalMiddle = {
- flex: 5,
- marginLeft: '10px',
- marginRight: '10px',
- height: 0,
- position: 'relative',
-};
-
-const hrStyle = {
- borderColor: '#cccccc',
- marginTop: '11px',
- marginBottom: '8px',
-};
-
-const detailVerticalBottom = {
- flex: 2,
- display: 'flex',
- paddingLeft: '10px',
-};
-
export default class QueryHistoryDetail extends React.Component {
render() {
if (!_.isUndefined(this.props.historyEntry)) {
return (
- <div id='query_detail' style={outerStyle}>
- <div style={detailVerticalTop}>
+ <div id='query_detail' className='query-detail'>
+ <div className='metadata-block'>
<HistoryDetailMetadata {...this.props} />
</div>
- <div style={detailVerticalMiddle}>
+ <div className='query-statement-block'>
<HistoryDetailQuery {...this.props}/>
</div>
<div>
- <hr style={hrStyle}/>
+ <hr className='block-divider'/>
</div>
- <div style={detailVerticalBottom}>
+ <div className='message-block'>
<HistoryDetailMessage {...this.props}/>
</div>
</div>);
diff --git a/web/pgadmin/static/jsx/history/query_history_entry.jsx
b/web/pgadmin/static/jsx/history/query_history_entry.jsx
index c18ec0a8..f2166081 100644
--- a/web/pgadmin/static/jsx/history/query_history_entry.jsx
+++ b/web/pgadmin/static/jsx/history/query_history_entry.jsx
@@ -9,24 +9,40 @@
import React from 'react';
import Shapes from '../react_shapes';
-import QueryHistoryErrorEntry from './entry/query_history_error_entry';
-import QueryHistorySelectedErrorEntry from
'./entry/query_history_selected_error_entry';
-import QueryHistorySelectedEntry from './entry/query_history_selected_entry';
-import QueryHistoryVanillaEntry from './entry/query_history_vanilla_entry';
+import moment from 'moment';
export default class QueryHistoryEntry extends React.Component {
+ formatDate(date) {
+ return (moment(date).format('MMM D YYYY [–] HH:mm:ss'));
+ }
+
+ renderWithClasses(outerDivStyle) {
+ return (
+ <div className={'entry ' + outerDivStyle}>
+ <div className='query'>
+ {this.props.historyEntry.query}
+ </div>
+ <div className='other-info'>
+ <div className='timestamp'>
+ {this.formatDate(this.props.historyEntry.start_time)}
+ </div>
+ </div>
+ </div>
+ );
+ }
+
render() {
if (this.hasError()) {
if (this.props.isSelected) {
- return <QueryHistorySelectedErrorEntry {...this.props}/>;
+ return this.renderWithClasses('error selected');
} else {
- return <QueryHistoryErrorEntry {...this.props}/>;
+ return this.renderWithClasses('error');
}
} else {
if (this.props.isSelected) {
- return <QueryHistorySelectedEntry {...this.props}/>;
+ return this.renderWithClasses('selected');
} else {
- return <QueryHistoryVanillaEntry {...this.props}/>;
+ return this.renderWithClasses('');
}
}
}
diff --git a/web/pgadmin/static/jsx/styles/header_label.js
b/web/pgadmin/static/jsx/styles/header_label.js
deleted file mode 100644
index 5aaed0a5..00000000
--- a/web/pgadmin/static/jsx/styles/header_label.js
+++ /dev/null
@@ -1,14 +0,0 @@
-//////////////////////////////////////////////////////////////////////////
-//
-// pgAdmin 4 - PostgreSQL Tools
-//
-// Copyright (C) 2013 - 2017, The pgAdmin Development Team
-// This software is released under the PostgreSQL Licence
-//
-//////////////////////////////////////////////////////////////////////////
-
-export default {
- display: 'block',
- fontSize: '12px',
- color: '#888888',
-};
diff --git a/web/pgadmin/static/jsx/styles/history_entry_styles.js
b/web/pgadmin/static/jsx/styles/history_entry_styles.js
deleted file mode 100644
index 5b3a629e..00000000
--- a/web/pgadmin/static/jsx/styles/history_entry_styles.js
+++ /dev/null
@@ -1,57 +0,0 @@
-//////////////////////////////////////////////////////////////////////////
-//
-// pgAdmin 4 - PostgreSQL Tools
-//
-// Copyright (C) 2013 - 2017, The pgAdmin Development Team
-// This software is released under the PostgreSQL Licence
-//
-//////////////////////////////////////////////////////////////////////////
-
-import update from 'immutability-helper';
-
-export const plainOuterDivStyle = {
- paddingLeft: '8px',
- paddingRight: '18px',
- paddingTop: '-2px',
- paddingBottom: '-2px',
- fontFamily: 'monospace',
- fontSize: '14px',
- backgroundColor: '#FFF',
- border: '2px solid transparent',
- marginLeft: '1px',
-};
-
-export const sqlStyle = {
- textOverflow: 'ellipsis',
- overflow: 'hidden',
- whiteSpace: 'nowrap',
- userSelect: 'auto',
-};
-
-export const plainSecondLineStyle = {
- display: 'flex',
- flexDirection: 'row',
- justifyContent: 'space-between',
- fontSize: '13px',
- color: '#888888',
-};
-
-export const timestampStyle = {
- alignSelf: 'flex-start',
-};
-
-export const selectedFontStyle = {
- color: '#2c76b4',
- fontWeight: 'bold',
-};
-
-export const selectedOuterStyle = update(selectedFontStyle, {
- $merge: {
- border: '2px solid #2c76b4',
- backgroundColor: '#e7f2ff',
- },
-});
-
-export const errorStyle = {backgroundColor: '#F7D0D5'};
-
-export const selectedErrorBgColor = {backgroundColor: '#DCC4D1'};
\ No newline at end of file
diff --git a/web/pgadmin/static/jsx/styles/non_selectable.js
b/web/pgadmin/static/jsx/styles/non_selectable.js
deleted file mode 100644
index 065fe60f..00000000
--- a/web/pgadmin/static/jsx/styles/non_selectable.js
+++ /dev/null
@@ -1,18 +0,0 @@
-//////////////////////////////////////////////////////////////////////////
-//
-// pgAdmin 4 - PostgreSQL Tools
-//
-// Copyright (C) 2013 - 2017, The pgAdmin Development Team
-// This software is released under the PostgreSQL Licence
-//
-//////////////////////////////////////////////////////////////////////////
-
-export default {
- WebkitTouchCallout: 'none',
- WebkitUserSelect: 'none',
- KhtmlUserSelect: 'none',
- MozUserSelect: 'none',
- msUserSelect: 'none',
- userSelect: 'none',
- cursor: 'default',
-};
diff --git a/web/pgadmin/static/scss/_colorsgrey.scss
b/web/pgadmin/static/scss/_colorsgrey.scss
new file mode 100644
index 00000000..d7108eaf
--- /dev/null
+++ b/web/pgadmin/static/scss/_colorsgrey.scss
@@ -0,0 +1,126 @@
+/*doc
+---
+title: Grays
+name: Grays
+category: colors
+---
+For text, avoid using black or #000 to lower the contrast between the
background and text.
+
+```html_example
+<div class="row">
+ <div class="row">
+ <div class="col-xs-6 col-md-3">
+ <div class="color-chip bg-gray-1">
+ #f9f9f9
+ </div>
+ </div>
+ <div class="col-xs-6 col-md-3">
+ <div class="color-chip bg-gray-2">
+ #e8e8e8
+ </div>
+ </div>
+ <div class="col-xs-6 col-md-3">
+ <div class="color-chip bg-gray-3">
+ #cccccc
+ </div>
+ </div>
+ <div class="col-xs-6 col-md-3">
+ <div class="color-chip bg-gray-4">
+ #888888
+ </div>
+ </div>
+ <div class="col-xs-6 col-md-3">
+ <div class="color-chip bg-gray-5 font-white">
+ #555555
+ </div>
+ </div>
+ <div class="col-xs-6 col-md-3">
+ <div class="color-chip bg-gray-6 font-white">
+ #333333
+ </div>
+ </div>
+ </div>
+</div>
+```
+
+*/
+
+.color-chip {
+ align-items: center;
+ border-radius: 3px;
+ box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, .15);
+ color: rgba(0, 0, 0, .65);
+ display: flex;
+ font-size: 1.25em;
+ height: 100px;
+ justify-content: center;
+ margin: 0 0 1em;
+ width: 100%;
+}
+
+$color-gray-1: #f9f9f9;
+$color-gray-2: #e8e8e8;
+$color-gray-3: #cccccc;
+$color-gray-4: #888888;
+$color-gray-5: #555555;
+$color-gray-6: #333333;
+
+.bg-gray-1 {
+ background-color: $color-gray-1;
+}
+
+.bg-gray-2 {
+ background-color: $color-gray-2;
+}
+
+.bg-gray-3 {
+ background-color: $color-gray-3;
+}
+
+.bg-gray-4 {
+ background-color: $color-gray-4;
+}
+
+.bg-gray-5 {
+ background-color: $color-gray-5;
+}
+
+.bg-gray-6 {
+ background-color: $color-gray-6;
+}
+
+.border-gray-1 {
+ border-color: $color-gray-1;
+}
+
+.border-gray-2 {
+ border-color: $color-gray-2;
+}
+
+.border-gray-3 {
+ border-color: $color-gray-3;
+}
+
+.border-gray-4 {
+ border-color: $color-gray-4;
+}
+
+.border-gray-5 {
+ border-color: $color-gray-5;
+}
+
+.border-gray-6 {
+ border-color: $color-gray-6;
+}
+
+.font-gray-4 {
+ color: $color-gray-4;
+}
+
+.font-gray-6 {
+ color: $color-gray-6;
+}
+
+.font-white {
+ color: #FFFFFF;
+}
diff --git a/web/pgadmin/static/scss/_othercolors.scss
b/web/pgadmin/static/scss/_othercolors.scss
index 92cfe5af..9c5c3574 100644
--- a/web/pgadmin/static/scss/_othercolors.scss
+++ b/web/pgadmin/static/scss/_othercolors.scss
@@ -79,6 +79,10 @@ These colors should be used to highlight hover options in
dropdown menus and cat
width: 100%;
}
+.bg-white-1 {
+ background-color: #ffffff;
+}
+
.bg-blue-1 {
background-color: #e7f2ff;
}
diff --git a/web/pgadmin/static/scss/_primaryblue.scss
b/web/pgadmin/static/scss/_primaryblue.scss
new file mode 100644
index 00000000..ac7b1cfd
--- /dev/null
+++ b/web/pgadmin/static/scss/_primaryblue.scss
@@ -0,0 +1,49 @@
+/*doc
+---
+title: Primary blue
+name: colors-primaryblue
+category: colors
+---
+This color should be used to call attention to the main part of the app. Use
sparingly.
+
+```html_example
+<div class="row">
+ <div class="row">
+ <div class="col-xs-6 col-md-3">
+ <div class="color-chip bg-primary-blue font-white">
+ #2c76b4
+ </div>
+ </div>
+ </div>
+</div>
+
+```
+
+*/
+
+.color-chip {
+ align-items: center;
+ border-radius: 3px;
+ box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, .15);
+ color: rgba(0, 0, 0, .65);
+ display: flex;
+ font-size: 1.25em;
+ height: 100px;
+ justify-content: center;
+ margin: 0 0 1em;
+ width: 100%;
+}
+
+$primary-blue: #2c76b4;
+
+.bg-primary-blue {
+ background-color: $primary-blue;
+}
+
+.border-primary-blue {
+ border-color: $primary-blue;
+}
+
+.font-primary-blue {
+ color: $primary-blue;
+}
diff --git a/web/pgadmin/static/scss/_utils.scss
b/web/pgadmin/static/scss/_utils.scss
new file mode 100644
index 00000000..ed749243
--- /dev/null
+++ b/web/pgadmin/static/scss/_utils.scss
@@ -0,0 +1,9 @@
+.not-selectable {
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ ms-user-select: none;
+ user-select: none;
+ cursor: default;
+}
\ No newline at end of file
diff --git a/web/pgadmin/static/scss/pgadmin.scss
b/web/pgadmin/static/scss/pgadmin.scss
index e9992418..6695445c 100644
--- a/web/pgadmin/static/scss/pgadmin.scss
+++ b/web/pgadmin/static/scss/pgadmin.scss
@@ -1,6 +1,12 @@
$enable-flex: false;
@import 'alert';
+@import 'primaryblue';
+@import 'colorsgrey';
@import 'othercolors';
@import 'typography';
+
+@import 'utils';
+
@import 'alertify.overrides';
+@import 'sqleditor/history';
diff --git a/web/pgadmin/static/scss/sqleditor/_history.scss
b/web/pgadmin/static/scss/sqleditor/_history.scss
new file mode 100644
index 00000000..c8255762
--- /dev/null
+++ b/web/pgadmin/static/scss/sqleditor/_history.scss
@@ -0,0 +1,139 @@
+.query-history {
+ .list-item {
+ border-bottom: 1px solid $color-gray-3;
+ }
+
+ .entry {
+ @extend .text-14;
+ @extend .bg-white-1;
+ padding: -2px 18px -2px 8px;
+ font-family: monospace;
+ border: 2px solid transparent;
+ margin-left: 1px;
+
+ .other-info{
+ @extend .text-13;
+ @extend .font-gray-4;
+ font-family: monospace;
+ 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;
+ }
+ }
+
+ .entry.error {
+ @extend .bg-red-1;
+ }
+
+ .entry.selected.error {
+ background-color: #d7d0d9;
+ }
+
+ .entry.selected {
+ @extend .font-primary-blue;
+ @extend .border-primary-blue;
+ @extend .bg-blue-1;
+ font-weight: bold;
+ border: 2px solid;
+
+ .other-info{
+ @extend .font-primary-blue;
+ font-weight: bold;
+ }
+ }
+}
+
+.header-label {
+ @extend .text-12;
+ @extend .font-gray-4;
+ display: block;
+}
+
+.query-detail {
+ width: 100%;
+ padding-top: 10px;
+ display: flex;
+ flex-direction: column;
+
+ .metadata-block {
+ flex: 1;
+ padding: 0 10px;
+
+ .metadata {
+ display: flex;
+
+ .item {
+ flex: 1;
+
+ .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;
+ }
+
+ .block-divider {
+ @extend .border-gray-3;
+ margin-top: 11px;
+ margin-bottom: 8px;
+ }
+
+ .message-block {
+ flex: 2;
+ display: flex;
+ padding-left: 10px;
+
+ .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-1;
+ @extend .text-13;
+ font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+ border: 0;
+ padding-left: 0;
+ position: absolute;
+ }
+ }
+ }
+ }
+}
diff --git a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
index b1b75727..a9c2e168 100644
--- a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
+++ b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
@@ -118,6 +118,7 @@
.sql-editor-history-container {
height: 100%;
overflow: auto;
+ border-top: 1px solid #cccccc;
}
.sql-status-cell {
diff --git a/web/regression/javascript/history/query_history_spec.jsx
b/web/regression/javascript/history/query_history_spec.jsx
index ef61d1ce..c39b9a1e 100644
--- a/web/regression/javascript/history/query_history_spec.jsx
+++ b/web/regression/javascript/history/query_history_spec.jsx
@@ -94,12 +94,13 @@ describe('QueryHistory', () => {
it('renders the most recent query as selected', () => {
expect(foundChildren.at(0).nodes.length).toBe(1);
-
expect(foundChildren.at(0).find('QueryHistorySelectedEntry').length).toBe(1);
+ expect(foundChildren.at(0).hasClass('selected')).toBeTruthy();
});
it('renders the older query as not selected', () => {
expect(foundChildren.at(1).nodes.length).toBe(1);
-
expect(foundChildren.at(1).find('QueryHistoryErrorEntry').length).toBe(1);
+ expect(foundChildren.at(1).hasClass('selected')).toBeFalsy();
+ expect(foundChildren.at(1).hasClass('error')).toBeTruthy();
});
});
@@ -143,12 +144,14 @@ describe('QueryHistory', () => {
it('renders the most recent query as selected in the left pane', () =>
{
expect(foundChildren.at(0).nodes.length).toBe(1);
-
expect(foundChildren.at(0).find('QueryHistoryVanillaEntry').length).toBe(1);
+ expect(foundChildren.at(0).hasClass('selected')).toBeFalsy();
+ expect(foundChildren.at(0).hasClass('error')).toBeFalsy();
});
it('renders the older query as selected in the left pane', () => {
expect(foundChildren.at(1).nodes.length).toBe(1);
-
expect(foundChildren.at(1).find('QueryHistorySelectedErrorEntry').length).toBe(1);
+ expect(foundChildren.at(1).hasClass('selected')).toBeTruthy();
+ expect(foundChildren.at(1).hasClass('error')).toBeTruthy();
});
});
