fix: fix styling issues in options (#585)

* fix: fix styling issues in options * fix the open in app link in file menu (GetLink) * fix: remove empty tab (options not implemented)
dhis2 · Feb 4, 2020 · d4c5bc6 · d4c5bc6
1 parent 80c891a
commit d4c5bc6
Show file tree

Hide file tree

Showing 14 changed files with 91 additions and 100 deletions.
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -13,9 +13,9 @@
     },
     "dependencies": {
         "@dhis2/analytics": "^3.1.0",
-        "@dhis2/d2-ui-core": "^6.5.1",
-        "@dhis2/d2-ui-file-menu": "^6.5.1",
-        "@dhis2/d2-ui-interpretations": "^6.5.1",
+        "@dhis2/d2-ui-core": "^6.5.2",
+        "@dhis2/d2-ui-file-menu": "^6.5.2",
+        "@dhis2/d2-ui-interpretations": "^6.5.2",
         "@dhis2/data-visualizer-plugin": "^33.1.6",
         "@material-ui/core": "^3.1.2",
         "@material-ui/icons": "^3.0.1",

diff --git a/packages/app/src/components/VisualizationOptions/Options/AxisRange.js b/packages/app/src/components/VisualizationOptions/Options/AxisRange.js
@@ -1,16 +1,19 @@
 import React from 'react'
 
 import i18n from '@dhis2/d2-i18n'
-import { Field, Help } from '@dhis2/ui-core'
+import { Label, Help } from '@dhis2/ui-core'
 
 import RangeAxisMinValue from './RangeAxisMinValue'
 import RangeAxisMaxValue from './RangeAxisMaxValue'
 
-import { tabSectionOptionComplexInline } from '../styles/VisualizationOptions.style.js'
+import {
+    tabSectionOption,
+    tabSectionOptionComplexInline,
+} from '../styles/VisualizationOptions.style.js'
 
 const AxisRange = () => (
-    <Field>
-        <label>{i18n.t('Axis range')}</label>
+    <div className={tabSectionOption.className}>
+        <Label>{i18n.t('Axis range')}</Label>
         <div className={tabSectionOptionComplexInline.className}>
             <RangeAxisMinValue />
             {'\u00A0\u2013\u00A0'}
@@ -19,7 +22,7 @@ const AxisRange = () => (
         <Help>
             {i18n.t('Values outside of the range will not be displayed')}
         </Help>
-    </Field>
+    </div>
 )
 
 export default AxisRange
diff --git a/packages/app/src/components/VisualizationOptions/Options/BaseLineLabel.js b/packages/app/src/components/VisualizationOptions/Options/BaseLineLabel.js
@@ -8,7 +8,6 @@ const BaseLineLabel = () => (
         type="text"
         width="280px"
         label={i18n.t('Title')}
-        placeholder={i18n.t('Base line title')}
         option={{
             name: 'baseLineLabel',
         }}

diff --git a/packages/app/src/components/VisualizationOptions/Options/BaseLineValue.js b/packages/app/src/components/VisualizationOptions/Options/BaseLineValue.js
@@ -6,7 +6,7 @@ import TextBaseOption from './TextBaseOption'
 const BaseLineValue = () => (
     <TextBaseOption
         type="number"
-        width="72px"
+        width="96px"
         label={i18n.t('Value')}
         placeholder={i18n.t('Number')}
         option={{

diff --git a/packages/app/src/components/VisualizationOptions/Options/MeasureCriteria.js b/packages/app/src/components/VisualizationOptions/Options/MeasureCriteria.js
@@ -6,7 +6,6 @@ import i18n from '@dhis2/d2-i18n'
 
 import {
     Button,
-    Field,
     Input,
     Label,
     SingleSelect,
@@ -123,7 +122,7 @@ class MeasureCriteria extends Component {
                     )}
                 </p>
                 <div className={tabSectionOptionComplexInline.className}>
-                    <div style={{ width: '250px', paddingBottom: '16px' }}>
+                    <div style={{ width: '250px' }}>
                         <Label>{i18n.t('Minimum data value')}</Label>
                         <div
                             className={tabSectionOptionComplexInline.className}
@@ -140,31 +139,29 @@ class MeasureCriteria extends Component {
                             />
                         </div>
                     </div>
-                    <Field>
-                        <div style={{ width: '250px' }}>
-                            <Label>{i18n.t('Maximum data value')}</Label>
-                            <div
-                                className={
-                                    tabSectionOptionComplexInline.className
-                                }
-                            >
-                                <OperatorSelect
-                                    name="op2"
-                                    value={op2}
-                                    onChange={this.onChange('op2')}
-                                />
-                                <ValueInput
-                                    name="v2"
-                                    value={v2}
-                                    onChange={this.onChange('v2')}
-                                />
-                            </div>
+                    <div style={{ width: '250px' }}>
+                        <Label>{i18n.t('Maximum data value')}</Label>
+                        <div
+                            className={tabSectionOptionComplexInline.className}
+                        >
+                            <OperatorSelect
+                                name="op2"
+                                value={op2}
+                                onChange={this.onChange('op2')}
+                            />
+                            <ValueInput
+                                name="v2"
+                                value={v2}
+                                onChange={this.onChange('v2')}
+                            />
                         </div>
-                    </Field>
+                    </div>
+                </div>
+                <div style={{ paddingTop: '16px' }}>
+                    <Button onClick={this.onClear}>
+                        {i18n.t('Clear min/max limits')}
+                    </Button>
                 </div>
-                <Button onClick={this.onClear}>
-                    {i18n.t('Clear min/max limits')}
-                </Button>
             </div>
         )
     }

diff --git a/packages/app/src/components/VisualizationOptions/Options/RangeAxisMaxValue.js b/packages/app/src/components/VisualizationOptions/Options/RangeAxisMaxValue.js
@@ -7,7 +7,7 @@ import TextBaseOption from './TextBaseOption'
 const RangeAxisMaxValue = () => (
     <TextBaseOption
         type="number"
-        width="72px"
+        width="100px"
         placeholder={i18n.t('Max')}
         option={{
             name: 'rangeAxisMaxValue',

diff --git a/packages/app/src/components/VisualizationOptions/Options/RangeAxisMinValue.js b/packages/app/src/components/VisualizationOptions/Options/RangeAxisMinValue.js
@@ -7,7 +7,7 @@ import TextBaseOption from './TextBaseOption'
 const RangeAxisMinValue = () => (
     <TextBaseOption
         type="number"
-        width="72px"
+        width="100px"
         placeholder={i18n.t('Min')}
         option={{
             name: 'rangeAxisMinValue',

diff --git a/packages/app/src/components/VisualizationOptions/Options/RegressionType.js b/packages/app/src/components/VisualizationOptions/Options/RegressionType.js
@@ -16,7 +16,6 @@ const RegressionType = () => (
             name: optionName,
             defaultValue: defaultValue,
             items: [
-                { value: 'NONE', label: i18n.t('None') },
                 { value: 'LINEAR', label: i18n.t('Linear') },
                 { value: 'POLYNOMIAL', label: i18n.t('Polynomial') },
                 { value: 'LOESS', label: i18n.t('Loess') },

diff --git a/packages/app/src/components/VisualizationOptions/Options/SelectBaseOption.js b/packages/app/src/components/VisualizationOptions/Options/SelectBaseOption.js
@@ -8,7 +8,7 @@ import { sGetUiOptions } from '../../../reducers/ui'
 import { acSetUiOptions } from '../../../actions/ui'
 
 import {
-    tabSectionOptionItem,
+    tabSectionOption,
     tabSectionOptionToggleable,
 } from '../styles/VisualizationOptions.style.js'
 
@@ -34,9 +34,7 @@ export const SelectBaseOption = ({
 
     return (
         <div
-            className={
-                !toggleable || enabled ? '' : tabSectionOptionItem.className
-            }
+            className={!toggleable || enabled ? '' : tabSectionOption.className}
         >
             {toggleable ? (
                 <Checkbox

diff --git a/packages/app/src/components/VisualizationOptions/Options/TargetLineLabel.js b/packages/app/src/components/VisualizationOptions/Options/TargetLineLabel.js
@@ -8,7 +8,6 @@ const TargetLineLabel = () => (
         type="text"
         width="280px"
         label={i18n.t('Title')}
-        placeholder={i18n.t('Target line title')}
         option={{
             name: 'targetLineLabel',
         }}

diff --git a/packages/app/src/components/VisualizationOptions/Options/TargetLineValue.js b/packages/app/src/components/VisualizationOptions/Options/TargetLineValue.js
@@ -6,7 +6,7 @@ import TextBaseOption from './TextBaseOption'
 const TargetLineValue = () => (
     <TextBaseOption
         type="number"
-        width="72px"
+        width="96px"
         label={i18n.t('Value')}
         placeholder={i18n.t('Number')}
         option={{

diff --git a/packages/app/src/components/VisualizationOptions/Options/TextBaseOption.js b/packages/app/src/components/VisualizationOptions/Options/TextBaseOption.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 
-import { Checkbox, Input, InputField } from '@dhis2/ui-core'
+import { Checkbox, Constrictor, Input, InputField } from '@dhis2/ui-core'
 
 import { sGetUiOptions } from '../../../reducers/ui'
 import { acSetUiOptions } from '../../../actions/ui'
@@ -47,15 +47,16 @@ export const TextBaseOption = ({
                 }
             >
                 {inline ? (
-                    <Input
-                        type={type}
-                        onChange={({ value }) => onChange(value)}
-                        name={option.name}
-                        value={value}
-                        placeholder={placeholder}
-                        width={width}
-                        dense
-                    />
+                    <Constrictor width={width}>
+                        <Input
+                            type={type}
+                            onChange={({ value }) => onChange(value)}
+                            name={option.name}
+                            value={value}
+                            placeholder={placeholder}
+                            dense
+                        />
+                    </Constrictor>
                 ) : (
                     <InputField
                         type={type}

diff --git a/packages/app/src/modules/options/columnConfig.js b/packages/app/src/modules/options/columnConfig.js
@@ -71,11 +71,6 @@ export default [
             },
         ],
     },
-    {
-        key: 'colors-legends',
-        label: i18n.t('Colors & Legends'),
-        content: [],
-    },
     {
         key: 'style-tab',
         label: i18n.t('Style'),

diff --git a/yarn.lock b/yarn.lock
@@ -1617,23 +1617,23 @@
     lodash "^4.17.10"
     material-ui "^0.20.0"
 
-"@dhis2/d2-ui-core@6.5.1", "@dhis2/d2-ui-core@^6.5.1":
-  version "6.5.1"
-  resolved "https://registry.yarnpkg.com/@dhis2/d2-ui-core/-/d2-ui-core-6.5.1.tgz#09e464e4f79cec111f56b965b1b5d70f63b508e4"
-  integrity sha512-fiEtkabcwEs9QDpM3btctGU7FXHOkYgjKSBq97BKoHoZceLhVbmKWpZJZYkdViGGmSHwuyq93AS8BBjdu3XHqA==
+"@dhis2/d2-ui-core@6.5.2", "@dhis2/d2-ui-core@^6.5.2":
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/@dhis2/d2-ui-core/-/d2-ui-core-6.5.2.tgz#4c306b4d8a5df5929ee84d50b3be708da1c32a6c"
+  integrity sha512-ZIzjT3Fzg5CfABBxSinnzQ4bXPaoZxV6muIW7s+Wr6givL8K7u5K6BQfC2CFmwOCQUXyHwzamITyRnsaRaURfA==
   dependencies:
     babel-runtime "^6.26.0"
     d2 "~31.7"
     lodash "^4.17.10"
     material-ui "^0.20.0"
 
-"@dhis2/d2-ui-favorites-dialog@6.5.1":
-  version "6.5.1"
-  resolved "https://registry.yarnpkg.com/@dhis2/d2-ui-favorites-dialog/-/d2-ui-favorites-dialog-6.5.1.tgz#59a7c7fca28610cec9243e67f3891347778b8420"
-  integrity sha512-A5NxxOeut84Jxw/KyDWN0pj49yZOYC93112cSMKU1ix/WxWV4HtlBCz57fkMNIV2EfI5OX/4gvKREZJ7bFD4Rw==
+"@dhis2/d2-ui-favorites-dialog@6.5.2":
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/@dhis2/d2-ui-favorites-dialog/-/d2-ui-favorites-dialog-6.5.2.tgz#e8ddde72953d4442fe2d5077930277dd042d3565"
+  integrity sha512-sOCBsp2Q7aeolHxfHeegxHX2j6gi/vnfbjPYigbi2NB9+emqW2w/jGkKnUVohN5LWg5raSuYxtnGLML7dN2bkw==
   dependencies:
     "@dhis2/d2-i18n" "^1.0.6"
-    "@dhis2/d2-ui-sharing-dialog" "6.5.1"
+    "@dhis2/d2-ui-sharing-dialog" "6.5.2"
     "@material-ui/core" "^3.3.1"
     "@material-ui/icons" "^3.0.1"
     babel-runtime "^6.26.0"
@@ -1643,30 +1643,30 @@
     redux-logger "^3.0.6"
     redux-thunk "^2.2.0"
 
-"@dhis2/d2-ui-file-menu@^6.5.1":
-  version "6.5.1"
-  resolved "https://registry.yarnpkg.com/@dhis2/d2-ui-file-menu/-/d2-ui-file-menu-6.5.1.tgz#4eda95a656fe6c0c8120aad44e66b8f1f98060ea"
-  integrity sha512-Q8TGriBAZzVS9VqAMgQ1fOSGUt2xeQMrNX8P1VCDYxpb59ZwpmrO8EC4Sq94O7YeOoon/jpc8omnxvf4YxfYqw==
+"@dhis2/d2-ui-file-menu@^6.5.2":
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/@dhis2/d2-ui-file-menu/-/d2-ui-file-menu-6.5.2.tgz#494d23c7002074e1b0d701a77c3284fb26bcd738"
+  integrity sha512-L22IJX1ubwDu7xqdY+fK6GEFIVQgK/kDcND0BTCtqfKy4BeF8rechNmqvFhWYlqSFlY7n2xVKqqBWhiK1vqNYw==
   dependencies:
     "@dhis2/d2-i18n" "^1.0.3"
-    "@dhis2/d2-ui-favorites-dialog" "6.5.1"
-    "@dhis2/d2-ui-sharing-dialog" "6.5.1"
-    "@dhis2/d2-ui-translation-dialog" "6.5.1"
+    "@dhis2/d2-ui-favorites-dialog" "6.5.2"
+    "@dhis2/d2-ui-sharing-dialog" "6.5.2"
+    "@dhis2/d2-ui-translation-dialog" "6.5.2"
     "@material-ui/core" "^3.3.1"
     "@material-ui/icons" "^3.0.1"
     prop-types "^15.6.0"
 
-"@dhis2/d2-ui-interpretations@^6.5.1":
-  version "6.5.1"
-  resolved "https://registry.yarnpkg.com/@dhis2/d2-ui-interpretations/-/d2-ui-interpretations-6.5.1.tgz#7dc236bc04bef94fe9701fac56c22b8fe31a6315"
-  integrity sha512-sLKsBTnsD0NiVcbch0Hb2MXYWg4We3pJY0lVtWwCw3Cayfq1XztGAyGsfB8c7XchBjealg9tCDtfyizdQwcd3g==
+"@dhis2/d2-ui-interpretations@^6.5.2":
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/@dhis2/d2-ui-interpretations/-/d2-ui-interpretations-6.5.2.tgz#7e3a3ea9f97ddce6b3d77efcc6c38d91dbdaac37"
+  integrity sha512-BfSQge/B/hEYeC3pljhBOJuMIsUSZuGN0HxgogS801TfLOrVY3Zvgr6hUpXjjYaM6dzAjoBR4osanvtnc4ABEg==
   dependencies:
     "@dhis2/d2-i18n" "^1.0.3"
     "@dhis2/d2-i18n-extract" "^1.0.7"
     "@dhis2/d2-i18n-generate" "^1.1.1"
-    "@dhis2/d2-ui-mentions-wrapper" "6.5.1"
-    "@dhis2/d2-ui-rich-text" "6.5.1"
-    "@dhis2/d2-ui-sharing-dialog" "6.5.1"
+    "@dhis2/d2-ui-mentions-wrapper" "6.5.2"
+    "@dhis2/d2-ui-rich-text" "6.5.2"
+    "@dhis2/d2-ui-sharing-dialog" "6.5.2"
     "@material-ui/core" "^3.3.1"
     "@material-ui/icons" "^3.0.1"
     babel-runtime "^6.26.0"
@@ -1676,10 +1676,10 @@
     prop-types "^15.5.10"
     react-portal "^4.1.5"
 
-"@dhis2/d2-ui-mentions-wrapper@6.5.1":
-  version "6.5.1"
-  resolved "https://registry.yarnpkg.com/@dhis2/d2-ui-mentions-wrapper/-/d2-ui-mentions-wrapper-6.5.1.tgz#a0d488db07bbca711650466204e0fd120f9d2b59"
-  integrity sha512-JYet0Ht60Dtff5YIBOkPHY/N9zVJZUp1WQ00RAC532pLh/YfiDXlPOq05IIHyVg4yMsfjVtUrqA8TWTBrIrQzA==
+"@dhis2/d2-ui-mentions-wrapper@6.5.2":
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/@dhis2/d2-ui-mentions-wrapper/-/d2-ui-mentions-wrapper-6.5.2.tgz#570043208efd2c9f81201c8081682ee152f3fd9e"
+  integrity sha512-hBdaMYldVEDmYEQF97waoqvvu22LTHKAE0ZpRm+R7eopV/oS6teEPy59AkdU09Ar8VmG2Fkwydc3QaN4m+bR+Q==
   dependencies:
     "@dhis2/d2-i18n" "^1.0.3"
     "@material-ui/core" "^3.3.1"
@@ -1719,10 +1719,10 @@
     babel-runtime "^6.26.0"
     prop-types "^15.6.0"
 
-"@dhis2/d2-ui-rich-text@6.5.1":
-  version "6.5.1"
-  resolved "https://registry.yarnpkg.com/@dhis2/d2-ui-rich-text/-/d2-ui-rich-text-6.5.1.tgz#16faad677bb0a73caafcddc8dc17651ca31e5584"
-  integrity sha512-Onvd1+iYpzphd8ZOvWhIm3XALr3H10gQS6KjGrLJ2UaKX+9ohelNBSH419PBpSkVQ+oX4Ujk7qxHrRrRdMLo2A==
+"@dhis2/d2-ui-rich-text@6.5.2":
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/@dhis2/d2-ui-rich-text/-/d2-ui-rich-text-6.5.2.tgz#05752fc29546edfd0c701e4c923fecd3da987599"
+  integrity sha512-XUau8T7NdF4BrJKsZNOfY3vBTLwF1S5zVhe/3ynYB+Nh9sK+9tKOXIiR+9R6kmDd3axfUZ/Qep8D4CNH/6i75A==
   dependencies:
     babel-runtime "^6.26.0"
     markdown-it "^8.4.2"
@@ -1737,12 +1737,12 @@
     markdown-it "^8.4.2"
     prop-types "^15.6.2"
 
-"@dhis2/d2-ui-sharing-dialog@6.5.1":
-  version "6.5.1"
-  resolved "https://registry.yarnpkg.com/@dhis2/d2-ui-sharing-dialog/-/d2-ui-sharing-dialog-6.5.1.tgz#a7f07301b810983e5994ee2cf7e9f88952173e28"
-  integrity sha512-B8BUqm6zF5jknhs1ITQlHA8qOEuCtkk4HDo90j5uFxdP+6isLHw1oo5q9uaY9qZr70g+VlUHWWho64eEzMqXZw==
+"@dhis2/d2-ui-sharing-dialog@6.5.2":
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/@dhis2/d2-ui-sharing-dialog/-/d2-ui-sharing-dialog-6.5.2.tgz#a9bfa62ca35838b0bb5b22690f54e965495d7c0f"
+  integrity sha512-rGePujEZdAYisX0wU8w973ojP3uq4KeXArXrIYAVCqyR+9RPsvkZ+pxSc1FwfL92wXtrM6x3o7TFFt7LrLyU4g==
   dependencies:
-    "@dhis2/d2-ui-core" "6.5.1"
+    "@dhis2/d2-ui-core" "6.5.2"
     "@material-ui/core" "^3.3.1"
     "@material-ui/icons" "^3.0.1"
     babel-runtime "^6.26.0"
@@ -1751,12 +1751,12 @@
     recompose "^0.26.0"
     rxjs "^5.5.7"
 
-"@dhis2/d2-ui-translation-dialog@6.5.1":
-  version "6.5.1"
-  resolved "https://registry.yarnpkg.com/@dhis2/d2-ui-translation-dialog/-/d2-ui-translation-dialog-6.5.1.tgz#e48346d82e52bce28a52eeed360bbc19c194084f"
-  integrity sha512-u46a8az7IZe/CzP+bf/wd8Hgn7fkLFRPRFsZVwnEnEpawkWHzF5sBlekWEFUYWdT9jf27yns2QZByPBKfjoATQ==
+"@dhis2/d2-ui-translation-dialog@6.5.2":
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/@dhis2/d2-ui-translation-dialog/-/d2-ui-translation-dialog-6.5.2.tgz#01aeb4b99674e21aa7b001168b34eb7bdf08f1d3"
+  integrity sha512-z7H4ZtgPvYbN3H0Jd+BxX6CptYIvRilQxftsFW8bZTEsIuogEbifQYmM8Rz6JVmZMybEQ2V/gKOwIQayXFFsrg==
   dependencies:
-    "@dhis2/d2-ui-core" "6.5.1"
+    "@dhis2/d2-ui-core" "6.5.2"
     "@material-ui/core" "^3.3.1"
     "@material-ui/icons" "^3.0.1"
     babel-runtime "^6.26.0"