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

Make highlight color palette v.2

Browse source
This commit is contained in:
SergeyEzhin 2021-09-14 00:07:36 +03:00
parent 50ce0cd359
commit d92e4f23df
4 changed files with 35 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
apps/common/mobile/lib/component/HighlightColorPalette.jsx
View file

@ -2,27 +2,29 @@ import React from 'react';
import { f7, ListItem, List, Icon, Page } from 'framework7-react';
import { useTranslation } from 'react-i18next';
const HighlightColorPalette = ({onColorClick, curColor}) => {
const HighlightColorPalette = ({changeColor, curColor}) => {
const { t } = useTranslation();
const highlightColors = [
'FFFF00', '00FF00', '00FFFF', 'FF00FF', '0000FF', 'FF0000', '00008B', '008B8B',
'006400', '800080', '8B0000', '808000', 'FFFFFF', 'D3D3D3', 'A9A9A9', '000000'
['ffff00', '00ff00', '00ffff', 'ff00ff', '0000ff', 'ff0000', '00008b', '008b8b'],
['006400', '800080', '8b0000', '808000', 'ffffff', 'd3d3d3', 'a9a9a9', '000000']
];
return (
<List>
<ListItem>
<div className='palette'>
<div className="row">
{highlightColors.map((effect, index) => {
return (
<a key={index} className={(curColor && (curColor.color === effect || curColor === effect)) ? 'highlight-color active' : 'highlight-color'} style={{ background: `#${effect}`}} onClick={() => {onColorClick(effect)}}></a>
);
})}
</div>
<div className='highlight-palette'>
{highlightColors.map((row, index) => (
<div key={index} className="row">
{row.map((effect, index) => {
return (
<a key={index} className={(curColor && (curColor.color === effect || curColor === effect)) ? 'highlight-color highlight-color_active' : 'highlight-color'} style={{ background: `#${effect}`}} onClick={() => {changeColor(effect)}}></a>
);
})}
</div>
))}
</div>
</ListItem>
<ListItem radio checked={true} title={t('Edit.textNoFill')}></ListItem>
<ListItem radio checked={(curColor && (curColor === 'transparent'))} title={t('Edit.textNoFill')}></ListItem>
</List>
)
};

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

@ -294,7 +294,7 @@
.color-preview {
width: 30px;
height: 30px;
border-radius: 16px;
border-radius: 4px;
margin-top: -3px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) inset;
&.auto {

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

@ -903,11 +903,26 @@ input[type="number"]::-webkit-inner-spin-button {
// Highlight Colors
.highlight-palette {
width: 100%;
}
.highlight-color {
width: 38px;
height: 38px;
min-width: 10px;
min-height: 34px;
margin: 1px;
border: 0.5px solid #9E9E9E;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
position: relative;
flex-grow: 1;
&_active:after {
content: ' ';
position: absolute;
width: 100%;
height: 100%;
box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px #446995;
z-index: 1;
border-radius: 1px;
}
}
@ -916,3 +931,4 @@ input[type="number"]::-webkit-inner-spin-button {

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

@ -491,7 +491,7 @@ const PageBackgroundColor = props => {
</NavRight>
}
</Navbar>
<HighlightColorPalette />
<HighlightColorPalette changeColor={changeColor} curColor={backgroundColor} />
{/* <ThemeColorPalette changeColor={changeColor} curColor={backgroundColor} customColors={customColors} transparent={true}/>
<List>
<ListItem title={_t.textAddCustomColor} link={'/edit-text-custom-back-color/'} routeProps={{