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

[DE mobile] Added creating and deleting custom styles

Browse source
This commit is contained in:
SergeyEzhin 2022-05-18 20:21:46 +04:00
parent 30a5baea55
commit aaf5c48990
5 changed files with 63 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -93,6 +93,10 @@
} }
.list { .list {
max-width: 100%;
ul {
width: 100%;
}
li.no-indicator { li.no-indicator {
.item-link { .item-link {
.item-inner{ .item-inner{
@ -123,6 +127,9 @@
background-color: @autoColor; background-color: @autoColor;
} }
} }
.item-link .item-inner {
width: 100%;
}
} }
// Bullets, numbers and multilevels // Bullets, numbers and multilevels

21
apps/documenteditor/mobile/src/controller/edit/EditParagraph.jsx
View file

@ -9,6 +9,7 @@ class EditParagraphController extends Component {
this.onStyleClick = this.onStyleClick.bind(this); this.onStyleClick = this.onStyleClick.bind(this);
this.onSaveStyle = this.onSaveStyle.bind(this); this.onSaveStyle = this.onSaveStyle.bind(this);
this.onStyleMenuDelete = this.onStyleMenuDelete.bind(this);
} }
onStyleClick (name) { onStyleClick (name) {
@ -21,17 +22,18 @@ class EditParagraphController extends Component {
onSaveStyle(title, nextParagraphStyle) { onSaveStyle(title, nextParagraphStyle) {
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
const curStyleName = this.props.storeParagraphSettings.styleName; const style = api.asc_GetStyleFromFormatting();
let newStyle = new Asc.asc_CStyle();
newStyle.put_Name(title); style.put_Name(title);
// console.log(newStyle.get_Name()); style.put_Next(nextParagraphStyle ? nextParagraphStyle : null);
newStyle.put_Next(nextParagraphStyle ? nextParagraphStyle : null);
newStyle.put_BasedOn(curStyleName); api.asc_AddNewStyle(style);
// console.log(newStyle); this.props.storeParagraphSettings.changeParaStyleName(title);
}
api.asc_AddNewStyle(newStyle); onStyleMenuDelete(styleName) {
this.props.storeParagraphSettings.changeParaStyleName(newStyle.get_Name()); const api = Common.EditorApi.get();
api.asc_RemoveStyle(styleName);
} }
onDistanceBefore (distance, isDecrement) { onDistanceBefore (distance, isDecrement) {
@ -174,6 +176,7 @@ class EditParagraphController extends Component {
onKeepNext={this.onKeepNext} onKeepNext={this.onKeepNext}
onBackgroundColor={this.onBackgroundColor} onBackgroundColor={this.onBackgroundColor}
onSaveStyle={this.onSaveStyle} onSaveStyle={this.onSaveStyle}
onStyleMenuDelete={this.onStyleMenuDelete}
/> />
) )
} }

9
apps/documenteditor/mobile/src/less/app.less
View file

@ -314,3 +314,12 @@
border-top: 1px solid var(--background-menu-divider); border-top: 1px solid var(--background-menu-divider);
} }
} }
.create-style-link {
.item-link .item-inner:before {
display: none;
}
.item-title {
color: @brandColor;
}
}

5
apps/documenteditor/mobile/src/less/icons-material.less
View file

@ -215,6 +215,11 @@
height: 22px; height: 22px;
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M21,19h-6h-1h-1.6c-0.9,1.8-2.7,3-4.9,3s-4-1.2-4.9-3H1H0v-1v-3v-1v-3v-1V7V6V3V2h7h1h6h1h6h1v1v3v1v3v1v3v1v3v1H21z M1,18h1.2C2.1,17.5,2,17,2,16.5c0-0.5,0.1-1,0.2-1.5H1V18z M7,3H1v3h6V3z M7,7H1v3h6V7z M7.5,12C5,12,3,14,3,16.5S5,21,7.5,21s4.5-2,4.5-4.5S10,12,7.5,12z M14,3H8v3h6V3z M14,7H8v3h6V7z M14,15h-1.2c0.1,0.5,0.2,1,0.2,1.5c0,0.5-0.1,1-0.2,1.5H14V15z M21,3h-6v3h6V3z M21,7h-6v3h6V7z M21,15h-6v3h6V15z M9.6,19.3l-2.1-2.1l-2.1,2.1l-0.7-0.7l2.1-2.1l-2.1-2.1l0.7-0.7l2.1,2.1l2.1-2.1l0.7,0.7l-2.1,2.1l2.1,2.1L9.6,19.3z"/></g></svg>'); .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M21,19h-6h-1h-1.6c-0.9,1.8-2.7,3-4.9,3s-4-1.2-4.9-3H1H0v-1v-3v-1v-3v-1V7V6V3V2h7h1h6h1h6h1v1v3v1v3v1v3v1v3v1H21z M1,18h1.2C2.1,17.5,2,17,2,16.5c0-0.5,0.1-1,0.2-1.5H1V18z M7,3H1v3h6V3z M7,7H1v3h6V7z M7.5,12C5,12,3,14,3,16.5S5,21,7.5,21s4.5-2,4.5-4.5S10,12,7.5,12z M14,3H8v3h6V3z M14,7H8v3h6V7z M14,15h-1.2c0.1,0.5,0.2,1,0.2,1.5c0,0.5-0.1,1-0.2,1.5H14V15z M21,3h-6v3h6V3z M21,7h-6v3h6V7z M21,15h-6v3h6V15z M9.6,19.3l-2.1-2.1l-2.1,2.1l-0.7-0.7l2.1-2.1l-2.1-2.1l0.7-0.7l2.1,2.1l2.1-2.1l0.7,0.7l-2.1,2.1l2.1,2.1L9.6,19.3z"/></g></svg>');
} }
&.icon-create-style {
width: 24px;
height: 24px;
.encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M18.9844 12C18.9844 12.5437 18.5437 12.9844 18 12.9844H12.9844V18C12.9844 18.5437 12.5437 18.9844 12 18.9844C11.4563 18.9844 11.0156 18.5437 11.0156 18V12.9844H6C5.45634 12.9844 5.01562 12.5437 5.01562 12C5.01562 11.4563 5.45634 11.0156 6 11.0156H11.0156V6C11.0156 5.45634 11.4563 5.01562 12 5.01562C12.5437 5.01562 12.9844 5.45634 12.9844 6V11.0156H18C18.5437 11.0156 18.9844 11.4563 18.9844 12Z" fill="@{brandColor}"/></svg>')
}
// Presets of table borders // Presets of table borders
&.icon-table-borders-all { &.icon-table-borders-all {
width: 28px; width: 28px;

46
apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx
View file

@ -205,7 +205,8 @@ const EditParagraph = props => {
<List className={activeStyle} style={{marginBottom: 0}}> <List className={activeStyle} style={{marginBottom: 0}}>
<ListItem link="/edit-paragraph-style/" routeProps={{ <ListItem link="/edit-paragraph-style/" routeProps={{
onStyleClick: props.onStyleClick, onStyleClick: props.onStyleClick,
onSaveStyle: props.onSaveStyle onSaveStyle: props.onSaveStyle,
onStyleMenuDelete: props.onStyleMenuDelete
}}> }}>
<div slot="inner" <div slot="inner"
style={{backgroundImage: 'url(' + curStyle.image + ')', width: thumbSize.width + 'px', height: thumbSize.height + 'px', backgroundSize: thumbSize.width + 'px ' + thumbSize.height + 'px', backgroundRepeat: 'no-repeat'}} style={{backgroundImage: 'url(' + curStyle.image + ')', width: thumbSize.width + 'px', height: thumbSize.height + 'px', backgroundSize: thumbSize.width + 'px ' + thumbSize.height + 'px', backgroundRepeat: 'no-repeat'}}
@ -240,6 +241,7 @@ const EditParagraph = props => {
const EditParagraphStyle = props => { const EditParagraphStyle = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const api = Common.EditorApi.get();
const _t = t('Edit', {returnObjects: true}); const _t = t('Edit', {returnObjects: true});
const storeParagraphSettings = props.storeParagraphSettings; const storeParagraphSettings = props.storeParagraphSettings;
const paragraphStyles = storeParagraphSettings.paragraphStyles; const paragraphStyles = storeParagraphSettings.paragraphStyles;
@ -259,15 +261,18 @@ const EditParagraphStyle = props => {
} }
</Navbar> </Navbar>
<List style={{marginBottom: 0}}> <List style={{marginBottom: 0}}>
<ListItem title={t('Edit.textCreateTextStyle')} href="/create-text-style/" routeProps={{ <ListItem className="create-style-link" title={t('Edit.textCreateTextStyle')} href="/create-text-style/" routeProps={{
onSaveStyle: props.onSaveStyle onSaveStyle: props.onSaveStyle
}}></ListItem> }}>
{Device.android && <Icon slot="media" icon="icon-create-style"></Icon>}
</ListItem>
</List> </List>
<List className={activeStyle}> <List className={activeStyle}>
{paragraphStyles.map((style, index) => ( {paragraphStyles.map((style, index) => (
<ListItem <ListItem
key={index} key={index}
radio radio
radioIcon="start"
checked={curStyleName === style.name} checked={curStyleName === style.name}
onClick={() => { onClick={() => {
if(curStyleName !== style.name) { if(curStyleName !== style.name) {
@ -278,6 +283,16 @@ const EditParagraphStyle = props => {
<div slot="inner" <div slot="inner"
style={{backgroundImage: 'url(' + style.image + ')', width: thumbSize.width + 'px', height: thumbSize.height + 'px', backgroundSize: thumbSize.width + 'px ' + thumbSize.height + 'px', backgroundRepeat: 'no-repeat'}} style={{backgroundImage: 'url(' + style.image + ')', width: thumbSize.width + 'px', height: thumbSize.height + 'px', backgroundSize: thumbSize.width + 'px ' + thumbSize.height + 'px', backgroundRepeat: 'no-repeat'}}
></div> ></div>
{!api.asc_IsStyleDefault(style.name) && (
<div slot="inner-end">
<Link onClick={async () => {
await props.f7router.back();
await props.onStyleMenuDelete(style.name);
}}>
<Icon icon="icon-remove-style" />
</Link>
</div>
)}
</ListItem> </ListItem>
))} ))}
</List> </List>
@ -293,16 +308,14 @@ const CreateTextStyle = props => {
return ( return (
<Page> <Page>
<Navbar backLink={t('Edit.textBack')}> <Navbar title={t('Edit.textCreateTextStyle')} backLink={t('Edit.textBack')}>
<NavTitle>{t('Edit.textCreateTextStyle')}</NavTitle> <Link slot="right" className={`${!titleNewStyle.trim() && 'disabled'}`} onClick={() => {
<NavRight> let title = titleNewStyle.trim();
<Link onClick={() => { if(title) {
let title = titleNewStyle.trim(); props.onSaveStyle(title, nextParagraphStyle);
if(title) { props.f7router.back();
props.onSaveStyle(title, nextParagraphStyle); }
} }}>{t('Edit.textDone')}</Link>
}}>{t('Edit.textDone')}</Link>
</NavRight>
</Navbar> </Navbar>
<List inlineLabels className='inputs-list'> <List inlineLabels className='inputs-list'>
<ListInput <ListInput
@ -340,8 +353,8 @@ const ChangeNextParagraphStyle = props => {
<Page> <Page>
<Navbar title={t('Edit.textNextParagraphStyle')} backLink={_t.textBack}></Navbar> <Navbar title={t('Edit.textNextParagraphStyle')} backLink={_t.textBack}></Navbar>
<List className={activeStyle}> <List className={activeStyle}>
<ListItem style={{paddingLeft: '5px'}} radio checked={!newParagraph} onClick={() => { <ListItem style={{paddingLeft: '5px'}} radio radioIcon="start" checked={!newParagraph} onClick={() => {
if(nextParagraphStyle) { if(newParagraph) {
setParagraph(''); setParagraph('');
props.setParagraph(''); props.setParagraph('');
} }
@ -350,9 +363,10 @@ const ChangeNextParagraphStyle = props => {
<ListItem <ListItem
key={index} key={index}
radio radio
radioIcon="start"
checked={newParagraph === style.name} checked={newParagraph === style.name}
onClick={() => { onClick={() => {
if(nextParagraphStyle !== style.name) { if(newParagraph !== style.name) {
setParagraph(style.name); setParagraph(style.name);
props.setParagraph(style.name); props.setParagraph(style.name);
} }