#7586 Redesign of the marketplace

I cleaned up a lot of CSS rules and HTML, added new CSS components (from Bootstrap mostly) plus merged the "browsePlugins" and "browseThemes" views into one
matomo-org · May 12, 2015 · 48b35a4 · 48b35a4
1 parent 6c2b11b
commit 48b35a4
Show file tree

Hide file tree

Showing 25 changed files with 682 additions and 715 deletions.
diff --git a/bower.json b/bower.json
@@ -27,6 +27,7 @@
     "jScrollPane": "~2.0.0",
     "jquery-mousewheel": "~3.1.12",
     "jquery-placeholder": "~2.0.8",
+    "jQuery.dotdotdot": "~1.7.2",
     "jquery.scrollTo": "~1.4.13",
     "chroma-js": "~0.6.0",
     "visibilityjs": "~1.2.1"

diff --git a/plugins/CoreAdminHome/stylesheets/generalSettings.less b/plugins/CoreAdminHome/stylesheets/generalSettings.less
@@ -85,7 +85,7 @@ table.admin  tbody td:hover, table.admin  tbody th:hover {
 .admin p, .admin section {
     margin-top: 10px;
     line-height: 140%;
-    padding-bottom: 20px;
+    padding-bottom: 10px;
 }
 
 .adminTable {

diff --git a/plugins/CorePluginsAdmin/Controller.php b/plugins/CorePluginsAdmin/Controller.php
@@ -47,6 +47,38 @@ public function __construct(Translator $translator)
         parent::__construct();
     }
 
+    public function marketplace()
+    {
+        self::dieIfMarketplaceIsDisabled();
+
+        $show = Common::getRequestVar('show', 'plugins', 'string');
+        $query = Common::getRequestVar('query', '', 'string', $_POST);
+        $sort = Common::getRequestVar('sort', $this->defaultSortMethod, 'string');
+        if (!in_array($sort, $this->validSortMethods)) {
+            $sort = $this->defaultSortMethod;
+        }
+        $mode = Common::getRequestVar('mode', 'admin', 'string');
+        if (!in_array($sort, array('user', 'admin'))) {
+            $mode = 'admin';
+        }
+
+        $view = $this->configureView('@CorePluginsAdmin/marketplace');
+
+        $marketplace = new Marketplace();
+
+        $showThemes = ($show === 'themes');
+        $view->plugins = $marketplace->searchPlugins($query, $sort, $showThemes);
+        $view->showThemes = $showThemes;
+        $view->mode = $mode;
+        $view->query = $query;
+        $view->sort = $sort;
+        $view->installNonce = Nonce::getNonce(static::INSTALL_NONCE);
+        $view->updateNonce = Nonce::getNonce(static::UPDATE_NONCE);
+        $view->isSuperUser = Piwik::hasUserSuperUserAccess();
+
+        return $view->render();
+    }
+
     private function createUpdateOrInstallView($template, $nonceName)
     {
         static::dieIfMarketplaceIsDisabled();
@@ -160,6 +192,30 @@ public function pluginDetails()
         return $view->render();
     }
 
+    /**
+     * @deprecated
+     */
+    public function browsePlugins()
+    {
+        $this->redirectToIndex('CorePluginsAdmin', 'marketplace');
+    }
+
+    /**
+     * @deprecated
+     */
+    public function browseThemes()
+    {
+        $this->redirectToIndex('CorePluginsAdmin', 'marketplace', null, null, null, array('show' => 'themes'));
+    }
+
+    /**
+     * @deprecated
+     */
+    public function userBrowsePlugins()
+    {
+        $this->redirectToIndex('CorePluginsAdmin', 'marketplace', null, null, null, array('mode' => 'user'));
+    }
+
     private function dieIfMarketplaceIsDisabled()
     {
         if (!CorePluginsAdmin::isMarketplaceEnabled()) {
@@ -179,50 +235,6 @@ private function dieIfPluginsAdminIsDisabled()
         }
     }
 
-    private function createBrowsePluginsOrThemesView($template, $themesOnly)
-    {
-        static::dieIfMarketplaceIsDisabled();
-
-        $query = Common::getRequestVar('query', '', 'string', $_POST);
-        $sort = Common::getRequestVar('sort', $this->defaultSortMethod, 'string');
-
-        if (!in_array($sort, $this->validSortMethods)) {
-            $sort = $this->defaultSortMethod;
-        }
-
-        $view = $this->configureView('@CorePluginsAdmin/' . $template);
-
-        $marketplace = new Marketplace();
-        $view->plugins = $marketplace->searchPlugins($query, $sort, $themesOnly);
-
-        $view->query = $query;
-        $view->sort = $sort;
-        $view->installNonce = Nonce::getNonce(static::INSTALL_NONCE);
-        $view->updateNonce = Nonce::getNonce(static::UPDATE_NONCE);
-        $view->isSuperUser = Piwik::hasUserSuperUserAccess();
-
-        return $view;
-    }
-
-    public function browsePlugins()
-    {
-        $view = $this->createBrowsePluginsOrThemesView('browsePlugins', $themesOnly = false);
-        return $view->render();
-    }
-
-    public function browseThemes()
-    {
-        $view = $this->createBrowsePluginsOrThemesView('browseThemes', $themesOnly = true);
-        return $view->render();
-    }
-
-    public function userBrowsePlugins()
-    {
-        $view = $this->createBrowsePluginsOrThemesView('browsePlugins', $themesOnly = false);
-        $view->mode = 'user';
-        return $view->render();
-    }
-
     private function createPluginsOrThemesView($template, $themesOnly)
     {
         Piwik::checkUserHasSuperUserAccess();

diff --git a/plugins/CorePluginsAdmin/CorePluginsAdmin.php b/plugins/CorePluginsAdmin/CorePluginsAdmin.php
@@ -29,6 +29,7 @@ public function getStylesheetFiles(&$stylesheets)
     {
         $stylesheets[] = "plugins/CorePluginsAdmin/stylesheets/marketplace.less";
         $stylesheets[] = "plugins/CorePluginsAdmin/stylesheets/plugins_admin.less";
+        $stylesheets[] = "plugins/CorePluginsAdmin/stylesheets/plugin-details.less";
     }
 
     public static function isMarketplaceEnabled()
@@ -43,8 +44,9 @@ public static function isPluginsAdminEnabled()
 
     public function getJsFiles(&$jsFiles)
     {
+        $jsFiles[] = "libs/bower_components/jQuery.dotdotdot/src/js/jquery.dotdotdot.min.js";
         $jsFiles[] = "plugins/CoreHome/javascripts/popover.js";
-        $jsFiles[] = "plugins/CorePluginsAdmin/javascripts/pluginDetail.js";
+        $jsFiles[] = "plugins/CorePluginsAdmin/javascripts/marketplace.js";
         $jsFiles[] = "plugins/CorePluginsAdmin/javascripts/pluginOverview.js";
         $jsFiles[] = "plugins/CorePluginsAdmin/javascripts/pluginExtend.js";
         $jsFiles[] = "plugins/CorePluginsAdmin/javascripts/plugins.js";

diff --git a/plugins/CorePluginsAdmin/javascripts/marketplace.js b/plugins/CorePluginsAdmin/javascripts/marketplace.js
@@ -0,0 +1,50 @@
+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+$(document).ready(function () {
+
+    // Keeps the plugin descriptions the same height
+    $('.marketplace .plugin .description').dotdotdot({
+        after: 'a.more',
+        watch: 'window'
+    });
+
+    $('.marketplace').on('click', '.plugin-details', function (event) {
+        event.preventDefault();
+
+        var pluginName = $(this).attr('data-pluginName');
+        if (!pluginName) {
+            return;
+        }
+
+        var activeTab = $(this).attr('data-activePluginTab');
+        if (activeTab) {
+            pluginName += '!' + activeTab;
+        }
+
+        broadcast.propagateNewPopoverParameter('browsePluginDetail', pluginName);
+    });
+
+    broadcast.addPopoverHandler('browsePluginDetail', function (value) {
+        var pluginName = value;
+        var activeTab  = null;
+
+        if (-1 !== value.indexOf('!')) {
+            activeTab  = value.substr(value.indexOf('!') + 1);
+            pluginName = value.substr(0, value.indexOf('!'));
+        }
+
+        var url = 'module=CorePluginsAdmin&action=pluginDetails&pluginName=' + encodeURIComponent(pluginName);
+
+        if (activeTab) {
+            url += '&activeTab=' + encodeURIComponent(activeTab);
+        }
+
+        Piwik_Popover.createPopupAndLoadUrl(url, 'details');
+    });
+
+});
diff --git a/plugins/CorePluginsAdmin/javascripts/pluginDetail.js b/plugins/CorePluginsAdmin/javascripts/pluginDetail.js
diff --git a/plugins/CorePluginsAdmin/javascripts/pluginExtend.js b/plugins/CorePluginsAdmin/javascripts/pluginExtend.js
@@ -7,7 +7,7 @@
 
 $(document).ready(function () {
 
-    $('.pluginslistActionBar .uploadPlugin').click(function (event) {
+    $('.uploadPlugin').click(function (event) {
         event.preventDefault();
 
         piwikHelper.modalConfirm('#installPluginByUpload', {

diff --git a/plugins/CorePluginsAdmin/lang/en.json b/plugins/CorePluginsAdmin/lang/en.json
@@ -15,6 +15,7 @@
         "BeCarefulUsingPlugins": "Plugins that are not authored by Piwik team must be used with care: we did not review them.",
         "BeCarefulUsingThemes": "Themes that are not authored by Piwik team must be used with care: we did not review them.",
         "ByXDevelopers": "by %s developers",
+        "CannotInstall": "Cannot install (help)",
         "Changelog": "Changelog",
         "ChangeSettingsPossible": "You can change %ssettings%s for this plugin.",
         "CorePluginTooltip": "Core plugins have no version since they are distributed with Piwik.",
@@ -44,6 +45,7 @@
         "MenuPlatform": "Platform",
         "MissingRequirementsNotice": "Please update %1$s %2$s to a newer version, %1$s %3$s is required.",
         "MissingRequirementsPleaseInstallNotice": "Please install %1$s %2$s as it is required by %3$s.",
+        "NewVersion": "new version",
         "NoPluginsFound": "No plugins found",
         "NotAllowedToBrowseMarketplacePlugins": "You can browse the list of plugins that can be installed to customize or extend your Piwik platform. Please contact your administrator if you need any of these installed.",
         "NotAllowedToBrowseMarketplaceThemes": "You can browse the list of themes that can be installed to customize the appearance of the Piwik platform. Please contact your administrator to get any of these installed for you.",