Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-61460

Introduce the UI components library

XMLWordPrintable

    • MOODLE_35_STABLE, MOODLE_39_STABLE
    • MOODLE_400_STABLE
    • MDL-61460-master-4
    • Hide

      To test the component library you will need have access to the moodle root folder of your test install and be able to run npm / grunt

      Test compiling the component library pages

      1. Login as admin
      2. Navigate to Site Administration > Development
      3. You should not see a link to the "UI Component Library"
      4. Open a terminal in your Moodle root folder
      5. Run npm install
      6. Run grunt componentlibrary
      7. Navigate to Site Administration > Development
      8. There should be a link to the "UI Component Library"
      9. Click the link and verify you can see the component library

      Test the Component library search

      1. Try the search and search for the word "buttons"
      2. Verify you can click the search results which show the searched page

      Test the Component library JavaScript rendering

      1. Within the component library navigate to the Moodle > JavaScript > Emojipicker section
      2. Verify you see the emoji picker and can select an emoji

      Test the Component library Mustache rendering

      1. Within the component library navigate to Moodle > Moodle Components > Coursecards
      2. Verify you can see course cards displaying kittens

      Test the Component library theme changer

      1. Navigate to Site Administration > Appearance > Theme settings
      2. Enable the setting for "Allow theme changes in the URL"
      3. Navigate back to the UI Component library
      4. *Verify" you see the current theme in the navbar and can switch to the classic theme.

      Regenerate the icon page using the cli tool

      1. Open a terminal and navigate to your moodle root folder
      2. Run this command:
      3. php admin/tool/componentlibrary/cli/fetchicons.php
      4. Within the component library navigate to the Moodle > Moodle Components > icons
      5. Verify you see the list of icons in use in Moodle
      Show
      To test the component library you will need have access to the moodle root folder of your test install and be able to run npm / grunt Test compiling the component library pages Login as admin Navigate to Site Administration > Development You should not see a link to the "UI Component Library" Open a terminal in your Moodle root folder Run npm install Run grunt componentlibrary Navigate to Site Administration > Development There should be a link to the "UI Component Library" Click the link and verify you can see the component library Test the Component library search Try the search and search for the word "buttons" Verify you can click the search results which show the searched page Test the Component library JavaScript rendering Within the component library navigate to the Moodle > JavaScript > Emojipicker section Verify you see the emoji picker and can select an emoji Test the Component library Mustache rendering Within the component library navigate to Moodle > Moodle Components > Coursecards Verify you can see course cards displaying kittens Test the Component library theme changer Navigate to Site Administration > Appearance > Theme settings Enable the setting for "Allow theme changes in the URL" Navigate back to the UI Component library *Verify" you see the current theme in the navbar and can switch to the classic theme. Regenerate the icon page using the cli tool Open a terminal and navigate to your moodle root folder Run this command: php admin/tool/componentlibrary/cli/fetchicons.php Within the component library navigate to the Moodle > Moodle Components > icons Verify you see the list of icons in use in Moodle

      Bootstrap offers a nice set of UI components that can be reused when Moodle core or Moodle plugins needs to output UI elements like navigation, alerts, dropdowns and much more

      See:

      http://getbootstrap.com/docs/4.0/components

      When these basic elements can be called from the core renderer it will make the overall Moodle UI more consistent. The amount of core CSS can be reduced and updating to newer versions of Bootstrap would take a lot less time.

      A lot of the groundwork for this has already been written in theme_boost and in core_renderers and can be reused. 

      This would also replace core elements like AMD powered modals and drop-downs, and ultimately forms, tables and any other Moodle UI element.

       

        1. image-2021-07-08-11-35-10-020.png
          image-2021-07-08-11-35-10-020.png
          67 kB
        2. image-2021-07-08-11-36-27-877.png
          image-2021-07-08-11-36-27-877.png
          54 kB
        3. image-2021-07-08-11-37-43-545.png
          image-2021-07-08-11-37-43-545.png
          77 kB
        4. image-2021-07-08-11-39-47-110.png
          image-2021-07-08-11-39-47-110.png
          7 kB
        5. image-2021-07-08-11-41-26-438.png
          image-2021-07-08-11-41-26-438.png
          65 kB

            basbrands Bas Brands
            basbrands Bas Brands
            Glyn (Mathew) May Glyn (Mathew) May
            Adrian Greeve Adrian Greeve
            Amaia Anabitarte Amaia Anabitarte
            Votes:
            14 Vote for this issue
            Watchers:
            30 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 2 weeks, 51 minutes
                2w 51m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.