// Module page: UI improvement

- target=_blank on addons links - update bootstrap cols - add feedback on addons login - add link to addons logout
marekhanus · Feb 17, 2016 · c6a4d5e · c6a4d5e
1 parent 0ef47c1
commit c6a4d5e
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 82 deletions.
diff --git a/admin-dev/themes/default/js/bundle/module/module.js b/admin-dev/themes/default/js/bundle/module/module.js
@@ -37,6 +37,7 @@ var AdminModule = function () {
     this.totalResultSelector = '.module-search-result-wording';
     this.addonsSearchSelector = '.module-addons-search';
     this.addonsSearchLinkSelector = '.module-addons-search-link';
+    this.addonsLoginButtonSelector = '#addons_login_btn';
     this.categoryResetBtnSelector = '.module-category-reset';
     this.moduleInstallBtnSelector = 'input.module-install-btn';
     this.moduleInstallLoaderSelector = '.module-install-loader';
@@ -117,7 +118,11 @@ var AdminModule = function () {
                 method: 'POST',
                 url: $(this).attr('action'),
                 dataType: 'json',
-                data: $(this).serialize()
+                data: $(this).serialize(),
+                beforeSend: function() {
+                    $(_that.addonsLoginButtonSelector).show()
+                    $("button.btn[type='submit']", _that.addonsConnectForm).hide();
+                }
             }).done(function (response) {
                 var responseCode = response.success;
                 var responseMsg = response.message;
@@ -126,15 +131,19 @@ var AdminModule = function () {
                     location.reload();
                 } else {
                     $.growl.error({message: responseMsg});
+                    $(_that.addonsLoginButtonSelector).hide();
+                    $("button.btn[type='submit']", _that.addonsConnectForm).fadeIn();
                 }
             });
         });
     };
 
     //@TODO: JS Doc
     this.initAddModuleAction = function () {
-        $(this.addonsConnectModalBtnSelector).attr('data-toggle', 'modal');
-        $(this.addonsConnectModalBtnSelector).attr('data-target', this.addonsConnectModalSelector);
+        if ($(this.addonsConnectModalBtnSelector).attr('href') == '#') {
+            $(this.addonsConnectModalBtnSelector).attr('data-toggle', 'modal');
+            $(this.addonsConnectModalBtnSelector).attr('data-target', this.addonsConnectModalSelector);
+        }
     };
 
   //@TODO: JS Doc

diff --git a/src/PrestaShopBundle/Controller/Admin/AddonsController.php b/src/PrestaShopBundle/Controller/Admin/AddonsController.php
@@ -8,6 +8,7 @@
 use Symfony\Component\HttpFoundation\Cookie;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\HttpFoundation\RedirectResponse;
 
 class AddonsController extends Controller
 {
@@ -55,19 +56,29 @@ public function loginAction(Request $request)
      * @param  Request $request
      * @return Response
      */
-    public function logoutAction()
+    public function logoutAction(Request $request)
     {
         $modulesProvider = $this->container->get('prestashop.core.admin.data_provider.module_interface');
         $modulesProvider->clearCatalogCache();
 
-        $response = new JsonResponse();
-        $response->headers->clearCookie('username_addons');
-        $response->headers->clearCookie('password_addons');
-        $response->headers->clearCookie('is_contributor');
-        $response->setData([
+        if ($request->isXmlHttpRequest()) {
+            $response = new JsonResponse();
+            $response->setData([
                 'success' => 1,
                 'message' => ''
             ]);
+        } else {
+            if ($request->server->get('HTTP_REFERER')) {
+                $url = $request->server->get('HTTP_REFERER');
+            } else {
+                $url = $this->redirect($this->generateUrl('admin_module_catalog'));
+            }
+            $response = new RedirectResponse($url);
+        }
+        $response->headers->clearCookie('username_addons');
+        $response->headers->clearCookie('password_addons');
+        $response->headers->clearCookie('is_contributor');
+
         return $response;
     }
 }
diff --git a/src/PrestaShopBundle/Controller/Admin/ModuleController.php b/src/PrestaShopBundle/Controller/Admin/ModuleController.php
@@ -21,28 +21,6 @@ public function catalogAction(Request $request, $category = null, $keyword = nul
         $modulesProvider = $this->container->get('prestashop.core.admin.data_provider.module_interface');
         $translator = $this->container->get('prestashop.adapter.translator');
 
-        // toolbarButtons
-        $toolbarButtons = array();
-        $toolbarButtons['manage_module'] = array(
-            'href' => $this->generateUrl('admin_module_manage'),
-            'desc' => $translator->trans('[TEMP] Manage my modules', array(), get_class($this)),
-            'icon' => 'icon-share-square',
-            'help' => $translator->trans('Manage', array(), get_class($this)),
-        );
-        $toolbarButtons['notifications_module'] = array(
-            'href' => $this->generateUrl('admin_module_notification'),
-            'desc' => $translator->trans('[TEMP] Module notifications', array(), get_class($this)),
-            'icon' => 'icon-share-square',
-            'help' => $translator->trans('Notifications', array(), get_class($this)),
-        );
-        $toolbarButtons['add_module'] = array(
-            'href' => '#',
-            'desc' => $translator->trans('Add a module', array(), get_class($this)),
-            'icon' => 'process-icon-new',
-            'help' => $translator->trans('Add a module', array(), get_class($this)),
-        );
-        $toolbarButtons['addons_connect'] = $this->getAddonsConnectToolbar();
-
         $filter = [];
         if ($keyword !== null) {
             $filter['search'] = $keyword;
@@ -62,7 +40,7 @@ public function catalogAction(Request $request, $category = null, $keyword = nul
         }
 
         return $this->render('PrestaShopBundle:Admin/Module:catalog.html.twig', array(
-                'layoutHeaderToolbarBtn' => $toolbarButtons,
+                'layoutHeaderToolbarBtn' => $this->getToolbarButtons(),
                 'layoutTitle' => $translator->trans('Modules & Services', array(), 'AdminModules'),
                 'modules' => $modulesProvider->generateAddonsUrls($this->createCatalogModuleList($products)),
                 'topMenuData' => $topMenuData,
@@ -75,27 +53,6 @@ public function manageAction(Request $request, $category = null, $keyword = null
     {
         $translator = $this->container->get('prestashop.adapter.translator');
         $modulesProvider = $this->container->get('prestashop.core.admin.data_provider.module_interface');
-        // toolbarButtons
-        $toolbarButtons = array();
-        $toolbarButtons['catalog_module'] = array(
-            'href' => $this->generateUrl('admin_module_catalog'),
-            'desc' => $translator->trans('[TEMP] Modules catalog', array(), get_class($this)),
-            'icon' => 'icon-share-square',
-            'help' => $translator->trans('Catalog', array(), get_class($this)),
-        );
-        $toolbarButtons['notifications_module'] = array(
-            'href' => $this->generateUrl('admin_module_notification'),
-            'desc' => $translator->trans('[TEMP] Module notifications', array(), get_class($this)),
-            'icon' => 'icon-share-square',
-            'help' => $translator->trans('Notifications', array(), get_class($this)),
-        );
-        $toolbarButtons['add_module'] = array(
-            'href' => $this->generateUrl('admin_module_import'),
-            'desc' => $translator->trans('Add a module', array(), get_class($this)),
-            'icon' => 'process-icon-new',
-            'help' => $translator->trans('Add a module', array(), get_class($this))
-        );
-        $toolbarButtons['addons_connect'] = $this->getAddonsConnectToolbar();
 
         $filter = [];
         if ($keyword !== null) {
@@ -126,7 +83,7 @@ public function manageAction(Request $request, $category = null, $keyword = null
         }
 
         return $this->render('PrestaShopBundle:Admin/Module:manage.html.twig', array(
-                'layoutHeaderToolbarBtn' => $toolbarButtons,
+                'layoutHeaderToolbarBtn' => $this->getToolbarButtons(),
                 'layoutTitle' => $translator->trans('Manage my modules', array(), 'AdminModules'),
                 'modules' => $products,
                 'topMenuData' => $this->getTopMenuData('manage'),
@@ -191,28 +148,6 @@ public function notificationAction(Request $request)
         $translator = $this->container->get('prestashop.adapter.translator');
         $modulesProvider = $this->container->get('prestashop.core.admin.data_provider.module_interface');
 
-        // toolbarButtons
-        $toolbarButtons = array();
-        $toolbarButtons['catalog_module'] = array(
-            'href' => $this->generateUrl('admin_module_catalog'),
-            'desc' => $translator->trans('[TEMP] Modules catalog', array(), get_class($this)),
-            'icon' => 'icon-share-square',
-            'help' => $translator->trans('Catalog', array(), get_class($this)),
-        );
-        $toolbarButtons['manage_module'] = array(
-            'href' => $this->generateUrl('admin_module_manage'),
-            'desc' => $translator->trans('[TEMP] Manage my modules', array(), get_class($this)),
-            'icon' => 'icon-share-square',
-            'help' => $translator->trans('Manage', array(), get_class($this)),
-        );
-        $toolbarButtons['add_module'] = array(
-            'href' => $this->generateUrl('admin_module_import'),
-            'desc' => $translator->trans('Add a module', array(), get_class($this)),
-            'icon' => 'process-icon-new',
-            'help' => $translator->trans('Add a module', array(), get_class($this))
-        );
-        $toolbarButtons['addons_connect'] = $this->getAddonsConnectToolbar();
-
         $products = new \stdClass;
         foreach (['to_configure', 'to_update', 'to_install'] as $subpart) {
             $products->{$subpart} = [];
@@ -250,7 +185,7 @@ public function notificationAction(Request $request)
         }
 
         return $this->render('PrestaShopBundle:Admin/Module:notifications.html.twig', array(
-                'layoutHeaderToolbarBtn' => $toolbarButtons,
+                'layoutHeaderToolbarBtn' => $this->getToolbarButtons(),
                 'layoutTitle' => $translator->trans('Module notifications', array(), 'AdminModules'),
                 'modules' => $products,
                 'requireAddonsSearch' => false,
@@ -341,6 +276,41 @@ final private function createCatalogModuleList(array $moduleFullList)
         return $moduleFullList;
     }
 
+    protected function getToolbarButtons()
+    {
+        $translator = $this->container->get('prestashop.adapter.translator');
+
+        // toolbarButtons
+        $toolbarButtons = array();
+        $toolbarButtons['catalog_module'] = array(
+            'href' => $this->generateUrl('admin_module_catalog'),
+            'desc' => $translator->trans('[TEMP] Modules catalog', array(), get_class($this)),
+            'icon' => 'icon-share-square',
+            'help' => $translator->trans('Catalog', array(), get_class($this)),
+        );
+        $toolbarButtons['manage_module'] = array(
+            'href' => $this->generateUrl('admin_module_manage'),
+            'desc' => $translator->trans('[TEMP] Manage my modules', array(), get_class($this)),
+            'icon' => 'icon-share-square',
+            'help' => $translator->trans('Manage', array(), get_class($this)),
+        );
+        $toolbarButtons['notifications_module'] = array(
+            'href' => $this->generateUrl('admin_module_notification'),
+            'desc' => $translator->trans('[TEMP] Module notifications', array(), get_class($this)),
+            'icon' => 'icon-share-square',
+            'help' => $translator->trans('Notifications', array(), get_class($this)),
+        );
+        $toolbarButtons['add_module'] = array(
+            'href' => '#',
+            'desc' => $translator->trans('Add a module', array(), get_class($this)),
+            'icon' => 'process-icon-new',
+            'help' => $translator->trans('Add a module', array(), get_class($this)),
+        );
+        $toolbarButtons['addons_connect'] = $this->getAddonsConnectToolbar();
+
+        return $toolbarButtons;
+    }
+
     final private function getTopMenuData($source = 'catalog', $activeMenu = null)
     {
         $modulesProvider = $this->container->get('prestashop.core.admin.data_provider.module_interface');
@@ -522,7 +492,7 @@ final private function getAddonsConnectToolbar()
         if ($addonsProvider->isAddonsAuthenticated()) {
             $addonsEmail = $addonsProvider->getAddonsEmail();
             $addonsConnect = [
-                'href' => '#',
+                'href' => $this->generateUrl('admin_addons_logout'),
                 'desc' => $addonsEmail['username_addons'],
                 'icon' => 'icon-chain-broken',
                 'help' => $translator->trans('Synchronized with Addons Marketplace!', array(), get_class($this))

diff --git a/src/PrestaShopBundle/Resources/views/Admin/Module/_partials/_modules_action_menu.html.twig b/src/PrestaShopBundle/Resources/views/Admin/Module/_partials/_modules_action_menu.html.twig
@@ -1,7 +1,7 @@
 <div class="pull-right btn-group">
 
     {% if module.url_active == 'buy' %}
-        <a class="btn btn-primary btn-sm light-button module_action_menu_go_to_addons" href="{{module.url}}">{% if module.price.EUR is defined and module.price.EUR > 0 %}{{module.price.EUR}}{% else %}Discover{% endif %}</a>
+        <a class="btn btn-primary btn-sm light-button module_action_menu_go_to_addons" href="{{module.url}}" target="_blank">{% if module.price.EUR is defined and module.price.EUR > 0 %}{{module.price.EUR}}{% else %}Discover{% endif %}</a>
     {% else %}
         <a class="btn btn-primary btn-sm light-button module_action_menu_{{ module.url_active }}"
            href="{{module.urls[module.url_active]}}"

diff --git a/src/PrestaShopBundle/Resources/views/Admin/Module/_partials/_modules_grid.html.twig b/src/PrestaShopBundle/Resources/views/Admin/Module/_partials/_modules_grid.html.twig
@@ -7,7 +7,7 @@
 {% if display_type == 'list' %}
     {% set col_lg = 'col-lg-12' %}
 {% else %}
-    {% set col_lg = 'col-12 col-xl-3 col-lg-4 col-md-6 col-sm-12' %}
+    {% set col_lg = 'col-12 col-xl-4 col-lg-6 col-md-12 col-sm-12' %}
 {% endif %}
 
 <div class="modules-{{display_type}}">

diff --git a/...ShopBundle/Resources/views/Admin/Module/_partials/_modules_modal_addons_connect.html.twig b/...ShopBundle/Resources/views/Admin/Module/_partials/_modules_modal_addons_connect.html.twig
@@ -27,7 +27,8 @@
                       <input name="addons_remember_me" type="checkbox"> Remember me
                     </label>
                   </div>
-                  <button type="submit" class="btn btn-default">Let's go!</button>
+                  <button type="submit" class="btn btn-primary">Let's go!</button>
+                  <button id="addons_login_btn" class="btn btn-primary-reverse btn-lg onclick" style="display:none;"></button>
                 </form>
                 <p>
                     <a href="http://addons.prestashop.com/password.php" target="_blank">Forgot your password ? </a>

diff --git a/src/PrestaShopBundle/Resources/views/Admin/Module/catalog.html.twig b/src/PrestaShopBundle/Resources/views/Admin/Module/catalog.html.twig
@@ -17,7 +17,7 @@
 
 {% block content %}
     <div class="row">
-        <div class="col-lg-10 col-lg-offset-1">
+        <div class="col-md-10 col-md-offset-1">
             {# Addons connect modal #}
             {% include 'PrestaShopBundle:Admin/Module/_partials:_modules_modal_addons_connect.html.twig' %}
             {# Contains toolbar-nav for module page #}