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 ea3c3bb style: SIP-34 labels (#10403)
ea3c3bb is described below
commit ea3c3bbae4d5e6f9ef0ca3f66b7e8ed67367d614
Author: Maxime Beauchemin <maximebeauche...@gmail.com>
AuthorDate: Fri Jul 24 18:03:38 2020 -0700
style: SIP-34 labels (#10403)
* style: SIP-34 labels
Aligning with SIP-34 designs for labels/pills. Going uppercase fixes the
padding issues we had before, and the rounder pills look better.
Cleaning up some CSS in the process
* lint
---
superset-frontend/src/components/CachedLabel.jsx | 3 +--
superset-frontend/src/components/Timer.jsx | 9 ++++++---
.../src/explore/components/ExploreChartHeader.jsx | 1 -
.../src/explore/components/RowCountLabel.jsx | 5 +----
superset-frontend/src/explore/main.less | 14 --------------
.../stylesheets/less/cosmo/bootswatch.less | 18 ++++++++++++++++--
.../stylesheets/less/cosmo/variables.less | 4 ++--
superset-frontend/stylesheets/superset.less | 4 ----
8 files changed, 26 insertions(+), 32 deletions(-)
diff --git a/superset-frontend/src/components/CachedLabel.jsx
b/superset-frontend/src/components/CachedLabel.jsx
index 2faf9af..6876e24 100644
--- a/superset-frontend/src/components/CachedLabel.jsx
+++ b/superset-frontend/src/components/CachedLabel.jsx
@@ -70,9 +70,8 @@ class CacheLabel extends React.PureComponent {
return (
<TooltipWrapper tooltip={this.state.tooltipContent} label="cache-desc">
<Label
- className={this.props.className}
+ className={`${this.props.className} m-r-5 pointer`}
bsStyle={labelStyle}
- style={{ fontSize: '10px', marginRight: '5px', cursor: 'pointer' }}
onClick={this.props.onClick}
onMouseOver={this.mouseOver.bind(this)}
onMouseOut={this.mouseOut.bind(this)}
diff --git a/superset-frontend/src/components/Timer.jsx
b/superset-frontend/src/components/Timer.jsx
index 8f77797..8bbd89f 100644
--- a/superset-frontend/src/components/Timer.jsx
+++ b/superset-frontend/src/components/Timer.jsx
@@ -18,6 +18,8 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
+import { Label } from 'react-bootstrap';
+
import { now, fDuration } from '../modules/dates';
const propTypes = {
@@ -76,12 +78,13 @@ export default class Timer extends React.PureComponent {
let timerSpan = null;
if (this.props) {
timerSpan = (
- <span
- className={`inlineBlock m-r-5 label label-${this.props.status}`}
+ <Label
+ className="m-r-5"
style={this.props.style}
+ bsStyle={this.props.status}
>
{this.state.clockStr}
- </span>
+ </Label>
);
}
return timerSpan;
diff --git a/superset-frontend/src/explore/components/ExploreChartHeader.jsx
b/superset-frontend/src/explore/components/ExploreChartHeader.jsx
index 4c38315..d2c7403 100644
--- a/superset-frontend/src/explore/components/ExploreChartHeader.jsx
+++ b/superset-frontend/src/explore/components/ExploreChartHeader.jsx
@@ -163,7 +163,6 @@ export class ExploreChartHeader extends React.PureComponent
{
endTime={chartUpdateEndTime}
isRunning={chartStatus === 'loading'}
status={CHART_STATUS_MAP[chartStatus]}
- style={{ fontSize: '10px', marginRight: '5px' }}
/>
<ExploreActionButtons
actions={this.props.actions}
diff --git a/superset-frontend/src/explore/components/RowCountLabel.jsx
b/superset-frontend/src/explore/components/RowCountLabel.jsx
index 0794627..64cc8d7 100644
--- a/superset-frontend/src/explore/components/RowCountLabel.jsx
+++ b/superset-frontend/src/explore/components/RowCountLabel.jsx
@@ -47,10 +47,7 @@ export default function RowCountLabel({ rowcount, limit,
suffix }) {
);
return (
<TooltipWrapper label="tt-rowcount" tooltip={tooltip}>
- <Label
- bsStyle={bsStyle}
- style={{ fontSize: '10px', marginRight: '5px', cursor: 'pointer' }}
- >
+ <Label bsStyle={bsStyle} className="m-r-5 pointer">
{formattedRowCount} {suffix}
</Label>
</TooltipWrapper>
diff --git a/superset-frontend/src/explore/main.less
b/superset-frontend/src/explore/main.less
index c1ea116..856258e 100644
--- a/superset-frontend/src/explore/main.less
+++ b/superset-frontend/src/explore/main.less
@@ -210,19 +210,6 @@
border: @gray-light solid thin;
}
-.label-default {
- background-color: @gray;
- font-weight: @font-weight-normal;
-}
-
-.btn.label-btn {
- background-color: @gray;
- font-weight: @font-weight-normal;
- color: @lightest;
- padding: 5px 4px 4px;
- border: 0;
-}
-
.label-dropdown ul.dropdown-menu {
position: fixed;
top: auto;
@@ -233,7 +220,6 @@
.label-btn:hover,
.label-btn-label:hover {
background-color: @gray-dark;
- color: @lightest;
}
.label-btn-label {
diff --git a/superset-frontend/stylesheets/less/cosmo/bootswatch.less
b/superset-frontend/stylesheets/less/cosmo/bootswatch.less
index 9b0ebd7..057fa7e 100644
--- a/superset-frontend/stylesheets/less/cosmo/bootswatch.less
+++ b/superset-frontend/stylesheets/less/cosmo/bootswatch.less
@@ -280,9 +280,23 @@ table,
}
.label {
- border-radius: @border-radius-normal;
- padding: 0.3em 0.6em 0.2em;
+ border-radius: 21px;
+ padding: 0.35em 0.8em 0.35em;
font-weight: @font-weight-normal;
+ text-transform: uppercase;
+ font-size: @font-size-s;
+}
+.label-default:hover {
+ background-color: darken(@label-default-bg, 5%);
+}
+.label-warning:hover {
+ background-color: darken(@label-warning-bg, 5%);
+}
+.label-danger:hover {
+ background-color: darken(@label-danger-bg, 5%);
+}
+.label-primary:hover {
+ background-color: darken(@label-primary-bg, 5%);
}
label {
diff --git a/superset-frontend/stylesheets/less/cosmo/variables.less
b/superset-frontend/stylesheets/less/cosmo/variables.less
index 4380548..8f13ac3 100644
--- a/superset-frontend/stylesheets/less/cosmo/variables.less
+++ b/superset-frontend/stylesheets/less/cosmo/variables.less
@@ -28,7 +28,7 @@
@gray-darker: lighten(@gray-base, 13.5%);
@gray-dark: lighten(@gray-base, 20%);
@bs-gray: lighten(@gray-base, 33.5%);
-@bs-gray-light: lighten(@gray-base, 70%);
+@bs-gray-light: lighten(@gray-base, 60%);
@gray-lighter: lighten(@gray-base, 95%);
@brand-primary: @primary-color; // superset-var
@@ -568,7 +568,7 @@
// ** Info label background color
@label-info-bg: @brand-info;
// ** Warning label background color
-@label-warning-bg: @brand-warning;
+@label-warning-bg: darken(@brand-warning, 6%);
// ** Danger label background color
@label-danger-bg: @brand-danger;
diff --git a/superset-frontend/stylesheets/superset.less
b/superset-frontend/stylesheets/superset.less
index 16ee9a9..3b7b452 100644
--- a/superset-frontend/stylesheets/superset.less
+++ b/superset-frontend/stylesheets/superset.less
@@ -26,10 +26,6 @@
color: @danger;
}
-.label {
- font-size: 100%;
-}
-
.no-wrap {
white-space: nowrap;
}
