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

[SSE mobile] Added cell styles view

Browse source
This commit is contained in:
SergeyEzhin 2022-05-19 20:24:54 +04:00
parent 18211b280a
commit 757470702d
5 changed files with 100 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -608,13 +608,15 @@
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
padding-top: 5px; padding-top: 5px;
background-color: @background-tertiary;
li.item-theme { li.item-theme {
border: 0.5px solid #c8c7cc; // border: 0.5px solid #c8c7cc;
border: 2px solid @fill-white;
padding: 1px; padding: 1px;
background-repeat: no-repeat; background-repeat: no-repeat;
width: 108px; width: 108px;
height: 52px; height: 53px;
margin-bottom: 10px; margin-bottom: 8px;
background-position: center; background-position: center;
.item-content { .item-content {
width: 100%; width: 100%;
@ -647,6 +649,9 @@
.encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="#40865c"><g><circle fill="#fff" cx="11" cy="11" r="11"/><path d="M11,21A10,10,0,1,1,21,11,10,10,0,0,1,11,21h0ZM17.4,7.32L17.06,7a0.48,0.48,0,0,0-.67,0l-7,6.84L6.95,11.24a0.51,0.51,0,0,0-.59.08L6,11.66a0.58,0.58,0,0,0,0,.65l3.19,3.35a0.38,0.38,0,0,0,.39,0L17.4,8a0.48,0.48,0,0,0,0-.67h0Z"/></g></svg>'); .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="#40865c"><g><circle fill="#fff" cx="11" cy="11" r="11"/><path d="M11,21A10,10,0,1,1,21,11,10,10,0,0,1,11,21h0ZM17.4,7.32L17.06,7a0.48,0.48,0,0,0-.67,0l-7,6.84L6.95,11.24a0.51,0.51,0,0,0-.59.08L6,11.66a0.58,0.58,0,0,0,0,.65l3.19,3.35a0.38,0.38,0,0,0,.39,0L17.4,8a0.48,0.48,0,0,0,0-.67h0Z"/></g></svg>');
} }
} }
&:after {
display: none;
}
} }
} }
@ -1080,6 +1085,29 @@ input[type="number"]::-webkit-inner-spin-button {
} }
} }
.swiper-container {
height: 100%;
}
.swiper-pagination-bullet {
background: @background-menu-divider;
opacity: 1;
&-active {
background: @text-secondary;
}
}
.preview-cell-style {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 104px;
height: 44px;
background-color: @fill-white;
border-radius: 4px;
border: 0.5px solid @background-menu-divider;
}

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

@ -399,7 +399,7 @@
"textBottomBorder": "Bottom Border", "textBottomBorder": "Bottom Border",
"textBringToForeground": "Bring to Foreground", "textBringToForeground": "Bring to Foreground",
"textCell": "Cell", "textCell": "Cell",
"textCellStyles": "Cell Styles", "textCellStyle": "Cell Style",
"textCenter": "Center", "textCenter": "Center",
"textChart": "Chart", "textChart": "Chart",
"textChartTitle": "Chart Title", "textChartTitle": "Chart Title",

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

@ -182,6 +182,11 @@
height: 28px; height: 28px;
.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 28 28" fill="@{brandColor}"><g><path opacity="0.3" d="M1,1V13H13V1H1ZM12,12H2V2H12V12Z"/><path opacity="0.3" d="M15,15V27H27V15H15ZM26,26H16V16H26V26Z"/><rect x="8" y="8" width="13" height="13"/></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 28 28" fill="@{brandColor}"><g><path opacity="0.3" d="M1,1V13H13V1H1ZM12,12H2V2H12V12Z"/><path opacity="0.3" d="M15,15V27H27V15H15ZM26,26H16V16H26V26Z"/><rect x="8" y="8" width="13" height="13"/></g></svg>');
} }
&.icon-cell-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"><g clip-path="url(#clip0_364_6999)"><rect x="3" width="1" height="24" fill="black" fill-opacity="0.6"/><rect x="20" width="1" height="24" fill="black" fill-opacity="0.6"/><rect y="6" width="24" height="1" fill="black" fill-opacity="0.6"/><rect y="17" width="24" height="1" fill="black" fill-opacity="0.6"/><g clip-path="url(#clip1_364_6999)"><path d="M22.3684 24.6037C22.6359 24.8593 22.987 25.0001 23.3569 25.0001C23.739 25.0001 24.0983 24.8514 24.3692 24.581L24.2984 24.5103C24.5458 24.2627 24.684 23.9341 24.688 23.5843L24.688 23.5842L24.6881 23.5689C24.6881 23.2247 24.5576 22.899 24.3192 22.6495L16.8124 14.7988C16.5614 15.6054 16.0175 16.2914 15.2479 16.7493L15.1974 16.6644L15.2479 16.7493C15.0452 16.8698 14.833 16.9705 14.6146 17.0513L24.2985 24.5102C24.0464 24.7619 23.7124 24.9001 23.3569 24.9001C23.0127 24.9001 22.6864 24.7692 22.4375 24.5314M22.3684 24.6037L22.4375 24.5314L22.4375 24.5314M22.3684 24.6037L14.509 17.0887L22.4375 24.5314M22.3684 24.6037L22.4375 24.5314" fill="black" fill-opacity="0.6" stroke="white" stroke-width="0.2"/><path d="M15.8715 13.8633C15.8732 13.8231 15.874 13.783 15.874 13.7429C15.874 13.0698 15.6399 12.4021 15.2481 11.8575C14.7758 11.201 14.0974 10.9392 13.4794 10.4572C12.7045 9.85273 12.3255 8.92288 12.0671 8C10.6467 8.53746 10.0651 10.5341 10.0338 11.8433C10.0326 11.8903 10.0321 11.9376 10.0321 11.9852C10.0321 13.4676 10.583 15.2136 12.0416 15.9282C13.6428 16.7128 15.7927 15.7458 15.8715 13.8633Z" fill="black" fill-opacity="0.6"/></g></g><defs><clipPath id="clip0_364_6999"><rect width="24" height="24" fill="white"/></clipPath><clipPath id="clip1_364_6999"><rect width="17" height="17" fill="white" transform="translate(25.9102 8) rotate(90)"/></clipPath></defs></svg>');
}
// Presets of table borders // Presets of table borders

6
apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx
View file

@ -14,7 +14,7 @@ import { EditLinkController } from "../../controller/edit/EditLink";
import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape'; import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape';
import { PageImageReplace, PageImageReorder, PageLinkSettings } from './EditImage'; import { PageImageReplace, PageImageReorder, PageLinkSettings } from './EditImage';
import { TextColorCell, FillColorCell, CustomTextColorCell, CustomFillColorCell, FontsCell, TextFormatCell, TextOrientationCell, BorderStyleCell, BorderColorCell, CustomBorderColorCell, BorderSizeCell, PageFormatCell, PageAccountingFormatCell, PageCurrencyFormatCell, PageDateFormatCell, PageTimeFormatCell } from './EditCell'; import { TextColorCell, FillColorCell, CustomTextColorCell, CustomFillColorCell, FontsCell, TextFormatCell, TextOrientationCell, BorderStyleCell, BorderColorCell, CustomBorderColorCell, BorderSizeCell, PageFormatCell, PageAccountingFormatCell, PageCurrencyFormatCell, PageDateFormatCell, PageTimeFormatCell, CellStyle } from './EditCell';
import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor } from './EditText'; import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor } from './EditText';
import { PageChartDesign, PageChartDesignType, PageChartDesignStyle, PageChartDesignFill, PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartLayout, PageLegend, PageChartTitle, PageHorizontalAxisTitle, PageVerticalAxisTitle, PageHorizontalGridlines, PageVerticalGridlines, PageDataLabels, PageChartVerticalAxis, PageVertAxisCrosses, PageDisplayUnits, PageVertMajorType, PageVertMinorType, PageVertLabelPosition, PageChartHorizontalAxis, PageHorAxisCrosses, PageHorAxisPosition, PageHorMajorType, PageHorMinorType, PageHorLabelPosition } from './EditChart'; import { PageChartDesign, PageChartDesignType, PageChartDesignStyle, PageChartDesignFill, PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartLayout, PageLegend, PageChartTitle, PageHorizontalAxisTitle, PageVerticalAxisTitle, PageHorizontalGridlines, PageVerticalGridlines, PageDataLabels, PageChartVerticalAxis, PageVertAxisCrosses, PageDisplayUnits, PageVertMajorType, PageVertMinorType, PageVertLabelPosition, PageChartHorizontalAxis, PageHorAxisCrosses, PageHorAxisPosition, PageHorMajorType, PageHorMinorType, PageHorLabelPosition } from './EditChart';
import { PageTypeLink, PageSheet } from './EditLink'; import { PageTypeLink, PageSheet } from './EditLink';
@ -133,6 +133,10 @@ const routes = [
path: '/edit-time-format-cell/', path: '/edit-time-format-cell/',
component: PageTimeFormatCell component: PageTimeFormatCell
}, },
{
path: '/edit-cell-style/',
component: CellStyle
},
// Text // Text

82
apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
View file

@ -14,9 +14,8 @@ const EditCell = props => {
const storeWorksheets = props.storeWorksheets; const storeWorksheets = props.storeWorksheets;
const wsProps = storeWorksheets.wsProps; const wsProps = storeWorksheets.wsProps;
const cellStyles = storeCellSettings.cellStyles; const cellStyles = storeCellSettings.cellStyles;
const countSlides = Math.floor(cellStyles.length / 9); const curStyleName = storeCellSettings.styleName;
const arraySlides = Array(countSlides).fill(countSlides); const curStyle = cellStyles.find(style => style.name === curStyleName);
const styleName = storeCellSettings.styleName;
const fontInfo = storeCellSettings.fontInfo; const fontInfo = storeCellSettings.fontInfo;
const fontName = fontInfo.name || _t.textFonts; const fontName = fontInfo.name || _t.textFonts;
@ -109,32 +108,65 @@ const EditCell = props => {
} }
</ListItem> </ListItem>
</List> </List>
<BlockTitle>{_t.textCellStyles}</BlockTitle> <List>
{cellStyles && cellStyles.length ? ( <ListItem title={t('View.Edit.textCellStyle')} link="/edit-cell-style/" routeProps={{
<div className="swiper-container swiper-init demo-swiper"> onStyleClick: props.onStyleClick
<div className="swiper-wrapper"> }}>
{arraySlides.map((_, indexSlide) => { {!isAndroid && <Icon slot="media" icon="icon-cell-style" />}
let stylesSlide = cellStyles.slice(indexSlide * 9, (indexSlide * 9) + 9); <div slot="after">
<div className='preview-cell-style' style={{backgroundImage: `url(${curStyle.image})`}}></div>
return (
<div className="swiper-slide" key={indexSlide}>
<List className="cell-styles-list">
{stylesSlide.map((elem, index) => (
<ListItem key={index} className={elem.name === styleName ? "item-theme active" : "item-theme"} onClick={() => props.onStyleClick(elem.name)}>
<div className='thumb' style={{backgroundImage: `url(${elem.image})`}}></div>
</ListItem>
))}
</List>
</div>
)})}
</div> </div>
</div> </ListItem>
) : null} </List>
</>} </>}
</Fragment> </Fragment>
) )
}; };
const PageCellStyle = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const storeCellSettings = props.storeCellSettings;
const styleName = storeCellSettings.styleName;
const cellStyles = storeCellSettings.cellStyles;
const countStylesSlide = Device.phone ? 6 : 15;
const countSlides = Math.floor(cellStyles.length / countStylesSlide);
const arraySlides = Array(countSlides).fill(countSlides);
return (
<Page>
<Navbar title={t('View.Edit.textCellStyle')} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
{cellStyles && cellStyles.length ? (
<div className="swiper-container swiper-init" data-pagination='{"el": ".swiper-pagination"}'>
<div className="swiper-pagination"></div>
<div className="swiper-wrapper">
{arraySlides.map((_, indexSlide) => {
let stylesSlide = cellStyles.slice(indexSlide * countStylesSlide, (indexSlide * countStylesSlide) + countStylesSlide);
return (
<div className="swiper-slide" key={indexSlide}>
<List className="cell-styles-list">
{stylesSlide.map((elem, index) => (
<ListItem key={index} className={elem.name === styleName ? "item-theme active" : "item-theme"} onClick={() => props.onStyleClick(elem.name)}>
<div className='thumb' style={{backgroundImage: `url(${elem.image})`}}></div>
</ListItem>
))}
</List>
</div>
)})}
</div>
</div>
) : null}
</Page>
)
}
const PageFontsCell = props => { const PageFontsCell = props => {
const isAndroid = Device.android; const isAndroid = Device.android;
const { t } = useTranslation(); const { t } = useTranslation();
@ -1016,6 +1048,7 @@ const BorderStyleCell = inject("storeCellSettings", "storeFocusObjects")(observe
const BorderColorCell = inject("storeCellSettings", "storePalette")(observer(PageBorderColorCell)); const BorderColorCell = inject("storeCellSettings", "storePalette")(observer(PageBorderColorCell));
const CustomBorderColorCell = inject("storeCellSettings", "storePalette")(observer(PageCustomBorderColorCell)); const CustomBorderColorCell = inject("storeCellSettings", "storePalette")(observer(PageCustomBorderColorCell));
const BorderSizeCell = inject("storeCellSettings")(observer(PageBorderSizeCell)); const BorderSizeCell = inject("storeCellSettings")(observer(PageBorderSizeCell));
const CellStyle = inject("storeCellSettings")(observer(PageCellStyle));
export { export {
PageEditCell as EditCell, PageEditCell as EditCell,
@ -1034,5 +1067,6 @@ export {
PageAccountingFormatCell, PageAccountingFormatCell,
PageCurrencyFormatCell, PageCurrencyFormatCell,
PageDateFormatCell, PageDateFormatCell,
PageTimeFormatCell PageTimeFormatCell,
CellStyle
}; };