Merge pull request #12917 from nextcloud/feature/noid/favorites-quickaccess-add-droppable-v3
Added Drozone to favorites quickaccess
This commit is contained in:
Morris Jobke
GitHub
commit
30fb78c878
5 changed files with 83 additions and 35 deletions
|
|
@ -120,6 +120,9 @@
|
|||
.nav-icon-deletedshares {
|
||||
@include icon-color('unshare', 'files', $color-black);
|
||||
}
|
||||
.nav-icon-favorites-starred {
|
||||
@include icon-color('star-dark', 'actions', $color-yellow, 2, true);
|
||||
}
|
||||
|
||||
#app-navigation .nav-files a.nav-icon-files {
|
||||
width: auto;
|
||||
|
|
@ -704,7 +707,7 @@ table.dragshadow td.size {
|
|||
background-image: none;
|
||||
}
|
||||
& .icon-starred {
|
||||
@include icon-color('star-dark', 'actions', 'FC0', 1, true);
|
||||
@include icon-color('star-dark', 'actions', $color-yellow, 1, true);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -727,7 +730,13 @@ table.dragshadow td.size {
|
|||
|
||||
.breadcrumb .canDrop > a,
|
||||
#filestable tbody tr.canDrop {
|
||||
background-color: rgb(179, 230, 255);
|
||||
background-color: rgba( $color-primary, .3 );
|
||||
}
|
||||
.dropzone-background {
|
||||
background-color: rgba( $color-primary, .3 );
|
||||
:hover{
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -360,12 +360,12 @@
|
|||
|
||||
this.$fileList.on('click','td.filename>a.name, td.filesize, td.date', _.bind(this._onClickFile, this));
|
||||
|
||||
$.event.trigger({type: "droppedOnTrash"});
|
||||
this.$fileList.on("droppedOnFavorites", function (event, file) {
|
||||
self.fileActions.triggerAction('Favorite', self.getModelForFile(file), self);
|
||||
});
|
||||
|
||||
var self=this;
|
||||
this.$fileList.on("droppedOnTrash", function (event, filename, directory) {
|
||||
//self.fileActions.triggerAction('Favorite', self.getModelForFile(file), self);
|
||||
self.do_delete(filename, directory)
|
||||
this.$fileList.on('droppedOnTrash', function (event, filename, directory) {
|
||||
self.do_delete(filename, directory);
|
||||
});
|
||||
|
||||
this.$fileList.on('change', 'td.selection>.selectCheckBox', _.bind(this._onClickFileCheckbox, this));
|
||||
|
|
|
|||
|
|
@ -62,40 +62,37 @@
|
|||
* Setup UI events
|
||||
*/
|
||||
_setupEvents: function () {
|
||||
this.$el.on('click', 'li a', _.bind(this._onClickItem, this))
|
||||
this.$el.on('click', 'li a', _.bind(this._onClickItem, this));
|
||||
this.$el.on('click', 'li button', _.bind(this._onClickMenuButton, this));
|
||||
|
||||
var trashElement=$(".nav-trashbin");
|
||||
|
||||
//this div is required to prefetch the icon, otherwise it takes a second to show up
|
||||
trashElement.append("<div class='nav-icon-trashbin-starred'></div>")
|
||||
trashElement.droppable({
|
||||
over: function( event, ui ) {
|
||||
trashElement.addClass('dropzone-background')
|
||||
var trashBinElement = $('.nav-trashbin');
|
||||
trashBinElement.droppable({
|
||||
over: function (event, ui) {
|
||||
trashBinElement.addClass('dropzone-background');
|
||||
},
|
||||
out: function( event, ui ) {
|
||||
trashElement.removeClass('dropzone-background');
|
||||
out: function (event, ui) {
|
||||
trashBinElement.removeClass('dropzone-background');
|
||||
},
|
||||
activate: function( event, ui ) {
|
||||
var elem=trashElement.find("a").first();
|
||||
elem.addClass('nav-icon-trashbin-starred').removeClass('nav-icon-trashbin');
|
||||
activate: function (event, ui) {
|
||||
var element = trashBinElement.find('a').first();
|
||||
element.addClass('nav-icon-trashbin-starred').removeClass('nav-icon-trashbin');
|
||||
},
|
||||
deactivate: function( event, ui ) {
|
||||
var elem=trashElement.find("a").first();
|
||||
elem.addClass('nav-icon-trashbin').removeClass('nav-icon-trashbin-starred');
|
||||
deactivate: function (event, ui) {
|
||||
var element = trashBinElement.find('a').first();
|
||||
element.addClass('nav-icon-trashbin').removeClass('nav-icon-trashbin-starred');
|
||||
},
|
||||
drop: function( event, ui ) {
|
||||
drop: function (event, ui) {
|
||||
trashBinElement.removeClass('dropzone-background');
|
||||
|
||||
var $selectedFiles = $(ui.draggable);
|
||||
|
||||
if (ui.helper.find("tr").size()===1) {
|
||||
var $tr = $selectedFiles.closest('tr');
|
||||
$selectedFiles.trigger("droppedOnTrash", $tr.attr("data-file"), $tr.attr('data-dir'));
|
||||
}else{
|
||||
var item = ui.helper.find("tr");
|
||||
for(var i=0; i<item.length;i++){
|
||||
$selectedFiles.trigger("droppedOnTrash", item[i].getAttribute("data-file"), item[i].getAttribute("data-dir"));
|
||||
}
|
||||
// FIXME: when there are a lot of selected files the helper
|
||||
// contains only a subset of them; the list of selected
|
||||
// files should be gotten from the file list instead to
|
||||
// ensure that all of them are removed.
|
||||
var item = ui.helper.find('tr');
|
||||
for (var i = 0; i < item.length; i++) {
|
||||
$selectedFiles.trigger('droppedOnTrash', item[i].getAttribute('data-file'), item[i].getAttribute('data-dir'));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -222,11 +219,52 @@
|
|||
*/
|
||||
setInitialQuickaccessSettings: function () {
|
||||
var quickAccessKey = this.$quickAccessListKey;
|
||||
var quickAccessMenu = document.getElementById(quickAccessKey)
|
||||
var quickAccessMenu = document.getElementById(quickAccessKey);
|
||||
if (quickAccessMenu) {
|
||||
var list = quickAccessMenu.getElementsByTagName('li');
|
||||
this.QuickSort(list, 0, list.length - 1);
|
||||
}
|
||||
|
||||
var favoritesListElement = $(quickAccessMenu).parent();
|
||||
favoritesListElement.droppable({
|
||||
over: function (event, ui) {
|
||||
favoritesListElement.addClass('dropzone-background');
|
||||
},
|
||||
out: function (event, ui) {
|
||||
favoritesListElement.removeClass('dropzone-background');
|
||||
},
|
||||
activate: function (event, ui) {
|
||||
var element = favoritesListElement.find('a').first();
|
||||
element.addClass('nav-icon-favorites-starred').removeClass('nav-icon-favorites');
|
||||
},
|
||||
deactivate: function (event, ui) {
|
||||
var element = favoritesListElement.find('a').first();
|
||||
element.addClass('nav-icon-favorites').removeClass('nav-icon-favorites-starred');
|
||||
},
|
||||
drop: function (event, ui) {
|
||||
favoritesListElement.removeClass('dropzone-background');
|
||||
|
||||
var $selectedFiles = $(ui.draggable);
|
||||
|
||||
if (ui.helper.find('tr').size() === 1) {
|
||||
var $tr = $selectedFiles.closest('tr');
|
||||
if ($tr.attr("data-favorite")) {
|
||||
return;
|
||||
}
|
||||
$selectedFiles.trigger('droppedOnFavorites', $tr.attr('data-file'));
|
||||
} else {
|
||||
// FIXME: besides the issue described for dropping on
|
||||
// the trash bin, for favoriting it is not possible to
|
||||
// use the data from the helper; due to some bugs the
|
||||
// tags are not always added to the selected files, and
|
||||
// thus that data can not be accessed through the helper
|
||||
// to prevent triggering the favorite action on an
|
||||
// already favorited file (which would remove it from
|
||||
// favorites).
|
||||
OC.Notification.showTemporary(t('files', 'You can only favorite a single file or folder at a time'));
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -282,13 +282,13 @@ img, object, video, button, textarea, input, select, div[contenteditable='true']
|
|||
&:focus {
|
||||
@include icon-color('star', 'actions', $color-black, 1, true);
|
||||
}
|
||||
@include icon-color('star-dark', 'actions', 'FC0', 1, true);
|
||||
@include icon-color('star-dark', 'actions', $color-yellow, 1, true);
|
||||
}
|
||||
|
||||
.icon-star {
|
||||
&:hover,
|
||||
&:focus {
|
||||
@include icon-color('star-dark', 'actions', 'FC0', 1, true);
|
||||
@include icon-color('star-dark', 'actions', $color-yellow, 1, true);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@ $color-success: #46ba61;
|
|||
// used for svg
|
||||
$color-white: #fff;
|
||||
$color-black: #000;
|
||||
$color-yellow: #FC0;
|
||||
|
||||
// rgb(118, 118, 118) / #767676
|
||||
// min. color contrast for normal text on white background according to WCAG AA
|
||||
|
|
|
|||
Loading…
Reference in a new issue