diff --git a/dist/main.css b/dist/main.css index d71e312..bd59564 100644 Binary files a/dist/main.css and b/dist/main.css differ diff --git a/dist/main.js b/dist/main.js index 4cdf5ab..3870557 100644 Binary files a/dist/main.js and b/dist/main.js differ diff --git a/dist/view.js b/dist/view.js index 5b46527..293a8e7 100644 Binary files a/dist/view.js and b/dist/view.js differ diff --git a/src/scripts/build.coffee b/src/scripts/build.coffee index fa3b3df..4bc37db 100644 --- a/src/scripts/build.coffee +++ b/src/scripts/build.coffee @@ -152,11 +152,8 @@ build.no_content = (typ) -> build.uploadModal = (title, files) -> html = """ -
-
-

#{ title }

- -
+

#{ title }

+
""" i = 0 @@ -185,8 +182,6 @@ build.uploadModal = (title, files) -> i++ html += """ -
-
""" diff --git a/src/scripts/init.js b/src/scripts/init.js index 1ab6a59..3cabc06 100755 --- a/src/scripts/init.js +++ b/src/scripts/init.js @@ -163,7 +163,6 @@ $(document).ready(function() { /* Upload */ .on('change', '#upload_files', function() { basicModal.close(); upload.start.local(this.files) }) - .on(eventName, '.upload_message a.close', upload.close) .on('dragover', function(e) { e.preventDefault(); }, false) .on('drop', function(e) { diff --git a/src/scripts/lychee.js b/src/scripts/lychee.js index b66e513..08bbf02 100644 --- a/src/scripts/lychee.js +++ b/src/scripts/lychee.js @@ -88,7 +88,6 @@ lychee.api = function(params, callback) { if (typeof data==='string'&& data.substring(0, 7)==='Error: ') { lychee.error(data.substring(7, data.length), params, data); - upload.close(true); return false; } @@ -110,7 +109,6 @@ lychee.api = function(params, callback) { error: function(jqXHR, textStatus, errorThrown) { lychee.error('Server error or API not found.', params, errorThrown); - upload.close(true); } }); diff --git a/src/scripts/upload.js b/src/scripts/upload.js index b64d813..349ebf5 100755 --- a/src/scripts/upload.js +++ b/src/scripts/upload.js @@ -7,11 +7,17 @@ upload = {} upload.show = function(title, files, callback) { - upload.close(true); - - $('body').append(build.uploadModal(title, files)); - - if (callback!==null&&callback!==undefined) callback(); + basicModal.show({ + body: build.uploadModal(title, files), + buttons: { + action: { + title: 'Close', + class: 'hidden', + fn: basicModal.close + } + }, + callback + }); } @@ -53,13 +59,13 @@ upload.start = { if (error===false) { // Success - upload.close(); + basicModal.close(); upload.notify('Upload complete'); } else { // Error - $('.upload_message a.close').show(); + $('.basicModal #basicModal__action.hidden').show(); upload.notify('Upload complete', 'Failed to upload one or more photos.'); } @@ -118,21 +124,21 @@ upload.start = { if (xhr.status===200&&xhr.responseText==='1') { // Success - $('.upload_message .rows .row:nth-child(' + (file.num+1) + ') .status') + $('.basicModal .rows .row:nth-child(' + (file.num+1) + ') .status') .html('Finished') .addClass('success'); } else { // Error - $('.upload_message .rows .row:nth-child(' + (file.num+1) + ') .status') + $('.basicModal .rows .row:nth-child(' + (file.num+1) + ') .status') .html('Error') .addClass('error'); if (xhr.responseText.substr(0, 6)==='Error:') errorText = xhr.responseText.substr(6) + ' Please take a look at the console of your browser for further details.'; else errorText = 'Server returned an unknown response. Please take a look at the console of your browser for further details.'; - $('.upload_message .rows .row:nth-child(' + (file.num+1) + ') p.notice') + $('.basicModal .rows .row:nth-child(' + (file.num+1) + ') p.notice') .html(errorText) .show(); @@ -168,7 +174,7 @@ upload.start = { // Set progress when progress has changed if (progress>pre_progress) { - $('.upload_message .rows .row:nth-child(' + (file.num+1) + ') .status').html(progress + '%'); + $('.basicModal .rows .row:nth-child(' + (file.num+1) + ') .status').html(progress + '%'); pre_progress = progress; } @@ -177,10 +183,10 @@ upload.start = { // Scroll to the uploading file var scrollPos = 0; if ((file.num+1)>4) scrollPos = (file.num + 1 - 4) * 40 - $('.upload_message .rows').scrollTop(scrollPos); + $('.basicModal .rows').scrollTop(scrollPos); // Set status to processing - $('.upload_message .rows .row:nth-child(' + (file.num+1) + ') .status').html('Processing'); + $('.basicModal .rows .row:nth-child(' + (file.num+1) + ') .status').html('Processing'); // Upload next file if (file.next!==null) process(files, file.next); @@ -219,10 +225,12 @@ upload.start = { window.onbeforeunload = function() { return 'Lychee is currently uploading!'; }; - upload.show('Uploading', files); + upload.show('Uploading', files, function() { - // Upload first file - process(files, files[0]); + // Upload first file + process(files, files[0]); + + }); }, @@ -235,14 +243,13 @@ upload.start = { action = function(data) { - var params, - extension, + var extension, files = []; - basicModal.close(); - if (data.link&&data.link.length>3) { + basicModal.close(); + extension = data.link.split('.').pop(); if (extension!=='jpeg'&&extension!=='jpg'&&extension!=='png'&&extension!=='gif'&&extension!=='webp') { loadingBar.show('error', 'The file format of this link is not supported.'); @@ -255,30 +262,34 @@ upload.start = { } upload.show('Importing URL', files, function() { - $('.upload_message .rows .row .status').html('Importing'); - }); - params = 'importUrl&url=' + escape(encodeURI(data.link)) + '&albumID=' + albumID; - lychee.api(params, function(data) { + var params; - upload.close(); - upload.notify('Import complete'); + $('.basicModal .rows .row .status').html('Importing'); - albums.refresh(); + params = 'importUrl&url=' + escape(encodeURI(data.link)) + '&albumID=' + albumID; + lychee.api(params, function(data) { - if (album.getID()===false) lychee.goto('0'); - else album.load(albumID); + basicModal.close(); + upload.notify('Import complete'); - if (data!==true) lychee.error(null, params, data); + albums.refresh(); + + if (album.getID()===false) lychee.goto('0'); + else album.load(albumID); + + if (data!==true) lychee.error(null, params, data); + + }); }); - } else loadingBar.show('error', 'Link to short or too long. Please try another one!'); + } else basicModal.error('link'); } basicModal.show({ - body: "

Please enter the direct link to a photo to import it:

", + body: "

Please enter the direct link to a photo to import it:

", buttons: { action: { title: 'Import', @@ -302,10 +313,7 @@ upload.start = { action = function(data) { - var params, - files = []; - - basicModal.close(); + var files = []; files[0] = { name: data.path, @@ -313,27 +321,31 @@ upload.start = { }; upload.show('Importing from server', files, function() { - $('.upload_message .rows .row .status').html('Importing'); - }); - params = 'importServer&albumID=' + albumID + '&path=' + escape(encodeURI(data.path)); - lychee.api(params, function(data) { + var params; - upload.close(); - upload.notify('Import complete'); + $('.basicModal .rows .row .status').html('Importing'); - albums.refresh(); + params = 'importServer&albumID=' + albumID + '&path=' + escape(encodeURI(data.path)); + lychee.api(params, function(data) { - if (data==='Notice: Import only contains albums!') { - if (visible.albums()) lychee.load(); - else lychee.goto(''); - } - else if (album.getID()===false) lychee.goto('0'); - else album.load(albumID); + basicModal.close(); + upload.notify('Import complete'); - if (data==='Notice: Import only contains albums!') return true; - else if (data==='Warning: Folder empty!') lychee.error('Folder empty. No photos imported!', params, data); - else if (data!==true) lychee.error(null, params, data); + albums.refresh(); + + if (data==='Notice: Import only contains albums!') { + if (visible.albums()) lychee.load(); + else lychee.goto(''); + } + else if (album.getID()===false) lychee.goto('0'); + else album.load(albumID); + + if (data==='Notice: Import only contains albums!') return true; + else if (data==='Warning: Folder empty!') lychee.error('Folder empty. No photos imported!', params, data); + else if (data!==true) lychee.error(null, params, data); + + }); }); @@ -358,65 +370,60 @@ upload.start = { dropbox: function() { var albumID = album.getID(), - params, - links = ''; + links = '', + success; if (albumID===false) albumID = 0; + success = function(files) { + + for (var i = 0; i < files.length; i++) { + + links += files[i].link + ','; + + files[i] = { + name: files[i].link, + supported: true + }; + + } + + // Remove last comma + links = links.substr(0, links.length-1); + + upload.show('Importing from Dropbox', files, function() { + + var params; + + $('.basicModal .rows .row .status').html('Importing'); + + params = 'importUrl&url=' + escape(links) + '&albumID=' + albumID; + lychee.api(params, function(data) { + + basicModal.close(); + upload.notify('Import complete'); + + albums.refresh(); + + if (album.getID()===false) lychee.goto('0'); + else album.load(albumID); + + if (data!==true) lychee.error(null, params, data); + + }); + + }); + + } + lychee.loadDropbox(function() { Dropbox.choose({ linkType: 'direct', multiselect: true, - success: function(files) { - - for (var i = 0; i < files.length; i++) { - - links += files[i].link + ','; - - files[i] = { - name: files[i].link, - supported: true - }; - - } - - // Remove last comma - links = links.substr(0, links.length-1); - - upload.show('Importing from Dropbox', files, function() { - $('.upload_message .rows .row .status').html('Importing'); - }); - - params = 'importUrl&url=' + escape(links) + '&albumID=' + albumID; - lychee.api(params, function(data) { - - upload.close(); - upload.notify('Import complete'); - - albums.refresh(); - - if (album.getID()===false) lychee.goto('0'); - else album.load(albumID); - - if (data!==true) lychee.error(null, params, data); - - }); - - } + success }); }); } -} - -upload.close = function(force) { - - if (force===true) { - $('.upload_overlay').remove(); - } else { - $('.upload_overlay').removeClass('fadeIn').css('opacity', 0); - setTimeout(function() { $('.upload_overlay').remove() }, 300); - } - } \ No newline at end of file diff --git a/src/styles/_mediaquery.scss b/src/styles/_mediaquery.scss index 50324f4..2efa854 100644 --- a/src/styles/_mediaquery.scss +++ b/src/styles/_mediaquery.scss @@ -8,13 +8,11 @@ margin: 0 20% !important; width: 40% !important; } + #title.view { margin: 0 20% !important; width: 60% !important; } - #title span { - display: none !important; - } } @media only screen and (max-width: 640px) { @@ -22,19 +20,12 @@ #title { display: none !important; } + #title.view { display: block !important; width: 70% !important; margin: 0 20% 0 10% !important; } - #button_move { - display: none !important; - } - - .center { - top: 0 !important; - left: 0 !important; - } .album, .photo { margin: 40px 0 0 50px !important; @@ -44,21 +35,4 @@ display: none !important; } - .message { - position: fixed !important; - width: 100% !important; - height: 100% !important; - margin: 1px 0 0 0 !important; - border-radius: 0 !important; - - /* Animation */ - animation: moveUp .3s !important; - } - - .upload_message { - margin-top: 0 !important; - margin-left: 0 !important; - width: 100% !important; - } - } \ No newline at end of file diff --git a/src/styles/_message.scss b/src/styles/_message.scss index 5c9e65d..be54cd2 100644 --- a/src/styles/_message.scss +++ b/src/styles/_message.scss @@ -9,7 +9,6 @@ .basicModal { background: linear-gradient(to bottom, #444, #333); - border: 1px solid black(.7); border-bottom: 1px solid black(.8); box-shadow: 0 1px 4px black(.2), inset 0 1px 0 white(.05); @@ -66,6 +65,8 @@ &#basicModal__action.red { color: $colorRed; } + &.hidden { display: none; } + } /* Inputs ------------------------------------------------*/ @@ -179,4 +180,80 @@ span a { color: #888; } } + /* Title ------------------------------------------------*/ + h1 { + float: left; + width: 100%; + padding: 12px 0; + color: #fff; + font-size: 16px; + font-weight: bold; + text-shadow: $shadow; + text-align: center; + } + + /* Rows ------------------------------------------------*/ + .rows { + margin: 0 8px 8px; + width: calc(100% - 16px); + height: 300px; + background-color: black(.4); + overflow: hidden; + overflow-y: scroll; + border-radius: 3px; + box-shadow: inset 0 0 3px black(.4); + } + + /* Row ------------------------------------------------*/ + .rows .row { + float: left; + padding: 8px 0; + width: 100%; + background-color: white(.02); + + &:nth-child(2n) { background-color: white(0); } + + a.name { + float: left; + padding: 5px 10px; + width: calc(70% - 20px); + color: #fff; + font-size: 14px; + white-space: nowrap; + overflow: hidden; + } + + a.status { + float: left; + padding: 5px 10px; + width: calc(30% - 20px); + color: white(.5); + font-size: 14px; + text-align: right; + + animation-name: pulse; + animation-duration: 2s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + + &.error, + &.success { animation: none; } + + &.error { color: rgb(213, 24, 24); } + + &.success { color: rgb(42, 213, 0); } + } + + p.notice { + display: none; + float: left; + padding: 2px 10px 5px; + width: calc(100% - 20px); + color: white(.5); + font-size: 12px; + overflow: hidden; + line-height: 16px; + } + } + } \ No newline at end of file diff --git a/src/styles/_upload.scss b/src/styles/_upload.scss deleted file mode 100644 index 2ad76d6..0000000 --- a/src/styles/_upload.scss +++ /dev/null @@ -1,125 +0,0 @@ -/** - * @copyright 2014 by Tobias Reich - */ - -#upload { - display: none; -} - -.upload_overlay { - position: fixed; - width: 100%; - height: 100%; - top: 0; - left: 0; - background-color: black(.85); - z-index: 1000; -} - -.upload_message { - - position: absolute; - display: inline-block; - width: 450px; - margin-left: -225px; - margin-top: -170px; - background-image: linear-gradient(to bottom, rgb(75, 75, 75), rgb(45, 45, 45)); - border-radius: 5px; - box-shadow: 0 0 5px #000, inset 0 1px 0 white(.08); - animation-name: moveUp; - animation-duration: .3s; - animation-timing-function: $timingBounce; - - /* Header ------------------------------------------------*/ - h1 { - float: left; - width: 100%; - padding: 12px 0; - color: #fff; - font-size: 16px; - font-weight: bold; - text-shadow: 0px -1px 0px black(.3); - text-align: center; - } - - .close { - display: none; - position: absolute; - top: 0; - right: 0; - padding: 11px 14px 6px 7px; - color: #aaa; - font-size: 20px; - text-shadow: 0px -1px 0px black(.3); - cursor: pointer; - - &:hover { color: #fff; } - } - - /* Rows ------------------------------------------------*/ - .rows { - float: left; - margin: 3px 8px 8px 8px; - width: calc(100% - 16px); - height: 300px; - background-color: black(.5); - overflow: hidden; - overflow-y: scroll; - border-radius: 3px; - box-shadow: inset 0 0 3px black(.8); - } - - /* Row ------------------------------------------------*/ - .rows .row { - float: left; - display: inline-block; - padding: 8px 0; - width: 100%; - background-color: white(.02); - - &:nth-child(2n) { background-color: white(0); } - - a.name { - float: left; - padding: 5px 10px; - width: calc(70% - 20px); - color: #fff; - font-size: 14px; - white-space: nowrap; - overflow: hidden; - } - - a.status { - float: left; - padding: 5px 10px; - width: calc(30% - 20px); - color: white(.5); - font-size: 14px; - text-align: right; - - animation-name: pulse; - animation-duration: 2s; - animation-timing-function: ease-in-out; - animation-iteration-count: infinite; - - &.error, - &.success { animation: none; } - - &.error { color: rgb(213, 24, 24); } - - &.success { color: rgb(42, 213, 0); } - } - - p.notice { - display: none; - float: left; - padding: 2px 10px 5px; - width: calc(100% - 20px); - color: white(.5); - font-size: 12px; - overflow: hidden; - line-height: 16px; - } - } - -} \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index 9708f09..953828d 100755 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -31,12 +31,6 @@ body { } } -.center { - position: absolute; - left: 50%; - top: 50%; -} - input { -webkit-user-select: text !important; -moz-user-select: text !important; @@ -58,5 +52,4 @@ input { @import 'loading'; @import 'message'; @import 'multiselect'; -@import 'upload'; @import 'mediaquery'; \ No newline at end of file