filter popover ui

CenturyLinkCloud · Feb 26, 2020 · 9a2df70 · 9a2df70
1 parent 8560074
commit 9a2df70
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/mdw-workflow/assets/com/centurylink/mdw/react/.mdw/versions b/mdw-workflow/assets/com/centurylink/mdw/react/.mdw/versions
@@ -9,7 +9,7 @@ DatePicker.jsx=1
 Dropdown.jsx=1
 Enter.jsx=4
 Field.jsx=1
-FilterPop.jsx=3
+FilterPop.jsx=4
 Footer.jsx=3
 Header.jsx=5
 HeaderButton.jsx=1

diff --git a/mdw-workflow/assets/com/centurylink/mdw/react/FilterPop.jsx b/mdw-workflow/assets/com/centurylink/mdw/react/FilterPop.jsx
@@ -30,7 +30,7 @@ class FilterPop extends Component {
     const {filters, filterOptions, onFilterChange, onFilterReset, ...popProps} = this.props; // eslint-disable-line no-unused-vars
     return (
       <Popover {...popProps} id="filter-pop">
-        <div style={{width:'150px'}}>
+        <div style={{width:'175px'}}>
           {
             Object.keys(filters).map(key => {
               const id = key.replace(/\s+/g, '-').toLowerCase();
@@ -41,7 +41,9 @@ class FilterPop extends Component {
               return (
                 <div key={key} className={isDate ? '' : 'mdw-vsm-indent'}
                   style={{display:isCb ? 'flex' : 'block', marginTop:isCb ? '5px' : '3px'}}>
-                  <label className="mdw-label">{key + ':'}</label>
+                  {!isCb &&
+                    <label className="mdw-label">{key + ':'}</label>
+                  }  
                   {isDate &&
                     <div className="mdw-flex-item">
                       <DatePicker id={id}
@@ -56,13 +58,16 @@ class FilterPop extends Component {
                       onSelect={sel => this.handleChange(key, sel)} />
                   }
                   {isCb &&
-                    <input type="checkbox" id={id}
-                      style={{marginTop:'3px',marginLeft:'6px',fontSize:'24px'}}
-                      checked={filters[key]}
-                      onChange={event => this.handleChange(key, event.target.checked)} />
+                    <span>
+                      <input type="checkbox" id={id}
+                        style={{marginTop:'3px',fontSize:'24px'}}
+                        checked={filters[key]}
+                        onChange={event => this.handleChange(key, event.target.checked)} />
+                      <label className="mdw-label" style={{display:'inline',marginLeft:'5px'}}>{key}</label>
+                    </span>
                   }
                   {!isDate && !isDropdown && !isCb &&
-                    <input type="text" id={id}
+                    <input type="text" id={id} style={{width:'100%'}}
                       value={filters[key]}
                       onChange={event => this.handleChange(key, event.target.value)}
                       onKeyDown={event => {if (event.key === 'Enter') {document.body.click();}} } />