[ENHANCEMENT]: New layout for dashboard for J4/5 #1134

New Issue

Open

opened 2024-05-22 22:41:14 +00:00 by Tom van der Laan · 0 comments

Tom van der Laan commented

2024-05-22 22:41:14 +00:00

Member

Enhancement Details

Hi,

Here is the whole override to display the icons with the current dataset.

One issues is; with current dataset there is no link between an object that is a category, or an add button. So you see in my code i had to jump through some loops to fix that but you can just ignore that. Also i created an array that adds icons that math the legacy images as best as possible.

<?php
/**
 * @package    Joomla.Component.Builder
 *
 * @created    30th April, 2015
 * @author     Llewellyn van der Merwe <https://dev.vdm.io>
 * @git        Joomla Component Builder <https://git.vdm.dev/joomla/Component-Builder>
 * @copyright  Copyright (C) 2015 Vast Development Method. All rights reserved.
 * @license    GNU General Public License version 2 or later; see LICENSE.txt
 */

use Joomla\CMS\Language\Text;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Factory;

defined('_JEXEC') or die;
// No direct access to this file

$app = Factory::getApplication();
$legacy = $app->input->get('legacy', false, 'bool');

// There are specific quickicon JS code available but in our case these are not needed. I believe they are only needed when you have an ajax action linked to the button (something the core quickicon supports)
//$wa = $app->getDocument()->getWebAssetManager();
//$wa->useScript('core');
//$wa->registerAndUseScript('mod_quickicon', 'mod_quickicon/quickicon.min.js', ['relative' => true, 'version' => 'auto'], ['type' => 'module']);
//$wa->registerAndUseScript('mod_quickicon-es5', 'mod_quickicon/quickicon-es5.min.js', ['relative' => true, 'version' => 'auto'], ['nomodule' => true, 'defer' => true]);

// THIS IS AN ARRAY WITH DATA THAT IS NEEDED TO RENDER THE NEW ICONS
$buttons = array();
$buttons['compiler'] = array('active'=>false,'icon'=>'fas fa-cogs','add'=>false);
$buttons['joomla_components'] = array('active'=>false,'icon'=>'fas fa-toolbox','add'=>true);
$buttons['joomla_modules'] = array('active'=>false,'icon'=>'fas fa-puzzle-piece','add'=>true);
$buttons['joomla_plugins'] = array('active'=>false,'icon'=>'fas fa-plug','add'=>true);
$buttons['powers'] = array('active'=>false,'icon'=>'fas fa-bolt','add'=>false);
$buttons['search'] = array('active'=>false,'icon'=>'fas fa-microscope','add'=>false);
$buttons['importjcbpackages'] = array('active'=>false,'icon'=>'fas fa-file-import', 'add'=>false);
$buttons['admin_views'] = array('active'=>false,'icon'=>'fas fa-laptop','add'=>true);
$buttons['custom_admin_views'] = array('active'=>false,'icon'=>'fas fa-laptop-code','add'=>true);
$buttons['site_views'] = array('active'=>false,'icon'=>'fas fa-couch','add'=>true);
$buttons['templates'] = array('active'=>false,'icon'=>'fas fa-pencil-ruler','add'=>true);
$buttons['layouts'] = array('active'=>false,'icon'=>'fas fa-drafting-compass','add'=>true);
$buttons['dynamic_gets'] = array('active'=>false,'icon'=>'fas fa-project-diagram','add'=>true);
$buttons['custom_codes'] = array('active'=>false,'icon'=>'fas fa-file-code','add'=>true);
$buttons['placeholders'] = array('active'=>false,'icon'=>'fas fa-hashtag','add'=>true);
$buttons['libraries'] = array('active'=>false,'icon'=>'fas fa-dna','add'=>false);
$buttons['snippets'] = array('active'=>false,'icon'=>'fas fa-file','add'=>false);
$buttons['get_snippets'] = array('active'=>false,'icon'=>'fas fa-file-download');
$buttons['validation_rules'] = array('active'=>false,'icon'=>'fas fa-shield-alt','add'=>false);
$buttons['fields'] = array('active'=>false,'icon'=>'fas fa-stream','add'=>true);
$buttons['fields_catid'] = array('active'=>false,'icon'=>'fas fa-folder','add'=>false);
$buttons['fieldtypes'] = array('active'=>false,'icon'=>'fas fa-align-justify','add'=>false);
$buttons['fieldtypes_catid'] = array('active'=>false,'icon'=>'fas fa-folder-open','add'=>false);
$buttons['language_translations'] = array('active'=>false,'icon'=>'fas fa-language','add'=>false);
$buttons['languages'] = array('active'=>false,'icon'=>'fas fa-globe','add'=>false);
$buttons['servers'] = array('active'=>false,'icon'=>'fas fa-server','add'=>false);
$buttons['help_documents'] = array('active'=>false,'icon'=>'fas fa-info-circle','add'=>false);
?>


<?php if(isset($this->icons['main']) && is_array($this->icons['main'])) :?>

    <?php
    // THE PARTS BELOW HERE ARE TO RESTRUCTURE THE CURRENT DATA TO BE ABLE TO GENERATE THE ICONS LIKE I WANT THEM
    $iconData = array();

    foreach($this->icons['main'] as $icon)
    {
        $splitAlt = explode('&nbsp;', $icon->alt);

        // check if it is a category type and then add new seperator and glue together again
        // this makes sure this gets set correctly below
        if (in_array('catid',$splitAlt)) {
            $icon->alt = implode("_",$splitAlt);
        }

        // set button to active in array
        $buttoninfo = $buttons[$icon->alt] ?? null;
        if ($buttoninfo) {
            $buttons[$icon->alt]['url'] = $icon->url;
            $buttons[$icon->alt]['name'] = $icon->name;
            $buttons[$icon->alt]['image'] = $icon->image;
            $buttons[$icon->alt]['alt'] = $icon->alt;
            $buttons[$icon->alt]['active'] = true;
            // if the button has add true, we try to build the edit link
            if ($buttons[$icon->alt]['add'] == true) {
                $buttons[$icon->alt]['linkadd'] = rtrim($icon->url, "s") . "&layout=edit";
            }
        }

        // add edit link urls to the buttons array
        // if there is a real link found below, it will override the guessed link above
        if (in_array('add',$splitAlt)) {
            $originalName = $splitAlt[0]. "s";
            $buttons[$originalName]['linkadd'] = $icon->url;
        }
    }
    ?>

<nav class="quick-icons pt-1 pb-3" aria-label="">
    <ul class="nav flex-wrap">
        <?php foreach ($buttons as $button) : ?>
            <?php if ($button['active'] == true) : ?>
                <?php if (!isset($button['linkadd'])) : ?>
                    <li class="quickicon quickicon-single">
                <?php else : ?>
                    <li class="quickicon-group">
                        <ul class="list-unstyled d-flex w-100">
                            <li class="quickicon">
                <?php endif; ?>
                                <a href="<?php echo $button['url']; ?>" class="justify-content-between">
                                    <div class="quickicon-info">
                                        <div class="quickicon-icon">
                                            <?php if ($legacy === true) : ?>
                                                <img alt="<?php echo Text::_($button['alt']); ?>" src="components/com_componentbuilder/assets/images/icons/<?php  echo $button['icon-image']; ?>" style="max-height:100px;">
                                            <?php else: ?>
                                                <div class="<?php echo $button['icon']; ?>" aria-hidden="true"></div>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                    <?php
                                    if (isset($button['name'])) : ?>
                                        <div class="quickicon-name d-flex align-items-center">
                                            <?php
                                            // WHEN BUILDING THE NAME OF THE BUTTON JCB SHOULD NOT ADD <BR> TAGS ANYMORE. WE"RE USING BOOTSTRAP CLASSES TO FIX THE WAY IT LOOKS. FOR NOW WE'RE STRIPPING THE TAGS
                                            echo strip_tags(Text::_($button['name']));
                                            ?>
                                        </div>
                                    <?php endif; ?>
                                </a>
                <?php if (isset($button['linkadd'])) : ?>
                            </li>
                            <li class="quickicon-linkadd j-links-link d-flex">
                                <a class="d-flex" href="<?php echo $button['linkadd']; ?>" title="<?php echo Text::_('Add'); ?>">
                                    <span class="icon-plus" aria-hidden="true"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                <?php else : ?>
                    </li>
                <?php endif; ?>
            <?php endif; ?>
        <?php endforeach; ?>
    </ul>
</nav>
<?php else: ?>
    <div class="alert alert-error"><h4 class="alert-heading"><?php echo Text::_("Permission denied, or not correctly set"); ?></h4><div class="alert-message"><?php echo Text::_("Please notify your System Administrator if result is unexpected."); ?></div></div>
<?php endif; ?>

The layout above is copied from HTMLHelper::(icon.buttons) wich uses ROOT/layouts/joomla/quickicons/icon.php

FontAwesome 6 Free is what is used in J4 and J5.

They have an API: https://docs.fontawesome.com/apis/graphql/objects#release

I think we should detect what version is in use in Joomla and then the API can get the appropriate icon data. This file holds the version data: ROOT/media/vendor/joomla.asset.json

It would be nice to display a dropdown with the icons visible. I've done that before in a J3 JCB Component i built. There i had a database table with fontawesome icon information and a field that would pull the data into a list. A normal input type list does not allow icons in it. But i believe it could be done with the fancy dropdown list feature of Joomla 4/5 choices.js has several options to accomplish this : https://github.com/Choices-js/Choices?tab=readme-ov-file#callbackoncreatetemplates and https://github.com/Choices-js/Choices?tab=readme-ov-file#allowhtml

I believe my implementation relied on the unicode char of fontawesome icon since that was also what was in the db table i created for it.

Which part of the extension will be affected by this enhancement?

Compilation of component

Additional Context

No response

### Enhancement Details Hi, Here is the whole override to display the icons with the current dataset. One issues is; with current dataset there is no link between an object that is a category, or an add button. So you see in my code i had to jump through some loops to fix that but you can just ignore that. Also i created an array that adds icons that math the legacy images as best as possible. ``` <?php /** * @package Joomla.Component.Builder * * @created 30th April, 2015 * @author Llewellyn van der Merwe <https://dev.vdm.io> * @git Joomla Component Builder <https://git.vdm.dev/joomla/Component-Builder> * @copyright Copyright (C) 2015 Vast Development Method. All rights reserved. * @license GNU General Public License version 2 or later; see LICENSE.txt */ use Joomla\CMS\Language\Text; use Joomla\CMS\HTML\HTMLHelper; use Joomla\CMS\Factory; defined('_JEXEC') or die; // No direct access to this file $app = Factory::getApplication(); $legacy = $app->input->get('legacy', false, 'bool'); // There are specific quickicon JS code available but in our case these are not needed. I believe they are only needed when you have an ajax action linked to the button (something the core quickicon supports) //$wa = $app->getDocument()->getWebAssetManager(); //$wa->useScript('core'); //$wa->registerAndUseScript('mod_quickicon', 'mod_quickicon/quickicon.min.js', ['relative' => true, 'version' => 'auto'], ['type' => 'module']); //$wa->registerAndUseScript('mod_quickicon-es5', 'mod_quickicon/quickicon-es5.min.js', ['relative' => true, 'version' => 'auto'], ['nomodule' => true, 'defer' => true]); // THIS IS AN ARRAY WITH DATA THAT IS NEEDED TO RENDER THE NEW ICONS $buttons = array(); $buttons['compiler'] = array('active'=>false,'icon'=>'fas fa-cogs','add'=>false); $buttons['joomla_components'] = array('active'=>false,'icon'=>'fas fa-toolbox','add'=>true); $buttons['joomla_modules'] = array('active'=>false,'icon'=>'fas fa-puzzle-piece','add'=>true); $buttons['joomla_plugins'] = array('active'=>false,'icon'=>'fas fa-plug','add'=>true); $buttons['powers'] = array('active'=>false,'icon'=>'fas fa-bolt','add'=>false); $buttons['search'] = array('active'=>false,'icon'=>'fas fa-microscope','add'=>false); $buttons['importjcbpackages'] = array('active'=>false,'icon'=>'fas fa-file-import', 'add'=>false); $buttons['admin_views'] = array('active'=>false,'icon'=>'fas fa-laptop','add'=>true); $buttons['custom_admin_views'] = array('active'=>false,'icon'=>'fas fa-laptop-code','add'=>true); $buttons['site_views'] = array('active'=>false,'icon'=>'fas fa-couch','add'=>true); $buttons['templates'] = array('active'=>false,'icon'=>'fas fa-pencil-ruler','add'=>true); $buttons['layouts'] = array('active'=>false,'icon'=>'fas fa-drafting-compass','add'=>true); $buttons['dynamic_gets'] = array('active'=>false,'icon'=>'fas fa-project-diagram','add'=>true); $buttons['custom_codes'] = array('active'=>false,'icon'=>'fas fa-file-code','add'=>true); $buttons['placeholders'] = array('active'=>false,'icon'=>'fas fa-hashtag','add'=>true); $buttons['libraries'] = array('active'=>false,'icon'=>'fas fa-dna','add'=>false); $buttons['snippets'] = array('active'=>false,'icon'=>'fas fa-file','add'=>false); $buttons['get_snippets'] = array('active'=>false,'icon'=>'fas fa-file-download'); $buttons['validation_rules'] = array('active'=>false,'icon'=>'fas fa-shield-alt','add'=>false); $buttons['fields'] = array('active'=>false,'icon'=>'fas fa-stream','add'=>true); $buttons['fields_catid'] = array('active'=>false,'icon'=>'fas fa-folder','add'=>false); $buttons['fieldtypes'] = array('active'=>false,'icon'=>'fas fa-align-justify','add'=>false); $buttons['fieldtypes_catid'] = array('active'=>false,'icon'=>'fas fa-folder-open','add'=>false); $buttons['language_translations'] = array('active'=>false,'icon'=>'fas fa-language','add'=>false); $buttons['languages'] = array('active'=>false,'icon'=>'fas fa-globe','add'=>false); $buttons['servers'] = array('active'=>false,'icon'=>'fas fa-server','add'=>false); $buttons['help_documents'] = array('active'=>false,'icon'=>'fas fa-info-circle','add'=>false); ?> <?php if(isset($this->icons['main']) && is_array($this->icons['main'])) :?> <?php // THE PARTS BELOW HERE ARE TO RESTRUCTURE THE CURRENT DATA TO BE ABLE TO GENERATE THE ICONS LIKE I WANT THEM $iconData = array(); foreach($this->icons['main'] as $icon) { $splitAlt = explode(' ', $icon->alt); // check if it is a category type and then add new seperator and glue together again // this makes sure this gets set correctly below if (in_array('catid',$splitAlt)) { $icon->alt = implode("_",$splitAlt); } // set button to active in array $buttoninfo = $buttons[$icon->alt] ?? null; if ($buttoninfo) { $buttons[$icon->alt]['url'] = $icon->url; $buttons[$icon->alt]['name'] = $icon->name; $buttons[$icon->alt]['image'] = $icon->image; $buttons[$icon->alt]['alt'] = $icon->alt; $buttons[$icon->alt]['active'] = true; // if the button has add true, we try to build the edit link if ($buttons[$icon->alt]['add'] == true) { $buttons[$icon->alt]['linkadd'] = rtrim($icon->url, "s") . "&layout=edit"; } } // add edit link urls to the buttons array // if there is a real link found below, it will override the guessed link above if (in_array('add',$splitAlt)) { $originalName = $splitAlt[0]. "s"; $buttons[$originalName]['linkadd'] = $icon->url; } } ?> <nav class="quick-icons pt-1 pb-3" aria-label=""> <ul class="nav flex-wrap"> <?php foreach ($buttons as $button) : ?> <?php if ($button['active'] == true) : ?> <?php if (!isset($button['linkadd'])) : ?> <li class="quickicon quickicon-single"> <?php else : ?> <li class="quickicon-group"> <ul class="list-unstyled d-flex w-100"> <li class="quickicon"> <?php endif; ?> <a href="<?php echo $button['url']; ?>" class="justify-content-between"> <div class="quickicon-info"> <div class="quickicon-icon"> <?php if ($legacy === true) : ?> <img alt="<?php echo Text::_($button['alt']); ?>" src="components/com_componentbuilder/assets/images/icons/<?php echo $button['icon-image']; ?>" style="max-height:100px;"> <?php else: ?> <div class="<?php echo $button['icon']; ?>" aria-hidden="true"></div> <?php endif; ?> </div> </div> <?php if (isset($button['name'])) : ?> <div class="quickicon-name d-flex align-items-center"> <?php // WHEN BUILDING THE NAME OF THE BUTTON JCB SHOULD NOT ADD <BR> TAGS ANYMORE. WE"RE USING BOOTSTRAP CLASSES TO FIX THE WAY IT LOOKS. FOR NOW WE'RE STRIPPING THE TAGS echo strip_tags(Text::_($button['name'])); ?> </div> <?php endif; ?> </a> <?php if (isset($button['linkadd'])) : ?> </li> <li class="quickicon-linkadd j-links-link d-flex"> <a class="d-flex" href="<?php echo $button['linkadd']; ?>" title="<?php echo Text::_('Add'); ?>"> <span class="icon-plus" aria-hidden="true"></span> </a> </li> </ul> </li> <?php else : ?> </li> <?php endif; ?> <?php endif; ?> <?php endforeach; ?> </ul> </nav> <?php else: ?> <div class="alert alert-error"><h4 class="alert-heading"><?php echo Text::_("Permission denied, or not correctly set"); ?></h4><div class="alert-message"><?php echo Text::_("Please notify your System Administrator if result is unexpected."); ?></div></div> <?php endif; ?> ``` The layout above is copied from HTMLHelper::(icon.buttons) wich uses ROOT/layouts/joomla/quickicons/icon.php FontAwesome 6 Free is what is used in J4 and J5. They have an API: https://docs.fontawesome.com/apis/graphql/objects#release I think we should detect what version is in use in Joomla and then the API can get the appropriate icon data. This file holds the version data: ROOT/media/vendor/joomla.asset.json It would be nice to display a dropdown with the icons visible. I've done that before in a J3 JCB Component i built. There i had a database table with fontawesome icon information and a field that would pull the data into a list. A normal input type list does not allow icons in it. But i believe it could be done with the fancy dropdown list feature of Joomla 4/5 choices.js has several options to accomplish this : https://github.com/Choices-js/Choices?tab=readme-ov-file#callbackoncreatetemplates and https://github.com/Choices-js/Choices?tab=readme-ov-file#allowhtml I believe my implementation relied on the unicode char of fontawesome icon since that was also what was in the db table i created for it. ### Which part of the extension will be affected by this enhancement? Compilation of component ### Additional Context _No response_