cockpit-project / cockpit-files Goto Github PK

Instead of using flex, we may want to implement the grid using CSS grid, so we can have equidistant spacing and have items wrap as expected. (Using flex would mean that all items would have equidistant spacing if we changed the spacing model.) Additionally, we should be using gap, not margin, to space out items. We could also have no gap/margin, but there's probably some value in having some gutter space to deselect an item (and perhaps add canvas-style selection later on).

For example, something like this would change the spacing to rely on a grid. (We'd want to refactor it to adapt to this kind of layout, not override the PF React "Flex" as this would do. Note: PatternFly's "Grid" layout is not CSS grid; it's mainly a 12-cell design grid like Bootstrap uses, not a CSS grid as I'm suggesting here. That said, the PF Grid layout for "smart (reponsive)" may work as a basis for this... but it does a bunch of nonsense things that might also get in the way).

#folder-view {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    justify-items: baseline;
}

.file-item,
.directory-item {
    margin: 0;
}

They UI support < and > buttons. These are supposed to be navigation in history. See gnome file navigation App for understanding the expected functionality.

Introduce a file viewer for code files (like plaintext, but with syntax highlighting)

Bonus item: (can be split into new issue if hard) edit text files?
Use https://www.patternfly.org/v4/components/code-editor

I wonder if this should be more explicit and be renamed to Create symlink. Create link makes me think it generates a link to that directory/file which I could share although share link is more logical.

Upstream issue: patternfly/patternfly-react#9099

Design Mockup:

This is from the old implementation:

This is the suggested new mockup https://photos.app.goo.gl/cwoFBp4fh5HYsCTcA

By using the watch API any changes on the filesystem contents will trigger events, which we can use to refresh the file list.

Similar to gnome's navigator.

Introduce a 'Delete' action on the top right corner of the 'Directory'file details' panel.

The spinner should be disabled after showing the error message.

Let's say we have the following structure:

[kkoukiou@sequioa test]$ tree
.
└── codeforces
    └── codeforces

2 directories, 1 file

The outer one is obviously directory and the inner one is file.

When navigating from the parent folder into the outer 'codeforces' directory, the sidebar shows the file info instead.

In smaller screens (~1300px) the sidebar jumps quite a bit and shifts the files grid. Sometimes changing from 4 columns to 3 columns while clicking on a file/folder. I've accidentally opened the wrong directory many times because of folders jumping around.

Directories should be sorted before files. Each set should have the selected sorting (alphanumeric by default, but remembering the last selected state via localstorage) applied relative to the set (of directories or folders).

For example, here's a mockup with the folders sorted before the files:

https://developer.mozilla.org/en-US/docs/Web/API/History/pushState

Modals that have one input element only, should have this focused on oppening and Enter should submit the modal.

• Enter should act as double click - so go into the selected directory.
• Up / Down arrow buttons should move up/down the grid

Whenever I click on some files, the UI crashes. I'm not sure what is in common with the files yet.

I've seen it happen with JSON files, txt files, JPGs, etc.

I have two users aside from root on my machine, test and kkoukiou.

[kkoukiou@sequioa cockpit-navigator-new]$ sudo ls -l /home/
total 28
drwx--x--x+ 76 kkoukiou kkoukiou  4096 Jul  7 08:04 kkoukiou
drwx------.  2 root     root     16384 Nov  1  2016 lost+found
drwx------.  9     1002     1006  4096 Jan 12 18:20 test
[kkoukiou@sequioa cockpit-navigator-new]$ sudo ls -l /home/test
total 4
drwxr-xr-x. 21 1002 1006 4096 Jan 12 17:57 cockpit

When clicking on 'test' it does not navigate inside the directory we get in the following state:

TO be discussed if this going to be hidden when connected from localhost.

And we should allow some file operations like 'Delete' on the selection.

control-click to toggle the item as part of the selection; shift-click to make a range between last clicked and current item being shift-clicked; rubber banding, which might be difficult

Here's some example SCSS which adds in a selected state (based on a selected class; which needs to be added could be called something else) and retools the hover state to be similar to the selected state, using CSS custom properties ("variables"). To not interrupt flow, it uses not just background, but a box shadow and an outline (with an offset) to make the selected look expand outside of its bounding box a bit.

.file-item,
.directory-item {
    &.selected,
    &:hover {
        background: var(--item-background, transparent);
        border-radius: 1px;
        box-shadow: 0 0 0 10px var(--item-background, transparent);
        outline-offset: 10px;
        outline: 1px solid var(--item-outline, transparent);
    }

    &.selected {
        --item-background: var(--pf-global--palette--blue-50);
        --item-outline: var(--pf-global--palette--blue-50);
    }

    &:hover {
        --item-background: var(--pf-global--BackgroundColor--200);
        --item-outline: var(--pf-global--BackgroundColor--200);
    }
}

Mockups on what it should approximately look like (these are not pixel or color perfect; the code above should be similar, but not exactly like this):

Selected:

Hover:

Thiis should be available through the kebab actions menu and also the context menu.

This was inspired by the 'Star' icon in the mockups.

We probably need a 'Show hidden files' entry option like gnome's file navigator does.

Get inspiration from Nautilus for that.

• Edit owner
• Edit group
• Edit permissions

Old implementation:

We need to either speed up the initial directory listing, or show a spinner.

This has been a suggestion of the45 Drives devs.
Needs designer feedback.

SImiliar to gnome's filenavigator. Grid or list view.

When mouse cursor is around the icon:

When mouse cursor is over the icon:

It makes it feel janky.