Files
OSIT-AE-App-Svelte/OLD_README_guidelines_ui_ux.md

120 lines
3.7 KiB
Markdown

# AE UI Components, Layout, and Style Standards (HTML/CSS)
## Aether Components
### System Components
* [header]
* [main/module]s
* [footer]
* [app] refresh, clear IDB, clear local storage (settings), iframe toggle (also updates URL param), copy URL, generate and show QR
* [menu][mode] edit, more (all or details)
* [menu][access_type] passcode input, clear
* [menu][user] sign in/out, reset password, email link, change username and email
* [menu][theme] mode (light/dark), name (theme list)
* [debug] toggle (also updates URL param), show core and module storages, manually set init timestamp
* [scroll_to] top, page up, page down, bottom
### Core Components
* [copy_btn] clipboard, bind:value, btn_text, btn_html
* [txt_editor] textarea
* [md_editor] CodeMirror, ShadEditor TipTap (need to remove)
* [html_editor]
* [media_player]
* hosted_file archive_content media_player,
* bind:host_id,
* bind:media_type
* status - stopped, paused, playing
* [hosted_file_li] manage_hosted_file_li, make available for selection
* [hosted_file_link_to] list links per object, bind:add link, bind:remove link
* [upload_to_host] - input_hosted_file; needs to handle multiple files
* link_type,
* link_id,
* inner fragment - label html
* bind:trigger
* bind:show_spinner
* bind:show_percent
* status
* result - started, uploading, finished
* [upload_file_tbl] input_hosted_file_tbl, check for dup file hash, remove from list
* [download_from_host]
* bind:host_file_id
* bind:filename
* bind:file_ext
* btn inner fragment
* bind:trigger
* bind:show_spinner
* bind:show_percent
* status
* result - started, downloading, finished
* [data_store]
* [ae_crud] need to simplify! obj, prop, current_value, bind:value, bind:trigger, inner fragment
* [ae_obj_prop_val] - essentially a wrapper for the function
* bind:obj_type
* bind:obj_id
* bind:obj_prop
* bind:obj_value
* bind:obj_new_value
* bind:trigger
* bind:show_spinner
* bind:show_percent
* status
* result
* [sql_qry]
* [obj_tbl] obj sql results tbl or similar
* [qr_scanner]
* [websocket]
### Main / Module Components
* [menu][options] various settings, show/hide content and options, limit, sorting options, etc
* [menu][actions] various actions, sign in/out, email
### Object Menu
* properties: id, name, group, priority, sort, alert, hide, enable, note
* future properties: ext_id (not ready yet), ext_sys_id (not ready yet), code (not ready yet)
* actions: create, view, edit, update, hide, disable, delete, alert (message), archive (not ready yet)
* future actions: copy, import
* sort options:
* [default] group > priority > sort (ASC/DESC) > alert > name
* [sort_updated] group > priority > sort (ASC/DESC) > alert > updated_on > created_on
* [priority_updated] group > priority > updated_on (ASC/DESC) > created_on
* [priority_name] group > priority > name (ASC/DESC) > sort > alert > updated_on > created_on
* [name] priority > name (ASC/DESC) > sort > alert > updated_on > created_on
* [created_on] priority > created_on (ASC/DESC)
* [updated_on] priority > updated_on (ASC/DESC) > created_on
### Pop-ups:
* modal_header
* title
* close
* modal_main
* modal_meta
* modal_footer
* close
#### Pop-up Modal (blocking)
* modal position
#### Pop-up Modal Inline
* inline, inline-block, block
#### Pop-up Dialog
* dialog position
## Containers
### Navigation
* link
* download
### Forms
* save
* clear value
* set null value
### Other Containers
* help - blue
* info - blue
* alert - yellow
* warning - orange
* error - red
* message - green
---
## Need to organize:
* lu: id, account_id, for_obj_id, code, name, description, group, sort, priority, enable, perm_level