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

[DE PE SSE mobile] Corrected buttons

Browse source
This commit is contained in:
SergeyEzhin 2021-05-30 16:34:15 +03:00
parent edd4ed6629
commit e9eb6fceda
25 changed files with 58 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/common/mobile/resources/less/common-ios.less
View file

@ -355,6 +355,10 @@
color: red; color: red;
} }
.list-button {
position: initial;
}
.block-title { .block-title {
position: relative; position: relative;
overflow: hidden; overflow: hidden;

27
apps/common/mobile/resources/less/common-material.less
View file

@ -103,7 +103,8 @@
.button-fill { .button-fill {
color: @white; color: @white;
background-color: @themeColor; // background-color: @themeColor;
background-color: transparent;
} }
.button-raised { .button-raised {
@ -116,14 +117,19 @@
} }
.buttons-list { .buttons-list {
li { ul {
margin: 20px 16px; &::before, &::after {
color: @white; display: none;
border-radius: 2px; }
text-transform: uppercase; li {
height: 36px; margin: 20px 16px;
min-height: 36px; color: @white;
font-size: 14px; border-radius: 2px;
text-transform: uppercase;
height: 36px;
min-height: 36px;
font-size: 14px;
}
} }
} }
@ -142,7 +148,8 @@
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
border-radius: 2px; border-radius: 2px;
margin: 20px 16px; // margin: 20px 16px;
margin: 0;
} }
.button-raised .list-button { .button-raised .list-button {
box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24); box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);

6
apps/common/mobile/resources/less/common.less
View file

@ -339,9 +339,9 @@
.buttons-list { .buttons-list {
ul { ul {
&::before, &::after { // &::before, &::after {
display: none; // display: none;
} // }
li { li {
border: 0; border: 0;
font-weight: normal; font-weight: normal;

2
apps/documenteditor/mobile/src/view/add/AddImage.jsx
View file

@ -20,7 +20,7 @@ const PageLinkSettings = props => {
> >
</ListInput> </ListInput>
</List> </List>
<List> <List className="buttons-list">
<ListButton className={'button-fill button-raised' + (stateValue.length < 1 ? ' disabled' : '')} <ListButton className={'button-fill button-raised' + (stateValue.length < 1 ? ' disabled' : '')}
title={_t.textInsertImage} title={_t.textInsertImage}
onClick={() => {props.onInsertByUrl(stateValue)}}></ListButton> onClick={() => {props.onInsertByUrl(stateValue)}}></ListButton>

2
apps/documenteditor/mobile/src/view/add/AddLink.jsx
View file

@ -39,7 +39,7 @@ const PageLink = props => {
onChange={(event) => {setTip(event.target.value)}} onChange={(event) => {setTip(event.target.value)}}
></ListInput> ></ListInput>
</List> </List>
<List> <List className="buttons-list">
<ListButton className={'button-fill button-raised' + (stateLink.length < 1 ? ' disabled' : '')} title={_t.textInsert} onClick={() => { <ListButton className={'button-fill button-raised' + (stateLink.length < 1 ? ' disabled' : '')} title={_t.textInsert} onClick={() => {
props.onInsertLink(stateLink, stateDisplay, stateTip) props.onInsertLink(stateLink, stateDisplay, stateTip)
}}></ListButton> }}></ListButton>

2
apps/documenteditor/mobile/src/view/add/AddOther.jsx
View file

@ -141,7 +141,7 @@ const PageFootnote = props => {
) )
})} })}
</List> </List>
<List> <List className="buttons-list">
<ListButton className={'button-fill button-raised'} title={_t.textInsertFootnote} onClick={() => { <ListButton className={'button-fill button-raised'} title={_t.textInsertFootnote} onClick={() => {
props.onInsertFootnote(stateFormat, stateStartAt, stateLocation); props.onInsertFootnote(stateFormat, stateStartAt, stateLocation);
}}></ListButton> }}></ListButton>

2
apps/documenteditor/mobile/src/view/edit/EditChart.jsx
View file

@ -446,7 +446,7 @@ const EditChart = props => {
onReorder: props.onReorder onReorder: props.onReorder
}}></ListItem> }}></ListItem>
</List> </List>
<List> <List className="buttons-list">
<ListButton title={_t.textRemoveChart} onClick={() => {props.onRemoveChart()}} className='button-red button-fill button-raised'/> <ListButton title={_t.textRemoveChart} onClick={() => {props.onRemoveChart()}} className='button-red button-fill button-raised'/>
</List> </List>
</Fragment> </Fragment>

2
apps/documenteditor/mobile/src/view/edit/EditHyperlink.jsx
View file

@ -38,7 +38,7 @@ const EditHyperlink = props => {
onChange={(event) => {setTip(event.target.value)}} onChange={(event) => {setTip(event.target.value)}}
></ListInput> ></ListInput>
</List> </List>
<List> <List className="buttons-list">
<ListButton className={'button-fill button-raised' + (stateLink.length < 1 ? ' disabled' : '')} title={_t.textEditLink} onClick={() => { <ListButton className={'button-fill button-raised' + (stateLink.length < 1 ? ' disabled' : '')} title={_t.textEditLink} onClick={() => {
props.onEditLink(stateLink, stateDisplay, stateTip) props.onEditLink(stateLink, stateDisplay, stateTip)
}}></ListButton> }}></ListButton>

4
apps/documenteditor/mobile/src/view/edit/EditImage.jsx
View file

@ -156,7 +156,7 @@ const PageLinkSettings = props => {
> >
</ListInput> </ListInput>
</List> </List>
<List> <List className="buttons-list">
<ListButton className={'button-fill button-raised' + (stateValue.length < 1 ? ' disabled' : '')} title={_t.textReplaceImage} onClick={() => {onReplace()}}></ListButton> <ListButton className={'button-fill button-raised' + (stateValue.length < 1 ? ' disabled' : '')} title={_t.textReplaceImage} onClick={() => {onReplace()}}></ListButton>
</List> </List>
</Page> </Page>
@ -258,7 +258,7 @@ const EditImage = props => {
onReorder: props.onReorder onReorder: props.onReorder
}}></ListItem> }}></ListItem>
</List> </List>
<List> <List className="buttons-list">
<ListButton className='button-fill button-raised' title={_t.textActualSize} onClick={() => {props.onDefaulSize()}}/> <ListButton className='button-fill button-raised' title={_t.textActualSize} onClick={() => {props.onDefaulSize()}}/>
<ListButton className='button-red button-fill button-raised' title={_t.textRemoveImage} onClick={() => {props.onRemoveImage()}}/> <ListButton className='button-red button-fill button-raised' title={_t.textRemoveImage} onClick={() => {props.onRemoveImage()}}/>
</List> </List>

2
apps/documenteditor/mobile/src/view/edit/EditShape.jsx
View file

@ -536,7 +536,7 @@ const EditShape = props => {
onReorder: props.onReorder onReorder: props.onReorder
}}></ListItem> }}></ListItem>
</List> </List>
<List> <List className="buttons-list">
<ListButton title={_t.textRemoveShape} onClick={() => {props.onRemoveShape()}} className='button-red button-fill button-raised'/> <ListButton title={_t.textRemoveShape} onClick={() => {props.onRemoveShape()}} className='button-red button-fill button-raised'/>
</List> </List>
</Fragment> </Fragment>

4
apps/documenteditor/mobile/src/view/edit/EditTable.jsx
View file

@ -560,7 +560,9 @@ const EditTable = props => {
</a> </a>
</Row> </Row>
</ListItem> </ListItem>
<ListButton title={_t.textRemoveTable} onClick={() => {props.onRemoveTable()}} className='button-red button-fill button-raised'></ListButton> <List className="buttons-list">
<ListButton title={_t.textRemoveTable} onClick={() => {props.onRemoveTable()}} className='button-red button-fill button-raised'></ListButton>
</List>
</List> </List>
<List> <List>
<ListItem title={_t.textTableOptions} link='/edit-table-options/' routeProps={{ <ListItem title={_t.textTableOptions} link='/edit-table-options/' routeProps={{

2
apps/presentationeditor/mobile/src/view/add/AddImage.jsx
View file

@ -20,7 +20,7 @@ const PageLinkSettings = props => {
> >
</ListInput> </ListInput>
</List> </List>
<List> <List className="buttons-list">
<ListButton className={'button-fill button-raised' + (stateValue.length < 1 ? ' disabled' : '')} <ListButton className={'button-fill button-raised' + (stateValue.length < 1 ? ' disabled' : '')}
title={_t.textInsertImage} title={_t.textInsertImage}
onClick={() => {props.onInsertByUrl(stateValue)}}></ListButton> onClick={() => {props.onInsertByUrl(stateValue)}}></ListButton>

2
apps/presentationeditor/mobile/src/view/add/AddLink.jsx
View file

@ -143,7 +143,7 @@ const PageLink = props => {
/> />
</List> </List>
<List className="buttons-list"> <List className="buttons-list">
<ListItem title={_t.textInsert} href="#" <ListButton title={_t.textInsert}
className={`button-fill button-raised${typeLink === 1 && link.length < 1 && ' disabled'}`} className={`button-fill button-raised${typeLink === 1 && link.length < 1 && ' disabled'}`}
onClick={() => { onClick={() => {
props.onInsertLink(typeLink, (typeLink === 1 ? props.onInsertLink(typeLink, (typeLink === 1 ?

2
apps/presentationeditor/mobile/src/view/edit/EditChart.jsx
View file

@ -346,7 +346,7 @@ const EditChart = props => {
onAlign: props.onAlign onAlign: props.onAlign
}}></ListItem> }}></ListItem>
</List> </List>
<List> <List className="buttons-list">
<ListButton title={_t.textRemoveChart} onClick={() => {props.onRemoveChart()}} className='button-red button-fill button-raised'/> <ListButton title={_t.textRemoveChart} onClick={() => {props.onRemoveChart()}} className='button-red button-fill button-raised'/>
</List> </List>
</Fragment> </Fragment>

4
apps/presentationeditor/mobile/src/view/edit/EditImage.jsx
View file

@ -27,8 +27,8 @@ const EditImage = props => {
}}></ListItem> }}></ListItem>
</List> </List>
<List className="buttons-list"> <List className="buttons-list">
<ListItem href="#" className="button button-raised button-fill" onClick={props.onDefaultSize}>{_t.textActualSize}</ListItem> <ListButton className="button-fill button-raised" onClick={props.onDefaultSize}>{_t.textActualSize}</ListButton>
<ListItem href="#" className="button button-raised button-red" onClick={props.onRemoveImage}>{_t.textRemoveImage}</ListItem> <ListButton className="button-red button-fill button-raised" onClick={props.onRemoveImage}>{_t.textRemoveImage}</ListButton>
</List> </List>
</Fragment> </Fragment>
) )

6
apps/presentationeditor/mobile/src/view/edit/EditLink.jsx
View file

@ -171,7 +171,7 @@ const PageLink = props => {
/> />
</List> </List>
<List className="buttons-list"> <List className="buttons-list">
<ListItem title={_t.textEditLink} href="#" <ListButton title={_t.textEditLink}
className={`button-fill button-raised${typeLink === 1 && link.length < 1 && ' disabled'}`} className={`button-fill button-raised${typeLink === 1 && link.length < 1 && ' disabled'}`}
onClick={() => { onClick={() => {
props.onEditLink(typeLink, (typeLink === 1 ? props.onEditLink(typeLink, (typeLink === 1 ?
@ -179,8 +179,8 @@ const PageLink = props => {
{linkTo: linkTo, numberTo: numberTo, display: stateDisplay, tip: screenTip, displayDisabled: displayDisabled})); {linkTo: linkTo, numberTo: numberTo, display: stateDisplay, tip: screenTip, displayDisabled: displayDisabled}));
}} }}
/> />
<ListItem title={_t.textRemoveLink} href="#" <ListButton title={_t.textRemoveLink}
className={`button-fill button-red`} className={`button-red button-fill button-raised`}
onClick={() => { onClick={() => {
props.onRemoveLink() props.onRemoveLink()
}} }}

4
apps/presentationeditor/mobile/src/view/edit/EditShape.jsx
View file

@ -1,6 +1,6 @@
import React, {Fragment, useState} from 'react'; import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react"; import {observer, inject} from "mobx-react";
import {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, View, NavRight, ListItemCell, Range, Button, Segmented, Tab, Tabs} from 'framework7-react'; import {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, View, NavRight, ListItemCell, Range, Button, Segmented, Tab, Tabs, ListButton} from 'framework7-react';
import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx'; import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device'; import {Device} from '../../../../../common/mobile/utils/device';
@ -39,7 +39,7 @@ const EditShape = props => {
}}></ListItem> }}></ListItem>
</List> </List>
<List className="buttons-list"> <List className="buttons-list">
<ListItem href="#" className="button button-raised button-red" onClick={props.onRemoveShape}>{_t.textRemoveShape}</ListItem> <ListButton className="button-red button-fill button-raised" onClick={props.onRemoveShape}>{_t.textRemoveShape}</ListButton>
</List> </List>
</Fragment> </Fragment>
) )

6
apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx
View file

@ -1,6 +1,6 @@
import React, {Fragment, useState} from 'react'; import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react"; import {observer, inject} from "mobx-react";
import {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, View, NavRight, ListItemCell, Range, Button, Segmented} from 'framework7-react'; import {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, View, NavRight, ListItemCell, Range, Button, Segmented, ListButton} from 'framework7-react';
import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx'; import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device'; import {Device} from '../../../../../common/mobile/utils/device';
@ -32,8 +32,8 @@ const EditSlide = props => {
}}></ListItem> }}></ListItem>
</List> </List>
<List className="buttons-list"> <List className="buttons-list">
<ListItem href="#" className="button button-raised button-fill" onClick={props.onDuplicateSlide}>{_t.textDuplicateSlide}</ListItem> <ListButton className="button-fill button-raised" onClick={props.onDuplicateSlide}>{_t.textDuplicateSlide}</ListButton>
<ListItem href="#" className="button button-raised button-red" onClick={props.onRemoveSlide}>{_t.textDeleteSlide}</ListItem> <ListButton className="button-red button-fill button-raised" onClick={props.onRemoveSlide}>{_t.textDeleteSlide}</ListButton>
</List> </List>
</Fragment> </Fragment>
) )

2
apps/presentationeditor/mobile/src/view/edit/EditTable.jsx
View file

@ -446,7 +446,7 @@ const EditTable = props => {
</Row> </Row>
</ListItem> </ListItem>
<List className="buttons-list"> <List className="buttons-list">
<ListItem href="#" title={_t.textRemoveTable} onClick={() => {props.onRemoveTable()}} className='button button-raised button-red'></ListItem> <ListButton title={_t.textRemoveTable} onClick={() => {props.onRemoveTable()}} className='button-red button-fill button-raised'></ListButton>
</List> </List>
</List> </List>
<List> <List>

2
apps/spreadsheeteditor/mobile/src/view/add/AddImage.jsx
View file

@ -36,7 +36,7 @@ const PageLinkSettings = props => {
> >
</ListInput> </ListInput>
</List> </List>
<List> <List className="buttons-list">
<ListButton className={'button-fill button-raised' + (stateValue.length < 1 ? ' disabled' : '')} <ListButton className={'button-fill button-raised' + (stateValue.length < 1 ? ' disabled' : '')}
title={_t.textInsertImage} title={_t.textInsertImage}
onClick={() => {props.onInsertByUrl(stateValue)}}></ListButton> onClick={() => {props.onInsertByUrl(stateValue)}}></ListButton>

2
apps/spreadsheeteditor/mobile/src/view/add/AddLink.jsx
View file

@ -129,7 +129,7 @@ const AddLinkView = props => {
className={isIos ? 'list-input-right' : ''} className={isIos ? 'list-input-right' : ''}
/> />
</List> </List>
<List> <List className="buttons-list">
<ListButton title={_t.textInsert} <ListButton title={_t.textInsert}
className={`button-fill button-raised${(typeLink === 'ext' && link.length < 1 || typeLink === 'int' && range.length < 1) && ' disabled'}`} className={`button-fill button-raised${(typeLink === 'ext' && link.length < 1 || typeLink === 'int' && range.length < 1) && ' disabled'}`}
onClick={() => {props.onInsertLink(typeLink === 'ext' ? onClick={() => {props.onInsertLink(typeLink === 'ext' ?

2
apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx
View file

@ -1466,7 +1466,7 @@ const EditChart = props => {
onReorder: props.onReorder onReorder: props.onReorder
}}></ListItem> }}></ListItem>
</List> </List>
<List> <List className="buttons-list">
<ListButton title={_t.textRemoveChart} onClick={() => {props.onRemoveChart()}} className='button-red button-fill button-raised'/> <ListButton title={_t.textRemoveChart} onClick={() => {props.onRemoveChart()}} className='button-red button-fill button-raised'/>
</List> </List>
</Fragment> </Fragment>

4
apps/spreadsheeteditor/mobile/src/view/edit/EditImage.jsx
View file

@ -23,8 +23,8 @@ const EditImage = props => {
}}></ListItem> }}></ListItem>
</List> </List>
<List className="buttons-list"> <List className="buttons-list">
<ListItem href="#" className="button button-raised button-fill" onClick={props.onDefaultSize}>{_t.textActualSize}</ListItem> <ListButton className="button-fill button-raised" onClick={props.onDefaultSize}>{_t.textActualSize}</ListButton>
<ListItem href="#" className="button button-raised button-red" onClick={props.onRemoveImage}>{_t.textRemoveImage}</ListItem> <ListButton className="button-red button-fill button-raised" onClick={props.onRemoveImage}>{_t.textRemoveImage}</ListButton>
</List> </List>
</Fragment> </Fragment>
) )

4
apps/spreadsheeteditor/mobile/src/view/edit/EditLink.jsx
View file

@ -157,7 +157,7 @@ const EditLink = props => {
className={isIos ? 'list-input-right' : ''} className={isIos ? 'list-input-right' : ''}
/> />
</List> </List>
<List> <List className="buttons-list">
<ListButton title={_t.textEditLink} <ListButton title={_t.textEditLink}
className={`button-fill button-raised${(typeLink === 'ext' && link.length < 1 || typeLink === 'int' || range.length < 1 || !curSheet.length) && ' disabled'}`} className={`button-fill button-raised${(typeLink === 'ext' && link.length < 1 || typeLink === 'int' || range.length < 1 || !curSheet.length) && ' disabled'}`}
onClick={() => {props.onEditLink(typeLink === 1 ? onClick={() => {props.onEditLink(typeLink === 1 ?
@ -165,7 +165,7 @@ const EditLink = props => {
{type: 2, url: range, sheet: curSheet, text: stateDisplayText, tooltip: screenTip})}} {type: 2, url: range, sheet: curSheet, text: stateDisplayText, tooltip: screenTip})}}
/> />
<ListButton title={_t.textRemoveLink} <ListButton title={_t.textRemoveLink}
className={`button-fill button-red`} className={`button-red button-fill button-raised`}
onClick={() => props.onRemoveLink()} onClick={() => props.onRemoveLink()}
/> />
</List> </List>

4
apps/spreadsheeteditor/mobile/src/view/edit/EditShape.jsx
View file

@ -1,6 +1,6 @@
import React, {Fragment, useState} from 'react'; import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react"; import {observer, inject} from "mobx-react";
import {f7, Page, Navbar, NavRight, List, ListItem, Link, Icon, Range, Tab, Tabs} from 'framework7-react'; import {f7, Page, Navbar, NavRight, List, ListItem, Link, Icon, Range, Tab, Tabs, ListButton} from 'framework7-react';
import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx'; import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device'; import {Device} from '../../../../../common/mobile/utils/device';
@ -36,7 +36,7 @@ const EditShape = props => {
}}></ListItem> }}></ListItem>
</List> </List>
<List className="buttons-list"> <List className="buttons-list">
<ListItem href="#" className="button button-raised button-red" onClick={props.onRemoveShape}>{_t.textRemoveShape}</ListItem> <ListButton className="button-red button-fill button-raised" onClick={props.onRemoveShape}>{_t.textRemoveShape}</ListButton>
</List> </List>
</Fragment> </Fragment>
) )