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

[mobile] Fixed auto color in palette, fixed styles

Browse source
This commit is contained in:
JuliaSvinareva 2020-12-29 20:18:08 +03:00
parent 1ad2e2a634
commit d15e3ae6a9
7 changed files with 87 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
apps/common/mobile/lib/component/ThemeColorPalette.jsx
View file

@ -62,7 +62,7 @@ const CustomColors = ({ options, customColors, onColorClick, curColor }) => {
return( return(
<a key={`dc-${index}`} <a key={`dc-${index}`}
className={curColor && curColor === color ? 'active' : ''} className={curColor && curColor === color ? 'active' : ''}
style={{background: '#' + color}} style={{background: `#${color}`}}
onClick={() => {onColorClick(color)}} onClick={() => {onColorClick(color)}}
></a> ></a>
) )
@ -86,7 +86,6 @@ const ThemeColorPalette = props => {
cls: props.cls || '' cls: props.cls || ''
}; };
const curColor = props.curColor; const curColor = props.curColor;
console.log(curColor);
const themeColors = []; const themeColors = [];
const effectColors = Common.Utils.ThemeColor.getEffectColors(); const effectColors = Common.Utils.ThemeColor.getEffectColors();
let row = -1; let row = -1;
@ -126,18 +125,28 @@ const ThemeColorPalette = props => {
}; };
const CustomColorPicker = 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; let currentColor = props.currentColor;
if (currentColor === 'auto') { if (props.autoColor) {
currentColor = '000000'; currentColor = rgb2hex(props.autoColor);
} }
const countDynamicColors = props.countdynamiccolors || 10; const countDynamicColors = props.countdynamiccolors || 10;
const [stateColor, setColor] = useState('#' + currentColor); const [stateColor, setColor] = useState(`#${currentColor}`);
useEffect(() => { useEffect(() => {
if (document.getElementsByClassName('color-picker-wheel').length < 1) { if (document.getElementsByClassName('color-picker-wheel').length < 1) {
const colorPicker = f7.colorPicker.create({ const colorPicker = f7.colorPicker.create({
containerEl: document.getElementsByClassName('color-picker-container')[0], containerEl: document.getElementsByClassName('color-picker-container')[0],
value: { value: {
hex: '#' + currentColor hex: `#${currentColor}`
}, },
on: { on: {
change: function (value) { change: function (value) {
@ -161,7 +170,7 @@ const CustomColorPicker = props => {
<div className='right-block'> <div className='right-block'>
<div className='color-hsb-preview'> <div className='color-hsb-preview'>
<div className='new-color-hsb-preview' style={{backgroundColor: stateColor}}></div> <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> </div>
<a href='#' id='add-new-color' className='button button-round' onClick={()=>{addNewColor(stateColor)}}> <a href='#' id='add-new-color' className='button button-round' onClick={()=>{addNewColor(stateColor)}}>
<Icon icon={'icon-plus'} slot="media" /> <Icon icon={'icon-plus'} slot="media" />

24
apps/common/mobile/resources/less/common-ios.less
View file

@ -160,6 +160,19 @@
} }
.list { .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 { li.no-indicator {
.item-link { .item-link {
.item-inner:before { .item-inner:before {
@ -299,4 +312,15 @@
.dialog { .dialog {
background-color: rgba(var(--f7-dialog-bg-color-rgb), 1); background-color: rgba(var(--f7-dialog-bg-color-rgb), 1);
} }
#color-picker {
.right-block {
.button-round {
.icon {
height: 30px;
width: 30px;
}
}
}
}
} }

20
apps/common/mobile/resources/less/common-material.less
View file

@ -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 and numbers
.bullets, .bullets,
@ -230,4 +242,12 @@
} }
} }
} }
// Color palette
#color-picker {
.right-block {
.button-round {
background-color: @themeColor;
}
}
}
} }

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

@ -4,6 +4,7 @@
@gray: #c4c4c4; @gray: #c4c4c4;
@green: #4cd964; @green: #4cd964;
@background-normal: @white; @background-normal: @white;
@autoColor: @black;
.popup, .popover, .sheet-modal { .popup, .popover, .sheet-modal {
.list:first-child { .list:first-child {
@ -45,11 +46,11 @@
box-sizing: border-box; box-sizing: border-box;
} }
.font-color-auto { .item-color-auto {
.color-auto { .color-auto {
width:22px; width:22px;
height: 22px; height: 22px;
background-color: @black; background-color: @autoColor;
} }
&.active { &.active {
.color-auto { .color-auto {
@ -141,10 +142,6 @@
box-shadow: 0 4px 4px rgba(0,0,0,.25); box-shadow: 0 4px 4px rgba(0,0,0,.25);
border-color: transparent; border-color: transparent;
margin-top: 20px; margin-top: 20px;
.icon {
height: 30px;
width: 30px;
}
} }
} }
} }

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

@ -160,6 +160,11 @@
height: 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><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>'); .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 // Align
&.icon-text-align-left { &.icon-text-align-left {
width: 22px; width: 22px;

5
apps/documenteditor/mobile/src/css/icons-material.less
View file

@ -60,6 +60,11 @@
} }
} }
i.icon { 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 { &.icon-expand-down {
width: 17px; width: 17px;
height: 17px; height: 17px;

19
apps/documenteditor/mobile/src/view/edit/EditText.jsx
View file

@ -218,6 +218,7 @@ const PageCustomFontColor = props => {
if (typeof textColor === 'object') { if (typeof textColor === 'object') {
textColor = textColor.color; textColor = textColor.color;
} }
const autoColor = textColor === 'auto' ? window.getComputedStyle(document.getElementById('font-color-auto')).backgroundColor : null;
const onAddNewColor = (colors, color) => { const onAddNewColor = (colors, color) => {
props.storeTextSettings.changeCustomTextColors(colors); props.storeTextSettings.changeCustomTextColors(colors);
props.onTextColor(color); props.onTextColor(color);
@ -226,7 +227,7 @@ const PageCustomFontColor = props => {
return( return(
<Page> <Page>
<Navbar title={_t.textCustomColor} backLink={_t.textBack} /> <Navbar title={_t.textCustomColor} backLink={_t.textBack} />
<CustomColorPicker currentColor={textColor} onAddNewColor={onAddNewColor}/> <CustomColorPicker autoColor={autoColor} currentColor={textColor} onAddNewColor={onAddNewColor}/>
</Page> </Page>
) )
}; };
@ -253,11 +254,11 @@ const PageFontColor = props => {
<Page> <Page>
<Navbar title={_t.textFontColors} backLink={_t.textBack} /> <Navbar title={_t.textFontColors} backLink={_t.textBack} />
<List> <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(); props.onTextColorAuto();
}}> }}>
<div slot="media"> <div slot="media">
<div className={'color-auto'}></div> <div id='font-color-auto' className={'color-auto'}></div>
</div> </div>
</ListItem> </ListItem>
</List> </List>
@ -277,12 +278,18 @@ const EditText = props => {
const storeTextSettings = props.storeTextSettings; const storeTextSettings = props.storeTextSettings;
const fontName = storeTextSettings.fontName || t('Edit.textFonts'); const fontName = storeTextSettings.fontName || t('Edit.textFonts');
const fontSize = storeTextSettings.fontSize; const fontSize = storeTextSettings.fontSize;
const fontColor = storeTextSettings.textColor;
const displaySize = typeof fontSize === 'undefined' ? t('Edit.textAuto') : fontSize + ' ' + t('Edit.textPt'); const displaySize = typeof fontSize === 'undefined' ? t('Edit.textAuto') : fontSize + ' ' + t('Edit.textPt');
const isBold = storeTextSettings.isBold; const isBold = storeTextSettings.isBold;
const isItalic = storeTextSettings.isItalic; const isItalic = storeTextSettings.isItalic;
const isUnderline = storeTextSettings.isUnderline; const isUnderline = storeTextSettings.isUnderline;
const isStrikethrough = storeTextSettings.isStrikethrough; const isStrikethrough = storeTextSettings.isStrikethrough;
const paragraphAlign = storeTextSettings.paragraphAlign; const paragraphAlign = storeTextSettings.paragraphAlign;
const fontColorPreview = fontColor !== 'auto' ?
<span className="color-preview" style={{ background: `#${fontColor}`}}></span> :
<span className="color-preview auto"></span>;
return ( return (
<Fragment> <Fragment>
<List> <List>
@ -302,8 +309,10 @@ const EditText = props => {
onTextColorAuto: props.onTextColorAuto, onTextColorAuto: props.onTextColorAuto,
onTextColor: props.onTextColor onTextColor: props.onTextColor
}}> }}>
{!isAndroid && <Icon slot="media" icon="icon-text-color"></Icon>} {!isAndroid ?
<span className="color-preview"></span> <Icon slot="media" icon="icon-text-color">{fontColorPreview}</Icon> :
fontColorPreview
}
</ListItem> </ListItem>
<ListItem title={t("Edit.textHighlightColor")} link="#"> <ListItem title={t("Edit.textHighlightColor")} link="#">
{!isAndroid && <Icon slot="media" icon="icon-text-selection"></Icon>} {!isAndroid && <Icon slot="media" icon="icon-text-selection"></Icon>}