react-color#SketchPicker JavaScript Examples
The following examples show how to use
react-color#SketchPicker.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: ColorPicker.jsx From ice-electron with MIT License | 6 votes |
|
render() {
return (
<div>
<div
onClick={this.handleClick}
style={{
border: '3px solid #fff',
borderRadius: 2,
height: 20,
width: 50,
backgroundColor: this.state.color,
boxShadow: '0 0 1px rgba(0,0,0,0.5)',
}}
/>
{this.state.displayColorPicker ? (
<div style={styles.popover}>
<div style={styles.cover} onClick={this.handleClose} />
<SketchPicker
disableAlpha
color={this.state.color}
onChange={this.handleChange}
/>
</div>
) : null}
</div>
);
}
Example #2
| Source File: index.jsx From makerverse with GNU General Public License v3.0 | 6 votes |
|
render() {
const { displayColorPicker } = this.state;
const { color, setColor } = this.props;
const bk = { backgroundColor: color };
return (
<div style={{ padding: 10 }}>
<button
className={ styles.swatch }
onClick={() => {
this.setState({ displayColorPicker: !displayColorPicker });
}}
>
<div className={ styles.color } style={bk} />
</button>
{displayColorPicker && (
<div className={ styles.popover }>
<button
className={ styles.cover }
onClick={() => this.setState({ displayColorPicker: false })}
/>
<SketchPicker
color={ color }
onChange={setColor}
/>
</div>
)}
</div>
);
}
Example #3
| Source File: index.js From ant-simple-pro with MIT License | 6 votes |
|
Index = memo(function Index() {
const [color,setColor] = useState('#fff');
const colorChange = (val) =>{
setColor(val.hex)
}
return (
<div style={{padding:'20px',background:color}}>
<Row gutter={[20,20]}>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<SketchPicker color={color} onChange ={colorChange} />
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<SwatchesPicker color={color} onChange ={colorChange} />
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<ChromePicker color={color} onChange ={colorChange} />
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<CompactPicker color={color} onChange ={colorChange} />
</Col>
</Row>
</div>
)
})
Example #4
| Source File: ChartSelector.js From indeplot with GNU General Public License v3.0 | 6 votes |
|
render() {
const { selected, color, colorPickerOn } = this.state;
const { data, labels } = this.props;
return (
<Container>
<Form inline className="justify-content-center mb-3">
<Form.Label className="mr-2">
Select Chart Type
</Form.Label>
<DropdownButton className="chart-type-selector" title={selected} variant="outline-dark" onSelect={this.handleSelect}>
{chartTypes.map((item, i) =>
<Dropdown.Item key={i} eventKey={item} >{chartTypeIcons[item]}{item}</Dropdown.Item>
)}
</DropdownButton>
<span> </span>
<Button as="input" type="button" value="Color Picker" variant="outline-dark" onClick={this.handleColorPicker} />
<Button type="button" variant="outline-dark" onClick={this.refreshData} className="ml-1">Refresh</Button>
<Modal show={colorPickerOn} onHide={this.handleModalClose}>
<Modal.Header closeButton>
Color Picker
</Modal.Header>
<Modal.Body>
<SketchPicker
width="95%"
color={this.state.color}
onChangeComplete={this.handleColor}
/>
</Modal.Body>
</Modal>
</Form>
<Row>
<Col>
<Charts chartType={selected} chartColor={color} labels={labels} title="Sample" data={data} options={{}} />
</Col>
</Row>
</Container>
)
}
Example #5
| Source File: ColorButton.jsx From svg-edit-react with MIT License | 6 votes |
|
ColorButton = ({ onChange, value, title }) => {
const [display, setDisplay] = React.useState(false)
const handleClick = () => setDisplay(!display)
const onChangeComplete = (color) => {
onChange(color?.hex)
setDisplay(false)
}
const rgb = colorString.get.rgb(value) || [255, 255, 255] // or white
return (
<div>
{display && rgb && (
<SketchPicker
className="OIe-tools-color-panel"
color={colorString.to.hex(rgb)}
onChangeComplete={onChangeComplete}
/>
)}
<Icon name={title} className="OIe-tools-color-title" />
<div
className="OIe-tools-color-sample"
onClick={handleClick}
style={{ backgroundColor: colorString.to.hex(rgb) }}
/>
</div>
)
}
Example #6
| Source File: picker.js From react-drag with MIT License | 6 votes |
|
render() {
const styles = reactCSS({
'default': {
swatch: {
padding: '5px',
background: '#fff',
borderRadius: '1px',
boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
display: 'inline-block',
cursor: 'pointer',
},
popover: {
position: 'absolute',
zIndex: '2',
},
cover: {
position: 'fixed',
top: '0px',
right: '0px',
bottom: '0px',
left: '0px',
},
},
});
return (
<div>
<div style={ styles.swatch } onClick={ this.handleClick }>
<div style ={ {background: this.props.color, width: '20px', height: '20px'}}></div>
</div>
{ this.state.displayColorPicker ? <div style={ styles.popover }>
<div style={ styles.cover } onClick={ this.handleClose }/>
<SketchPicker color={ this.props.color } onChange={ this.handleChange } />
</div> : null }
</div>
)
}
Example #7
| Source File: ColorPicker.js From recoil-paint with MIT License | 5 votes |
|
export default function ColorPicker() {
const [shown, setShown] = useState(false);
const [backgroundColor, setBackgroundColor] = useRecoilState(backgroundColorState);
const handleChangeComplete = useCallback((color) => {
setBackgroundColor(color.hex);
}, [setBackgroundColor]);
const handleClick = useCallback(() => {
setShown(true);
}, []);
useEffect(() => {
function hidePopup(e) {
if (e.target.closest('#color-picker')) {
return;
}
setShown(false);
}
document.body.addEventListener('click', hidePopup);
return () => {
document.body.removeEventListener('click', hidePopup);
}
}, []);
return (
<View style={styles.root} onClick={handleClick}>
<View style={[styles.inner, { backgroundColor: backgroundColor }]} />
{shown && (
<View style={styles.popup} nativeID="color-picker">
<SketchPicker
color={backgroundColor}
onChangeComplete={handleChangeComplete}
/>
</View>
)}
</View>
);
}
Example #8
| Source File: UserConfig.jsx From airboardgame with MIT License | 5 votes |
|
UserConfig = ({ user, setUser, editable, index }) => {
const { t } = useTranslation();
const [name, setName] = React.useState(user.name);
const [color, setColor] = React.useState(user.color);
const [showDetails, setShowDetails] = React.useState(false);
const handleChange = React.useCallback(
(e) => {
setName(e.target.value);
setUser((prevUser) => ({ ...prevUser, name: e.target.value }));
},
[setUser]
);
const handleChangecolor = React.useCallback((newColor) => {
setColor(newColor.hex);
}, []);
const handleChangecolorComplete = React.useCallback(
(newColor) => {
setColor(newColor.hex);
setUser((prevUser) => ({ ...prevUser, color: newColor.hex }));
},
[setUser]
);
return (
<>
<UserCircle
color={user.color}
onClick={() => editable && setShowDetails(true)}
title={user.name}
name={user.name || `${index}`}
isSelf={editable}
/>
<Modal
title={t("User details")}
show={showDetails}
setShow={setShowDetails}
>
<label>{t("Username")}</label>
<StyledInputName value={name} onChange={handleChange} />
<label>{t("Color")}</label>
<SketchPicker
disableAlpha
presetColors={emptyColors}
color={color}
onChange={handleChangecolor}
onChangeComplete={handleChangecolorComplete}
styles={emptyStyle}
width={160}
/>
</Modal>
</>
);
}
Example #9
| Source File: ColorPicker.jsx From airboardgame with MIT License | 5 votes |
|
ColorPicker = ({
value,
onChange,
disableAlpha = true,
colors = defaultColors,
}) => {
const [showPicker, setShowPicker] = React.useState(false);
const [currentColor, setCurrentColor] = React.useState(() => {
if (value === "") {
return { r: 150, g: 150, b: 150, a: 1 };
}
try {
const [red, green, blue, alpha] = parseToRgba(value);
return { r: red, g: green, b: blue, a: alpha };
} catch (e) {
console.log("Failed to parse color", e);
return { r: 0, g: 0, b: 0, a: 1 };
}
});
const { t } = useTranslation();
const showColorPicker = () => {
setShowPicker((prev) => !prev);
};
const handleChange = React.useCallback((newColor) => {
setCurrentColor(newColor.rgb);
}, []);
const handleChangeComplete = React.useCallback(
(newColor) => {
setCurrentColor(newColor.rgb);
const { r: red, g: green, b: blue, a: alpha } = newColor.rgb;
onChange(rgba(red, green, blue, alpha));
},
[onChange]
);
const handleClick = React.useCallback(() => {
setShowPicker(false);
}, []);
return (
<>
<Color color={value} onClick={showColorPicker} />
{showPicker && (
<ColorPickerWrapper>
<SketchPicker
color={currentColor}
onChange={handleChange}
disableAlpha={disableAlpha}
onChangeComplete={handleChangeComplete}
presetColors={colors}
/>
<button onClick={handleClick}>{t("Close")}</button>
</ColorPickerWrapper>
)}
</>
);
}
Example #10
| Source File: ColorPicker.js From dnd-builder with MIT License | 5 votes |
|
ColorPickerWithClickOutside = withClickOutside(SketchPicker)
Example #11
| Source File: ColorPicker.jsx From ui with MIT License | 5 votes |
|
ColorPicker = (props) => {
const { color, zIndex, onColorChange } = props;
const [colorPicked, setColorPicked] = useState(color);
const [visible, setVisible] = useState(false);
const onTemporaryColorChange = (newColor) => {
const { hex } = newColor;
setColorPicked(hex);
};
const onFinalColorChange = (newColor) => {
const { hex } = newColor;
setColorPicked(hex);
onColorChange(hex);
};
const pickerComponent = () => (
<SketchPicker
color={colorPicked}
onChange={onTemporaryColorChange}
onChangeComplete={onFinalColorChange}
/>
);
return (
<div style={{ zIndex }}>
<Popover
content={pickerComponent()}
placement='bottom'
trigger='click'
visible={visible}
onVisibleChange={(newVisible) => setVisible(newVisible)}
destroyTooltipOnHide
zIndex={zIndex}
>
<Button
size='small'
shape='circle'
style={{ backgroundColor: colorPicked }}
onClick={(e) => {
e.stopPropagation();
setVisible(true);
}}
>
<Tooltip placement='bottom' title='Change color' mouseEnterDelay={0} mouseLeaveDelay={0}>
<span> </span>
</Tooltip>
</Button>
</Popover>
</div>
);
}
Example #12
| Source File: ChooseTheme.js From resume-builder with MIT License | 5 votes |
|
function ChooseTheme() {
const primaryColors = ['#66ff99', '#66ffff', '#cc99ff', '#ff66cc', '#ff9966', '#77ff33', '#ff7733', '#00ffcc', '#ff1ab3', '#669999', '#ffff00', '#33ff33']
const secondaryColors = ['#b3ffcc', '#ccffff', '#e6ccff', '#ffb3e6', '#ffccb3', '#aaff80', '#ffaa80', '#80ffe5', '#ff99dd', '#c2d6d6', '#ffff80', '#99ff99']
const indexCol = Math.floor(Math.random() * primaryColors.length)
const [primary, setPrimary] = useState(primaryColors[indexCol])
const [secondary, setSecondary] = useState(secondaryColors[indexCol])
const { updateTheme } = useContext(DetailsContext);
useEffect(() => {
const onSubmit = () => {
const data = {
primary: primary,
secondary: secondary
}
updateTheme(data)
};
onSubmit()
// eslint-disable-next-line
}, [primary, secondary])
return (
<div className="chooseTheme">
<h1>Choose Theme</h1>
<div className="themeFormContainer">
<div className="themeForm">
<div className="choosePrimaryTheme" style={{background: primary}}>
<h3>Choose Header Background</h3>
<SketchPicker
color={primary}
onChangeComplete={targetColor => setPrimary(targetColor.hex)}
/>
</div>
<div className="chooseSecondaryTheme" style={{background: secondary}}>
<h3>Choose Page Background</h3>
<SketchPicker
color={secondary}
onChangeComplete={targetColor => setSecondary(targetColor.hex)}
/>
</div>
</div>
</div>
</div>
)
}
Example #13
| Source File: FormAdvanced.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
const { selectedGroup } = this.state;
const { selectedMulti } = this.state;
const { selectedMulti1 } = this.state;
function Offsymbol(text){
return (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%",
fontSize: 12,
color: "#fff",
paddingRight: 2
}}
>
{" "}
{text}
</div>
);
};
function OnSymbol(text) {
return (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%",
fontSize: 12,
color: "#fff",
paddingRight: 2
}}
>
{" "}
{text}
</div>
);
};
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Form Advanced" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg="12">
<Card>
<CardBody>
<h4 className="card-title">Select2</h4>
<p className="card-title-desc">A mobile and touch friendly input spinner component for Bootstrap</p>
<form>
<Row>
<Col lg="6">
<FormGroup className="select2-container">
<Label>Single Select</Label>
<Select
value={selectedGroup}
onChange={this.handleSelectGroup}
options={optionGroup}
classNamePrefix="select2-selection"
/>
</FormGroup>
<FormGroup className="select2-container">
<Label className="control-label">Multiple Select</Label>
<Select
value={selectedMulti}
isMulti={true}
onChange={this.handleMulti}
options={optionGroup}
classNamePrefix="select2-selection"
/>
</FormGroup>
</Col>
<Col lg="6">
<FormGroup className="mb-0 select2-container">
<Label>Disable</Label>
<Select
value={selectedMulti1}
isMulti={true}
onChange={this.handleMulti1}
options={optionGroup}
classNamePrefix="select2-selection"
isDisabled={true}
/>
</FormGroup>
</Col>
</Row>
</form>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col lg="6">
<Card>
<CardBody>
<h4 className="card-title">React Colorpicker</h4>
<p className="card-title-desc">Fancy and customizable colorpicker
plugin for Twitter Bootstrap.</p>
<Form action="#">
<FormGroup>
<Label>Simple input field</Label>
<Input
type="text"
className="colorpicker-default"
value={this.state.color}
onClick={() =>
this.setState({
simple_color: !this.state.simple_color
})
}
readOnly
/>
{this.state.simple_color ? (
<ColorPicker
saturationHeight={100}
saturationWidth={100}
value={this.state.color}
onDrag={this.onDrag.bind(this)}
/>
) : null}
</FormGroup>
<FormGroup>
<Label>With custom options - RGBA</Label>
<Input
type="text"
className="colorpicker-rgba form-control"
value={this.state.colorRGBA}
onClick={this.handleRGBA}
readOnly
/>
{
this.state.display_RGBA ? (
<SketchPicker
color="#fff"
value={this.state.colorRGBA}
width="160px"
onChangeComplete={this.onSwatchHover_RGBA}
/>
) : null
}
</FormGroup>
<FormGroup className="m-b-0">
<Label>As a component</Label>
<InputGroup className="colorpicker-default" title="Using format option">
<Input readOnly value={this.state.colorRgb} type="text" className="form-control input-lg" />
<InputGroupAddon addonType="append">
<span
className="input-group-text colorpicker-input-addon"
onClick={() => this.setState({ simple_color1: !this.state.simple_color1 })}
>
<i style={{
height: "16px",
width: "16px",
background: this.state.colorRgb
}}></i>
</span>
</InputGroupAddon>
</InputGroup>
{this.state.simple_color1 ?
<ColorPicker saturationHeight={100} saturationWidth={100} value={this.state.colorRgb} onDrag={this.onDragRgb.bind(this)} />
: null}
</FormGroup>
<FormGroup>
<Label>Horizontal mode</Label>
<Input
type="text"
onClick={() =>
this.setState({
simple_color2: !this.state.simple_color2
})
}
value={this.state.colorHor}
readOnly
/>
{this.state.simple_color2 ? (
<SketchPicker
color="#fff"
value={this.state.simple_color2}
width="160px"
onChangeComplete={this.handleHor}
/>
) : null}
</FormGroup>
<FormGroup className="mb-0">
<Label>Inline</Label>
<ColorPicker
saturationHeight={100}
saturationWidth={100}
value={this.state.colorCust}
onDrag={this.onDragCust.bind(this)}
/>
</FormGroup>
</Form>
</CardBody>
</Card>
</Col>
<Col lg="6">
<Card>
<CardBody>
<h4 className="card-title">Datepicker</h4>
<p className="card-title-desc">Examples of twitter bootstrap datepicker.</p>
<Form>
<FormGroup className="mb-4">
<Label>Default Functionality</Label>
<InputGroup>
<DatePicker
className="form-control"
selected={this.state.default_date}
onChange={this.handleDefault}
/>
</InputGroup>
</FormGroup>
<FormGroup className="mb-4">
<Label>Month View</Label>
<InputGroup>
<DatePicker
selected={this.state.monthDate}
className="form-control"
onChange={this.handleMonthChange}
showMonthDropdown
/>
</InputGroup>
</FormGroup>
<FormGroup className="mb-4">
<Label>Year View</Label>
<InputGroup>
<DatePicker
selected={this.state.yearDate}
className="form-control"
onChange={this.handleYearChange}
showYearDropdown
/>
</InputGroup>
</FormGroup>
<FormGroup className="mb-0">
<Label>Date Range</Label>
<div>
<div>
<DatePicker
selected={this.state.start_date}
selectsStart
className="form-control"
placeholderText="From"
startDate={this.state.start_date}
endDate={this.state.end_date}
onChange={this.handleStart}
/>
<DatePicker
selected={this.state.end_date}
selectsEnd
className="form-control"
startDate={this.state.start_date}
endDate={this.state.end_date}
onChange={this.handleEnd}
/>
</div>
</div>
</FormGroup>
</Form>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col lg="6">
<Card>
<CardBody>
<h4 className="card-title">Bootstrap MaxLength</h4>
<p className="card-title-desc">This plugin integrates by default with
Twitter bootstrap using badges to display the maximum lenght of the
field where the user is inserting text. </p>
<Label>Default usage</Label>
<p className="text-muted m-b-15">
The badge will show up by default when the remaining chars
are 10 or less:
</p>
<Input
type="text"
maxLength="25"
name="defaultconfig"
onChange={this.threshholdDefault}
id="defaultconfig"
/>
{this.state.disDefault ? (
<span className="badgecount badge badge-info">
{this.state.threshholdDefault} / 25{" "}
</span>
) : null}
<div className="mt-3">
<Label>Threshold value</Label>
<p className="text-muted m-b-15">
Do you want the badge to show up when there are 20 chars
or less? Use the <code>threshold</code> option:
</p>
<Input
type="text"
maxLength={this.state.max_len}
onChange={this.threshholdchange}
name="thresholdconfig"
id="thresholdconfig"
/>
{this.state.disthresh ? (
<span className="badgecount badge badge-info">
{this.state.threshholdcount} / 25{" "}
</span>
) : null}
</div>
<div className="mt-3">
<Label>All the options</Label>
<p className="text-muted m-b-15">
Please note: if the <code>alwaysShow</code> option isenabled, the <code>threshold</code> option is ignored.
</p>
<Input
type="text"
maxLength="25"
onChange={this.optionchange}
name="alloptions"
id="alloptions"
/>
{this.state.disbadge ? (
<span className="badgecount">
<span className="badge badge-success">You Typed {this.state.optioncount} out of 25 chars available.</span>
</span>
) : null}
</div>
<div className="mt-3">
<Label>Position</Label>
<p className="text-muted m-b-15">
All you need to do is specify the <code>placement</code>{" "}
option, with one of those strings. If none is specified,
the positioning will be defauted to 'bottom'.
</p>
<Input
type="text"
maxLength="25"
onChange={this.placementchange}
name="placement"
id="placement"
/>
{this.state.placementbadge ? (
<span style={{ float: "right" }} className="badgecount badge badge-info">
{this.state.placementcount} / 25{" "}
</span>
) : null}
</div>
<div className="mt-3">
<Label>textareas</Label>
<p className="text-muted m-b-15">
Bootstrap maxlength supports textarea as well as inputs.
Even on old IE.
</p>
<Input
type="textarea"
id="textarea"
onChange={this.textareachange}
maxLength="225"
rows="3"
placeholder="This textarea has a limit of 225 chars."
/>
{this.state.textareabadge ? (
<span className="badgecount badge badge-info">
{" "}
{this.state.textcount} / 225{" "}
</span>
) : null}
</div>
</CardBody>
</Card>
</Col>
<Col lg="6">
<Card>
<CardBody>
<h4 className="card-title">Bootstrap TouchSpin</h4>
<p className="card-title-desc">A mobile and touch friendly input spinner component for Bootstrap</p>
<Form>
<FormGroup>
<Label>Using data attributes</Label>
<InputGroup>
<InputGroupAddon addonType="prepend"
onClick={() =>
this.setState({
data_attr: this.state.data_attr - 1
})
}
>
<Button type="button" color="primary">
<i className="mdi mdi-minus"></i>
</Button>
</InputGroupAddon>
<Input
type="number"
className="form-control"
value={this.state.data_attr}
placeholder="number"
readOnly
/>
<InputGroupAddon addonType="append"
onClick={() =>
this.setState({
data_attr: this.state.data_attr + 1
})
}
>
<Button type="button" color="primary">
<i className="mdi mdi-plus"></i>
</Button>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup>
<Label>Example with postfix (large)</Label>
<InputGroup>
<InputGroupAddon addonType="prepend"
onClick={() =>
this.setState({ postfix: this.state.postfix - 1 })
}
>
<Button type="button" color="primary">
<i className="mdi mdi-minus"></i>
</Button>
</InputGroupAddon>
<Input
type="number"
className="form-control"
value={this.state.postfix}
placeholder="number"
readOnly
/>
<InputGroupAddon addonType="append">
<span className="input-group-text">%</span>
<Button
type="button"
onClick={() =>
this.setState({
postfix: this.state.postfix + 1
})
}
color="primary"
>
<i className="mdi mdi-plus"></i>
</Button>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup>
<Label>Init with empty value:</Label>
<InputGroup>
<InputGroupAddon addonType="prepend"
onClick={() =>
this.setState({
empty_val: this.state.empty_val - 1
})
}
>
<Button type="button" color="primary">
<i className="mdi mdi-minus"></i>
</Button>
</InputGroupAddon>
<Input
type="number"
className="form-control"
value={this.state.empty_val}
placeholder="number"
readOnly
/>
<InputGroupAddon addonType="prepend"
onClick={() =>
this.setState({
empty_val: this.state.empty_val + 1
})
}
>
<Button type="button" color="primary">
<i className="mdi mdi-plus"></i>
</Button>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup>
<Label>
Value attribute is not set (applying settings.initval)
</Label>
<InputGroup>
<InputGroupAddon addonType="prepend"
onClick={() =>
this.setState({
not_attr: this.state.not_attr - 1
})
}
>
<Button type="button" color="primary">
<i className="mdi mdi-minus"></i>
</Button>
</InputGroupAddon>
<Input
type="number"
className="form-control"
value={this.state.not_attr}
placeholder="number"
readOnly
/>
<InputGroupAddon addonType="append"
onClick={() =>
this.setState({
not_attr: this.state.not_attr + 1
})
}
>
<Button type="button" color="primary">
<i className="mdi mdi-plus"></i>
</Button>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup className="mb-0">
<Label>
Value is set explicitly to 33 (skipping settings.initval)
</Label>
<InputGroup>
<InputGroupAddon addonType="prepend"
onClick={() =>
this.setState({
explicit_val: this.state.explicit_val - 1
})
}
>
<Button type="button" color="primary">
<i className="mdi mdi-minus"></i>
</Button>
</InputGroupAddon>
<Input
type="number"
className="form-control"
value={this.state.explicit_val}
placeholder="number"
readOnly
/>
<InputGroupAddon addonType="append"
onClick={() =>
this.setState({
explicit_val: this.state.explicit_val + 1
})
}
>
<Button type="button" color="primary">
<i className="mdi mdi-plus"></i>
</Button>
</InputGroupAddon>
</InputGroup>
</FormGroup>
</Form>{" "}
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col lg="12">
<Card>
<CardBody>
<h4 className="card-title">React Switch</h4>
<p className="card-title-desc">Here are a few types of switches. </p>
<Row>
<Col lg="6">
<h5 className="font-size-14 mb-3">Example switch</h5>
<div>
<Switch
uncheckedIcon={Offsymbol("Off")}
checkedIcon={OnSymbol("On")}
onColor="#626ed4"
onChange={() =>
this.setState({ switch1: !this.state.switch1 })
}
checked={this.state.switch1}
className="mr-1 mt-1"
/>
<Switch
uncheckedIcon={Offsymbol("No")}
checkedIcon={OnSymbol("Yes")}
onColor="#a2a2a2"
onChange={() =>
this.setState({ switch2: !this.state.switch2 })
}
checked={this.state.switch2}
className="mr-1 mt-1"
/>
<Switch
uncheckedIcon={Offsymbol("No")}
checkedIcon={OnSymbol("Yes")}
onColor="#02a499"
offColor="#ec4561"
onChange={() =>
this.setState({ switch3: !this.state.switch3 })
}
checked={this.state.switch3}
className="mr-1 mt-1"
/>
<Switch
uncheckedIcon={Offsymbol("No")}
checkedIcon={OnSymbol("Yes")}
onColor="#626ed4"
onChange={() =>
this.setState({ switch4: !this.state.switch4 })
}
checked={this.state.switch4}
className="mr-1 mt-1"
/>
<Switch
uncheckedIcon={Offsymbol("No")}
checkedIcon={OnSymbol("Yes")}
onColor="#02a499"
onChange={() =>
this.setState({ switch5: !this.state.switch5 })
}
checked={this.state.switch5}
className="mr-1 mt-1"
/>
<Switch
uncheckedIcon={Offsymbol("No")}
checkedIcon={OnSymbol("Yes")}
onColor="#38a4f8"
onChange={() =>
this.setState({ switch6: !this.state.switch6 })
}
checked={this.state.switch6}
className="mr-1 mt-1"
/>
<Switch
uncheckedIcon={Offsymbol("No")}
checkedIcon={OnSymbol("Yes")}
onColor="#f8b425"
onChange={() =>
this.setState({ switch7: !this.state.switch7 })
}
checked={this.state.switch7}
className="mr-1 mt-1"
/>
<Switch
uncheckedIcon={Offsymbol("No")}
checkedIcon={OnSymbol("Yes")}
onColor="#ec4561"
onChange={() =>
this.setState({ switch8: !this.state.switch8 })
}
checked={this.state.switch8}
className="mr-1 mt-1"
/>
<Switch
uncheckedIcon={Offsymbol("No")}
checkedIcon={OnSymbol("Yes")}
onColor="#2a3142"
onChange={() =>
this.setState({ switch9: !this.state.switch9 })
}
checked={this.state.switch9}
className="mr-1 mt-1"
/>
</div>
</Col>
<Col lg="6">
<div className="mt-4 mt-lg-0">
<h5 className="font-size-14 mb-3">Square switch</h5>
<div className="d-flex">
<label htmlFor="icon-switch">
<div className="square-switch">
<Switch
checked={!this.state.sw1}
onChange={()=>{this.setState({sw1 : !this.state.sw1})}}
uncheckedIcon={
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%",
fontSize: 15,
color: "white",
paddingRight: 2
}}
>
Off
</div>
}
checkedIcon={
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%",
fontSize: 15,
color: "white",
paddingRight: 2
}}
>
On
</div>
}
className="react-switch"
id="icon-switch"
/>
</div>
</label>
</div>
</div>
</Col>
</Row>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #14
| Source File: tools.js From plant-3d-explorer with GNU Affero General Public License v3.0 | 4 votes |
|
export default function MiscInteractors() {
const [selectedAngle] = useSelectedAngle();
const [colors, setColors] = useColor();
const [resetDefaultColor] = useDefaultColors();
const [layerTools] = useLayerTools();
const [layers] = useLayers();
const [labels, setLabels] = useState();
const [, segmentation] = useSegmentedPointCloud();
const [legendPicker, setLegendPicker] = useState();
const [pointCloudZoom, setPointCloudZoom] = usePointCloudZoom();
const [pointCloudSize, setPointCloudSize] = usePointCloudSize();
const [aabb, setAABB] = useAxisAlignedBoundingBox()
useEffect(() => {
if (segmentation && segmentation.labels) {
setLabels(
segmentation.labels.filter(
(value, index, self) => self.indexOf(value) === index
)
);
}
}, [segmentation]);
// This is probably the worst part of the interface. This is the row of tools appearing when you click on various layers.
// There is no links between the layer buttons and the tools associated to it.
// Improvement : Rework the interactors to have tools associated to specific layers. Its mostly the component hierarchy with some CSS
// most of what's done is working fine
return (
<ToolContainer>
<ColumnContainer displayed={layers.mesh}>
<ToolButton
toolsList={useLayerTools()}
tool={tools.colorPickers.mesh}
layer={layers.mesh}
interactor={{
isButton: true,
}}
tooltipId="tooltip-mesh-color-picker"
icon={
<PaintIcon
isActivated={layerTools.activeTool === tools.colorPickers.mesh}
/>
}
>
<SketchPicker
onChange={(color) => {
if (color.hex === "transparent") return;
setColors({
...colors,
mesh: { rgb: color.hex, a: color.rgb.a },
});
window.localStorage.setItem("defaultMeshColor", color.hex);
window.localStorage.setItem(
"defaultMeshOpacity",
color.rgb.a.toString()
);
}}
// color={{ ...hex2RGB(colors.mesh.rgb), a: colors.mesh.a }}
color={{
...hex2RGB(window.localStorage.getItem("defaultMeshColor")),
a: window.localStorage.getItem("defaultMeshOpacity"),
}}
/>
<ResetButton
onClick={() => {
window.localStorage.setItem(
"defaultMeshColor",
defaults.defaultMeshColor
);
window.localStorage.setItem(
"defaultMeshOpacity",
defaults.defaultMeshOpacity
);
resetDefaultColor("mesh");
}}
/>
</ToolButton>
</ColumnContainer>
<ColumnContainer displayed={layers.pointCloud}>
<ToolButton
toolsList={useLayerTools()}
tool={tools.colorPickers.pointCloud}
layer={layers.pointCloud}
interactor={{
isButton: true,
}}
tooltipId={"tooltip-point-cloud-color-picker"}
icon={
<PaintIcon
isActivated={
layerTools.activeTool === tools.colorPickers.pointCloud
}
/>
}
>
<SketchPicker
onChange={(color) => {
if (color.hex === "transparent") return;
setColors({
...colors,
pointCloud: { rgb: color.hex, a: color.rgb.a },
});
window.localStorage.setItem("defaultPointCloudColor", color.hex);
window.localStorage.setItem(
"defaultPointCloudOpacity",
color.rgb.a.toString()
);
}}
// color={{ ...hex2RGB(colors.pointCloud.rgb), a: colors.pointCloud.a }}
color={{
...hex2RGB(window.localStorage.getItem("defaultPointCloudColor")),
a: window.localStorage.getItem("defaultPointCloudOpacity"),
}}
/>
<ResetButton
onClick={() => {
resetDefaultColor("pointCloud");
window.localStorage.setItem(
"defaultPointCloudColor",
defaults.defaultPointCloudColor
);
window.localStorage.setItem(
"defaultPointCloudOpacity",
defaults.defaultPointCloudOpacity
);
}}
/>
</ToolButton>
</ColumnContainer>
<ColumnContainer displayed={layers.segmentedPointCloud}>
<ToolButton
toolsList={useLayerTools()}
tool={tools.colorPickers.segmentedPointCloud}
layer={layers.segmentedPointCloud}
Interactor={{
isButton: true,
}}
tooltipId={"tooltip-segmentedpointcloud-color-picker"}
icon={
<PaintIcon
isActivated={
layerTools.activeTool === tools.colorPickers.segmentedPointCloud
}
/>
}
>
{labels && colors.segmentedPointCloud.length
? labels.map((d, i) => {
return (
<LegendContainer key={d}>
<H3 style={{ fontSize: 13 }}> {d} </H3>
<MenuBox
activate={legendPicker === i}
onClose={() => {
setLegendPicker(null);
}}
>
<div
style={{
width: 20,
height: 20,
marginLeft: 10,
backgroundColor: colors.segmentedPointCloud[i],
cursor: "pointer",
}}
onClick={() => {
setLegendPicker(i);
}}
/>
<MenuBoxContent>
<SketchPicker
disableAlpha
onChange={(val) => {
let copy = colors.segmentedPointCloud.slice();
copy[i] = val.hex;
setColors({ ...colors, segmentedPointCloud: copy });
window.localStorage.setItem(
"defaultSegmentedColors",
JSON.stringify(copy)
);
}}
color={colors.segmentedPointCloud[i]}
/>
</MenuBoxContent>
</MenuBox>
</LegendContainer>
);
})
: null}
</ToolButton>
</ColumnContainer>
<ColumnContainer displayed={layers.skeleton}>
<ToolButton
toolsList={useLayerTools()}
tool={tools.colorPickers.skeleton}
layer={layers.skeleton}
interactor={{
isButton: true,
}}
tooltipId={"tooltip-skeleton-color-picker"}
icon={
<PaintIcon
isActivated={
layerTools.activeTool === tools.colorPickers.skeleton
}
/>
}
>
<SketchPicker
onChange={(color) => {
if (color.hex === "transparent") return;
setColors({
...colors,
skeleton: { rgb: color.hex, a: color.rgb.a },
});
window.localStorage.setItem("defaultSkeletonColor", color.hex);
window.localStorage.setItem(
"defaultSkeletonOpacity",
color.rgb.a.toString()
);
}}
// color={{ ...hex2RGB(colors.skeleton.rgb), a: colors.skeleton.a }}
color={{
...hex2RGB(window.localStorage.getItem("defaultSkeletonColor")),
a: window.localStorage.getItem("defaultSkeletonOpacity"),
}}
/>
<ResetButton
onClick={() => {
resetDefaultColor("skeleton");
window.localStorage.setItem(
"defaultSkeletonColor",
defaults.defaultSkeletonColor
);
window.localStorage.setItem(
"defaultSkeletonOpacity",
defaults.defaultSkeletonOpacity
);
}}
/>
</ToolButton>
</ColumnContainer>
<ColumnContainer displayed={layers.angles}>
<ToolButton
toolsList={useLayerTools()}
tool={tools.colorPickers.organs}
layer={layers.angles}
interactor={{
isButton: true,
}}
tooltipId={
selectedAngle === undefined || selectedAngle === null
? "tooltip-organ-global-color-picker"
: "tooltip-organ-color-picker"
}
icon={
<PaintIcon
isActivated={layerTools.activeTool === tools.colorPickers.organs}
/>
}
>
<SketchPicker
onChange={(color) => {
if (color.hex === "transparent") return;
let color2 = color.hsl;
// Use a lighter color for the second organ of the pair
color2.l += 0.3;
/* This is a bit ugly but very useful to change the brightness of
the color */
const color2String =
"hsl(" +
Math.round(color2.h) +
", " +
Math.round(color2.s * 100) +
"%, " +
Math.round(color2.l * 100) +
"%)";
if (selectedAngle !== undefined && selectedAngle !== null) {
// We slice the array because it has to be an immutable change
let copy = colors.organs.slice();
const next = selectedAngle + 1;
copy[selectedAngle] = { rgb: color.hex, a: color.rgb.a };
copy[next] = { rgb: color2String, a: color.rgb.a };
setColors({
...colors,
organs: copy,
});
} else {
setColors({
...colors,
globalOrganColors: [
{ rgb: color.hex, a: color.rgb.a },
{ rgb: color2String, a: color.rgb.a },
],
});
}
window.localStorage.setItem("defaultOrgan1Color", color.hex);
window.localStorage.setItem("defaultOrgan2Color", color2String);
window.localStorage.setItem(
"defaultOrganOpacity",
color.rgb.a.toString()
);
}}
color={
selectedAngle !== undefined &&
selectedAngle !== null &&
colors.organs[selectedAngle]
? {
...hex2RGB(
window.localStorage.getItem("defaultOrgan1Color")
), // hex2RGB(colors.organs[selectedAngle].rgb)
a: window.localStorage.getItem("defaultOrganOpacity"),
}
: {
...hex2RGB(
window.localStorage.getItem("defaultOrgan1Color")
), // hex2RGB(colors.organs[0].rgb)
a: window.localStorage.getItem("defaultOrganOpacity"),
}
}
/>
<ResetButton
onClick={() => {
if (selectedAngle !== undefined && selectedAngle !== null) {
if (colors.organs.length > selectedAngle + 1) {
let copy = colors.organs.slice();
copy[selectedAngle] = null;
copy[selectedAngle + 1] = null;
setColors({
...colors,
organs: copy,
});
}
} else {
window.localStorage.setItem(
"defaultOrgan1Color",
defaults.defaultOrgan1Color
);
window.localStorage.setItem(
"defaultOrgan2Color",
defaults.defaultOrgan2Color
);
window.localStorage.setItem(
"defaultOrganOpacity",
defaults.defaultOrganOpacity
);
resetDefaultColor("globalOrganColors");
}
}}
/>
</ToolButton>
</ColumnContainer>
<ColumnContainer displayed={layers.axisAlignedBoundingBox} style={{backgroundColor: "white", alignItems:"center"}}>
<H3 style={{ padding: 7.5, margin:0 }}>
<FormattedMessage id="bbox-min"></FormattedMessage>
</H3>
<Point3D id="min"/>
<H3 style={{ backgroundColor: "white", padding: 7.5, margin:0}}>
<FormattedMessage id="bbox-max"></FormattedMessage>
</H3>
<Point3D id="max"/>
<ResetButton style={{marginBottom:"10px"}} onClick={() => setAABB({...aabb, enforceReset : true})}/>
<input style={{marginBottom:"10px"}} type="button" value="Dump bounding box to console." onClick={()=> {
var str = JSON.stringify({
bounding_box: {
x: [aabb.min.x, aabb.max.x],
y: [aabb.min.y, aabb.max.y],
z: [aabb.min.z, aabb.max.z],
},
}, null, 2);
console.info(str);
}}/>
</ColumnContainer>
<ColumnContainer
style={{ marginTop: -9, marginLeft: 10 }}
displayed={
layers.segmentedPointCloud ||
layers.pointCloud ||
layers.pointCloudGroundTruth
}
>
<H3 style={{ backgroundColor: "white", padding: 7.5 }}>
<FormattedMessage id="pointcloud-zoom" />
</H3>
<Slider
min={1}
max={4}
default={2}
step={0.1}
callback={(value) =>
setPointCloudZoom({ ...pointCloudZoom, level: value })
}
/>
</ColumnContainer>
<ColumnContainer
style={{ marginTop: -9, marginLeft: 10 }}
displayed={
layers.segmentedPointCloud ||
layers.pointCloud ||
layers.pointCloudGroundTruth
}
>
<H3 style={{ backgroundColor: "white", padding: 7.5 }}>
<FormattedMessage id="pointcloud-size" />
</H3>
<Slider
min={0.01}
max={1}
default={0.75}
step={0.01}
callback={(value) =>
setPointCloudSize({ ...pointCloudSize, sampleSize: value })
}
/>
</ColumnContainer>
</ToolContainer>
);
}
Example #15
| Source File: misc.js From plant-3d-explorer with GNU Affero General Public License v3.0 | 4 votes |
|
export default function () {
const [snapshot, setSnapshot] = useSnapshot()
const [snapWidth, setSnapWidth] = useState(0)
const [snapHeight, setSnapHeight] = useState(0)
const [colors, setColors] = useColor()
const [resetDefaultColor] = useDefaultColors()
const [misc, setMisc] = useMisc()
const [ruler, setRuler] = useRuler()
useEffect(() => {
if (misc.activeTool === null) {
setSnapshot({
...snapshot,
snapResolution: null
})
}
}, [misc.activeTool])
return <MiscContainer>
<ToolButton data-testid='ruler'
toolsList={useMisc()}
tool={tools.misc.ruler}
tooltipId='tooltip-ruler'
icon={<RulerIcon
isActivated={misc.activeTool === tools.misc.ruler} />}
>
<div style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'space-between',
justifyItems: 'center'
}} >
<H3>
<FormattedMessage id='ruler-scale' />
</H3>
<div style={{
display: 'flex',
flexDirection: 'row',
margin: 'auto',
marginBottom: 10
}} >
<InputResolution
type='number'
min='0.0001'
step='1'
placeholder='scale'
onChange={(e) => {
const value = e.target.value > 0.0001 ? e.target.value : 0.0001
setMisc({ ...misc, scale: value })
}}
value={misc.scale} /> <H3> cm </H3>
</div>
<Tooltip>
<Interactor
style={{ margin: 'auto', width: '100%', marginBottom: 10 }}
activated={ruler.scaling}
isButton
onClick={() => {
if (!ruler.measuring) {
setRuler({ ...ruler, scaling: !ruler.scaling })
}
}}
>
<H2> <FormattedMessage id='scale-button' /> </H2>
</Interactor>
<TooltipContent>
<H3> <FormattedMessage id='tooltip-scale-button' /> </H3>
</TooltipContent>
</Tooltip>
<Tooltip>
<Interactor
isDisabled={!ruler.scaleSet}
style={{ margin: 'auto', width: '100%' }}
activated={ruler.measuring}
isButton
onClick={() => {
if (!ruler.scaling) {
setRuler({ ...ruler,
measuring: !ruler.measuring })
}
}}
>
<H2> <FormattedMessage id='measure-button' /> </H2>
</Interactor>
<TooltipContent>
<H3>
<FormattedMessage
id={ruler.scaleSet ? 'tooltip-measure-button' : 'tooltip-scale-needed'} />
</H3>
</TooltipContent>
</Tooltip>
<H3 style={{ margin: 'auto', marginTop: 10 }}>
<FormattedMessage id='current-measure' />
</H3>
<div style={{
display: 'flex',
flexDirection: 'row',
margin: 'auto',
marginBottom: 10
}} >
<InputResolution
style={{ margin: 'auto' }}
value={ruler.measure ? (misc.scale * ruler.measure).toFixed(3) : 0}
readOnly
/>
<H3> cm </H3>
</div>
</div>
</ToolButton>
<ToolButton data-testid='background'
toolsList={useMisc()}
tool={tools.colorPickers.background}
interactor={{
isButton: true
}}
tooltipId='tooltip-background-color-picker'
icon={<BackgroundColorIcon
isActivated={misc.activeTool === tools.colorPickers.background} />}
>
<div data-testid='background-color'>
<SketchPicker disableAlpha
// color={localStorage.getItem("defaultBgroundColor")}
onChange={
(color) => {
setColors({
...colors,
background: color.hex
})
window.localStorage.setItem('defaultBgroundColor', color.hex)
}
}
// color={colors.background}
// {...window.alert(localStorage.getItem("defaultBgroundColor"))}
color={window.localStorage.getItem('defaultBgroundColor')}
/>
</div>
<ResetButton
onClick={
() => {
window.localStorage.setItem('defaultBgroundColor', bgroundColor)
resetDefaultColor('background')
}
}
/>
</ToolButton>
<ToolButton
toolsList={useMisc()}
tool={tools.misc.snapshot}
icon={<SnapIcon isActivated={misc.activeTool === tools.misc.snapshot} />}
interactor={{
isButton: true
}}
tooltipId='tooltip-snapshot'
>
<div style={{
minWidth: 200,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignContent: 'center'
}} data-testid='snapshot-menu'>
<Tooltip
style={{
padding: 0,
margin: 'auto',
width: 40
}}>
<ResetButton
onClick={
() => {
setSnapWidth(snapshot.trueResolution.width)
setSnapHeight(snapshot.trueResolution.height)
}
}
/>
<TooltipContent>
<H3> <FormattedMessage id='tooltip-reset-resolution' /> </H3>
</TooltipContent>
</Tooltip>
<div style={{
display: 'flex',
flexDirection: 'row',
margin: 'auto'
}} >
<InputResolution
type='number'
min='0'
max='4096'
step='10'
placeholder='X'
onChange={
(e) => {
setSnapWidth(parseInt(
Math.min(Math.max(e.target.value, 0), 4096)))
}
}
value={
snapWidth ||
(snapshot.trueResolution
? snapshot.trueResolution.width
: 0)}
/> <H3> X </H3>
<InputResolution
type='number'
min='0'
max='2160'
step='10'
placeholder='Y'
onChange={
(e) => {
setSnapHeight(parseInt(Math.min(Math.max(
e.target.value, 0), 2160)))
}
}
value={
snapHeight ||
(snapshot.trueResolution
? snapshot.trueResolution.height
: 0)}
/>
</div>
{ snapshot.image
? <div>
<H3
style={{ textAlign: 'center' }}>
<FormattedMessage id='snapshot-preview' />
</H3>
<ImagePreview
image={snapshot.image}
onClick={
() => {
setSnapshot({
...snapshot,
image: null
})
}
}
/>
</div>
: null
}
<GenerateDownloadButton
image={snapshot.image}
onGenerateClick={
() => {
setSnapshot({
...snapshot,
snapResolution: { width: snapWidth, height: snapHeight }
})
}
} />
</div>
</ToolButton>
<ToolButton
toolsList={useMisc()}
tool={tools.misc.photoSets}
icon={<PhotoSetIcon
isActivated={misc.activeTool === tools.misc.photoSets} />}
interactor={{
isButton: true
}}
tooltipId='tooltip-photoset'
>
<div data-testid='photoset-menu'>
<ChooserContainer>
<PhotoSetButton set='images' />
<PhotoSetButton set='undistorted' />
<PhotoSetButton set='masks' />
</ChooserContainer>
</div>
</ToolButton>
</MiscContainer>
}
Example #16
| Source File: FontConverter.js From handReacting with Apache License 2.0 | 4 votes |
|
function FontConverter() {
const [text, setText] = useState("A hero can be anyone. Even a man doing something as simple and reassuring as putting a coat around a young boy's shoulders to let him know that the world hadn't ended. This is a sample text. Enter your text here to convert to handwritten font.")
const [fontFamily, setFontFamily] = useState("'Beth Ellen', cursive")
const [fontSize, setFontSize] = useState(17)
const [color, setColor] = useState('blue')
const [pageColor, setPageColor] = useState('white')
const [letterSpacing, setLetterSpacing] = useState(1)
const [wordSpacing, setWordSpacing] = useState(1)
const [lineHeight, setLineHeight] = useState(30)
const [fontWeight, setFontWeight] = useState(300)
const [line, setLine] = useState(false)
const [shadow, setShadow] = useState(false)
const [margin, setMargin] = useState(false)
const [marginTop, setMarginTop] = useState(false)
const [showColorPicker1, setShowColorPicker1] = useState(false)
const [showColorPicker2, setShowColorPicker2] = useState(false)
const colorList = ['#ffffff', '#f2f2f2', '#e6e6e6', '#d9d9d9', '#cccccc', '#bfbfbf', '#ffffe6', ' #ffffcc', '#ffffb3', '#ffff99', '#e6ffff', '#e6ffe6']
const handleLineHeight = (event, newValue) => {
setLineHeight(newValue);
};
const handleFontWeight = (event, newValue) => {
setFontWeight(newValue);
};
const handlePageLines = (event) => {
setLine(!line);
};
const handleShadow = (event) => {
setShadow(!shadow);
};
const handleMargin = (event) => {
setMargin(!margin);
};
const handleMarginTop = (event) => {
setMarginTop(!marginTop);
};
const generateJpeg = () => {
domtoimage.toJpeg(document.getElementById('page'), { quality: 1 })
.then(function (dataUrl) {
var link = document.createElement('a');
link.download = 'download.jpeg';
link.href = dataUrl;
link.click();
});
}
return (
<div className="fontConverter">
<div className="fontStyler">
<div className="input_container">
<Paper elevation={15} className="paper_input" >
<textarea onChange={e => setText(e.target.value)}
className="inputTextField" cols='36' rows='19'>
{text}
</textarea>
</Paper>
<div className="usageButton">
<Usage />
</div>
</div>
<div className="font_selector">
{/* <h2>Select Styles</h2> */}
<div className="gridOne">
<div className="fontFamily" style={{marginBottom: "1.5rem"}}>
<FormControl style={{minWidth: 150}}>
<InputLabel id="font-label">Fonts</InputLabel>
<Select
labelId="font-label"
onChange={e => setFontFamily(e.target.value)}
>
<MenuItem style={{fontFamily: "'Architects Daughter', cursive"}} value={"'Architects Daughter', cursive"}>Architects Daughter</MenuItem>
<MenuItem style={{fontFamily: "'Bad Script', cursive"}} value={"'Bad Script', cursive"}>Bad Script</MenuItem>
<MenuItem style={{fontFamily: "'Beth Ellen', cursive"}} value={"'Beth Ellen', cursive"}>Beth Ellen</MenuItem>
<MenuItem style={{fontFamily: "'Bilbo', cursive"}} value={"'Bilbo', cursive"}>Bilbo</MenuItem>
<MenuItem style={{fontFamily: "'Calligraffitti', cursive"}} value={"'Calligraffitti', cursive"}>Calligraffitti</MenuItem>
<MenuItem style={{fontFamily: "'Caveat', cursive"}} value={"'Caveat', cursive"}>Caveat</MenuItem>
<MenuItem style={{fontFamily: "'Charmonman', cursive"}} value={"'Charmonman', cursive"}>Charmonman</MenuItem>
<MenuItem style={{fontFamily: "'Dancing Script', cursive"}} value={"'Dancing Script', cursive"}>Dancing Script</MenuItem>
<MenuItem style={{fontFamily: "'Dawning of a New Day', cursive"}} value={"'Dawning of a New Day', cursive"}>Dawning of a New Day</MenuItem>
<MenuItem style={{fontFamily: "'Euphoria Script', cursive"}} value={"'Euphoria Script', cursive"}>Euphoria Script</MenuItem>
<MenuItem style={{fontFamily: "'Homemade Apple', cursive"}} value={"'Homemade Apple', cursive"}>Homemade Apple</MenuItem>
<MenuItem style={{fontFamily: "'Indie Flower', cursive"}} value={"'Indie Flower', cursive"}>Indie Flower</MenuItem>
<MenuItem style={{fontFamily: "'Just Me Again Down Here', cursive"}} value={"'Just Me Again Down Here', cursive"}>Just Me Again Down Here</MenuItem>
<MenuItem style={{fontFamily: "'Kristi', cursive"}} value={"'Kristi', cursive"}>Kristi</MenuItem>
<MenuItem style={{fontFamily: "'Liu Jian Mao Cao', cursive"}} value={"'Liu Jian Mao Cao', cursive"}>Liu Jian Mao Cao</MenuItem>
<MenuItem style={{fontFamily: "'Loved by the King', cursive"}} value={"'Loved by the King', cursive"}>Loved by the King</MenuItem>
<MenuItem style={{fontFamily: "'Lovers Quarrel', cursive"}} value={"'Lovers Quarrel', cursive"}>Lovers Quarrel</MenuItem>
<MenuItem style={{fontFamily: "'Marck Script', cursive"}} value={"'Marck Script', cursive"}>Marck Script</MenuItem>
<MenuItem style={{fontFamily: "'Mr Dafoe', cursive"}} value={"'Mr Dafoe', cursive"}>Mr Dafoe</MenuItem>
<MenuItem style={{fontFamily: "'Mr De Haviland', cursive"}} value={"'Mr De Haviland', cursive"}>Mr De Haviland</MenuItem>
<MenuItem style={{fontFamily: "'Mrs Saint Delafield', cursive"}} value={"'Mrs Saint Delafield', cursive"}>Mrs Saint Delafield</MenuItem>
<MenuItem style={{fontFamily: "'Nanum Brush Script', cursive"}} value={"'Nanum Brush Script', cursive"}>Nanum Brush Script</MenuItem>
<MenuItem style={{fontFamily: "'Over the Rainbow', cursive"}} value={"'Over the Rainbow', cursive"}>Over the Rainbow</MenuItem>
<MenuItem style={{fontFamily: "'Parisienne', cursive"}} value={"'Parisienne', cursive"}>Parisienne</MenuItem>
<MenuItem style={{fontFamily: "'Qwigley', cursive"}} value={"'Qwigley', cursive"}>Qwigley</MenuItem>
<MenuItem style={{fontFamily: "'Rancho', cursive"}} value={"'Rancho', cursive"}>Rancho</MenuItem>
<MenuItem style={{fontFamily: "'ArchiReenie Beanietects', cursive"}} value={"'ArchiReenie Beanietects', cursive"}>Reenie Beanie</MenuItem>
<MenuItem style={{fontFamily: "'Ruthie', cursive"}} value={"'Ruthie', cursive"}>Ruthie</MenuItem>
<MenuItem style={{fontFamily: "'Sacramento', cursive"}} value={"'Sacramento', cursive"}>Sacramento</MenuItem>
<MenuItem style={{fontFamily: "'Shadows Into Light', cursive"}} value={"'Shadows Into Light', cursive"}>Shadows Into Light</MenuItem>
<MenuItem style={{fontFamily: "'Shadows Into Light Two', cursive"}} value={"'Shadows Into Light Two', cursive"}>Shadows Into Light Two</MenuItem>
<MenuItem style={{fontFamily: "'Vibur', cursive"}} value={"'Vibur', cursive"}>Vibur</MenuItem>
<MenuItem style={{fontFamily: "'Waiting for the Sunrise', cursive"}} value={"'Waiting for the Sunrise', cursive"}>Waiting for the Sunrise</MenuItem>
<MenuItem style={{fontFamily: "'Yellowtail', cursive"}} value={"'Yellowtail', cursive"}>Yellowtail</MenuItem>
</Select>
</FormControl>
</div>
<div className="fontSize" style={{marginBottom: "1.5rem"}}>
<FormControl style={{minWidth: 150}}>
<InputLabel id="fontSize-label" >Font Size</InputLabel>
<Select
value={fontSize}
labelId="fontSize-label"
onChange={e => setFontSize(e.target.value)}
>
<MenuItem value={14}>14</MenuItem>
<MenuItem value={15}>15</MenuItem>
<MenuItem value={16}>16</MenuItem>
<MenuItem value={17}>17</MenuItem>
<MenuItem value={18}>18</MenuItem>
<MenuItem value={19}>19</MenuItem>
<MenuItem value={20}>20</MenuItem>
<MenuItem value={21}>21</MenuItem>
<MenuItem value={22}>22</MenuItem>
<MenuItem value={23}>23</MenuItem>
<MenuItem value={24}>24</MenuItem>
</Select>
</FormControl>
</div>
<div className="fontWeight" style={{marginBottom: "1.5rem"}}>
<InputLabel id="fontWeight">Font Weight</InputLabel>
<Slider style={{width: 150}}
defaultValue={200}
value={fontWeight}
aria-labelledby="discrete-slider"
valueLabelDisplay="auto"
onChange={handleFontWeight}
step={100}
min={100}
max={900}
/>
</div>
<div className="letterSpacing" style={{marginBottom: "1.5rem"}}>
<FormControl style={{minWidth: 150}}>
<InputLabel id="letterSpacing-label">Letter Spacing</InputLabel>
<Select
value={letterSpacing}
labelId="letterSpacing-label"
onChange={e => setLetterSpacing(e.target.value)}
>
<MenuItem value={-2}>-2</MenuItem>
<MenuItem value={-1.5}>-1.5</MenuItem>
<MenuItem value={-1}>-1</MenuItem>
<MenuItem value={-0.5}>-0.5</MenuItem>
<MenuItem value={0}>0</MenuItem>
<MenuItem value={0.5}>0.5</MenuItem>
<MenuItem value={1}>1</MenuItem>
<MenuItem value={1.5}>1.5</MenuItem>
<MenuItem value={2}>2</MenuItem>
<MenuItem value={3}>3</MenuItem>
<MenuItem value={4}>4</MenuItem>
</Select>
</FormControl>
</div>
<div className="wordSpacing" style={{marginBottom: "1.5rem"}}>
<FormControl style={{minWidth: 150}}>
<InputLabel id="wordSpacing-label">Word Spacing</InputLabel>
<Select
value={wordSpacing}
labelId="wordSpacing-label"
onChange={e => setWordSpacing(e.target.value)}
>
<MenuItem value={-4}>-4</MenuItem>
<MenuItem value={-3}>-3</MenuItem>
<MenuItem value={-2}>-2</MenuItem>
<MenuItem value={-1}>-1</MenuItem>
<MenuItem value={0}>0</MenuItem>
<MenuItem value={0.5}>0.5</MenuItem>
<MenuItem value={1}>1</MenuItem>
<MenuItem value={2}>2</MenuItem>
<MenuItem value={3}>3</MenuItem>
<MenuItem value={4}>4</MenuItem>
<MenuItem value={5}>6</MenuItem>
<MenuItem value={6}>8</MenuItem>
</Select>
</FormControl>
</div>
</div>
<div className="gridTwo">
<div className="colorButton">
<Button style={{backgroundColor: `${color}`}} onClick={() => setShowColorPicker1(showColorPicker => !showColorPicker)} variant="contained" color="primary">
{showColorPicker1 ? 'Close ' : 'Font Color'}
</Button>
</div>
<div className="colorPicker">
{
showColorPicker1 && (
<SketchPicker
color={color}
onChange={targetColor => setColor(targetColor.hex)}
/>
)
}
</div>
<div className="colorButton">
<Button style={{backgroundColor: `${pageColor}`, color: 'black'}} onClick={() => setShowColorPicker2(showColorPicker => !showColorPicker)} variant="contained" color="primary">
{showColorPicker2 ? 'Close ' : 'Page Color'}
</Button>
</div>
<div className="colorPicker">
{
showColorPicker2 && (
<CirclePicker
colors={colorList}
color={pageColor}
onChange={targetColor => setPageColor(targetColor.hex)}
/>
)
}
</div>
</div>
<div className="gridThree">
<div className="lineHeight" style={{marginBottom: "1.5rem"}}>
<InputLabel id="lineHeight">Line Height</InputLabel>
<Slider style={{width: 150}}
defaultValue={30}
value={lineHeight}
aria-labelledby="discrete-slider"
valueLabelDisplay="auto"
onChange={handleLineHeight}
step={1}
min={10}
max={70}
color="primary"
/>
</div>
<div className="linesCheckbox">
<Tooltip title="Add Page Lines" placement="right" TransitionComponent={Fade} arrow>
<FormControlLabel
control={<Switch checked={line} onChange={handlePageLines} name="lines" color="primary"/>}
label="Page Lines"
/>
</Tooltip>
</div>
<div className="shadowCheckbox">
<Tooltip title="Add Shadow To Paper" placement="left" TransitionComponent={Fade} arrow>
<FormControlLabel
control={<Switch checked={shadow} onChange={handleShadow} name="shadow" color="primary"/>}
label="Scan Effect"
/>
</Tooltip>
</div>
<div className="marginCheckbox">
<Tooltip title="Insert Margin" placement="right" TransitionComponent={Fade} arrow>
<FormControlLabel
control={<Switch checked={margin} onChange={handleMargin} name="shadow" color="primary"/>}
label="Page Margin"
/>
</Tooltip>
</div>
<div className="marginTopCheckbox">
<Tooltip title="Give Top Margin" placement="right" TransitionComponent={Fade} arrow>
<FormControlLabel
control={<Switch checked={marginTop} onChange={handleMarginTop} name="shadow" color="primary"/>}
label="Top Space"
/>
</Tooltip>
</div>
</div>
</div>
<div className="output_container">
<Paper elevation={3} square={true} className="paper" id="page" style={{backgroundImage:
line? 'repeating-linear-gradient(transparent 0px, transparent 24px, #333333 25px)' : 'none', backgroundColor: `${pageColor}`,
WebkitBoxShadow: shadow ? 'inset 18px 0px 50px -7px rgba(106,110,101,1)' : 'none', MozBoxShadow: shadow ? 'inset 18px 0px 50px -7px rgba(106,110,101,1)' : 'none',
boxShadow: shadow ? 'inset 18px 0px 50px -7px rgba(106,110,101,1)' : 'none'}}>
<p className="output_text"
style={{fontFamily: `${fontFamily}`, fontSize: `${fontSize}px`, color: `${color}`,
letterSpacing: `${letterSpacing}px`, wordSpacing: `${wordSpacing}px`, lineHeight: `${lineHeight}px`, paddingTop: marginTop? '2rem' : '0',
fontWeight: `${fontWeight}`, left: margin? '2rem' : '0', borderLeft: margin? '2px solid #666666' : 'none', paddingLeft: margin? '0.5rem' : '0'}}>
{text}
</p>
</Paper>
<div className="download_button">
<Button onClick={generateJpeg} variant="contained" style={{color: 'white', backgroundColor: '#ec4c4c'}}>Download Image </Button>
</div>
</div>
</div>
</div>
)
}
Example #17
| Source File: index.js From next-qrcode with MIT License | 4 votes |
|
Index = (props) => {
const [selectedLevel, setSelectedLevel] = useState({ value: 'L', label: 'L' });
const [selectedRenderAs, setSelectedRenderAs] = useState({ value: 'canvas', label: 'Canvas' });
const [displayDarkColorPicker, setDisplayDarkColorPicker] = useState(false);
const [darkColor, setDarkColor] = useState('#010599FF');
const [displayLightColorPicker, setDisplayLightColorPicker] = useState(false);
const [lightColor, setLightColor] = useState('#FFBF60FF');
const [text, setText] = useState('https://github.com/Bunlong/react-hook-qrcode');
const [margin, setMargin] = useState(0);
const [scale, setScale] = useState(0);
const [width, setWidth] = useState(4);
const [includeOptions, setIncludeOptions] = useState(true);
const { classes } = props;
const darkStyles = reactCSS({
'default': {
color: {
width: '100%',
height: '29px',
borderRadius: '2px',
background: `${ darkColor }`,
},
swatch: {
width: '100%',
padding: '5px',
background: '#fff',
borderRadius: '1px',
boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
display: 'inline-block',
cursor: 'pointer',
},
popover: {
position: 'absolute',
zIndex: '2',
},
cover: {
position: 'fixed',
top: '0px',
right: '0px',
bottom: '0px',
left: '0px',
},
},
});
const lightStyles = reactCSS({
'default': {
color: {
width: '100%',
height: '29px',
borderRadius: '2px',
backgroundColor: `${lightColor}`,
},
swatch: {
width: '100%',
padding: '5px',
background: '#fff',
borderRadius: '1px',
boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
display: 'inline-block',
cursor: 'pointer',
},
popover: {
position: 'absolute',
zIndex: '2',
},
cover: {
position: 'fixed',
top: '0px',
right: '0px',
bottom: '0px',
left: '0px',
},
},
});
const handleClickDark = () => {
setDisplayDarkColorPicker(!displayDarkColorPicker);
}
const handleCloseDark = () => {
setDisplayDarkColorPicker(false);
}
const handleChangeDark = (color) => {
setDarkColor(color.hex);
}
const handleChangeLevel = (selectedLevel) => {
setSelectedLevel(selectedLevel);
}
const handleChangeRenderAs = (selectedRenderAs) => {
setSelectedRenderAs(selectedRenderAs);
}
const handleClickLight = () => {
setDisplayLightColorPicker(!displayLightColorPicker);
}
const handleCloseLight = () => {
setDisplayLightColorPicker(false);
}
const handleChangeLight = (color) => {
setLightColor(color.hex);
}
const [inputRef] = useQRCode({
text: text,
options: {
level: selectedLevel,
margin: margin,
scale: scale,
width: width,
color: {
dark: darkColor,
light: lightColor,
},
},
});
const handleChange = (event) => {
const name = event.target.name
if (name === 'text') {
setText(event.target.value)
} else if (name === 'margin') {
setMargin(event.target.value)
} else if (name === 'scale') {
setScale(event.target.value)
} else if (name === 'width') {
setWidth(event.target.value)
}
}
const handleChangeCheckbox = (event) => {
setIncludeOptions(event.target.checked)
}
return (
<div>
<Head
title="react-hook-qrcode"
description="React hooks for generating QR code."
keywords="react, qrcode, react-hooks, hooks, typescript, react-hook-qrcode, react-components, javascript, qrcode-generator"
/>
<Nav />
<div style={{ display: 'flex', margin: 40 }}>
<Grid container spacing={24} direction="column">
<Grid container item spacing={0} justify="center">
<Grid item lg={6} xl={6} xs={12} style={{textAlign: 'center'}}>
<Typography variant="h4" gutterBottom>
DEMO
</Typography>
<hr/>
</Grid>
</Grid>
<Grid container item spacing={0} justify="center" style={{paddingTop: 5, paddingBottom: 7}}>
<Grid item lg={6} xl={6} xs={12}>
<label>Render as:</label>
</Grid>
</Grid>
<Grid container item spacing={0} justify="center" style={{ paddingTop: 7, paddingBottom: 7}}>
<Grid item lg={6} xl={6} xs={12}>
<Select
value={selectedRenderAs}
onChange={handleChangeRenderAs}
options={renderAsOptions}
/>
</Grid>
</Grid>
<Grid container item spacing={0} justify="center" style={{paddingTop: 7, paddingBottom: 7}}>
<Grid item lg={6} xl={6} xs={12}>
<label>Text:</label>
</Grid>
</Grid>
<Grid container item spacing={0} justify="center" style={{paddingTop: 7, paddingBottom: 7}}>
<Grid item lg={6} xl={6} xs={12}>
<TextField
variant="outlined"
multiline
rows={4}
value={text}
className={classes.textField}
onChange={handleChange}
name='text'
/>
</Grid>
</Grid>
<Grid container item spacing={0} justify="center" style={{ paddingBottom: 5}}>
<Grid item lg={6} xl={6} xs={12}>
<label>Include Options:</label>
<Checkbox
defaultChecked
color="primary"
inputProps={{ 'aria-label': 'secondary checkbox' }}
onChange={handleChangeCheckbox}
/>
</Grid>
</Grid>
<Grid container item spacing={0} justify="center" className={classes.row}>
<Grid item lg={6} xl={6} xs={12}>
<fieldset className={classes.fieldset}>
<legend>Options</legend>
<Grid container item spacing={0} justify="center" style={{ paddingTop: 15, paddingLeft: 7, paddingBottom: 7, paddingRight: 7}}>
<Grid item lg={12} xl={12} xs={12}>
<label>Level:</label>
</Grid>
</Grid>
<Grid container item spacing={0} justify="center" className={classes.row}>
<Grid item lg={12} xl={12} xs={12}>
<Select
value={selectedLevel}
onChange={handleChangeLevel}
options={levelOptions}
isDisabled={!includeOptions}
/>
</Grid>
</Grid>
<Grid container item spacing={0} justify="center" className={classes.row}>
<Grid item lg={12} xl={12} xs={12}>
<label>Margin:</label>
</Grid>
</Grid>
<Grid container item spacing={0} justify="center" className={classes.row}>
<Grid item lg={12} xl={12} xs={12}>
<TextField
variant="outlined"
value={margin}
className={classes.textField}
name='margin'
onChange={handleChange}
disabled={includeOptions ? '' : 'disabled'}
type="number"
InputProps={{
className: classes.input
}}
/>
</Grid>
</Grid>
<Grid container item spacing={0} justify="center" className={classes.row}>
<Grid item lg={12} xl={12} xs={12}>
<label>Scale:</label>
</Grid>
</Grid>
<Grid container item spacing={0} justify="center" className={classes.row}>
<Grid item lg={12} xl={12} xs={12}>
<TextField
variant="outlined"
value={scale}
className={classes.textField}
name='scale'
onChange={handleChange}
disabled={includeOptions ? '' : 'disabled'}
type="number"
InputProps={{
className: classes.input
}}
/>
</Grid>
</Grid>
<Grid container item spacing={0} justify="center" className={classes.row}>
<Grid item lg={12} xl={12} xs={12}>
<label>Width:</label>
</Grid>
</Grid>
<Grid container item spacing={0} justify="center" className={classes.row}>
<Grid item lg={12} xl={12} xs={12}>
<TextField
variant="outlined"
value={width}
className={classes.textField}
name='width'
onChange={handleChange}
disabled={includeOptions ? '' : 'disabled'}
type="number"
InputProps={{
className: classes.input
}}
/>
</Grid>
</Grid>
<Grid container item spacing={0} justify="center" className={classes.row}>
<Grid item lg={12} xl={12} xs={12}>
<label>Dark color:</label>
</Grid>
</Grid>
<Grid container item spacing={0} justify="center" className={classes.row}>
<Grid item lg={12} xl={12} xs={12}>
<div style={ darkStyles.swatch } onClick={ handleClickDark }>
<div style={ darkStyles.color } />
</div>
{ displayDarkColorPicker ? <div style={ darkStyles.popover }>
<div style={ darkStyles.cover } onClick={ handleCloseDark }/>
<SketchPicker color={ darkColor } onChange={ handleChangeDark } />
</div> : null }
</Grid>
</Grid>
<Grid container item spacing={0} justify="center" className={classes.row}>
<Grid item lg={12} xl={12} xs={12}>
<label>Light color:</label>
</Grid>
</Grid>
<Grid container item spacing={0} justify="center" className={classes.row}>
<Grid item lg={12} xl={12} xs={12}>
<div style={ lightStyles.swatch } onClick={ handleClickLight }>
<div style={ lightStyles.color } />
</div>
{ displayLightColorPicker ? <div style={ lightStyles.popover }>
<div style={ lightStyles.cover } onClick={ handleCloseLight }/>
<SketchPicker color={ lightColor } onChange={ handleChangeLight } />
</div> : null }
</Grid>
</Grid>
</fieldset>
</Grid>
<Grid container item spacing={0} justify="center" style={{paddingTop: 50}}>
<Grid item lg={6} xl={6} xs={12} style={{textAlign: 'center'}}>
{
selectedRenderAs.value === 'canvas' ?
<canvas ref={inputRef} /> :
<img ref={inputRef} />
}
</Grid>
</Grid>
<Grid container item spacing={0} justify="center" style={{paddingTop: 40}}>
<Grid item lg={6} xl={6} xs={12} style={{textAlign: 'center'}}>
<TextField
variant="outlined"
multiline
rows={22}
disabled
className={classes.textField}
value={`import React from 'react';
import { useQRCode } from 'react-hook-qrcode';
function App() {
const [inputRef] = useQRCode({
text: '${text}',
${
includeOptions ?
`options: {
level: '${selectedLevel.value}',
margin: ${margin},
scale: ${scale},
width: ${width},
color: {
dark: '${darkColor}',
light: '${lightColor}',
},
},` : ''
}
});
return <${selectedRenderAs.value} ref={inputRef} />;
}
export default App;`}
/>
</Grid>
</Grid>
</Grid>
</Grid>
</div>
<footer>
<div>
react-hook-qrcode by <a href="https://github.com/Bunlong" target="_black">Bunlong</a>
</div>
</footer>
</div>
);
}
Example #18
| Source File: ProjectEditor.jsx From portfolyo-mern with MIT License | 4 votes |
|
ProjectEditor = () => {
const projectcustom = useSelector(state => state.projectcustom);
const classes = useStyles();
const dispatch = useDispatch();
const projectbody = useSelector(state => state.projectbody);
const currenttabpro = useSelector(state => state.currenttabpro);
const projectlayout = useSelector(state => state.projectlayout);
const handleChange = (e, newValue) => {
dispatch({ type: "PS_currenttabpro", payload: newValue });
}
// const { createSliderWithTooltip } = Slider;
// const Range = createSliderWithTooltip(Slider.Range);
// const { Handle } = Slider;
// const handle = e => {
// // console.log(e.target.value);
// console.log(e)
// console.log(projectbody);
// // return (
// // <SliderTooltip
// // prefixCls="rc-slider-tooltip"
// // overlay={`${value} %`}
// // visible={dragging}
// // placement="top"
// // key={index}
// // >
// // <Handle value={value} {...restProps} />
// // </SliderTooltip>
// // );
// };
// console.log(projectbody);
return (
<>
<Paper square style={{ width: "max-content", margin: "auto" }}>
<Tabs
value={currenttabpro}
indicatorColor="primary"
textColor="primary"
onChange={handleChange}
>
<Tab label="Backgrounds" />
<Tab label="Layouts" />
<Tab label="AddProject" />
<Tab label="EditHeader" />
<Tab label="EditProjects" />
<Tab label="Edit ALL Projects" />
</Tabs>
</Paper>
{
(currenttabpro === 0) ? (
<>
<h3 className="text-center mt-4">Animated Backgrounds</h3>
<div style={{ display: "flex", justifyContent: "space-around", flexWrap: "wrap" }}>
<div className="mt-4" style={{ width: "max-content" }}>
<Button variant="outlined" color="primary"
onClick={() => { dispatch({ type: "PS_projectbody", payload: { ...projectbody, background: 0 } }) }}
>Background1</Button>
</div>
<div className="mt-4" style={{ width: "max-content" }}>
<Button variant="outlined" color="primary"
onClick={() => { dispatch({ type: "PS_projectbody", payload: { ...projectbody, background: 1 } }) }}
>Background2</Button>
</div>
<div className="mt-4" style={{ width: "max-content" }}
onClick={() => { dispatch({ type: "PS_projectbody", payload: { ...projectbody, background: 2 } }) }}
>
<Button variant="outlined" color="primary" >Background3</Button>
</div>
<div className="mt-4" style={{ width: "max-content" }}
onClick={() => { dispatch({ type: "PS_projectbody", payload: { ...projectbody, background: 3 } }) }}
>
<Button variant="outlined" color="primary" >Background4</Button>
</div>
<div className="mt-4" style={{ width: "max-content" }}
onClick={() => { dispatch({ type: "PS_projectbody", payload: { ...projectbody, background: 4 } }) }}
>
<Button variant="outlined" color="primary" >None</Button>
</div>
</div>
<div>
<h3 className="text-center my-5">Background Shadow</h3>
<div style={{ boxShadow: projectbody.shadow }} >
<ShadowPicker
className="disabledrag"
value={projectbody.shadow}
onChange={(value) => {
dispatch({ type: 'PS_projectbody', payload: { ...projectbody, shadow: value } });
}}
></ShadowPicker>
</div>
</div>
<div className="disabledrag my-5" style={{ width: "100%" }}>
<h3 className="text-center py-4">Border Radius</h3>
<Slider min={0} max={100} defaultValue={projectbody.borderRadius} onChange={(e) => {
dispatch({ type: "PS_projectbody", payload: { ...projectbody, borderRadius: e } })
}} />
</div>
<div>
<h3 className="text-center my-4">Background Color</h3>
<div className="mx-auto" style={{ width: "max-content" }}>
<span
id="SketchPicker"
className="disabledrag"
style={{ cursor: "pointer !important" }}
>
<SketchPicker
color={projectbody.backgroundColor}
onChange={(color) => {
dispatch({ type: "PS_projectbody", payload: { ...projectbody, backgroundColor: color.hex } })
}
}
style={{ cursor: "pointer" }} />
</span>
</div>
</div>
</>
) : (currenttabpro === 2) ? (
<AddProject />
) : (currenttabpro === 3) ? (
<EditHeader />
) : (currenttabpro === 4) ? (
<EditProjectCard />
) : (currenttabpro === 5) ? (
<EditAllProjectCard />
) : (currenttabpro === 1) ? (
<>
<h3 className="text-center mt-5">{`Current Layout ${projectlayout + 1}`}</h3>
<div className={classes.root} style={{ marginTop: "4rem", marginBottom: "4rem" }}>
{images.map((image) => (
<ButtonBase
focusRipple
key={image.title}
className={classes.image}
focusVisibleClassName={classes.focusVisible}
style={{
width: image.width,
margin: "auto",
marginBottom: "4rem"
}}
onClick={
() => {
dispatch({ type: "PS_projectlayout", payload: image.value });
if (image.value === 4 || image.value === 5 || image.value === 6) {
dispatch({ type: "PS_projectcustom", payload: { ...projectcustom, bgtag: "#eee", colorTc: "#311F1F" } });
}
else {
dispatch({ type: "PS_projectcustom", payload: { ...projectcustom, bgtag: "#fff", colorTc: "#03bfcb" } });
}
}
}
>
<span
className={classes.imageSrc}
style={{
backgroundImage: `url(${image.url})`,
}}
/>
<span className={classes.imageBackdrop} />
<span className={classes.imageButton}>
<Typography
component="span"
variant="subtitle1"
color="inherit"
className={classes.imageTitle}
>
{image.title}
<span className={classes.imageMarked} />
</Typography>
</span>
</ButtonBase>
))}
</div>
</>
) : ""
}
</>
)
}
Example #19
| Source File: EditHeader.jsx From portfolyo-mern with MIT License | 4 votes |
|
EditHeader = () => {
const classes = useStyles();
const projectheader = useSelector((state) => state.projectheader);
const dispatch = useDispatch();
const [
projectBackgroundTransitionStyle,
setprojectBackgroundTransitionStyle,
] = useState(projectheader.animation);
const [projectTransitionSelected, setprojectTransitionSelected] = useState([
"projectTrasitionSelected",
"",
"",
"",
]);
const projectBackgroundTransitioneHandler = (event) => {
setprojectBackgroundTransitionStyle(event.target.value);
};
const projectBackgroundTransitionStyleHandler = (index, event) => {
if (index === 0) {
setprojectBackgroundTransitionStyle("none");
dispatch({
type: "PS_projectname",
payload: {
...projectheader,
animation: "none",
},
});
return;
}
const temp = ["", "", "", ""];
temp[index] = "projectTrasitionSelected";
setprojectTransitionSelected(temp);
setprojectBackgroundTransitionStyle(event.target.value);
dispatch({
type: "PS_projectname",
payload: {
...projectheader,
animation: event.target.value,
},
});
};
return (
<div className="EditHeaderPro my-5">
<h3 className="text-center mt-5">Text and Font's</h3>
<div className="mx-auto my-5" style={{display:"block",width:"max-content",zIndex:"99999"}}>
<Button variant="contained" color="primary"
onClick={()=>{
// console.log(document.querySelector("#aboutSectionTitleTextChange").value);
dispatch({type:"PS_projectname",payload:{
...projectheader,
name:document.querySelector("#PS_projectnamename").value,
description:document.querySelector("#PS_projectnamedescription").value,
moreprojects:document.querySelector("#PS_projectmore").value
}
});
// dispatch({type:"aboutSectionIntroTextChange",payload:document.querySelector("#aboutSectionIntroTextChange").value});
// dispatch({type:"aboutSectionPassageTextChange",payload:document.querySelector("#aboutSectionPassageTextChange").value});
// dispatch({type:"aboutSectionBasicInfoTitleTextChange",payload:document.querySelector("#aboutSectionBasicInfoTitleTextChange").value});
// dispatch({type:"aboutSectionBasicInfoValuesTextAgeChange",payload:document.querySelector("#aboutSectionBasicInfoValuesTextAgeChange").value});
// dispatch({type:"aboutSectionBasicInfoValuesTextEmailChange",payload:document.querySelector("#aboutSectionBasicInfoValuesTextEmailChange").value});
// dispatch({type:"aboutSectionBasicInfoValuesTextPhoneChange",payload:document.querySelector("#aboutSectionBasicInfoValuesTextPhoneChange").value});
// dispatch({type:"aboutSectionBasicInfoValuesTextAddressChange",payload:document.querySelector("#aboutSectionBasicInfoValuesTextAddressChange").value});
// dispatch({type:"aboutSectionBasicInfoValuesTextLanguagesChange",payload:document.querySelector("#aboutSectionBasicInfoValuesTextLanguagesChange").value});
// dispatch({type:"aboutSectionSocialMediaTitleTextChange",payload:document.querySelector("#aboutSectionSocialMediaTitleTextChange").value});
// dispatch({type:"aboutSectionSocialMediaInstagramChange",payload:document.querySelector("#aboutSectionSocialMediaInstagramChange").value});
// dispatch({type:"aboutSectionSocialMediaGmailChange",payload:document.querySelector("#aboutSectionSocialMediaGmailChange").value});
// dispatch({type:"aboutSectionSocialMediaLinkedInChange",payload:document.querySelector("#aboutSectionSocialMediaLinkedInChange").value});
// dispatch({type:"aboutSectionSocialMediaGitHubChange",payload:document.querySelector("#aboutSectionSocialMediaGitHubChange").value});
// dispatch({type:"aboutSectionSocialMediaInstagramChange",payload:document.querySelector("#aboutSectionSocialMediaInstagramChange").value});
}}
>Apply text</Button>
</div>
<div
style={{
display: "flex",
flexWrap: "wrap",
justifyContent: "space-around",
}}
>
<div style={{ width: "max-content" }}>
<TextField
className="disabledrag"
id="PS_projectnamename"
label="ProjectTitle"
variant="outlined"
fullWidth
required
defaultValue={projectheader.name}
// onChange={(e) => {
// // console.log(e.target.value, projectheader)
// dispatch({
// type: "PS_projectname",
// payload: {
// ...projectheader,
// name: e.target.value,
// },
// });
// }}
/>
</div>
<div className=" disabledrag">
<FontPicker
pickerId="1"
apiKey="AIzaSyA4zVMDlSV-eRzbGR5BFqvbHqz3zV-OLd0"
activeFontFamily={projectheader.fontStyle}
onChange={(nextFont) => {
// console.log(nextFont, projectheader)
dispatch({
type: "PS_projectname",
payload: {
...projectheader,
fontStyle: nextFont.family,
},
});
}}
/>
</div>
</div>
<div
className="my-5"
style={{
display: "flex",
flexWrap: "wrap",
justifyContent: "space-around",
}}
>
<div style={{ width: "max-content" }}>
<TextField
className="disabledrag"
id="PS_projectnamedescription"
label="ProjectTitle"
variant="outlined"
fullWidth
required
defaultValue={projectheader.description}
// onChange={(e) => {
// // console.log(e.target.value, projectheader)
// dispatch({
// type: "PS_projectname",
// payload: {
// ...projectheader,
// description: e.target.value,
// },
// });
// }}
/>
</div>
<div className=" disabledrag">
<FontPicker
pickerId="2"
apiKey="AIzaSyA4zVMDlSV-eRzbGR5BFqvbHqz3zV-OLd0"
activeFontFamily={projectheader.fontStyle}
onChange={(nextFont) => {
// console.log(nextFont, projectheader)
dispatch({
type: "PS_projectname",
payload: {
...projectheader,
fontStylep: nextFont.family,
},
});
}}
/>
</div>
</div>
<div
style={{
display: "flex",
flexWrap: "wrap",
justifyContent: "space-around",
}}
>
<div style={{ width: "max-content" }}>
<TextField
className="disabledrag"
id="PS_projectmore"
label="More Projects Link"
variant="outlined"
fullWidth
required
defaultValue={projectheader.moreprojects}
// onChange={(e) => {
// // console.log(e.target.value, projectheader)
// dispatch({
// type: "PS_projectname",
// payload: {
// ...projectheader,
// name: e.target.value,
// },
// });
// }}
/>
</div>
</div>
<h3 className="text-center my-5">Font Color's</h3>
<div
className="my-5"
style={{
display: "flex",
flexWrap: "wrap",
justifyContent: "space-around",
}}
>
<div className="mt-4" style={{ width: "max-content" }}>
<span
id="SketchPicker"
className="disabledrag"
style={{ cursor: "pointer !important" }}
>
<p className="text-center text-uppercase">
title color
</p>
<SketchPicker
color={projectheader.color}
onChange={(color) => {
// console.log(color);
dispatch({
type: "PS_projectname",
payload: {
...projectheader,
color: color.hex,
},
});
}}
style={{ cursor: "pointer" }}
/>
</span>
</div>
<div className="mt-4" style={{ width: "max-content" }}>
<span
id="SketchPicker"
className="disabledrag"
style={{ cursor: "pointer !important" }}
>
<p className="text-center text-uppercase">
description color
</p>
<SketchPicker
color={projectheader.colorp}
onChange={(color) => {
// console.log(color);
dispatch({
type: "PS_projectname",
payload: {
...projectheader,
colorp: color.hex,
},
});
}}
style={{ cursor: "pointer" }}
/>
</span>
</div>
<div className="mt-4" style={{ width: "max-content" }}>
<span
id="SketchPicker"
className="disabledrag"
style={{ cursor: "pointer !important" }}
>
<p className="text-center text-uppercase">
buttontext color
</p>
<SketchPicker
color={projectheader.colorbt}
onChange={(color) => {
// console.log(color);
dispatch({
type: "PS_projectname",
payload: {
...projectheader,
colorbt: color.hex,
},
});
}}
style={{ cursor: "pointer" }}
/>
</span>
</div>
<div className="mt-4" style={{ width: "max-content" }}>
<span
id="SketchPicker"
className="disabledrag"
style={{ cursor: "pointer !important" }}
>
<p className="text-center text-uppercase">
button bgcolor
</p>
<SketchPicker
color={projectheader.colorbbg}
onChange={(color) => {
// console.log(color);
dispatch({
type: "PS_projectname",
payload: {
...projectheader,
colorbbg: color.hex,
},
});
}}
style={{ cursor: "pointer" }}
/>
</span>
</div>
<div className="mt-4" style={{ width: "max-content" }}>
<span
id="SketchPicker"
className="disabledrag"
style={{ cursor: "pointer !important" }}
>
<p className="text-center text-uppercase">
ArrowIcon color
</p>
<SketchPicker
color={projectheader.colora}
onChange={(color) => {
// console.log(color);
dispatch({
type: "PS_projectname",
payload: {
...projectheader,
colora: color.hex,
},
});
}}
style={{ cursor: "pointer" }}
/>
</span>
</div>
<div className="mt-4" style={{ width: "max-content" }}>
<span
id="SketchPicker"
className="disabledrag"
style={{ cursor: "pointer !important" }}
>
<p className="text-center text-uppercase">
ArrowIcon bgcolor
</p>
<SketchPicker
color={projectheader.colorabg}
onChange={(color) => {
// console.log(color);
dispatch({
type: "PS_projectname",
payload: {
...projectheader,
colorabg: color.hex,
},
});
}}
style={{ cursor: "pointer" }}
/>
</span>
</div>
</div>
<div className="my-5">
<h4 className="text-center">Animation Type</h4>
<div className="skillsSectionTransitionEditor">
<div
className={`skillsSectionTransitionNone ${projectTransitionSelected[0]}`}
onClick={() => {
projectBackgroundTransitionStyleHandler(0, null);
}}
>
<p
style={{
display: "block",
margin: "auto",
}}
>
None
</p>
</div>
<div
className={`skillsSectionTransitions ${projectTransitionSelected[1]}`}
onClick={(event) => {
projectBackgroundTransitionStyleHandler(1, event);
}}
>
<img src={transitionFade} alt="transitionFade"></img>
<FormControl
variant="outlined"
className={`disabledrag ${classes.formControl}`}
>
<InputLabel htmlFor="outlined-age-native-simple">
Fade
</InputLabel>
<Select
native
value={projectBackgroundTransitionStyle}
onChange={projectBackgroundTransitioneHandler}
label="Age"
inputProps={{
name: "age",
id: "outlined-age-native-simple",
}}
>
<option value={"fade-up"}>Fade Up</option>
<option value={"fade-down"}>Fade down</option>
<option value={"fade-right"}>Fade right</option>
<option value={"fade-left"}>Fade left</option>
<option value={"fade-up-right"}>
Fade Up Right
</option>
<option value={"fade-up-left"}>
Fade Up left
</option>
<option value={"fade-down-right"}>
Fade Down Right
</option>
<option value={"fade-down-left"}>
Fade Down Left
</option>
</Select>
</FormControl>
</div>
<div
className={`skillsSectionTransitions ${projectTransitionSelected[2]}`}
onClick={(event) => {
projectBackgroundTransitionStyleHandler(2, event);
}}
>
<img src={transitionFlip} alt="transitionFlip"></img>
<FormControl
variant="outlined"
className={`disabledrag ${classes.formControl}`}
>
<InputLabel htmlFor="outlined-age-native-simple">
Flip
</InputLabel>
<Select
native
value={projectBackgroundTransitionStyle}
onChange={projectBackgroundTransitioneHandler}
label="Age"
inputProps={{
name: "age",
id: "outlined-age-native-simple",
}}
>
<option value={"flip-left"}>Flip Left</option>
<option value={"flip-right"}>Flip Right</option>
<option value={"flip-up"}>Flip Up</option>
<option value={"flip-down"}>Flip Down</option>
</Select>
</FormControl>
</div>
<div
className={`skillsSectionTransitions ${projectTransitionSelected[3]}`}
onClick={(event) => {
projectBackgroundTransitionStyleHandler(3, event);
}}
>
<img src={transitionZoom} alt="transitionZoom"></img>
<FormControl
variant="outlined"
className={`disabledrag ${classes.formControl}`}
>
<InputLabel htmlFor="outlined-age-native-simple">
Zoom
</InputLabel>
<Select
native
value={projectBackgroundTransitionStyle}
onChange={projectBackgroundTransitioneHandler}
label="Age"
inputProps={{
name: "age",
id: "outlined-age-native-simple",
}}
>
<option value={"zoom-in"}>Zoom In</option>
<option value={"zoom-in-up"}>Zoom In Up</option>
<option value={"zoom-in-down"}>
Zoom In Down
</option>
<option value={"zoom-in-left"}>
Zoom In Left
</option>
<option value={"zoom-in-right"}>
In Right
</option>
<option value={"zoom-out"}>Zoom Out</option>
<option value={"zoom-out-up"}>
Zoom Out Up
</option>
<option value={"zoom-out-down"}>
Zoom Out Down
</option>
<option value={"zoom-out-right"}>
Zoom Out Right
</option>
<option value={"zoom-out-left"}>
Zoom Out Left
</option>
</Select>
</FormControl>
</div>
</div>
{/* <FormControl component="fieldset">
<FormLabel component="legend"></FormLabel>
<RadioGroup
style={{
display: "flex",
flexWrap: "wrap",
flexDirection: "row",
justifyContent: "space-between",
}}
aria-label="select-animation-type"
name="gender1"
value={projectheader.animation}
onChange={(e) => {
dispatch({
type: "PS_projectname",
payload: {
...projectheader,
animation: e.target.value,
},
});
}}
>
<FormControlLabel
value="fade-top"
control={<Radio />}
label="fade-top"
/>
<FormControlLabel
value="fade-bottom"
control={<Radio />}
label="fade-bottom"
/>
<FormControlLabel
value="fade-right"
control={<Radio />}
label="fade-right"
/>
<FormControlLabel
value="fade-left"
control={<Radio />}
label="fade-left"
/>
<FormControlLabel
value="fade-up"
control={<Radio />}
label="fade-up"
/>
<FormControlLabel
value="fade-dowm"
control={<Radio />}
label="fade-down"
/>
<FormControlLabel
value="fade-up-right"
control={<Radio />}
label="fade-up-right"
/>
<FormControlLabel
value="fade-up-left"
control={<Radio />}
label="fade-up-left"
/>
<FormControlLabel
value="fade-dowm-right"
control={<Radio />}
label="fade-dowm-right"
/>
<FormControlLabel
value="fade-dowm-left"
control={<Radio />}
label="fade-dowm-left"
/>
<FormControlLabel
value="flip-left"
control={<Radio />}
label="flip-left"
/>
<FormControlLabel
value="flip-right"
control={<Radio />}
label="flip-right"
/>
<FormControlLabel
value="flip-up"
control={<Radio />}
label="flip-up"
/>
<FormControlLabel
value="flip-down"
control={<Radio />}
label="flip-down"
/>
<FormControlLabel
value="zoom-in"
control={<Radio />}
label="zoom-in"
/>
<FormControlLabel
value="zoom-in-up"
control={<Radio />}
label="zoom-in-up"
/>
<FormControlLabel
value="zoom-in-down"
control={<Radio />}
label="zoom-in-down"
/>
<FormControlLabel
value="zoom-in-right"
control={<Radio />}
label="zoom-in-right"
/>
<FormControlLabel
value="zoom-in-left"
control={<Radio />}
label="zoom-in-left"
/>
<FormControlLabel
value="zoom-out"
control={<Radio />}
label="zoom-out"
/>
<FormControlLabel
value="zoom-out-up"
control={<Radio />}
label="zoom-out-up"
/>
<FormControlLabel
value="zoom-out-down"
control={<Radio />}
label="zoom-out-down"
/>
<FormControlLabel
value="zoom-out-right"
control={<Radio />}
label="zoom-out-right"
/>
<FormControlLabel
value="zoom-out-left"
control={<Radio />}
label="zoom-out-left"
/>
<FormControlLabel
value=""
control={<Radio />}
label="none"
/>
</RadioGroup>
</FormControl> */}
</div>
{/* <div className="my-4">
<h4 className="text-center">Animation Duration</h4>
<h4
className="text-center my-3 text-muted"
style={{ fontSize: "1.5rem" }}
>
0s--0.3s--0.6s--0.9s--1.2s--1.5s--1.8s--2.1s--2.4s--2.7s--3s
</h4>
<input
type="range"
data-toggle="tooltip"
data-placement="top"
class="custom-range disabledrag"
onChange={(e) => {
dispatch({
type: "PS_projectname",
payload: {
...projectheader,
duration: e.target.value,
},
});
}}
min="0"
max="3"
step="0.3"
value={projectheader.duration}
id="customRange3"
></input>
</div> */}
<div className="skillBarEditor">
<div className="skillLevelBar">
<div className={classes.margin} />
<Typography gutterBottom>
Animation Duration :{projectheader.duration}s
</Typography>
<div className="skillLevelBarEditor">
<p>0s</p>
<PrettoSlider
valueLabelDisplay="auto"
aria-label="Background Transition Time"
min={0}
max={3}
step={0.3}
value={projectheader.duration}
className={`disabledrag`}
onChange={(event, value) => {
dispatch({
type: "PS_projectname",
payload: {
...projectheader,
duration: value,
},
});
}}
/>
<p>3s</p>
</div>
</div>
</div>
<br/>
<br/>
{/* <div className="my-4">
<h4 className="text-center">Animation Delay</h4>
<h4
className="text-center my-3 text-muted"
style={{ fontSize: "1.5rem" }}
>
0s--0.3s--0.6s--0.9s--1.2s--1.5s--1.8s--2.1s--2.4s--2.7s--3s
</h4>
<input
type="range"
data-toggle="tooltip"
data-placement="top"
class="custom-range disabledrag"
onChange={(e) => {
dispatch({
type: "PS_projectname",
payload: {
...projectheader,
delay: e.target.value,
},
});
}}
min="0"
max="3"
step="0.3"
value={projectheader.delay}
id="customRange3"
></input>
</div> */}
<div className="skillBarEditor">
<div className="skillLevelBar">
<div className={classes.margin} />
<Typography gutterBottom>
Animation Delay :{projectheader.delay}s
</Typography>
<div className="skillLevelBarEditor">
<p>0s</p>
<PrettoSlider
valueLabelDisplay="auto"
aria-label="Background Transition Delay"
min={0}
max={3}
step={0.3}
value={projectheader.delay}
className={`disabledrag`}
onChange={(event, value) => {
dispatch({
type: "PS_projectname",
payload: {
...projectheader,
delay: value,
},
});
}}
/>
<p>3s</p>
</div>
</div>
</div>
</div>
);
}
Example #20
| Source File: EditAllProjectCard.jsx From portfolyo-mern with MIT License | 4 votes |
|
EditAllProjectCard = () => {
// const classes = useStyles();
const projectcard = useSelector(state => state.projectcard);
const projectcustom = useSelector(state => state.projectcustom);
const editallproject = useSelector(state => state.editallproject);
const editproject = useSelector(state => state.editproject);
const [vis,setvis] = React.useState(false);
const dispatch = useDispatch();
const [
projectBackgroundTransitionStyle,
setprojectBackgroundTransitionStyle,
] = useState(editallproject.animation);
const [projectTransitionSelected, setprojectTransitionSelected] = useState([
"projectTrasitionSelected",
"",
"",
"",
]);
const projectBackgroundTransitioneHandler = (event) => {
setprojectBackgroundTransitionStyle(event.target.value);
// console.log(event.target.value);
let newProjectCard = projectcard.map(ele=>{
return {
...ele,
animation:event.target.value
}
});
dispatch({ type: "PS_projectcard", payload: newProjectCard });
dispatch({"type":"PS_editallproject",payload:{...editallproject,animation:event.target.value}});
};
const projectBackgroundTransitionStyleHandler = (index, event) => {
if (index === 0) {
setprojectBackgroundTransitionStyle("none");
dispatch({
type: "PS_editproject",
payload: { ...editproject, animation: "none" },
});
return;
}
const temp = ["", "", "", ""];
temp[index] = "projectTrasitionSelected";
setprojectTransitionSelected(temp);
setprojectBackgroundTransitionStyle(event.target.value);
let newProjectCard = projectcard.map(ele=>{
return {
...ele,
animation:event.target.value
}
});
dispatch({ type: "PS_projectcard", payload: newProjectCard });
dispatch({"type":"PS_editallproject",payload:{...editallproject,animation:event.target.value}});
};
const handleChange = (e) => {
dispatch({"type":"PS_editallproject",payload:{...editallproject,animation:e.target.value}});
}
const ApplyToAll = () => {
let arr = [...projectcard];
for(var i=0;i<arr.length;i++){
arr[i].animation=editallproject["animation"];
arr[i].delay=editallproject["delay"];
arr[i].duration=editallproject["duration"];
}
dispatch({"type":"PS_projectcard",payload:[...arr]});
setvis(true)
}
return (
<div>
<h3 className="text-center my-5">Text Styles</h3>
<div className="mb-5" style={{ display: "flex", justifyContent: "space-around", flexWrap: "wrap" }}>
<div className="" style={{ width: "max-content" }}>
<p className="text-center">Title FontStyle</p>
<div className="disabledrag">
<FontPicker
pickerId="1"
className="disabledrag"
apiKey="AIzaSyA4zVMDlSV-eRzbGR5BFqvbHqz3zV-OLd0"
activeFontFamily={projectcustom.fontFamilyN}
onChange={(nextFont) => {
dispatch({ type: "PS_projectcustom", payload: { ...projectcustom, fontFamilyN: nextFont.family } })
}
}
/>
</div>
</div>
<div className="" style={{ width: "max-content" }}>
<p className="text-center">About FontStyle</p>
<div className="disabledrag">
<FontPicker
pickerId="2"
className="disabledrag"
apiKey="AIzaSyA4zVMDlSV-eRzbGR5BFqvbHqz3zV-OLd0"
activeFontFamily={projectcustom.fontFamilyA}
onChange={(nextFont) => {
dispatch({ type: "PS_projectcustom", payload: { ...projectcustom, fontFamilyA: nextFont.family } })
}
}
/>
</div>
</div>
<div className="" style={{ width: "max-content" }}>
<p className="text-center">TechHead Font</p>
<div className="disabledrag">
<FontPicker
pickerId="3"
className="disabledrag"
apiKey="AIzaSyA4zVMDlSV-eRzbGR5BFqvbHqz3zV-OLd0"
activeFontFamily={projectcustom.fontFamilyN}
onChange={(nextFont) => {
dispatch({ type: "PS_projectcustom", payload: { ...projectcustom, fontFamilyT: nextFont.family } })
}
}
/>
</div>
</div>
</div>
<h3 className="text-center my-5">Colors and Backgrounds</h3>
<div className="" style={{ display: "flex", justifyContent: "space-around", flexWrap: "wrap" }}>
<div style={{ marginTop: "1.5rem", width: "max-content" }}>
<h4 className="text-center">Title Color</h4>
<span
id="SketchPicker"
className="disabledrag"
style={{ cursor: "pointer !important" }}
>
<SketchPicker
color={projectcustom.colorN}
onChange={(color) => dispatch({ type: "PS_projectcustom", payload: { ...projectcustom, colorN: color.hex } })} style={{ cursor: "pointer" }} />
</span>
</div>
<div style={{ marginTop: "1.5rem", width: "max-content" }}>
<h4 className="text-center">About Color</h4>
<span
id="SketchPicker"
className="disabledrag"
style={{ cursor: "pointer !important" }}
>
<SketchPicker
color={projectcustom.colorA}
onChange={(color) => dispatch({ type: "PS_projectcustom", payload: { ...projectcustom, colorA: color.hex } })} style={{ cursor: "pointer" }} />
</span>
</div>
<div style={{ marginTop: "1.5rem", width: "max-content" }}>
<h4 className="text-center">Button Color</h4>
<span
id="SketchPicker"
className="disabledrag"
style={{ cursor: "pointer !important" }}
>
<SketchPicker
color={projectcustom.colorBt}
onChange={(color) => dispatch({ type: "PS_projectcustom", payload: { ...projectcustom, colorBt: color.hex } })} style={{ cursor: "pointer" }} />
</span>
</div>
<div style={{ marginTop: "1.5rem", width: "max-content" }}>
<h4 className="text-center">TechHead Color</h4>
<span
id="SketchPicker"
className="disabledrag"
style={{ cursor: "pointer !important" }}
>
<SketchPicker
color={projectcustom.colorTh}
onChange={(color) => dispatch({ type: "PS_projectcustom", payload: { ...projectcustom, colorTh: color.hex } })} style={{ cursor: "pointer" }} />
</span>
</div>
<div style={{ marginTop: "1.5rem", width: "max-content" }}>
<h4 className="text-center">Tech's Used Color</h4>
<span
id="SketchPicker"
className="disabledrag"
style={{ cursor: "pointer !important" }}
>
<SketchPicker
color={projectcustom.colorTc}
onChange={(color) => dispatch({ type: "PS_projectcustom", payload: { ...projectcustom, colorTc: color.hex } })} style={{ cursor: "pointer" }} />
</span>
</div>
<div style={{ marginTop: "1.5rem", width: "max-content" }}>
<h4 className="text-center">Project BgColor</h4>
<span
id="SketchPicker"
className="disabledrag"
style={{ cursor: "pointer !important" }}
>
<SketchPicker
color={projectcustom.bgcolor}
onChange={(color) => dispatch({ type: "PS_projectcustom", payload: { ...projectcustom, bgcolor: color.hex } })} style={{ cursor: "pointer" }} />
</span>
</div>
<div style={{ marginTop: "1.5rem", width: "max-content" }}>
<h4 className="text-center">Tags BgColor</h4>
<span
id="SketchPicker"
className="disabledrag"
style={{ cursor: "pointer !important" }}
>
<SketchPicker
color={projectcustom.bgtag}
onChange={(color) => dispatch({ type: "PS_projectcustom", payload: { ...projectcustom, bgtag: color.hex } })} style={{ cursor: "pointer" }} />
</span>
</div>
</div>
{/* <div>
<h3 className="text-center my-4">Background Color</h3>
<div className="mx-auto" style={{ width: "max-content" }}>
<span
id="SketchPicker"
className="disabledrag"
style={{ cursor: "pointer !important" }}
>
<SketchPicker
color={projectbody.backgroundColor}
onChange={(color) => {
console.log(color); dispatch({ type: "PS_projectbody", payload: { ...projectbody, backgroundColor: color.hex } })
}
}
style={{ cursor: "pointer" }} />
</span>
</div>
</div> */}
<div>
<h3 className="text-center my-5">Background Shadow</h3>
<div style={{ boxShadow: projectcustom.shadow }} >
<ShadowPicker
className="disabledrag"
value={projectcustom.shadow}
onChange={(value) => {
// console.log(value);
dispatch({ type: 'PS_projectcustom', payload: { ...projectcustom, shadow: value } });
}}
></ShadowPicker>
</div>
</div>
<div className="disabledrag my-5" style={{ width: "100%" }}>
<h3 className="text-center py-4">Border Radius</h3>
<Slider min={0} max={100} defaultValue={projectcustom.borderRadius} onChange={(e) => {
dispatch({ type: "PS_projectcustom", payload: { ...projectcustom, borderRadius: e } })
}} />
</div>
<h4 className="text-center text-uppercase my-5" style={{ wordSpacing: "0.5rem" }}>Changes Will Apply to All Cards</h4>
<div className="my-5">
<h4 className="text-center">Animation Type</h4>
<div className="skillsSectionTransitionEditor">
<div
className={`skillsSectionTransitionNone ${projectTransitionSelected[0]}`}
onClick={() => {
projectBackgroundTransitionStyleHandler(
0,
null
);
}}
>
<p
style={{
display: "block",
margin: "auto",
}}
>
None
</p>
</div>
<div
className={`skillsSectionTransitions ${projectTransitionSelected[1]}`}
onClick={(event) => {
projectBackgroundTransitionStyleHandler(
1,
event
);
}}
>
<img
src={transitionFade}
alt="transitionFade"
></img>
<FormControl
variant="outlined"
className={`disabledrag `}
>
<InputLabel htmlFor="outlined-age-native-simple">
Fade
</InputLabel>
<Select
native
value={projectBackgroundTransitionStyle}
onChange={
projectBackgroundTransitioneHandler
}
label="Age"
inputProps={{
name: "age",
id: "outlined-age-native-simple",
}}
>
<option value={"fade-up"}>Fade Up</option>
<option value={"fade-down"}>
Fade down
</option>
<option value={"fade-right"}>
Fade right
</option>
<option value={"fade-left"}>
Fade left
</option>
<option value={"fade-up-right"}>
Fade Up Right
</option>
<option value={"fade-up-left"}>
Fade Up left
</option>
<option value={"fade-down-right"}>
Fade Down Right
</option>
<option value={"fade-down-left"}>
Fade Down Left
</option>
</Select>
</FormControl>
</div>
<div
className={`skillsSectionTransitions ${projectTransitionSelected[2]}`}
onClick={(event) => {
projectBackgroundTransitionStyleHandler(
2,
event
);
}}
>
<img
src={transitionFlip}
alt="transitionFlip"
></img>
<FormControl
variant="outlined"
className={`disabledrag `}
>
<InputLabel htmlFor="outlined-age-native-simple">
Flip
</InputLabel>
<Select
native
value={projectBackgroundTransitionStyle}
onChange={
projectBackgroundTransitioneHandler
}
label="Age"
inputProps={{
name: "age",
id: "outlined-age-native-simple",
}}
>
<option value={"flip-left"}>
Flip Left
</option>
<option value={"flip-right"}>
Flip Right
</option>
<option value={"flip-up"}>Flip Up</option>
<option value={"flip-down"}>
Flip Down
</option>
</Select>
</FormControl>
</div>
<div
className={`skillsSectionTransitions ${projectTransitionSelected[3]}`}
onClick={(event) => {
projectBackgroundTransitionStyleHandler(
3,
event
);
}}
>
<img
src={transitionZoom}
alt="transitionZoom"
></img>
<FormControl
variant="outlined"
className={`disabledrag `}
>
<InputLabel htmlFor="outlined-age-native-simple">
Zoom
</InputLabel>
<Select
native
value={projectBackgroundTransitionStyle}
onChange={
projectBackgroundTransitioneHandler
}
label="Age"
inputProps={{
name: "age",
id: "outlined-age-native-simple",
}}
>
<option value={"zoom-in"}>Zoom In</option>
<option value={"zoom-in-up"}>
Zoom In Up
</option>
<option value={"zoom-in-down"}>
Zoom In Down
</option>
<option value={"zoom-in-left"}>
Zoom In Left
</option>
<option value={"zoom-in-right"}>
In Right
</option>
<option value={"zoom-out"}>Zoom Out</option>
<option value={"zoom-out-up"}>
Zoom Out Up
</option>
<option value={"zoom-out-down"}>
Zoom Out Down
</option>
<option value={"zoom-out-right"}>
Zoom Out Right
</option>
<option value={"zoom-out-left"}>
Zoom Out Left
</option>
</Select>
</FormControl>
</div>
</div>
</div>
<div className="my-4">
<h4 className="text-center">Animation Duration</h4>
<h4 className="text-center my-3 text-muted" style={{ fontSize: "1.5rem" }}>0s--0.3s--0.6s--0.9s--1.2s--1.5s--1.8s--2.1s--2.4s--2.7s--3s</h4>
<input type="range" value={editallproject.duration} data-toggle="tooltip" data-placement="top" class="custom-range disabledrag" onChange={(e) => {
dispatch({type:"PS_editallproject",payload:{...editallproject,duration:parseFloat(e.target.value)}})
}} min="0" max="3" step="0.3"
id="customRange3"></input>
</div>
<div className="my-4">
<h4 className="text-center">Animation Delay</h4>
<h4 className="text-center my-3 text-muted" style={{ fontSize: "1.5rem" }}>0s--0.3s--0.6s--0.9s--1.2s--1.5s--1.8s--2.1s--2.4s--2.7s--3s</h4>
<input type="range" value={editallproject.delay} data-toggle="tooltip" data-placement="top" class="custom-range disabledrag" onChange={(e) => {
dispatch({type:"PS_editallproject",payload:{...editallproject,delay:parseFloat(e.target.value)}})
}} min="0" max="3" step="0.3"
id="customRange3"></input>
</div>
<div className="mx-auto" onClick={ApplyToAll} style={{ width: "max-content" }}>
<Button variant="contained" color="primary">Apply</Button>
</div>
<Alert className="my-3" style={{ display: (vis) ? "flex" : "none" }} onClose={() => { setvis(false) }}>successfully applied</Alert>
</div>
)
}
Example #21
| Source File: ProfileSectionEditor.jsx From portfolyo-mern with MIT License | 4 votes |
|
ProfileSectionEditor = (props) => {
const classes = useStyles();
const dispatch = useDispatch();
const UsernameP = useSelector((state) => state.UsernameP);
const DescribeP = useSelector((state) => state.DescribeP);
const AddressP = useSelector((state) => state.AddressP);
const UsernameFontP = useSelector((state) => state.UsernameFontP);
const DescribeFontP = useSelector((state) => state.DescribeFontP);
const AddressFontP = useSelector((state) => state.AddressFontP);
const UsernameColorP = useSelector((state) => state.UsernameColorP);
const DescribeColorP = useSelector((state) => state.DescribeColorP);
const AddressColorP = useSelector((state) => state.AddressColorP);
const DButtonColorP = useSelector((state) => state.DButtonColorP);
const HButtonColorP = useSelector((state) => state.HButtonColorP);
const DTextColorP = useSelector((state) => state.DTextColorP);
const HTextColorP = useSelector((state) => state.HTextColorP);
const [layoutDesignSelected, setlayoutDesignSelected] = useState([
"porfileSectionLayoutSelected",
"",
]);
const [alignmentSelected, setalignmentSelected] = useState([
"porfileSectionAligmentSelected",
"",
]);
const [dpStructureSelected, setdpStructureSelected] = useState([
"dpStructureSelected",
"",
"",
]);
const [optionClicked, setoptionClicked] = useState(["", "", ""]);
const [optionSelected, setoptionSelected] = useState([
"btn-group__item--selected",
"",
"",
]);
const layoutp = useSelector((state) => state.layoutp);
// const dpStructureP = useSelector(state=>state.dpStructureP);
const [displaySelected, setdisplaySelected] = useState(0);
const dpStructureHandler = (index) => {
let tempDpStructure = ["", "", ""];
tempDpStructure[index] = "dpStructureSelected";
setdpStructureSelected(tempDpStructure);
};
const layoutDesignHandler = (index) => {
let tempLayout = ["", ""];
tempLayout[index] = "porfileSectionLayoutSelected";
setlayoutDesignSelected(tempLayout);
};
const alignmentHandler = (index) => {
let tempAlignment = ["", ""];
tempAlignment[index] = "porfileSectionAligmentSelected";
setalignmentSelected(tempAlignment);
};
const optionClickedHandlers = (index) => {
let tempOption = ["", "", ""];
tempOption[index] = "btn-group__item--active";
let tempSelected = ["", "", ""];
tempSelected[index] = "btn-group__item--selected";
setoptionClicked(tempOption);
setTimeout(() => {
setoptionClicked(["", "", ""]);
}, 600);
setoptionSelected(tempSelected);
setdisplaySelected(index);
};
// eslint-disable-next-line no-unused-vars
const [fontStyle, setfontStyle] = useState("Open Sans");
//buttons
const [dbuttonStyle, setdbuttonStyle] = useState([
"buttonStyleSeclected",
"",
"",
]);
const [hbuttonStyle, sethbuttonStyle] = useState([
"",
"",
"buttonStyleSeclected",
]);
// const [buttonColor, setbuttonColor] = useState("#fff");
// const [buttonTextColor, setbuttonTextColor] = useState("#fff");
const dbuttonStyleHandler = (index) => {
const temp = ["", "", ""];
temp[index] = "buttonStyleSeclected";
setdbuttonStyle(temp);
};
const hbuttonStyleHandler = (index) => {
const temp = ["", "", ""];
temp[index] = "buttonStyleSeclected";
sethbuttonStyle(temp);
};
useEffect(() => {
layoutDesignHandler(layoutp - 1);
}, []);
return (
<div
style={{
justifyContent: "start",
}}
>
<div className="ProfileSectionEditorBackDrop">
<div
className="ProfileSectionEditorMenu mt-2 p-0"
onClick={(e) => {
e.stopPropagation();
}}
>
{/* <div className="ProfileSectionEditorHeader">
<h3 className="ProfileSectionEditorHeading">
Edit Profile Section
</h3>
<CloseIcon
onClick={props.closeBackDrop}
style={{
cursor: "pointer",
}}
></CloseIcon>
</div> */}
{/* <hr
style={{
border: "#d9d9d9 0.3px solid",
}}
/> */}
<div
className="btn-group "
style={{
display: "block",
// verticalAlign: "middle",
maxWidth: "max-content",
margin: "auto auto 1rem auto",
}}
>
<button
className={`btn-group__item btn-group__item ${optionClicked[0]} ${optionSelected[0]}`}
onClick={() => optionClickedHandlers(0)}
>
Layout
</button>
<button
className={`btn-group__item ${optionClicked[1]} ${optionSelected[1]}`}
onClick={() => optionClickedHandlers(1)}
>
Text
</button>
<button
className={`btn-group__item ${optionClicked[2]} ${optionSelected[2]}`}
onClick={() => optionClickedHandlers(2)}
>
Buttons
</button>
</div>
<div className="profileSectionEditorLayout">
{displaySelected === 0 ? (
<div>
<div className="profileSectionEditorLayoutDesign m-0">
<p className="profileSectionEditorLayoutDesignHeader">
Designs:
</p>
<div className="profileSectionEditorLayoutDesignStructure">
<div
className={`profileSectionEditorLayouts ${layoutDesignSelected[0]}`}
onClick={() => {
layoutDesignHandler(0);
dispatch({
type: "layoutp",
payload: 1,
});
}}
>
<img
src={layout1}
alt="layout1"
></img>
<p>Layout-1</p>
</div>
<div
className={`profileSectionEditorLayouts ${layoutDesignSelected[1]}`}
onClick={() => {
layoutDesignHandler(1);
dispatch({
type: "layoutp",
payload: 2,
});
}}
>
<img
src={profileLeft}
alt="layout2"
></img>
<p>Layout-2</p>
</div>
</div>
<p className="profileSectionEditorLayoutDesignHeader">
Alignment:
</p>
<div className="profileSectionEditorLayoutDesignStructure">
<div
className={`profileSectionEditorLayouts ${alignmentSelected[0]}`}
onClick={() => {
alignmentHandler(0);
dispatch({
type: "alignp",
payload: "left",
});
}}
>
<img
src={profileLeft}
alt="layout1"
></img>
<p>Left Alignment</p>
</div>
<div
className={`profileSectionEditorLayouts ${alignmentSelected[1]}`}
onClick={() => {
alignmentHandler(1);
dispatch({
type: "alignp",
payload: "center",
});
}}
>
<img
src={profileMiddle}
alt="layout2"
></img>
<p>Center Alignment</p>
</div>
</div>
<p className="profileSectionEditorLayoutDesignHeader">
Profile Pic:
</p>
<div className="profileSectionEditorLayoutDpStructure">
<div
className={`profileSectionEditorLayoutDpStructureItem ${dpStructureSelected[0]}`}
style={{
margin: "1rem",
}}
onClick={() => {
dpStructureHandler(0);
dispatch({
type: "dpstructurep",
payload: 0,
});
}}
>
<div
style={{
width: "5rem",
height: "5rem",
border: "black 2px solid",
}}
></div>
<p>Sharp</p>
</div>
<div
className={`profileSectionEditorLayoutDpStructureItem ${dpStructureSelected[1]}`}
style={{
margin: "1rem",
}}
onClick={() => {
dpStructureHandler(1);
dispatch({
type: "dpstructurep",
payload: 1,
});
}}
>
<div
style={{
width: "5rem",
height: "5rem",
border: "black 2px solid",
borderRadius: "10px",
}}
></div>
<p>Smooth</p>
</div>
<div
className={`profileSectionEditorLayoutDpStructureItem ${dpStructureSelected[2]}`}
style={{
margin: "1rem",
}}
onClick={() => {
dpStructureHandler(2);
dispatch({
type: "dpstructurep",
payload: 2,
});
}}
>
<div
style={{
width: "5rem",
height: "5rem",
border: "black 2px solid",
borderRadius: "50%",
}}
></div>
<p>Circle</p>
</div>
</div>
</div>
</div>
) : displaySelected === 1 ? (
<div
style={{
padding: "1rem",
}}
>
<form
className={classes.root}
noValidate
autoComplete="off"
>
<div className="profileSectionEditorText ">
<div className="profileSectionEditorTextDiv">
<TextField
className="disabledrag"
id="ProfileSectionUsernameP"
label="User Name"
variant="outlined"
fullWidth
required
defaultValue={UsernameP}
/>
</div>
<div className="profileSectionEditorFontPickerDiv ">
<FontPicker
className="profileSectionEditorFontpicker disabledrag"
apiKey="AIzaSyA4zVMDlSV-eRzbGR5BFqvbHqz3zV-OLd0"
activeFontFamily={UsernameFontP}
onChange={(nextFont) => {
setfontStyle(
nextFont.family
);
dispatch({
type: "usernamefontp",
payload:
nextFont.family,
});
}}
/>
</div>
<div className="profileSectionEditorColorDiv">
<input
type="color"
value={UsernameColorP}
onChange={(e) => {
dispatch({
type: "usernamecolorp",
payload: e.target.value,
});
}}
></input>
</div>
</div>
{/* <div className="profileSectionEditorText disabledrag">
<div className="profileSectionEditorTextDiv">
<TextField
className={classes.textfield}
id="lastnameInput"
label="Last Name"
variant="outlined"
fullWidth
required
/>
</div>
<div className="profileSectionEditorFontPickerDiv disabledrag">
<FontPicker
className="profileSectionEditorFontpicker"
apiKey="AIzaSyA4zVMDlSV-eRzbGR5BFqvbHqz3zV-OLd0"
activeFontFamily={fontStyle}
onChange={(nextFont) =>
setfontStyle(
nextFont.family
)
}
/>
</div>
</div> */}
<div className="profileSectionEditorText ">
<div className="profileSectionEditorTextDiv">
<TextField
className="disabledrag apply-font"
id="ProfileSectionDescribeP"
label="Tagline"
variant="outlined"
placeholder="Your Tagline"
fullWidth
multiline
defaultValue={DescribeP}
/>
</div>
<p className="apply-font"></p>
<div className="profileSectionEditorFontPickerDiv disabledrag">
<FontPicker
className="profileSectionEditorFontpicker disabledrag"
apiKey="AIzaSyA4zVMDlSV-eRzbGR5BFqvbHqz3zV-OLd0"
activeFontFamily={DescribeFontP}
onChange={(nextFont) => {
setfontStyle(
nextFont.family
);
dispatch({
type: "describefontp",
payload:
nextFont.family,
});
}}
/>
</div>
<div className="profileSectionEditorColorDiv">
<input
type="color"
value={DescribeColorP}
onChange={(e) => {
dispatch({
type: "describecolorp",
payload: e.target.value,
});
}}
></input>
</div>
</div>
<div className="profileSectionEditorText ">
<div className="profileSectionEditorTextDiv">
<TextField
className="disabledrag"
id="ProfileSectionAddressP"
label="Location"
variant="outlined"
fullWidth
required
defaultValue={AddressP}
/>
</div>
<div className="profileSectionEditorFontPickerDiv">
<FontPicker
className="profileSectionEditorFontpicker disabledrag"
apiKey="AIzaSyA4zVMDlSV-eRzbGR5BFqvbHqz3zV-OLd0"
activeFontFamily={AddressFontP}
onChange={(nextFont) => {
setfontStyle(
nextFont.family
);
dispatch({
type: "addressfontp",
payload:
nextFont.family,
});
}}
/>
</div>
<div className="profileSectionEditorColorDiv">
<input
type="color"
value={AddressColorP}
onChange={(e) => {
dispatch({
type: "addresscolorp",
payload: e.target.value,
});
}}
></input>
</div>
</div>
<div className="mx-auto" style={{width:"max-content"}}>
<Button variant="outlined" color="primary"
onClick={()=>{
dispatch({type:"usernamep",payload:document.querySelector("#ProfileSectionUsernameP").value});
dispatch({type:"describep",payload:document.querySelector("#ProfileSectionDescribeP").value});
dispatch({type:"addressp",payload:document.querySelector("#ProfileSectionAddressP").value});
}}
>Apply text
</Button>
</div>
</form>
</div>
) : (
<div className="profileSectionEditorButton">
<p className="profileSectionEditorButtonHeader">
Button Style:
</p>
<p className="profileSectionEditorSideHeading">
Download Button:{" "}
</p>
<div className="profileSectionEditorButtonMenu">
<div
className={`profileSectionEditorButtonStyle ${dbuttonStyle[0]}`}
// onClick={() => buttonStyleHandler(0)}
onClick={() => {
dispatch({
type: "dbuttonstylep",
payload: "contained",
});
dbuttonStyleHandler(0);
}}
>
<Button
className=""
variant="contained"
color="secondary"
>
Contained
</Button>
</div>
<div
className={`profileSectionEditorButtonStyle ${dbuttonStyle[1]}`}
onClick={() => {
dispatch({
type: "dbuttonstylep",
payload: "",
});
dbuttonStyleHandler(1);
}}
>
<Button
className=""
color="secondary"
variant=""
>
Text Button
</Button>
</div>
<div
className={`profileSectionEditorButtonStyle ${dbuttonStyle[2]}`}
// onClick={() => buttonStyleHandler(2)}
onClick={() => {
dispatch({
type: "dbuttonstylep",
payload: "outlined",
});
dbuttonStyleHandler(2);
}}
>
<Button
className=""
variant="outlined"
color="secondary"
>
Outlined
</Button>
</div>
</div>
<p className="profileSectionEditorSideHeading">
Hire Me Button:
</p>
<div className="profileSectionEditorButtonMenu">
<div
className={`profileSectionEditorButtonStyle ${hbuttonStyle[0]}`}
// onClick={() => buttonStyleHandler(0)}
onClick={() => {
dispatch({
type: "hbuttonstylep",
payload: "contained",
});
hbuttonStyleHandler(0);
}}
>
<Button
className=""
variant="contained"
color="secondary"
>
Contained
</Button>
</div>
<div
className={`profileSectionEditorButtonStyle ${hbuttonStyle[1]}`}
onClick={() => {
dispatch({
type: "hbuttonstylep",
payload: "",
});
hbuttonStyleHandler(1);
}}
>
<Button
className=""
color="secondary"
variant=""
>
Text Button
</Button>
</div>
<div
className={`profileSectionEditorButtonStyle ${hbuttonStyle[2]}`}
// onClick={() => buttonStyleHandler(2)}
onClick={() => {
dispatch({
type: "hbuttonstylep",
payload: "outlined",
});
hbuttonStyleHandler(2);
}}
>
<Button
className=""
variant="outlined"
color="secondary"
>
Outlined
</Button>
</div>
</div>
<p className="profileSectionEditorButtonHeader profileSectionEditorSideHeading">
Button Background Color:
</p>
<div
style={{
display: "flex",
justifyContent: "space-around",
flexWrap: "wrap",
}}
>
<div
className="disabledrag profileSectionEditorButtonColorPicker mx-2"
style={
{
// margin: "auto !important",
}
}
>
<p className="text-center">
HIRE ME BUTTON:
</p>
<ChromePicker
color={HButtonColorP}
onChange={(updatedColor) =>
dispatch({
type: "hbuttoncolorp",
payload: updatedColor.hex,
})
}
/>
</div>
<div
className="disabledrag profileSectionEditorButtonColorPicker mx-2"
style={
{
// margin: "auto !important",
}
}
>
<p className="text-center">
DOWNLOAD RESUME BUTTON:
</p>
<ChromePicker
color={DButtonColorP}
onChange={(updatedColor) =>
// setbuttonColor(updatedColor)
dispatch({
type: "dbuttoncolorp",
payload: updatedColor.hex,
})
}
/>
</div>
</div>
<p className="profileSectionEditorSideHeading">Text Color:</p>
<div
style={{
display: "flex",
justifyContent: "space-around",
flexWrap: "wrap",
}}
>
<div
className="disabledrag profileSectionEditorButtonColorPicker mx-2"
style={
{
// margin: "auto !important",
}
}
>
<p className="text-center">
HIRE ME BUTTON:
</p>
<ChromePicker
color={HTextColorP}
onChange={(updatedColor) =>
dispatch({
type: "htextcolorp",
payload: updatedColor.hex,
})
}
/>
</div>
{/* <div
className="disabledrag profileSectionEditorButtonColorPicker"
>
<p className=" text-centre profileSectionEditorButtonHeader">
HIRE BUTTON COLOR:
</p>
<ChromePicker
color={HTextColorP}
onChange={(updatedColor) =>
dispatch({type:"dtextcolorp",payload:updatedColor.hex})
// setbuttonTextColor(updatedColor)
}
/>
</div> */}
{/* <div
className="disabledrag profileSectionEditorButtonColorPicker"
>
<p className="text-center profileSectionEditorButtonHeader">
DOWNLOAD BUTTON COLOR :
</p>
<div
className="disabledrag"
>
<ChromePicker
color={DTextColorP}
onChange={(updatedColor) =>
dispatch({type:"dtextcolorp",payload:updatedColor.hex})
// setbuttonTextColor(updatedColor)
}
/>
</div>
</div> */}
<div
className="disabledrag profileSectionEditorButtonColorPicker mx-2"
style={
{
// margin: "auto !important",
}
}
>
<p className="text-center">
DOWNLOAD BUTTON COLOR:
</p>
<SketchPicker
color={DTextColorP}
onChange={(updatedColor) =>
dispatch({
type: "dtextcolorp",
payload: updatedColor.hex,
})
}
/>
</div>
</div>
</div>
)}
</div>
</div>
</div>
</div>
);
}
Example #22
| Source File: EducationHeader.jsx From portfolyo-mern with MIT License | 4 votes |
|
EducationHeader = () => {
const educationsectiontitle = useSelector(state => state.educationsectiontitle);
const educationhfontname = useSelector(state => state.educationhfontname);
const descriptione = useSelector(state => state.descriptione);
const educationpfontname = useSelector(state => state.educationpfontname);
const fontcolore = useSelector(state => state.fontcolore);
const fontcolorep = useSelector(state => state.fontcolorep);
const animationtypeeh = useSelector(state => state.animationtypeeh);
// const [value, setValue] = React.useState(animationtypeeh);
const handleChange = (event) => {
// setValue(event.target.value);
dispatch({ type: "animationtypeeh", payload: event.target.value });
};
const animationtimeeh= useSelector(state => state.animationtimeeh);
const animationdelayeh= useSelector(state => state.animationdelayeh);
const [
projectBackgroundTransitionStyle,
setprojectBackgroundTransitionStyle,
] = useState(animationtypeeh);
const [projectTransitionSelected, setprojectTransitionSelected] = useState([
"projectTrasitionSelected",
"",
"",
"",
]);
const projectBackgroundTransitioneHandler = (event) => {
setprojectBackgroundTransitionStyle(event.target.value);
dispatch({ type: "animationtypeeh", payload: event.target.value });
};
const projectBackgroundTransitionStyleHandler = (index, event) => {
if (index === 0) {
setprojectBackgroundTransitionStyle("none");
dispatch({ type: "animationtypeeh", payload: "none" });
return;
}
const temp = ["", "", "", ""];
temp[index] = "projectTrasitionSelected";
setprojectTransitionSelected(temp);
setprojectBackgroundTransitionStyle(event.target.value);
dispatch({ type: "animationtypeeh", payload: event.target.value });
};
const dispatch = useDispatch();
return (
<div className="EducationHeader mt-3">
<h4 className="text-center my-4">Text and Font</h4>
<div className="mx-auto my-5" style={{display:"block",width:"max-content",zIndex:"99999"}}>
<Button variant="contained" color="primary" onClick={()=>{
dispatch({ type: "educationsectiontitle", payload: document.querySelector("#educationtitle").value });
dispatch({ type: "descriptione", payload: document.querySelector("#educationdescription").value })
}}>
Apply text
</Button>
</div>
<div className="row my-5">
<div className="col-6 offset-1">
<TextField
className="disabledrag"
id="educationtitle"
label="Title"
variant="outlined"
fullWidth
required
defaultValue={educationsectiontitle}
/>
</div>
<div className="col-4 offset-1 mt-2">
<FontPicker
className="profileSectionEditorFontpicker disabledrag"
apiKey="AIzaSyA4zVMDlSV-eRzbGR5BFqvbHqz3zV-OLd0"
activeFontFamily={educationhfontname}
onChange={(nextFont) => {
dispatch({ type: "educationhfontname", payload: nextFont.family })
}
}
/>
</div>
</div>
<div className="row my-5">
<div className="col-md-6 offset-1">
<TextField
className="disabledrag"
id="educationdescription"
label="describe"
variant="outlined"
fullWidth
required
defaultValue={descriptione}
multiline
/>
</div>
<div className="col-4 offset-1 mt-2 profileSectionEditorFontPickerDiv">
<div>
<FontPicker
className="disabledrag expanded"
apiKey="AIzaSyA4zVMDlSV-eRzbGR5BFqvbHqz3zV-OLd0"
activeFontFamily={educationpfontname}
onChange={(nextFont) => {
dispatch({ type: "educationpfontname", payload: nextFont.family })
}
}
/>
</div>
</div>
</div>
<h3 className="text-center">Font Color</h3>
<div style={{ display: "flex", justifyContent: "space-around", flexWrap: "wrap" }}>
<div style={{ marginTop: "3rem", width: "max-content" }}>
<h4 className="text-center">Title Font</h4>
<span
id="SketchPicker"
className="disabledrag"
style={{ cursor: "pointer !important" }}
>
<SketchPicker
color={fontcolore}
onChange={(color) => dispatch({ type: "fontcolore", payload: color.hex })} style={{ cursor: "pointer" }} />
</span>
</div>
<div style={{ marginTop: "3rem", width: "max-content" }}>
<h4 className="text-center">Describe Font</h4>
<span
id="SketchPicker"
className="disabledrag"
style={{ cursor: "pointer !important" }}
>
<SketchPicker
color={fontcolorep}
onChange={(color) => dispatch({ type: "fontcolorep", payload: color.hex })} style={{ cursor: "pointer" }} />
</span>
</div>
</div>
<div className="my-5">
<h4 className="text-center">Animation Type</h4>
<div className="skillsSectionTransitionEditor">
<div
className={`skillsSectionTransitionNone ${projectTransitionSelected[0]}`}
onClick={() => {
projectBackgroundTransitionStyleHandler(0, null);
}}
>
<p
style={{
display: "block",
margin: "auto",
}}
>
None
</p>
</div>
<div
className={`skillsSectionTransitions ${projectTransitionSelected[1]}`}
onClick={(event) => {
projectBackgroundTransitionStyleHandler(1, event);
}}
>
<img src={transitionFade} alt="transitionFade"></img>
<FormControl
variant="outlined"
className={`disabledrag `}
>
<InputLabel htmlFor="outlined-age-native-simple">
Fade
</InputLabel>
<Select
native
value={projectBackgroundTransitionStyle}
onChange={projectBackgroundTransitioneHandler}
label="Age"
inputProps={{
name: "age",
id: "outlined-age-native-simple",
}}
>
<option value={"fade-up"}>Fade Up</option>
<option value={"fade-down"}>Fade down</option>
<option value={"fade-right"}>Fade right</option>
<option value={"fade-left"}>Fade left</option>
<option value={"fade-up-right"}>
Fade Up Right
</option>
<option value={"fade-up-left"}>
Fade Up left
</option>
<option value={"fade-down-right"}>
Fade Down Right
</option>
<option value={"fade-down-left"}>
Fade Down Left
</option>
</Select>
</FormControl>
</div>
<div
className={`skillsSectionTransitions ${projectTransitionSelected[2]}`}
onClick={(event) => {
projectBackgroundTransitionStyleHandler(2, event);
}}
>
<img src={transitionFlip} alt="transitionFlip"></img>
<FormControl
variant="outlined"
className={`disabledrag`}
>
<InputLabel htmlFor="outlined-age-native-simple">
Flip
</InputLabel>
<Select
native
value={projectBackgroundTransitionStyle}
onChange={projectBackgroundTransitioneHandler}
label="Age"
inputProps={{
name: "age",
id: "outlined-age-native-simple",
}}
>
<option value={"flip-left"}>Flip Left</option>
<option value={"flip-right"}>Flip Right</option>
<option value={"flip-up"}>Flip Up</option>
<option value={"flip-down"}>Flip Down</option>
</Select>
</FormControl>
</div>
<div
className={`skillsSectionTransitions ${projectTransitionSelected[3]}`}
onClick={(event) => {
projectBackgroundTransitionStyleHandler(3, event);
}}
>
<img src={transitionZoom} alt="transitionZoom"></img>
<FormControl
variant="outlined"
className={`disabledrag`}
>
<InputLabel htmlFor="outlined-age-native-simple">
Zoom
</InputLabel>
<Select
native
value={projectBackgroundTransitionStyle}
onChange={projectBackgroundTransitioneHandler}
label="Age"
inputProps={{
name: "age",
id: "outlined-age-native-simple",
}}
>
<option value={"zoom-in"}>Zoom In</option>
<option value={"zoom-in-up"}>Zoom In Up</option>
<option value={"zoom-in-down"}>
Zoom In Down
</option>
<option value={"zoom-in-left"}>
Zoom In Left
</option>
<option value={"zoom-in-right"}>
In Right
</option>
<option value={"zoom-out"}>Zoom Out</option>
<option value={"zoom-out-up"}>
Zoom Out Up
</option>
<option value={"zoom-out-down"}>
Zoom Out Down
</option>
<option value={"zoom-out-right"}>
Zoom Out Right
</option>
<option value={"zoom-out-left"}>
Zoom Out Left
</option>
</Select>
</FormControl>
</div>
</div>
</div>
<div className="my-4">
<h4 className="text-center">Animation Duration</h4>
<h4 className="text-center my-3 text-muted" style={{fontSize:"1.5rem"}}>0s--0.3s--0.6s--0.9s--1.2s--1.5s--1.8s--2.1s--2.4s--2.7s--3s</h4>
<input type="range" data-toggle="tooltip" data-placement="top" class="custom-range disabledrag" onChange={(e) => {
dispatch({type:"animationtimeeh",payload:e.target.value})
}} min="0" max="3" step="0.3" value={animationtimeeh}
id="customRange3"></input>
</div>
<div className="my-4">
<h4 className="text-center">Animation Delay</h4>
<h4 className="text-center my-3 text-muted" style={{fontSize:"1.5rem"}}>0s--0.3s--0.6s--0.9s--1.2s--1.5s--1.8s--2.1s--2.4s--2.7s--3s</h4>
<input type="range" data-toggle="tooltip" data-placement="top" class="custom-range disabledrag" onChange={(e) => {
dispatch({type:"animationdelayeh",payload:e.target.value})
}} min="0" max="3" step="0.3" value={animationdelayeh}
id="customRange3"></input>
</div>
</div>
)
}
Example #23
| Source File: EditAllCard.jsx From portfolyo-mern with MIT License | 4 votes |
|
EditAllCard = () => {
const classes = useStyles();
// const [shadow, setShadow] = React.useState("0 0 0 0");
const [delay, setdelay] = React.useState(0);
const [duration, setduration] = React.useState(0.6);
const [vis, setvis] = React.useState(false);
const card1edu = useSelector(state => state.card1edu);
const fontsineb = useSelector(state => state.fontsineb);
const fontfamilyedu = useSelector(state => state.fontfamilyedu);
const shadowcardedu = useSelector(state => state.shadowcardedu);
const editcardine = useSelector(state => state.editcardine);
const dispatch = useDispatch();
const ApplyToAll = () => {
try {
let newcards = [...card1edu];
for (let i = 0; i < newcards.length; i++) {
newcards[i]["animationduration"] = duration;
newcards[i]["animationdelay"] = delay;
}
// console.log(newcards);
dispatch({ type: "card1edu", payload: newcards });
setvis(true);
}
catch {
}
}
const [
projectBackgroundTransitionStyle,
setprojectBackgroundTransitionStyle,
] = useState(editcardine.animation);
const [projectTransitionSelected, setprojectTransitionSelected] = useState([
"projectTrasitionSelected",
"",
"",
"",
]);
const projectBackgroundTransitioneHandler = (event) => {
setprojectBackgroundTransitionStyle(event.target.value);
let cc = card1edu.map(ele=>{
return {
...ele,
animation:event.target.value
}
});
cc[editcardine.index] = { ...editcardine, animation: event.target.value };
dispatch({ type: "card1edu", payload: cc });
dispatch({ type: "editcardine", payload: { ...editcardine, animation: event.target.value } });
};
const projectBackgroundTransitionStyleHandler = (index, event) => {
if (index === 0) {
setprojectBackgroundTransitionStyle("none");
let cc = card1edu.map(ele=>{
return {
...ele,
animation:"none"
}
});
cc[editcardine.index] = { ...editcardine, animation: "none" };
dispatch({ type: "card1edu", payload: cc });
dispatch({ type: "editcardine", payload: { ...editcardine, animation: "none" } });
return;
}
const temp = ["", "", "", ""];
temp[index] = "projectTrasitionSelected";
setprojectTransitionSelected(temp);
setprojectBackgroundTransitionStyle(event.target.value);
let cc = card1edu.map(ele=>{
return {
...ele,
animation:event.target.value
}
});
cc[editcardine.index] = { ...editcardine, animation: event.target.value };
dispatch({ type: "card1edu", payload: cc });
dispatch({ type: "editcardine", payload: { ...editcardine, animation: event.target.value } });
};
return (
<div>
<h4 className="text-center text-uppercase my-5" style={{ wordSpacing: "0.5rem" }}>Changes Will Apply to All Cards</h4>
<div className="my-5">
<h4 className="text-center">Animation Type</h4>
<div className="skillsSectionTransitionEditor">
<div
className={`skillsSectionTransitionNone ${projectTransitionSelected[0]}`}
onClick={() => {
projectBackgroundTransitionStyleHandler(0, null);
}}
>
<p
style={{
display: "block",
margin: "auto",
}}
>
None
</p>
</div>
<div
className={`skillsSectionTransitions ${projectTransitionSelected[1]}`}
onClick={(event) => {
projectBackgroundTransitionStyleHandler(1, event);
}}
>
<img src={transitionFade} alt="transitionFade"></img>
<FormControl
variant="outlined"
className={`disabledrag `}
>
<InputLabel htmlFor="outlined-age-native-simple">
Fade
</InputLabel>
<Select
native
value={projectBackgroundTransitionStyle}
onChange={projectBackgroundTransitioneHandler}
label="Age"
inputProps={{
name: "age",
id: "outlined-age-native-simple",
}}
>
<option value={"fade-up"}>Fade Up</option>
<option value={"fade-down"}>Fade down</option>
<option value={"fade-right"}>Fade right</option>
<option value={"fade-left"}>Fade left</option>
<option value={"fade-up-right"}>
Fade Up Right
</option>
<option value={"fade-up-left"}>
Fade Up left
</option>
<option value={"fade-down-right"}>
Fade Down Right
</option>
<option value={"fade-down-left"}>
Fade Down Left
</option>
</Select>
</FormControl>
</div>
<div
className={`skillsSectionTransitions ${projectTransitionSelected[2]}`}
onClick={(event) => {
projectBackgroundTransitionStyleHandler(2, event);
}}
>
<img src={transitionFlip} alt="transitionFlip"></img>
<FormControl
variant="outlined"
className={`disabledrag`}
>
<InputLabel htmlFor="outlined-age-native-simple">
Flip
</InputLabel>
<Select
native
value={projectBackgroundTransitionStyle}
onChange={projectBackgroundTransitioneHandler}
label="Age"
inputProps={{
name: "age",
id: "outlined-age-native-simple",
}}
>
<option value={"flip-left"}>Flip Left</option>
<option value={"flip-right"}>Flip Right</option>
<option value={"flip-up"}>Flip Up</option>
<option value={"flip-down"}>Flip Down</option>
</Select>
</FormControl>
</div>
<div
className={`skillsSectionTransitions ${projectTransitionSelected[3]}`}
onClick={(event) => {
projectBackgroundTransitionStyleHandler(3, event);
}}
>
<img src={transitionZoom} alt="transitionZoom"></img>
<FormControl
variant="outlined"
className={`disabledrag`}
>
<InputLabel htmlFor="outlined-age-native-simple">
Zoom
</InputLabel>
<Select
native
value={projectBackgroundTransitionStyle}
onChange={projectBackgroundTransitioneHandler}
label="Age"
inputProps={{
name: "age",
id: "outlined-age-native-simple",
}}
>
<option value={"zoom-in"}>Zoom In</option>
<option value={"zoom-in-up"}>Zoom In Up</option>
<option value={"zoom-in-down"}>
Zoom In Down
</option>
<option value={"zoom-in-left"}>
Zoom In Left
</option>
<option value={"zoom-in-right"}>
In Right
</option>
<option value={"zoom-out"}>Zoom Out</option>
<option value={"zoom-out-up"}>
Zoom Out Up
</option>
<option value={"zoom-out-down"}>
Zoom Out Down
</option>
<option value={"zoom-out-right"}>
Zoom Out Right
</option>
<option value={"zoom-out-left"}>
Zoom Out Left
</option>
</Select>
</FormControl>
</div>
</div>
</div>
<div className="my-4">
<h4 className="text-center">Animation Duration</h4>
<h4 className="text-center my-3 text-muted" style={{ fontSize: "1.5rem" }}>0s--0.3s--0.6s--0.9s--1.2s--1.5s--1.8s--2.1s--2.4s--2.7s--3s</h4>
<input type="range" value={parseFloat(duration)*1000} data-toggle="tooltip" data-placement="top" class="custom-range disabledrag" onChange={(e) => {
setduration(e.target.value);
}} min="0" max="3" step="0.3"
id="customRange3"></input>
</div>
<div className="my-4">
<h4 className="text-center">Animation Delay</h4>
<h4 className="text-center my-3 text-muted" style={{ fontSize: "1.5rem" }}>0s--0.3s--0.6s--0.9s--1.2s--1.5s--1.8s--2.1s--2.4s--2.7s--3s</h4>
<input type="range" value={parseFloat(delay)*1000} data-toggle="tooltip" data-placement="top" class="custom-range disabledrag" onChange={(e) => {
setdelay(e.target.value);
}} min="0" max="3" step="0.3"
id="customRange3"></input>
</div>
<div className="mx-auto" onClick={ApplyToAll} style={{ width: "max-content" }}>
<Button variant="contained" color="primary">Apply</Button>
</div>
<Alert className="my-3" style={{ display: (vis) ? "flex" : "none" }} onClose={() => { setvis(false) }}>successfully applied</Alert>
<h3 className="text-center mt-4">Font Colors</h3>
<div clasName="my-0 py-0" style={{ display: "flex", justifyContent: "space-around", flexWrap: "wrap" }}>
<div style={{ marginTop: "1.5rem", width: "max-content" }}>
<h4 className="text-center">Title Font</h4>
<span
id="SketchPicker"
className="disabledrag"
style={{ cursor: "pointer !important" }}
>
<SketchPicker
color={fontsineb.title}
onChange={(color) => dispatch({ type: "fontsineb", payload: { ...fontsineb, title: color.hex } })} style={{ cursor: "pointer" }} />
</span>
</div>
<div style={{ marginTop: "1.5rem", width: "max-content" }}>
<h4 className="text-center">Tagline Font</h4>
<span
id="SketchPicker"
className="disabledrag"
style={{ cursor: "pointer !important" }}
>
<SketchPicker
color={fontsineb.year}
onChange={(color) => dispatch({ type: "fontsineb", payload: { ...fontsineb, year: color.hex } })} style={{ cursor: "pointer" }} />
</span>
</div>
<div style={{ marginTop: "1.5rem", width: "max-content" }}>
<h4 className="text-center">Description Font</h4>
<span
id="SketchPicker"
className="disabledrag"
style={{ cursor: "pointer !important" }}
>
<SketchPicker
color={fontsineb.description}
onChange={(color) => dispatch({ type: "fontsineb", payload: { ...fontsineb, description: color.hex } })} style={{ cursor: "pointer" }} />
</span>
</div>
</div>
<h3 className="text-center mt-4">Card Background Color</h3>
<div clasName="my-0 py-0" style={{ display: "flex", justifyContent: "space-around", flexWrap: "wrap" }}>
<div style={{ marginTop: "1.5rem", width: "max-content" }}>
<span
id="SketchPicker"
className="disabledrag"
style={{ cursor: "pointer !important" }}
>
<SketchPicker
color={fontsineb.bgcolor}
onChange={(color) => dispatch({ type: "fontsineb", payload: { ...fontsineb, bgcolor: color.hex } })} style={{ cursor: "pointer" }} />
</span>
</div>
</div>
<h4 className="text-center my-5">Font Picker</h4>
<form
className={classes.root}
noValidate
autoComplete="off"
style={{ display: "flex", justifyContent: "space-around" }}
>
<div className="profileSectionEditorText mt-2">
<p>title font</p>
<div className="profileSectionEditorFontPickerDiv ">
<FontPicker
className="profileSectionEditorFontpicker disabledrag"
apiKey="AIzaSyA4zVMDlSV-eRzbGR5BFqvbHqz3zV-OLd0"
pickerId="1"
activeFontFamily={fontfamilyedu.title}
onChange={(nextFont) => {
dispatch({ type: "fontfamilyedu", payload: { ...fontfamilyedu, title: nextFont.family } })
}
}
/>
</div>
</div>
<div className="profileSectionEditorText ">
<p>year font</p>
<div className="profileSectionEditorFontPickerDiv disabledrag">
<FontPicker
className="profileSectionEditorFontpicker disabledrag"
apiKey="AIzaSyA4zVMDlSV-eRzbGR5BFqvbHqz3zV-OLd0"
pickerId="2"
activeFontFamily={fontfamilyedu.year}
onChange={(nextFont) => {
dispatch({ type: "fontfamilyedu", payload: { ...fontfamilyedu, year: nextFont.family } })
}
}
/>
</div>
</div>
<div className="profileSectionEditorText ">
<p>description font</p>
<div className="profileSectionEditorFontPickerDiv">
<FontPicker
className="profileSectionEditorFontpicker disabledrag"
apiKey="AIzaSyA4zVMDlSV-eRzbGR5BFqvbHqz3zV-OLd0"
pickerId="3"
activeFontFamily={fontfamilyedu.description}
onChange={(nextFont) => {
dispatch({ type: "fontfamilyedu", payload: { ...fontfamilyedu, description: nextFont.family } });
}
}
/>
</div>
</div>
</form>
<div>
<h1 className="text-center mt-4">Shadow Of Card</h1>
<div style={{ boxShadow: shadowcardedu }} className="disabledrag">
<ShadowPicker
value={shadowcardedu}
onChange={(value) => {
dispatch({type:'shadowcardedu',payload:value});
}}
/>
</div>
</div>
</div>
)
}
Example #24
| Source File: Editor.jsx From portfolyo-mern with MIT License | 4 votes |
|
Editor = (props) => {
// console.log(props);
const navbg = useSelector((state) => state.NavbarBg);
const NavbarIconColor = useSelector((state) => state.NavbarIconColor);
const IconColor = useSelector((state) => state.IconColor);
// const onScrollBg = useSelector((state) => state.onScrollBg);
const NavHoverColor = useSelector((state) => state.NavHoverColor);
// const IconText = useSelector((state) => state.IconText);
const TabPointer = useSelector((state) => state.TabPointer);
// console.log(TabPointer);
const dispatch = useDispatch();
const theme = createMuiTheme({
palette: {
primary: {
main: "#000",
},
secondary: {
main: "#000",
},
},
});
const classes = useStyles();
// const [value, setValue] = React.useState(TabPointer);
const handleChange = (event, newValue) => {
dispatch({ type: "tabpointer", payload: newValue });
};
// console.log(theme);
function touchHandler(event) {
var touch = event.changedTouches[0];
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(
{
touchstart: "mousedown",
touchmove: "mousemove",
touchend: "mouseup",
}[event.type],
true,
true,
window,
1,
touch.screenX,
touch.screenY,
touch.clientX,
touch.clientY,
false,
false,
false,
false,
0,
null
);
touch.target.dispatchEvent(simulatedEvent);
// event.preventDefault();
}
// for mobile draging editor feature
function init() {
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
}
function init1() {
document.addEventListener("touchstart", touchHandler, false);
document.addEventListener("touchmove", touchHandler, false);
document.addEventListener("touchend", touchHandler, false);
document.addEventListener("touchcancel", touchHandler, false);
}
// $( "#Editor" ).draggable({containment:"#root", cancel: ".disabledrag" ,scroll: false,cursor: "move",scrollSpeed: 20 });
if (props.data.draggable) {
$("#Editor").draggable({
containment: "#root",
cancel: ".disabledrag",
scroll: false,
cursor: "move",
scrollSpeed: 20,
disabled: false,
});
// $("#Editor").resizable({
// disabled: true
// });
// $("#Editor").resizable({
// containment: "#root",
// disabled: false,
// handles: "n, e, s, w, ne, se, sw, nw",
// // animate: true,
// // aspectRatio: true
// // classes: {
// // "ui-resizable": "highlight"
// // }
// });
$(".disabledrag").disableSelection();
$("#Editor").css({
maxWidth: "70%",
width: "inherit",
maxHeight: "400px",
zIndex: 99998,
borderTop: "none",
borderBottom: "none",
resize: "none",
});
} else {
$("#Editor").draggable({ disabled: true });
if (props.data.split === "bottom") {
window.addEventListener("load", AOS.refresh);
$("#Editor").css({
maxWidth: "none",
maxHeight: "none",
width: "100vw",
// borderTop:"4px solid #777",
height: "50vh",
zIndex: props.data.drawer ? 0 : 99998,
borderBottom: "none",
// position:"absolute",
resize: "none",
top: "50vh",
left: "0",
// transform:"translateY(-50%)"
});
$("#Editor").resizable({
disabled: true,
});
$("#Editor").resizable({
containment: "#root",
handles: "n",
disabled: false,
// animate: true,
// aspectRatio: true
// classes: {
// "ui-resizable": "highlight"
// }
});
} else {
$("#Editor").css({
maxWidth: "none",
width: "99.3vw",
height: "50vh",
zIndex: props.data.drawer ? 0 : 99998,
// position:"absolute",
top: "0",
// borderBottom:"4px solid #777",
borderTop: "none",
left: "0",
resize: "vertical",
});
$("#Editor").resizable({
disabled: true,
});
// $("#Editor").resizable({
// containment: "#root",
// handles: "s",
// disabled: false,
// handles: "se",
// alsoResize : "#Editor",
// // animate: true,
// // aspectRatio: true
// // classes: {
// // "ui-resizable": "highlight"
// // }
// })
}
}
// init();
const HomeIconText = useSelector((state) => state.HomeIconText);
const ArticleIconText = useSelector((state) => state.ArticleIconText);
const AboutIconText = useSelector((state) => state.AboutIconText);
const ContactIconText = useSelector((state) => state.ContactIconText);
const NavbarIconText = useSelector((state) => state.NavbarIconText);
const ProjectIconText = useSelector((state) => state.ProjectIconText);
// const [home,sethome] = React.useState("");
// const [article,setarticle] = React.useState("");
// const [about,setabout] = React.useState("");
// const [contact,setcontact] = React.useState("");
// const [navbar,setnavbar] = React.useState("");
// const [project,setproject] = React.useState("");
// React.useEffect(()=>{
// sethome(HomeIconText);
// setarticle(ArticleIconText);
// setabout(AboutIconText);
// setcontact(ContactIconText);
// setnavbar(NavbarIconText);
// setproject(ProjectIconText);
// },[]);
return (
<div
id="EditorContainer"
style={{ height: "100%", width: "100%", position: "absolute" }}
>
<div
className={`${classes.root} shadow rounded-lg`}
id="Editor"
style={{ borderBottom: "4px solid #777" }}
>
{/* {
(props.data.split==="bottom")?(
<div className="shadow" style={{height:"33px",borderTop:"3px solid #777",borderBottom:"3px solid #777",background:"#fff",zIndex:999998}}>
<div className="mx-auto" style={{background:"#777",border:"2px solid #777",width:"6%",marginTop:"7px"}}>
</div>
<div className="mt-1 mb-1 mx-auto" style={{background:"#777",border:"2px solid #777",width:"6%"}}>
</div>
</div>
):""
} */}
<div
className="shadow"
style={{
height: "45px",
borderTop: "2px solid #777",
border: "2.5px solid #777",
background: "#fff",
zIndex: 999998,
}}
>
<div
className="mx-auto"
style={{
width: "max-content",
position: "absolute",
left: "100%",
top: "0",
transform: "translateX(-99%)",
zIndex: 999998,
}}
>
<div
className="ml-auto"
style={{ width: "max-content" }}
>
<Button
className="my-0 px-3 text-primary"
style={{
borderRight: "2px solid #777",
borderLeft: "2px solid #777",
}}
onClick={() => {
props.split.topsplit();
}}
>
<HorizontalSplitIcon
style={{
fontSize: "20px",
transform: "rotate(180deg)",
}}
/>{" "}
topsplit
</Button>
<Button
className="my-0 px-3 text-primary"
style={{ borderRight: "2px solid #777" }}
onClick={() => {
props.split.bottomsplit();
}}
>
<HorizontalSplitIcon
style={{ fontSize: "20px" }}
/>{" "}
bottomsplit
</Button>
<Button
className="my-0 px-3 text-primary"
style={{ borderRight: "2px solid #777" }}
onClick={() => {
props.split.cancelsplit();
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-fullscreen-exit"
viewBox="0 0 16 16"
>
<path d="M5.5 0a.5.5 0 0 1 .5.5v4A1.5 1.5 0 0 1 4.5 6h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5zm5 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 10 4.5v-4a.5.5 0 0 1 .5-.5zM0 10.5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 6 11.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zm10 1a1.5 1.5 0 0 1 1.5-1.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4z" />
</svg>{" "}
cancelsplit
</Button>
<Button
className="text-danger my-0"
onClick={() => {
dispatch({
type: "OpenEditor",
payload: false,
});
}}
>
<CloseIcon />
</Button>
</div>
{/* <Button color="primary" variant="contained">
<ArrowForwardIosIcon style={{transform: "rotate(90deg)"}}/>
</Button> */}
</div>
</div>
<div
id="resize_element_x"
class="resize_element ui-resizable-handle ui-resizable-n"
></div>
<div>
<MuiThemeProvider theme={theme}>
<AppBar
// position="static"
style={{
width: "100%",
position: "sticky",
top: 0,
}}
className="shadow"
color="default"
>
<Tabs
value={TabPointer}
onChange={handleChange}
indicatorColor="secondary"
style={{ color: "#000", width: "100%" }}
variant="scrollable"
scrollButtons="auto"
aria-label="scrollable auto tabs example"
>
<Tab label="Navbar" {...a11yProps(0)} />
<Tab label="Profile Pic" {...a11yProps(1)} />
<Tab
label="Profile Section"
{...a11yProps(2)}
/>
<Tab
label="Profile BackGround"
{...a11yProps(3)}
/>
<Tab label="About" {...a11yProps(4)} />
<Tab label="Skills" {...a11yProps(5)} />
<Tab label="ProjectSection" {...a11yProps(6)} />
<Tab label="Education" {...a11yProps(7)} />
<Tab label="Contact" {...a11yProps(8)} />
<Tab label="Upload Resume" {...a11yProps(9)} />
</Tabs>
</AppBar>
</MuiThemeProvider>
<TabPanel value={TabPointer} index={0}>
<div
className="NavbarTab "
style={{
display: "flex",
flexWrap: "wrap",
flexDirection: "row",
justifyContent: "space-around",
}}
>
<div>
<NavbarTab /> <br></br>
</div>
<div
style={{
marginLeft: "3rem",
marginBottom: "3rem",
}}
>
<h4 className="text-dark text-center">
Navbar Background
</h4>
<span
id="SketchPicker"
className="disabledrag"
style={{ cursor: "pointer !important" }}
>
<SketchPicker
color={navbg}
onChange={(color) =>
dispatch({
type: "choosebg",
payload: color.hex,
})
}
style={{ cursor: "pointer" }}
/>
</span>
</div>
<div
style={{
marginLeft: "3rem",
marginBottom: "3rem",
}}
>
<h4 className="text-dark text-center text-capitalize">
Navbar Color
</h4>
<span
id="SketchPicker"
className="disabledrag"
style={{ cursor: "pointer !important" }}
>
<SketchPicker
color={NavbarIconColor}
onChange={(color) =>
dispatch({
type: "chooseiconcolor",
payload: color.hex,
})
}
style={{ cursor: "pointer" }}
/>
</span>
</div>
<div
style={{
marginLeft: "3rem",
marginBottom: "3rem",
}}
>
<h4 className="text-dark text-center">
Icons Color{" "}
</h4>
<span
id="SketchPicker"
className="disabledrag"
style={{ cursor: "pointer !important" }}
>
<SketchPicker
color={IconColor}
onChange={(color) =>
dispatch({
type: "iconcolor",
payload: color.hex,
})
}
style={{ cursor: "pointer" }}
/>
</span>
</div>
<div
style={{
marginLeft: "3rem",
marginBottom: "3rem",
}}
>
<h4 className="text-dark text-center">
OnScroll Navbg{" "}
</h4>
<span
id="SketchPicker"
className="disabledrag"
style={{ cursor: "pointer !important" }}
>
<SketchPicker
color={navbg}
onChange={(color) =>
dispatch({
type: "onscrollbg",
payload: color.hex,
})
}
style={{ cursor: "pointer" }}
/>
</span>
</div>
<div
style={{
marginLeft: "3rem",
marginBottom: "3rem",
}}
>
<h4 className="text-dark text-center">
{" "}
HoverEffect Color{" "}
</h4>
<span
id="SketchPicker"
className="disabledrag"
style={{ cursor: "pointer !important" }}
>
<SketchPicker
color={NavHoverColor}
onChange={(color) =>
dispatch({
type: "navhovercolor",
payload: color.hex,
})
}
style={{ cursor: "pointer" }}
/>
</span>
</div>
<div
style={{
marginLeft: "3rem",
marginBottom: "3rem",
display: "flex",
flexWrap: "wrap",
flexDirection: "column",
}}
>
<TextField
label="setnavbar"
id="Editorsetnavbar"
className="disabledrag mx-2"
// defaultValue={NavbarIconText}
// onChange={(e)=>{
// setnavbar(e.target.value);
// }}
defaultValue={NavbarIconText}
/>{" "}
<br />
<TextField
label="setabout"
id="Editorsetabout"
className="disabledrag mx-2"
// value={AboutIconText}
// onChange={(e)=>{
// setabout(e.target.value);
// }}
defaultValue={AboutIconText}
/>{" "}
<br />
<TextField
label="setskills"
id="Editorsetskills"
className="disabledrag mx-2"
// value={HomeIconText}
// onChange={(e)=>{
// sethome(e.target.value);
// }}
defaultValue={HomeIconText}
/>{" "}
<br />
<TextField
label="setproject"
id="Editorsetproject"
className="disabledrag mx-2"
// value={ProjectIconText}
// onChange={(e)=>{
// setproject(e.target.value);
// }}
defaultValue={ProjectIconText}
/>{" "}
<br />
<TextField
label="seteducation"
id="Editorseteducation"
className="disabledrag mx-2"
// onChange={(e)=>{
// setarticle(e.target.value);
// }}
defaultValue={ArticleIconText}
/>{" "}
<br />
<TextField
label="setcontact"
id="Editorsetcontact"
className="disabledrag mx-2"
// onChange={(e)=>{
// setcontact(e.target.value);
// }}
defaultValue={ContactIconText}
/>
<div
className="mt-3 mx-auto"
style={{
display: "block",
width: "max-content",
}}
>
<Button
variant="outlined"
color="primary"
onClick={() => {
dispatch({
type: "setnavbar",
payload:
document.querySelector(
"#Editorsetnavbar"
).value,
});
dispatch({
type: "setabout",
payload:
document.querySelector(
"#Editorsetabout"
).value,
});
dispatch({
type: "sethome",
payload:
document.querySelector(
"#Editorsetskills"
).value,
});
dispatch({
type: "setarticle",
payload: document.querySelector(
"#Editorseteducation"
).value,
});
dispatch({
type: "setproject",
payload:
document.querySelector(
"#Editorsetproject"
).value,
});
dispatch({
type: "setcontact",
payload:
document.querySelector(
"#Editorsetcontact"
).value,
});
}}
>
Apply text
</Button>
</div>
</div>
</div>
</TabPanel>
<TabPanel value={TabPointer} index={1}>
<EditProfilePic />
</TabPanel>
<TabPanel value={TabPointer} index={2}>
<ProfileSectionEditor />
</TabPanel>
<TabPanel value={TabPointer} index={3}>
<ProfilesectionBackGround />
</TabPanel>
<TabPanel value={TabPointer} index={4}>
<AboutSectionEditor />
</TabPanel>
<TabPanel value={TabPointer} index={5}>
<SkillsSectionEditor />
</TabPanel>
<TabPanel value={TabPointer} index={6}>
<ProjectEditor />
</TabPanel>
<TabPanel value={TabPointer} index={7}>
<EducationEditor />
</TabPanel>
<TabPanel value={TabPointer} index={8}>
<ContactTab />
</TabPanel>
<TabPanel value={TabPointer} index={9}>
<UploadResume />
</TabPanel>
</div>
</div>
</div>
);
}
Example #25
| Source File: ContactColors.jsx From portfolyo-mern with MIT License | 4 votes |
|
ContactColors = () => {
const ContactBgColors = useSelector(state=>state.ContactBgColors);
const dispatch = useDispatch();
// const [button,setbutton] = React.useState(["border","",""]);
return (
<div className="ContactColors">
<h4 className="text-center mt-5">font and bg colors</h4>
<div>
<div style={{ display: "flex", justifyContent: "space-around", flexWrap: "wrap" }}>
<div style={{ marginTop: "3rem", width: "max-content" }}>
<h4 className="text-center">Title Color</h4>
<span
id="SketchPicker"
className="disabledrag"
style={{ cursor: "pointer !important" }}
>
<SketchPicker
color={ContactBgColors.title}
onChange={(color) => dispatch({ type: "contactbgcolors", payload: {...ContactBgColors,title:color.hex} })} style={{ cursor: "pointer" }}
/>
</span>
</div>
<div style={{ marginTop: "3rem", width: "max-content" }}>
<h4 className="text-center">Dialogue Font</h4>
<span
id="SketchPicker"
className="disabledrag"
style={{ cursor: "pointer !important" }}
>
<SketchPicker
color={ContactBgColors.dialogue}
onChange={(color) => dispatch({ type: "contactbgcolors", payload: {...ContactBgColors,dialogue:color.hex} })} style={{ cursor: "pointer" }}
/>
</span>
</div>
<div style={{ marginTop: "3rem", width: "max-content" }}>
<h4 className="text-center">Headers Font</h4>
<span
id="SketchPicker"
className="disabledrag"
style={{ cursor: "pointer !important" }}
>
<SketchPicker
color={ContactBgColors.headers}
onChange={(color) => dispatch({ type: "contactbgcolors", payload: {...ContactBgColors,headers:color.hex }})} style={{ cursor: "pointer" }}
/>
</span>
</div>
<div style={{ marginTop: "3rem", width: "max-content" }}>
<h4 className="text-center">button Color</h4>
<span
id="SketchPicker"
className="disabledrag"
style={{ cursor: "pointer !important" }}
>
<SketchPicker
color={ContactBgColors.button}
onChange={(color) => dispatch({ type: "contactbgcolors", payload: {...ContactBgColors,button:color.hex} })} style={{ cursor: "pointer" }}
/>
</span>
</div>
<div style={{ marginTop: "3rem", width: "max-content" }}>
<h4 className="text-center">quotations Color</h4>
<span
id="SketchPicker"
className="disabledrag"
style={{ cursor: "pointer !important" }}
>
<SketchPicker
color={ContactBgColors.quotation}
onChange={(color) => dispatch({ type: "contactbgcolors", payload: {...ContactBgColors,quotation:color.hex} })} style={{ cursor: "pointer" }}
/>
</span>
</div>
<div style={{ marginTop: "3rem", width: "max-content" }}>
<h4 className="text-center">footer Color</h4>
<span
id="SketchPicker"
className="disabledrag"
style={{ cursor: "pointer !important" }}
>
<SketchPicker
color={ContactBgColors.footer}
onChange={(color) => dispatch({ type: "contactbgcolors", payload: {...ContactBgColors,footer:color.hex} })} style={{ cursor: "pointer" }}
/>
</span>
</div>
<div style={{ marginTop: "3rem", width: "max-content" }}>
<h4 className="text-center">Background Color</h4>
<span
id="SketchPicker"
className="disabledrag"
style={{ cursor: "pointer !important" }}
>
<SketchPicker
color={ContactBgColors.bgcolor}
onChange={(color) => dispatch({ type: "contactbgcolors", payload: {...ContactBgColors,bgcolor:color.hex} })} style={{ cursor: "pointer" }}
/>
</span>
</div>
</div>
</div>
<h4 className="text-center mt-4">Button Styles</h4>
<div className="row my-4">
<div className={`col-md-3 mx-auto p-4 ${ContactBgColors.border[0]}`}
onClick={()=>{
dispatch({type:"contactbgcolors", payload: {...ContactBgColors,border:["border","",""]}})
}}
>
<Button
variant="contained"
className="mx-auto"
style={{display:"block"}}
color="primary"
>
contained
</Button>
</div>
<div className={`col-md-3 mx-auto p-4 ${ContactBgColors.border[1]}`}
onClick={()=>{
dispatch({type:"contactbgcolors", payload: {...ContactBgColors,border:["","border",""]}})
}}
>
<Button
color="primary"
className="mx-auto"
style={{display:"block"}}
>
normal
</Button>
</div>
<div className={`col-md-3 mx-auto p-4 ${ContactBgColors.border[2]}`}
onClick={()=>{
dispatch({type:"contactbgcolors", payload: {...ContactBgColors,border:["","","border"]}})
}}
>
<Button
variant="outlined"
className="mx-auto"
style={{display:"block"}}
color="primary"
>
outlined
</Button>
</div>
</div>
</div>
)
}
Example #26
| Source File: IconEditor.js From eos-icons-landing with MIT License | 4 votes |
|
IconEditor = (props) => {
const apiBaseUrl = ICON_PICKER_API_URL
const { isActive, show, iconNames, iconType } = props
const [currentPosition, setCurrentPosition] = useState(0)
const [exportAs, setExportAs] = useState('svg')
const [exportSize, setExportSize] = useState('512')
const [color, setColor] = useState('#000000')
const [rotateAngle, setRotateAngle] = useState(0)
const [horizontalFlip, setHorizontalFlip] = useState(false)
const [verticalFlip, setVerticalFlip] = useState(false)
const [generating, setGenerate] = useState(false)
const [svgCode, setSvgCode] = useState([])
const [svgError, setSvgError] = useState(true)
const { state } = useContext(AppContext)
const iconEditorRef = useRef()
useClickOutside(iconEditorRef, () => show())
const exportSizes = [
'18',
'24',
'32',
'48',
'64',
'128',
'256',
'512',
'1024'
]
const exportTypes = ['svg']
if (iconType !== 'animated') exportTypes.push('png')
const changeColor = (color) => {
setColor(color.hex)
}
const rotateIcon = (angle) => {
angle += rotateAngle
setRotateAngle(angle)
}
// const changeExportType = () => {
// setExportAs(document.getElementsByClassName('export-type')[0].value)
// }
const changeExportSize = () => {
setExportSize(document.getElementsByClassName('export-size')[0].value)
}
const flipIconHorizontal = (e) => {
e.preventDefault()
setHorizontalFlip(!horizontalFlip)
}
const flipIconVertical = (e) => {
e.preventDefault()
setVerticalFlip(!verticalFlip)
}
const changePosition = (action) => {
if (currentPosition === iconNames.length - 1 && action === 1)
setCurrentPosition(0)
else if (currentPosition === 0 && action === -1)
setCurrentPosition(iconNames.length - 1)
else setCurrentPosition(currentPosition + action)
}
useEffect(() => {
document.getElementsByClassName('icon-preview')[0].style.color = color
try {
document
.getElementsByClassName('icon-preview')[0]
.getElementsByTagName('i')[0].style.transform = `scaleX(${
horizontalFlip ? -1 : 1
}) scaleY(${verticalFlip ? -1 : 1}) rotate(${rotateAngle}deg)`
} catch (error) {
// animated icons
document
.getElementsByClassName('icon-preview')[0]
.getElementsByTagName('div')[0].style.transform = `scaleX(${
horizontalFlip ? -1 : 1
}) scaleY(${verticalFlip ? -1 : 1}) rotate(${rotateAngle}deg)`
}
}, [
rotateAngle,
color,
horizontalFlip,
verticalFlip,
iconNames,
apiBaseUrl,
currentPosition
])
useEffect(() => {
const svgUrl = `${apiBaseUrl}/icon/svg/svgcode${
state.iconsTheme === 'outlined' ? '?theme=outlined' : ''
}`
const fetchSvg = async (Url, iconArray) => {
const payload = {
iconArray: iconArray,
customizationConfig: {
colorCode: color,
rotateAngle: rotateAngle,
flip: { horizontal: horizontalFlip, vertical: verticalFlip }
}
}
await axios
.post(Url, payload)
.then((req) => {
setSvgError(false)
setSvgCode(req.data.responseObject)
})
.catch(() => {
setSvgError(true)
})
}
fetchSvg(svgUrl, iconNames)
}, [
apiBaseUrl,
color,
horizontalFlip,
iconNames,
rotateAngle,
state.iconsTheme,
verticalFlip
])
const postDataToApi = async (params) => {
const { url, payload } = params
const response = await axios.post(url, payload)
return response.data
}
const downloadCustomizedIcon = (props) => {
const { timestamp } = props
const downloadEndPoints = `${apiBaseUrl}/download?ts=${timestamp}`
if (iconNames.length === 1) {
return window.open(
`${apiBaseUrl}/icon-download?ts=${timestamp}&type=${exportAs}&iconName=${iconNames[0]}`,
'_blank'
)
}
return window.open(downloadEndPoints, '_blank')
}
const generateCustomizedIcon = (e) => {
if (!generating) {
e.preventDefault()
setGenerate(true)
postDataToApi({
url: `${apiBaseUrl}/icon-customization${
state.iconsTheme === 'outlined' ? '?theme=outlined' : ''
}`,
payload: {
icons: iconNames,
exportAs: exportAs,
exportSize: exportSize,
customizationConfig: {
colorCode: color,
rotateAngle: rotateAngle,
flip: { horizontal: horizontalFlip, vertical: verticalFlip }
}
}
}).then((res) => {
setGenerate(false)
downloadCustomizedIcon({ timestamp: res })
})
}
}
return isActive ? (
<div className='icon-editor'>
<div className='icon-editor-card' ref={iconEditorRef}>
<div className='close' onClick={show} />
<h2>Customize Icon</h2>
<div className='flex flex-row icon-editor-content'>
<div>
<p>Color Picker</p>
<SketchPicker
className='color-picker'
color={color}
disableAlpha={true}
onChange={changeColor}
/>
<br />
{!svgError && (
<div>
<p>SVG Code:</p>
<div className='input-group'>
<div className='input-group-information'>
<input
id='copy-svg'
className='input-group-element'
readOnly='readOnly'
value={`${svgCode[currentPosition]}`}
disabled={!svgCode.length}
/>
<Button
type='button'
disabled={!svgCode.length}
onClick={() => {
document.getElementById('copy-svg').select()
document.execCommand('copy')
}}
>
<i className='eos-icons eos-18'>content_copy</i>
</Button>
</div>
</div>
</div>
)}
</div>
<div className='icon-div'>
<p>
Icon Preview{' '}
{iconNames.length > 1
? `: ${currentPosition + 1} of ${iconNames.length}`
: ''}
</p>
<div className='icon-preview-box'>
{iconNames.length > 1 ? (
<div onClick={() => changePosition(-1)}>
<i className='eos-icons nxt-icon-btn'>keyboard_arrow_left</i>
</div>
) : (
''
)}
<div className='icon-preview'>
{iconType === 'animated' ? (
<>
<ReactSVG
src={require(`eos-icons/animated-svg/${iconNames[currentPosition]}.svg`)}
beforeInjection={(svg) => {
svg.setAttribute('fill', color)
}}
/>
</>
) : (
<i
className={`eos-icons${
state.iconsTheme === 'outlined' ? '-outlined' : ''
}`}
>
{iconNames[currentPosition]}
</i>
)}
</div>
{iconNames.length > 1 ? (
<div onClick={() => changePosition(1)}>
<i className='eos-icons nxt-icon-btn'>keyboard_arrow_right</i>
</div>
) : (
''
)}
</div>
<div className='transform-div'>
<div>
<p>Rotate</p>
<div>
<button onClick={() => rotateIcon(-90)}>
<i className='eos-icons'>rotate_left</i>
</button>
<button onClick={() => rotateIcon(90)}>
<i className='eos-icons'>rotate_right</i>
</button>
</div>
</div>
<div>
<p>Flip</p>
<div>
<button onClick={flipIconHorizontal}>
<i className='eos-icons'>flip</i>
</button>
<button onClick={flipIconVertical}>
<i className='eos-icons rotate-flip-icon'>flip</i>
</button>
</div>
</div>
</div>
<div className='type-selector'>
{exportTypes.map((type, key) => (
<div key={key} className='type-selector-option'>
<input
type='radio'
name={type}
value={type}
checked={type === exportAs}
onChange={() => {
setExportAs(type)
}}
/>
<label htmlFor={type}>{type.toUpperCase()}</label>
</div>
))}
</div>
{exportAs === 'png' ? (
<div className='size-selector'>
<label htmlFor='size-select'>Select Size</label>
<div className='dropdown'>
<select
name='size-select'
defaultValue={exportSize}
className='export-size'
onChange={changeExportSize}
>
{exportSizes.map((size, key) => (
<option key={key} value={`${size}`}>
{`${size}`} x {`${size}`} px
</option>
))}
</select>
<i className='eos-icons'>keyboard_arrow_down</i>
</div>
</div>
) : (
''
)}
<div className='export-btn'>
<Button type='button' onClick={generateCustomizedIcon}>
{!generating ? (
<span>Export as {exportAs.toUpperCase()}</span>
) : (
<span>
Exporting Icon{' '}
<img
className='btn-loading-icon'
src={loading}
alt='loading-icon'
/>
</span>
)}
</Button>
</div>
</div>
</div>
</div>
</div>
) : (
''
)
}
