style: replace broken glyphs with font-awesome (apache#10123)

Glyphicons stopped working recently, not sure why, but let's get rid of them and double down on font-awesome that we use a lot more in the codebase. There's only a few instances of glyphicons and they all are broken ATM. Also a few other minor style tweaks
auxten · Nov 20, 2020 · dc1c1f6 · dc1c1f6
1 parent 1aefb1b
commit dc1c1f6
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 13 deletions.
diff --git a/superset-frontend/spec/javascripts/explore/components/AdhocFilterEditPopover_spec.jsx b/superset-frontend/spec/javascripts/explore/components/AdhocFilterEditPopover_spec.jsx
@@ -127,9 +127,9 @@ describe('AdhocFilterEditPopover', () => {
     wrapper.instance().onDragDown = sinon.spy();
     wrapper.instance().forceUpdate();
 
-    expect(wrapper.find('i.glyphicon-resize-full')).toHaveLength(1);
+    expect(wrapper.find('i.fa-expand')).toHaveLength(1);
     expect(wrapper.instance().onDragDown.calledOnce).toBe(false);
-    wrapper.find('i.glyphicon-resize-full').simulate('mouseDown', {});
+    wrapper.find('i.fa-expand').simulate('mouseDown', {});
     expect(wrapper.instance().onDragDown.calledOnce).toBe(true);
   });
 });
diff --git a/superset-frontend/spec/javascripts/explore/components/AdhocMetricEditPopover_spec.jsx b/superset-frontend/spec/javascripts/explore/components/AdhocMetricEditPopover_spec.jsx
@@ -127,9 +127,9 @@ describe('AdhocMetricEditPopover', () => {
     wrapper.instance().onDragDown = sinon.spy();
     wrapper.instance().forceUpdate();
 
-    expect(wrapper.find('i.glyphicon-resize-full')).toHaveLength(1);
+    expect(wrapper.find('i.fa-expand')).toHaveLength(1);
     expect(wrapper.instance().onDragDown.calledOnce).toBe(false);
-    wrapper.find('i.glyphicon-resize-full').simulate('mouseDown');
+    wrapper.find('i.fa-expand').simulate('mouseDown');
     expect(wrapper.instance().onDragDown.calledOnce).toBe(true);
   });
 });
diff --git a/superset-frontend/src/explore/components/AdhocFilterEditPopover.jsx b/superset-frontend/src/explore/components/AdhocFilterEditPopover.jsx
@@ -184,7 +184,7 @@ export default class AdhocFilterEditPopover extends React.Component {
           </Button>
           <i
             onMouseDown={this.onDragDown}
-            className="glyphicon glyphicon-resize-full edit-popover-resize"
+            className="fa fa-expand edit-popover-resize text-muted"
           />
         </div>
       </Popover>

diff --git a/superset-frontend/src/explore/components/AdhocFilterOption.jsx b/superset-frontend/src/explore/components/AdhocFilterOption.jsx
@@ -112,7 +112,9 @@ export default class AdhocFilterOption extends React.PureComponent {
           <Label className="option-label adhoc-option adhoc-filter-option">
             {adhocFilter.getDefaultLabel()}
             <i
-              className={`glyphicon glyphicon-triangle-right adhoc-label-arrow`}
+              className={`fa fa-caret-${
+                this.state.overlayShown ? 'left' : 'right'
+              } adhoc-label-arrow`}
             />
           </Label>
         </OverlayTrigger>

diff --git a/superset-frontend/src/explore/components/AdhocMetricEditPopover.jsx b/superset-frontend/src/explore/components/AdhocMetricEditPopover.jsx
@@ -318,7 +318,7 @@ export default class AdhocMetricEditPopover extends React.Component {
           </Button>
           <i
             onMouseDown={this.onDragDown}
-            className="glyphicon glyphicon-resize-full edit-popover-resize"
+            className="fa fa-expand edit-popover-resize text-muted"
           />
         </div>
       </Popover>

diff --git a/superset-frontend/src/explore/components/AdhocMetricOption.jsx b/superset-frontend/src/explore/components/AdhocMetricOption.jsx
@@ -53,7 +53,7 @@ export default class AdhocMetricOption extends React.PureComponent {
     // once the overlay has been opened, the metric/filter will never be
     // considered new again.
     this.props.adhocMetric.isNew = false;
-    this.setState({ overlayShown: false });
+    this.setState({ overlayShown: true });
   }
 
   onOverlayExited() {
@@ -99,7 +99,9 @@ export default class AdhocMetricOption extends React.PureComponent {
           <Label className="option-label adhoc-option">
             {adhocMetric.label}
             <i
-              className={`glyphicon glyphicon-triangle-right adhoc-label-arrow`}
+              className={`fa fa-caret-${
+                this.state.overlayShown ? 'left' : 'right'
+              } adhoc-label-arrow`}
             />
           </Label>
         </OverlayTrigger>

diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl.jsx b/superset-frontend/src/explore/components/controls/DateFilterControl.jsx
@@ -340,7 +340,7 @@ export default class DateFilterControl extends React.Component {
   renderInput(props, key) {
     return (
       <FormGroup>
-        <InputGroup>
+        <InputGroup bsSize="small">
           <FormControl
             {...props}
             type="text"
@@ -350,7 +350,7 @@ export default class DateFilterControl extends React.Component {
           />
           <InputGroup.Button onClick={() => this.toggleCalendar(key)}>
             <Button>
-              <Glyphicon glyph="calendar" style={{ padding: 3 }} />
+              <i className="fa fa-calendar" />
             </Button>
           </InputGroup.Button>
         </InputGroup>
@@ -454,7 +454,7 @@ export default class DateFilterControl extends React.Component {
                     </div>
                     <div
                       style={{ width: '60px', marginTop: '-4px' }}
-                      className="input-inline"
+                      className="input-inline m-l-5 m-r-3"
                     >
                       <FormControl
                         bsSize="small"

diff --git a/superset-frontend/src/explore/main.less b/superset-frontend/src/explore/main.less
@@ -249,7 +249,7 @@
 }
 
 .adhoc-label-arrow {
-  font-size: @font-size-xxs;
+  font-size: @font-size-s;
   margin-left: 3px;
   position: static;
 }