Fix #25862: UI Issues after CSS changes

[zJaaal]

🤖 Generated by Copilot at 67c0388

Summary

🎨🐛📝

This pull request improves the UI and functionality of the dot-template-thumbnail-field component, which allows users to select or create a thumbnail image for a template. It also fixes some related issues in the language manager portlet, the browser portlet, and the Dojo widgets that the component uses. The changes mainly involve updating the styles, layouts, and code formatting of the component and its dependencies to match the dotcms-theme library and the design mockups. The affected files are dot-template-thumbnail-field.component.scss, searchable-dropdown.component.scss, searchable-dropdown.component.stories.ts, RolesFilteringSelect.html, edit_language_keys.jsp, _combobox.scss, dotcms.css, and view_browser_js_inc.jsp.

dot-template-field
Enhancing styles and layout
Autumn of refactor

Walkthrough

• Import common button styles from the dotcms-theme library to the dot-template-thumbnail-field.component.scss file to reuse existing styles and avoid duplication (link)
• Remove border radius and padding styles from the dot-template-thumbnail-field.component.scss file to simplify the layout and use the default styles from the dotcms-theme library (link)
• Modify button styles in the dot-template-thumbnail-field.component.scss file to make them more consistent with the dotcms-theme library and the design mockups (link)
• Move the searchable-dropdown.component.scss file from the view/components/_common folder to the portlets/dot-templates/dot-template-create-edit/dot-template-props/dot-template-thumbnail-field folder to make it more specific to the dot-template-thumbnail-field component and avoid affecting other components that use the searchable-dropdown component (link)
• Add the @include truncate-text mixin to the searchable-dropdown.component.scss file to apply the ellipsis style to the option label when it is too long to fit in the available width (link)
• Modify button styles in the searchable-dropdown.component.scss file to make them more consistent with the dotcms-theme library and the design mockups (link)
• Remove the DotMessagePipe declaration from the searchable-dropdown.component.stories.ts file to avoid importing an unnecessary dependency and simplify the code (link)
• Add the DotMessagePipe import to the searchable-dropdown.component.stories.ts file to fix a missing dependency that was causing an error in the Storybook tool (link)
• Modify the data array in the searchable-dropdown.component.stories.ts file to test the ellipsis style that was added to the option label in the searchable-dropdown.component.scss file (link)
• Modify input styles in the _combobox.scss file to make the input field more consistent with the dotcms-theme library and the design mockups (link)
• Modify input styles in the dotcms.css file to make the input field more consistent with the dotcms-theme library and the design mockups (link)
• Remove the div element with the style attribute from the RolesFilteringSelect.html file to remove an unnecessary element and style that was causing some layout issues (link, link)
• Modify the style attribute of the addPageAssetDialog element in the view_browser_js_inc.jsp file to remove the fixed width and let the dialog adjust to the content size (link)
• Remove some extra spaces in the edit_language_keys.jsp file to improve the code formatting and readability (link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link)
• Modify the form and portlet-main elements in the edit_language_keys.jsp file to fix some layout issues and make the portlet more responsive (link)
• Modify the button elements in the edit_language_keys.jsp file to make them more consistent with the dotcms-theme library and the design mockups (link, link)
• Modify the myselect.setValue and updateSelectBoxImage function calls in the edit_language_keys.jsp file to fix a bug that was causing the language selector to show the wrong flag image (link)
• Modify the div element with the id attribute loadProgress in the edit_language_keys.jsp file to fix a layout issue that was causing the progress bar to overlap with the toolbar (link)
• Modify the div element with the class attribute buttonRow in the edit_language_keys.jsp file to fix a layout issue that was causing the pagination buttons to be misaligned (link)
• Modify the dojo.addOnLoad function in the edit_language_keys.jsp file to fix a bug that was causing the savingKeysDialog widget to show a close button (link)

Screenshots

Screen.Recording.2023-08-23.at.11.39.33.AM.mov

[dotcms-sonarqube]

SonarQube Quality Gate

0 Bugs
0 Vulnerabilities
0 Security Hotspots
2 Code Smells

No Coverage information
0.0% Duplication

[dotcms-sonarqube]

SonarQube Quality Gate

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
No Duplication information