flip/og-image
1
0
Fork 0
mirror of https://github.com/FlipsideCrypto/og-image.git synced 2026-02-06 10:46:43 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Replaced the select with input field for images (#184)

Browse Source 
* Replace select with input

* Update index.ts

* Update index.ts

* Update index.ts

* Fixes review comments (spacing and placeholders)

* Fix space again

* Added type number and defaulted to empty values

* Update index.ts

* Revert unncessary changes

* Add newline

* Change order of props

* Small cleanup

Co-authored-by: Steven <steven@ceriously.com>
This commit is contained in:
Strek 2022-02-24 01:07:47 +05:30 committed by GitHub
parent ded43bc99e
commit 81045e8789
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 36 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
public/style.css
View File

@ -102,6 +102,11 @@ button:hover {
vertical-align: middle;
width: 100%;
}
.input-outer-wrapper.small {
height: 24px;
min-width: 100px;
width: 100px;
}
.input-outer-wrapper:hover {
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
@ -348,3 +353,11 @@ img {
right: -52%;
}
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}

59
web/index.ts
View File

@ -60,15 +60,18 @@ const Dropdown = ({ options, value, onchange, small }: DropdownProps) => {
interface TextInputProps {
value: string;
oninput: (val: string) => void;
small: boolean;
placeholder?: string;
type?: string
}
const TextInput = ({ value, oninput }: TextInputProps) => {
const TextInput = ({ value, oninput, small, type = 'text', placeholder = '' }: TextInputProps) => {
return H('div',
{ className: 'input-outer-wrapper' },
{ className: 'input-outer-wrapper' + (small ? ' small' : '') },
H('div',
{ className: 'input-inner-wrapper' },
H('input',
{ type: 'text', value, oninput: (e: any) => oninput(e.target.value) }
{ type, value, placeholder, oninput: (e: any) => oninput(e.target.value) }
)
)
);
@ -154,27 +157,6 @@ const imageDarkOptions: DropdownOption[] = [
{ text: 'Hyper', value: 'https://assets.vercel.com/image/upload/front/assets/design/hyper-bw-logo.svg' },
];
const widthOptions = [
{ text: 'width', value: 'auto' },
{ text: '50', value: '50' },
{ text: '100', value: '100' },
{ text: '150', value: '150' },
{ text: '200', value: '200' },
{ text: '250', value: '250' },
{ text: '300', value: '300' },
{ text: '350', value: '350' },
];
const heightOptions = [
{ text: 'height', value: 'auto' },
{ text: '50', value: '50' },
{ text: '100', value: '100' },
{ text: '150', value: '150' },
{ text: '200', value: '200' },
{ text: '250', value: '250' },
{ text: '300', value: '300' },
{ text: '350', value: '350' },
];
interface AppState extends ParsedRequest {
loading: boolean;
@ -215,6 +197,7 @@ const App = (_: any, state: AppState, setState: SetState) => {
selectedImageIndex = 0,
overrideUrl = null,
} = state;
const mdValue = md ? '1' : '0';
const imageOptions = theme === 'light' ? imageLightOptions : imageDarkOptions;
const url = new URL(window.location.origin);
@ -299,21 +282,23 @@ const App = (_: any, state: AppState, setState: SetState) => {
}),
H('div',
{ className: 'field-flex' },
H(Dropdown, {
options: widthOptions,
H(TextInput, {
value: widths[0],
type: 'number',
placeholder: 'width',
small: true,
onchange: (val: string) => {
oninput: (val: string) => {
let clone = [...widths];
clone[0] = val;
setLoadingState({ widths: clone });
}
}),
H(Dropdown, {
options: heightOptions,
H(TextInput, {
value: heights[0],
type: 'number',
placeholder: 'height',
small: true,
onchange: (val: string) => {
oninput: (val: string) => {
let clone = [...heights];
clone[0] = val;
setLoadingState({ heights: clone });
@ -335,21 +320,23 @@ const App = (_: any, state: AppState, setState: SetState) => {
}),
H('div',
{ className: 'field-flex' },
H(Dropdown, {
options: widthOptions,
H(TextInput, {
value: widths[i + 1],
type: 'number',
placeholder: 'width',
small: true,
onchange: (val: string) => {
oninput: (val: string) => {
let clone = [...widths];
clone[i + 1] = val;
setLoadingState({ widths: clone });
}
}),
H(Dropdown, {
options: heightOptions,
H(TextInput, {
value: heights[i + 1],
type: 'number',
placeholder: 'height',
small: true,
onchange: (val: string) => {
oninput: (val: string) => {
let clone = [...heights];
clone[i + 1] = val;
setLoadingState({ heights: clone });