[SSE mobile] Refactoring filter options

apps/spreadsheeteditor/mobile/locale/en.json

@@ -410,6 +410,7 @@
             "textFilterOptions": "Filter Options",
             "textClearFilter": "Clear Filter",
             "textDeleteFilter": "Delete Filter",
+            "textSelectAll": "Select All",
             "textEmptyItem": "{Blanks}",
             "textErrorTitle": "Warning",
             "textErrorMsg": "You must choose at least one value"

apps/spreadsheeteditor/mobile/src/less/app-ios.less

@@ -20,4 +20,16 @@
         appearance: none;
     }
 
+    // For filter options
+    .radio-checkbox-item {
+        label.item-content input[type=checkbox]:checked ~ .item-inner {
+            background: no-repeat center;
+            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2013%2010'%3E%3Cpolygon%20fill%3D'%2340865c'%20points%3D'11.6%2C0%204.4%2C7.2%201.4%2C4.2%200%2C5.6%204.4%2C10%204.4%2C10%204.4%2C10%2013%2C1.4%20'%2F%3E%3C%2Fsvg%3E");
+            background-position: calc(100% - 15px) center;
+            background-size: 13px 10px;
+        }
+        .icon.icon-checkbox {
+            display: none;
+        }
+    }
 }

apps/spreadsheeteditor/mobile/src/less/app-material.less

@@ -2,12 +2,14 @@
 // Colors
 @themeColorLight: #a2bdde;
 @navBarIconColor: #fff;
+@listButtonBorderColor: rgba(0,0,0,0.15);
 
 
 .device-android {
     --f7-navbar-bg-color: @themeColor;
     --f7-navbar-link-color: @navBarIconColor;
     --f7-navbar-text-color: @navBarIconColor;
+    --f7-list-button-border-color: @listButtonBorderColor;
 
     // Main Toolbar
     #editor-navbar.navbar .right {
@@ -21,20 +23,17 @@
         align-items: center;
         width: auto;
     }
-}
 
+    // For filter options
+    .radio-checkbox-item {
         .icon.icon-checkbox {
             width: 20px;
             height: 20px;
             border-radius: 20px;
-    border: 2px solid #6d6d6d;
+            border: 2px solid var(--f7-checkbox-inactive-color);
         }
-label.item-checkbox input[type='checkbox']:checked ~ 
+        label.item-checkbox input[type='checkbox']:checked ~ .icon-checkbox {
-.icon-checkbox, label.item-checkbox input[type='checkbox']:checked ~ 
+            border-color: @themeColor;
-* .icon-checkbox, .checkbox input[type='checkbox']:checked ~ 
-i, label.item-checkbox input[type='checkbox']:indeterminate ~ 
-.icon-checkbox, label.item-checkbox input[type='checkbox']:indeterminate ~ * .icon-checkbox, .checkbox input[type='checkbox']:indeterminate ~ i{
-    border-color: #40865c;
             background-color: transparent;
         }
         label.item-content i.icon.icon-checkbox:after {
@@ -46,9 +45,8 @@ label.item-content i.icon.icon-checkbox:after {
             top: 50%;
             margin-left: -5px;
             margin-top: -5px;
-    background-color: #40865c;
+            background-color: @themeColor;
             border-radius: 100%;
         }
-.device-android .button-raised{
+    }
-    box-shadow: none;
 }

apps/spreadsheeteditor/mobile/src/less/icons-ios.less

@@ -474,14 +474,4 @@
             }
         }
     }
-    label.item-content input[type=checkbox]:checked~.item-inner, 
-    label.item-content input[type=radio]:checked~.item-inner {
-    background: no-repeat center;
-    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2013%2010'%3E%3Cpolygon%20fill%3D'%2340865c'%20points%3D'11.6%2C0%204.4%2C7.2%201.4%2C4.2%200%2C5.6%204.4%2C10%204.4%2C10%204.4%2C10%2013%2C1.4%20'%2F%3E%3C%2Fsvg%3E");
-    background-position: 90% center;
-    background-size: 13px 10px;
-    }
-    .icon.icon-checkbox{
-        display:none;
-    }
 }

apps/spreadsheeteditor/mobile/src/page/main.jsx

@@ -112,9 +112,7 @@ class MainPage extends Component {
                         <CollaborationView onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />
                 }
 
-                {
                 <FilterOptionsController />
-                }
                 
                 <Statusbar />
 

apps/spreadsheeteditor/mobile/src/view/FilterOptions.jsx

@@ -8,8 +8,6 @@ const FilterOptions = (props) => {
     const _t = t('View.Edit', {returnObjects: true});
 
     useEffect(() => {
-        const $clearFilter = $$("#button-clear-filter");
-        props.isValid ? $clearFilter.addClass('disabled') : $clearFilter.removeClass('disabled');
         const is_all_checked = props.listVal.every(item => item.check);
         setAll(is_all_checked);
     });
@@ -47,13 +45,13 @@ const FilterOptions = (props) => {
                 </ListItem>
            </List>
            <List >
-               <ListButton color="black" className="item-link button-raised"  id='button-clear-filter' onClick={HandleClearFilter}>{_t.textClearFilter}</ListButton>
+               <ListButton color="black" className={props.isValid ? 'disabled' : ''} onClick={HandleClearFilter}>{_t.textClearFilter}</ListButton>
                <ListButton color="red" onClick={() => props.onDeleteFilter()} id="btn-delete-filter">{_t.textDeleteFilter}</ListButton>
            </List>
            <List>
-               <ListItem onChange={e => props.onUpdateCell('all', e.target.checked)} name='filter-cellAll' checkbox checked={all}>Select All</ListItem>
+               <ListItem className='radio-checkbox-item' onChange={e => props.onUpdateCell('all', e.target.checked)} name='filter-cellAll' checkbox checked={all}>{_t.textSelectAll}</ListItem>
                {props.listVal.map((value) =>
-                   <ListItem onChange={e => props.onUpdateCell(value.id, e.target.checked)}  key={value.value} name='filter-cell' value={value.value} title={value.cellvalue} checkbox checked={value.check} />
+                   <ListItem className='radio-checkbox-item' onChange={e => props.onUpdateCell(value.id, e.target.checked)}  key={value.value} name='filter-cell' value={value.value} title={value.cellvalue} checkbox checked={value.check} />
                )}
            </List>
             </Page>