<?phpnamespace App\Gui;use JumPHP\Gui\Theme;use JumPHP\Gui\Widget;use JumPHP\Renderer\Renderer;/** * The dark title over the tabs: the icon and the name of the selected object, and where it is ("on 'xcp-ng-01'"). * * @property string $text * @property string $detail * @property string $icon */final class Banner extends Widget{ public const DEFAULTS = ['text' => '', 'detail' => '', 'icon' => 'xencenter', 'width' => 'fill']; protected function content(Theme $t, float $maxWidth, string $breakpoint): array { return [$maxWidth, $t->px(52)]; } public function render(Renderer $r, Theme $t): void { $steps = 16; for ($i = 0; $i < $steps; $i++) { $k = $i / ($steps - 1); $c = sprintf('#%02x%02x%02x', (int)(0x1b + 0x14 * $k), (int)(0x33 + 0x22 * $k), (int)(0x5a + 0x30 * $k)); $r->fillRect($this->x + $this->w * $i / $steps, $this->y, $this->w / $steps + 1, $this->h, $c); } $icon = $t->px(24); $ix = $this->x + $t->px(16); $iy = $this->y + ($this->h - $icon) / 2; $t->box($r, $ix - $t->px(5), $iy - $t->px(5), $icon + $t->px(10), $icon + $t->px(10), [255, 255, 255, 34], $t->px(7)); Icons::draw($r, (string)$this->props['icon'], $ix, $iy, $icon); $font = $t->font($t->fontSize * 1.3, true); $text = \JumPHP\Util\Lang::t((string)$this->props['text']); $tx = $ix + $icon + $t->px(16); $font->draw($r, Canvas::fit($font, $text, $this->w - $t->px(80)), $tx, $this->y + ($this->h - $font->height()) / 2, 1, '#ffffff'); if ($this->props['detail'] !== '') { $small = $t->font(); $dx = $tx + $font->width($text) + $t->px(12); if ($dx < $this->x + $this->w - $t->px(60)) { $small->draw($r, Canvas::fit($small, (string)$this->props['detail'], $this->x + $this->w - $dx - $t->px(16)), $dx, $this->y + ($this->h - $small->height()) / 2 + $t->px(1), 1, '#b9cbe6'); } } }}