Skip to content

Commit

Permalink
add IDs to inputs
Browse files Browse the repository at this point in the history
  • Loading branch information
@Soare-Robert-Daniel
Soare-Robert-Daniel committed Jan 27, 2021
1 parent 133dec0 commit ec5bfd3
Show file tree
Hide file tree
Showing 4 changed files with 22 additions and 28 deletions.
7 changes: 4 additions & 3 deletions src/Creator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,10 +143,8 @@ const Creator: React.FunctionComponent<unknown> = () => {
<div className="options">
<div className="option">
<a
id="btn-select-logo"
onClick={() => {
// document
// .querySelector<HTMLDivElement>("#right-menu")
// ?.scrollTo()
if (window.innerHeight <= 812) {
console.log(window.innerHeight)
window.scrollTo(
Expand All @@ -164,6 +162,7 @@ const Creator: React.FunctionComponent<unknown> = () => {
</div>
<div className="option">
<a
id="btn-select-typography"
onClick={() => {
if (window.innerHeight <= 812) {
window.scrollTo(
Expand All @@ -181,6 +180,7 @@ const Creator: React.FunctionComponent<unknown> = () => {
</div>
<div className="option">
<a
id="btn-select-layout"
onClick={() => {
if (window.innerHeight <= 812) {
window.scrollTo(
Expand All @@ -198,6 +198,7 @@ const Creator: React.FunctionComponent<unknown> = () => {
</div>
<div className="option">
<a
id="btn-select-colors"
onClick={() => {
if (window.innerHeight <= 812) {
window.scrollTo(
Expand Down
7 changes: 3 additions & 4 deletions src/Start.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,11 @@ import ReactGA from "react-ga"

/**
* This is the main component for the Start page
*
*
* It use the global object `window.logomaker.parentLink` as link for the `Back` button
*/

const Start: React.FunctionComponent<unknown> = () => {

const setTitleText = (value: string) => {
UIStore.update((s) => {
s.title.text = value
Expand Down Expand Up @@ -83,14 +82,14 @@ const Start: React.FunctionComponent<unknown> = () => {
<label>Logo Text</label>
<input
type="text"
id="logo-text-input"
id="input-logo-text"
value={UIStore.useState((s) => s.title.text)}
onChange={(e) => setTitleText(e.target.value)}
/>
<label>Slogan text (Optional)</label>
<input
type="text"
id="slogan-text-input"
id="input-logo-slogan"
value={UIStore.useState((s) => s.slogan.text)}
onChange={(e) => setSloganText(e.target.value)}
/>
Expand Down
18 changes: 9 additions & 9 deletions src/components/ui/SelectColors.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,16 +31,12 @@ const SelectColor: React.FunctionComponent<unknown> = () => {
})

/**
* This function will handle inputs by updating the internal & user interface store values.
*
* This function will handle inputs by updating the internal & user interface store values.
*
* @param option The owner of the color
* @param value The value of the color
*/
const onInputChangeFor = (
option: "background" | "logo" | "title" | "slogan",
value: string
) => {

const onInputChangeFor = (option: "background" | "logo" | "title" | "slogan", value: string) => {
// send the values to the user interface
switch (option) {
case "background":
Expand Down Expand Up @@ -115,8 +111,8 @@ const SelectColor: React.FunctionComponent<unknown> = () => {
}

/**
* This will show/hide the color picker of the element
*
* This will show/hide the color picker of the element
*
* @param option The element bound to the toggle
*/
const toggleColorEditorFor = (option: "background" | "logo" | "title" | "slogan") => {
Expand Down Expand Up @@ -162,6 +158,7 @@ const SelectColor: React.FunctionComponent<unknown> = () => {
onClick={() => toggleColorEditorFor("background")}
/>
<input
id="input-color-background"
value={inputValues.background}
onChange={(e) => onInputChangeFor("background", e.target.value)}
/>
Expand All @@ -187,6 +184,7 @@ const SelectColor: React.FunctionComponent<unknown> = () => {
onClick={() => toggleColorEditorFor("logo")}
/>
<input
id="input-color-logo"
value={inputValues.logo}
onChange={(e) => onInputChangeFor("logo", e.target.value)}
/>
Expand All @@ -213,6 +211,7 @@ const SelectColor: React.FunctionComponent<unknown> = () => {
onClick={() => toggleColorEditorFor("title")}
/>
<input
id="input-color-title"
value={inputValues.title}
placeholder="Add a color in HEX format."
onChange={(e) => onInputChangeFor("title", e.target.value)}
Expand All @@ -239,6 +238,7 @@ const SelectColor: React.FunctionComponent<unknown> = () => {
onClick={() => toggleColorEditorFor("slogan")}
/>
<input
id="input-color-slogan"
value={inputValues.slogan}
onChange={(e) => onInputChangeFor("slogan", e.target.value)}
/>
Expand Down
18 changes: 6 additions & 12 deletions src/components/ui/SelectTypography.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@ const SelectTypography: React.FunctionComponent<unknown> = () => {
<h1>LOGO</h1>
<label htmlFor="select-title-text">Text</label>
<input
id="input-typography-text"
value={UIStore.useState((s) => s.title.text)}
onChange={(e) => onTitleTextChange(e.target.value)}
/>
Expand All @@ -103,9 +104,7 @@ const SelectTypography: React.FunctionComponent<unknown> = () => {
id="select-title-font-family"
className="font-select"
isSearchable={false}
defaultValue={
fontOptions.filter(({ value }) => value === defaultTitleFontFamily)[0]
}
defaultValue={fontOptions.filter(({ value }) => value === defaultTitleFontFamily)[0]}
onChange={onTitleFontFamilyChange}
options={fontOptions}
styles={disableBoxShadow}
Expand All @@ -115,9 +114,7 @@ const SelectTypography: React.FunctionComponent<unknown> = () => {
id="select-title-font-size"
className="font-select"
isSearchable={false}
defaultValue={titleSizeOptions.filter(
({ value }) => value === defaultTitleFontSize
)}
defaultValue={titleSizeOptions.filter(({ value }) => value === defaultTitleFontSize)}
options={titleSizeOptions}
onChange={onTitleFontSizeChange}
styles={disableBoxShadow}
Expand All @@ -127,6 +124,7 @@ const SelectTypography: React.FunctionComponent<unknown> = () => {
<h1>SLOGAN (Optional)</h1>
<label htmlFor="select-slogan-text">Text</label>
<input
id="input-typography-slogan"
value={UIStore.useState((s) => s.slogan.text)}
onChange={(e) => onSloganTextChange(e.target.value)}
/>
Expand All @@ -135,9 +133,7 @@ const SelectTypography: React.FunctionComponent<unknown> = () => {
id="select-slogan-font-family"
className="font-select"
isSearchable={false}
defaultValue={fontOptions.filter(
({ value }) => value === defaultSloganFontFamily
)}
defaultValue={fontOptions.filter(({ value }) => value === defaultSloganFontFamily)}
onChange={onSloganFontFamilyChange}
options={fontOptions}
styles={disableBoxShadow}
Expand All @@ -147,9 +143,7 @@ const SelectTypography: React.FunctionComponent<unknown> = () => {
id="select-slogan-font-size"
className="font-select"
isSearchable={false}
defaultValue={sloganSizeOptions.filter(
({ value }) => value === defaultSloganFontSize
)}
defaultValue={sloganSizeOptions.filter(({ value }) => value === defaultSloganFontSize)}
options={sloganSizeOptions}
onChange={onSloganFontSizeChange}
styles={disableBoxShadow}
Expand Down

0 comments on commit ec5bfd3

Please sign in to comment.