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

Introduce the UI components library

    XMLWordPrintable

    Details

    • Affected Branches:
      MOODLE_35_STABLE, MOODLE_39_STABLE
    • Fixed Branches:
      MOODLE_400_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-61460-master-4
    • Testing Instructions:
      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

      Description

      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.

       

        Attachments

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

          Issue Links

            Activity

              People

              Assignee:
              basbrands Bas Brands
              Reporter:
              basbrands Bas Brands
              Peer reviewer:
              Mathew May Mathew May
              Integrator:
              Adrian Greeve Adrian Greeve
              Tester:
              Amaia Anabitarte Amaia Anabitarte
              Participants:
              Component watchers:
              Amaia Anabitarte, Carlos Escobedo, Ferran Recio, Ilya Tregubov, Sara Arjona (@sarjona), Huong Nguyen, Bas Brands, Mathew May
              Votes:
              14 Vote for this issue
              Watchers:
              29 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:

                  Time Tracking

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