I use the following code to import React Material UI icons in my project;
import SupervisorAccountIcon from '#mui/icons-material/SupervisorAccount';
and I use them using;
<StyledTreeItem labelIcon={SupervisorAccountIcon} >
My data comes from the Laravel backend, and I would like to define which Icon will be used for each item in one of my database fields. So I can dynamically load or reference icons for each item when I build the display elements using React.
For that, I need to store an ID or name of the Icon in my database and retrieve the actual icon reference at the front end.
Is there any way to get an ID for MUI Icon, and how can I dynamically load Icon using its ID or name without hardcoding the Icon name? or even is this possible? Any help would be highly appreciated.
Is there any way to target some components from react-bootstrap in CSS. For my application, I'm using Modals from react-bootstrap and I need to change some style on all of them and it will be annoying if I need to change every single one individually.
Yes, it is possible, however you will need to inspect the Modal using ChromeDevTools or the like and see what classes are applied to the Modal when it is displayed. For example, when I inspected the Modal from react-bootstrap, I noticed the styles applied to the heading were given the className of "modal-header". So I created a Modal.css file and added the following code to it:
.modal-header {
background-color: red;
}
Then, I imported "./Modal.css" into the Modal.js file or wherever you've defined or using your Modal. Finally, when I opened the Modal, the heading had a background of red color so to speak.
Please note that it can be a little difficult to override bootstrap styles sometimes.
I have the following code:
header_contents.push(<DropdownButton bsSize='xsmall' bsStyle='link' pullRight={true} id={1} title='Menu'>
{item_menu}
</DropdownButton>);
I want to have the styling in Bootstrap to be white lettering (currently blue) as I think the link option is defaulted to that. How can you change the styling for Bootstrap to pass link color, and other properties like if you want to move the link down a little on the page?
I should mention we do very little CSS styling as most of that is done within the ReactJS components.
Either override bootstrap CSS in a css file (that is what your seem to avoid I understand): it is the better way to ensure a global effect over every link in your application.
Or do no sent bsStyle='link' as DropdownButton property but instead, insert a style property with custom CSS. Yet you can insert style even if you don't remove bsStyle. You could then create your own component wrapping DropdownButton to ensure the same graphic chart in your application.
I figured it out with the help of an online chat room. Here's what I did.
I first made a style (dropDownLinkStyle) in the react component like this.
let dropDownLinkStyle = {
color: 'white'
};
Then I used it (dropDownLinkStyle) in the dropdownButton like this.
header_contents.push(<DropdownButton bsSize='large' style={dropDownLinkStyle} bsStyle='link' pullRight={true} id={1 /* avoids react warning */} title='Menu'>
{item_menu}
</DropdownButton>);
I hope this helps. This allowed me to keep my bsStyle which is link (tells Bootstrap I want a link type on my screen instead of a button) and allows me to change that link to white lettering. I could also pass more styling by just adding it to the object -- dropDownLinkStyle
I upgraded from ng-grid to ui-grid. The grid works fine including sorting, filtering and moving. I even have the correct font files and have them mapped properly. However I have no icons what so ever. I am not even getting "funky chars" because of the missing font file.
To show the order of the sort, nothing in the pagination buttons, nothing in the header row and nothing to show there is a dropdown menu. Does any one know if "ui" vs "ng" they removed anything like that?
How do I get the pagination to show something for the user to see and how do i show icons for the sort direction in the headers?
The current UI-Grid CSS file definitely has that ui-grid-icon-up-dir class; here's the relevant snippet:
/* '썘' */
.ui-grid-icon-up-dir:before {
content: '\c359';
}
Since the ui-grid-icon-up-dir class is not defined in the CSS file you examined, that file must be outdated (perhaps a cache- or path-related issue?) To test that theory, you could try temporarily changing your CSS link to the current UI-Grid CSS to see if those icons appear:
<link href="http://ui-grid.info/release/ui-grid-unstable.css" rel="stylesheet">
How can i Enable the Text Color plugin of Tinymce in Toolbar of Visual Editor ?
I was able to enable the print, search and replace plugins inside the Visual Editor by editing this file
Composite/content/misc/editors/visualeditor/includes/toolbarsimple.inc
and
modifying a line in below file to include the searchreplace, print plugins
Composite/content/misc/editors/visualeditor/visualeditor.js
plugins: "compositelink,compositetable,compositeimage,compositerendering,compositecharmap,compositefield,compositetext,paste,lists,searchreplace,print",
Similarly is there any way to enable the inbuild feature of Tinymce namely Text Color, Font Size, Font Family, Table, Row, Column in the toolbar of the Visual Editor without making the changes through styles which is done by editing this file
Frontend/Config/VisualEditor/common.xml
Thanks
Ajith
Managed to get the Text Color, Background Color, Font Family, Font Size up and running inside the Composite C1 editor.
Listing down the steps below for the benefit of others.
Copy all the files and folder from Website\Composite\content\misc\editors\visualeditor\tiny_mce\themes\advanced except editor_template.js and editor_template_src.js into your Website\Composite\content\misc\editors\visualeditor\tiny_mce\themes\composite folder.
Edit the file Website\Composite\content\misc\editors\visualeditor\visualeditor.js and include the below lines in the config section.
skin: 'default',
theme_advanced_buttons1: "forecolor,backcolor,fontselect,fontsizeselect",
theme_advanced_buttons2: "",
For a complete list of options visit the TinyMCE link and go to View Source.
You might also want to inclue inlinepopups in the plugins: line for proper rendering of the popups. Any additional plugins like insertdatetime, media, print,searchreplace, etc can also be included in the same line.
To include the plugins like insertdatetime, media, print, searchreplace in existing toolbar row, edit the Website\Composite\content\misc\editors\visualeditor\includes\toolbarsimple.inc file and include the respective tags containing the commands. For eg.
<ui:toolbargroup>
<ui:toolbarbutton cmd="mceSearch" tooltip="Search" image="${skin}/wysiwygeditor/search.png" isdisabled="false" />
<ui:toolbarbutton cmd="mceReplace" tooltip="Replace" image="${skin}/wysiwygeditor/replace.png" isdisabled="false" />
</ui:toolbargroup>
Copy and merge the code from the Website\Composite\content\misc\editors\visualeditor\tiny_mce\themes\advanced\editor_template_src.js file into the Website\Composite\content\misc\editors\visualeditor\tiny_mce\themes\composite\editor_template.js file. Most of the functions can be copied over as it is. Only the common ones like renderUI need special attention. I directly gave a call to the simpleLayout function instead of using a switch in the renderUI
ic = t._simpleLayout(s, tb, o, p);
There could be some issue with not being able to see the entire content in the editor for large content, to fix this issue edit the Website\Composite\content\misc\editors\visualeditor\tiny_mce\themes\composite\skins\default\ui.css file and modify the .defaultSkin iframe css to specify proper height or overflow scroll.
To include more features to your toolbar, just edit theme_advanced_buttons1.
Good Luck..
Ajith
With Composite C1 you need to do styling (like font face, font size, colors and table related styles) using CSS classes and make these classes available to end-users.
The front-end developer define classes needed in CSS and then register them in the toolbar configuration file from where the end-user can select the styles. Composite C1 does not promote having font tags or style attributes in the content html, so if that is what you really want you need to make changes to the core javascript.
You can read about customizing the Visual Editor toolbar here http://docs.composite.net/Console/CustomizingVisualEditor.