[Feature] [Files] Files summary would help more at the top of the files list

martin-rueegg commented 1 year ago

Current situation

Currently, the files summary (number of directories and/or files, the directory size are shown at the end of the file list, like so:

Now, when viewing a folder in the files app where there are more files in the list, than can be displayed on the screen, this line is not visible until you scroll till the end of the list:

Why this is an issue

IMO, it is already non-user-friendly if a users just wants to know the number of items and she or he has to scroll to the bottom of the list.

But it becomes even more cumbersome, if one has loads of files and these files are loaded incrementally. And it's even worse, if its a list of pictures, where thumbnails are shown and the thumbnails have not been created yet. So you scroll down, get a glimpse of the information you are looking for (since the table footer is already there) but then it disappears again as the list is expanded, new thumbnails are loaded, slowing down the server, scrolling down again, ... You get the picture.

And all this, while the information you have been looking is there all along since the first page load. Just hidden from your eyes....

<tfoot>
  <tr class="summary">
    <td/>
    <td class="filesummary">
      <span class="info">
        <span class="dirinfo">1 folder</span>
        <span class="connector">and</span>
        <span class="fileinfo">6 files</span>
        <span class="hiddeninfo hidden">(including 0 hidden)</span>
        <span class="filter hidden"/>
      </span>
    </td>
    <td class="filesize">462 B</td>
    <td class="date"/>
  </tr>
</tfoot>

Possible solutions

Move the row summary to the table head. That would be quick and easy and would, in my point of view, create the most consistent user experience, as the information is always at the top, at the same place, no matter if 0, 1, a few or many entries in the given directory.
Keep it at the bottom, but do some CSS magic, that keeps the table footer always visible. But this gets messy very quickly, depending on the browser used by the user.

Files affected (to be completed)

https://github.com/nextcloud/server/blob/master/apps/files/templates/list.php#L70 (sets the location in the DOM/HTML
https://github.com/nextcloud/server/blob/master/apps/files/js/filesummary.js (seems to rely on the already-existing <tr class="summary">
Could not locate the file, where <tr class="summary"> is added to <tfoot>

Possibly related/affected issues:

https://github.com/nextcloud/server/issues/28063

Foot note as requested by NC's issue template

How to use GitHub

Please use the 👍 reaction to show that you are interested into the same feature.
Please don't comment if you have no relevant information to add. It's just extra noise for everyone subscribed to this issue.
Subscribe to receive notifications on status change and new comments.

Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like A clear and concise description of what you want to happen.

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

Additional context Add any other context or screenshots about the feature request here.

Baptistou commented 1 year ago

I confirm that it is very painful to get the number of files inside a folder through Nextcloud interface. To scroll down to reach the footer is almost impossible if there are hundreds or thousands of files. I suggest a third possible solution : Display the file summary in the details panel of a selected folder.

martin-rueegg commented 1 year ago

@Baptistou's solution could also be helpful, as you can access the information even before opening the folder. However, implementing that solution requires more effort, as that information is not readily available when listing the directory. A directory entry in the list looks like this:

<tr data-id="1413619"
    data-type="dir"
    data-size="8120792"
    data-file="subfolder"
    data-mime="httpd/unix-directory"
    data-mtime="1655127139000"
    data-etag="62a73c6353467"
    data-quota="-3"
    data-permissions="31"
    data-has-preview="false"
    data-e2eencrypted="false"
    data-mounttype="shared"
    data-path="/path/to/parent/folder"
    data-share-permissions="31"
    data-share-owner="User Name"
    data-share-owner-id="UserId"
    class="ui-droppable"
    data-icon="/apps/theming/img/core/filetypes/folder-shared.svg?v=0">
  <td class="selection">
    <input id="select-files-1413619"
           type="checkbox"
           class="selectCheckBox checkbox">
    <label for="select-files-1413619">
      <span class="hidden-visually">Select</span>
    </label>
  </td>
  <td class="filename ui-draggable ui-draggable-handle">
    <a class="name"
       href="/index.php/apps/files?dir=/path/to/parent/folder/subfolder">
      <div class="thumbnail-wrapper">
        <div class="thumbnail"
           style="background-image: url(&quot;/apps/theming/img/core/filetypes/folder-shared.svg?v=0&quot;);">
          <div class="favorite-mark ">
            <span class="icon icon-star">
              <span class="hidden-visually">Not favorited</span>
            </span>
          </div>
        </div>
      </div>
      <span class="nametext">
        <span class="innernametext">subfolder</span>
      </span>
      <span class="uploadtext"
            currentuploads="0"/>
      <span class="fileactions">
        <a class="action action-share permanent shared-style"
           href="#"
           data-action="Share"
           data-original-title=""
           title="">
          <span class="avatar"
                data-username="UserId"
                title=""
                style="height: 32px; width: 32px;"
                data-original-title="Shared by User Name">
            <img src="/avatar/UserId/48"
                 alt=""
                 width="32"
                 height="32"</span>
          <span class="hidden-visually">Shared by User Name</span>
        </a>
        <a class="action action-menu permanent"
           href="#"
           data-action="menu"
           data-original-title=""
           title="">
          <span class="icon icon-more"/>
          <span class="hidden-visually">Actions</span>
        </a>
      </span>
    </a>
  </td>
  <td class="filesize"
    style="color:rgb(140,140,140)">7.7 MB</td>
  <td class="date">
    <span class="modified live-relative-timestamp"
          title=""
          data-timestamp="1655127139000"
          style="color:rgb(140,140,140)"
          data-original-title="13. Juni 2022 15:32">vor 2 Monaten</span>
  </td>
</tr>

Since I have not found the code that is used for filling the template, I'm not sure the information is available there and could be easily added as data properties on the row entry.

Also, adding that information to the details panel could still be implemented alongside one of the solutions mentioned in the opening comment. It would be an additional improvement.

However, it would be great if the simple change of having the information that is already there simply in a more accessible place, ie. the head of the table, not the foot.

martin-rueegg commented 1 year ago

Ping @PVince81

PVince81 commented 1 year ago

I'm not sure if https://github.com/nextcloud/server/issues/28063 had a new design where the summary would be located elsewhere, might be something to consider in general @jancborchardt @nimishavijay ?

martin-rueegg commented 1 year ago

@PVince81 could we still implement an intermediary solution, if vue is not yet ready for the folder views. Or who could help me helping you in the transition to vue?

kottonau commented 1 year ago

Is there any news regarding this?

skjnldsv commented 1 year ago

@nextcloud/designers, thoughts? Approve or reject? :)

hdeppert commented 7 months ago

In my point of view, seeing the folder & file counts in the details view opening on the right side is very essential as the large comment from @martin-rueegg . In the daily work, this is a productivity booster and reduces compute resources a lot (e.g. creating previews for every folder which is opened).

Adding the counts to the detail view should be pretty simple. What would be the planned milestone for this issue?

martin-rueegg commented 7 months ago

@hdeppert there is not much attention from the devs here, unfortunately. Given the triviality of a possible solution (just move it to the head), it's mind boggling.

Of course, putting it into the details tab might be great. It would then also be accessible from the parent folder, even without opening the folder in question. However, this would probably require more work.

The solution does not need to be perfect. But just moving it to the top would do.

I'd be happy to do a PR, if anyone would point me in the right direction. But I guess my initial comment made it clear that I already had a look at the code and would be willing to do some work.

@PVince81, @joshtrichards would you be able to ping the person that could help? Would that still be @jancborchardt and /or @nimishavijay ?

skjnldsv commented 6 months ago

Given the triviality of a possible solution (just move it to the head), it's mind boggling.

Simplicity is not always the reason, the fact that most people might not want that is also a possibility :shrug: I personally think the bottom is alright, but I would maybe make it float :shrug:

In any case, there are looots of much more important issues in my opinion :) That might just explain why :wink:

nextcloud / server