From b5bad5281923b607dda5ae9432670bfeef04f647 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Sun, 17 Jul 2022 11:31:29 +0100
Subject: [PATCH] feat: better components
---
examples/web/index.css | 4 +-
examples/web/index.html | 30 ++++++------
examples/web/package.json | 2 +-
examples/web/react/app.tsx | 6 +--
.../web/react/components/button/button.css | 46 ++++++++++---------
.../web/react/components/button/button.tsx | 18 ++++++--
6 files changed, 59 insertions(+), 47 deletions(-)
diff --git a/examples/web/index.css b/examples/web/index.css
index 760e06b7..eb47a643 100644
--- a/examples/web/index.css
+++ b/examples/web/index.css
@@ -473,12 +473,12 @@ p {
-webkit-user-select: none;
}
-.modal-container > .modal .modal-buttons > .button.tiny {
+.modal-container > .modal .modal-buttons > .button.simple {
margin-right: 12px;
min-width: 120px;
}
-.modal-container > .modal .modal-buttons > .button.tiny:last-child {
+.modal-container > .modal .modal-buttons > .button.simple:last-child {
margin-right: 0px;
}
diff --git a/examples/web/index.html b/examples/web/index.html
index 96e55af5..a192760d 100644
--- a/examples/web/index.html
+++ b/examples/web/index.html
@@ -77,16 +77,16 @@
<div id="section-diag" class="section">
<dl class="diag">
<dt>Engine</dt>
- <dd id="engine" class="button tiny">-</dd>
+ <dd id="engine" class="button simple">-</dd>
<dt>ROM</dt>
<dd id="rom-name">-</dd>
<dt>ROM Size</dt>
<dd><span id="rom-size">-</span> bytes</dd>
<dt>CPU Frequency</dt>
<dd>
- <span id="logic-frequency-minus" class="button tiny">-</span>
+ <span id="logic-frequency-minus" class="button simple">-</span>
<span id="logic-frequency">-</span> Hz
- <span id="logic-frequency-plus" class="button tiny">+</span></dd>
+ <span id="logic-frequency-plus" class="button simple">+</span></dd>
<dt>Framerate</dt>
<dd><span id="fps-count">-</span> fps</dd>
</dl>
@@ -94,31 +94,31 @@
<div id="separator-diag" class="separator"></div>
<div class="section">
<div class="button-area">
- <span id="button-pause" class="button tiny border padded">
+ <span id="button-pause" class="button simple border padded">
<img src="res/pause.svg" alt="pause" /><span>Pause</span>
</span>
- <span id="button-reset" class="button tiny border padded">
+ <span id="button-reset" class="button simple border padded">
<img src="res/reset.svg" alt="reset" /><span>Reset</span>
</span>
- <span id="button-benchmark" class="button tiny border padded">
+ <span id="button-benchmark" class="button simple border padded">
<img src="res/bolt.svg" alt="bolt" /><span>Benchmark</span>
</span>
- <span id="button-fullscreen" class="button tiny border padded">
+ <span id="button-fullscreen" class="button simple border padded">
<img src="res/maximise.svg" alt="maximise" /><span>Fullscreen</span>
</span>
- <span id="button-keyboard" class="button tiny border padded">
+ <span id="button-keyboard" class="button simple border padded">
<img src="res/dialpad.svg" alt="info" /><span>Keyboard</span>
</span>
- <span id="button-information" class="button tiny border padded enabled">
+ <span id="button-information" class="button simple border padded enabled">
<img src="res/info.svg" alt="info" /><span>Information</span>
</span>
- <span id="button-debug" class="button tiny border padded">
+ <span id="button-debug" class="button simple border padded">
<img src="res/bug.svg" alt="bug" /><span>Debug</span>
</span>
- <span id="button-theme" class="button tiny border padded">
+ <span id="button-theme" class="button simple border padded">
<img src="res/marker.svg" alt="marker" /><span>Theme</span>
</span>
- <span id="button-upload" class="button tiny border padded file">
+ <span id="button-upload" class="button simple border padded file">
<img src="res/upload.svg" alt="upload" /><span>Load ROM</span>
<input type="file" id="button-upload-file" name="button-upload-file" accept=".gb">
</span>
@@ -133,15 +133,15 @@
<div id="modal-container" class="modal-container">
<div id="modal" class="modal">
<div class="modal-top-buttons">
- <span id="modal-close" class="button tiny rounded no-text">
+ <span id="modal-close" class="button simple rounded no-text">
<img class="medium" src="res/close.svg" alt="close" />
</span>
</div>
<h2 id="modal-title" class="modal-title"></h2>
<p id="modal-text" class="modal-text"></p>
<div class="modal-buttons">
- <span id="modal-cancel" class="button tiny red border padded-large">Cancel</span>
- <span id="modal-confirm" class="button tiny border padded-large">Confirm</span>
+ <span id="modal-cancel" class="button simple red border padded-large">Cancel</span>
+ <span id="modal-confirm" class="button simple border padded-large">Confirm</span>
</div>
</div>
</div>
diff --git a/examples/web/package.json b/examples/web/package.json
index bd9fcb70..a653782f 100644
--- a/examples/web/package.json
+++ b/examples/web/package.json
@@ -10,7 +10,7 @@
"scripts": {
"build": "parcel build index.html",
"dev": "parcel index.html",
- "pretty": "prettier --config .prettierrc \"./**/*.{ts,json}\" --write",
+ "pretty": "prettier --config .prettierrc \"./**/*.{ts,tsx,json}\" --write",
"start": "npm run build",
"watch": "parcel watch index.html"
},
diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx
index 64bc0bf0..ee855b56 100644
--- a/examples/web/react/app.tsx
+++ b/examples/web/react/app.tsx
@@ -7,12 +7,12 @@ import "./app.css";
export const App = () => {
const getText = () => "Hello World";
- return <Button text={ getText() } />;
-}
+ return <Button text={getText()} />;
+};
export const startApp = (element: string) => {
const root = ReactDOM.createRoot(document.getElementById(element)!);
root.render(<App />);
-}
+};
export default App;
diff --git a/examples/web/react/components/button/button.css b/examples/web/react/components/button/button.css
index ccb443e8..ca261c4b 100644
--- a/examples/web/react/components/button/button.css
+++ b/examples/web/react/components/button/button.css
@@ -1,16 +1,20 @@
.button {
- font-size: 12px;
cursor: pointer;
+ display: inline-block;
+}
+
+.button.small {
+ font-size: 14px;
+ line-height: 24px;
}
-.button.tiny {
+.button.simple {
border-radius: 96px 96px 96px 96px;
-o-border-radius: 96px 96px 96px 96px;
-ms-border-radius: 96px 96px 96px 96px;
-moz-border-radius: 96px 96px 96px 96px;
-khtml-border-radius: 96px 96px 96px 96px;
-webkit-border-radius: 96px 96px 96px 96px;
- display: inline-block;
padding: 0px 8px 0px 8px;
user-select: none;
-o-user-select: none;
@@ -20,71 +24,71 @@
-webkit-user-select: none;
}
-.button.tiny.border {
+.button.simple.border {
border: 1px solid #ffffff;
}
-.button.tiny.padded {
+.button.simple.padded {
padding: 4px 10px 4px 10px;
}
-.button.tiny.padded-large {
+.button.simple.padded-large {
padding: 4px 14px 4px 14px;
}
-.button.tiny.rounded {
+.button.simple.rounded {
padding: 6px 6px 6px 6px;
}
-.button.tiny.enabled {
+.button.simple.enabled {
background-color: #50cb93;
}
-.button.tiny.file {
+.button.simple.file {
position: relative;
}
-.button.tiny:hover {
+.button.simple:hover {
background-color: #50cb93;
}
-.button.tiny.red:hover {
+.button.simple.red:hover {
background-color: #e63946;
}
-.button.tiny:active {
+.button.simple:active {
background-color: #2a9d8f;
}
-.button.tiny.red:active {
+.button.simple.red:active {
background-color: #bf2a37;
}
-.button.tiny > img {
+.button.simple > img {
margin-right: 6px;
margin-top: 2px;
vertical-align: top;
width: 13px;
}
-.button.tiny > img.medium {
+.button.simple > img.medium {
width: 20px;
}
-.button.tiny > img.large {
+.button.simple > img.large {
width: 28px;
}
-.button.tiny > img.very-large {
+.button.simple > img.very-large {
width: 38px;
}
-.button.tiny.no-text > img {
+.button.simple.no-text > img {
margin-right: 0px;
margin-top: 0px;
}
-.button.tiny.file > input[type="file"] {
+.button.simple.file > input[type="file"] {
cursor: pointer;
height: 100%;
left: 0px;
@@ -100,6 +104,6 @@
width: 100%;
}
-.button.tiny.file > input[type="file"]::-webkit-file-upload-button {
+.button.simple.file > input[type="file"]::-webkit-file-upload-button {
cursor: pointer;
-}
\ No newline at end of file
+}
diff --git a/examples/web/react/components/button/button.tsx b/examples/web/react/components/button/button.tsx
index c8dda14c..39350d86 100644
--- a/examples/web/react/components/button/button.tsx
+++ b/examples/web/react/components/button/button.tsx
@@ -2,12 +2,20 @@ import React, { FC } from "react";
import "./button.css";
-export const Button: FC<{ text: string, style?: string[] }> = ({ text, style = ["tiny", "border"] }) => {
+export const Button: FC<{ text: string; size?: string; style?: string[] }> = ({
+ text,
+ size = "small",
+ style = ["simple", "border"]
+}) => {
const onClick = () => {
alert("Hello World");
- }
+ };
- const classes = () => ["button", ...style].join(" ")
+ const classes = () => ["button", size, ...style].join(" ");
- return <span className={classes()} onClick={onClick}>{ text }</span>;
-}
+ return (
+ <span className={classes()} onClick={onClick}>
+ {text}
+ </span>
+ );
+};
--
GitLab