From a4d93f23d622593fb3b1f8d951c8fa8a43368508 Mon Sep 17 00:00:00 2001 From: n1474335 Date: Sat, 15 Apr 2017 20:46:57 +0100 Subject: [PATCH] Added preloader to hide elements before they are correctly rendered --- src/web/App.js | 17 ++ src/web/html/index.html | 5 + src/web/stylesheets/components/_alert.scss | 2 +- src/web/stylesheets/components/_button.scss | 2 +- src/web/stylesheets/components/_list.scss | 30 ++++ .../stylesheets/components/_operation.scss | 2 +- src/web/stylesheets/components/_pane.scss | 2 +- src/web/stylesheets/layout/_banner.scss | 2 +- src/web/stylesheets/layout/_operations.scss | 32 +--- src/web/stylesheets/layout/_structure.scss | 2 +- src/web/stylesheets/main.scss | 5 +- src/web/stylesheets/preloader.scss | 153 ++++++++++++++++++ src/web/stylesheets/themes/_classic.scss | 15 +- src/web/stylesheets/utils/_general.scss | 2 +- src/web/stylesheets/utils/_mixins.scss | 33 +++- src/web/stylesheets/utils/_overrides.scss | 2 +- 16 files changed, 258 insertions(+), 48 deletions(-) create mode 100644 src/web/stylesheets/preloader.scss diff --git a/src/web/App.js b/src/web/App.js index 59121bd9..c1744f37 100755 --- a/src/web/App.js +++ b/src/web/App.js @@ -52,6 +52,23 @@ App.prototype.setup = function() { this.resetLayout(); this.setCompileMessage(); this.loadURIParams(); + this.loaded(); +}; + + +/** + * Fires once all setup activities have completed. + */ +App.prototype.loaded = function() { + // Trigger CSS animations to remove preloader + document.body.classList.add("loaded"); + + // Wait for animations to complete then remove the preloader and loaded style + // so that the animations for existing elements don't play again. + setTimeout(function() { + document.getElementById("loader-wrapper").remove(); + document.body.classList.remove("loaded"); + }, 1000); }; diff --git a/src/web/html/index.html b/src/web/html/index.html index c60069d0..9ba8ff8b 100755 --- a/src/web/html/index.html +++ b/src/web/html/index.html @@ -32,6 +32,11 @@ + +
+
+
+ Edit
diff --git a/src/web/stylesheets/components/_alert.scss b/src/web/stylesheets/components/_alert.scss index 7fba1880..d702e248 100644 --- a/src/web/stylesheets/components/_alert.scss +++ b/src/web/stylesheets/components/_alert.scss @@ -19,4 +19,4 @@ #alert a { text-decoration: underline; -} \ No newline at end of file +} diff --git a/src/web/stylesheets/components/_button.scss b/src/web/stylesheets/components/_button.scss index 08a46913..54dfc339 100644 --- a/src/web/stylesheets/components/_button.scss +++ b/src/web/stylesheets/components/_button.scss @@ -10,4 +10,4 @@ button img, span.btn img { margin-right: 3px; margin-bottom: 1px; -} \ No newline at end of file +} diff --git a/src/web/stylesheets/components/_list.scss b/src/web/stylesheets/components/_list.scss index e36c4396..fbb47dd0 100644 --- a/src/web/stylesheets/components/_list.scss +++ b/src/web/stylesheets/components/_list.scss @@ -10,4 +10,34 @@ list-style-type: none; margin: 0; padding: 0; +} + +.category-title { + display: block; + padding: 10px; + background-color: $secondaryBackgroundColour; + border-bottom: 1px solid $secondaryBorderColour; + font-weight: $titleWeight; +} + +.category-title[href='#catFavourites'] { + border-bottom-color: $primaryBorderColour; +} + +.category-title[aria-expanded=true] { + border-bottom-color: $primaryBorderColour; +} + +.category-title.collapsed { + border-bottom-color: $secondaryBorderColour; +} + +.category-title:hover { + color: $opListOperationFontColour; +} + +.category { + margin: 0 !important; + border-radius: 0 !important; + border: none; } \ No newline at end of file diff --git a/src/web/stylesheets/components/_operation.scss b/src/web/stylesheets/components/_operation.scss index a38f9fd0..e16e87f6 100644 --- a/src/web/stylesheets/components/_operation.scss +++ b/src/web/stylesheets/components/_operation.scss @@ -190,4 +190,4 @@ button.dropdown-toggle { color: $disabledFontColour !important; background-color: $disabledBgColour !important; border-color: $disabledBorderColour !important; -} \ No newline at end of file +} diff --git a/src/web/stylesheets/components/_pane.scss b/src/web/stylesheets/components/_pane.scss index fccc1577..4b1ad56b 100644 --- a/src/web/stylesheets/components/_pane.scss +++ b/src/web/stylesheets/components/_pane.scss @@ -25,4 +25,4 @@ $titleHeight: 43px; list-style-type: none; margin: 0; padding: 0; -} \ No newline at end of file +} diff --git a/src/web/stylesheets/layout/_banner.scss b/src/web/stylesheets/layout/_banner.scss index 479d8285..bb1e6134 100644 --- a/src/web/stylesheets/layout/_banner.scss +++ b/src/web/stylesheets/layout/_banner.scss @@ -25,4 +25,4 @@ #banner img { margin-bottom: 2px; margin-left: 8px; -} \ No newline at end of file +} diff --git a/src/web/stylesheets/layout/_operations.scss b/src/web/stylesheets/layout/_operations.scss index 078373eb..087ec5f3 100644 --- a/src/web/stylesheets/layout/_operations.scss +++ b/src/web/stylesheets/layout/_operations.scss @@ -10,36 +10,6 @@ @extend .list-area; } -.category-title { - display: block; - padding: 10px; - background-color: $secondaryBackgroundColour; - border-bottom: 1px solid $secondaryBorderColour; - font-weight: $titleWeight; -} - -.category-title[href='#catFavourites'] { - border-bottom-color: $primaryBorderColour; -} - -.category-title[aria-expanded=true] { - border-bottom-color: $primaryBorderColour; -} - -.category-title.collapsed { - border-bottom-color: $secondaryBorderColour; -} - -.category-title:hover { - color: $opListOperationFontColour; -} - -.category { - margin: 0 !important; - border-radius: 0 !important; - border: none; -} - .op-list .operation { color: $opListOperationFontColour; background-color: $opListOperationBgColour; @@ -62,4 +32,4 @@ background-color: $recListOperationBgColour; border: 2px dashed $recListOperationFontColour !important; padding: 8px 8px 9px 8px; -} \ No newline at end of file +} diff --git a/src/web/stylesheets/layout/_structure.scss b/src/web/stylesheets/layout/_structure.scss index 7454276b..fefd254a 100644 --- a/src/web/stylesheets/layout/_structure.scss +++ b/src/web/stylesheets/layout/_structure.scss @@ -58,4 +58,4 @@ div#output { .gutter.gutter-vertical { background-image: url('data:image/png;base64,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'); cursor: ns-resize; -} \ No newline at end of file +} diff --git a/src/web/stylesheets/main.scss b/src/web/stylesheets/main.scss index c7bf9a4e..a90cac43 100644 --- a/src/web/stylesheets/main.scss +++ b/src/web/stylesheets/main.scss @@ -16,7 +16,7 @@ // CyberChef styles -// Theme +// Default theme @import "themes/_classic"; // Utilities @@ -24,6 +24,9 @@ @import "utils/_overrides"; @import "utils/_general"; +// Preloader styles +@import "preloader.scss"; + // Components @import "components/_alert"; @import "components/_button"; diff --git a/src/web/stylesheets/preloader.scss b/src/web/stylesheets/preloader.scss new file mode 100644 index 00000000..e0b34af9 --- /dev/null +++ b/src/web/stylesheets/preloader.scss @@ -0,0 +1,153 @@ +/** + * Preloader styles + * + * @author n1474335 [n1474335@gmail.com] + * @copyright Crown Copyright 2017 + * @license Apache-2.0 + */ + +#loader-wrapper { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1000; + background-color: $secondaryBorderColour; +} + +#preloader { + display: block; + position: relative; + left: 50%; + top: 50%; + width: 150px; + height: 150px; + margin: -75px 0 0 -75px; + + border: 3px solid transparent; + border-top-color: #3498db; + border-radius: 50%; + z-index: 1500; + + @include animation(spin 2s linear infinite); +} + +.loader-arm { + content: ""; + position: absolute; + top: 5px; + left: 5px; + right: 5px; + bottom: 5px; + border: 3px solid transparent; + border-radius: 50%; +} + +#preloader:before { + @extend .loader-arm; + border-top-color: #e74c3c; + @include animation(spin 3s linear infinite); +} + +#preloader:after { + @extend .loader-arm; + border-top-color: #f9c922; + @include animation(spin 1.5s linear infinite); +} + + +/* Loaded */ +.loaded #preloader { + opacity: 0; + @include transition(all 0.3s ease-out); +} + +.loaded #loader-wrapper { + opacity: 0; + @include transition(all 0.5s 0.3s ease-out); +} + +.loaded #rec-list li { + @include animation(bump 0.7s cubic-bezier(0.7, 0, 0.3, 1) both); +} + +.loaded #content-wrapper { + animation-delay: 0.10s; +} + +.loaded #rec-list li:first-child { + animation-delay: 0.20s; +} + +.loaded #rec-list li:nth-child(2) { + animation-delay: 0.25s; +} + +.loaded #rec-list li:nth-child(3) { + animation-delay: 0.30s; +} + +.loaded #rec-list li:nth-child(4) { + animation-delay: 0.35s; +} + +.loaded #rec-list li:nth-child(5) { + animation-delay: 0.40s; +} + +.loaded #rec-list li:nth-child(6) { + animation-delay: 0.45s; +} + +.loaded #rec-list li:nth-child(7) { + animation-delay: 0.50s; +} + +.loaded #rec-list li:nth-child(8) { + animation-delay: 0.55s; +} + +.loaded #rec-list li:nth-child(9) { + animation-delay: 0.60s; +} + +.loaded #rec-list li:nth-child(10) { + animation-delay: 0.65s; +} + + +// Animations + +@-webkit-keyframes spin { + 0% { + @include rotate(0deg); + } + 100% { + @include rotate(360deg); + } +} + +@keyframes spin { + 0% { + @include rotate(0deg); + } + 100% { + @include rotate(360deg); + } +} + + +@-webkit-keyframes bump { + from { + opacity: 0; + @include translate3d(0, 200px, 0); + } +} + +@keyframes bump { + from { + opacity: 0; + @include translate3d(0, 200px, 0); + } +} diff --git a/src/web/stylesheets/themes/_classic.scss b/src/web/stylesheets/themes/_classic.scss index 1b2991e9..37680ba6 100755 --- a/src/web/stylesheets/themes/_classic.scss +++ b/src/web/stylesheets/themes/_classic.scss @@ -72,6 +72,14 @@ $argBackground: #fff; $argDisabledBackground: #eee; +// Highlighter colours +$hl1: #fff000; +$hl2: #95dfff; +$hl3: #ffb6b6; +$hl4: #fcf8e3; +$hl5: #8de768; + + // Misc. $dropFileBorderColour: #3a87ad; @@ -81,10 +89,3 @@ $bannerBgColour: #dff0d8; $scrollbarTrack: $secondaryBackgroundColour; $scrollbarThumb: #ccc; $scrollbarHover: #bbb; - -// Highlighter colours -$hl1: #fff000; -$hl2: #95dfff; -$hl3: #ffb6b6; -$hl4: #fcf8e3; -$hl5: #8de768; diff --git a/src/web/stylesheets/utils/_general.scss b/src/web/stylesheets/utils/_general.scss index b726dfe8..feed17af 100755 --- a/src/web/stylesheets/utils/_general.scss +++ b/src/web/stylesheets/utils/_general.scss @@ -41,7 +41,7 @@ body { } .konami { - @include transform(180deg); + @include rotate(180deg); } ::-webkit-scrollbar { diff --git a/src/web/stylesheets/utils/_mixins.scss b/src/web/stylesheets/utils/_mixins.scss index e16141b1..ae925a5d 100644 --- a/src/web/stylesheets/utils/_mixins.scss +++ b/src/web/stylesheets/utils/_mixins.scss @@ -21,9 +21,40 @@ user-select: $value; } -@mixin transform($value) { +@mixin rotate($value) { -ms-transform: rotate($value); -webkit-transform: rotate($value); -moz-transform: rotate($value); transform: rotate($value); } + +@mixin translateX($value) { + -ms-transform: translateX($value); + -webkit-transform: translateX($value); + -moz-transform: translateX($value); + transform: translateX($value); +} + +@mixin translateY($value) { + -ms-transform: translateY($value); + -webkit-transform: translateY($value); + -moz-transform: translateY($value); + transform: translateY($value); +} + +@mixin translate3d($x, $y, $z) { + -ms-transform: translate3d($x, $y, $z); + -webkit-transform: translate3d($x, $y, $z); + -moz-transform: translate3d($x, $y, $z); + transform: translate3d($x, $y, $z); +} + +@mixin transition($value) { + -webkit-transition: $value; + transition: $value; +} + +@mixin animation($value) { + -webkit-animation: $value; + animation: $value; +} diff --git a/src/web/stylesheets/utils/_overrides.scss b/src/web/stylesheets/utils/_overrides.scss index 9edf8eb6..75640a49 100755 --- a/src/web/stylesheets/utils/_overrides.scss +++ b/src/web/stylesheets/utils/_overrides.scss @@ -118,4 +118,4 @@ optgroup { .colorpicker-color, .colorpicker-color div { height: 100px; -} \ No newline at end of file +}