#2630 - Update backend dashboard for more UI components #2783
Conversation
…re-updates-to-backend-dashboard
…re-updates-to-backend-dashboard
…re-updates-to-backend-dashboard
…re-updates-to-backend-dashboard
…re-updates-to-backend-dashboard
SebinSong
changed the title
…re-updates-to-backend-dashboard
group-income
|
||||||||||||||||||||||||||||
| Project |
group-income
|
| Branch Review |
sebin/task/#2630-more-updates-to-backend-dashboard
|
| Run status |
|
| Run duration | 13m 07s |
| Commit |
|
| Committer | Sebin Song |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
0
|
Pending
|
10
|
Skipped
|
0
|
Passing
|
116
|
| View all changes introduced in this branch ↗︎ | |
SebinSong
changed the title
taoeffect
left a comment
taoeffect
left a comment
There was a problem hiding this comment.
Fantastic work @SebinSong!!
Looks and works great. Review ready for you!
| 'use stricts' | ||
|
|
||
| // constants for UI related events | ||
| // constants for UI-related events |
There was a problem hiding this comment.
Above this line it says 'use stricts' doesn't enable strict mode - should be 'use strict' (singular)
| export const PROMPT_ACTIONS = { | ||
| PRIMARY: 'prompt-action-primary', | ||
| SECONDARY: 'prompt-action-secondary', | ||
| CLOSE: 'promps-action-close' |
There was a problem hiding this comment.
Typo: 'promps-action-close' => 'prompt-action-close'
backend/dashboard/model/themes.js
Outdated
| text_1: 'rgba(0, 0, 0, 0.4)', | ||
| border: 'rgba(0, 0, 0, 0.1)', | ||
| emphasis: '#1C1C1C', | ||
| emphasis: '(rgba(0, 0, 0, 0.65)', |
There was a problem hiding this comment.
Extra ( at the start of rgba here
There was a problem hiding this comment.
good catch. fixed.
backend/dashboard/views/utils/ui.js
Outdated
| import sbp from '@sbp/sbp' | ||
| import { OPEN_PROMPT, PROMPT_RESPONSE } from './events.js' | ||
|
|
||
| export interface PromptParams { |
There was a problem hiding this comment.
In Flow, it's export type instead of export interface
| color: $text-0; | ||
| border-bottom-color: $text-0; |
| watch: { | ||
| colors (newVal) { | ||
| console.log('!@# colors update: ', newVal) | ||
| } |
| label.inputgroup(:class='{ "is-disabled": disabled }') | ||
| span.input-label(v-if='label') {{ label }} | ||
|
|
||
| char-limit-indicator.c-char-len( |
There was a problem hiding this comment.
o4-mini-high:
- In StyledInput.vue, your scoped
.c-char-len { position:absolute }won’t actually apply to the inner<span>of the child component because of Vue’s scoped CSS markers. You either need a deep selector (::v-deep .c-char-len) or move the positioning into the child component’s own<style>.
There was a problem hiding this comment.
This is incorrect. Just changed the class name to clear the confusion here.
|
|
||
| <script> | ||
| export default { | ||
| name: 'DSTableTemplate' |
There was a problem hiding this comment.
Should This have the same name as the file?
|
|
||
| <script> | ||
| export default { | ||
| name: 'DSTableRow', |
There was a problem hiding this comment.
Shouldn't his have the same name as the file?
| h4.unit-name TBD... | ||
|
|
||
| .unit-description list UI elements used in the app | ||
| .unit-description TBD... |
There was a problem hiding this comment.
Are these not implemented yet? I'm curious because there are the TableTemplate.vue and TableRow.vue files...
There was a problem hiding this comment.
@taoeffect They are implemented and used in various dashboard pages:
TBD.. here means I have not added demos for these in this design-system section yet.
Also, FYI TableTemplate.vue and TableRow.vue are components I created for design-system page. They are not used in the the dashboard.
…re-updates-to-backend-dashboard
closes #2630
Please check this TODO list for details of what this PR contains.
Also, you could run
npm run dev:dashboardlocally and visithttp://localhost:3030/dashboard/design-systemto check them out. (Be noted that/design-systempage currently does not contain every existing UIs yet though)