feat: add pinning to files page #1678

rafaelramalho19 · 2020-10-26T19:20:50Z

Description:
➕ Updated/added pin icons
➕ Added new translations for pinning context menu + modal (please review them @jessicaschilling ?)
🐛 Fixed a bug where the file list with a lot of files (enough to have a scrollbar) wouldn't show the overlay correctly when dragging files to upload
💻 Refactored whole files page component to make it modern and faster ❤️

jessicaschilling

Thank you! 😊 Added some inline comments for some small visual tweaks, but a few other notes, please:

Please add column header of Pin status per mockups; ideally this would be sortable but OK to omit for initial release if that's too painful.
Per mockups, please add Set pinning option in multi-select bottom bar:
I'm having trouble viewing the third-party pinning service icons, for what that's worth:
Are the checkboxes meant to work yet? (They don't for me.)
I think the icons in all the modals died 😢 Example: there's no trash icon in the Delete modal any more ...

src/files/file/File.js

src/files/modals/pinning-modal/PinningModal.js

Co-authored-by: Jessica Schilling <jessica@protocol.ai>

rafaelramalho19 · 2020-10-28T17:55:49Z

I fixed all the icons in all modals, I broke it by mistake. Thanks for noticing it 😄

jessicaschilling

This seems great (issues will probably crop up during implementation, but this seems like good "furniture" for now) 😊

One thing: On the Files page, no columns seem sortable now? Even if the Pin Status column isn't sortable, Name and Size should still be.

rafaelramalho19 · 2020-10-28T18:56:47Z

This seems great (issues will probably crop up during implementation, but this seems like good "furniture" for now) 😊

One thing: On the Files page, no columns seem sortable now? Even if the Pin Status column isn't sortable, Name and Size should still be.

That's actually broken in master after the actions refactor (I believe), I'll fix it here too 😄

jessicaschilling

much good, very sort
thanks! 😊

lidel

lgtm!

nit: I've found small UI bug in Firefox when you quicky scrolling a big directory.
Not sure if its Linux-specific, but try Browsing QmdmQXB2mzChmMeKY47C43LxUdg1NDJ5MWcKMKxDu7RgQm and then scrolling it quickly in Firefox. I see this flashy behavior:

@rafaelramalho19 / @jessicaschilling are you able to reproduce (on Firefox)?

rafaelramalho19 · 2020-11-02T14:49:30Z

@lidel Couldn't reproduce, is that something that happens to you in master too?

lidel

@rafaelramalho19 yup, its also in master, so not in scope of this PR.

LGTM!

public/locales/en/app.json

* chore: refactor files page * feat: add pinning services mock to files page * chore: update remotePin dimensions Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: update local pin icon dimension Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: change pin icon fill color Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: change remote pin icon fill color Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: update pinning modal text size Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: update pinning modal text size Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: pinning modal secondary text changes Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: update pinning modal image size Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: update pinning modal pin icon Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: add pin status column to fileslist * chore: fix modals icons * chore: fix linting error * chore: fix files sorting Co-authored-by: Jessica Schilling <jessica@protocol.ai>

* Feat/pinning settings (#1535) * Feat/pinning settings custom modal (#1546) Co-authored-by: Jessica Schilling <jessica@protocol.ai> * Feat/redesign files bar (#1513) * Feat/pinning settings (#1535) (#1557) * feat: add pinning services service modal * chore: update translation for service modal * chore: fix tslint in directory selector * chore: fix tscheck issues in upper directory selector * chore: fix tslint in selectors * feat: add pinning to files page (#1678) * chore: refactor files page * feat: add pinning services mock to files page * chore: update remotePin dimensions Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: update local pin icon dimension Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: change pin icon fill color Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: change remote pin icon fill color Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: update pinning modal text size Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: update pinning modal text size Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: pinning modal secondary text changes Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: update pinning modal image size Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: update pinning modal pin icon Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: add pin status column to fileslist * chore: fix modals icons * chore: fix linting error * chore: fix files sorting Co-authored-by: Jessica Schilling <jessica@protocol.ai> * feat: prepare pinning services for stage 1 * chore: remove remote pins from settings page for stage 1 * chore: update pinning manager padding Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: update modal horizontal padding Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: make settings page pinning table responsive * chore: update settings page description in pinning table * chore: update header style Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: update settings page in smaller viewports * chore: remove outline on pinning tables focus * chore: update translation Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: update translation Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: add titles to bar options * chore: add titles to bar options * Update public/locales/en/files.json * feat: add pins size to the settings page * feat: add number of pins to settings page * chore: feat tslint * chore: fix error in button * test(e2e): more reliable api test suite This changes the way we enter API address/config from programmatic to full simulation of user input and adds tiny slow down between each key stroke. This should solve the problem of newly added UI feedback not engaging, and make CI both more reliable and green again. While at it, made it CI-agnostic, in preparation for move to GithubActions Co-authored-by: Jessica Schilling <jessica@protocol.ai> Co-authored-by: Marcin Rataj <lidel@lidel.org>

* chore: refactor files page * feat: add pinning services mock to files page * chore: update remotePin dimensions Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: update local pin icon dimension Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: change pin icon fill color Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: change remote pin icon fill color Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: update pinning modal text size Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: update pinning modal text size Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: pinning modal secondary text changes Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: update pinning modal image size Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: update pinning modal pin icon Co-authored-by: Jessica Schilling <jessica@protocol.ai> * chore: add pin status column to fileslist * chore: fix modals icons * chore: fix linting error * chore: fix files sorting Co-authored-by: Jessica Schilling <jessica@protocol.ai>

rafaelramalho19 added 2 commits October 13, 2020 18:54

chore: refactor files page

5e41578

feat: add pinning services mock to files page

90fd910

rafaelramalho19 requested review from jessicaschilling and lidel and removed request for jessicaschilling October 26, 2020 19:20

jessicaschilling suggested changes Oct 26, 2020

View reviewed changes

rafaelramalho19 and others added 11 commits October 27, 2020 13:53

chore: update remotePin dimensions

1cd3e1b

Co-authored-by: Jessica Schilling <jessica@protocol.ai>

chore: update local pin icon dimension

1290693

Co-authored-by: Jessica Schilling <jessica@protocol.ai>

chore: change pin icon fill color

4394c45

Co-authored-by: Jessica Schilling <jessica@protocol.ai>

chore: change remote pin icon fill color

84658ec

Co-authored-by: Jessica Schilling <jessica@protocol.ai>

chore: update pinning modal text size

197d7b8

Co-authored-by: Jessica Schilling <jessica@protocol.ai>

chore: update pinning modal text size

6a4bb77

Co-authored-by: Jessica Schilling <jessica@protocol.ai>

chore: pinning modal secondary text changes

c8b7d69

Co-authored-by: Jessica Schilling <jessica@protocol.ai>

chore: update pinning modal image size

d861583

Co-authored-by: Jessica Schilling <jessica@protocol.ai>

chore: update pinning modal pin icon

97107c2

Co-authored-by: Jessica Schilling <jessica@protocol.ai>

chore: add pin status column to fileslist

1bdfed8

chore: fix modals icons

33a6988

rafaelramalho19 requested a review from jessicaschilling October 28, 2020 17:58

jessicaschilling suggested changes Oct 28, 2020

View reviewed changes

chore: fix linting error

ae96716

chore: fix files sorting

0d5e3bd

rafaelramalho19 requested a review from jessicaschilling October 30, 2020 17:30

jessicaschilling approved these changes Oct 30, 2020

View reviewed changes

lidel changed the title ~~Feat/add pinning to files page~~ feat: add pinning to files page Nov 2, 2020

lidel reviewed Nov 2, 2020

View reviewed changes

lidel approved these changes Nov 2, 2020

View reviewed changes

lidel reviewed Nov 2, 2020

View reviewed changes

public/locales/en/app.json Show resolved Hide resolved

rafaelramalho19 merged commit bc60e46 into epic/pinning-services Nov 3, 2020

rafaelramalho19 deleted the feat/add-pinning-to-files-page branch November 3, 2020 15:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add pinning to files page #1678

feat: add pinning to files page #1678

rafaelramalho19 commented Oct 26, 2020 •

edited by lidel

Loading

jessicaschilling left a comment •

edited

Loading

rafaelramalho19 commented Oct 28, 2020

jessicaschilling left a comment

rafaelramalho19 commented Oct 28, 2020

jessicaschilling left a comment

lidel left a comment

rafaelramalho19 commented Nov 2, 2020

lidel left a comment •

edited

Loading

feat: add pinning to files page #1678

feat: add pinning to files page #1678

Conversation

rafaelramalho19 commented Oct 26, 2020 • edited by lidel Loading

jessicaschilling left a comment • edited Loading

Choose a reason for hiding this comment

rafaelramalho19 commented Oct 28, 2020

jessicaschilling left a comment

Choose a reason for hiding this comment

rafaelramalho19 commented Oct 28, 2020

jessicaschilling left a comment

Choose a reason for hiding this comment

lidel left a comment

Choose a reason for hiding this comment

rafaelramalho19 commented Nov 2, 2020

lidel left a comment • edited Loading

Choose a reason for hiding this comment

rafaelramalho19 commented Oct 26, 2020 •

edited by lidel

Loading

jessicaschilling left a comment •

edited

Loading

lidel left a comment •

edited

Loading