From 3cf881bd1df4368781ea0d251a5738de33c06fa4 Mon Sep 17 00:00:00 2001
From: Tom Robinson <tlrobinson@gmail.com>
Date: Wed, 30 Sep 2015 14:41:08 -0700
Subject: [PATCH] Add better UI for non-multi SelectPicker
---
.../frontend_client/app/css/core/colors.css | 1 +
.../filters/pickers/SelectPicker.react.js | 58 +++++++++++++++----
2 files changed, 47 insertions(+), 12 deletions(-)
diff --git a/resources/frontend_client/app/css/core/colors.css b/resources/frontend_client/app/css/core/colors.css
index 64ca98b49da..699c3f86493 100644
--- a/resources/frontend_client/app/css/core/colors.css
+++ b/resources/frontend_client/app/css/core/colors.css
@@ -98,6 +98,7 @@
.bg-gold { background-color: var(--gold-color); }
.bg-purple { background-color: var(--purple-color); }
+.bg-purple-light { background-color: var(--purple-light-color); }
.bg-green { background-color: var(--green-color); }
/* alt */
diff --git a/resources/frontend_client/app/query_builder/filters/pickers/SelectPicker.react.js b/resources/frontend_client/app/query_builder/filters/pickers/SelectPicker.react.js
index c4fdb27d5a4..dbaa91cf2c3 100644
--- a/resources/frontend_client/app/query_builder/filters/pickers/SelectPicker.react.js
+++ b/resources/frontend_client/app/query_builder/filters/pickers/SelectPicker.react.js
@@ -4,6 +4,10 @@ import React, { Component, PropTypes } from "react";
import CheckBox from 'metabase/components/CheckBox.react';
+import { capitalize } from "metabase/lib/formatting";
+
+import cx from "classnames";
+
export default class SelectPicker extends Component {
selectValue(key, selected) {
let values;
@@ -20,8 +24,18 @@ export default class SelectPicker extends Component {
this.props.onValuesChange(values);
}
+ nameForOption(option) {
+ if (option.name === "") {
+ return "Empty";
+ } else if (typeof option.name === "string") {
+ return option.name;
+ } else {
+ return capitalize(String(option.name));
+ }
+ }
+
render() {
- let { values, options, placeholder } = this.props;
+ let { values, options, placeholder, multi } = this.props;
let checked = {};
for (let value of values) {
@@ -29,20 +43,40 @@ export default class SelectPicker extends Component {
}
return (
- <div className="px1 pt1" style={{maxHeight: '200px', overflowY: 'scroll'}}>
+ <div className="px1 pt1" style={{maxHeight: '400px', overflowY: 'scroll'}}>
{ placeholder ?
<h5>{placeholder}</h5>
: null }
- <ul>
- {options.map((option, index) =>
- <li key={index}>
- <label className="flex align-center full cursor-pointer p1" onClick={(e) => this.selectValue(option.key, !checked[option.key])}>
- <CheckBox checked={checked[option.key]} />
- <h4 className="ml1">{option.name}</h4>
- </label>
- </li>
- )}
- </ul>
+ { multi && false ?
+ <ul>
+ {options.map((option, index) =>
+ <li key={index}>
+ <label className="flex align-center cursor-pointer p1" onClick={() => this.selectValue(option.key, !checked[option.key])}>
+ <CheckBox checked={checked[option.key]} />
+ <h4 className="ml1">{this.nameForOption(option)}</h4>
+ </label>
+ </li>
+ )}
+ </ul>
+ :
+ <div className="flex flex-wrap py1">
+ {options.map((option, index) =>
+ <div className="half" style={{ padding: "0.15em" }}>
+ <button
+ style={{ height: "95px" }}
+ className={cx("full rounded bordered border-purple text-centered text-bold", {
+ "text-purple bg-white": values[0] !== option.key,
+ "text-white bg-purple-light": values[0] === option.key
+ })}
+ onClick={() => this.selectValue(option.key, true)}
+ >
+ {this.nameForOption(option)}
+ </button>
+ </div>
+ )}
+ </div>
+ }
+
</div>
);
}
--
GitLab