Mirror
/
CyberChef
mirror of https://github.com/gchq/CyberChef.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added preloader to hide elements before they are correctly rendered

This commit is contained in:
n1474335 2017-04-15 20:46:57 +01:00
parent e0e5670d0e
commit a4d93f23d6
16 changed files with 258 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/web/App.js
View File

@ -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);
};

5
src/web/html/index.html
View File

@ -32,6 +32,11 @@
<link rel="icon" type="image/ico" href="<%- require('../static/images/favicon.ico') %>" />
</head>
<body>
<!-- Preloader overlay -->
<div id="loader-wrapper">
<div id="preloader"></div>
</div>
<!-- End preloader overlay -->
<span id="edit-favourites" class="btn btn-default btn-sm"><img aria-hidden="true" src="<%- require('../static/images/favourite-16x16.png') %>" alt="Star Icon"/> Edit</span>
<div id="alert" class="alert alert-danger">
<button type="button" class="close" id="alert-close">&times;</button>

2
src/web/stylesheets/components/_alert.scss
View File

@ -19,4 +19,4 @@
#alert a {
text-decoration: underline;
}
}

2
src/web/stylesheets/components/_button.scss
View File

@ -10,4 +10,4 @@ button img,
span.btn img {
margin-right: 3px;
margin-bottom: 1px;
}
}

30
src/web/stylesheets/components/_list.scss
View File

@ -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;
}

2
src/web/stylesheets/components/_operation.scss
View File

@ -190,4 +190,4 @@ button.dropdown-toggle {
color: $disabledFontColour !important;
background-color: $disabledBgColour !important;
border-color: $disabledBorderColour !important;
}
}

2
src/web/stylesheets/components/_pane.scss
View File

@ -25,4 +25,4 @@ $titleHeight: 43px;
list-style-type: none;
margin: 0;
padding: 0;
}
}

2
src/web/stylesheets/layout/_banner.scss
View File

@ -25,4 +25,4 @@
#banner img {
margin-bottom: 2px;
margin-left: 8px;
}
}

32
src/web/stylesheets/layout/_operations.scss
View File

@ -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;
}
}

2
src/web/stylesheets/layout/_structure.scss
View File

@ -58,4 +58,4 @@ div#output {
.gutter.gutter-vertical {
background-image: url('data:image/png;base64,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');
cursor: ns-resize;
}
}

5
src/web/stylesheets/main.scss
View File

@ -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";

153
src/web/stylesheets/preloader.scss Normal file
View File

@ -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);
}
}

15
src/web/stylesheets/themes/_classic.scss
View File

@ -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;

2
src/web/stylesheets/utils/_general.scss
View File

@ -41,7 +41,7 @@ body {
}
.konami {
@include transform(180deg);
@include rotate(180deg);
}
::-webkit-scrollbar {

33
src/web/stylesheets/utils/_mixins.scss
View File

@ -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;
}

2
src/web/stylesheets/utils/_overrides.scss
View File

@ -118,4 +118,4 @@ optgroup {
.colorpicker-color,
.colorpicker-color div {
height: 100px;
}
}