Corpus Management Proof of Concept UI tweaks
This a follow up to #294444 (closed) and the other issues in the series.
This issue in the current form is to capture any UI adjustments.
Child Issues
Description | Weight | Issue |
---|---|---|
Date formats | frontend-weight2 | #336499 (closed) |
File size formats | frontend-weight2 | #336500 (closed) |
Tooltips | frontend-weight2 | #336503 (closed) |
CSS Size/Color tweaks | frontend-weight1 | #336501 (closed) |
Date Formats
- Date formats are not consistent with date formats in the mocks and the font at the top doesn’t seem consistent with the rest of gitlab.
Context:
We had a custom implementation for Corpus Management that matched the mocks originally but was told in maintainer review to use https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/vue_shared/components/user_date.vue
Suggestion:
Add a dateFormat prop to https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/vue_shared/components/user_date.vue and allow a user to specify a format constant from https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/vue_shared/constants.js#L11
File Size Formats
Designs show MB/GB - what is our standard?
Team Feedback on Slack channel:
-
the feedback I got was that the unit depended on the use case (e.g. if you are talking about networking vs. disk) so we ended up supporting both cases
-
Open issue for discussion #327494 (closed)
Fonts in sub header
Fonts look slighly off compared to other pages.
Delete Dialog Messaging
- Also the delete confirmation dialog is inconsistent with the delete confirmation dialogue in other parts of the app.
Change delete button to say "Delete Corpus"
Download button color
Change from blue to gray
Target column
Add tooltips
Live page
Design
This Figma file is updated to date with the correct version for production implementation requirement. I(Camellia) think for mockup, it is ok some part is not 100% matching. For the real implementation, it needs to be 100% aligned with copy and design :)
https://www.figma.com/file/eSIeuIPKFwEDs4X9ky2O5E/Corpus-Registry?node-id=156%3A0