Feature/dashboard mvp #39
Conversation
Resolved comments were being incorrectly counted as active comments in the document header. Now the document header only counts unresolved comments. Comments were infinitely nestable. Now only top-level comments can be replied to. Resolving comments would only affect root and first-level comments, leaving deeply-nested comments unresolved. By allowing only one level of nesting, future comments will be correctly reresolved without affecting current comments.
| @@ -56,6 +56,17 @@ class CommentsDb { | |||
| return makeSafeObjectIDs(comments) | |||
| } | |||
|
|
|||
| async getCommentsForUser(uid: string) { | |||
There was a problem hiding this comment.
I was able to build most of the dashboard functionality without adding services, but comments needed this.
- write tests to cover service addition
There was a problem hiding this comment.
Branched from fix/comments. See that PR for better context.
| @@ -61,7 +61,7 @@ const SUPPORTED_ICONS = { | |||
| MdWarning, | |||
| } | |||
|
|
|||
| const ModelIcon = ({ name = '', color = '#000' }) => { | |||
| const ModelIcon = ({ name = '', color = '#000', className = '' }) => { | |||
There was a problem hiding this comment.
Opens up ModelIcon for external styling.
There was a problem hiding this comment.
Branched from fix/comments. See that PR for better context.
There was a problem hiding this comment.
- write service tests
| )} | ||
| <Toast /> | ||
| </Layout> | ||
| {canLoadPage ? ( |
There was a problem hiding this comment.
Our dashboard layout needed the escape from this <Layout>. In several pages you'll see <Layout> added. Without using the app folder, our version of Next.js doesn't support layout files per level of nesting, so we just add it in manually to the other pages.
|
|
||
| @media (min-width: 64em) { | ||
| .main { | ||
| grid-template-areas: |
There was a problem hiding this comment.
Template areas will probably need to go if we expand to more modules / cards on the dashboard page. For now, it's a pretty neat way to position the different cards.
| className="dashboard-model" | ||
| {!modelCategories.length && <UnderMaintenance />} | ||
|
|
||
| <article className={`${styles.card} rounded shadow-sm`}> |
There was a problem hiding this comment.
There are three fairly similar <article> cards on this dashboard page now. I know that I'm bordering on needing to refactor this, but I often find that early abstractions need more refactoring later than if I would have just waited a bit to see a few different use cases. If it doesn't bother you all too much, I'd like to wait until we get a few different cards / modules on the dashboard before figuring out the right abstraction—right now they're all pretty similar in that they display a list of links.
| @@ -296,3 +270,14 @@ fieldset.field-array fieldset.field-array { | |||
| .modal-sm { | |||
| max-width: 400px; | |||
| } | |||
|
|
|||
| /* https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html */ | |||
| .visually-hidden:not(:focus):not(:active) { | |||
There was a problem hiding this comment.
We're running the version of Bootstrap that doesn't yet include this. In our consideration of mEditor as enterprise software, do you all think we should look into the Horizon Design System and what CSS framework, if any, would help us match it?
| name={userIconMap[model].name} | ||
| color={userIconMap[model].color} | ||
| /> | ||
| <span |
There was a problem hiding this comment.
For reasons beyond me, browsers don't play well with CSS-truncated text and screen readers. We ARIA hide the truncated text and visually hide the full text. This works well for me on VoiceOver on Ventura.
|
This branch is a bit experimental, so I'm putting it up for a PR just to get some feedback. This is a first attempt at making some kind of useful dashboard for mEditor. Would you check it out and let me know what concerns / comments you have?