[DE mobile] Added creating and deleting custom styles
This commit is contained in:
SergeyEzhin
parent
30a5baea55
commit
aaf5c48990
|
|
@ -93,6 +93,10 @@
|
|||
}
|
||||
|
||||
.list {
|
||||
max-width: 100%;
|
||||
ul {
|
||||
width: 100%;
|
||||
}
|
||||
li.no-indicator {
|
||||
.item-link {
|
||||
.item-inner{
|
||||
|
|
@ -123,6 +127,9 @@
|
|||
background-color: @autoColor;
|
||||
}
|
||||
}
|
||||
.item-link .item-inner {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Bullets, numbers and multilevels
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ class EditParagraphController extends Component {
|
|||
|
||||
this.onStyleClick = this.onStyleClick.bind(this);
|
||||
this.onSaveStyle = this.onSaveStyle.bind(this);
|
||||
this.onStyleMenuDelete = this.onStyleMenuDelete.bind(this);
|
||||
}
|
||||
|
||||
onStyleClick (name) {
|
||||
|
|
@ -21,17 +22,18 @@ class EditParagraphController extends Component {
|
|||
|
||||
onSaveStyle(title, nextParagraphStyle) {
|
||||
const api = Common.EditorApi.get();
|
||||
const curStyleName = this.props.storeParagraphSettings.styleName;
|
||||
let newStyle = new Asc.asc_CStyle();
|
||||
const style = api.asc_GetStyleFromFormatting();
|
||||
|
||||
newStyle.put_Name(title);
|
||||
// console.log(newStyle.get_Name());
|
||||
newStyle.put_Next(nextParagraphStyle ? nextParagraphStyle : null);
|
||||
newStyle.put_BasedOn(curStyleName);
|
||||
// console.log(newStyle);
|
||||
style.put_Name(title);
|
||||
style.put_Next(nextParagraphStyle ? nextParagraphStyle : null);
|
||||
|
||||
api.asc_AddNewStyle(style);
|
||||
this.props.storeParagraphSettings.changeParaStyleName(title);
|
||||
}
|
||||
|
||||
api.asc_AddNewStyle(newStyle);
|
||||
this.props.storeParagraphSettings.changeParaStyleName(newStyle.get_Name());
|
||||
onStyleMenuDelete(styleName) {
|
||||
const api = Common.EditorApi.get();
|
||||
api.asc_RemoveStyle(styleName);
|
||||
}
|
||||
|
||||
onDistanceBefore (distance, isDecrement) {
|
||||
|
|
@ -174,6 +176,7 @@ class EditParagraphController extends Component {
|
|||
onKeepNext={this.onKeepNext}
|
||||
onBackgroundColor={this.onBackgroundColor}
|
||||
onSaveStyle={this.onSaveStyle}
|
||||
onStyleMenuDelete={this.onStyleMenuDelete}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -314,3 +314,12 @@
|
|||
border-top: 1px solid var(--background-menu-divider);
|
||||
}
|
||||
}
|
||||
|
||||
.create-style-link {
|
||||
.item-link .item-inner:before {
|
||||
display: none;
|
||||
}
|
||||
.item-title {
|
||||
color: @brandColor;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -215,6 +215,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" 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
|
||||
&.icon-table-borders-all {
|
||||
width: 28px;
|
||||
|
|
|
|||
|
|
@ -205,7 +205,8 @@ const EditParagraph = props => {
|
|||
<List className={activeStyle} style={{marginBottom: 0}}>
|
||||
<ListItem link="/edit-paragraph-style/" routeProps={{
|
||||
onStyleClick: props.onStyleClick,
|
||||
onSaveStyle: props.onSaveStyle
|
||||
onSaveStyle: props.onSaveStyle,
|
||||
onStyleMenuDelete: props.onStyleMenuDelete
|
||||
}}>
|
||||
<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'}}
|
||||
|
|
@ -240,6 +241,7 @@ const EditParagraph = props => {
|
|||
|
||||
const EditParagraphStyle = props => {
|
||||
const { t } = useTranslation();
|
||||
const api = Common.EditorApi.get();
|
||||
const _t = t('Edit', {returnObjects: true});
|
||||
const storeParagraphSettings = props.storeParagraphSettings;
|
||||
const paragraphStyles = storeParagraphSettings.paragraphStyles;
|
||||
|
|
@ -259,15 +261,18 @@ const EditParagraphStyle = props => {
|
|||
}
|
||||
</Navbar>
|
||||
<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
|
||||
}}></ListItem>
|
||||
}}>
|
||||
{Device.android && <Icon slot="media" icon="icon-create-style"></Icon>}
|
||||
</ListItem>
|
||||
</List>
|
||||
<List className={activeStyle}>
|
||||
{paragraphStyles.map((style, index) => (
|
||||
<ListItem
|
||||
key={index}
|
||||
radio
|
||||
radioIcon="start"
|
||||
checked={curStyleName === style.name}
|
||||
onClick={() => {
|
||||
if(curStyleName !== style.name) {
|
||||
|
|
@ -278,6 +283,16 @@ const EditParagraphStyle = props => {
|
|||
<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'}}
|
||||
></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>
|
||||
))}
|
||||
</List>
|
||||
|
|
@ -293,16 +308,14 @@ const CreateTextStyle = props => {
|
|||
|
||||
return (
|
||||
<Page>
|
||||
<Navbar backLink={t('Edit.textBack')}>
|
||||
<NavTitle>{t('Edit.textCreateTextStyle')}</NavTitle>
|
||||
<NavRight>
|
||||
<Link onClick={() => {
|
||||
let title = titleNewStyle.trim();
|
||||
if(title) {
|
||||
props.onSaveStyle(title, nextParagraphStyle);
|
||||
}
|
||||
}}>{t('Edit.textDone')}</Link>
|
||||
</NavRight>
|
||||
<Navbar title={t('Edit.textCreateTextStyle')} backLink={t('Edit.textBack')}>
|
||||
<Link slot="right" className={`${!titleNewStyle.trim() && 'disabled'}`} onClick={() => {
|
||||
let title = titleNewStyle.trim();
|
||||
if(title) {
|
||||
props.onSaveStyle(title, nextParagraphStyle);
|
||||
props.f7router.back();
|
||||
}
|
||||
}}>{t('Edit.textDone')}</Link>
|
||||
</Navbar>
|
||||
<List inlineLabels className='inputs-list'>
|
||||
<ListInput
|
||||
|
|
@ -340,8 +353,8 @@ const ChangeNextParagraphStyle = props => {
|
|||
<Page>
|
||||
<Navbar title={t('Edit.textNextParagraphStyle')} backLink={_t.textBack}></Navbar>
|
||||
<List className={activeStyle}>
|
||||
<ListItem style={{paddingLeft: '5px'}} radio checked={!newParagraph} onClick={() => {
|
||||
if(nextParagraphStyle) {
|
||||
<ListItem style={{paddingLeft: '5px'}} radio radioIcon="start" checked={!newParagraph} onClick={() => {
|
||||
if(newParagraph) {
|
||||
setParagraph('');
|
||||
props.setParagraph('');
|
||||
}
|
||||
|
|
@ -350,9 +363,10 @@ const ChangeNextParagraphStyle = props => {
|
|||
<ListItem
|
||||
key={index}
|
||||
radio
|
||||
radioIcon="start"
|
||||
checked={newParagraph === style.name}
|
||||
onClick={() => {
|
||||
if(nextParagraphStyle !== style.name) {
|
||||
if(newParagraph !== style.name) {
|
||||
setParagraph(style.name);
|
||||
props.setParagraph(style.name);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue