Refactoring less-styles v2

This commit is contained in:
Andrey Shimagin 2022-03-21 15:07:43 +03:00
parent 6902c6b58b
commit 6753994332
9 changed files with 20 additions and 45 deletions

View file

@ -68,8 +68,13 @@
margin-top: 0; margin-top: 0;
} }
.inner-range-title { .inner-range-title {
color: @text-normal;
padding: 15px 0 0 15px; padding: 15px 0 0 15px;
} }
.range-number {
color: @text-normal;
}
} }
.page-content { .page-content {
&.no-padding-top { &.no-padding-top {

View file

@ -151,7 +151,7 @@
.table-styles .row div:not(:first-child) { .table-styles .row div:not(:first-child) {
margin: 2px auto 0px; margin: 2px auto 0px;
} }
.table-styles li, .table-styles .row div { .table-styles .skeleton-list li, .table-styles .row div {
padding: 0; padding: 0;
} }
.table-styles .row .skeleton-list{ .table-styles .row .skeleton-list{
@ -160,30 +160,6 @@
height: 50px; height: 50px;
} }
// Color Schemes
.color-schemes-menu {
cursor: pointer;
display: block;
// background-color: #fff;
.item-inner {
justify-content: flex-start;
}
.color-schema-block {
display: flex;
}
.color {
min-width: 26px;
min-height: 26px;
margin: 0 2px 0 0;
box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset;
}
.item-title {
margin-left: 20px;
// color: #212121;
}
}
// Picker // Picker
.row-picker { .row-picker {

View file

@ -205,7 +205,7 @@ const PageStyle = props => {
onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}} onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}}
></Range> ></Range>
</div> </div>
<div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}> <div className='range-number' slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
{stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)} {stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
</div> </div>
</ListItem> </ListItem>
@ -229,7 +229,7 @@ const PageStyle = props => {
onRangeChanged={(value) => {props.onOpacity(value)}} onRangeChanged={(value) => {props.onOpacity(value)}}
></Range> ></Range>
</div> </div>
<div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}> <div className='range-number' slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
{stateOpacity + ' %'} {stateOpacity + ' %'}
</div> </div>
</ListItem> </ListItem>

View file

@ -123,7 +123,7 @@
.table-styles .row div:not(:first-child) { .table-styles .row div:not(:first-child) {
margin: 2px auto 0px; margin: 2px auto 0px;
} }
.table-styles li, .table-styles .row div { .table-styles .skeleton-list li, .table-styles .row div {
padding: 0; padding: 0;
} }
.table-styles .row .skeleton-list{ .table-styles .row .skeleton-list{

View file

@ -162,7 +162,7 @@ const PageStyle = props => {
onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}} onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}}
></Range> ></Range>
</div> </div>
<div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}> <div className='range-number' slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
{stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)} {stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
</div> </div>
</ListItem> </ListItem>
@ -186,7 +186,7 @@ const PageStyle = props => {
onRangeChanged={(value) => {props.onOpacity(value)}} onRangeChanged={(value) => {props.onOpacity(value)}}
></Range> ></Range>
</div> </div>
<div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}> <div className='range-number' slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
{stateOpacity + ' %'} {stateOpacity + ' %'}
</div> </div>
</ListItem> </ListItem>

View file

@ -37,8 +37,7 @@ const PageApplicationSettings = props => {
onChange={() => changeMeasureSettings(2)}></ListItem> onChange={() => changeMeasureSettings(2)}></ListItem>
</List> </List>
<List> <List>
<ListItem> <ListItem title={_t.textSpellcheck}>
<span>{_t.textSpellcheck}</span>
<Toggle checked={isSpellChecking} <Toggle checked={isSpellChecking}
onToggleChange={() => { onToggleChange={() => {
store.changeSpellCheck(!isSpellChecking); store.changeSpellCheck(!isSpellChecking);

View file

@ -156,7 +156,7 @@ const PageStyle = props => {
onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}} onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}}
></Range> ></Range>
</div> </div>
<div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}> <div className='range-number' slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
{stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)} {stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
</div> </div>
</ListItem> </ListItem>
@ -180,7 +180,7 @@ const PageStyle = props => {
onRangeChanged={(value) => {props.onOpacity(value)}} onRangeChanged={(value) => {props.onOpacity(value)}}
></Range> ></Range>
</div> </div>
<div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}> <div className='range-number' slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
{stateOpacity + ' %'} {stateOpacity + ' %'}
</div> </div>
</ListItem> </ListItem>

View file

@ -65,8 +65,7 @@ const PageApplicationSettings = props => {
} }
<BlockTitle>{_t.textCommentingDisplay}</BlockTitle> <BlockTitle>{_t.textCommentingDisplay}</BlockTitle>
<List> <List>
<ListItem> <ListItem title={_t.textComments}>
<span>{_t.textComments}</span>
<Toggle checked={isComments} <Toggle checked={isComments}
onToggleChange={() => { onToggleChange={() => {
storeApplicationSettings.changeDisplayComments(!isComments); storeApplicationSettings.changeDisplayComments(!isComments);
@ -74,8 +73,7 @@ const PageApplicationSettings = props => {
}} }}
/> />
</ListItem> </ListItem>
<ListItem> <ListItem title={_t.textResolvedComments}>
<span>{_t.textResolvedComments}</span>
<Toggle checked={isResolvedComments} disabled={!isComments} <Toggle checked={isResolvedComments} disabled={!isComments}
onToggleChange={() => { onToggleChange={() => {
storeApplicationSettings.changeDisplayResolved(!isResolvedComments); storeApplicationSettings.changeDisplayResolved(!isResolvedComments);
@ -85,8 +83,7 @@ const PageApplicationSettings = props => {
</ListItem> </ListItem>
</List> </List>
<List> <List>
<ListItem> <ListItem title={_t.textR1C1Style}>
<span>{_t.textR1C1Style}</span>
<Toggle checked={isRefStyle} <Toggle checked={isRefStyle}
onToggleChange={() => { onToggleChange={() => {
storeApplicationSettings.changeRefStyle(!isRefStyle); storeApplicationSettings.changeRefStyle(!isRefStyle);

View file

@ -238,16 +238,14 @@ const PageSpreadsheetSettings = props => {
onPageMarginsChange: props.onPageMarginsChange onPageMarginsChange: props.onPageMarginsChange
}}></ListItem> }}></ListItem>
</List> </List>
<List simpleList> <List>
<ListItem> <ListItem title={_t.textHideHeadings}>
<span>{_t.textHideHeadings}</span>
<Toggle checked={isHideHeadings} onToggleChange={() => { <Toggle checked={isHideHeadings} onToggleChange={() => {
storeSpreadsheetSettings.changeHideHeadings(!isHideHeadings); storeSpreadsheetSettings.changeHideHeadings(!isHideHeadings);
props.clickCheckboxHideHeadings(!isHideHeadings) props.clickCheckboxHideHeadings(!isHideHeadings)
}} /> }} />
</ListItem> </ListItem>
<ListItem> <ListItem title={_t.textHideGridlines}>
<span>{_t.textHideGridlines}</span>
<Toggle checked={isHideGridlines} onToggleChange={() => { <Toggle checked={isHideGridlines} onToggleChange={() => {
storeSpreadsheetSettings.changeHideGridlines(!isHideGridlines); storeSpreadsheetSettings.changeHideGridlines(!isHideGridlines);
props.clickCheckboxHideGridlines(!isHideGridlines) props.clickCheckboxHideGridlines(!isHideGridlines)