Skip to content
Snippets Groups Projects
Commit 5d5aee37 authored by David Galeano's avatar David Galeano Committed by Alvaro Hurtado
Browse files

Issue #3464415 by gxleano: Add Gin and Claro libraries and improve UX on Iconify Icons widget

parent 69307a0c
No related branches found
No related tags found
1 merge request!16Issue #3464415 by gxleano: Add Gin and Claro libraries and improve UX on Iconify Icons widget
Pipeline #249935 passed with warnings
......@@ -16,3 +16,4 @@ gxleano
Hurtado
alvar
hurtad
autocompleteselect
.iconify-icons-preview {
width: 2.5rem;
height: 2.5rem;
}
.iconify-icons-preview svg {
height: 30px;
}
......@@ -23,7 +23,6 @@
.iconify-icons-wrapper {
display: flex;
flex-wrap: nowrap;
align-items: center;
}
.iconify-icons-wrapper label {
......@@ -34,6 +33,16 @@
margin-left: -3.5rem;
}
.iconify-icons-wrapper .form-item {
width: 100%;
margin: unset;
}
.iconify-icons-wrapper .form-item > div,
.iconify-icons-wrapper .form-item > div input {
width: 100%;
}
/* Claro and default */
.iconify-icons-preview {
display: flex;
......@@ -42,7 +51,6 @@
width: 3rem;
height: 3rem;
margin-right: 0.5rem;
margin-bottom: 0;
border: 1px solid #d3d4d987;
border-radius: 10px;
background-color: var(--color-gray-050);
......@@ -87,7 +95,7 @@ img.iconify-icons-ckeditor {
}
ul.ui-autocomplete:has(.iconify-result) {
height: 27%;
overflow: hidden;
overflow-y: scroll;
height: 27%;
}
default:
version: 1.0.1
js:
js/iconify_icons.js: {}
css:
component:
css/iconify_icons.css: {}
gin:
css:
component:
css/gin.css: {}
iconify_icons.admin:
version: 1.0.1
css:
component:
css/iconify_icons.admin.css: { }
......
......@@ -51,5 +51,17 @@ function iconify_icons_entity_view(array &$build, EntityInterface $entity, Entit
if ($entity->hasField('body') && $entity->get('body')
->value !== NULL && str_contains($entity->get('body')->value, 'iconify-icons-ckeditor')) {
$build['#attached']['library'][] = 'iconify_icons/default';
if (_iconify_icons_is_gin_theme_active()) {
$build['#attached']['library'][] = 'iconify_icons/gin';
}
}
}
/**
* Determines whether the active theme is Gin, or a sub-theme of Gin.
*/
function _iconify_icons_is_gin_theme_active(): bool {
$theme = Drupal::getContainer()->get('theme.manager')->getActiveTheme();
return $theme->getName() === 'gin' ||
isset($theme->getBaseThemeExtensions()['gin']);
}
......@@ -60,11 +60,16 @@ class IconifyIcons extends Textfield {
* The form element.
*/
public static function processIconifyIcons(array &$element, FormStateInterface $form_state, array &$complete_form): array {
$element['#attached']['library'] = 'iconify_icons/default';
$element['#attached']['library'][] = 'iconify_icons/default';
if (_iconify_icons_is_gin_theme_active()) {
$element['#attached']['library'][] = 'iconify_icons/gin';
}
if (!isset($element['#attributes']['class'])) {
$element['#attributes']['class'] = [];
}
$element['#attributes']['class'][] = 'iconify-icons-form-element';
$element['#attributes']['class'][] = 'iconify-icons';
$element['#description'] = t('Name of the Icon. See @iconsLink for valid icon names, or begin typing for an autocomplete list.', [
......
......@@ -159,9 +159,14 @@ class IconifyIconWidget extends WidgetBase {
$icon_svg = $this->iconify->generateSvgIcon($icon_collection, $icon_name, $settings);
}
$element['icon'] = [
'#type' => 'iconify_icons',
$element['iconify_icons'] = [
'#type' => 'details',
'#title' => $cardinality === 1 ? $this->fieldDefinition->getLabel() : $this->t('Icon Name'),
'#open' => TRUE,
];
$element['iconify_icons']['icon'] = [
'#type' => 'iconify_icons',
'#default_value' => $iconify_icon->get('icon')->getValue(),
'#required' => $element['#required'],
'#size' => 50,
......@@ -181,12 +186,12 @@ class IconifyIconWidget extends WidgetBase {
],
];
$element['settings'] = [
$element['iconify_icons']['settings'] = [
'#type' => 'details',
'#title' => $this->t('Iconify icon settings'),
'#title' => $this->t('Advanced settings'),
];
$element['settings']['width'] = [
$element['iconify_icons']['settings']['width'] = [
'#type' => 'number',
'#title' => $this->t('Width'),
'#description' => $this->t('Icon dimensions in pixels. If only one dimension is specified, such as height, other dimension will be automatically set to match it.'),
......@@ -198,7 +203,7 @@ class IconifyIconWidget extends WidgetBase {
'#default_value' => $settings['width'] ?? 50,
];
$element['settings']['height'] = [
$element['iconify_icons']['settings']['height'] = [
'#type' => 'number',
'#title' => $this->t('Height'),
'#description' => $this->t('Icon dimensions in pixels. If only one dimension is specified, such as height, other dimension will be automatically set to match it.'),
......@@ -210,14 +215,14 @@ class IconifyIconWidget extends WidgetBase {
'#default_value' => $settings['height'] ?? 50,
];
$element['settings']['color'] = [
$element['iconify_icons']['settings']['color'] = [
'#type' => 'color',
'#title' => $this->t('Color'),
'#description' => $this->t('Icon color. Sets color for monotone icons.'),
'#default_value' => $settings['color'] ?? '',
];
$element['settings']['flip'] = [
$element['iconify_icons']['settings']['flip'] = [
'#type' => 'select',
'#title' => $this->t('Flip'),
'#empty_option' => $this->t('- None -'),
......@@ -229,7 +234,7 @@ class IconifyIconWidget extends WidgetBase {
'#default_value' => $settings['flip'] ?? '',
];
$element['settings']['rotate'] = [
$element['iconify_icons']['settings']['rotate'] = [
'#type' => 'select',
'#title' => $this->t('Rotate'),
'#empty_option' => $this->t('- None -'),
......@@ -242,7 +247,7 @@ class IconifyIconWidget extends WidgetBase {
'#default_value' => $settings['rotate'] ?? '',
];
$element['settings']['link_url'] = [
$element['iconify_icons']['settings']['link_url'] = [
'#type' => 'textfield',
'#title' => $this->t('URL'),
'#description' => $this->t('The URL to which the user should be redirected. This can be an internal URL like /node/1234, an external URL like @url, or an anchor like #main-content.', ['@url' => 'http://example.com']),
......@@ -250,7 +255,7 @@ class IconifyIconWidget extends WidgetBase {
'#pattern' => '^(https?:\/\/[^\s]+|www\.[^\s]+|\/[^\s]+|#[a-zA-Z0-9_-]+)$',
];
$element['settings']['link_text'] = [
$element['iconify_icons']['settings']['link_text'] = [
'#type' => 'textfield',
'#title' => $this->t('Link Text'),
'#description' => $this->t('It will show a text close to the icon.'),
......@@ -266,6 +271,7 @@ class IconifyIconWidget extends WidgetBase {
public function massageFormValues(array $values, array $form, FormStateInterface $form_state) {
$collection = $this->getSetting('collections');
foreach ($values as $delta => &$item) {
$item = $item['iconify_icons'];
$item['delta'] = $delta;
$item['selected_collection'] = $collection;
$item['settings'] = serialize(array_filter($item['settings']));
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment