mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Replace inline favorite action with just a favorite icon 

This is a preparatory step for a following commit in which the position
of the favorite icon and the checkbox will be swapped; in that new
design the favorite icon is no longer expected to be an action but just
a simple mark on whether the file is favorited or not (the action is
expected to be triggered then only from the file actions menu).

The favorite icon is now fully shown or completely hidden depending on
whether the file is favorited or not. As the icon is just informative
but no longer an action now it does not change when hovered or focus. In
the same way, the alternative text when the file is not favorited now it
is not "Favorite" (an action) but "Not favorited" instead.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
This commit is contained in:
Daniel Calviño Sánchez 2017-09-27 12:39:59 +02:00
parent 0e933ee6b9
commit 9ff0941c07
4 changed files with 60 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
apps/files/css/files.scss
View File

@ -502,7 +502,7 @@ table td.filename .uploadtext {
display: inline-block; display: inline-block;
float: left; float: left;
} }
#fileList tr td.filename .action-favorite:not(.menuitem) { #fileList tr td.filename .favorite-mark {
display: block; display: block;
float: left; float: left;
width: 30px; width: 30px;
@ -569,7 +569,8 @@ a.action > img {
margin-bottom: -1px; margin-bottom: -1px;
} }
#fileList a.action { #fileList a.action,
#fileList div.favorite-mark {
display: inline; display: inline;
padding: 17px 8px; padding: 17px 8px;
line-height: 50px; line-height: 50px;
@ -617,7 +618,7 @@ a.action > img {
padding-left: 6px; padding-left: 6px;
} }
#fileList .action.action-favorite.permanent { #fileList .favorite-mark.permanent {
opacity: 1; opacity: 1;
} }
@ -716,12 +717,24 @@ table.dragshadow td.size {
#filestable .filename .action .icon, #filestable .filename .action .icon,
#filestable .selectedActions a .icon, #filestable .selectedActions a .icon,
#filestable .filename .favorite-mark .icon,
#controls .actions .button .icon { #controls .actions .button .icon {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
background-size: 16px 16px; background-size: 16px 16px;
} }
#filestable .filename .favorite-mark {
// Override default icons to always hide the star icon and always show the
// starred icon even when hovered or focused.
& .icon-star {
background-image: none;
}
& .icon-starred {
background-image: url('../../../core/img/actions/starred.svg?v=1');
}
}
#filestable .filename .action .icon.hidden, #filestable .filename .action .icon.hidden,
#filestable .selectedActions a .icon.hidden, #filestable .selectedActions a .icon.hidden,
#controls .actions .button .icon.hidden { #controls .actions .button .icon.hidden {

101
apps/files/js/tagsplugin.js
View File

@ -17,12 +17,12 @@
PROPERTY_FAVORITE: '{' + OC.Files.Client.NS_OWNCLOUD + '}favorite' PROPERTY_FAVORITE: '{' + OC.Files.Client.NS_OWNCLOUD + '}favorite'
}); });
var TEMPLATE_FAVORITE_ACTION = var TEMPLATE_FAVORITE_MARK =
'<a href="#" ' + '<div ' +
'class="action action-favorite {{#isFavorite}}permanent{{/isFavorite}}">' + 'class="favorite-mark {{#isFavorite}}permanent{{/isFavorite}}">' +
'<span class="icon {{iconClass}}" />' + '<span class="icon {{iconClass}}" />' +
'<span class="hidden-visually">{{altText}}</span>' + '<span class="hidden-visually">{{altText}}</span>' +
'</a>'; '</div>';
/** /**
* Returns the icon class for the matching state * Returns the icon class for the matching state
@ -42,24 +42,24 @@
*/ */
function renderStar(state) { function renderStar(state) {
if (!this._template) { if (!this._template) {
this._template = Handlebars.compile(TEMPLATE_FAVORITE_ACTION); this._template = Handlebars.compile(TEMPLATE_FAVORITE_MARK);
} }
return this._template({ return this._template({
isFavorite: state, isFavorite: state,
altText: state ? t('files', 'Favorited') : t('files', 'Favorite'), altText: state ? t('files', 'Favorited') : t('files', 'Not favorited'),
iconClass: getStarIconClass(state) iconClass: getStarIconClass(state)
}); });
} }
/** /**
* Toggle star icon on action element * Toggle star icon on favorite mark element
* *
* @param {Object} action element * @param {Object} $favoriteMarkEl favorite mark element
* @param {boolean} state true if starred, false otherwise * @param {boolean} state true if starred, false otherwise
*/ */
function toggleStar($actionEl, state) { function toggleStar($favoriteMarkEl, state) {
$actionEl.removeClass('icon-star icon-starred').addClass(getStarIconClass(state)); $favoriteMarkEl.removeClass('icon-star icon-starred').addClass(getStarIconClass(state));
$actionEl.toggleClass('permanent', state); $favoriteMarkEl.toggleClass('permanent', state);
} }
OCA.Files = OCA.Files || {}; OCA.Files = OCA.Files || {};
@ -67,8 +67,9 @@
/** /**
* @namespace OCA.Files.TagsPlugin * @namespace OCA.Files.TagsPlugin
* *
* Extends the file actions and file list to include a favorite action icon * Extends the file actions and file list to include a favorite mark icon
* and addition "data-tags" and "data-favorite" attributes. * and a favorite action in the file actions menu; it also adds "data-tags"
* and "data-favorite" attributes to file elements.
*/ */
OCA.Files.TagsPlugin = { OCA.Files.TagsPlugin = {
name: 'Tags', name: 'Tags',
@ -84,63 +85,6 @@
_extendFileActions: function(fileActions) { _extendFileActions: function(fileActions) {
var self = this; var self = this;
// register "star" action
fileActions.registerAction({
name: 'FavoriteInline',
displayName: t('files', 'Favorite'),
mime: 'all',
permissions: OC.PERMISSION_READ,
type: OCA.Files.FileActions.TYPE_INLINE,
render: function(actionSpec, isDefault, context) {
var $file = context.$file;
var isFavorite = $file.data('favorite') === true;
var $icon = $(renderStar(isFavorite));
$file.find('td:first>.favorite').replaceWith($icon);
return $icon;
},
actionHandler: function(fileName, context) {
var $actionEl = context.$file.find('.action-favorite');
var $file = context.$file;
var fileInfo = context.fileList.files[$file.index()];
var dir = context.dir || context.fileList.getCurrentDirectory();
var tags = $file.attr('data-tags');
if (_.isUndefined(tags)) {
tags = '';
}
tags = tags.split('|');
tags = _.without(tags, '');
var isFavorite = tags.indexOf(OC.TAG_FAVORITE) >= 0;
if (isFavorite) {
// remove tag from list
tags = _.without(tags, OC.TAG_FAVORITE);
} else {
tags.push(OC.TAG_FAVORITE);
}
// pre-toggle the star
toggleStar($actionEl, !isFavorite);
context.fileInfoModel.trigger('busy', context.fileInfoModel, true);
self.applyFileTags(
dir + '/' + fileName,
tags,
$actionEl,
isFavorite
).then(function(result) {
context.fileInfoModel.trigger('busy', context.fileInfoModel, false);
// response from server should contain updated tags
var newTags = result.tags;
if (_.isUndefined(newTags)) {
newTags = tags;
}
context.fileInfoModel.set({
'tags': newTags,
'favorite': !isFavorite
});
});
}
});
fileActions.registerAction({ fileActions.registerAction({
name: 'Favorite', name: 'Favorite',
@ -172,7 +116,7 @@
return 'icon-star'; return 'icon-star';
}, },
actionHandler: function(fileName, context) { actionHandler: function(fileName, context) {
var $actionEl = context.$file.find('.action-favorite'); var $favoriteMarkEl = context.$file.find('.favorite-mark');
var $file = context.$file; var $file = context.$file;
var fileInfo = context.fileList.files[$file.index()]; var fileInfo = context.fileList.files[$file.index()];
var dir = context.dir || context.fileList.getCurrentDirectory(); var dir = context.dir || context.fileList.getCurrentDirectory();
@ -191,14 +135,14 @@
} }
// pre-toggle the star // pre-toggle the star
toggleStar($actionEl, !isFavorite); toggleStar($favoriteMarkEl, !isFavorite);
context.fileInfoModel.trigger('busy', context.fileInfoModel, true); context.fileInfoModel.trigger('busy', context.fileInfoModel, true);
self.applyFileTags( self.applyFileTags(
dir + '/' + fileName, dir + '/' + fileName,
tags, tags,
$actionEl, $favoriteMarkEl,
isFavorite isFavorite
).then(function(result) { ).then(function(result) {
context.fileInfoModel.trigger('busy', context.fileInfoModel, false); context.fileInfoModel.trigger('busy', context.fileInfoModel, false);
@ -222,13 +166,16 @@
var oldCreateRow = fileList._createRow; var oldCreateRow = fileList._createRow;
fileList._createRow = function(fileData) { fileList._createRow = function(fileData) {
var $tr = oldCreateRow.apply(this, arguments); var $tr = oldCreateRow.apply(this, arguments);
var isFavorite = false;
if (fileData.tags) { if (fileData.tags) {
$tr.attr('data-tags', fileData.tags.join('|')); $tr.attr('data-tags', fileData.tags.join('|'));
if (fileData.tags.indexOf(OC.TAG_FAVORITE) >= 0) { if (fileData.tags.indexOf(OC.TAG_FAVORITE) >= 0) {
$tr.attr('data-favorite', true); $tr.attr('data-favorite', true);
isFavorite = true;
} }
} }
$tr.find('td:first').prepend('<div class="favorite"></div>'); var $icon = $(renderStar(isFavorite));
$tr.find('td:first').prepend($icon);
return $tr; return $tr;
}; };
var oldElementToFile = fileList.elementToFile; var oldElementToFile = fileList.elementToFile;
@ -288,10 +235,10 @@
* *
* @param {String} fileName path to the file or folder to tag * @param {String} fileName path to the file or folder to tag
* @param {Array.<String>} tagNames array of tag names * @param {Array.<String>} tagNames array of tag names
* @param {Object} $actionEl element * @param {Object} $favoriteMarkEl favorite mark element
* @param {boolean} isFavorite Was the item favorited before * @param {boolean} isFavorite Was the item favorited before
*/ */
applyFileTags: function(fileName, tagNames, $actionEl, isFavorite) { applyFileTags: function(fileName, tagNames, $favoriteMarkEl, isFavorite) {
var encodedPath = OC.encodePath(fileName); var encodedPath = OC.encodePath(fileName);
while (encodedPath[0] === '/') { while (encodedPath[0] === '/') {
encodedPath = encodedPath.substr(1); encodedPath = encodedPath.substr(1);
@ -311,7 +258,7 @@
message = ': ' + response.responseJSON.message; message = ': ' + response.responseJSON.message;
} }
OC.Notification.show(t('files', 'An error occurred while trying to update the tags' + message), {type: 'error'}); OC.Notification.show(t('files', 'An error occurred while trying to update the tags' + message), {type: 'error'});
toggleStar($actionEl, isFavorite); toggleStar($favoriteMarkEl, isFavorite);
}); });
} }
}; };

77
apps/files/tests/js/tagspluginspec.js
View File

@ -49,24 +49,24 @@ describe('OCA.Files.TagsPlugin tests', function() {
describe('Favorites icon', function() { describe('Favorites icon', function() {
it('renders favorite icon and extra data', function() { it('renders favorite icon and extra data', function() {
var $action, $tr; var $favoriteMark, $tr;
fileList.setFiles(testFiles); fileList.setFiles(testFiles);
$tr = fileList.$el.find('tbody tr:first'); $tr = fileList.$el.find('tbody tr:first');
$action = $tr.find('.action-favorite'); $favoriteMark = $tr.find('.favorite-mark');
expect($action.length).toEqual(1); expect($favoriteMark.length).toEqual(1);
expect($action.hasClass('permanent')).toEqual(false); expect($favoriteMark.hasClass('permanent')).toEqual(false);
expect($tr.attr('data-tags').split('|')).toEqual(['tag1', 'tag2']); expect($tr.attr('data-tags').split('|')).toEqual(['tag1', 'tag2']);
expect($tr.attr('data-favorite')).not.toBeDefined(); expect($tr.attr('data-favorite')).not.toBeDefined();
}); });
it('renders permanent favorite icon and extra data', function() { it('renders permanent favorite icon and extra data', function() {
var $action, $tr; var $favoriteMark, $tr;
testFiles[0].tags.push(OC.TAG_FAVORITE); testFiles[0].tags.push(OC.TAG_FAVORITE);
fileList.setFiles(testFiles); fileList.setFiles(testFiles);
$tr = fileList.$el.find('tbody tr:first'); $tr = fileList.$el.find('tbody tr:first');
$action = $tr.find('.action-favorite'); $favoriteMark = $tr.find('.favorite-mark');
expect($action.length).toEqual(1); expect($favoriteMark.length).toEqual(1);
expect($action.hasClass('permanent')).toEqual(true); expect($favoriteMark.hasClass('permanent')).toEqual(true);
expect($tr.attr('data-tags').split('|')).toEqual(['tag1', 'tag2', OC.TAG_FAVORITE]); expect($tr.attr('data-tags').split('|')).toEqual(['tag1', 'tag2', OC.TAG_FAVORITE]);
expect($tr.attr('data-favorite')).toEqual('true'); expect($tr.attr('data-favorite')).toEqual('true');
@ -76,58 +76,11 @@ describe('OCA.Files.TagsPlugin tests', function() {
}); });
}); });
describe('Applying tags', function() { describe('Applying tags', function() {
it('sends request to server and updates icon', function() {
var request;
fileList.setFiles(testFiles);
var $tr = fileList.findFileEl('One.txt');
var $action = $tr.find('.action-favorite');
$action.click();
expect(fakeServer.requests.length).toEqual(1);
request = fakeServer.requests[0];
expect(JSON.parse(request.requestBody)).toEqual({
tags: ['tag1', 'tag2', OC.TAG_FAVORITE]
});
request.respond(200, {'Content-Type': 'application/json'}, JSON.stringify({
tags: ['tag1', 'tag2', 'tag3', OC.TAG_FAVORITE]
}));
// re-read the element as it was re-inserted
$tr = fileList.findFileEl('One.txt');
$action = $tr.find('.action-favorite');
expect($tr.attr('data-favorite')).toEqual('true');
expect($tr.attr('data-tags').split('|')).toEqual(['tag1', 'tag2', 'tag3', OC.TAG_FAVORITE]);
expect(fileList.files[0].tags).toEqual(['tag1', 'tag2', 'tag3', OC.TAG_FAVORITE]);
expect($action.find('.icon').hasClass('icon-star')).toEqual(false);
expect($action.find('.icon').hasClass('icon-starred')).toEqual(true);
$action.click();
expect(fakeServer.requests.length).toEqual(2);
request = fakeServer.requests[1];
expect(JSON.parse(request.requestBody)).toEqual({
tags: ['tag1', 'tag2', 'tag3']
});
request.respond(200, {'Content-Type': 'application/json'}, JSON.stringify({
tags: ['tag1', 'tag2', 'tag3']
}));
// re-read the element as it was re-inserted
$tr = fileList.findFileEl('One.txt');
$action = $tr.find('.action-favorite');
expect($tr.attr('data-favorite')).toBeFalsy();
expect($tr.attr('data-tags').split('|')).toEqual(['tag1', 'tag2', 'tag3']);
expect(fileList.files[0].tags).toEqual(['tag1', 'tag2', 'tag3']);
expect($action.find('.icon').hasClass('icon-star')).toEqual(true);
expect($action.find('.icon').hasClass('icon-starred')).toEqual(false);
});
it('through FileActionsMenu sends request to server and updates icon', function() { it('through FileActionsMenu sends request to server and updates icon', function() {
var request; var request;
fileList.setFiles(testFiles); fileList.setFiles(testFiles);
var $tr = fileList.findFileEl('One.txt'); var $tr = fileList.findFileEl('One.txt');
var $action = $tr.find('.action-favorite'); var $favoriteMark = $tr.find('.favorite-mark');
var $showMenuAction = $tr.find('.action-menu'); var $showMenuAction = $tr.find('.action-menu');
$showMenuAction.click(); $showMenuAction.click();
var $favoriteActionInMenu = $tr.find('.fileActionsMenu .action-favorite'); var $favoriteActionInMenu = $tr.find('.fileActionsMenu .action-favorite');
@ -144,14 +97,14 @@ describe('OCA.Files.TagsPlugin tests', function() {
// re-read the element as it was re-inserted // re-read the element as it was re-inserted
$tr = fileList.findFileEl('One.txt'); $tr = fileList.findFileEl('One.txt');
$action = $tr.find('.action-favorite'); $favoriteMark = $tr.find('.favorite-mark');
$showMenuAction = $tr.find('.action-menu'); $showMenuAction = $tr.find('.action-menu');
expect($tr.attr('data-favorite')).toEqual('true'); expect($tr.attr('data-favorite')).toEqual('true');
expect($tr.attr('data-tags').split('|')).toEqual(['tag1', 'tag2', 'tag3', OC.TAG_FAVORITE]); expect($tr.attr('data-tags').split('|')).toEqual(['tag1', 'tag2', 'tag3', OC.TAG_FAVORITE]);
expect(fileList.files[0].tags).toEqual(['tag1', 'tag2', 'tag3', OC.TAG_FAVORITE]); expect(fileList.files[0].tags).toEqual(['tag1', 'tag2', 'tag3', OC.TAG_FAVORITE]);
expect($action.find('.icon').hasClass('icon-star')).toEqual(false); expect($favoriteMark.find('.icon').hasClass('icon-star')).toEqual(false);
expect($action.find('.icon').hasClass('icon-starred')).toEqual(true); expect($favoriteMark.find('.icon').hasClass('icon-starred')).toEqual(true);
// show again the menu and get the new action, as the menu was // show again the menu and get the new action, as the menu was
// closed and removed (and with it, the previous action) when that // closed and removed (and with it, the previous action) when that
@ -171,13 +124,13 @@ describe('OCA.Files.TagsPlugin tests', function() {
// re-read the element as it was re-inserted // re-read the element as it was re-inserted
$tr = fileList.findFileEl('One.txt'); $tr = fileList.findFileEl('One.txt');
$action = $tr.find('.action-favorite'); $favoriteMark = $tr.find('.favorite-mark');
expect($tr.attr('data-favorite')).toBeFalsy(); expect($tr.attr('data-favorite')).toBeFalsy();
expect($tr.attr('data-tags').split('|')).toEqual(['tag1', 'tag2', 'tag3']); expect($tr.attr('data-tags').split('|')).toEqual(['tag1', 'tag2', 'tag3']);
expect(fileList.files[0].tags).toEqual(['tag1', 'tag2', 'tag3']); expect(fileList.files[0].tags).toEqual(['tag1', 'tag2', 'tag3']);
expect($action.find('.icon').hasClass('icon-star')).toEqual(true); expect($favoriteMark.find('.icon').hasClass('icon-star')).toEqual(true);
expect($action.find('.icon').hasClass('icon-starred')).toEqual(false); expect($favoriteMark.find('.icon').hasClass('icon-starred')).toEqual(false);
}); });
}); });
describe('elementToFile', function() { describe('elementToFile', function() {

10
tests/acceptance/features/bootstrap/FilesAppContext.php
View File

@ -278,16 +278,16 @@ class FilesAppContext implements Context, ActorAwareInterface {
/** /**
* @return Locator * @return Locator
*/ */
public static function favoriteActionForFile($fileName) { public static function favoriteMarkForFile($fileName) {
return Locator::forThe()->css(".action-favorite")->descendantOf(self::rowForFile($fileName))-> return Locator::forThe()->css(".favorite-mark")->descendantOf(self::rowForFile($fileName))->
describedAs("Favorite action for file $fileName in Files app"); describedAs("Favorite mark for file $fileName in Files app");
} }
/** /**
* @return Locator * @return Locator
*/ */
public static function notFavoritedStateIconForFile($fileName) { public static function notFavoritedStateIconForFile($fileName) {
return Locator::forThe()->css(".icon-star")->descendantOf(self::favoriteActionForFile($fileName))-> return Locator::forThe()->css(".icon-star")->descendantOf(self::favoriteMarkForFile($fileName))->
describedAs("Not favorited state icon for file $fileName in Files app"); describedAs("Not favorited state icon for file $fileName in Files app");
} }
@ -295,7 +295,7 @@ class FilesAppContext implements Context, ActorAwareInterface {
* @return Locator * @return Locator
*/ */
public static function favoritedStateIconForFile($fileName) { public static function favoritedStateIconForFile($fileName) {
return Locator::forThe()->css(".icon-starred")->descendantOf(self::favoriteActionForFile($fileName))-> return Locator::forThe()->css(".icon-starred")->descendantOf(self::favoriteMarkForFile($fileName))->
describedAs("Favorited state icon for file $fileName in Files app"); describedAs("Favorited state icon for file $fileName in Files app");
} }