>
> 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.
Thanks,
Sarah and Matt
On Mon, Jul 3, 2017 at 10:05 AM, George Gelashvili <ggelashv...@pivotal.io>
wrote:
> Hi
>
>> 2) Can 1px top border be added above first entry in left panel to
>> differentiate from above panels ?
>>
>> It sounds like you're describing the distinction between the query
> history entries and the Messages, History, etc. tab bar (screenshot
> attached).
> If so, the gray/blue contrast should be sufficient to differentiate.
>
> Thanks,
> Shirley and George
>
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/_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/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/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();
});
});
