Merge pull request #1525 from ONLYOFFICE/feature/add-all-list
[SSE] Add tab 'All-list'
This commit is contained in:
maxkadushkin
GitHub
commit
0dd2e4bc8f
|
|
@ -288,6 +288,7 @@
|
|||
"textErrorLastSheet": "The workbook must have at least one visible worksheet.",
|
||||
"textErrorRemoveSheet": "Can't delete the worksheet.",
|
||||
"textHide": "Hide",
|
||||
"textHidden": "Hidden",
|
||||
"textMore": "More",
|
||||
"textMove": "Move",
|
||||
"textMoveBack": "Move back",
|
||||
|
|
|
|||
|
|
@ -365,12 +365,21 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(observer(props =>
|
|||
api.asc_moveWorksheet(activeIndex === undefined ? api.asc_getWorksheetsCount() : activeIndex, [api.asc_getActiveWorksheetIndex()]);
|
||||
}
|
||||
|
||||
const onTabListClick = (sheetIndex) => {
|
||||
const api = Common.EditorApi.get();
|
||||
if(api && api.asc_getActiveWorksheetIndex() !== sheetIndex) {
|
||||
api.asc_showWorksheet(sheetIndex);
|
||||
f7.popover.close('#idx-all-list');
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<StatusbarView
|
||||
onTabClick={onTabClick}
|
||||
onTabClicked={onTabClicked}
|
||||
onAddTabClicked={onAddTabClicked}
|
||||
onTabMenu={onTabMenu}
|
||||
onTabListClick={onTabListClick}
|
||||
onMenuMoveClick = {onMenuMoveClick}
|
||||
/>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -141,4 +141,27 @@
|
|||
|
||||
.actions-move-sheet {
|
||||
background-color: @background-secondary;
|
||||
}
|
||||
|
||||
// All-list sheet
|
||||
.all-list {
|
||||
--f7-popover-width: 190px;
|
||||
.item-checkbox{
|
||||
padding-left: 8px;
|
||||
.icon-checkbox{
|
||||
border-color: transparent;
|
||||
margin-right: 8px;
|
||||
&::after{
|
||||
color: @brandColor;
|
||||
}
|
||||
}
|
||||
.item-after div {
|
||||
color: @text-secondary;
|
||||
font-style: italic;
|
||||
}
|
||||
input[type='checkbox']:checked ~ .icon-checkbox {
|
||||
background-color: unset;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -47,6 +47,11 @@
|
|||
height: 22px;
|
||||
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M22,12H12v10h-1V12H1v-1h10V1h1v10h10V12z"/></g></svg>');
|
||||
}
|
||||
&.icon-list {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-mask('<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M2 4H16M2 14H16M2 9H16" stroke="black"/></svg>')
|
||||
}
|
||||
&.icon-settings {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
|
|
|||
|
|
@ -8,6 +8,10 @@
|
|||
background-color: @background-tertiary;
|
||||
display: flex;
|
||||
|
||||
.box-tab {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tab {
|
||||
border: 0 none;
|
||||
border-radius: 0;
|
||||
|
|
@ -70,7 +74,11 @@
|
|||
// @source: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22"><g><path d="M22,12H12v10h-1V12H1v-1h10V1h1v10h10V12z"/></g></svg>';
|
||||
// .encoded-svg-mask(@source, @fontColor);
|
||||
// background-image: none;
|
||||
.encoded-svg-mask('<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 9.98658H9.98658V16H8.01342V9.98658H2V8.01342H8.01342V2H9.98658V8.01342H16V9.98658Z" fill="black"/></svg>')
|
||||
.encoded-svg-mask('<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M16 9.98658H9.98658V16H8.01342V9.98658H2V8.01342H8.01342V2H9.98658V8.01342H16V9.98658Z" fill="black"/></svg>')
|
||||
}
|
||||
|
||||
&.icon-list.bold {
|
||||
.encoded-svg-mask('<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M2 4H16V6H2V4ZM2 8.01562H16V10.0312H2V8.01562ZM2 12H16V14H2V12Z" fill="black"/></svg>')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { Fragment, useState } from 'react';
|
||||
import { View, Link, Icon, Popover, List, ListItem, ListButton, Actions, ActionsGroup, ActionsButton, Sheet, Page } from 'framework7-react';
|
||||
import {f7, View, Link, Icon, Popover, List, ListItem, ListButton, Actions, ActionsGroup, ActionsButton, Sheet, Page } from 'framework7-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Device } from '../../../../common/mobile/utils/device';
|
||||
import { inject, observer } from 'mobx-react';
|
||||
|
|
@ -53,6 +53,28 @@ const PageListMove = props => {
|
|||
)
|
||||
};
|
||||
|
||||
const PageAllList = (props) => {
|
||||
const { t } = useTranslation();
|
||||
const { sheets, onTabListClick } = props;
|
||||
const allSheets = sheets.sheets;
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<List>
|
||||
{ allSheets.map( (model,sheetIndex) =>
|
||||
<ListItem className='item-list' key={model.name} title={model.name} checkbox checked={model.active} onClick={() => onTabListClick(sheetIndex)}>
|
||||
{model.hidden ?
|
||||
<div slot='after'>
|
||||
{t('Statusbar.textHidden')}
|
||||
</div>
|
||||
: null}
|
||||
</ListItem>)
|
||||
}
|
||||
</List>
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
||||
const StatusbarView = inject('storeAppOptions', 'sheets', 'users')(observer(props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('Statusbar', {returnObjects: true});
|
||||
|
|
@ -71,10 +93,13 @@ const StatusbarView = inject('storeAppOptions', 'sheets', 'users')(observer(prop
|
|||
<Fragment>
|
||||
<View id="idx-statusbar" className="statusbar" style={viewStyle}>
|
||||
{isEdit &&
|
||||
<div id="idx-box-add-tab" className={`${isDisconnected || isWorkbookLocked || isProtectedWorkbook ? 'disabled' : ''}`}>
|
||||
<div id="idx-box-add-tab" className={`${isDisconnected || isWorkbookLocked || isProtectedWorkbook ? 'disabled box-tab' : 'box-tab'}`}>
|
||||
<Link href={false} id="idx-btn-addtab" className={`tab${isDisabledEditSheet || isDisconnected || isWorkbookLocked || isProtectedWorkbook ? ' disabled' : ''}`} onClick={props.onAddTabClicked}>
|
||||
<Icon className={`icon icon-plus ${isAndroid ? 'bold' : ''}`}/>
|
||||
</Link>
|
||||
<Link href={false} id="idx-btn-all-list-tab" className={`tab${isDisabledEditSheet || isDisconnected || isWorkbookLocked || isProtectedWorkbook ? ' disabled' : ''}`} onClick={(e) => f7.popover.open('#idx-all-list', e.target)}>
|
||||
<Icon className={`icon icon-list ${isAndroid ? 'bold' : ''}`}/>
|
||||
</Link>
|
||||
</div>
|
||||
}
|
||||
<div className="statusbar--box-tabs">
|
||||
|
|
@ -131,6 +156,11 @@ const StatusbarView = inject('storeAppOptions', 'sheets', 'users')(observer(prop
|
|||
</ActionsGroup>
|
||||
</Actions>
|
||||
) : null}
|
||||
{
|
||||
<Popover style={{height: '240px'}} id="idx-all-list" className="all-list">
|
||||
<PageAllList sheets={sheets} onTabListClick={props.onTabListClick}/>
|
||||
</Popover>
|
||||
}
|
||||
{isPhone ?
|
||||
<Sheet style={{height: '48%'}} className='move-sheet' swipeToClose={true} backdrop={false}>
|
||||
<div className='swipe-container'>
|
||||
|
|
|
|||
Loading…
Reference in a new issue