Skip to content

Commit

Permalink
Combine upload action into the "New" menu
Browse files Browse the repository at this point in the history 
Refactored the new menu to be encapsulated in the NewFileMenu JS class
  • Loading branch information
Vincent Petry committed Aug 28, 2015
1 parent efeef95 commit 59273a8
Show file tree
Hide file tree
Showing 11 changed files with 551 additions and 270 deletions.
135 changes: 60 additions & 75 deletions apps/files/css/files.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,61 +18,15 @@
z-index: -30;
}

#new {
z-index: 1010;
float: left;
padding: 0 !important; /* override default control bar button padding */
}
#trash {
margin-right: 8px;
float: right;
z-index: 1010;
padding: 10px;
font-weight: normal;
}
#new > a {
padding: 14px 10px;
position: relative;
top: 7px;
}
#new.active {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom: none;
background: #f8f8f8;
}
#new > ul {
display: none;
position: fixed;
min-width: 112px;
z-index: -10;
padding: 8px;
padding-bottom: 0;
margin-top: 13.5px;
margin-left: -1px;
text-align: left;
background: #f8f8f8;
border: 1px solid #ddd;
border: 1px solid rgba(240, 240, 240, 0.9);
border-radius: 5px;
border-top-left-radius: 0;
box-shadow: 0 2px 7px rgba(170,170,170,.4);
}
#new > ul > li {
height: 36px;
margin: 5px;
padding-left: 42px;
padding-bottom: 2px;
background-position: left center;
cursor: pointer;
}
#new > ul > li > p {
cursor: pointer;
padding-top: 7px;
padding-bottom: 7px;
}

#new .error, #fileList .error {
.newFileMenu .error, #fileList .error {
color: #e9322d;
border-color: #e9322d;
-webkit-box-shadow: 0 0 6px #f8b9b7;
Expand Down Expand Up @@ -143,6 +97,30 @@
margin-bottom: 44px;
}

#app-navigation .nav-files a.nav-icon-files {
width: auto;
}
/* button needs overrides due to navigation styles */
#app-navigation .nav-files a.new {
width: 40px;
height: 32px;
padding: 0 10px;
margin: 0;
cursor: pointer;
}

#app-navigation .nav-files a {
display: inline-block;
}

#app-navigation .nav-files a.new.hidden {
display: none;
}

#app-navigation .nav-files a.new.disabled {
opacity: 0.3;
}

#filestable tbody tr {
background-color: #fff;
height: 40px;
Expand Down Expand Up @@ -599,7 +577,8 @@ a.action > img {
#fileList a.action.action-menu {
padding: 17px 14px;
}
#fileList .fileActionsMenu {

#fileList .popovermenu {
margin-right: 21px;
}

Expand Down Expand Up @@ -654,13 +633,13 @@ a.action > img {
}

/* properly display actions in the popover menu */
#fileList .fileActionsMenu .action {
#fileList .popovermenu .action {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;
filter: alpha(opacity=50) !important;
opacity: .5 !important;
}
#fileList .fileActionsMenu .action:hover,
#fileList .fileActionsMenu .action:focus {
#fileList .popovermenu .action:hover,
#fileList .popovermenu .action:focus {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
filter: alpha(opacity=100) !important;
opacity: 1 !important;
Expand Down Expand Up @@ -744,43 +723,49 @@ table.dragshadow td.size {
opacity: 0;
}

.fileActionsMenu {
padding: 4px 12px;
}
.fileActionsMenu li {
padding: 5px 0;
}
#fileList .fileActionsMenu a.action img {
#fileList .popovermenu a.action img {
padding: initial;
}
#fileList .fileActionsMenu a.action {

#fileList .popovermenu a.action {
padding: 10px;
margin: -10px;
}

.fileActionsMenu.hidden {
display: none;
.newFileMenu {
width: 140px;
margin-left: -56px;
margin-top: 25px;
}

#fileList .fileActionsMenu .action {
display: block;
line-height: 30px;
padding-left: 5px;
color: #000;
padding: 0;
.newFileMenu .menuitem {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

.newFileMenu.bubble:after {
left: 75px;
right: auto;
}
.newFileMenu.bubble:before {
left: 75px;
right: auto;
}

.fileActionsMenu .action img,
.fileActionsMenu .action .no-icon {
.newFileMenu .filenameform {
display: inline-block;
width: 16px;
margin-right: 5px;
}

.fileActionsMenu .action {
opacity: 0.5;
.newFileMenu .filenameform input {
width: 100px;
}

.fileActionsMenu li:hover .action {
opacity: 1;
#fileList .popovermenu .action {
display: block;
line-height: 30px;
padding-left: 5px;
color: #000;
padding: 0;
}

14 changes: 0 additions & 14 deletions apps/files/css/upload.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,20 +24,6 @@
}
.file_upload_target { display:none; }
.file_upload_form { display:inline; float:left; margin:0; padding:0; cursor:pointer; overflow:visible; }
#file_upload_start {
position: relative;
left: 0;
top: 0;
width: 44px;
height: 44px;
margin: -5px -3px;
padding: 0;
font-size: 16px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0;
z-index: 20;
cursor: pointer;
overflow: hidden;
}

#uploadprogresswrapper, #uploadprogresswrapper * {
-moz-box-sizing: border-box;
Expand Down
1 change: 1 addition & 0 deletions apps/files/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
OCP\Util::addStyle('files', 'mobile');
OCP\Util::addscript('files', 'app');
OCP\Util::addscript('files', 'file-upload');
OCP\Util::addscript('files', 'newfilemenu');
OCP\Util::addscript('files', 'jquery.iframe-transport');
OCP\Util::addscript('files', 'jquery.fileupload');
OCP\Util::addscript('files', 'jquery-visibility');
Expand Down
149 changes: 0 additions & 149 deletions apps/files/js/file-upload.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -551,155 +551,6 @@ OC.Upload = {
$('#file_upload_start').attr('multiple', 'multiple');
}

$(document).click(function(ev) {
// do not close when clicking in the dropdown
if ($(ev.target).closest('#new').length){
return;
}
$('#new>ul').hide();
$('#new').removeClass('active');
if ($('#new .error').length > 0) {
$('#new .error').tipsy('hide');
}
$('#new li').each(function(i,element) {
if ($(element).children('p').length === 0) {
$(element).children('form').remove();
$(element).append('<p>' + $(element).data('text') + '</p>');
}
});
});
$('#new').click(function(event) {
event.stopPropagation();
});
$('#new>a').click(function() {
$('#new>ul').toggle();
$('#new').toggleClass('active');
});
$('#new li').click(function() {
if ($(this).children('p').length === 0) {
return;
}

$('#new .error').tipsy('hide');

$('#new li').each(function(i, element) {
if ($(element).children('p').length === 0) {
$(element).children('form').remove();
$(element).append('<p>' + $(element).data('text') + '</p>');
}
});

var type = $(this).data('type');
var text = $(this).children('p').text();
$(this).data('text', text);
$(this).children('p').remove();

// add input field
var form = $('<form></form>');
var input = $('<input type="text">');
var newName = $(this).attr('data-newname') || '';
var fileType = 'input-' + $(this).attr('data-type');
if (newName) {
input.val(newName);
input.attr('id', fileType);
}
var label = $('<label class="hidden-visually" for="">' + escapeHTML(newName) + '</label>');
label.attr('for', fileType);

form.append(label).append(input);
$(this).append(form);
var lastPos;
var checkInput = function () {
var filename = input.val();
if (!Files.isFileNameValid(filename)) {
// Files.isFileNameValid(filename) throws an exception itself
} else if (FileList.inList(filename)) {
throw t('files', '{new_name} already exists', {new_name: filename});
} else {
return true;
}
};

// verify filename on typing
input.keyup(function(event) {
try {
checkInput();
input.tipsy('hide');
input.removeClass('error');
} catch (error) {
input.attr('title', error);
input.tipsy({gravity: 'w', trigger: 'manual'});
input.tipsy('show');
input.addClass('error');
}
});

input.focus();
// pre select name up to the extension
lastPos = newName.lastIndexOf('.');
if (lastPos === -1) {
lastPos = newName.length;
}
input.selectRange(0, lastPos);
form.submit(function(event) {
event.stopPropagation();
event.preventDefault();
try {
checkInput();
var newname = input.val();
if (FileList.lastAction) {
FileList.lastAction();
}
var name = FileList.getUniqueName(newname);
switch(type) {
case 'file':
$.post(
OC.filePath('files', 'ajax', 'newfile.php'),
{
dir: FileList.getCurrentDirectory(),
filename: name
},
function(result) {
if (result.status === 'success') {
FileList.add(result.data, {animate: true, scrollTo: true});
} else {
OC.dialogs.alert(result.data.message, t('core', 'Could not create file'));
}
}
);
break;
case 'folder':
$.post(
OC.filePath('files','ajax','newfolder.php'),
{
dir: FileList.getCurrentDirectory(),
foldername: name
},
function(result) {
if (result.status === 'success') {
FileList.add(result.data, {animate: true, scrollTo: true});
} else {
OC.dialogs.alert(result.data.message, t('core', 'Could not create folder'));
}
}
);
break;
}
var li = form.parent();
form.remove();
/* workaround for IE 9&10 click event trap, 2 lines: */
$('input').first().focus();
$('#content').focus();
li.append('<p>' + li.data('text') + '</p>');
$('#new>a').click();
} catch (error) {
input.attr('title', error);
input.tipsy({gravity: 'w', trigger: 'manual'});
input.tipsy('show');
input.addClass('error');
}
});
});
window.file_upload_param = file_upload_param;
return file_upload_param;
}
Expand Down
4 changes: 2 additions & 2 deletions apps/files/js/fileactionsmenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
'<ul>' +
'{{#each items}}' +
'<li>' +
'<a href="#" class="action action-{{nameLowerCase}} permanent" data-action="{{name}}">{{#if icon}}<img src="{{icon}}"/>{{else}}<span class="no-icon"></span>{{/if}}<span>{{displayName}}</span></a>' +
'<a href="#" class="menuitem action action-{{nameLowerCase}} permanent" data-action="{{name}}">{{#if icon}}<img class="icon" src="{{icon}}"/>{{else}}<span class="no-icon"></span>{{/if}}<span>{{displayName}}</span></a>' +
'</li>' +
'{{/each}}' +
'</ul>';
Expand All @@ -26,7 +26,7 @@
*/
var FileActionsMenu = OC.Backbone.View.extend({
tagName: 'div',
className: 'fileActionsMenu bubble hidden open menu',
className: 'fileActionsMenu popovermenu bubble hidden open menu',

/**
* Current context
Expand Down
Loading

0 comments on commit 59273a8

Please sign in to comment.