From 3b2540e8e009181c058e277fe56146a1a44d0258 Mon Sep 17 00:00:00 2001
From: Tom Robinson <tlrobinson@gmail.com>
Date: Wed, 5 Aug 2015 16:38:11 -0700
Subject: [PATCH] Misc metadata editing fixes
---
.../components/MetadataField.react.js | 36 ++++++++-----------
.../components/MetadataTableList.react.js | 18 ++++++----
resources/frontend_client/app/css/admin.css | 34 +++++++++++++-----
.../frontend_client/app/css/core/base.css | 4 +++
4 files changed, 54 insertions(+), 38 deletions(-)
diff --git a/resources/frontend_client/app/admin/metadata/components/MetadataField.react.js b/resources/frontend_client/app/admin/metadata/components/MetadataField.react.js
index d6e1a569abd..164fb519d77 100644
--- a/resources/frontend_client/app/admin/metadata/components/MetadataField.react.js
+++ b/resources/frontend_client/app/admin/metadata/components/MetadataField.react.js
@@ -45,26 +45,6 @@ export default React.createClass({
},
render: function() {
- var typeSelect = (
- <Select
- className="TableEditor-field-type"
- placeholder="Select a field type"
- value={_.find(MetabaseCore.field_field_types, (type) => type.id === this.props.field.field_type)}
- options={MetabaseCore.field_field_types}
- onChange={this.onTypeChange}
- />
- );
-
- var specialTypeSelect = (
- <Select
- className="TableEditor-field-special-type"
- placeholder="Select a special type"
- value={_.find(MetabaseCore.field_special_types, (type) => type.id === this.props.field.special_type)}
- options={MetabaseCore.field_special_types}
- onChange={this.onSpecialTypeChange}
- />
- );
-
var targetSelect;
if (this.props.field.special_type === "fk") {
targetSelect = (
@@ -86,10 +66,22 @@ export default React.createClass({
<Input className="AdminInput TableEditor-field-description rounded-bottom" type="text" value={this.props.field.description} onBlurChange={this.onDescriptionChange} placeholder="No table description yet" />
</div>
<div className="flex-half px1">
- {typeSelect}
+ <Select
+ className="TableEditor-field-type"
+ placeholder="Select a field type"
+ value={_.find(MetabaseCore.field_field_types, (type) => type.id === this.props.field.field_type)}
+ options={MetabaseCore.field_field_types}
+ onChange={this.onTypeChange}
+ />
</div>
<div className="flex-half flex flex-column justify-between px1">
- {specialTypeSelect}
+ <Select
+ className="TableEditor-field-special-type"
+ placeholder="Select a special type"
+ value={_.find(MetabaseCore.field_special_types, (type) => type.id === this.props.field.special_type)}
+ options={MetabaseCore.field_special_types}
+ onChange={this.onSpecialTypeChange}
+ />
{targetSelect}
</div>
</li>
diff --git a/resources/frontend_client/app/admin/metadata/components/MetadataTableList.react.js b/resources/frontend_client/app/admin/metadata/components/MetadataTableList.react.js
index 115a315a142..0ca5c48a417 100644
--- a/resources/frontend_client/app/admin/metadata/components/MetadataTableList.react.js
+++ b/resources/frontend_client/app/admin/metadata/components/MetadataTableList.react.js
@@ -2,6 +2,7 @@
/*global _*/
import ProgressBar from './ProgressBar.react';
+import Icon from '../../../query_builder/icon.react';
import cx from 'classnames';
import Humanize from 'humanize';
@@ -70,13 +71,16 @@ export default React.createClass({
return (
<div className="MetadataEditor-table-list AdminList">
- <input
- className="AdminList-search AdminInput"
- type="text"
- placeholder="Find a table"
- value={this.state.searchText}
- onChange={this.updateSearchText}
- />
+ <div className="AdminList-search">
+ <Icon name="search" width="16" height="16"/>
+ <input
+ className="AdminInput pl4 border-bottom"
+ type="text"
+ placeholder="Find a table"
+ value={this.state.searchText}
+ onChange={this.updateSearchText}
+ />
+ </div>
<ul className="AdminList-items">
{queryableTablesHeader}
{queryableTables}
diff --git a/resources/frontend_client/app/css/admin.css b/resources/frontend_client/app/css/admin.css
index 7aa9ec77840..1a88eb37a66 100644
--- a/resources/frontend_client/app/css/admin.css
+++ b/resources/frontend_client/app/css/admin.css
@@ -222,6 +222,31 @@
padding-bottom: 0.75em;
}
+.AdminList-search {
+ position: relative;
+}
+
+.AdminList-search .Icon {
+ position: absolute;
+ margin-top: auto;
+ margin-bottom: auto;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+ margin-left: 1em;
+ color: #C0C0C0;
+}
+
+.AdminList-search .AdminInput {
+ padding: 0.5em;
+ padding-left: 2em;
+ font-size: 18px;
+ width: 100%;
+ border-top-left-radius: var(--default-border-radius);
+ border-top-right-radius: var(--default-border-radius);
+ border-bottom-color: var(--border-color);
+}
+
.AdminList-items {
}
@@ -264,15 +289,6 @@
opacity: 1.0;
}
-.AdminList-search {
- padding: 0.5em;
- font-size: 18px;
- width: 100%;
- border-top-left-radius: var(--default-border-radius);
- border-top-right-radius: var(--default-border-radius);
- border-bottom-color: var(--border-color);
-}
-
.AdminInput {
color: var(--default-font-color);
padding: 0.5em;
diff --git a/resources/frontend_client/app/css/core/base.css b/resources/frontend_client/app/css/core/base.css
index cb6dcef44d5..c70c23aa79d 100644
--- a/resources/frontend_client/app/css/core/base.css
+++ b/resources/frontend_client/app/css/core/base.css
@@ -46,6 +46,10 @@ a {
color: inherit;
}
+input {
+ font-family: var(--default-font-family), "Helvetica Neue", Helvetica, sans-serif;
+}
+
.disabled {
pointer-events: none;
opacity: 0.4;
--
GitLab