[SSE mobile] Added cell styles view
This commit is contained in:
SergeyEzhin
parent
18211b280a
commit
757470702d
|
|
@ -608,13 +608,15 @@
|
|||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
padding-top: 5px;
|
||||
background-color: @background-tertiary;
|
||||
li.item-theme {
|
||||
border: 0.5px solid #c8c7cc;
|
||||
// border: 0.5px solid #c8c7cc;
|
||||
border: 2px solid @fill-white;
|
||||
padding: 1px;
|
||||
background-repeat: no-repeat;
|
||||
width: 108px;
|
||||
height: 52px;
|
||||
margin-bottom: 10px;
|
||||
height: 53px;
|
||||
margin-bottom: 8px;
|
||||
background-position: center;
|
||||
.item-content {
|
||||
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>');
|
||||
}
|
||||
}
|
||||
&: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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -399,7 +399,7 @@
|
|||
"textBottomBorder": "Bottom Border",
|
||||
"textBringToForeground": "Bring to Foreground",
|
||||
"textCell": "Cell",
|
||||
"textCellStyles": "Cell Styles",
|
||||
"textCellStyle": "Cell Style",
|
||||
"textCenter": "Center",
|
||||
"textChart": "Chart",
|
||||
"textChartTitle": "Chart Title",
|
||||
|
|
|
|||
|
|
@ -182,6 +182,11 @@
|
|||
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>');
|
||||
}
|
||||
&.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
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import { EditLinkController } from "../../controller/edit/EditLink";
|
|||
|
||||
import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape';
|
||||
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 { 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';
|
||||
|
|
@ -133,6 +133,10 @@ const routes = [
|
|||
path: '/edit-time-format-cell/',
|
||||
component: PageTimeFormatCell
|
||||
},
|
||||
{
|
||||
path: '/edit-cell-style/',
|
||||
component: CellStyle
|
||||
},
|
||||
|
||||
// Text
|
||||
|
||||
|
|
|
|||
|
|
@ -14,9 +14,8 @@ const EditCell = props => {
|
|||
const storeWorksheets = props.storeWorksheets;
|
||||
const wsProps = storeWorksheets.wsProps;
|
||||
const cellStyles = storeCellSettings.cellStyles;
|
||||
const countSlides = Math.floor(cellStyles.length / 9);
|
||||
const arraySlides = Array(countSlides).fill(countSlides);
|
||||
const styleName = storeCellSettings.styleName;
|
||||
const curStyleName = storeCellSettings.styleName;
|
||||
const curStyle = cellStyles.find(style => style.name === curStyleName);
|
||||
|
||||
const fontInfo = storeCellSettings.fontInfo;
|
||||
const fontName = fontInfo.name || _t.textFonts;
|
||||
|
|
@ -109,32 +108,65 @@ const EditCell = props => {
|
|||
}
|
||||
</ListItem>
|
||||
</List>
|
||||
<BlockTitle>{_t.textCellStyles}</BlockTitle>
|
||||
{cellStyles && cellStyles.length ? (
|
||||
<div className="swiper-container swiper-init demo-swiper">
|
||||
<div className="swiper-wrapper">
|
||||
{arraySlides.map((_, indexSlide) => {
|
||||
let stylesSlide = cellStyles.slice(indexSlide * 9, (indexSlide * 9) + 9);
|
||||
|
||||
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>
|
||||
)})}
|
||||
<List>
|
||||
<ListItem title={t('View.Edit.textCellStyle')} link="/edit-cell-style/" routeProps={{
|
||||
onStyleClick: props.onStyleClick
|
||||
}}>
|
||||
{!isAndroid && <Icon slot="media" icon="icon-cell-style" />}
|
||||
<div slot="after">
|
||||
<div className='preview-cell-style' style={{backgroundImage: `url(${curStyle.image})`}}></div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</ListItem>
|
||||
</List>
|
||||
</>}
|
||||
</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 isAndroid = Device.android;
|
||||
const { t } = useTranslation();
|
||||
|
|
@ -1016,6 +1048,7 @@ const BorderStyleCell = inject("storeCellSettings", "storeFocusObjects")(observe
|
|||
const BorderColorCell = inject("storeCellSettings", "storePalette")(observer(PageBorderColorCell));
|
||||
const CustomBorderColorCell = inject("storeCellSettings", "storePalette")(observer(PageCustomBorderColorCell));
|
||||
const BorderSizeCell = inject("storeCellSettings")(observer(PageBorderSizeCell));
|
||||
const CellStyle = inject("storeCellSettings")(observer(PageCellStyle));
|
||||
|
||||
export {
|
||||
PageEditCell as EditCell,
|
||||
|
|
@ -1034,5 +1067,6 @@ export {
|
|||
PageAccountingFormatCell,
|
||||
PageCurrencyFormatCell,
|
||||
PageDateFormatCell,
|
||||
PageTimeFormatCell
|
||||
PageTimeFormatCell,
|
||||
CellStyle
|
||||
};
|
||||
Loading…
Reference in a new issue