asked on January 7, 2025
Hi,
I wonder if there is a fast way to generate svgs for the icons for Flexmonster toolbar so that it would blend well and would have the same style and dimensions as the other buttons? Also, how would you change the width of the subtitles of the button so that to avoid them changing to '...'?
⋅ January 7, 2025
Here is what we tried:
tabs.splice(14, 0, { divider: true });
tabs.splice(15, 0, {
id: "fm-tab-expandstr",
title: "ExpStr",
icon: `<svg width="50" height="50" viewBox="0 0 188 141" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><defs><clipPath id="clip0"><rect x="2008" y="115" width="188" height="141"/></clipPath><image width="244" height="130" xlink:href="data:image/jpeg;base64,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" preserveAspectRatio="none" id="img1"></image><clipPath id="clip2"><rect x="0" y="2.61018" width="489910" height="177338"/></clipPath></defs><g clip-path="url(#clip0)" transform="translate(-2008 -115)"><rect x="2008" y="115" width="188" height="141" fill="#FFFFFF"/><g transform="matrix(0.000360892 0 0 0.000360892 2013 142)"><g clip-path="url(#clip2)" transform="matrix(1.0011 0 0 1 0.187256 -2.60587)"><use width="100%" height="100%" xlink:href="#img1" transform="scale(2007.83 2007.83)"></use></g></g><rect x="2009" y="115" width="187" height="26.9998" fill="#EAEAEA"/><rect x="2009" y="206" width="187" height="26.0001" fill="#999999"/><path d="M2142 231 2103.5 256 2065 231Z" fill="#7F7F7F" fill-rule="evenodd"/></g></svg>`,
handler: () => {
me.loadStructureImages(true);
me.flexview.expandData(me.getentitycolname(d));
}
});
tabs.splice(16, 0, { divider: true });
tabs.splice(17, 0, {
id: "fm-tab-collapsestr",
title: "CollStr",
icon: `<svg width="50" height="50" viewBox="0 0 187 141" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><defs><clipPath id="clip0"><rect x="2304" y="162" width="187" height="141"/></clipPath><image width="244" height="130" xlink:href="data:image/jpeg;base64,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" preserveAspectRatio="none" id="img1"></image><clipPath id="clip2"><rect x="0" y="85285.2" width="487718" height="174564"/></clipPath></defs><g clip-path="url(#clip0)" transform="translate(-2304 -162)"><rect x="2304" y="162" width="187" height="141" fill="#FFFFFF"/><g transform="matrix(0.000360892 0 0 0.000360892 2311 190)"><g clip-path="url(#clip2)" transform="matrix(1.0056 0 0 1 0.0500488 -85285.2)"><use width="100%" height="100%" xlink:href="#img1" transform="scale(1998.84 1998.84)"></use></g></g><rect x="2305" y="163" width="186" height="26.0001" fill="#999999"/><rect x="2304" y="264" width="187" height="26.0001" fill="#EAEAEA"/><path d="M2358 290 2396 265 2434 290Z" fill="#999999" fill-rule="evenodd"/></g></svg>`,
handler: () => {
me.flexview.collapseData(me.getentitycolname(d));
}
});
tabs.splice(18, 0, { divider: true });
The first image appears but its not interactive, not changing upon hovering it over, the 2nd image is completely lost. Curiously if we use the same svg for both they do appear but not when they have different svgs.
⋅ January 9, 2025
Hello, Nikita!
Thank you for contacting us.
Please note that Flexmonster uses a custom-made set of SVG icons.
We recommend taking a look at the following icon set provider: https://icomoon.io/. In this resource, it is possible to find or create icons that are similar to the ones that Flexmonster uses.
As for configuring the hover styles, we are using our own .fill-background and .fill-border CSS classes that are responsible for handing the hover and adding them to the necessary <path> elements of SVG. The structure and dimensions of our default Toolbar SVG can be checked using any browser Dev tools.
You can also add your own styles to handle hover on the custom icons.
Regarding your question about the ... in the names of the tabs, this behavior is configured in the CSS by a combination of text-overflow: ellipsis and overflow: hidden styles. You can override our default CSS styles for custom tabs with your own classes and change this behavior when needed. Please note that you may need to add the !important priority modifier to override some of our styles.
Hope it helps.
Kind regards,
Solomiia
⋅ 5 days ago
Hello, Nikita!
Hope you are doing well.
Our team is wondering if you had a chance to read our previous letter. Could you please let us know if you have any further questions?
Looking forward to hearing from you.
Kind regards,
Solomiia
⋅ 5 days ago
Hi Solomiia!
For now we decided to go with certain kinds of icons generated by ChatGPT that are working fine. We may come back to the issue soon. We found the relevant classes that control ... in css.
Thank you,
Nikita
⋅ 4 days ago
Hi, Nikita!
Thank you for your feedback.
We are happy to hear everything works well now.
Feel free to contact us in case of any further questions.
Kind regards,
Solomiia