Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[SSE mobile] Refactoring filter options

Browse source
This commit is contained in:
JuliaSvinareva 2021-05-24 13:32:35 +03:00
parent 10927e6f63
commit e3be43c3ee
6 changed files with 44 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
apps/spreadsheeteditor/mobile/locale/en.json
View file

@ -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"

12
apps/spreadsheeteditor/mobile/src/less/app-ios.less
View file

@ -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;
}
}
}

56
apps/spreadsheeteditor/mobile/src/less/app-material.less
View file

@ -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,34 +23,30 @@
align-items: center;
width: auto;
}
}
.icon.icon-checkbox {
width: 20px;
height: 20px;
border-radius: 20px;
border: 2px solid #6d6d6d;
}
label.item-checkbox input[type='checkbox']:checked ~
.icon-checkbox, label.item-checkbox input[type='checkbox']:checked ~
* .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 {
content: ' ';
position: absolute;
width: 10px;
height: 10px;
left: 50%;
top: 50%;
margin-left: -5px;
margin-top: -5px;
background-color: #40865c;
border-radius: 100%;
}
.device-android .button-raised{
box-shadow: none;
// For filter options
.radio-checkbox-item {
.icon.icon-checkbox {
width: 20px;
height: 20px;
border-radius: 20px;
border: 2px solid var(--f7-checkbox-inactive-color);
}
label.item-checkbox input[type='checkbox']:checked ~ .icon-checkbox {
border-color: @themeColor;
background-color: transparent;
}
label.item-content i.icon.icon-checkbox:after {
content: ' ';
position: absolute;
width: 10px;
height: 10px;
left: 50%;
top: 50%;
margin-left: -5px;
margin-top: -5px;
background-color: @themeColor;
border-radius: 100%;
}
}
}

10
apps/spreadsheeteditor/mobile/src/less/icons-ios.less
View file

@ -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;
}
}

4
apps/spreadsheeteditor/mobile/src/page/main.jsx
View file

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

8
apps/spreadsheeteditor/mobile/src/view/FilterOptions.jsx
View file

@ -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>