diff options
| -rw-r--r-- | lib/classes/HTMLAttributes.php | 2 | ||||
| -rw-r--r-- | lib/classes/Icon.php | 42 | ||||
| -rw-r--r-- | resources/assets/stylesheets/scss/buttons.scss | 12 | ||||
| -rw-r--r-- | resources/assets/stylesheets/scss/globalsearch.scss | 15 |
4 files changed, 14 insertions, 57 deletions
diff --git a/lib/classes/HTMLAttributes.php b/lib/classes/HTMLAttributes.php index d9500d1..4bba3cc 100644 --- a/lib/classes/HTMLAttributes.php +++ b/lib/classes/HTMLAttributes.php @@ -189,7 +189,7 @@ class HTMLAttributes implements Stringable, ArrayAccess return implode(' ', $result); } - public function __toString() + public function __toString(): string { return $this->asString(); } diff --git a/lib/classes/Icon.php b/lib/classes/Icon.php index 8306181..459043b 100644 --- a/lib/classes/Icon.php +++ b/lib/classes/Icon.php @@ -246,9 +246,7 @@ class Icon implements JsonSerializable if ($force_img_tag || self::isStatic($this->shape)) { return sprintf( '<img %s>', - arrayToHtmlAttributes( - $this->prepareHTMLAttributes($size, $view_attributes) - ) + $this->prepareHTMLAttributes($size, $view_attributes) ); } @@ -308,36 +306,17 @@ class Icon implements JsonSerializable * into the rendered output * @return String containing the html representation for the icon. */ - public function asInput($size = self::SIZE_DEFAULT, $view_attributes = [], $without_label = false) + public function asInput($size = self::SIZE_DEFAULT, $view_attributes = []) { if (is_array($size)) { [$view_attributes, $size] = [$size, self::SIZE_DEFAULT]; } - $view_attributes['tabindex'] ??= '0'; - $view_attributes['role'] ??= 'button'; + $attributes = $this->prepareHTMLAttributes(false, $view_attributes); + $attributes['class'] = 'as-link'; + unset($attributes['src']); - $text = isset($view_attributes['text']) ? htmlReady($view_attributes['text']) : ''; - - $svgContent = $this->asImg($size, $view_attributes); - - if ($without_label) { - return sprintf( - '<input class="input-hidden" type="submit" hidden %s>%s', - arrayToHtmlAttributes($this->prepareHTMLAttributes($size, $view_attributes)), - $svgContent, - ); - } - - return sprintf( - '<label class="icon-button undecorated"> - <input class="input-hidden" type="submit" hidden %s> - %s%s - </label>', - arrayToHtmlAttributes($this->prepareHTMLAttributes($size, $view_attributes)), - $svgContent, - $text - ); + return sprintf('<button %s>%s</button>', $attributes, $this->asImg($size)); } /** @@ -415,11 +394,10 @@ class Icon implements JsonSerializable * Prepares the html attributes for use assembling HTML attributes * from given shape, role, size, semantic and view attributes * - * @param int $size Size of the icon - * @param array $attributes Additional attributes - * @return Array containing the merged attributes + * @param int|false $size Size of the icon + * @param array $attributes Additional attributes */ - private function prepareHTMLAttributes($size, array $attributes) + private function prepareHTMLAttributes($size, array $attributes): HTMLAttributes { $html_attributes = HTMLAttributes::merge($this->attributes, $attributes); @@ -448,7 +426,7 @@ class Icon implements JsonSerializable $html_attributes['class'] = 'icon-shape-' . $this->shapeToPath($this->shape); } - return $html_attributes->getAttributes(); + return $html_attributes; } /** diff --git a/resources/assets/stylesheets/scss/buttons.scss b/resources/assets/stylesheets/scss/buttons.scss index 352d9b3..7510390 100644 --- a/resources/assets/stylesheets/scss/buttons.scss +++ b/resources/assets/stylesheets/scss/buttons.scss @@ -153,18 +153,6 @@ button, @include button-base; } -label { - &.undecorated.icon-button { - cursor: pointer; - .input-hidden { - display: none; - } - svg { - vertical-align: middle; - } - } -} - .btn-icon { all: unset; cursor: pointer; diff --git a/resources/assets/stylesheets/scss/globalsearch.scss b/resources/assets/stylesheets/scss/globalsearch.scss index 7671b3d..c9f6902 100644 --- a/resources/assets/stylesheets/scss/globalsearch.scss +++ b/resources/assets/stylesheets/scss/globalsearch.scss @@ -3,7 +3,6 @@ } #globalsearch-searchbar { display: flex; - align-items: center; border: thin solid var(--color--header-inverted); border-radius: var(--border-radius-search); background-color: var(--color--brand-primary); @@ -25,8 +24,9 @@ display: none; } - .icon-button { + > button.as-link { margin-left: 4px; + margin-top: 1px; // The box and input are 22px, the icon 20px = 1px top margin color: var(--color--font-inverted); } @@ -35,7 +35,6 @@ border: none; outline: none; margin-right: 5px; - vertical-align: middle; color: var(--color--font-inverted); background-color: var(--color--brand-primary); min-width: 0; @@ -45,14 +44,6 @@ } } - input[type=image] { - cursor: pointer; - border: none; - background: none; - padding: 0; - margin: 0 5px; - } - // Hint toggle text #globalsearch-togglehints { font-size: $font-size-small; @@ -89,7 +80,7 @@ color: var(--text-color); visibility: hidden; opacity: 0; - transition: opacity var(--transition-duration) ease; + transition: opacity var(--transition-duration) ease; max-height: 90vh; overflow: hidden; padding: 10px 5px; |