How to set fa-pie-chart value?
OpenPublic
Actions

Asked by littleggghost on Mar 1 2024, 16:38.

Details

As ponder Q114: Subtypes deadline switch to colored calendar icons says, I want to replace the calendar icon to a pie-char percentage icon.

In the extension codes about the icon value part:

if ($deadline && $due) {
  $text = phabricator_date($due, $viewer);
  $now = time();
  $day = 86400;
  if ($due < $now) {
    $this->setColor('fire');
  } else if ($due < $now + ($day * 2.5)) {
    $this->setColor('orange');
  } else if ($due < $now + ($day * 7)) {
    $this->setColor('green');
  } else {
    $this->setColor('grey');
  }
  $icon = 'fa-calendar-check-o';
}

The variable "text" and function "setColor" is the key to set a colored calendar with date.

Then what's the key variable and function about a pie-chart? Could you give me a short demo about a simple pie-chart?

Thanks!

Answers

20after4
Updated 256 Days Ago
Actions

fa-pie-chart is a pie chart icon:

there aren't separate versions for different percentages, unfortunately.

You could maybe use Unicode characters like U+25D5 CIRCLE WITH ALL BUT UPPER LEFT QUADRANT BLACK

Examples: ◴ ◵ ◶ ◷ ◐ ◑ ◒ ◓ ◕

Event Timeline

Thanks for your advise!

I think only replace the icon will be more easier for me. Like a series of growing pie icons.
To test first, I tried to add a new icon named "fa-test" in path

resources/builtin/projects

This icon is a copy of an existing one, fa-apple.png, which I'm sure a picture can be seen.

After that, I modify this two files to make sure the new icon be included in program.

src/view/phui/PHUIIconView.php
webroot/rsrc/css/font/font-awesome.css

The diff is:
{F1633808} {F1649877}

Now in webUI,

uiexample/view/PHUIIconExample/

I can see {F1633740}

But the problem is as up shows, the fa-test picture shows nothing, it should has a picture like apple icon.

Could you give me some advise about this?

Hi @20after4
Maybe I should ask this following question in a new Ponder?

(We cannot see screenshots like F1633808 - please set permissions to Visible To All Users - thanks)

I change the visibility now.
I intuitional think the default permission is all users. But I'm wrong. The default permission is only myself. Maybe this is for privacy reasons?

~~@littleggghost I think you might just need to run celerity to update the icons.~~

Edit: actually, no. based on your screenshot:
{F1649877}

I don't think you can just put a url in the content: of an element via css. You probably need to use background-image: and content: " " (a space character so the element is not entirely empty)

Using a sprite sheet would be better than trying to override the font-awesome icons because the icons are literally a font file with embedded graphics. A more modern way of doing this would be to simply use svg icons embedded directly in css/html.

How to set fa-pie-chart value?OpenPublicActions

Details

Event Timeline

Answers

20after4Updated 256 Days AgoActions

Event Timeline

New Answer

Answer

How to set fa-pie-chart value?
OpenPublic
Actions

20after4
Updated 256 Days Ago
Actions