Skip to content
Snippets Groups Projects
Verified Commit b5bad528 authored by João Magalhães's avatar João Magalhães :rocket:
Browse files

feat: better components

parent 8840fba5
No related branches found
No related tags found
1 merge request!8Support for react.js components
Pipeline #1056 passed
Stage: build
Hide whitespace changes
Inline Side-by-side
examples/web/index.css
+ 2
− 2
View file @ b5bad528
......@@ -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;
}
......
examples/web/index.html
+ 15
− 15
View file @ b5bad528
......@@ -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>
......
examples/web/package.json
+ 1
− 1
View file @ b5bad528
......@@ -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"
},
......
examples/web/react/app.tsx
+ 3
− 3
View file @ b5bad528
......@@ -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;
examples/web/react/components/button/button.css
+ 25
− 21
View file @ b5bad528
.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
}
examples/web/react/components/button/button.tsx
+ 13
− 5
View file @ b5bad528
......@@ -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>
);
};
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment