[REACT] Custom date icon

[rodel.ocfemia]

Hi,

We replaced the svg and was able to display the image as below using our project code. Is there a way to fit it in the milestone icon? I tried adding margin but it does not work.

Capture.PNG (5.23 KiB) Viewed 287 times

Here is the actual image screenshot.

Image1.PNG (304 Bytes) Viewed 287 times

Here is the code of the Image1.svg since it's not allowed to be uploaded.

<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_325_70)">
<path d="M21.3388 3.66119H3.66113V21.3389H21.3388V3.66119Z" fill="#256F96"/>
<path d="M19.571 5.42902H5.42902V19.571H19.571V5.42902Z" fill="white"/>
<path d="M10.1807 8.84568L14.0754 13.0798L12.8451 14.3102L8.61091 10.4155L10.1807 8.84568ZM15.6537 15.846C15.3991 16.1006 15.1163 16.2364 14.8052 16.2533C14.494 16.259 14.2282 16.1515 14.0075 15.9309C13.7813 15.7046 13.671 15.4359 13.6766 15.1248C13.6879 14.808 13.8209 14.5223 14.0754 14.2678C14.3243 14.0189 14.6043 13.8916 14.9155 13.8859C15.2323 13.8746 15.5038 13.9821 15.7301 14.2084C15.9507 14.429 16.0553 14.6977 16.044 15.0145C16.0327 15.3199 15.9026 15.5971 15.6537 15.846Z" fill="#E0343A"/>
</g>
<defs>
<clipPath id="clip0_325_70">
<rect width="25" height="25" fill="white"/>
</clipPath>
</defs>
</svg>

Here is the css code

.image1.b-gantt-task.b-milestone .b-gantt-task-content {
  background-image: url(Image1.svg);
}

sample data

{
            "id": 1,
            "name": "Website Design",
            "percentDone": 100,
            "startDate": null,
            "endDate": "2022-03-14",
            "duration": 0,
            "cls": "image1",
          },

[marcio]

Hey,

I changed the SVG to the following

<svg width="18" height="18" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_325_70)">
<path d="M21.3388 3.66119H3.66113V21.3389H21.3388V3.66119Z" fill="#256F96"/>
<path d="M19.571 5.42902H5.42902V19.571H19.571V5.42902Z" fill="white"/>
<path d="M10.1807 8.84568L14.0754 13.0798L12.8451 14.3102L8.61091 10.4155L10.1807 8.84568ZM15.6537 15.846C15.3991 16.1006 15.1163 16.2364 14.8052 16.2533C14.494 16.259 14.2282 16.1515 14.0075 15.9309C13.7813 15.7046 13.671 15.4359 13.6766 15.1248C13.6879 14.808 13.8209 14.5223 14.0754 14.2678C14.3243 14.0189 14.6043 13.8916 14.9155 13.8859C15.2323 13.8746 15.5038 13.9821 15.7301 14.2084C15.9507 14.429 16.0553 14.6977 16.044 15.0145C16.0327 15.3199 15.9026 15.5971 15.6537 15.846Z" fill="#E0343A"/>
</g>
<defs>
<clipPath id="clip0_325_70">
<rect width="25" height="25" fill="white"/>
</clipPath>
</defs>
</svg>

and got the following result, is that ok for you?

[rodel.ocfemia]

Hi,
I need to check with user if this is fine with them.
Meantime, on mouseover on the image, the image disappears. When I console.log the taskRecord.cls, it displays already the correct css class.

Please check from your end if the same behavior.

Thanks

[marcio]

Hi,

Yes, but you can add the following rule to overwrite the hover effect as well

.b-gantt-task-wrap.b-milestone-wrap.b-gantt-task-hover .image1.b-gantt-task.b-milestone .b-gantt-task-content {
    background-image: url(Image1.svg);
}

[rodel.ocfemia]

Hi,

The mouse hover issue is fixed. For the custom icon below, is there still a way for the icon to fill all the gap so that the light-blue color will not be visible?

Capture.PNG (11.25 KiB) Viewed 265 times

Thanks

[alex.l]

Try to make the icon bigger? You can also change background of a milestone to transparent using CSS https://bryntum.com/products/gantt/docs/api/Gantt/model/TaskModel#field-cls
https://bryntum.com/products/gantt/docs/api/Gantt/model/TaskModel#field-style
Fastest code for example

.b-gantt-task.b-milestone .b-gantt-task-content {
    background-color: #ffffff00;
}

[rodel.ocfemia]

Hi,

The original svg code is as follows.

<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_325_70)">
<path d="M21.3388 3.66119H3.66113V21.3389H21.3388V3.66119Z" fill="#256F96"/>
<path d="M19.571 5.42902H5.42902V19.571H19.571V5.42902Z" fill="white"/>
<path d="M10.1807 8.84568L14.0754 13.0798L12.8451 14.3102L8.61091 10.4155L10.1807 8.84568ZM15.6537 15.846C15.3991 16.1006 15.1163 16.2364 14.8052 16.2533C14.494 16.259 14.2282 16.1515 14.0075 15.9309C13.7813 15.7046 13.671 15.4359 13.6766 15.1248C13.6879 14.808 13.8209 14.5223 14.0754 14.2678C14.3243 14.0189 14.6043 13.8916 14.9155 13.8859C15.2323 13.8746 15.5038 13.9821 15.7301 14.2084C15.9507 14.429 16.0553 14.6977 16.044 15.0145C16.0327 15.3199 15.9026 15.5971 15.6537 15.846Z" fill="#E0343A"/>
</g>
<defs>
<clipPath id="clip0_325_70">
<rect width="25" height="25" fill="white"/>
</clipPath>
</defs>
</svg>

But it is showing as the following image.

Capture.PNG (5.23 KiB) Viewed 261 times

Then marcio suggested to make the image smaller. Please see previous comments.
So after that the image is now displayed with extra light blue border.

Let me try your recommendation.

[alex.l]

Thanks for explanation! Now I see the problem. Actually it should work out of the box using taskIconCls, but it doesn't.
I've opened a ticket to fix that https://github.com/bryntum/support/issues/6605
When it is fixed, it will be possible to replace a milestone element with custom icon using taskIconCls.