SolidOS - UI/UX improvement

This is the page where you can keep up to date with the progress made on the 'improving SolidOS UI topic'.

The problem

The problems registered are described by feedback we received from SolidOS users but also from the experience of the SolidOS team over time with the interface. We have collected bugs and discussions on GitHub:

The vision of Solid-UI

  • to use RDF as component descriptors as well as user data;
  • to use the Solid protocol live, to allow apps you build with to be collaborative editors automatically our of the box;
  • and to avoid working with a large trad UX framework like Vue, React, jQuery, .. in that sense be its own framework.

Representatives of topic

Break down of problems

  1. Code cleanup
    1. RDF forms
    2. Usage of icons
    3. Streamlined styling approach -> DONE
    4. Fix major bugs in UI/UX
  2. New features
    1. A simple user in addition to Developer and Power User
      1. Onboarding experience
      2. User Manual improvements
      3. Tool tips
    2. Responsive Design (Use of divs instead of tables)
    3. Translations

Code cleanup

  1. RDF forms

    There is an opportunity to separate the forms code in its own library to promote it separately.
    TODO:

    1. work on style
    2. refactor code and move code
    3. adding new features - like integrate with Jeff's work
    4. fix existing reported bugs

  2. Usage of icons

    The idea was to move the icons in a separate repository because tehy are used by the namual and the ui

  3. Fix major bugs in UI/UX

  4. Streamlined styling approach

    Currently there are different ways to use styles just in solid-ui
    Findings after code analysis

    • all files which make use of ui style.js:
      infinite, message, messageTools, thread, buttons, forms, multiSelect, autocompleteField, autocompletePicker, buttons
    • all files which make use of jss:
      acl-control, headerFooterhelpers, buttons
    • all files which make use of ns.ui:
      participation, preferences, login, and fields.stories, form.stories, options.stories, label, forms, basic, comment, fieldParams, formStyle, autocompleteField
    • all files which have their own styles:
      media, signup, dragAndDrop, error, forms, pad, participation, tabs