This is an automated email from the ASF dual-hosted git repository. maximebeauchemin pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
The following commit(s) were added to refs/heads/master by this push: new a6390af style: push bootstrap theme towards SIP-34 styles (#10056) a6390af is described below commit a6390afb8972f315a0e5c87e618e21708e596f36 Author: Maxime Beauchemin <maximebeauche...@gmail.com> AuthorDate: Thu Jun 18 15:01:58 2020 -0700 style: push bootstrap theme towards SIP-34 styles (#10056) * feat: cartel theme * piling * more tweaks * Make things look better * lint * fix tests * paint it black * tweaks --- setup.cfg | 2 +- .../cypress/integration/sqllab/tabs.js | 6 +- .../explore/components/QueryAndSaveBtns_spec.jsx | 2 +- .../spec/javascripts/sqllab/SqlEditor_spec.jsx | 2 +- .../src/SqlLab/components/RunQueryActionButton.tsx | 4 +- .../src/SqlLab/components/SaveQuery.jsx | 2 +- .../src/SqlLab/components/ShareSqlLabQuery.jsx | 2 +- .../src/SqlLab/components/SqlEditor.jsx | 19 ++--- .../src/SqlLab/components/TabbedSqlEditors.jsx | 94 +++++++++++++--------- superset-frontend/src/SqlLab/main.less | 2 +- .../src/components/ListView/LegacyFilters.tsx | 9 ++- .../src/components/ListView/ListView.tsx | 4 +- .../src/explore/components/QueryAndSaveBtns.css | 21 +++++ .../src/explore/components/QueryAndSaveBtns.jsx | 9 ++- .../stylesheets/less/cosmo/bootswatch.less | 10 ++- .../stylesheets/less/cosmo/variables.less | 10 +-- superset-frontend/stylesheets/less/variables.less | 38 ++++++--- superset-frontend/stylesheets/superset.less | 2 +- 18 files changed, 148 insertions(+), 90 deletions(-) diff --git a/setup.cfg b/setup.cfg index 7c13f5e..eef0e37 100644 --- a/setup.cfg +++ b/setup.cfg @@ -45,7 +45,7 @@ combine_as_imports = true include_trailing_comma = true line_length = 88 known_first_party = superset -known_third_party =alembic,apispec,backoff,bleach,cachelib,celery,click,colorama,contextlib2,croniter,cryptography,dateutil,flask,flask_appbuilder,flask_babel,flask_caching,flask_compress,flask_login,flask_migrate,flask_sqlalchemy,flask_talisman,flask_testing,flask_wtf,geohash,geopy,humanize,isodate,jinja2,markdown,markupsafe,marshmallow,msgpack,numpy,pandas,parsedatetime,pathlib2,polyline,prison,pyarrow,pyhive,pytz,retry,selenium,setuptools,simplejson,sphinx_rtd_theme,sqlalchemy,sqlalch [...] +known_third_party =alembic,apispec,backoff,bleach,cachelib,celery,click,colorama,contextlib2,croniter,cryptography,dateutil,flask,flask_appbuilder,flask_babel,flask_caching,flask_compress,flask_login,flask_migrate,flask_sqlalchemy,flask_talisman,flask_testing,flask_wtf,geohash,geopy,humanize,isodate,jinja2,markdown,markupsafe,marshmallow,msgpack,numpy,pandas,parsedatetime,pathlib2,polyline,prison,pyarrow,pyhive,pytz,retry,selenium,setuptools,simplejson,slack,sphinx_rtd_theme,sqlalchemy,s [...] multi_line_output = 3 order_by_type = false diff --git a/superset-frontend/cypress-base/cypress/integration/sqllab/tabs.js b/superset-frontend/cypress-base/cypress/integration/sqllab/tabs.js index 8dd5493..f4a1f93 100644 --- a/superset-frontend/cypress-base/cypress/integration/sqllab/tabs.js +++ b/superset-frontend/cypress-base/cypress/integration/sqllab/tabs.js @@ -43,12 +43,10 @@ export default () => { const initialTabCount = tabListA.length; // open the tab dropdown to remove - cy.get( - '#a11y-query-editor-tabs > ul > li:first button:nth-child(2)', - ).click(); + cy.get('#a11y-query-editor-tabs > ul > li .dropdown-toggle').click(); // first item is close - cy.get('#a11y-query-editor-tabs > ul > li:first ul li a').eq(0).click(); + cy.get('#a11y-query-editor-tabs .close-btn a').click(); cy.get('#a11y-query-editor-tabs > ul > li').should( 'have.length', diff --git a/superset-frontend/spec/javascripts/explore/components/QueryAndSaveBtns_spec.jsx b/superset-frontend/spec/javascripts/explore/components/QueryAndSaveBtns_spec.jsx index ec9bfe9..2126265 100644 --- a/superset-frontend/spec/javascripts/explore/components/QueryAndSaveBtns_spec.jsx +++ b/superset-frontend/spec/javascripts/explore/components/QueryAndSaveBtns_spec.jsx @@ -49,7 +49,7 @@ describe('QueryAndSaveButtons', () => { }); it('renders buttons with correct text', () => { - expect(wrapper.find(Button).contains(' Run Query')).toBe(true); + expect(wrapper.find(Button).contains('Run')).toBe(true); expect(wrapper.find(Button).contains(' Save')).toBe(true); }); diff --git a/superset-frontend/spec/javascripts/sqllab/SqlEditor_spec.jsx b/superset-frontend/spec/javascripts/sqllab/SqlEditor_spec.jsx index 2c7b1e3..2ee4689 100644 --- a/superset-frontend/spec/javascripts/sqllab/SqlEditor_spec.jsx +++ b/superset-frontend/spec/javascripts/sqllab/SqlEditor_spec.jsx @@ -109,7 +109,7 @@ describe('SqlEditor', () => { it('allows toggling autocomplete', () => { const wrapper = shallow(<SqlEditor {...mockedProps} />); expect(wrapper.find(AceEditorWrapper).props().autocomplete).toBe(true); - wrapper.find(Checkbox).props().onChange(); + wrapper.find('.autocomplete').simulate('click'); expect(wrapper.find(AceEditorWrapper).props().autocomplete).toBe(false); }); }); diff --git a/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx b/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx index 2d94c73..d6c1974 100644 --- a/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx +++ b/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx @@ -42,7 +42,7 @@ const RunQueryActionButton = ({ stopQuery = NO_OP, sql, }: Props) => { - const runBtnText = selectedText ? t('Run Selected Query') : t('Run Query'); + const runBtnText = selectedText ? t('Run Selected Query') : t('Run'); const btnStyle = selectedText ? 'warning' : 'primary'; const shouldShowStopBtn = !!queryState && ['running', 'pending'].indexOf(queryState) > -1; @@ -68,7 +68,7 @@ const RunQueryActionButton = ({ tooltip={t('Run query asynchronously (Ctrl + ↵)')} disabled={!sql.trim()} > - <i className="fa fa-table" /> {runBtnText} + <i className="fa fa-bolt" /> {runBtnText} </Button> ); } diff --git a/superset-frontend/src/SqlLab/components/SaveQuery.jsx b/superset-frontend/src/SqlLab/components/SaveQuery.jsx index 4181980..025326a 100644 --- a/superset-frontend/src/SqlLab/components/SaveQuery.jsx +++ b/superset-frontend/src/SqlLab/components/SaveQuery.jsx @@ -172,7 +172,7 @@ class SaveQuery extends React.PureComponent { className="toggleSave" onClick={this.toggleSave} > - <i className="fa fa-save" /> {t('Save Query')} + <i className="fa fa-save" /> {t('Save')} </Button> } bsSize="small" diff --git a/superset-frontend/src/SqlLab/components/ShareSqlLabQuery.jsx b/superset-frontend/src/SqlLab/components/ShareSqlLabQuery.jsx index cc1e548..f80ecec 100644 --- a/superset-frontend/src/SqlLab/components/ShareSqlLabQuery.jsx +++ b/superset-frontend/src/SqlLab/components/ShareSqlLabQuery.jsx @@ -112,7 +112,7 @@ class ShareSqlLabQuery extends React.Component { overlay={this.renderPopover()} > <Button bsSize="small" className="toggleSave"> - <i className="fa fa-clipboard" /> {t('Share Query')} + <i className="fa fa-share" /> {t('Share')} </Button> </OverlayTrigger> ); diff --git a/superset-frontend/src/SqlLab/components/SqlEditor.jsx b/superset-frontend/src/SqlLab/components/SqlEditor.jsx index 4903abc..7f1123c 100644 --- a/superset-frontend/src/SqlLab/components/SqlEditor.jsx +++ b/superset-frontend/src/SqlLab/components/SqlEditor.jsx @@ -20,7 +20,6 @@ import React from 'react'; import { CSSTransition } from 'react-transition-group'; import PropTypes from 'prop-types'; import { - Checkbox, FormGroup, InputGroup, Form, @@ -35,6 +34,7 @@ import debounce from 'lodash/debounce'; import throttle from 'lodash/throttle'; import Button from '../../components/Button'; +import Checkbox from '../../components/Checkbox'; import LimitControl from './LimitControl'; import TemplateParamsEditor from './TemplateParamsEditor'; import SouthPane from './SouthPane'; @@ -509,16 +509,13 @@ class SqlEditor extends React.PureComponent { </Form> </div> <div className="rightItems"> - <span> - <Checkbox - checked={this.state.autocompleteEnabled} - inline - title={t('Autocomplete')} - onChange={this.handleToggleAutocompleteEnabled} - > - {t('Autocomplete')} - </Checkbox> - </span> + <Button + className="autocomplete" + onClick={this.handleToggleAutocompleteEnabled} + > + <Checkbox checked={this.state.autocompleteEnabled} />{' '} + {t('Autocomplete')} + </Button>{' '} <TemplateParamsEditor language="json" onChange={params => { diff --git a/superset-frontend/src/SqlLab/components/TabbedSqlEditors.jsx b/superset-frontend/src/SqlLab/components/TabbedSqlEditors.jsx index b4170b2..dc7d557 100644 --- a/superset-frontend/src/SqlLab/components/TabbedSqlEditors.jsx +++ b/superset-frontend/src/SqlLab/components/TabbedSqlEditors.jsx @@ -288,46 +288,60 @@ class TabbedSqlEditors extends React.PureComponent { </> ); const tabTitle = ( - <SplitButton - bsSize="small" - id={'ddbtn-tab-' + i} - className="ddbtn-tab" - title={title} - > - <MenuItem eventKey="1" onClick={() => this.removeQueryEditor(qe)}> - <div className="icon-container"> - <i className="fa fa-close" /> - </div> - {t('Close tab')} - </MenuItem> - <MenuItem eventKey="2" onClick={() => this.renameTab(qe)}> - <div className="icon-container"> - <i className="fa fa-i-cursor" /> - </div> - {t('Rename tab')} - </MenuItem> - <MenuItem eventKey="3" onClick={this.toggleLeftBar}> - <div className="icon-container"> - <i className="fa fa-cogs" /> - </div> - {this.state.hideLeftBar ? t('Expand tool bar') : t('Hide tool bar')} - </MenuItem> - <MenuItem - eventKey="4" - onClick={() => this.removeAllOtherQueryEditors(qe)} - > - <div className="icon-container"> - <i className="fa fa-times-circle-o" /> - </div> - {t('Close all other tabs')} - </MenuItem> - <MenuItem eventKey="5" onClick={() => this.duplicateQueryEditor(qe)}> - <div className="icon-container"> - <i className="fa fa-files-o" /> - </div> - {t('Duplicate tab')} - </MenuItem> - </SplitButton> + <> + <span className="ddbtn-tab">{title}</span> + {isSelected && ( + <SplitButton + bsSize="small" + id={'ddbtn-tab-' + i} + className="ddbtn-tab" + title=" " + > + <MenuItem + className="close-btn" + eventKey="1" + onClick={() => this.removeQueryEditor(qe)} + > + <div className="icon-container"> + <i className="fa fa-close" /> + </div> + {t('Close tab')} + </MenuItem> + <MenuItem eventKey="2" onClick={() => this.renameTab(qe)}> + <div className="icon-container"> + <i className="fa fa-i-cursor" /> + </div> + {t('Rename tab')} + </MenuItem> + <MenuItem eventKey="3" onClick={this.toggleLeftBar}> + <div className="icon-container"> + <i className="fa fa-cogs" /> + </div> + {this.state.hideLeftBar + ? t('Expand tool bar') + : t('Hide tool bar')} + </MenuItem> + <MenuItem + eventKey="4" + onClick={() => this.removeAllOtherQueryEditors(qe)} + > + <div className="icon-container"> + <i className="fa fa-times-circle-o" /> + </div> + {t('Close all other tabs')} + </MenuItem> + <MenuItem + eventKey="5" + onClick={() => this.duplicateQueryEditor(qe)} + > + <div className="icon-container"> + <i className="fa fa-files-o" /> + </div> + {t('Duplicate tab')} + </MenuItem> + </SplitButton> + )} + </> ); return ( <Tab key={qe.id} title={tabTitle} eventKey={qe.id}> diff --git a/superset-frontend/src/SqlLab/main.less b/superset-frontend/src/SqlLab/main.less index a995a74..e8047b3 100644 --- a/superset-frontend/src/SqlLab/main.less +++ b/superset-frontend/src/SqlLab/main.less @@ -259,7 +259,7 @@ div.Workspace { .ddbtn-tab { font-size: inherit; - font-weight: @font-weight-bold; + color: black; &:active { background: none; diff --git a/superset-frontend/src/components/ListView/LegacyFilters.tsx b/superset-frontend/src/components/ListView/LegacyFilters.tsx index 3721a0d..111af4b 100644 --- a/superset-frontend/src/components/ListView/LegacyFilters.tsx +++ b/superset-frontend/src/components/ListView/LegacyFilters.tsx @@ -30,6 +30,8 @@ import { Select } from 'src/components/Select'; import { Filters, InternalFilter, SelectOption } from './types'; import { extractInputValue, getDefaultFilterOperator } from './utils'; +const styleWidth100p = { width: '100%' }; + export const FilterMenu = ({ filters, internalFilters, @@ -49,7 +51,7 @@ export const FilterMenu = ({ <> <i className="fa fa-filter text-primary" /> {' '} - {t('Filter List')} + {t('Filter')} </> } > @@ -181,12 +183,13 @@ export const FilterInputs = ({ {internalFilters.length > 0 && ( <> <Row> - <Col md={10} /> - <Col md={2}> + <Col md={11} /> + <Col md={1}> <Button data-test="apply-filters" disabled={!!filtersApplied} bsStyle="primary" + style={styleWidth100p} onClick={applyFilters} bsSize="small" > diff --git a/superset-frontend/src/components/ListView/ListView.tsx b/superset-frontend/src/components/ListView/ListView.tsx index c086141..27f68cd 100644 --- a/superset-frontend/src/components/ListView/ListView.tsx +++ b/superset-frontend/src/components/ListView/ListView.tsx @@ -125,11 +125,11 @@ const ListView: FunctionComponent<Props> = ({ {title && filterable && ( <> <Row> - <Col md={10}> + <Col md={11}> <h2>{t(title)}</h2> </Col> {filterable && ( - <Col md={2}> + <Col md={1}> <FilterMenu filters={filters} internalFilters={internalFilters} diff --git a/superset-frontend/src/explore/components/QueryAndSaveBtns.css b/superset-frontend/src/explore/components/QueryAndSaveBtns.css new file mode 100644 index 0000000..4ea4dce --- /dev/null +++ b/superset-frontend/src/explore/components/QueryAndSaveBtns.css @@ -0,0 +1,21 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +.save-btn { + width: 100px; +} diff --git a/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx b/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx index bb86b6c..e2ec4ef 100644 --- a/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx +++ b/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx @@ -20,8 +20,10 @@ import React from 'react'; import PropTypes from 'prop-types'; import { ButtonGroup, OverlayTrigger, Tooltip } from 'react-bootstrap'; import classnames from 'classnames'; +import { t } from '@superset-ui/translation'; import Button from '../../components/Button'; +import './QueryAndSaveBtns.css'; const propTypes = { canAdd: PropTypes.bool.isRequired, @@ -50,6 +52,7 @@ export default function QueryAndSaveBtns({ }) { const saveClasses = classnames({ 'disabled disabledButton': !canAdd, + 'save-btn': true, }); let qryButtonStyle = 'default'; @@ -61,17 +64,17 @@ export default function QueryAndSaveBtns({ const saveButtonDisabled = errorMessage ? true : loading; const qryOrStopButton = loading ? ( - <Button onClick={onStop} bsStyle="warning"> + <Button onClick={onStop} bsStyle="warning" className="save-btn"> <i className="fa fa-stop-circle-o" /> Stop </Button> ) : ( <Button - className="query" + className="query save-btn" onClick={onQuery} bsStyle={qryButtonStyle} disabled={!!errorMessage} > - <i className="fa fa-bolt" /> Run Query + <i className="fa fa-bolt" /> {t('Run')} </Button> ); diff --git a/superset-frontend/stylesheets/less/cosmo/bootswatch.less b/superset-frontend/stylesheets/less/cosmo/bootswatch.less index bb31c94..3ae51f7 100644 --- a/superset-frontend/stylesheets/less/cosmo/bootswatch.less +++ b/superset-frontend/stylesheets/less/cosmo/bootswatch.less @@ -66,6 +66,10 @@ // Buttons ==================================================================== +.btn { + text-transform: uppercase; +} + .btn-default:hover { color: @gray-dark; background-color: @gray-bg; @@ -277,10 +281,13 @@ table, .label { border-radius: @border-radius-normal; + padding: 0.3em 0.6em 0.2em; + font-weight: @font-weight-normal; } label { font-weight: @font-weight-normal; + font-size: @font-size-s; } // Progress bars ============================================================== @@ -292,7 +299,7 @@ label { .progress-bar { font-size: @font-size-s; line-height: @line-height-tight; - padding-top: 1px; + padding-top: 2px; } } @@ -415,6 +422,7 @@ a.list-group-item { .nav-tabs > li > a { border-top: 3px solid transparent; + color: @text-color; } .nav-tabs > li.active > a, diff --git a/superset-frontend/stylesheets/less/cosmo/variables.less b/superset-frontend/stylesheets/less/cosmo/variables.less index 4eaf950..bac931c 100644 --- a/superset-frontend/stylesheets/less/cosmo/variables.less +++ b/superset-frontend/stylesheets/less/cosmo/variables.less @@ -107,8 +107,8 @@ @line-height-small: 1.5; @border-radius-base: @border-radius-normal; -@border-radius-large: 2px; -@border-radius-small: 2px; +@border-radius-large: 4px; +@border-radius-small: 4px; // ** Global color for active items (e.g., navs or dropdowns). @component-active-color: @lightest; // superset-var @@ -146,12 +146,12 @@ @btn-font-weight: normal; -@btn-primary-color: @lightest; // superset-var +@btn-primary-color: @lightest; @btn-primary-bg: @brand-primary; @btn-primary-border: @brand-primary; @btn-default-color: @bs-gray; -@btn-default-bg: @lightest; // superset-var +@btn-default-bg: @lightest; @btn-default-border: @bs-gray-light; @btn-success-color: @btn-primary-color; @@ -162,7 +162,7 @@ @btn-info-bg: @brand-info; @btn-info-border: @btn-info-bg; -@btn-warning-color: @btn-default-color; +@btn-warning-color: @btn-primary-color; @btn-warning-bg: @brand-warning; @btn-warning-border: @btn-warning-bg; diff --git a/superset-frontend/stylesheets/less/variables.less b/superset-frontend/stylesheets/less/variables.less index 6630fbf..f22db91 100644 --- a/superset-frontend/stylesheets/less/variables.less +++ b/superset-frontend/stylesheets/less/variables.less @@ -24,8 +24,26 @@ /* component styles. This will allow us to more easily adjust theming */ /************************************************************************/ -@primary-color: #00a699; -@indicator-color: #44c0ff; +@primary-color: #20a7c9; +@indicator-color: @primary-color; + +@brand-primary-dark1: #1a85a0; +@brand-primary-dark2: #156378; +@brand-primary-light1: #79cade; +@brand-primary-light2: #a5dae9; +@brand-primary-light3: #d2edf4; +@brand-primary-light4: #e9f6f9; +@brand-primary-light5: #f3f8fa; + +@brand-secondary: #444e7c; +@brand-secondary-dark1: #363e63; +@brand-secondary-dark2: #282e4a; +@brand-secondary-dark3: #1b1f31; +@brand-secondary-light1: #8e94b0; +@brand-secondary-light2: #b4b8ca; +@brand-secondary-light3: #d9dbe4; +@brand-secondary-light4: #eceef2; +@brand-secondary-light5: #f5f5f8; @almost-black: #263238; @gray-dark: #484848; @@ -38,18 +56,14 @@ @darkest: #000000; /**************************** text-specific *****************************/ -@link: @brand-primary; +@link: #1985a0; @link-hover: darken(@link, @colorstop-one); /***************************** status colors ****************************/ -@success: #4ac15f; -@info: lighten(#2ab7ca, 15%); -@warning: mix( - #fed766, - #ffab00, - 50% -); // mix of old superset warning color and cosmo warning color. Compromise! -@danger: #fe4a49; +@success: #5ac189; +@info: #66bcfe; +@warning: #ff7f44; +@danger: #e04355; /* general component effects */ @shadow-highlight: @primary-color; @@ -185,7 +199,7 @@ /* BORDER RADII */ /* Standard border-radius settings */ /************************************************************************/ -@border-radius-normal: 2px; +@border-radius-normal: 4px; @border-radius-large: (@border-radius-normal * 2); /************************************************************************/ diff --git a/superset-frontend/stylesheets/superset.less b/superset-frontend/stylesheets/superset.less index 688ea8b..b76d2d2 100644 --- a/superset-frontend/stylesheets/superset.less +++ b/superset-frontend/stylesheets/superset.less @@ -445,7 +445,7 @@ table.table-no-hover tr:hover { } .list-add-action .btn.btn-sm { - padding: 5px 6px; + padding: 6px 6px; font-size: @font-size-xs; line-height: 2px; border-radius: 50%;