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

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