This is an automated email from the ASF dual-hosted git repository. yjc pushed a commit to branch cartel in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
commit 743b34eb8730a5915896b680e9ba08398b441db7 Author: Jesse Yang <jesse.y...@airbnb.com> AuthorDate: Wed Jun 17 11:00:10 2020 -0700 Update theme --- .../src/SqlLab/components/SqlEditor.jsx | 4 +- superset-frontend/src/SqlLab/main.less | 3 ++ superset-frontend/src/components/Button.jsx | 2 +- superset-frontend/stylesheets/less/index.less | 1 + superset-frontend/stylesheets/less/variables.less | 26 ++++++++---- .../{less/index.less => superset-theme.less} | 47 ++++++++++------------ superset-frontend/stylesheets/superset.less | 3 ++ 7 files changed, 51 insertions(+), 35 deletions(-) diff --git a/superset-frontend/src/SqlLab/components/SqlEditor.jsx b/superset-frontend/src/SqlLab/components/SqlEditor.jsx index 7f1123c..94b8276 100644 --- a/superset-frontend/src/SqlLab/components/SqlEditor.jsx +++ b/superset-frontend/src/SqlLab/components/SqlEditor.jsx @@ -509,13 +509,13 @@ class SqlEditor extends React.PureComponent { </Form> </div> <div className="rightItems"> - <Button + <span className="autocomplete" onClick={this.handleToggleAutocompleteEnabled} > <Checkbox checked={this.state.autocompleteEnabled} />{' '} {t('Autocomplete')} - </Button>{' '} + </span>{' '} <TemplateParamsEditor language="json" onChange={params => { diff --git a/superset-frontend/src/SqlLab/main.less b/superset-frontend/src/SqlLab/main.less index e8047b3..a435cdf 100644 --- a/superset-frontend/src/SqlLab/main.less +++ b/superset-frontend/src/SqlLab/main.less @@ -161,6 +161,9 @@ div.Workspace { font-feature-settings: 'kern' 1, 'tnum' 1; } } + .autocomplete { + cursor: pointer; + } } } diff --git a/superset-frontend/src/components/Button.jsx b/superset-frontend/src/components/Button.jsx index 8cd7105..5e12a73 100644 --- a/superset-frontend/src/components/Button.jsx +++ b/superset-frontend/src/components/Button.jsx @@ -43,7 +43,7 @@ const defaultProps = { const BUTTON_WRAPPER_STYLE = { display: 'inline-block', cursor: 'not-allowed' }; export default function Button(props) { - const buttonProps = { ...props }; + const buttonProps = { bsStyle: 'secondary', ...props }; const tooltip = props.tooltip; const placement = props.placement; delete buttonProps.tooltip; diff --git a/superset-frontend/stylesheets/less/index.less b/superset-frontend/stylesheets/less/index.less index 86a8989..85481c4 100644 --- a/superset-frontend/stylesheets/less/index.less +++ b/superset-frontend/stylesheets/less/index.less @@ -27,6 +27,7 @@ html, body { font-size: @font-size-base; line-height: @line-height-base; + background-color: @brand-gray-lightest; } body { diff --git a/superset-frontend/stylesheets/less/variables.less b/superset-frontend/stylesheets/less/variables.less index e7ede59..fa1c617 100644 --- a/superset-frontend/stylesheets/less/variables.less +++ b/superset-frontend/stylesheets/less/variables.less @@ -16,6 +16,14 @@ * specific language governing permissions and limitations * under the License. */ +/************************************************************************/ +/* BOOTSTRAP/BOOTSWATCH/COSMO */ +/* These are the legacy Cosmo theme overrides to Bootswatch's */ +/* overrides to Bootstrap. We should consolidate/deprecate these */ +/* in favor of custom/reusable CSS wherever possible */ +/************************************************************************/ + +@import '../less/cosmo/variables.less'; /************************************************************************/ /* COLORS */ @@ -45,6 +53,13 @@ @brand-secondary-light4: #eceef2; @brand-secondary-light5: #f5f5f8; +@brand-text-default: #393939; +@brand-text-secondary: #b2b2b2; +@brand-gray-light: #f0f0f0; +@brand-gray-lightest: #f7f7f7; +@brand-gray-tinted: #ebedf2; +@brand-gray-darkest: #656565; + @almost-black: #263238; @gray-dark: #484848; @gray-light: #cfd8dc; @@ -56,7 +71,7 @@ @darkest: #000000; /**************************** text-specific *****************************/ -@link: @brand-primary; +@link: @brand-text-default; @link-hover: darken(@link, @colorstop-one); /***************************** status colors ****************************/ @@ -198,10 +213,7 @@ @border-radius-large: (@border-radius-normal * 2); /************************************************************************/ -/* BOOTSTRAP/BOOTSWATCH/COSMO */ -/* These are the legacy Cosmo theme overrides to Bootswatch's */ -/* overrides to Bootstrap. We should consolidate/deprecate these */ -/* in favor of custom/reusable CSS wherever possible */ +/* SPACING */ /************************************************************************/ - -@import '../less/cosmo/variables.less'; +// @padding-small-vertical: 0.4em; +// @padding-small-horizontal: 3em; \ No newline at end of file diff --git a/superset-frontend/stylesheets/less/index.less b/superset-frontend/stylesheets/superset-theme.less similarity index 58% copy from superset-frontend/stylesheets/less/index.less copy to superset-frontend/stylesheets/superset-theme.less index 86a8989..50ca2ed 100644 --- a/superset-frontend/stylesheets/less/index.less +++ b/superset-frontend/stylesheets/superset-theme.less @@ -16,34 +16,31 @@ * specific language governing permissions and limitations * under the License. */ -// Index .less, any imports here will be included in the final css build +@import './less/variables.less'; -@import '~bootstrap/less/bootstrap.less'; -@import './fonts.less'; -@import './variables.less'; -@import './cosmo/bootswatch.less'; - -html, body { - font-size: @font-size-base; - line-height: @line-height-base; + background-color: @brand-gray-lightest; } -body { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - display: flex; - flex-direction: column; -} - -header { - flex: 0 1 auto; -} +@btn-secondary-foreground: #1984a0; +@btn-secondary-background: #e8f5f9; +@btn-secondary-background-lighter: #f3f8fa; +@btn-secondary-background-darker: #def1f7; -#app { - flex: 1 1 auto; - position: relative; +.btn-secondary { + &, + &:active, + &:hover, + &:focus { + color: @btn-secondary-foreground; + } + background-color: @btn-secondary-background; + &:hover { + background-color: @btn-secondary-background-lighter; + } + &:active, &:focus { + box-shadow: none; + outline: none; + background-color: @btn-secondary-background-darker; + } } diff --git a/superset-frontend/stylesheets/superset.less b/superset-frontend/stylesheets/superset.less index b76d2d2..6801fe9 100644 --- a/superset-frontend/stylesheets/superset.less +++ b/superset-frontend/stylesheets/superset.less @@ -579,3 +579,6 @@ td.filtered { .select2-container-multi { width: 100% !important; } + +// Import theme at the very end so it can override +@import './superset-theme.less';