From 57c3c71ea595f29f52948a838f496d2b886f7294 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Tue, 1 Nov 2022 10:00:33 +0000
Subject: [PATCH] fix: magnify button
---
examples/web/index.css | 42 -------------------
examples/web/react/app.tsx | 25 +++++------
.../web/react/components/display/display.css | 29 +++++++++++++
3 files changed, 42 insertions(+), 54 deletions(-)
diff --git a/examples/web/index.css b/examples/web/index.css
index b04f343e..d8dd1b1d 100644
--- a/examples/web/index.css
+++ b/examples/web/index.css
@@ -110,45 +110,3 @@ p {
content: '';
display: block;
}
-
-.button-area {
- user-select: none;
- -o-user-select: none;
- -ms-user-select: none;
- -moz-user-select: none;
- -khtml-user-select: none;
- -webkit-user-select: none;
-}
-
-.button-area > * {
- margin-bottom: 12px;
-}
-
-.magnify-button {
- cursor: pointer;
- display: inline-block;
- transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
- -o-transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
- -ms-transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
- -moz-transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
- -khtml-transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
- -webkit-transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
-}
-
-.magnify-button:hover {
- transform: scale(1.3, 1.3);
- -o-transform: scale(1.3, 1.3);
- -ms-transform: scale(1.3, 1.3);
- -moz-transform: scale(1.3, 1.3);
- -khtml-transform: scale(1.3, 1.3);
- -webkit-transform: scale(1.3, 1.3);
-}
-
-.magnify-button:active {
- transform: scale(1.0, 1.0);
- -o-transform: scale(1.0, 1.0);
- -ms-transform: scale(1.0, 1.0);
- -moz-transform: scale(1.0, 1.0);
- -khtml-transform: scale(1.0, 1.0);
- -webkit-transform: scale(1.0, 1.0);
-}
diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx
index e7191f85..089ac297 100644
--- a/examples/web/react/app.tsx
+++ b/examples/web/react/app.tsx
@@ -501,18 +501,6 @@ export const App: FC<AppProps> = ({ emulator, backgrounds = ["264653"] }) => {
/>
}
/>
- <Pair
- key="button-frequency"
- name={"CPU Frequency"}
- valueNode={
- <ButtonIncrement
- value={200}
- delta={100}
- min={0}
- suffix={"Hz"}
- />
- }
- />
<Pair
key="rom"
name={"ROM"}
@@ -523,6 +511,19 @@ export const App: FC<AppProps> = ({ emulator, backgrounds = ["264653"] }) => {
name={"ROM Size"}
value={romInfo.name ? `${romInfo.size} bytes` : "-"}
/>
+
+ <Pair
+ key="button-frequency"
+ name={"CPU Frequency"}
+ valueNode={
+ <ButtonIncrement
+ value={4.19}
+ delta={0.1}
+ min={0}
+ suffix={"MHz"}
+ />
+ }
+ />
<Pair
key="rom-type"
name={"ROM Type"}
diff --git a/examples/web/react/components/display/display.css b/examples/web/react/components/display/display.css
index 1912fc41..0781b767 100644
--- a/examples/web/react/components/display/display.css
+++ b/examples/web/react/components/display/display.css
@@ -15,6 +15,35 @@
z-index: 6;
}
+.display > .magnify-button {
+ cursor: pointer;
+ display: inline-block;
+ transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
+ -o-transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
+ -ms-transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
+ -moz-transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
+ -khtml-transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
+ -webkit-transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+.display > .magnify-button:hover {
+ transform: scale(1.3, 1.3);
+ -o-transform: scale(1.3, 1.3);
+ -ms-transform: scale(1.3, 1.3);
+ -moz-transform: scale(1.3, 1.3);
+ -khtml-transform: scale(1.3, 1.3);
+ -webkit-transform: scale(1.3, 1.3);
+}
+
+.display > .magnify-button:active {
+ transform: scale(1.0, 1.0);
+ -o-transform: scale(1.0, 1.0);
+ -ms-transform: scale(1.0, 1.0);
+ -moz-transform: scale(1.0, 1.0);
+ -khtml-transform: scale(1.0, 1.0);
+ -webkit-transform: scale(1.0, 1.0);
+}
+
.display > .display-minimize {
bottom: 22px;
display: none;
--
GitLab