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

Introduce the UI components library

    XMLWordPrintable

Details

    • 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

    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

        Issue Links

          blocks

          Improvement - An enhancement to an existing Moodle feature. MDL-71788 Make it easier to copy the export url

          • Major - Major loss of function, incorrect output
          • Closed
          has a non-specific relationship to

          Improvement - An enhancement to an existing Moodle feature. MDL-67958 Making search fields consistent using global search

          • Minor - Minor loss of function where workaround is possible
          • Closed
          has been marked as being related by

          Bug - A problem which impairs or prevents Moodle from functioning correctly. MDL-72326 Component library does not initialise on Windows

          • Minor - Minor loss of function where workaround is possible
          • Closed
          is blocked by

          Bug - A problem which impairs or prevents Moodle from functioning correctly. MDL-68496 grunt watch watches style changes in node_modules

          • Blocker - Blocks development and/or testing, prevents Moodle from running (applicable to bugs only)
          • Closed
          Testing discovered

          Improvement - An enhancement to an existing Moodle feature. MDL-72146 Administration > Development > UI Component Library menu item should always exist

          • Minor - Minor loss of function where workaround is possible
          • Development in progress

          Activity

            People

              basbrands Bas Brands
              basbrands Bas Brands
              Mathew May Mathew May
              Adrian Greeve Adrian Greeve
              Amaia Anabitarte Amaia Anabitarte
              Amaia Anabitarte, Carlos Escobedo, Ferran Recio, Ilya Tregubov, Laurent David, Raquel Ortega, 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:
                19/Apr/22

                Time Tracking

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