Comments (13)
I think the popup idea works. I can put something together for you.
from girder_web_components.
Here is a modal dialogue for creating a folder. My thought is that creating an item would be very similar, if not exact (with the exception of headings and such).
A second thought that I had, was that when you click new folder/item it would add a row to the file list with the appropriate icon, and the name would just be a focused text input where you would type the name and hit enter. You would have to go back and edit/add a description after creation if this is the case.
Thoughts?
from girder_web_components.
As far as implementation, if it were a pop-up, I think it would be the consumer's responsibility to listen to a "new folder/item" event and display this window themselves. @zachmullen ?
If it were just a row where you type the name and click enter, how would you add the optional description? In general, I think I prefer the pop-up because:
- it's easier to implement because it doesn't introduce new intermediate states for row data and
- the popup UI feels very intentional - you either click "Create" or you click "Cancel". With the inline add, I think you'd need some kind of toast or check-mark animation to signify that the folder creation operation succeeded on the server, and you have to jam error handling behavior into a single data row.
My personal preference is to use the pop-up and have this be an independent component.
Here's where I am so far:
Couple more questions for @zachmullen and @jtomeck
- For paginated folders, what does "select all" mean? The current page is selected? All items in the folder are selected, including previous and future pages? I think current page is appropriate, since it's easy to perform operations on an entire folder using the parent.
- How do breadcrumbs behave in cases where it's too long for the table header? Should it shorten at the beginning, showing only the most recent ancestors? Should it shorten folder names to a single letter, then collapse to elipses when that's too short? Tooltips for shortened folder names?
- For "create new item" can we embed the file upload component?
I don't really know how to achieve this without the dark magic of inspecting element sizes from code. Can always just let it wrap, I guess.
from girder_web_components.
- I think current page would be the expected functionality
- I think shortening at the beginning makes the most sense. This reminds me that my interface should include an "up one directory" button somewhere. Mainly because if breadcrumbs become too long, you can no longer click through the trail effectively. I'm open to thoughts on this as well.
- I think that is a great idea, however will there be enough screen space for this? I'm thinking we could make the modal wider and have half be the form with name and description and the other half be the file upload with draggable area.
from girder_web_components.
I think I'll also need to show a UI for what happens when you click "change destination" if that's functionality we even want to have. I just added it in my mockup as a feature that would be neat and definitely help the user experience, however one that is not high priority by any means.
from girder_web_components.
I'll go ahead and ask: Is there a reasonable way to implement infinite scroll instead of paging? Do people feel that would be a preferred interaction mode or would it make navigating more difficult (e.g. in the case of thousands of items in a folder)?
from girder_web_components.
@jeffbaumes - I was going to suggest this until @subdavis asked the question about the select all. Would this functionality make planning the select all checkbox a nightmare?
from girder_web_components.
My main problem with infinite scrolling is that it is very difficult to handle back/forward page navigations (or direct links) without losing your place.
from girder_web_components.
@jeffbaumes I like the idea of infinite scroll, and it could potentially be a toggle feature.
The case for pagination, though, is that since this is a reusable component, it would require the element to be set up in such a away that this file browser has an absolute height or is in a layout such that its height determines the page height. Putting it somewhere in the middle of the page wouldn't really flow.
Also yeah, it might select-all very unintuitive for the user.
from girder_web_components.
Right @jtomeck - it might make some things messier on the UX side and complicate UI logic. It can be argued that paging makes things more explicit, and even modern robust tools like Gmail stick with paging. So if anything the argument is not too strong for infinite scroll. Just thought I'd bring it up.
@subdavis I'd argue against implementing both paging and infinite scroll from a maintainability standpoint. It's a good point that paging will work in more environments if this is meant to be reusable.
from girder_web_components.
+1 for paging only on the first iteration.
EDIT: by first iteration I meant first iteration of development of this widget, sorry if that was unclear.
from girder_web_components.
@subdavis - I had a few comments on your progress screenshot, despite it already looking great. Just a couple tweaks.
- The selected background for the rows, can we use "light-blue lighten-5"
- Everything you have as gray, can we change to the blue-gray of the same value? (aka gray lighten-5 -> blue-gray lighten-5) I feel that it softens things with the UI giving it more visual appeal.
- The filesizes on the right side of the file list are black. Can we tone this down so that they don't have more emphasis than the filename/folder names themselves?
- I was wondering the capability of us globally changing the font for the girder web components. In my design I use Barlow Condensed (a google font). I think the more condensed font will help with long filenames and generally look better overall.
Other than those points, it's looking really good. Nice work!
Also another note - @jeffbaumes and I talked about not including the "change destination" button in my mockup above for now.
from girder_web_components.
@subdavis I just realized this is still just an issue instead of a PR. Could this be made into a WIP PR sometime in the near future? I am curious how you handle color/font theming (can you use Vuetify config to achieve this look?), and how much custom spacing and CSS, is required to get toward this look. We need to give some thought to the balance of aesthetics and maintainability, hopefully we can have both.
from girder_web_components.
Related Issues (20)
- Upload list rows don't flash to "done" before they disappear.
- Explore using semantic-release HOT 9
- Yarn upgrade causes some unit tests to fail
- revert html boolean attributess back to shorthand form.
- support webkitdirectory for uploads
- [feature] Support page skipping in data browser
- General documentation improvements.
- Add an option to hide password based registration HOT 3
- Refactor OAuth component
- Dark theme UI bug in uploader widget
- Markdown Preview for girder-upsert-folder broken in dark mode.
- [BUG] [Girder-Upload] Upload doesn't tolerate very large numbers of files. HOT 4
- [Feature] Forgot Password Dialog and Girder API connection
- Upper limit on parallel uploads HOT 1
- Make Vue a peer dep
- Don't swallow uncaught errors during upload
- SSRF vulnerability in axios version < 0.21.1 HOT 5
- Still getting CSS issues in >= 3.0.1
- Show better error for email verification required HOT 2
- Fix vuetify and typescript in docs
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from girder_web_components.