chiu
/
filebrowser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

some style updates like loading animation

This commit is contained in:
Henrique Dias 2016-03-13 09:26:45 +00:00
parent c4431b1ee5
commit ce1dcdc947
5 changed files with 239 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/public/css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
assets/public/js/app.min.js vendored
View File

File diff suppressed because one or more lines are too long

127
assets/public_src/css/main.css
View File

@ -474,6 +474,7 @@ fieldset input {
.browse tr {
line-height: 2em;
border-bottom: 1px solid rgba(0, 0, 0, 0.03);
-webkit-transition: .2s ease background-color;
transition: .2s ease background-color;
}
@ -505,6 +506,7 @@ fieldset input {
width: 182%;
}
/* POPUS */
#foreground {
@ -538,6 +540,130 @@ fieldset input {
border-bottom: .15em solid white;
}
/* LOADING */
#loading {
z-index: 99999;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.41);
}
#loading .centerize {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.sk-folding-cube {
margin: 20px auto;
width: 40px;
height: 40px;
position: relative;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.sk-folding-cube .sk-cube {
float: left;
width: 50%;
height: 50%;
position: relative;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.sk-folding-cube .sk-cube:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
-webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
animation: sk-foldCubeAngle 2.4s infinite linear both;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
-webkit-transform: scale(1.1) rotateZ(90deg);
transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
-webkit-transform: scale(1.1) rotateZ(180deg);
transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
-webkit-transform: scale(1.1) rotateZ(270deg);
transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube2:before {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.sk-folding-cube .sk-cube4:before {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
@-webkit-keyframes sk-foldCubeAngle {
0%,
10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
@keyframes sk-foldCubeAngle {
0%,
10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
@media screen and (max-width: 900px) {
.blocks {
-webkit-column-count: 3;
@ -546,7 +672,6 @@ fieldset input {
}
}
@media screen and (max-width: 600px) {
.blocks {
-webkit-column-count: 2;

151
assets/public_src/js/browse.js
View File

@ -1,31 +1,43 @@
// When the page Browse is opened
$(document).on('page:browse', function() {
var foreground = '#foreground';
/* DELETE FILE */
var remove = new Object();
remove.selector = 'form#delete';
remove.form = $(remove.selector);
remove.row = '';
remove.button = '';
remove.url = '';
var removeForm = 'form#delete';
var removeItem = null;
$('#content').on('click', '.delete', function(event) {
event.preventDefault();
remove.button = $(this);
remove.row = $(this).parent().parent();
// Gets the information about the file the user wants to delete
removeItem = new Object();
removeItem.url = $(this).data("file");
removeItem.row = $(this).parent().parent();
removeItem.filename = $(removeItem.row).find('.filename').text();
// Shows the remove form and the foreground
$(removeForm).find('span').text(removeItem.filename);
$(removeForm).fadeIn(200)
$(foreground).fadeIn(200);
remove.url = remove.row.find('.filename').text();
remove.form.find('span').text(remove.url);
remove.form.fadeIn(200);
return false;
});
$('#content').on('submit', remove.selector, function(event) {
$('#content').on('submit', removeForm, function(event) {
event.preventDefault();
// Checks if the item to remove is defined
if (removeItem == null) {
notification({
text: "Something is wrong with your form.",
type: "error"
});
return false;
}
// Makes the DELETE request to the server
var request = new XMLHttpRequest();
request.open("DELETE", remove.button.data("file"));
request.open("DELETE", removeItem.url);
request.send();
request.onreadystatechange = function() {
if (request.readyState == 4) {
@ -34,8 +46,8 @@ $(document).on('page:browse', function() {
timeout = 5000;
$(foreground).fadeOut(200);
remove.form.fadeOut(200);
remove.row.fadeOut(200);
$(removeForm).fadeOut(200);
$(removeItem.row).fadeOut(200);
if (request.status != 200) {
type = "error";
@ -47,6 +59,8 @@ $(document).on('page:browse', function() {
type: type,
timeout: timeout
});
removeItem = null;
}
}
@ -59,6 +73,8 @@ $(document).on('page:browse', function() {
event.preventDefault();
files = event.target.files;
$('#loading').fadeIn();
// Create a formdata object and add the files
var data = new FormData();
$.each(files, function(key, value) {
@ -83,17 +99,23 @@ $(document).on('page:browse', function() {
timeout: 5000
});
$('#loading').fadeOut();
$.pjax({
url: window.location.pathname,
container: '#content'
})
}).fail(function(data) {
$('#loading').fadeOut();
notification({
text: 'Something went wrong.',
type: 'error'
});
console.log(data);
});
return false;
});
@ -104,34 +126,31 @@ $(document).on('page:browse', function() {
});
/* NEW FILE */
var create = new Object();
create.selector = 'form#new';
create.form = $(create.selector);
create.input = create.selector + ' input[type="text"]';
create.button = '';
create.url = '';
var createForm = 'form#new',
createInput = createForm + ' input[type="text"]';
$('#content').on('click', '.new', function(event) {
event.preventDefault();
create.button = $(this);
$(foreground).fadeIn(200);
create.form.fadeIn(200);
$(createForm).fadeIn(200);
return false;
});
$('#content').on('keypress', create.input, function(event) {
$('#content').on('keypress', createInput, function(event) {
// If it's "enter" key, submit the
if (event.keyCode == 13) {
event.preventDefault();
$(create.form).submit();
$(createForm).submit();
return false;
}
});
$('#content').on('submit', create.selector, function(event) {
$('#content').on('submit', createForm, function(event) {
event.preventDefault();
var value = create.form.find('input[type="text"]').val(),
var value = $(createInput).val(),
splited = value.split(":"),
filename = "",
archetype = "";
@ -197,39 +216,32 @@ $(document).on('page:browse', function() {
});
/* RENAME FILE */
var rename = new Object();
rename.selector = 'form#rename';
rename.form = $(rename.selector);
rename.input = rename.selector + ' input[type="text"]';
rename.button = '';
rename.url = '';
var renameForm = 'form#rename',
renameInput = renameForm + ' input[type="text"]',
renameItem = null;
$('#content').on('click', '.rename', function(event) {
event.preventDefault();
rename.button = $(this);
renameItem = $(this).parent().parent().find('.filename').text();
$(foreground).fadeIn(200);
rename.url = $(this).parent().parent().find('.filename').text();
rename.form.fadeIn(200);
rename.form.find('span').text(rename.url);
rename.form.find('input[type="text"]').val(rename.url);
$(renameForm).fadeIn(200);
$(renameForm).find('span').text(renameItem);
$(renameForm).find('input[type="text"]').val(renameItem);
return false;
});
$('#content').on('keypress', rename.input, function(event) {
$('#content').on('keypress', renameInput, function(event) {
if (event.keyCode == 13) {
event.preventDefault();
$(rename.form).submit();
$(renameForm).submit();
return false;
}
});
$('#content').on('submit', rename.selector, function(event) {
$('#content').on('submit', renameForm, function(event) {
event.preventDefault();
var filename = rename.form.find('input[type="text"]').val();
var filename = $(this).find('input[type="text"]').val();
if (filename === "") {
return false;
}
@ -243,7 +255,7 @@ $(document).on('page:browse', function() {
};
var request = new XMLHttpRequest();
request.open("PUT", rename.url);
request.open("PUT", renameItem);
request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
request.send(JSON.stringify(content));
request.onreadystatechange = function() {
@ -267,6 +279,8 @@ $(document).on('page:browse', function() {
type: type,
timeout: timeout
});
renameItem = null;
}
}
@ -274,35 +288,33 @@ $(document).on('page:browse', function() {
});
/* GIT ACTIONS */
var gitButton = 'button.git',
gitForm = 'form#git',
gitInput = gitForm + ' input[type="text"]';
var git = new Object();
git.selector = 'form#git';
git.form = $(git.selector);
git.input = git.selector + ' input[type="text"]';
$('#content').on('click', 'button.git', function(event) {
$('#content').on('click', gitButton, function(event) {
event.preventDefault();
$(foreground).fadeIn(200);
git.form.fadeIn(200);
$(gitForm).fadeIn(200);
return false;
});
$('#content').on('keypress', git.input, function(event) {
$('#content').on('keypress', gitInput, function(event) {
if (event.keyCode == 13) {
event.preventDefault();
$(git.form).submit();
$(gitForm).submit();
return false;
}
});
$('#content').on('submit', git.selector, function(event) {
$('#content').on('submit', gitForm, function(event) {
event.preventDefault();
var value = git.form.find('input[type="text"]').val();
var value = $(this).find('input[type="text"]').val();
if (value == "") {
notification({
text: "You have to write something. If you want to close the box, click outside of the box.",
text: "You have to write something. If you want to close the box, click outside of it.",
type: 'warning',
timeout: 5000
});
@ -323,7 +335,16 @@ $(document).on('page:browse', function() {
if (request.status == 200) {
notification({
text: data.message,
type: "success"
type: "success",
timeout: 5000
});
$(gitForm).fadeOut(200);
$(foreground).fadeOut(200);
$.pjax({
url: window.location.pathname,
container: '#content'
});
} else {
notification({
@ -349,10 +370,10 @@ $(document).on('page:browse', function() {
$('#content').on('click', foreground, function(event) {
event.preventDefault();
$(foreground).fadeOut(200);
create.form.fadeOut(200);
rename.form.fadeOut(200);
remove.form.fadeOut(200);
git.form.fadeOut(200);
$(createForm).fadeOut(200);
$(renameForm).fadeOut(200);
$(removeForm).fadeOut(200);
$(gitForm).fadeOut(200);
return false;
});
});

11
assets/templates/browse.tmpl
View File

@ -54,6 +54,17 @@
</div>
</main>
<div id="loading" class="hidden">
<div class="centerize">
<div class="sk-folding-cube">
<div class="sk-cube1 sk-cube"></div>
<div class="sk-cube2 sk-cube"></div>
<div class="sk-cube4 sk-cube"></div>
<div class="sk-cube3 sk-cube"></div>
</div>
</div>
</div>
<div id="foreground" class="hidden"></div>
<form class="popup hidden" id="delete">