From 2f21b1a9071ea4a88fffdb18cb7a836dc567da56 Mon Sep 17 00:00:00 2001 From: yowaiOtoko Date: Fri, 27 Mar 2020 14:34:05 +0300 Subject: [PATCH] sf4 upgrade, fix ui to work with bootstrap 4 (#9) * sf4 upgrade, fix ui to work with bootstrap 4 * small css fixes for bootstrap 4 compatibility Co-authored-by: Marc Mauzole --- Controller/ElementApiController.php | 18 ++++++--- Model/AbstractElement.php | 10 ++--- Resources/config/services.yml | 3 ++ Resources/public/css/dashboard.css | 28 ++++++++++--- Resources/public/js/dashboard/col.js | 2 +- Resources/public/js/dashboard/explorer.js | 45 ++++++++++++++------- Resources/public/js/dashboard/responsive.js | 16 ++++---- Resources/public/js/dashboard/row.js | 2 +- Resources/public/js/dashboard/widget.js | 4 +- composer.json | 6 ++- 10 files changed, 91 insertions(+), 43 deletions(-) diff --git a/Controller/ElementApiController.php b/Controller/ElementApiController.php index 591d4ad..ac7693a 100644 --- a/Controller/ElementApiController.php +++ b/Controller/ElementApiController.php @@ -10,7 +10,7 @@ use Symfony\Component\Form\Form; use Symfony\Component\HttpFoundation\Request; use Symfony\Component\HttpFoundation\Response; - +use Twig\Environment; /** * Controller for the Element API @@ -18,6 +18,13 @@ class ElementApiController extends Controller { + protected $templating; + + public function __construct(Environment $templating) + { + $this->templating = $templating; + } + /** * Get the categories * @@ -36,7 +43,7 @@ public function categoriesAction($context, $type){ } } - $datas = $this->renderView('KalamuDashboardBundle:Element:categories.json.twig', + $datas = $this->renderView('@KalamuDashboard/Element/categories.json.twig', ['categories' => $categories]); return $this->createJsonResponse($datas); @@ -68,9 +75,10 @@ public function infoAction(Request $Request, $context, $type, $name){ } if(method_exists($element, 'renderConfigForm')){ - $infos['form'] = $element->renderConfigForm($this->get('templating'), $form); + $infos['form'] = $element->renderConfigForm($this->templating, $form); }else{ - $infos['form'] = $this->renderView('KalamuDashboardBundle:Element:form.html.twig', array('form' => $form->createView(), 'element' => $element)); + $infos['form'] = $this->renderView('@KalamuDashboard/Element/form.html.twig', + array('form' => $form->createView(), 'element' => $element)); } return $this->createJsonResponse(json_encode($infos)); @@ -108,7 +116,7 @@ public function renderAction(Request $Request, $context, $type, $name, $format = } $element->setParameters($params); - $view = $element->render( $this->get("templating"), ('json' == $format) ? 'edit' : 'publish' ); + $view = $element->render( $this->templating, ('json' == $format) ? 'edit' : 'publish' ); if('json' == $format){ return $this->createJsonResponse(json_encode(array('content' => $view))); diff --git a/Model/AbstractElement.php b/Model/AbstractElement.php index e24b3a2..038e4e7 100644 --- a/Model/AbstractElement.php +++ b/Model/AbstractElement.php @@ -2,7 +2,7 @@ namespace Kalamu\DashboardBundle\Model; -use Symfony\Bundle\TwigBundle\TwigEngine; +use Twig\Environment; /** * Abstract class for Elements @@ -32,13 +32,14 @@ abstract public function getDescription(); * Render the element * @return string */ - abstract public function render(TwigEngine $templating); + abstract public function render(Environment $templating); /** * Set parameters * @param array $parameters */ - public function setParameters($parameters){ + public function setParameters($parameters) + { $this->parameters = $parameters; } @@ -55,5 +56,4 @@ public function canReleaseSession() { return false; } - -} \ No newline at end of file +} diff --git a/Resources/config/services.yml b/Resources/config/services.yml index 3f5b9e6..6081a95 100644 --- a/Resources/config/services.yml +++ b/Resources/config/services.yml @@ -8,3 +8,6 @@ services: arguments: ['@service_container', '%kalamu_dashboard.contexts%'] public: true + Kalamu\DashboardBundle\Controller\ElementApiController: + autowire: true + tags: ['controller.service_arguments'] \ No newline at end of file diff --git a/Resources/public/css/dashboard.css b/Resources/public/css/dashboard.css index 21cc70e..e498b68 100644 --- a/Resources/public/css/dashboard.css +++ b/Resources/public/css/dashboard.css @@ -32,32 +32,46 @@ border-color: #269abc !important; } +.row-config .btn { + padding: 4px 2px 4px 3px; +} +.col-config .btn { + padding: 0px 10px 0px 10px; +} + /** ROW **/ .kalamu-dashboard.editing .kalamu-dashboard-row{ - margin:0; background: #f5f5f5; border: 1px solid #E9E9E9; margin-bottom: 1px; - display: table; + flex-wrap: nowrap; width: 100%; } .kalamu-dashboard.editing .kalamu-dashboard-row .row-config{ width: 25px; - display: table-cell; vertical-align: top; } .kalamu-dashboard.editing .kalamu-dashboard-row .row-cols{ - display: table-cell; + display: flex; vertical-align: top; } .kalamu-dashboard.editing .kalamu-dashboard-row .btn-add-row{ - display: table-cell; width: 25px; } +.btn-add-row{ + padding: 4px 0px 4px 0px; + +} + +.visible-editing-widget .btn, .btn-add-widget{ + padding: 0px 10px 0px 10px; + margin-bottom: 5px; +} + .kalamu-dashboard.editing .kalamu-dashboard-row:hover{ background: #e5e5e5; } @@ -164,6 +178,10 @@ visibility: visible; } +.kalamu-dashboard-widget { + padding-top: 10px; +} + /** SECTION **/ .section-config{ margin: 10px 0; diff --git a/Resources/public/js/dashboard/col.js b/Resources/public/js/dashboard/col.js index 8811297..c341726 100644 --- a/Resources/public/js/dashboard/col.js +++ b/Resources/public/js/dashboard/col.js @@ -30,7 +30,7 @@ $.widget( "kalamu.kalamuDashboardCol", { showConfig = $(''); this.element.find('.col-config').append(showConfig).append(btnConfig); - this.element.append('
'); + this.element.append('
'); if(this.options.widgets){ $.each(this.options.widgets, $.proxy(function(i, config){ widget = $('
'); diff --git a/Resources/public/js/dashboard/explorer.js b/Resources/public/js/dashboard/explorer.js index 82448a9..a40981d 100644 --- a/Resources/public/js/dashboard/explorer.js +++ b/Resources/public/js/dashboard/explorer.js @@ -13,8 +13,9 @@ $.widget( "kalamu.kalamuElementExplorer", { _create: function() { this.element.addClass('kalamu-element-explorer modal fade'); this.element.append('
\n\ -

\n\ +

\n\ +
\n\
'); this.element.on('hide.bs.modal', $.proxy(function(){ @@ -74,21 +75,32 @@ $.widget( "kalamu.kalamuElementExplorer", { this.element.find('.modal-body') .html("

"+Translator.trans('element.explorer.list.category.description', {}, 'kalamu')+"

") - .append('
'); + .append('
'); panelGroup = this.element.find('.modal-body .panel-group'); - $.each(this.options.elements, $.proxy(function(category, elements){ - panel = $('
'); - panel.append(''); - panel.append('
\n\ -
'); + const getCollapse = (category, elements) => { + const trans = Translator.trans('category.'+category, {}, 'kalamu'); + return ` +
+
+
+ +
+
+
+
+
+
`; + }; + $.each(this.options.elements, $.proxy(function(category, elements){ + const panel = getCollapse(category); this.panelGroup.append( panel ); }, {panelGroup: panelGroup})); - this.element.find('.panel').one('show.bs.collapse', $.proxy(function(e){ + this.element.find('.card').one('show.bs.collapse', $.proxy(function(e){ this.slideCategorie($(e.target).attr('id').replace('category_', '')); }, this)); }, @@ -102,7 +114,7 @@ $.widget( "kalamu.kalamuElementExplorer", { this.showElements(); $.each( $(this.options.elements).attr(category), $.proxy(function(name, label){ - link = $(' '+label+'
'); + link = $(' '+label+'
'); link.on('click', $.proxy(function(category, e){ e.preventDefault(); this.showElementInfos($(e.currentTarget).attr('href').substr(1), {}, category); @@ -110,7 +122,7 @@ $.widget( "kalamu.kalamuElementExplorer", { this.panel.append(link); }, { root: this, - panel: this.element.find('#category_'+category+' .panel-body'), + panel: this.element.find('#category_'+category+' .card-body'), category: category })); }, @@ -176,6 +188,7 @@ $.widget( "kalamu.kalamuElementExplorer", { * @returns {undefined} */ _renderElementInfos: function(identifier, infos){ + category = this._findCategory(identifier); backLink = $(' '+Translator.trans('element.explorer.list.link', {}, 'kalamu')+''); backLink.on('click', $.proxy(function(e){ @@ -185,11 +198,13 @@ $.widget( "kalamu.kalamuElementExplorer", { this.element.find('.modal-body').html('').append(backLink); - this.element.find('.modal-body').append(''+Translator.trans('element.explorer.category', {}, 'kalamu')+' : '+Translator.trans('category.'+category, {}, 'kalamu')+'\n\ + this.element.find('.modal-body').append('' + +Translator.trans('element.explorer.category', {}, 'kalamu')+' : ' + +Translator.trans('category.'+category, {}, 'kalamu')+'\n\

'+infos.title+'

\n\
\n\
'+infos.description+'
\n\ -
'+infos.form+'
\n\ +
'+infos.form+'
\n\
'); this.element.find('.modal-body .elementForm form').on('submit', $.proxy(this._validParameters, this, identifier)); }, diff --git a/Resources/public/js/dashboard/responsive.js b/Resources/public/js/dashboard/responsive.js index d5590a6..72a27c9 100644 --- a/Resources/public/js/dashboard/responsive.js +++ b/Resources/public/js/dashboard/responsive.js @@ -6,11 +6,11 @@ $.widget( "kalamu.kalamuResponsiveConfig", { _create: function() { this.options.datas = $.extend({ - visible: ['lg', 'md', 'sm', 'xs'], - size: {'lg':12, 'md':12, 'sm':12, 'xs':12}, - class: '', - id: '' - }, this.options.datas); + visible: ['lg', 'md', 'sm', 'xs'], + size: {'lg':12, 'md':12, 'sm':12, 'xs':12}, + class: '', + id: '' + }, this.options.datas); if(this.options.editable === null){ this.options.editable = ['visible', 'size', 'class', 'id']; @@ -25,8 +25,10 @@ $.widget( "kalamu.kalamuResponsiveConfig", { this.element.addClass('kalamu-responsive-config modal fade'); this.element.append('
\n\ -

\n\ +

\n\ +
\n\
'); this.element.find('.modal-title').text(Translator.trans('responsive_config.title', {}, 'kalamu')); diff --git a/Resources/public/js/dashboard/row.js b/Resources/public/js/dashboard/row.js index 7fbcfc8..bb338f2 100644 --- a/Resources/public/js/dashboard/row.js +++ b/Resources/public/js/dashboard/row.js @@ -30,7 +30,7 @@ $.widget( "kalamu.kalamuDashboardRow", { .append('') .append( btnConfig ); this.element.append(config_row); - this.element.append('
'); + this.element.append('
'); this.element.append(this.options.addCol); this._on( delete_link, { click: this._delete }); diff --git a/Resources/public/js/dashboard/widget.js b/Resources/public/js/dashboard/widget.js index 163b106..89c71bb 100644 --- a/Resources/public/js/dashboard/widget.js +++ b/Resources/public/js/dashboard/widget.js @@ -8,7 +8,7 @@ $.widget( "kalamu.kalamuDashboardWidget", { params: null }, _create: function() { - this.element.addClass('kalamu-dashboard-widget col-md-12'); + this.element.addClass('kalamu-dashboard-widget'); this.refresh(); }, @@ -34,7 +34,7 @@ $.widget( "kalamu.kalamuDashboardWidget", { context: this, success: function(datas){ if(datas.content){ - this.element.append( $('
').append(datas.content) ); + this.element.append( $('
').append(datas.content) ); }else if(datas.error){ this.element.append('
'+datas.error+'
'); } diff --git a/composer.json b/composer.json index 4eb35c8..878e123 100644 --- a/composer.json +++ b/composer.json @@ -17,12 +17,14 @@ ], "require": { "php": "^7.0", - "symfony/symfony": "^2.6||^3.0", + "symfony/framework-bundle": "^3.0||^4.0", "willdurand/js-translation-bundle": "^2.5", "phpunit/phpunit": "^6.4" }, "autoload": { - "psr-4": { "Kalamu\\DashboardBundle\\": "" } + "psr-4": { + "Kalamu\\DashboardBundle\\": "" + } }, "extra": { "branch-alias": {