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 <[email protected]>
kalamu · Mar 27, 2020 · 2f21b1a · 2f21b1a
1 parent faadccd
commit 2f21b1a
Show file tree

Hide file tree

Showing 10 changed files with 91 additions and 43 deletions.
diff --git a/Controller/ElementApiController.php b/Controller/ElementApiController.php
@@ -10,14 +10,21 @@
 use Symfony\Component\Form\Form;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
-
+use Twig\Environment;
 
 /**
  * Controller for the Element API
  */
 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
@@ -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;
     }
-
-}
+}
diff --git 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']
diff --git 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
@@ -30,7 +30,7 @@ $.widget( "kalamu.kalamuDashboardCol", {
         showConfig = $('<a role="button" data-toggle="collapse" href="#'+btnConfig.attr('id')+'" aria-expanded="false" class="btn btn-xs btn-primary"><i class="fa fa-bars"></i></a>');
         this.element.find('.col-config').append(showConfig).append(btnConfig);
 
-        this.element.append('<div class="col-widgets col-md-12"></div>');
+        this.element.append('<div class="col-widgets"></div>');
         if(this.options.widgets){
             $.each(this.options.widgets, $.proxy(function(i, config){
                 widget = $('<div>');

diff --git 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('<div class="modal-dialog modal-lg"><div class="modal-content">\n\
-                            <div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="'+Translator.trans('element.explorer.close', {}, 'kalamu')+'">\n\
-                            <span aria-hidden="true">&times;</span></button><h4 class="modal-title"></h4></div><div class="modal-body">\n\
+                            <div class="modal-header"><h4 class="modal-title"></h4>\n\
+                            <button type="button" class="close" data-dismiss="modal" aria-label="'+ Translator.trans('element.explorer.close', {}, 'kalamu') + '">\n\
+                            <span aria-hidden="true">&times;</span></button></div><div class="modal-body">\n\
                             </div></div></div>');
 
         this.element.on('hide.bs.modal', $.proxy(function(){
@@ -74,21 +75,32 @@ $.widget( "kalamu.kalamuElementExplorer", {
 
         this.element.find('.modal-body')
                 .html("<p>"+Translator.trans('element.explorer.list.category.description', {}, 'kalamu')+"</p>")
-                .append('<div class="panel-group" role="tablist" id="element_selector" aria-multiselectable="true">');
+            .append('<div class="panel-group" role="tablist" id="element_selector" aria-multiselectable="true">');
 
         panelGroup = this.element.find('.modal-body .panel-group');
-        $.each(this.options.elements, $.proxy(function(category, elements){
-            panel = $('<div class="panel">');
-            panel.append('<div class="panel-heading" role="tab" id="cat_heading_'+category+'">\n\
-                        <a class="accordion-toggle accordion-icon link-unstyled collapsed" data-toggle="collapse" data-parent="#element_selector" href="#category_'+category+'" aria-expanded="false" aria-controls="category_'+category+'">\n\
-                        '+Translator.trans('category.'+category, {}, 'kalamu')+'</a></div>');
-            panel.append('<div id="category_'+category+'" class="panel-collapse collapse" role="tabpanel" aria-labelledby="cat_heading_'+category+'">\n\
-                            <div class="panel-body"></div></div>');
+        const getCollapse = (category, elements) => {
+            const trans = Translator.trans('category.'+category, {}, 'kalamu');
+            return `
+                <div class="card">
+                    <div class="card-header" id="cat_heading_${category}">
+                        <h5 class="mb-0">
+                            <button class="btn btn-link" data-toggle="collapse" data-target="#category_${category}" aria-expanded="true" aria-controls="collapseOne">
+                                ${trans}
+                            </button>
+                        </h5>
+                    </div>
+                    <div id="category_${category}" class="collapse" aria-labelledby="cat_heading_${category}" data-parent="#element_selector">
+                        <div class="card-body"></div>
+                    </div>
+                </div>`;
+        };
 
+        $.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,15 +114,15 @@ $.widget( "kalamu.kalamuElementExplorer", {
         this.showElements();
 
         $.each( $(this.options.elements).attr(category), $.proxy(function(name, label){
-            link = $('<a href="#'+name+'"><span class="glyphicons glyphicons-more_windows"></span> '+label+'</a><br />');
+            link = $('<a href="#'+name+'"><i class="fa fa-window-restore"></i> '+label+'</a><br />');
             link.on('click', $.proxy(function(category, e){
                 e.preventDefault();
                 this.showElementInfos($(e.currentTarget).attr('href').substr(1), {}, category);
             }, this.root, this.category));
             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 = $('<a href="#"><i class="fa fa-arrow-left"></i> '+Translator.trans('element.explorer.list.link', {}, 'kalamu')+'</a>');
         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('<span class="text-muted pull-right">'+Translator.trans('element.explorer.category', {}, 'kalamu')+' : <strong>'+Translator.trans('category.'+category, {}, 'kalamu')+'</strong></span>\n\
+        this.element.find('.modal-body').append('<span class="text-muted float-right">'
+            +Translator.trans('element.explorer.category', {}, 'kalamu')+' : <strong>'
+            +Translator.trans('category.'+category, {}, 'kalamu')+'</strong></span>\n\
             <h1>'+infos.title+'</h1>\n\
             <div class="container-fluid">\n\
             <div class="row"><div class="col-md-12 elementDescription">'+infos.description+'</div></div>\n\
-            <div class="row"><div class="col-md-12 elementForm modal-footer">'+infos.form+'</div></div>\n\
+            <div class="row"><div class="col-md-12 elementForm ">'+infos.form+'</div></div>\n\
             </div>');
         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
@@ -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('<div class="modal-dialog"><div class="modal-content">\n\
-                            <div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="'+Translator.trans('responsive_config.close', {}, 'kalamu')+'">\n\
-                            <span aria-hidden="true">&times;</span></button><h4 class="modal-title"></h4></div><div class="modal-body">\n\
+                            <div class="modal-header"><h4 class="modal-title"></h4>\n\
+                            <button type="button" class="close" data-dismiss="modal" \n\
+                                aria-label="'+Translator.trans('responsive_config.close',{},'kalamu')+'">\n\
+                            <span aria-hidden="true">&times;</span></button></div><div class="modal-body">\n\
                             </div></div></div>');
 
         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
@@ -30,7 +30,7 @@ $.widget( "kalamu.kalamuDashboardRow", {
                 .append('<a class="btn btn-xs btn-primary" role="button" data-toggle="collapse" href="#'+btnConfig.attr('id')+'" aria-expanded="false"><i class="fa fa-bars btn-fw"></i></a>')
                 .append( btnConfig );
         this.element.append(config_row);
-        this.element.append('<div class="row-cols"></div>');
+        this.element.append('<div class="row-cols  w-100"></div>');
         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
@@ -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( $('<div class="col-md-12 no-padding">').append(datas.content) );
+                    this.element.append( $('<div>').append(datas.content) );
                 }else if(datas.error){
                     this.element.append('<div class="alert alert-danger">'+datas.error+'</div>');
                 }

diff --git 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": {