[mobile] Fixed auto color in palette, fixed styles
This commit is contained in:
JuliaSvinareva
parent
1ad2e2a634
commit
d15e3ae6a9
|
|
@ -62,7 +62,7 @@ const CustomColors = ({ options, customColors, onColorClick, curColor }) => {
|
|||
return(
|
||||
<a key={`dc-${index}`}
|
||||
className={curColor && curColor === color ? 'active' : ''}
|
||||
style={{background: '#' + color}}
|
||||
style={{background: `#${color}`}}
|
||||
onClick={() => {onColorClick(color)}}
|
||||
></a>
|
||||
)
|
||||
|
|
@ -86,7 +86,6 @@ const ThemeColorPalette = props => {
|
|||
cls: props.cls || ''
|
||||
};
|
||||
const curColor = props.curColor;
|
||||
console.log(curColor);
|
||||
const themeColors = [];
|
||||
const effectColors = Common.Utils.ThemeColor.getEffectColors();
|
||||
let row = -1;
|
||||
|
|
@ -126,18 +125,28 @@ const ThemeColorPalette = props => {
|
|||
};
|
||||
|
||||
const CustomColorPicker = props => {
|
||||
//Function to convert rgb color to hex format
|
||||
const hexDigits = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
|
||||
const hex = x => {
|
||||
return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
|
||||
};
|
||||
const rgb2hex = rgb => {
|
||||
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
|
||||
return hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
|
||||
};
|
||||
|
||||
let currentColor = props.currentColor;
|
||||
if (currentColor === 'auto') {
|
||||
currentColor = '000000';
|
||||
if (props.autoColor) {
|
||||
currentColor = rgb2hex(props.autoColor);
|
||||
}
|
||||
const countDynamicColors = props.countdynamiccolors || 10;
|
||||
const [stateColor, setColor] = useState('#' + currentColor);
|
||||
const [stateColor, setColor] = useState(`#${currentColor}`);
|
||||
useEffect(() => {
|
||||
if (document.getElementsByClassName('color-picker-wheel').length < 1) {
|
||||
const colorPicker = f7.colorPicker.create({
|
||||
containerEl: document.getElementsByClassName('color-picker-container')[0],
|
||||
value: {
|
||||
hex: '#' + currentColor
|
||||
hex: `#${currentColor}`
|
||||
},
|
||||
on: {
|
||||
change: function (value) {
|
||||
|
|
@ -161,7 +170,7 @@ const CustomColorPicker = props => {
|
|||
<div className='right-block'>
|
||||
<div className='color-hsb-preview'>
|
||||
<div className='new-color-hsb-preview' style={{backgroundColor: stateColor}}></div>
|
||||
<div className='current-color-hsb-preview' style={{backgroundColor: '#' + currentColor}}></div>
|
||||
<div className='current-color-hsb-preview' style={{backgroundColor: `#${currentColor}`}}></div>
|
||||
</div>
|
||||
<a href='#' id='add-new-color' className='button button-round' onClick={()=>{addNewColor(stateColor)}}>
|
||||
<Icon icon={'icon-plus'} slot="media" />
|
||||
|
|
|
|||
|
|
@ -160,6 +160,19 @@
|
|||
}
|
||||
|
||||
.list {
|
||||
.item-content {
|
||||
.color-preview {
|
||||
width: 22px;
|
||||
height: 8px;
|
||||
display: inline-block;
|
||||
margin-top: 21px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) inset;
|
||||
&.auto {
|
||||
background-color: @autoColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
li.no-indicator {
|
||||
.item-link {
|
||||
.item-inner:before {
|
||||
|
|
@ -299,4 +312,15 @@
|
|||
.dialog {
|
||||
background-color: rgba(var(--f7-dialog-bg-color-rgb), 1);
|
||||
}
|
||||
|
||||
#color-picker {
|
||||
.right-block {
|
||||
.button-round {
|
||||
.icon {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -178,6 +178,18 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.item-content {
|
||||
.color-preview {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 16px;
|
||||
margin-top: -3px;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) inset;
|
||||
&.auto {
|
||||
background-color: @autoColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Bullets and numbers
|
||||
.bullets,
|
||||
|
|
@ -230,4 +242,12 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
// Color palette
|
||||
#color-picker {
|
||||
.right-block {
|
||||
.button-round {
|
||||
background-color: @themeColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
@gray: #c4c4c4;
|
||||
@green: #4cd964;
|
||||
@background-normal: @white;
|
||||
@autoColor: @black;
|
||||
|
||||
.popup, .popover, .sheet-modal {
|
||||
.list:first-child {
|
||||
|
|
@ -45,11 +46,11 @@
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.font-color-auto {
|
||||
.item-color-auto {
|
||||
.color-auto {
|
||||
width:22px;
|
||||
height: 22px;
|
||||
background-color: @black;
|
||||
background-color: @autoColor;
|
||||
}
|
||||
&.active {
|
||||
.color-auto {
|
||||
|
|
@ -141,10 +142,6 @@
|
|||
box-shadow: 0 4px 4px rgba(0,0,0,.25);
|
||||
border-color: transparent;
|
||||
margin-top: 20px;
|
||||
.icon {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -160,6 +160,11 @@
|
|||
height: 22px;
|
||||
.encoded-svg-background('<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="@{themeColor}"><g><polygon id="XMLID_7_" points="22,4 22,3 12,3 11,3 1,3 1,4 11,4 11,4.3 8,7.4 8.7,8.1 11,5.7 11,17.3 8.7,14.9 8,15.6 11,18.7 11,19 1,19 1,20 11,20 12,20 22,20 22,19 12,19 12,18.6 15,15.6 14.3,14.9 12,17.2 12,5.8 14.3,8.1 15,7.4 12,4.4 12,4 "/></g></svg>');
|
||||
}
|
||||
&.icon-text-color {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
.encoded-svg-background('<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="@{themeColor}"><g><path d="M8.9,12l2.3-6.3l2.2,6.3H8.9z M4.7,17.8h2l1.6-4.3h5.6l1.5,4.3h2.1L12.3,3.5h-2.2L4.7,17.8z"/></g></svg>');
|
||||
}
|
||||
// Align
|
||||
&.icon-text-align-left {
|
||||
width: 22px;
|
||||
|
|
|
|||
|
|
@ -60,6 +60,11 @@
|
|||
}
|
||||
}
|
||||
i.icon {
|
||||
&.icon-plus {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
.encoded-svg-background('<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="@{navBarIconColor}"><g><path d="M21,12h-9v9h-2v-9H1v-2h9V1h2v9h9V12z"/></g></svg>');
|
||||
}
|
||||
&.icon-expand-down {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
|
|
|
|||
|
|
@ -218,6 +218,7 @@ const PageCustomFontColor = props => {
|
|||
if (typeof textColor === 'object') {
|
||||
textColor = textColor.color;
|
||||
}
|
||||
const autoColor = textColor === 'auto' ? window.getComputedStyle(document.getElementById('font-color-auto')).backgroundColor : null;
|
||||
const onAddNewColor = (colors, color) => {
|
||||
props.storeTextSettings.changeCustomTextColors(colors);
|
||||
props.onTextColor(color);
|
||||
|
|
@ -226,7 +227,7 @@ const PageCustomFontColor = props => {
|
|||
return(
|
||||
<Page>
|
||||
<Navbar title={_t.textCustomColor} backLink={_t.textBack} />
|
||||
<CustomColorPicker currentColor={textColor} onAddNewColor={onAddNewColor}/>
|
||||
<CustomColorPicker autoColor={autoColor} currentColor={textColor} onAddNewColor={onAddNewColor}/>
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
|
@ -253,11 +254,11 @@ const PageFontColor = props => {
|
|||
<Page>
|
||||
<Navbar title={_t.textFontColors} backLink={_t.textBack} />
|
||||
<List>
|
||||
<ListItem className={'font-color-auto' + (textColor === 'auto' ? ' active' : '')} title={_t.textAutomatic} onClick={() => {
|
||||
<ListItem className={'item-color-auto' + (textColor === 'auto' ? ' active' : '')} title={_t.textAutomatic} onClick={() => {
|
||||
props.onTextColorAuto();
|
||||
}}>
|
||||
<div slot="media">
|
||||
<div className={'color-auto'}></div>
|
||||
<div id='font-color-auto' className={'color-auto'}></div>
|
||||
</div>
|
||||
</ListItem>
|
||||
</List>
|
||||
|
|
@ -277,12 +278,18 @@ const EditText = props => {
|
|||
const storeTextSettings = props.storeTextSettings;
|
||||
const fontName = storeTextSettings.fontName || t('Edit.textFonts');
|
||||
const fontSize = storeTextSettings.fontSize;
|
||||
const fontColor = storeTextSettings.textColor;
|
||||
const displaySize = typeof fontSize === 'undefined' ? t('Edit.textAuto') : fontSize + ' ' + t('Edit.textPt');
|
||||
const isBold = storeTextSettings.isBold;
|
||||
const isItalic = storeTextSettings.isItalic;
|
||||
const isUnderline = storeTextSettings.isUnderline;
|
||||
const isStrikethrough = storeTextSettings.isStrikethrough;
|
||||
const paragraphAlign = storeTextSettings.paragraphAlign;
|
||||
|
||||
const fontColorPreview = fontColor !== 'auto' ?
|
||||
<span className="color-preview" style={{ background: `#${fontColor}`}}></span> :
|
||||
<span className="color-preview auto"></span>;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<List>
|
||||
|
|
@ -302,8 +309,10 @@ const EditText = props => {
|
|||
onTextColorAuto: props.onTextColorAuto,
|
||||
onTextColor: props.onTextColor
|
||||
}}>
|
||||
{!isAndroid && <Icon slot="media" icon="icon-text-color"></Icon>}
|
||||
<span className="color-preview"></span>
|
||||
{!isAndroid ?
|
||||
<Icon slot="media" icon="icon-text-color">{fontColorPreview}</Icon> :
|
||||
fontColorPreview
|
||||
}
|
||||
</ListItem>
|
||||
<ListItem title={t("Edit.textHighlightColor")} link="#">
|
||||
{!isAndroid && <Icon slot="media" icon="icon-text-selection"></Icon>}
|
||||
|
|
|
|||
Loading…
Reference in a new issue