Loading screen on editor / source init state

pull/73/head
NGPixel 8 years ago
parent 1ced194cd2
commit 1ba115a997

File diff suppressed because one or more lines are too long

@ -5,6 +5,7 @@ import Vue from 'vue'
import _ from 'lodash'
import filesize from 'filesize.js'
import SimpleMDE from 'simplemde'
import pageLoader from '../components/page-loader'
// ====================================
// Markdown Editor
@ -189,6 +190,8 @@ module.exports = (alerts, pageEntryPath, socket) => {
vueVideo = require('./editor-video.js')(mde, mdeModalOpenState)
vueCodeBlock = require('./editor-codeblock.js')(mde, mdeModalOpenState)
pageLoader.complete()
// -> Save
let saveCurrentDocument = (ev) => {

@ -0,0 +1,14 @@
'use strict'
import $ from 'jquery'
import _ from 'lodash'
module.exports = {
complete () {
$('#page-loader').addClass('is-loaded')
_.delay(() => {
$('#page-loader').addClass('is-hidden')
}, 1100)
}
}

@ -1,7 +1,7 @@
'use strict'
import jQuery from 'jquery'
import $ from 'jquery'
jQuery(document).ready(function ($) {
$(() => {
$('#login-user').focus()
})

@ -4,6 +4,7 @@ import $ from 'jquery'
import * as ace from 'brace'
import 'brace/theme/tomorrow_night'
import 'brace/mode/markdown'
import pageLoader from '../components/page-loader'
module.exports = (alerts) => {
if ($('#page-type-source').length) {
@ -20,5 +21,9 @@ module.exports = (alerts) => {
require('../modals/create.js')(currentBasePath)
require('../modals/move.js')(currentBasePath, alerts)
scEditor.renderer.on('afterRender', () => {
pageLoader.complete()
})
}
}

@ -34,5 +34,6 @@ $primary: 'indigo';
@import 'components/_editor';
@import 'layout/_header';
@import 'layout/_loader';
@import 'pages/_welcome';

@ -1,145 +0,0 @@
#page-type-view > section {
transition: background-color .5s ease;
&.blurred {
background-color: mc('grey', '50');
}
}
.sd-menus {
width: 300px;
}
.menu {
.menu-list a, .menu-nav a {
display: flex;
align-items: center;
}
.menu-list .icon {
margin-right: 8px
}
}
.section.is-small {
padding: 20px 20px;
}
.mkcontent {
h1 {
border-bottom: 1px dotted mc('blue', '500');
padding-bottom: 4px;
font-weight: 400;
color: desaturate(mc('blue', '500'), 20%);
}
h2 {
border-bottom: 1px dotted mc('grey', '100');
padding-bottom: 4px;
font-weight: 400;
color: desaturate(mc('purple', '500'), 20%);
}
a.toc-anchor {
font-size: 80%;
color: mc('blue', '500');
border-bottom: none;
&:visited {
color: mc('purple', '500') !important;
}
}
a.external-link {
position: relative;
padding-left: 20px;
&:before {
content: "\f08e";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: mc('grey', '500');
font-size: 14px;
position: absolute;
top: 0;
left: 0;
}
}
pre {
padding: 0;
font-family: $core-font-monospace;
> code {
box-shadow: inset 0 0 5px 0 mc('grey', '100');
border-radius: 5px;
}
}
pre + p {
padding-top: 1em;
}
img.right {
float:right;
}
img.pagelogo {
float: right;
margin-top: -75px;
max-width: 200px;
background-color: #FFF;
}
strong {
color: mc('grey', '700');
}
.twa {
font-size: 120%;
}
table thead th {
background-color: mc('blue', '500');
color: #FFF;
border-color: #FFF;
border-bottom-color: mc('blue', '500');
border-top-color: mc('blue', '500');
&:first-child {
border-left-color: mc('blue', '500');
}
&:last-child {
border-right-color: mc('blue', '500');
}
}
}
.content a:not(.button):visited {
color: mc('teal', '500');
font-weight: 500;
}
code {
font-weight: 500;
color: mc('purple', '500');
}
p code {
padding: 2px 5px;
border-radius: 4px;
}

@ -0,0 +1,54 @@
#page-loader {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: mc('blue-grey', '800');
z-index: 100;
display: flex;
justify-content: center;
align-items: center;
color: mc('blue-grey', '100');
font-weight: 300;
font-size: 18px;
flex-direction: column;
> i {
width: 48px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 25px;
&::before {
content: " ";
@include spinner(mc('blue-grey', '200'), 0.4s, 48px);
}
}
@include keyframes(pageLoaderExit) {
0% {
opacity: 1;
}
99% {
display: flex;
opacity: 0;
transform: scale(1.1, 1.1);
}
100% {
opacity: 0;
display: none;
}
}
&.is-loaded {
animation: pageLoaderExit 1s ease forwards;
}
&.is-hidden {
display: none !important;
}
}

@ -1,85 +0,0 @@
/**
* Clearfix
*
* @return {string} Clearfix attribute
*/
@mixin clearfix {
&:after {
content: "";
display: table;
clear: both;
}
}
/**
* Placeholder attribute for inputs
*
* @return {string} Placeholder attributes
*/
@mixin placeholder {
&::-webkit-input-placeholder {@content};
&::-moz-placeholder {@content}
&:-ms-input-placeholder {@content}
&:placeholder-shown {@content};
}
/**
* Spinner element
*
* @param {string} $color - Color
* @param {string} $dur - Animation Duration
* @param {int} $width - Width
* @param {int} $height [$width] - height
*
* @return {string} Spinner element
*/
@mixin spinner($color,$dur,$width,$height:$width) {
width: $width;
height: $height;
border-radius: 50%;
box-shadow:0 0 0 1px rgba(0,0,0,0.1), 2px 1px 0 $color;
@include prefix(animation, spin $dur linear infinite);
@include keyframes(spin) {
100%{
@include prefix(transform, rotate(360deg));
}
};
}
/**
* Prefixes for keyframes
*
* @param {string} $animation-name - The animation name
*
* @return {string} Prefixed keyframes attributes
*/
@mixin keyframes($animation-name) {
@-webkit-keyframes #{$animation-name} {
@content;
}
@-moz-keyframes #{$animation-name} {
@content;
}
@-o-keyframes #{$animation-name} {
@content;
}
@keyframes #{$animation-name} {
@content;
}
}
/**
* Prefix function for browser compatibility
*
* @param {string} $property - Property name
* @param {any} $value - Property value
*
* @return {string} Prefixed attributes
*/
@mixin prefix($property, $value) {
-webkit-#{$property}: #{$value};
-moz-#{$property}: #{$value};
-ms-#{$property}: #{$value};
-o-#{$property}: #{$value};
#{$property}: #{$value};
}

@ -12,8 +12,6 @@ html(data-logic='configure')
// JS / CSS
script(type='text/javascript', src='/js/configure.min.js')
block head
body
#root
#header-container

@ -25,3 +25,8 @@ block content
include ../modals/editor-file.pug
include ../modals/editor-video.pug
include ../modals/editor-codeblock.pug
block outside
#page-loader
i
span Loading editor...

@ -25,3 +25,8 @@ block content
include ../modals/editor-file.pug
include ../modals/editor-video.pug
include ../modals/editor-codeblock.pug
block outside
#page-loader
i
span Loading editor...

@ -29,3 +29,8 @@ block content
include ../modals/create.pug
include ../modals/move.pug
block outside
#page-loader
i
span Loading source...

Loading…
Cancel
Save