Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Quick-Access to favorite folder in left sidepanel in files-app #9720

Closed
wants to merge 0 commits into from

Conversation

newhinton
Copy link
Contributor

@newhinton newhinton commented Jun 2, 2018

I have implemented the feature request from Issue #9714.
Fixes #9714

The only thing which does not properly work, is the initial State of the checkbox which enables this functionality. It is properly set, but the initial state is always unchecked, regardless of the true value.

@codecov
Copy link

codecov bot commented Jun 3, 2018

Codecov Report

Merging #9720 into master will decrease coverage by 49.67%.
The diff coverage is 0%.

@@             Coverage Diff              @@
##             master   #9720       +/-   ##
============================================
- Coverage     51.72%   2.04%   -49.68%     
- Complexity    25733   26007      +274     
============================================
  Files          1636    1585       -51     
  Lines         96030   88848     -7182     
  Branches       1384       0     -1384     
============================================
- Hits          49667    1815    -47852     
- Misses        46363   87033    +40670
Impacted Files Coverage Δ Complexity Δ
apps/files/lib/Controller/ApiController.php 0% <0%> (-50%) 32 <9> (+9)
apps/files/lib/Controller/ViewController.php 0% <0%> (-78.34%) 23 <1> (+5)
apps/files/appinfo/routes.php 0% <0%> (ø) 0 <0> (ø) ⬇️
apps/files/templates/appnavigation.php 0% <0%> (ø) 0 <0> (ø) ⬇️
lib/private/NavigationManager.php 0% <0%> (-77.56%) 61 <9> (+9)
lib/private/App/CompareVersion.php 0% <0%> (-100%) 8% <0%> (ø)
lib/private/Security/Certificate.php 0% <0%> (-100%) 16% <0%> (ø)
lib/private/Files/ObjectStore/Mapper.php 0% <0%> (-100%) 2% <0%> (ø)
lib/private/Security/IdentityProof/Key.php 0% <0%> (-100%) 3% <0%> (ø)
lib/private/Memcache/ArrayCache.php 0% <0%> (-100%) 17% <0%> (ø)
... and 1009 more

Copy link
Member

@skjnldsv skjnldsv left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hello! Thanks for your pull request and welcome! :) 🎉

I added quite a few comments to explain some of the required changes :)
Feel free to ask for more details if I did not explained properly ;)

<?php } ?>


<?php if($_['favoritesFolders']>0){
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should not be created. All navigation elements should go into the navigationItems. Otherwise this goes against the simple implementation we did here. We should not add multiple types of navigations items.

This will also break the pinned system if another app decide to add one new in the nav item list.
If you did that just to add your spacer, please create a new condition in the main loop and a check to detect the use of a spacer item :)

@@ -106,6 +106,19 @@
background-image: url('../img/delete.svg?v=1');
}

.nav-sidebar-spacer {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be standardise an put into the apps.scss file.

  1. Please cut the code of the settings-caption class and put it into the apps.scss file (change the class name to something like app-navigation-caption
  2. Update the uses of the old settings-caption across the server https://github.com/nextcloud/server/search?utf8=✓&q=settings-caption to you new class name
  3. use the same class for your Favorites navigation element

Like so any other app that also register a spacer within the files app (from anywhere like their own application or from another nextcloud app) won't have anything to edit in the server core code :)

capture d ecran_2018-06-03_18-56-38


$helper= new \OCA\Files\Activity\Helper($tagger);
$favElements = $helper->getFavoriteFilePaths($this->userSession->getUser()->getUID());
$favItems = $favElements["items"];
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

single quotes please ;)

$favElements = $helper->getFavoriteFilePaths($this->userSession->getUser()->getUID());
$favItems = $favElements["items"];

$key="show_Quick_Access";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same :p

}

$i=0;
foreach($favElements["folders"] as $elem){
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

here also

if($showFavoriteQuickAccess){
$nav->assign('favoritesItems', $favItems);
$nav->assign('favoritesFolders', $favFolder);
$nav->assign('setQuickAccessChecked', "checked");
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Weee 🙈

<?php $pinned = 0 ?>
<?php
$pinned = 0;
$trashelement = null;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See other comment, we don't need to create specific entries for the trashbin, this should stay clean.

} ?>">
<a href="#" class="icon-quota svg">
<a href="#" class="nav-icon-quota svg">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure the nav-icon-quota class exists? 🤔

<label for="webdavurl"><?php p($l->t('WebDAV'));?></label>
<input id="webdavurl" type="text" readonly="readonly" value="<?php p($_['webdavurl']); ?>" />
<input id="webdavurl" type="text" readonly="readonly" value="<?php p(\OCP\Util::linkToRemote('webdav')); ?>" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why this change? Was it not working? (I did not checked) :)

@skjnldsv skjnldsv added enhancement design Design, UI, UX, etc. 2. developing Work in progress feature: files labels Jun 3, 2018
@skjnldsv skjnldsv added this to the Nextcloud 14 milestone Jun 3, 2018
@newhinton
Copy link
Contributor Author

newhinton commented Jun 3, 2018

@skjnldsv The quotes and the webdav/quota-changes are fixed, they were made by mistake, thanks for pointing out!
What do you mean with "put the css in app.scss"? Aren't they?
Or do you mean that the name of my style is misleading and should be changed to something more descriptive?

The other changes will need some time since they are not quick fixes.

@skjnldsv
Copy link
Member

skjnldsv commented Jun 3, 2018

What do you mean with "put the css in app.scss"? Aren't they?
Or do you mean that the name of my style is misleading and should be changed to something more descriptive?

Sorry, I should have been more clear :)
The /core/css/apps.scss file contains the design standards across all of our apps and core. That includes (but not limited to) the app navigation, the app settings, the popoverenus, the app-content-lists... etc. Since we already have a design for the spacer (see the settings section of nextcloud and my screenshot) we should use this design but make it available for everyone in the future. So move the settings-caption property into the app-navigation part of the apps.scss file and rename it to a class that fit the class name pattern we use (lile app-navigation-caption for example :) )

.settings-caption {
font-weight: bold;
line-height: 44px;
padding: 0 44px;
white-space: nowrap;
text-overflow: ellipsis;
// !important to overwrite specific hover and focus
opacity: .4 !important;
box-shadow: none !important;
&:not(:first-child) {
margin-top: 22px;
}
}

Therefore, since your pull request will most likely be integrated into 14, every app that want to add a caption-like design into their navigation will be able to use our design thanks to you 😉

@skjnldsv
Copy link
Member

skjnldsv commented Jun 3, 2018

The other changes will need some time since they are not quick fixes.

It shouldn't be that much, don't worry. Since we already have the code to add items to the app navigation, just make your script add the favorites items with the \OCA\Files\App::getNavigationManager()->add() function and the spacer with the same way.

You may need to edit the add function to add a new property like type to differentiate the 'traditional' navigation sitems from the spacers ;)

@@ -561,6 +561,25 @@ kbd {
.app-navigation-entry-menu ul {
list-style-type: none;
}

.settings-caption {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

app-navigation-caption would be better please :)

@newhinton
Copy link
Contributor Author

newhinton commented Jun 7, 2018

Yeah, you are right about the css-style-name, forgot to change its name after getting it to work :D

But there is still a last todo on my list, the Checkbutton wich enables this functionality for the user is not properly set on page load. It works and sets the correct value in the backend, but the current state is not applied on page load. Where do i need to set this value initially?

@@ -40,9 +42,14 @@ class="nav-icon-<?php p($item['icon'] !== '' ? $item['icon'] : $item['id']) ?> s
<input class="checkbox" id="showhiddenfilesToggle" checked="checked" type="checkbox">
<label for="showhiddenfilesToggle"><?php p($l->t('Show hidden files')); ?></label>
</div>
<div id="files-setting-showFavoriteQuickAccess">
<input class="checkbox" id="showfavoritequickaccessToggle" checked="checked" type="checkbox">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But there is still a last todo on my list, the Checkbutton wich enables this functionality for the user is not properly set on page load. It works and sets the correct value in the backend, but the current state is not applied on page load. Where do i need to set this value initially?

The status is always checked by default here.
Either you set the state on javascript on load (not quite fond of this), or you pass it via php using the getUserValue config check (Better solution I think)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is looking great by the way! 😉

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, but the checked="checked" does not change the state. It is always disabled by default, and i think it is set by javascript to unchecked. I have tried to mimic the behaviour of the showHiddenFiles-Toggle, but it does not seem to work. I don't now enough about the internal workings of the core, so i'm stuck here

And thank you for the compliment ;)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can check the source code to see if php is properly setting this up.
But like Jan said, don't bother with the settings, remove it, it will be easier :)

And it's a great addition, so I guess less work from you and more pleasure for the users ;)

@jancborchardt
Copy link
Member

Good stuff! See my design comments in the issue at #9714 :)

pointer-events:none;
}

.app-navigation-subelement {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, I get it now! :)
There is already a standard for this:
Look at our documentation : https://docs.nextcloud.com/server/13/developer_manual/design/navigation.html

Copy link
Member

@skjnldsv skjnldsv left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Amazing work! Let's review this :)

  • The Favourite first item menu is not collapsible, this should be possible
  • The three-dot-more-icon should be hidden until the user have at least one directory favourited
  • The list is not updated in real time

That's all I found so far :)
Thanks a lot!

@newhinton
Copy link
Contributor Author

newhinton commented Jun 18, 2018

What do you mean with "The Favourite first item menu"?

@skjnldsv
Copy link
Member

skjnldsv commented Jun 18, 2018

What do you mean with "The Favourite first item menu"?

I mean the top level menu. The entry that says "Favorites" :)
https://docs.nextcloud.com/server/13/developer_manual/design/navigation.html#collapsible-entry

@newhinton
Copy link
Contributor Author

newhinton commented Jun 18, 2018

@skjnldsv Where do i find the method which marks a file as a favorite? To make this thing "responsive", i need to add a function there, which adds or removes the item from the list. I cant seem to find this method, any hint?

@skjnldsv
Copy link
Member

skjnldsv commented Jun 18, 2018

@newhinton Sure :)

fileActions.registerAction({
name: 'Favorite',
displayName: function(context) {
var $file = context.$file;
var isFavorite = $file.data('favorite') === true;
if (isFavorite) {
return t('files', 'Remove from favorites');
}
// As it is currently not possible to provide a context for
// the i18n strings "Add to favorites" was used instead of
// "Favorite" to remove the ambiguity between verb and noun
// when it is translated.
return t('files', 'Add to favorites');
},
mime: 'all',
order: -100,
permissions: OC.PERMISSION_NONE,
iconClass: function(fileName, context) {
var $file = context.$file;
var isFavorite = $file.data('favorite') === true;
if (isFavorite) {
return 'icon-star-dark';
}
return 'icon-starred';
},
actionHandler: function(fileName, context) {
var $favoriteMarkEl = context.$file.find('.favorite-mark');
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($favoriteMarkEl, !isFavorite);
context.fileInfoModel.trigger('busy', context.fileInfoModel, true);
self.applyFileTags(
dir + '/' + fileName,
tags,
$favoriteMarkEl,
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
});
});
}
});

var dotmenu = document.getElementById("quickaccess-list");
dotmenu.style.display='';

if(!$("#favorites-toggle" ).hasClass('open')){
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@newhinton
Copy link
Contributor Author

@skjnldsv check it out now, it should be pretty finished now

Copy link
Member

@skjnldsv skjnldsv left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Beautiful! :)

@skjnldsv skjnldsv added 3. to review Waiting for reviews and removed 2. developing Work in progress labels Jun 18, 2018
@newhinton
Copy link
Contributor Author

The default would be dateadded, which would be the good first step you mentioned. We have already passed that after introducing sorting in any way.

The difference in code to maintain is not really that big, counted ~65 Lines of code more in the custom order, which includes brackets and so on.

Last Date modified will NOT always show relevant stuff, since a cloud is often a shared medium (shared by bots which sync stuff, friends moving files in your shared folders, etc.). This will often result in an order which is not understandable by the user. It is unclear why it changed, since there is no explanation how it sorts.

We dont need to make it discoverable, if the user never detects it, he can just use last date added, which does not have the ability to change randomly.

A user could drag a folder into another folder, which could have WAY more serious consequences (synced folders, dataleak in shared folders, etc). I do not consider accidential dragging of elements which pose no risk at all (except from a messed up sorting, which can be solved by dragging it back)

And as i stated earlier, dragging on mobile is not possible. You simply cannot drag on mobile browsers, if you do not implement it specifically.

You dont need a default, because it's a custom order.

From a feature-based standpoint, i consider this feature ready. I have implemented what i intended to achieve here, which will add benefit to users if they decide to use it. I do not consider "lastdatemodified" as a good design choice, since it introduces intransparency and confusion to a less savy user. Also it limits the benefits since you would always need to find your folders again.

As long as there are no technical problems, bugs or nessessary codestylechanges, i consider the work finished, and i will not change the sorting since then i would have developed a feature which i would never use.
I have explained how you can change the sorting-order, if you really wish to change it, please do it yourself.

Copy link
Member

@skjnldsv skjnldsv left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Adding a file to favorite create a new entry in the left menu with the folder icon despite the fact that the starred file is not a directory
  • On the favorite menu, when opening a folder details sidebar, clicking the star keeps adding entries to the menu and do not remove the directory from the favourites

@newhinton
Copy link
Contributor Author

@jancborchardt It should be noted that my comment is only valid for lastdatemodified sorting. If you really think custom sorting is over the top (which i disagree), we could settle by sorting it alphabetically, which would not add a changing ui element. This would be the next sensible thing to do.

@skjnldsv Thanks for pointing this out, i'll fix it!

@newhinton
Copy link
Contributor Author

@jancborchardt What about a dropdown menu? I know, its still a setting more in the ui, its still a little bit more to maintain, but i'm trying to make it work for everyone. Also it is a more slender solution to the sorting-problem as the last time. Your thoughts about that?

@newhinton
Copy link
Contributor Author

@skjnldsv I should have fixed the bugs

@@ -17,7 +17,7 @@ class="pinned <?php p($pinned === 0 ? 'first-pinned ' : '') ?><?php
<a href="#" class="icon-quota svg">
<p id="quotatext"><?php
if ($_['quota'] !== \OCP\Files\FileInfo::SPACE_UNLIMITED) {
p($l->t('%s of %s used', [$_['usage'], $_['total_space']]));
p($l->t('%s of %s', [$_['usage'], $_['total_space']]));
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah no! Do it in another pr please :)
Otherwise it's confusing!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Small missunderstanding ;)

Copy link
Member

@skjnldsv skjnldsv left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok from me.
Please rebase to master.

Only downside is that clicking a favourited folder change the whole page instead of loading the folder only. But we can fix this in a later pr.

@skjnldsv
Copy link
Member

Sigh... new pr is here: #10176 😞

skjnldsv added a commit that referenced this pull request Jul 12, 2018
Add Quick-Access to favorite folder in left sidepanel in files-app #9720
rullzer pushed a commit that referenced this pull request Jul 24, 2018
Signed-off-by: Roeland Jago Douma <roeland@famdouma.nl>
skjnldsv pushed a commit that referenced this pull request Aug 8, 2018
Signed-off-by: Roeland Jago Douma <roeland@famdouma.nl>
skjnldsv added a commit that referenced this pull request Aug 8, 2018
…leanup

Cleanup of leftover-sorting-code from quickaccess-feature #9714 #9720
weeman1337 pushed a commit that referenced this pull request Aug 9, 2018
Signed-off-by: Roeland Jago Douma <roeland@famdouma.nl>
@Andreas-Kainz
Copy link

How can I pin an folder to the left sidebar?

@newhinton
Copy link
Contributor Author

@DarkknightAK
What do you mean?
if you want to use the quickaccess list, you can simply mark a folder as a favorite, that adds the folder there

@Andreas-Kainz
Copy link

I'm thinking more on something like you know from any file manager where you can pin folders to the sidebar.

NC_sidebar

and with folders I also mean labels. so you can show in addition to the predefined stuff in the sidebar stuff that was pinned by the user.

@Andreas-Kainz
Copy link

Cause now you have 5 predefined items in the sidebar and you need two clicks (favorites -> folder) you come to your favorite folders. For tags you need three clicks (Tags drop down tag search and than have the results to click)

@newhinton
Copy link
Contributor Author

Ah okay

that is not possible at the moment. The only way to add a folder to the sidebar is to mark it as a favorite

however, you can expand the favorites in the sidebar, this will allow you to get to a folder quickly. it should stay expanded over sessions

@Andreas-Kainz
Copy link

Ah cool that's fine to me. Thanks.

would it be also possible to pin labels that way to have an expand at labels and have there the labels.

@newhinton
Copy link
Contributor Author

Probably yes, but it needs to be developed and accepted. Also since this pr is already closed, could you open a new issue for that?

@Andreas-Kainz
Copy link

#18607

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
3. to review Waiting for reviews design Design, UI, UX, etc. enhancement feature: files
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add Quick-Access to favorite folder in left sidepanel in files-app
6 participants