Upgrade to Bootstrap 5.3.2

[agriffard]

https://www.npmjs.com/package/bootstrap/v/5.3.2
https://github.com/twbs/bootstrap/releases/tag/v5.3.2

• Replace https://www.npmjs.com/package/bootstrap-scss to 5.3.2 when available. (Removed, its not used)
• Check filters (bootstrap-select css).
• The icon picker does not look good on dark theme
• DarkmodeService should be deprecated and a new ThemeTogglerService should be used. This service should return CurrentTheme "auto" by default. This way if someone define a new theme like blue, we can use it.
• Multiple external auth providers on login screen.
• Check badge bg-... : Should now be badge text-bg-
• Content and user picker field search.
• Workflow Popover is now showing up. When clicking on the node, the popover with edit/remove options does not show up.
• navbar does not look right on XS size screen.
• Monaco Editor should use a dark theme when BS is set to dark.

Pre-existing issues

• Trumbowyg editor should be using var(--bs-body-color) and var(--bs-body-bg) color.
• Media library: Pill with number next to Delete button when a media is selected is not clearly visible.

Enhancements

• Do not compile Bootstrap with TheAdmin theme. Instead let TheAdmin depend on bootstrap. This will improve performance and improve maintainability.
• Find the media library colors

[agriffard]

This is a start but the admin css does not seem to manage to use most variables after I rebuilt all assets.

If someone can try it and explain me what I am missing, that would be really helpful.

As Boostrap 5.3.1 features a new dark mode, we will have to determine if we use it instead of the current one.

[MikeAlhayek]

@agriffard I actually was thinking about doing this. The problem with Admin theme, it should have some sort of a fresh start. Lots of the old "darkmode" theme can be eliminated since there is a built in darkmode. Also, I was thinking of a easy way to allow others to bring their own color theme. I am still debating if we should leave current admin as-is and create a new theme just so we don't break lots of people since lots should be change.

[agriffard]

I don't think we should maintain 2 admin themes, that wouldn't a good idea.
Also, there are so many views in each module that rely on Bootstrap classes.

When we migrated from Bootstrap 4.x to 5x, there were also many breaking changes but as long as we warn module owners in the Release notes, this is ok to migrate.

[agriffard]

Feel free to use this branch or start your own PR if you want to work on it.

[MikeAlhayek]

@agriffard I have lots of changes locally into this branch. It's probably not a good idea for anyone to make changes here as my changes will likely cause a conflict. If you have local changes, I will push my changes into a new branch. Otherwise, give me few days and I'll push my changes here and then you or anyone can do more changes

[agriffard]

Ok, I am not making more changes for the moment.

[MikeAlhayek]

@agriffard Lots of files changed. Most things were migrated to use bs 5.3. Here is a list of the know issues that I noticed and still to be done

• Audit Trails when viewing content that has change the page turns black and looks weird for some reason.
• I kept all the old scss code but moved it into scss-old folder for the time being. This folder should be removed when we are done.
• Trumbowyg in full screen is broken

Changes

• Lots of the libraries are now using variable var(--) instead of hard coding values. This will help us in the future and will make maintenance easier. Also, it'll allow the user to add their own theme just by overriding the variables without needing to change/remove css files.
• Removed all old SASS warnings we had. It annoyed me to see all the warning in the sass files.
• Cleanup many of the old SASS files.
• Removed some jQuery codes. It would be nice to remove all jQuery code from TheAdmin theme. Here are the files that need to be converted. admin.js, menu.js, and reszeDetector.js

If you have time and want to work on this, please drop me a note just to make sure we don't cause conflict in this branch. Anyway, I am not planning to do any more work for now.

[agriffard]

Thank you @MikeAlhayek
For the Audit trail, there is a js error in diffviewer.js:
typeError: Cannot read properties of null (reading 'toLowerCase')

[MikeAlhayek]

@agriffard yes I fixed that error. The background of the Audit Trail page is always black for some reason regardless of the theme. the AuditTrail internal theme changes correctly. but not sure about the background.

[agriffard]

• The lens icon in the Search box of the Content items page is hidden on focus and should be grayed, not dark, on blur.

[MikeAlhayek]

@agriffard I fixed the color of the icon. Not sure why the blur causes it disappear. Guessing something internal to BS. If you have time, see if you can identify the cause. I'll try to look at it more when I have time.

[agriffard]

The focus in the search box make the lens disappears:

[MikeAlhayek]

@agriffard yes I saw the problem.

Not sure why the blur causes it to disappear. I am guessing something internal to BS is the cause. If you have time, see if you can identify the cause. I'll try to look at it more when I have time.

[agriffard]

https://github.com/twbs/bootstrap/releases/tag/v5.3.2

[agriffard]

Thank you @MikeAlhayek

[MikeAlhayek]

@agriffard I fixed all known issues. There are 2 per-existing issues, I would not worry about it in this PR since its the same look as before.

This PR is ready. Please do more testing on your side. If you notice no issue, you can merge it Monday.

@Skrypt if you are able to, it would be great if you can test it out as well.
@hishamco if you have time, please test it out in RTL.

[hishamco]

@hishamco if you have time, please test it out in RTL.

Sure

[hishamco]

I suggest to do an extensive test before merge this to avoid unexpected results

[MikeAlhayek]

@hishamco we have done lots of testing already. We need to merge it soon, so we can address any issue early on so it is not done closer to 1.8 release. Please do testing yourself and let us know if there is something that is off or worst then before.

@agriffard all editors should now match the theme colors. I check off all the outstanding items. If we don't get reports of issue, I suggest we merge it Monday/Tuesday prior to the meeting so we can announce this change during the meet and request people to file an issue if something is off or does not look right.

[hishamco]

I will try to do a quick test today or tomorrow to check the RTL, then can be ready to merge it this week if it's possible

[agriffard]

In Dark mode, Trumbowyg is white with grey text on full screen button clicked:

[agriffard]

And Trumbowyg's button with sub list are white:

[MikeAlhayek]

@agriffard fixed!

[agriffard]

Markdown field with Wysiwyg editor has light corners of the toolbar on fullscreen button clicked:

[agriffard]

Numeric field with Slider Editor (noUi slider) is rendered like this:

[agriffard]

Numeric Field with Range editor is like this:

[agriffard]

Date field with Localized editor (jQueryUI):

That is ok to keep it like that.

[hishamco]

You reminded me of a tiny issue with the jQuery UI calendar that might need to be fix

[MikeAlhayek]

@agriffard the datetime is an old jquery based picker. I don't really want to change it in this PR. Hopefully someone else spend time into removing that picker and replacing it with a library that does not use jQuery and then ensure that the colors use the theme variables.

Everything else should be fixed.

[MikeAlhayek]

@agriffard I did more validation and few minor adjustments. You may want to import the following recipe in your project so you can virtually see all available fields with their editor

@hishamco you may want to use the same recipe to test out anything you need.

{
  "steps": [
    {
      "name": "ContentDefinition",
      "ContentTypes": [
        {
          "Name": "Test",
          "DisplayName": "Test",
          "Settings": {
            "ContentTypeSettings": {
              "Creatable": true,
              "Listable": true,
              "Draftable": true,
              "Versionable": true,
              "Securable": true
            },
            "FullTextAspectSettings": {}
          },
          "ContentTypePartDefinitionRecords": [
            {
              "PartName": "Test",
              "Name": "Test",
              "Settings": {
                "ContentTypePartSettings": {
                  "Position": "0"
                }
              }
            }
          ]
        }
      ],
      "ContentParts": [
        {
          "Name": "Test",
          "Settings": {},
          "ContentPartFieldDefinitionRecords": [
            {
              "FieldName": "BooleanField",
              "Name": "Bool",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "Bool",
                  "Position": "0"
                }
              }
            },
            {
              "FieldName": "BooleanField",
              "Name": "Switch",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "Switch",
                  "Editor": "Switch",
                  "Position": "1"
                },
                "BooleanFieldSettings": {}
              }
            },
            {
              "FieldName": "ContentPickerField",
              "Name": "ContentPicker",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "ContentPicker",
                  "Position": "2"
                },
                "ContentPickerFieldSettings": {
                  "DisplayedContentTypes": [
                    "Article"
                  ],
                  "DisplayedStereotypes": []
                }
              }
            },
            {
              "FieldName": "DateField",
              "Name": "Date",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "Date",
                  "Position": "3"
                }
              }
            },
            {
              "FieldName": "DateField",
              "Name": "DateLocalized",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "DateLocalized",
                  "Editor": "Localized",
                  "Position": "4"
                },
                "DateFieldSettings": {}
              }
            },
            {
              "FieldName": "DateTimeField",
              "Name": "DateTime",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "DateTime",
                  "Position": "5"
                }
              }
            },
            {
              "FieldName": "HtmlField",
              "Name": "Html",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "Html",
                  "Position": "6"
                }
              }
            },
            {
              "FieldName": "HtmlField",
              "Name": "HtmlMonaco",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "HtmlMonaco",
                  "Editor": "Monaco",
                  "Position": "7"
                },
                "HtmlFieldSettings": {},
                "HtmlFieldMonacoEditorSettings": {
                  "Options": "{\r\n  \"automaticLayout\": true,\r\n  \"language\": \"html\"\r\n}"
                }
              }
            },
            {
              "FieldName": "HtmlField",
              "Name": "HtmlMultiLine",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "HtmlMultiLine",
                  "Editor": "Multiline",
                  "Position": "8"
                },
                "HtmlFieldSettings": {}
              }
            },
            {
              "FieldName": "HtmlField",
              "Name": "HtmlTrumbowyg",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "HtmlTrumbowyg",
                  "Editor": "Trumbowyg",
                  "Position": "9"
                },
                "HtmlFieldSettings": {},
                "HtmlFieldTrumbowygEditorSettings": {
                  "Options": "{\r\n    autogrow: true,\r\n    btns: [\r\n        [\"viewHTML\"],\r\n        [\"undo\", \"redo\"],\r\n        [\"formatting\"],\r\n        [\"strong\", \"em\", \"del\"],\r\n        [\"foreColor\", \"backColor\"],\r\n        [\"superscript\", \"subscript\"],\r\n        [\"link\"],\r\n        [\"insertShortcode\"],\r\n        [\"image\"],\r\n        [\"align\"],\r\n        [\"unorderedList\", \"orderedList\"],\r\n        [\"horizontalRule\"],\r\n        [\"removeformat\"],\r\n        [\"fullscreen\"]\r\n    ],\r\n    btnsDef: {\r\n        align: {\r\n            dropdown: [\"justifyLeft\", \"justifyCenter\", \"justifyRight\", \"justifyFull\"],\r\n            ico: \"justifyLeft\"\r\n        },\r\n        image: {\r\n            dropdown: [\"insertImage\", \"base64\", \"noembed\"],\r\n            ico: \"insertImage\"\r\n        }\r\n    }\r\n}"
                }
              }
            },
            {
              "FieldName": "HtmlField",
              "Name": "HtmlWysiwyg",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "HtmlWysiwyg",
                  "Editor": "Wysiwyg",
                  "Position": "10"
                },
                "HtmlFieldSettings": {}
              }
            },
            {
              "FieldName": "LinkField",
              "Name": "Link",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "Link",
                  "Position": "11"
                }
              }
            },
            {
              "FieldName": "MarkdownField",
              "Name": "Markdown",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "Markdown",
                  "Position": "13"
                }
              }
            },
            {
              "FieldName": "MarkdownField",
              "Name": "MarkdownMultiline",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "MarkdownMultiline",
                  "Editor": "TextArea",
                  "Position": "14"
                },
                "MarkdownFieldSettings": {}
              }
            },
            {
              "FieldName": "MarkdownField",
              "Name": "MarkdownWysiwyg",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "MarkdownWysiwyg",
                  "Editor": "Wysiwyg",
                  "Position": "15"
                },
                "MarkdownFieldSettings": {}
              }
            },
            {
              "FieldName": "LinkField",
              "Name": "Link2",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "Link2",
                  "Position": "12"
                },
                "LinkFieldSettings": {
                  "Hint": "https://",
                  "HintLinkText": "link title",
                  "UrlPlaceholder": "enter url here",
                  "TextPlaceholder": "enter text here"
                }
              }
            },
            {
              "FieldName": "MediaField",
              "Name": "Media",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "Media",
                  "Position": "16"
                }
              }
            },
            {
              "FieldName": "MediaField",
              "Name": "MediaAttached",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "MediaAttached",
                  "Editor": "Attached",
                  "Position": "17"
                },
                "MediaFieldSettings": {
                  "AllowedExtensions": []
                }
              }
            },
            {
              "FieldName": "MultiTextField",
              "Name": "MultiText",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "MultiText"
                },
                "MultiTextFieldSettings": {
                  "Options": [
                    {
                      "name": "1",
                      "value": "1"
                    },
                    {
                      "name": "2",
                      "value": "2"
                    }
                  ]
                }
              }
            },
            {
              "FieldName": "MultiTextField",
              "Name": "MultiTextCheckboxList",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "MultiTextCheckboxList",
                  "Editor": "CheckboxList"
                },
                "MultiTextFieldSettings": {
                  "Options": [
                    {
                      "name": "1",
                      "value": "1"
                    },
                    {
                      "name": "2",
                      "value": "2"
                    }
                  ]
                }
              }
            },
            {
              "FieldName": "MultiTextField",
              "Name": "MultiTextPicker",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "MultiTextPicker",
                  "Editor": "Picker"
                },
                "MultiTextFieldSettings": {
                  "Options": [
                    {
                      "name": "1",
                      "value": "1"
                    },
                    {
                      "name": "2",
                      "value": "2"
                    }
                  ]
                }
              }
            },
            {
              "FieldName": "NumericField",
              "Name": "Numeric",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "Numeric"
                }
              }
            },
            {
              "FieldName": "NumericField",
              "Name": "NumericRange",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "NumericRange",
                  "Editor": "Range"
                },
                "NumericFieldSettings": {
                  "Minimum": 0.0,
                  "Maximum": 100.0
                }
              }
            },
            {
              "FieldName": "NumericField",
              "Name": "NumericSlider",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "NumericSlider",
                  "Editor": "Slider"
                },
                "NumericFieldSettings": {
                  "Minimum": 0.0,
                  "Maximum": 100.0
                }
              }
            },
            {
              "FieldName": "NumericField",
              "Name": "NumericSpinner",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "NumericSpinner",
                  "Editor": "Spinner"
                },
                "NumericFieldSettings": {
                  "Minimum": 0.0,
                  "Maximum": 100.0
                }
              }
            },
            {
              "FieldName": "TaxonomyField",
              "Name": "Taxonomy",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "Taxonomy"
                }
              }
            },
            {
              "FieldName": "TaxonomyField",
              "Name": "TaxonomyTags",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "TaxonomyTags",
                  "Editor": "Tags"
                },
                "TaxonomyFieldSettings": {
                  "TaxonomyContentItemId": "4pgx7ma0ja3wft3je30cnyprc9"
                },
                "TaxonomyFieldTagsEditorSettings": {}
              }
            },
            {
              "FieldName": "TextField",
              "Name": "Text",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "Text"
                }
              }
            },
            {
              "FieldName": "TextField",
              "Name": "TextCodeMirror",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "TextCodeMirror",
                  "Editor": "CodeMirror"
                },
                "TextFieldSettings": {}
              }
            },
            {
              "FieldName": "TextField",
              "Name": "TextColor",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "TextColor",
                  "Editor": "Color"
                },
                "TextFieldSettings": {}
              }
            },
            {
              "FieldName": "TextField",
              "Name": "TextEmail",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "TextEmail",
                  "Editor": "Email"
                },
                "TextFieldSettings": {}
              }
            },
            {
              "FieldName": "TextField",
              "Name": "TextIconPicker",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "TextIconPicker",
                  "Editor": "IconPicker"
                },
                "TextFieldSettings": {}
              }
            },
            {
              "FieldName": "TextField",
              "Name": "TextMonaco",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "TextMonaco",
                  "Editor": "Monaco"
                },
                "TextFieldSettings": {},
                "TextFieldMonacoEditorSettings": {
                  "Options": "{\r\n  \"automaticLayout\": true,\r\n  \"language\": \"html\"\r\n}"
                }
              }
            },
            {
              "FieldName": "TextField",
              "Name": "TextPrdefinedList",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "TextPrdefinedList",
                  "Editor": "PredefinedList"
                },
                "TextFieldSettings": {},
                "TextFieldPredefinedListEditorSettings": {
                  "Options": [
                    {
                      "name": "1",
                      "value": "1"
                    },
                    {
                      "name": "2",
                      "value": "2"
                    }
                  ]
                }
              }
            },
            {
              "FieldName": "TextField",
              "Name": "TextPredefinedList",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "TextPredefinedList",
                  "Editor": "PredefinedList"
                },
                "TextFieldSettings": {},
                "TextFieldPredefinedListEditorSettings": {
                  "Options": [
                    {
                      "name": "1",
                      "value": "1"
                    },
                    {
                      "name": "2",
                      "value": "2"
                    }
                  ],
                  "Editor": 1
                }
              }
            },
            {
              "FieldName": "TextField",
              "Name": "TextPhone",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "TextPhone",
                  "Editor": "Tel"
                },
                "TextFieldSettings": {}
              }
            },
            {
              "FieldName": "TextField",
              "Name": "TextMultiLine",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "TextMultiLine",
                  "Editor": "TextArea"
                },
                "TextFieldSettings": {}
              }
            },
            {
              "FieldName": "TextField",
              "Name": "TextUrl",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "TextUrl",
                  "Editor": "Url"
                },
                "TextFieldSettings": {}
              }
            },
            {
              "FieldName": "TimeField",
              "Name": "Timer",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "Timer"
                }
              }
            },
            {
              "FieldName": "UserPickerField",
              "Name": "UserPicker",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "UserPicker"
                }
              }
            },
            {
              "FieldName": "YoutubeField",
              "Name": "Youtube",
              "Settings": {
                "ContentPartFieldSettings": {
                  "DisplayName": "Youtube"
                }
              }
            }
          ]
        }
      ]
    }
  ]
}

[agriffard]

Thank you for the recipe (That is what I did manually, create a Content type with all possible fields).

It's time to merge.

Thank you for all your work on this PR.