global settings layout and options

frontend/src/metabase/admin/settings/components/widgets/FormattingWidget.jsx

@@ -6,16 +6,16 @@ import ColumnSettings from "metabase/visualizations/components/ColumnSettings";
 
 const SETTING_TYPES = [
   {
-    name: "Date and Time",
+    name: "Dates and Times",
     type: TYPE.DateTime,
-    settings: ["date_style", "date_abbreviate", "time_style"],
+    settings: ["date_style", "date_abbreviate", "time_enabled", "time_style"],
     column: {
       special_type: TYPE.DateTime,
       unit: "second",
     },
   },
   {
-    name: "Number",
+    name: "Numbers",
     type: TYPE.Number,
     settings: ["locale"],
     column: {
@@ -26,7 +26,7 @@ const SETTING_TYPES = [
   {
     name: "Currency",
     type: TYPE.Currency,
-    settings: ["currency_style", "currency"],
+    settings: ["currency_style", "currency", "currency_in_header"],
     column: {
       base_type: TYPE.Number,
       special_type: TYPE.Currency,
@@ -39,13 +39,13 @@ class FormattingWidget extends React.Component {
     const { setting, onChange } = this.props;
     const value = setting.value || setting.default;
     return (
-      <div className="flex flex-full mt2">
+      <div className="mt2">
         {SETTING_TYPES.map(({ type, name, column, settings }) => (
           <div
-            className="border-column-divider pr4 mr4 flex-full"
-            style={{ maxWidth: 300 }}
+            className="border-bottom pb2 mb4 flex-full"
+            style={{ minWidth: 400 }}
           >
-            <h3 className="mb2">{name}</h3>
+            <h3 className="mb3">{name}</h3>
             <ColumnSettings
               value={value[type]}
               onChange={settings => onChange({ ...value, [type]: settings })}

frontend/src/metabase/visualizations/components/ChartSettingsWidget.jsx

@@ -23,7 +23,7 @@ const ChartSettingsWidget = ({
   return (
     <div
       className={cx({
-        mb2: !hidden,
+        mb3: !hidden,
         mx4: !noPadding,
         hide: hidden,
         disable: disabled,
@@ -37,7 +37,8 @@ const ChartSettingsWidget = ({
             className={cx("ml1 text-light text-medium-hover cursor-pointer", {
               hidden: !set,
             })}
-            name="close"
+            name="refresh"
+            tooltip="Reset to default"
             onClick={() => onChange(undefined)}
           />
         </h4>

frontend/src/metabase/visualizations/lib/settings/column.js

@@ -166,7 +166,7 @@ function timeStyleOption(style: TimeStyle, description?: ?string) {
 export const DATE_COLUMN_SETTINGS = {
   date_style: {
     title: t`Date style`,
-    widget: "radio",
+    widget: "select",
     default: DEFAULT_DATE_STYLE,
     getProps: ({ unit }: Column, settings: ColumnSettings) => ({
       options: getDateStyleOptionsForUnit(unit, settings["date_abbreviate"]),
@@ -258,7 +258,7 @@ export const NUMBER_COLUMN_SETTINGS = {
     readDependencies: ["number_style"],
   },
   currency_style: {
-    title: t`Currency Style`,
+    title: t`Currency label style`,
     widget: "radio",
     props: {
       options: [
@@ -273,8 +273,14 @@ export const NUMBER_COLUMN_SETTINGS = {
     readDependencies: ["number_style"],
   },
   currency_in_header: {
-    title: t`Show currency in header`,
-    widget: "toggle",
+    title: t`Where to display the unit of currency`,
+    widget: "radio",
+    props: {
+      options: [
+        { name: "In the column heading", value: true },
+        { name: "In every table cell", value: false },
+      ],
+    },
     default: true,
     getHidden: (column: Column, settings: ColumnSettings, { series }) =>
       settings["number_style"] !== "currency" ||
@@ -283,19 +289,19 @@ export const NUMBER_COLUMN_SETTINGS = {
   },
   locale: {
     title: t`Separator style`,
-    widget: "radio",
+    widget: "select",
     props: {
       options: [
-        { name: "100000.00", value: null },
         { name: "100,000.00", value: "en" },
         { name: "100 000,00", value: "fr" },
         { name: "100.000,00", value: "de" },
+        { name: "100000.00", value: null },
       ],
     },
     default: "en",
   },
   decimals: {
-    title: t`Number of decimal places`,
+    title: t`Minimum number of decimal places`,
     widget: "number",
   },
   scale: {