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

Added preloader to hide elements before they are correctly rendered

feature-extract-files
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.resetLayout();
this.setCompileMessage(); this.setCompileMessage();
this.loadURIParams(); 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') %>" /> <link rel="icon" type="image/ico" href="<%- require('../static/images/favicon.ico') %>" />
</head> </head>
<body> <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> <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"> <div id="alert" class="alert alert-danger">
<button type="button" class="close" id="alert-close">&times;</button> <button type="button" class="close" id="alert-close">&times;</button>

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

@ -11,3 +11,33 @@
margin: 0; margin: 0;
padding: 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;
}

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

@ -10,36 +10,6 @@
@extend .list-area; @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 { .op-list .operation {
color: $opListOperationFontColour; color: $opListOperationFontColour;
background-color: $opListOperationBgColour; background-color: $opListOperationBgColour;

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

@ -16,7 +16,7 @@
// CyberChef styles // CyberChef styles
// Theme // Default theme
@import "themes/_classic"; @import "themes/_classic";
// Utilities // Utilities
@ -24,6 +24,9 @@
@import "utils/_overrides"; @import "utils/_overrides";
@import "utils/_general"; @import "utils/_general";
// Preloader styles
@import "preloader.scss";
// Components // Components
@import "components/_alert"; @import "components/_alert";
@import "components/_button"; @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; $argDisabledBackground: #eee;
// Highlighter colours
$hl1: #fff000;
$hl2: #95dfff;
$hl3: #ffb6b6;
$hl4: #fcf8e3;
$hl5: #8de768;
// Misc. // Misc.
$dropFileBorderColour: #3a87ad; $dropFileBorderColour: #3a87ad;
@ -81,10 +89,3 @@ $bannerBgColour: #dff0d8;
$scrollbarTrack: $secondaryBackgroundColour; $scrollbarTrack: $secondaryBackgroundColour;
$scrollbarThumb: #ccc; $scrollbarThumb: #ccc;
$scrollbarHover: #bbb; $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 { .konami {
@include transform(180deg); @include rotate(180deg);
} }
::-webkit-scrollbar { ::-webkit-scrollbar {

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

@ -21,9 +21,40 @@
user-select: $value; user-select: $value;
} }
@mixin transform($value) { @mixin rotate($value) {
-ms-transform: rotate($value); -ms-transform: rotate($value);
-webkit-transform: rotate($value); -webkit-transform: rotate($value);
-moz-transform: rotate($value); -moz-transform: rotate($value);
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;
}