Work summary of datdot-ui widget and component

[fionataeyang]

In progress

1. • datdot-ui-input [UI] Input #77 - COPIED
     • type number
     • decrease and increase
     • icon button with decrease and increase
2. • modal component
3. • datdot-ui-list
4. • datdot-ui-dropdown
5. • datdot-ui-search
6. • datdot-ui-search-result

Next @TODO

1. • datdot-ui-input [UI] Input #77 - COPIED
     • type text
     • icon button with search
     • icon button with clear
     • type slide range
     • support custom slide range styles
     • support theme
     • work with number input
     • type password
     • support security? (not sure how far can do for it)
     • support show and hide buttons

@TODO

1. • datdot-ui-logs (Alex working on) - COPIED
     • support enable trace mode
     • support enable debug mode
     • support enable info mode
     • support enable warn mode
     • support enable error mode
     • support enable fatal mode
2. • datdot-ui-input [UI] Input #77 -COPIED
     • ✔ support text input
     • ✔ support number input
     • ✔ support calculate for big number
     • support increase and decrease
     • support slide range
     • support password
     • support textarea
     • support checkbox
     • support radio
     • support search input
     • support search input combine with autocomplete
     • support button
     • support icon
3. • datdot-ui-modal [UI] Dialogs #67 -COPIED
     • help modal
     • step modal
     • action modal
     • waiting for refactoring codes
4. • datdot-ui-navigation App BAR #45
5. • datdot-ui-dropdown [UI] Dropdown #71
6. • datdot-ui-linechart [UI] Charts #69
7. • datdot-ui-piechart #112
8. • datdot-ui-treemap #110
9. • datdot-ui-barchart #111
10. • datdot-ui-chart-legend #113
11. • datdot-ui-range-selector - COPIED
      • support chunks selector #108
      • support feeds selector #107
12. • datdot-ui-chunks-selector #108
13. • datdot-ui-card [UI] Card #86 - COPIED
      • support plan info
      • support data info
14. • datdot-ui-list [UI] List #72 - COPIED
      • support single select
      • support multiple select
      • support link only
15. • datdot-ui-tag #101
16. • datdot-ui-badge [UI] Badge #95
17. • datdot-ui-title [UI] Title #84
18. • datdot-ui-search [UI] Search-autocomplete #99
19. • datdot-ui-autocomplete #4
20. • datdot-ui-search-result #98
21. • datdot-ui-mainstep [UI] Steps (progress bar) #96
22. • datdot-ui-substep #97
23. • datdot-ui-geohashmap #94
24. • datdot-ui-pin-map [UI] Map #93
25. • datdot-ui-switch
26. • datdot-ui-tab [UI] Tab #8
27. • datdot-ui-page-title #102
28. • datdot-ui-activity #104
29. • datdot-ui-date-range #82
30. • datdot-ui-calendar-dates [UI] Day selector - range #81
31. • datdot-ui-datepicker [UI] Datepicker #63
32. • datdot-ui-schedule [UI] Calendar #76
33. • datdot-ui-label #78
34. • datdot-ui-highlight
35. • datdot-ui-custom-days #75
36. • datdot-ui-set-time #64
37. • datdot-ui-set-repeat #65
38. • datdot-ui-action-panel #70
39. • datdot-ui-notify #83
      • warning
      • info
      • error (?)
40. • datdot-ui-tooltip [UI] Tooltip #68
41. • datdot-ui-plan-summary plan-add/edit - plan summary card #66
42. • datdot-ui-sort-action [UI] Sort #55
43. • datdot-ui-custom-action-bar #54
44. • datdot-ui-search-action #52
45. • datdot-ui-filter-action #2
46. • datdot-ui-timeline-days [UI] Day selector - single #6
47. • datdot-ui-calendar-header [UI] Month selector #5
48. • datdot-ui-filter-option #2
49. • datdot-ui-card-header #87
50. • datdot-ui-card-body #88

Finished

1. • datdot-ui-icon
2. • datdot-ui-button

[fionataeyang]

Summary

update: 7-24-2021

Currently working on datdot-ui-input #77
It is a bit complicated widget for many types of input, like text, number, textarea, slide range, checkbox, radio

Text input #77

Text input is part of form when it needs to fill field information like create new account form #32 , transfer #41 , import account form #33, edit account #40, search #99, plan name #103

Number input #77

Number input is part of form when it needs to fill field information like transfer #41, and also it needs to support increment and decrement that is something haven't thought yet when did UI design.

And also have to support calculation for big number which is we don't use any 3rd dependence to help calculation with big number, like balance, transfer and transaction would be using it.
Thus, this is big matter to whole app that user and our platform all care.

Slide range #106

Slide range is part of performance form when the user needs to use slide range to select what the numbers they would be like to share via their computer. And slide range would be combined with number input together that it has a decimal.

Search input #99

Search input is a very crucial widget for whole app search, and even it uses for searching swarm key, feeds, locations...so on. Haven't thinking about how to work with it. Because they use different message to trigger event for the different component. So, must be making a list of what search input can do for.

Checkbox #77

Checkbox is part of form that it is using on set time, set repeat, custom days. And also it has to support custom checkbox via SVG icon and theme

Radio #77

Radio is part of form. It can support custom radio via SVG icon and theme

Textarea

Should we use a custom element via div instead of text area? We've been used it on smarcontract.codes for search code snippets. Or let user can choose use native text area or custom area?

Password

Password is very important with account security. No plan yet.

[fionataeyang]

update: 8-8-2021
Currently working on datdot-ui-dropdown #71 and datdot-ui-list #72

datdot-ui-list

List mode

Multiple-select (By default)

Support a filter for swarm key and select feeds list using

Single-select

Support a filter for search swarm key and terminal messages using

Link

Support normal dropdown menu with click event or url

datdot-ui-dropdown

Layout mode

Selector view

Custom select element for <select></select> html tag

Filter view

Custom ︙ icon button for <button> html tag