Merge pull request #3012 from influxdata/misc-polish

Misc. Polish
2018-03-19 18:21:30 -07:00 · 2018-03-19 18:21:30 -07:00 · 1fdfb495f5
parent d3ad22f854 38fa4e183f
commit 1fdfb495f5
11 changed files with 74 additions and 55 deletions
--- a/ui/src/admin/components/chronograf/AllUsersTableRow.js
+++ b/ui/src/admin/components/chronograf/AllUsersTableRow.js
@ -83,7 +83,8 @@ const AllUsersTableRow = ({
          confirmText={removeWarning}
          confirmAction={wrappedDelete}
          size="btn-xs"
-          text="Remove"
+          type="btn-danger"
+          text="Delete"
          customClass="table--show-on-row-hover"
        />
      </td>
--- a/ui/src/admin/components/chronograf/ProvidersTable.js
+++ b/ui/src/admin/components/chronograf/ProvidersTable.js
@ -80,7 +80,6 @@ class ProvidersTable extends Component {
                <div className="fancytable--th provider--redirect">
                  Organization
                </div>
-                <div className="fancytable--th" />
                <div className="fancytable--th provider--delete" />
              </div>
              {mappings.map((mapping, i) =>
--- a/ui/src/admin/components/chronograf/ProvidersTableRow.js
+++ b/ui/src/admin/components/chronograf/ProvidersTableRow.js
@ -71,13 +71,15 @@ class ProvidersTableRow extends Component {
    const isDefaultMapping = DEFAULT_MAPPING_ID === mapping.id
    return (
      <div className="fancytable--row">
-        <Dropdown
-          items={schemes}
-          onChoose={this.handleChooseScheme}
-          selected={scheme}
-          className="fancytable--td provider--scheme"
-          disabled={isDefaultMapping}
-        />
+        <div className="fancytable--td provider--scheme">
+          <Dropdown
+            items={schemes}
+            onChoose={this.handleChooseScheme}
+            selected={scheme}
+            className="dropdown-stretch"
+            disabled={isDefaultMapping}
+          />
+        </div>
        <InputClickToEdit
          value={provider}
          wrapperClass="fancytable--td provider--provider"
--- a/ui/src/admin/components/chronograf/ProvidersTableRowNew.tsx
+++ b/ui/src/admin/components/chronograf/ProvidersTableRowNew.tsx
@ -83,12 +83,14 @@ class ProvidersTableRowNew extends PureComponent<Props, State> {

    return (
      <div className="fancytable--row">
-        <Dropdown
-          items={schemes}
-          onChoose={this.handleChooseScheme}
-          selected={scheme}
-          className={'fancytable--td provider--scheme'}
-        />
+        <div className="fancytable--td provider--scheme">
+          <Dropdown
+            items={schemes}
+            onChoose={this.handleChooseScheme}
+            selected={scheme}
+            className="dropdown-stretch"
+          />
+        </div>
        <InputClickToEdit
          value={provider}
          wrapperClass="fancytable--td provider--provider"
--- a/ui/src/shared/components/Dropdown.js
+++ b/ui/src/shared/components/Dropdown.js
@ -146,7 +146,6 @@ export class Dropdown extends Component {

    const {isOpen, searchTerm, filteredItems, highlightedItemIndex} = this.state
    const menuItems = useAutoComplete ? filteredItems : items
-    const disabledClass = disabled ? 'disabled' : null

    return (
      <div
@ -165,7 +164,7 @@ export class Dropdown extends Component {
              buttonSize={buttonSize}
              buttonColor={buttonColor}
              toggleStyle={toggleStyle}
-              disabledClass={disabledClass}
+              disabled={disabled}
              onFilterChange={this.handleFilterChange}
              onFilterKeyPress={this.handleFilterKeyPress}
            />
@ -176,7 +175,7 @@ export class Dropdown extends Component {
              buttonSize={buttonSize}
              buttonColor={buttonColor}
              toggleStyle={toggleStyle}
-              disabledClass={disabledClass}
+              disabled={disabled}
            />}
        {isOpen && menuItems.length
          ? <DropdownMenu
--- a/ui/src/shared/components/DropdownHead.js
+++ b/ui/src/shared/components/DropdownHead.js
@ -2,16 +2,20 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'

+const disabledClass = disabled => (disabled ? ' disabled' : '')
+
 const DropdownHead = ({
  iconName,
  selected,
  buttonSize,
  toggleStyle,
  buttonColor,
-  disabledClass,
+  disabled,
 }) =>
  <div
-    className={`btn dropdown-toggle ${buttonSize} ${buttonColor} ${disabledClass}`}
+    className={`btn dropdown-toggle ${buttonSize} ${buttonColor}${disabledClass(
+      disabled
+    )}`}
    style={toggleStyle}
  >
    {iconName && <span className={classnames('icon', {[iconName]: true})} />}
@ -21,15 +25,15 @@ const DropdownHead = ({
    <span className="caret" />
  </div>

-const {string, shape} = PropTypes
+const {bool, string, shape} = PropTypes

 DropdownHead.propTypes = {
  iconName: string,
-  selected: string,
-  buttonSize: string,
+  selected: string.isRequired,
+  buttonSize: string.isRequired,
  toggleStyle: shape(),
-  buttonColor: string,
-  disabledClass: string,
+  buttonColor: string.isRequired,
+  disabled: bool,
 }

 export default DropdownHead
--- a/ui/src/shared/components/DropdownInput.js
+++ b/ui/src/shared/components/DropdownInput.js
@ -1,17 +1,21 @@
 import React from 'react'
 import PropTypes from 'prop-types'

+const disabledClass = disabled => (disabled ? ' disabled' : '')
+
 const DropdownInput = ({
  searchTerm,
  buttonSize,
  buttonColor,
  toggleStyle,
-  disabledClass,
+  disabled,
  onFilterChange,
  onFilterKeyPress,
 }) =>
  <div
-    className={`dropdown-autocomplete dropdown-toggle ${buttonSize} ${buttonColor} ${disabledClass}`}
+    className={`dropdown-autocomplete dropdown-toggle ${buttonSize} ${buttonColor}${disabledClass(
+      disabled
+    )}`}
    style={toggleStyle}
  >
    <input
@ -29,14 +33,14 @@ const DropdownInput = ({

 export default DropdownInput

-const {func, shape, string} = PropTypes
+const {bool, func, shape, string} = PropTypes

 DropdownInput.propTypes = {
  searchTerm: string,
  buttonSize: string,
  buttonColor: string,
  toggleStyle: shape({}),
-  disabledClass: string,
-  onFilterChange: func,
-  onFilterKeyPress: func,
+  disabled: bool,
+  onFilterChange: func.isRequired,
+  onFilterKeyPress: func.isRequired,
 }
--- a/ui/src/shared/components/Tags.js
+++ b/ui/src/shared/components/Tags.js
@ -27,19 +27,18 @@ class Tag extends Component {
  render() {
    const {item} = this.props
    return (
-      <span key={item} className="input-tag-item">
+      <span key={item} className="input-tag--item">
        <span>
          {item.text || item.name || item}
        </span>
-        {
-          <ConfirmButton
-            icon="remove"
-            size="btn-xs"
-            customClass="btn-xxs"
-            confirmText="Remove user from organization?"
-            confirmAction={this.handleClickDelete(item)}
-          />
-        }
+        <ConfirmButton
+          icon="remove"
+          size="btn-xs"
+          customClass="input-tag--remove"
+          square={true}
+          confirmText="Remove user from organization?"
+          confirmAction={this.handleClickDelete(item)}
+        />
      </span>
    )
  }
--- a/ui/src/style/components/input-tag-list.scss
+++ b/ui/src/style/components/input-tag-list.scss
@ -3,29 +3,33 @@
  ---------------------------------------------
 */

-$input-tag-item-height: 24px;
+$input-tag--item-height: 24px;

 .input-tag-list {
  margin: 1px -1px;
  display: flex;
  flex-wrap: wrap;
 }
+// Special rule for alert handlers config
 .tag-input + .input-tag-list {
  padding: 0 11px;
  margin: 4px -1px;
 }

-.input-tag-item,
+.input-tag--item,
 .tags-add {
-  height: $input-tag-item-height;
-  line-height: $input-tag-item-height;
+  height: $input-tag--item-height;
+  line-height: $input-tag--item-height;
  border-radius: 3px;
  margin: 1px;
 }

-.input-tag-item {
+.input-tag--item {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
  white-space: nowrap;
-  padding: 0 9px;
+  padding: 0 0 0 9px;
  font-size: 12px;
  font-weight: 600;
  background-color: $g5-pepper;
@ -33,22 +37,22 @@ $input-tag-item-height: 24px;
  cursor: default;
 }

-.input-tag-item .icon {
-  transition: color 0.25s ease;
-  margin-left: 6px;
-  position: relative;
-  top: -0.5px;
+.btn.confirm-button.input-tag--remove {
+  margin-left: 2px;
+  color: $g8-storm;
+  background-color: transparent;

  &:hover {
+    background-color: transparent;
    color: $c-dreamsicle;
-    cursor: pointer;
  }
 }

+
 // Optional Add Tags Button
 .tags-add {
  position: relative;
-  width: $input-tag-item-height;
+  width: $input-tag--item-height;
  background-color: $c-pool;
  color: $g20-white;
  text-align: center;
--- a/ui/src/style/theme/_tables.scss
+++ b/ui/src/style/theme/_tables.scss
@ -79,7 +79,8 @@ $table--highlight-color: $g4-onyx;
 .table.table-highlight > tbody > tr:hover {background-color: $table--highlight-color;}

 .table > tbody > tr .table--show-on-row-hover {visibility: hidden;}
-.table > tbody > tr:hover .table--show-on-row-hover {visibility: visible;}
+.table > tbody > tr:hover .table--show-on-row-hover,
+.table > tbody > tr .table--show-on-row-hover.active {visibility: visible;}


 // For use in a Status column
--- a/ui/src/style/unsorted.scss
+++ b/ui/src/style/unsorted.scss
@ -391,6 +391,10 @@ $tick-script-overlay-margin: 30px;
  margin-left: 6px;
 }

+.dropdown.dashboard-switcher .dropdown-item {
+  white-space: nowrap;
+}
+
 /*
  Dashboard Name Editing
  -----------------------------------------------------------------------------