Skip to content

Commit

Permalink
Use ui-awesome packages.
Browse files Browse the repository at this point in the history
  • Loading branch information
terabytesoftw committed Mar 18, 2024
1 parent 9c170cb commit 37eb71d
Show file tree
Hide file tree
Showing 25 changed files with 360 additions and 441 deletions.
8 changes: 4 additions & 4 deletions composer.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,15 @@
"php": ">=8.1",
"npm-asset/flag-icons": "^7.1",
"npm-asset/fortawesome--fontawesome-free": "^6.5",
"php-forge/awesome-component": "dev-main",
"php-forge/html": "^0.1",
"sjaakp/yii2-icon": "^1.0",
"ui-awesome/html": "^0.1",
"ui-awesome/html-component": "^0.1",
"yii2-extensions/asset-bootstrap5": "^0.1",
"yii2-extensions/bootstrap5": "^0.1",
"yii2-extensions/localeurls": "dev-main",
"yiisoft/config": "^1.4",
"yiisoft/yii2": "^2.0.49 || ^2.2",
"yiisoft/yii2-symfonymailer": "dev-master as 4.0"
"yiisoft/yii2-symfonymailer": "^4.0"
},
"require-dev": {
"codeception/c3": "^2.8",
Expand All @@ -38,7 +38,7 @@
"symfony/process": "^6.3",
"yii2-extensions/debug": "dev-main",
"yii2-extensions/gii": "dev-main",
"yii2-extensions/phpstan": "dev-main"
"yii2-extensions/phpstan": "^0.1"
},
"autoload": {
"psr-4": {
Expand Down
26 changes: 16 additions & 10 deletions config/params-web.php
Original file line number Diff line number Diff line change
Expand Up @@ -28,27 +28,33 @@
'web.language' => 'en-US',
'web.name' => 'Web application basic',
'web.params' => [
'app.languages.labels' => [
'de-DE' => 'German',
'en-US' => 'English',
'es-ES' => 'Spanish',
'fr-FR' => 'French',
'pt-BR' => 'Portuguese',
'ru-RU' => 'Russian',
'zh-CN' => 'Chinese',
'app.localeurls.languages' => [
'de' => 'de-DE',
'en' => 'en-US',
'es' => 'es-ES',
'fr' => 'fr-FR',
'pt' => 'pt-BR',
'ru' => 'ru-RU',
'zh' => 'zh-CN',
],
'app.mailer.sender' => '[email protected]',
'app.mailer.sender.name' => 'Web application basic',
'app.menu.isguest' => [
[
'label' => 'Home',
'link' => ['/site/index'],
'order' => 0,
'category' => 'app.basic',
],
[
'label' => 'About',
'url' => ['/site/about'],
'link' => ['/site/about'],
'order' => 1,
'category' => 'app.basic',
],
[
'label' => 'Contact',
'url' => ['/contact/index'],
'link' => ['/contact/index'],
'order' => 2,
'category' => 'app.basic',
],
Expand Down
1 change: 1 addition & 0 deletions config/web/components.php
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
'app.basic' => [
'class' => PhpMessageSource::class,
'basePath' => '@resource/message',
'sourceLanguage' => 'en',
],
],
],
Expand Down
2 changes: 2 additions & 0 deletions src/Framework/Asset/AppAsset.php
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
namespace App\Framework\Asset;

use Yii2\Asset\BootstrapAsset;
use Yii2\Asset\BootstrapPluginAsset;
use yii\web\AssetBundle;
use yii\web\YiiAsset;

Expand All @@ -21,6 +22,7 @@ final class AppAsset extends AssetBundle

public $depends = [
BootstrapAsset::class,
BootstrapPluginAsset::class,
YiiAsset::class,
];

Expand Down
129 changes: 41 additions & 88 deletions src/Framework/resource/js/toggle-theme.js
Original file line number Diff line number Diff line change
@@ -1,89 +1,42 @@
/*!
* Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
* Copyright 2011-2023 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License.
*/
(() => {
'use strict'

const getStoredTheme = () => localStorage.getItem('theme')
const setStoredTheme = theme => localStorage.setItem('theme', theme)

const getPreferredTheme = () => {
const storedTheme = getStoredTheme()
if (storedTheme) {
return storedTheme
}

return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
}

const setTheme = theme => {
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.setAttribute('data-bs-theme', 'dark')
} else {
document.documentElement.setAttribute('data-bs-theme', theme)
}
}

setTheme(getPreferredTheme())

const showActiveTheme = (theme, focus = false) => {
const themeSwitcher = document.querySelector('#toggle-theme')

if (!themeSwitcher) {
return
}

const themeSwitcherText = document.querySelector('#toggle-theme-text')
const activeThemeIcon = document.querySelector('.theme-icon-active use')
const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')

// Añade las siguientes líneas para mostrar el icono de verificación en el botón activo.
const activeCheckIcon = btnToActive.querySelector('.check');
activeCheckIcon.classList.remove('d-none');

document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
const checkIcon = element.querySelector('.check');
if (element === btnToActive) {
checkIcon.classList.remove('d-none');
} else {
checkIcon.classList.add('d-none');
}
element.classList.remove('active')
element.setAttribute('aria-pressed', 'false')
})

btnToActive.classList.add('active')
btnToActive.setAttribute('aria-pressed', 'true')
activeThemeIcon.setAttribute('href', svgOfActiveBtn)
const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)

if (focus) {
themeSwitcher.focus()
}
}

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
const storedTheme = getStoredTheme()
if (storedTheme !== 'light' && storedTheme !== 'dark') {
setTheme(getPreferredTheme())
}
})

window.addEventListener('DOMContentLoaded', () => {
showActiveTheme(getPreferredTheme())

document.querySelectorAll('[data-bs-theme-value]')
.forEach(toggle => {
toggle.addEventListener('click', () => {
const theme = toggle.getAttribute('data-bs-theme-value')
setStoredTheme(theme)
setTheme(theme)
showActiveTheme(theme, true)
})
})
})
})()
'use strict';

const getStoredTheme = () => localStorage.getItem('theme');
const setStoredTheme = theme => localStorage.setItem('theme', theme);

const setTheme = theme => {
document.documentElement.setAttribute('data-bs-theme', theme);
};

const showActiveTheme = (theme, focus = false) => {
const themeToggle = document.querySelector('#theme-toggle');
const moonIcon = themeToggle.querySelector('#theme-dark-icon');
const sunIcon = themeToggle.querySelector('#theme-light-icon');

if (!themeToggle || !moonIcon || !sunIcon) {
return;
}

if (theme === 'dark') {
moonIcon.classList.remove('d-none');
sunIcon.classList.add('d-none');
} else {
moonIcon.classList.add('d-none');
sunIcon.classList.remove('d-none');
}
};

window.addEventListener('DOMContentLoaded', () => {
const storedTheme = getStoredTheme() || 'auto';
setTheme(storedTheme);
showActiveTheme(storedTheme);

document.getElementById('theme-toggle').addEventListener('click', () => {
const currentTheme = getStoredTheme();
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
setStoredTheme(newTheme);
setTheme(newTheme);
showActiveTheme(newTheme);
});
});
})();
34 changes: 9 additions & 25 deletions src/Framework/resource/layout/component/alert.php
Original file line number Diff line number Diff line change
Expand Up @@ -2,34 +2,18 @@

declare(strict_types=1);

use yii\bootstrap5\Alert;
use UIAwesome\Html\{Component\Alert, Component\Cookbook\BootstrapAlertDismiss, Group\Div};

$alertTypes = [
'danger' => 'alert-danger',
'dark' => 'alert-dark',
'info' => 'alert-info',
'light' => 'alert-light',
'primary' => 'alert-primary',
'secondary' => 'alert-secondary',
'success' => 'alert-success',
'warning' => 'alert-warning',
];
use function in_array;

$session = Yii::$app->getSession();
$flashes = $session->getAllFlashes();
$flashMessages = $session->getAllFlashes();
$html = [];

foreach ($flashes as $type => $message) {
if (isset($alertTypes[$type])) {
/* initialize css class for each alert box */
$options['class'] = $alertTypes[$type];

echo Alert::widget(
[
'body' => $message,
'options' => $options,
]
);

$session->removeFlash($type);
foreach ($flashMessages as $type => $message) {
if (in_array($type, ['danger', 'dark', 'info', 'success', 'warning'], true) === true) {
$html[] = Alert::widget(BootstrapAlertDismiss::definitions($type))->content($message);
}
}

echo Div::widget()->id('alert_dismissing')->content(...$html);
66 changes: 66 additions & 0 deletions src/Framework/resource/layout/component/footer-icons.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<?php

declare(strict_types=1);

use UIAwesome\Html\{Graphic\Svg, Textual\A};

$linkIconDefinitions = [
'class()' => ['d-none d-sm-block d-md-block d-lg-block d-xl-block text-muted hover:text-dark text-decoration-none ms-3'],
'rel()' => ['noopener'],
'target()' => ['_blank'],
];

$svgDefinitions = [
'fill()' => ['currentColor'],
'height()' => ['32'],
];

// Github icon
echo A::widget($linkIconDefinitions)
->class('md:block hidden')
->content(
Svg::widget($svgDefinitions)
->filePath(Yii::getAlias('@npm/fortawesome--fontawesome-free/svgs/brands/github.svg'))
)
->href('https://github.com/yiisoft')
->title('GitHub');

// Slack icon
echo A::widget($linkIconDefinitions)
->class('md:block hidden')
->content(
Svg::widget($svgDefinitions)
->filePath(Yii::getAlias('@npm/fortawesome--fontawesome-free/svgs/brands//slack.svg'))
)
->href(
'https://join.slack.com/t/yii/shared_invite/enQtMzQ4MDExMDcyNTk2LTc0NDQ2ZTZhNjkzZDgwYjE4YjZlNGQxZjFmZDBjZTU3NjViMDE4ZTMxNDRkZjVlNmM1ZTA1ODVmZGUwY2U3NDA'
)
->title('Slack');

// Facebook icon
echo A::widget($linkIconDefinitions)
->class('md:block hidden')
->content(
Svg::widget($svgDefinitions)
->filePath(Yii::getAlias('@npm/fortawesome--fontawesome-free/svgs/brands//facebook.svg'))
)
->href('https://www.facebook.com/groups/yiitalk/')
->title('Facebook');

// Twitter icon
echo A::widget($linkIconDefinitions)
->content(
Svg::widget($svgDefinitions)
->filePath(Yii::getAlias('@npm/fortawesome--fontawesome-free/svgs/brands//twitter.svg'))
)
->href('https://twitter.com/yiiframework')
->title('Twitter');

// Telegram icon
echo A::widget($linkIconDefinitions)
->content(
Svg::widget($svgDefinitions)
->filePath(Yii::getAlias('@npm/fortawesome--fontawesome-free/svgs/brands//telegram.svg'))
)
->href('https://t.me/yii_framework_in_english')
->title('Telegram');
Loading

0 comments on commit 37eb71d

Please sign in to comment.