From 83fb40c72f053aa46d7590bed264ab17714e38c5 Mon Sep 17 00:00:00 2001 From: cheymos Date: Sat, 9 Nov 2024 21:06:21 +0600 Subject: [PATCH 1/4] Move styles from index.html to separate index.css in dartpad_ui --- pkgs/dartpad_ui/web/index.html | 57 +--------------------------- pkgs/dartpad_ui/web/styles/index.css | 57 ++++++++++++++++++++++++++++ 2 files changed, 59 insertions(+), 55 deletions(-) create mode 100644 pkgs/dartpad_ui/web/styles/index.css diff --git a/pkgs/dartpad_ui/web/index.html b/pkgs/dartpad_ui/web/index.html index cd0867d87..d57ab69ce 100644 --- a/pkgs/dartpad_ui/web/index.html +++ b/pkgs/dartpad_ui/web/index.html @@ -25,62 +25,9 @@ - + + - - diff --git a/pkgs/dartpad_ui/web/styles/index.css b/pkgs/dartpad_ui/web/styles/index.css new file mode 100644 index 000000000..286e295b0 --- /dev/null +++ b/pkgs/dartpad_ui/web/styles/index.css @@ -0,0 +1,57 @@ +.CodeMirror { + height: 100%; +} + +.squiggle-info { + border-bottom: 2px solid #7ea7d8; +} + +.squiggle-warning { + border-bottom: 2px solid #d9d077; +} + +.squiggle-error { + border-bottom: 2px solid #ef5350; +} + +.squiggle-deprecation { + text-decoration: line-through; + text-decoration-thickness: 10%; +} + +.CodeMirror-simplescroll-horizontal div, +.CodeMirror-simplescroll-vertical div { + position: absolute; + -moz-box-sizing: border-box; + box-sizing: border-box; + border-radius: 4px; +} + +.CodeMirror-simplescroll-horizontal, +.CodeMirror-simplescroll-vertical { + position: absolute; + z-index: 6; +} + +.CodeMirror-simplescroll-horizontal { + bottom: 0; + left: 0; + height: 9px; +} + +.CodeMirror-simplescroll-horizontal div { + bottom: 0; + height: 100%; +} + +.CodeMirror-simplescroll-vertical { + right: 0; + top: 0; + width: 9px; +} + +.CodeMirror-simplescroll-vertical div { + right: 0; + width: 100%; +} + From d17bf78daa4eb20f7c4a565177447fd377a2a213 Mon Sep 17 00:00:00 2001 From: cheymos Date: Sat, 9 Nov 2024 21:09:50 +0600 Subject: [PATCH 2/4] Add splash screen for dartpad_ui --- pkgs/dartpad_ui/web/flutter_bootstrap.js | 25 +++++++++++ pkgs/dartpad_ui/web/icons/Icon.svg | 1 + pkgs/dartpad_ui/web/index.html | 15 +++++-- pkgs/dartpad_ui/web/styles/index.css | 55 ++++++++++++++++++++++++ 4 files changed, 92 insertions(+), 4 deletions(-) create mode 100644 pkgs/dartpad_ui/web/flutter_bootstrap.js create mode 100644 pkgs/dartpad_ui/web/icons/Icon.svg diff --git a/pkgs/dartpad_ui/web/flutter_bootstrap.js b/pkgs/dartpad_ui/web/flutter_bootstrap.js new file mode 100644 index 000000000..8ad2c927c --- /dev/null +++ b/pkgs/dartpad_ui/web/flutter_bootstrap.js @@ -0,0 +1,25 @@ +{{flutter_js}} +{{flutter_build_config}} + +_flutter.loader.load(); + +const splash = document.querySelector('#splash'); + +_initSplashTheme(); + +window.addEventListener('flutter-first-frame', () => { + splash.classList.add('done'); + + setTimeout(() => splash.remove(), 500); +}); + +async function _initSplashTheme() { + const queryParams = new URLSearchParams(window.location.search); + let theme = queryParams.get('theme'); + + theme ??= window.matchMedia('(prefers-color-scheme: dark)').matches + ? 'dark' + : 'light'; + + splash.classList.add(theme); +} \ No newline at end of file diff --git a/pkgs/dartpad_ui/web/icons/Icon.svg b/pkgs/dartpad_ui/web/icons/Icon.svg new file mode 100644 index 000000000..0ae2d2a58 --- /dev/null +++ b/pkgs/dartpad_ui/web/icons/Icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/pkgs/dartpad_ui/web/index.html b/pkgs/dartpad_ui/web/index.html index d57ab69ce..af490df1d 100644 --- a/pkgs/dartpad_ui/web/index.html +++ b/pkgs/dartpad_ui/web/index.html @@ -8,30 +8,37 @@ - + + - + DartPad + - + + + + - +
+ Loading indicator +
diff --git a/pkgs/dartpad_ui/web/styles/index.css b/pkgs/dartpad_ui/web/styles/index.css index 286e295b0..eb7edd86f 100644 --- a/pkgs/dartpad_ui/web/styles/index.css +++ b/pkgs/dartpad_ui/web/styles/index.css @@ -55,3 +55,58 @@ width: 100%; } +#splash { + position: fixed; + display: flex; + align-items: center; + justify-content: center; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 999; + transition: opacity 500ms; +} + +#splash.light { + background-color: #f5f5f7; +} + +#splash.dark { + background-color: #1f2833; +} + +#splash.done { + opacity: 0; +} + +#splash img { + width: 28vmin; + animation: 1s ease-in-out 200ms infinite alternate breathe; + transition: opacity 500ms; +} + +#splash.done img { + animation: 500ms ease-in-out 0s 1 forwards zoom; + opacity: 0; +} + +@keyframes breathe { + from { + transform: scale(1); + } + + to { + transform: scale(0.95); + } +} + +@keyframes zoom { + from { + transform: scale(1); + } + + to { + transform: scale(0.01); + } +} From a75ade681a5763dfb7a0283bb564f74992eb3640 Mon Sep 17 00:00:00 2001 From: cheymos Date: Sat, 9 Nov 2024 22:26:39 +0600 Subject: [PATCH 3/4] Enable service worker in dartpad_ui --- pkgs/dartpad_ui/web/flutter_bootstrap.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/pkgs/dartpad_ui/web/flutter_bootstrap.js b/pkgs/dartpad_ui/web/flutter_bootstrap.js index 8ad2c927c..0446e493f 100644 --- a/pkgs/dartpad_ui/web/flutter_bootstrap.js +++ b/pkgs/dartpad_ui/web/flutter_bootstrap.js @@ -1,7 +1,13 @@ {{flutter_js}} {{flutter_build_config}} -_flutter.loader.load(); +const serviceWorkerSettings = { + serviceWorkerVersion: {{flutter_service_worker_version}} +}; + +_flutter.loader.load({ + serviceWorkerSettings, +}); const splash = document.querySelector('#splash'); @@ -22,4 +28,4 @@ async function _initSplashTheme() { : 'light'; splash.classList.add(theme); -} \ No newline at end of file +} From d8e471a00109c8721f6b8fda7e7cc9e1b80ee116 Mon Sep 17 00:00:00 2001 From: cheymos Date: Sun, 10 Nov 2024 14:54:56 +0600 Subject: [PATCH 4/4] Fix incorrect splash theme logic for the application theme --- pkgs/dartpad_ui/web/flutter_bootstrap.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/pkgs/dartpad_ui/web/flutter_bootstrap.js b/pkgs/dartpad_ui/web/flutter_bootstrap.js index 0446e493f..a3a9638cd 100644 --- a/pkgs/dartpad_ui/web/flutter_bootstrap.js +++ b/pkgs/dartpad_ui/web/flutter_bootstrap.js @@ -21,11 +21,8 @@ window.addEventListener('flutter-first-frame', () => { async function _initSplashTheme() { const queryParams = new URLSearchParams(window.location.search); - let theme = queryParams.get('theme'); - - theme ??= window.matchMedia('(prefers-color-scheme: dark)').matches - ? 'dark' - : 'light'; + const queryTheme = queryParams.get('theme'); + const theme = ['light', 'dark'].includes(queryTheme) ? queryTheme : 'dark'; splash.classList.add(theme); }