diff options
author | Matthieu Napoli <matthieu@mnapoli.fr> | 2015-04-28 05:59:02 +0300 |
---|---|---|
committer | Matthieu Napoli <matthieu@mnapoli.fr> | 2015-05-19 10:39:17 +0300 |
commit | 4b12f96a141b43daeaef52d2f0bbf44d39d9c5f8 (patch) | |
tree | cd6dc003107fa09eb284daf5cb998342ea6f2dbc /plugins/CorePluginsAdmin | |
parent | 06ebc8b2d528043db4a4c9a30bf8799a9030fba8 (diff) |
Ref #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
Added the jquery.dotdotdot library
Diffstat (limited to 'plugins/CorePluginsAdmin')
19 files changed, 526 insertions, 714 deletions
diff --git a/plugins/CorePluginsAdmin/Controller.php b/plugins/CorePluginsAdmin/Controller.php index e494923f34..74489fdaad 100644 --- a/plugins/CorePluginsAdmin/Controller.php +++ b/plugins/CorePluginsAdmin/Controller.php @@ -47,6 +47,38 @@ class Controller extends Plugin\ControllerAdmin 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 @@ class Controller extends Plugin\ControllerAdmin 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 @@ class Controller extends Plugin\ControllerAdmin } } - 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 index f08ed3e572..f51e214785 100644 --- a/plugins/CorePluginsAdmin/CorePluginsAdmin.php +++ b/plugins/CorePluginsAdmin/CorePluginsAdmin.php @@ -29,6 +29,7 @@ class CorePluginsAdmin extends \Piwik\Plugin { $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 @@ class CorePluginsAdmin extends \Piwik\Plugin 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 new file mode 100755 index 0000000000..64cb5087ab --- /dev/null +++ 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 deleted file mode 100755 index 989940e417..0000000000 --- a/plugins/CorePluginsAdmin/javascripts/pluginDetail.js +++ /dev/null @@ -1,88 +0,0 @@ -/*! - * 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 () { - - function syncMaxHeight (selector) { - - if (!selector) { - return; - } - - var $nodes = $(selector); - - if (!$nodes) { - return; - } - - var max = {}; - $nodes.each(function (index, node) { - var $node = $(node); - var top = $node.position().top; - - var height = $node.height(); - - if (!max[top]) { - max[top] = height; - } else if (max[top] < height) { - max[top] = height; - } else { - $node.height(max[top] + 'px'); - } - }); - - $nodes.each(function (index, node) { - var $node = $(node); - var top = $node.position().top; - - $node.height(max[top] + 'px'); - }); - } - - syncMaxHeight('.pluginslist .plugin'); - syncMaxHeight('.themeslist .plugin'); - - $('.pluginslist, #plugins, .themeslist').on('click', '[data-pluginName]', function (event) { - if ($(event.target).hasClass('install') || $(event.target).hasClass('uninstall')) { - return; - } - - var pluginName = $(this).attr('data-pluginName'); - - if (!pluginName) { - return; - } - - var activeTab = $(event.target).attr('data-activePluginTab'); - if (activeTab) { - pluginName += '!' + activeTab; - } - - broadcast.propagateNewPopoverParameter('browsePluginDetail', pluginName); - }); - - var showPopover = 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'); - }; - - broadcast.addPopoverHandler('browsePluginDetail', showPopover); - -});
\ No newline at end of file diff --git a/plugins/CorePluginsAdmin/javascripts/pluginExtend.js b/plugins/CorePluginsAdmin/javascripts/pluginExtend.js index ecaf872504..63af1f8433 100644 --- 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 index 762159c2e2..6831209c04 100644 --- 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.", diff --git a/plugins/CorePluginsAdmin/stylesheets/marketplace.less b/plugins/CorePluginsAdmin/stylesheets/marketplace.less index 0dd91da7e0..fd6442a9d2 100644 --- a/plugins/CorePluginsAdmin/stylesheets/marketplace.less +++ b/plugins/CorePluginsAdmin/stylesheets/marketplace.less @@ -1,378 +1,82 @@ -.extendPlatform { - min-width: 580px; - - .introduction { max-width:980px; } - .byPlugins { width:50%;float:left; } - .byThemes { width:50%;float:left; } - .teaserImage { width: 128px; height: 128px; margin: 64px; } - .header { font-size: 1.6em; } - .callToAction { font-size: 1.1em;line-height: 2em; } -} - -#plugins { - - .desc .missingRequirementsNotice { - color: red; - } - - .plugin-desc-missingrequirements { - font-weight:bold; - font-style: italic; - a { - text-decoration: underline !important; - color: black; +.marketplace { + .plugin-search { + float: right; + + input, button { + height: 41px; + margin-bottom: 0; + } + button { + font-size: inherit !important; // because the default Piwik button style is crazy + } + } + + .marketplace-max-width { + max-width: 980px; + } + + .plugin { + text-align: center; + .description { + @line-height: 18px; + line-height: @line-height; + height: @line-height * 3; // 3 lines of text + padding-bottom: 0; + margin-bottom: 10px; + .more { + text-decoration: underline; + color: @theme-color-text; + } + } + img.preview { + max-width: 250px; + width: 100%; + } + .metadata { + color: @color-silver-l50; + font-size: 95%; + margin: 15px 15px 10px; + list-style: none; + li { + text-overflow: ellipsis; + overflow-x: hidden; + white-space: nowrap; + line-height: 18px; + } + .update-available { + // Code taken from Bootstrap's labels + font-weight: bold; + background-color: #f0ad4e; + display: inline; + padding: .2em .6em .3em; + font-size: 76%; + line-height: 1; + color: #fff; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + border-radius: 0.25em; + text-decoration: none; + } + } + .panel-footer { + padding: 12px 40px; + } + } + + .footer-message { + margin-top:30px; + font-style: italic; } - } - - .settingsLink { - text-align: right; - width: 100%; - display: inline-block; - font-style: italic; - } -} - -.admin .pluginsFilter { - color: @theme-color-text-lighter; - .active { - font-weight: bold; - } - - a { - color: @theme-color-link; - text-decoration: none; - } - - a .counter { - color: #999999; - font-weight: normal; - } - - a:hover { - text-decoration: underline; - } - - .status { - display: inline-block; - margin-left: 20px; - } - - .getNewPlugins { - float: right; - } } #installPluginByUpload { - .description { - margin-top: 30px; - margin-bottom: 20px; - } - - .startUpload { - margin-top: 20px; - margin-bottom: 20px; - } -} - -.pluginslist { - margin-top: 20px; - max-width: 980px; - clear: right; - - .plugin { - border: 1px solid #dadada; - padding: 15px; - background-color: #f2f2f2; - margin-bottom: 15px; - position: relative; - - .missingRequirementsNotice, - .updateAvailableNotice { - font-size: 14px; - padding: 10px; - color: #9b7a44; - display: inline-block; - background-color: #ffffe0; - border-radius: 3px; - margin-top: 1px; - margin-bottom: 16px; - - a { - color: #9b7a44; - font-weight: bold; - } - } - - &:hover { - background-color: #EFEEEC; - } - - li { - display: inline-block; - padding-right: 50px; - font-size: 90%; - - &.even { - padding-right: 0; - width: 48%; - overflow: hidden; - white-space: nowrap; - } - &.odd { - padding-right: 0; - width: 48%; - overflow: hidden; - white-space: nowrap; - } - } - - ul { - list-style: none; - margin-left: 0; - line-height: 140%; - } - - .header { - margin-top: 0px; - margin-bottom: 15px; - h3 { - font-size: 16px; - } - } - .description { - padding-bottom: 10px; - } - .install { - float: right; - margin-top: 3px; + margin-top: 30px; + margin-bottom: 20px; } - .update { - .install + .startUpload { + margin-top: 20px; + margin-bottom: 20px; } - h3 .more { - font-weight: bold; - text-decoration: none; - &:hover { - text-decoration: underline; - } - } - .more { - text-decoration: underline; - color: @theme-color-text; - } - .content { - margin-bottom: 46px; - cursor: pointer; - } - - .featuredIcon { - margin-right: 3px; - margin-bottom: 3px; - height: 24px; - width: 24px; - position: absolute; - right: 1px; - margin-top: -22px; - } - - .footer { - position: absolute; - bottom: 4px; - left: 0px; - right: 0px; - cursor: pointer; - } - .metadataSeparator { - background-color: lightgray; - color: #333; - border: 0px; - height: 1px; - width: 100%; - } - .metadata { - margin-top: 10px; - margin-left: 15px; - margin-right: 15px; - } - } - - &.themes .plugin { - .header { - display: inline; - } - .content { - margin-bottom: 57px; - } - .preview { - width: 250px; - height: 250px; - } - .footer { - position: absolute; - bottom: 7px; - left: 0px; - right: 0px; - } - } -} - -.pluginFooterMessage { - float:left; - margin-top:30px; - line-height: 2em; - font-style: italic; -} - -.pluginslistNonSuperUserHint { - margin-top: 30px; - margin-bottom: 30px; - width: 500px; -} - -.pluginslistActionBar { - min-width: 650px; - - form { - display: inline; - } - - .sort { - .active { - font-weight: bold; - } - } - - .infoBox { - margin: 0px 0px 20px 0px; - line-height: 1.5em; - } } - -.pluginDetails { - font-size: 13px; - text-align: left; - line-height: 20px; - - h3, h4, h5, h6 { - margin: 20px 0px 10px 0px; - color: #000000; - } - - .ui-tabs-panel ul, .ui-tabs-panel ol { - list-style: initial; - padding-left: 20px; - } - - .content .missingRequirementsNotice, - .content .updateAvailableNotice { - font-size: 14px; - padding: 10px; - color: #9b7a44; - display: inline-block; - background-color: #ffffe0; - border-radius: 3px; - - a { - color: #9b7a44; - font-weight: bold; - } - a:hover { - text-decoration: underline; - } - } - - p, .ui-tabs-panel ul, .ui-tabs-panel li { - text-align: left; - line-height: 20px; - } - - .header .intro { - margin-bottom: 15px; - } - - .content p { - margin: 0 0 10px; - } - - .description { - padding-right: 25px; - } - - .ui-tabs { - padding: 0em; - } - - .ui-tabs .ui-tabs-nav { - padding: 0em; - border-bottom: 1px solid #cccccc; - margin-right: 25px; - border-radius: 0px; - font-size: 15px; - } - - .ui-tabs .ui-tabs-panel { - padding: 1.4em 3em 0em 0em; - } - - .content a { - color: @theme-color-link; - text-decoration: none; - } - - .metadata dl { - padding-right: 25px; - } - - .metadata a:hover { - text-decoration: underline; - } - - .ui-state-default { - border: 0px !important; - } - - .ui-state-active { - padding-bottom: 0px !important; - } - - .ui-state-active.ui-state-default { - border: 1px solid #cccccc !important; - } - - .ui-state-default:hover { - background-color: #eeeeee !important; - } - - .install { - padding: 11px 19px; - font-size: 17.5px; - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; - color: #ffffff; - background-color: #5bb75b; - display: inline-block; - text-decoration: none; - } - - .install:hover { - text-decoration: underline; - } - - dt { - font-weight: bold; - line-height: 20px; - } - dd { - margin-left: 10px; - line-height: 20px; - } - - .featuredIcon { - height: 16px; - width: 16px; - margin-right: 5px; - } - -}
\ No newline at end of file diff --git a/plugins/CorePluginsAdmin/stylesheets/plugin-details.less b/plugins/CorePluginsAdmin/stylesheets/plugin-details.less new file mode 100644 index 0000000000..c447e35025 --- /dev/null +++ b/plugins/CorePluginsAdmin/stylesheets/plugin-details.less @@ -0,0 +1,101 @@ +.pluginDetails { + font-size: 13px; + text-align: left; + line-height: 20px; + + h3, h4, h5, h6 { + margin: 20px 0px 10px 0px; + color: #000000; + } + + .ui-tabs-panel ul, .ui-tabs-panel ol { + list-style: initial; + padding-left: 20px; + } + + p, .ui-tabs-panel ul, .ui-tabs-panel li { + text-align: left; + line-height: 20px; + } + + .header .intro { + margin-bottom: 15px; + } + + .content p { + margin: 0 0 10px; + } + + .description { + padding-right: 25px; + } + + .ui-tabs { + padding: 0em; + } + + .ui-tabs .ui-tabs-nav { + padding: 0em; + border-bottom: 1px solid #cccccc; + margin-right: 25px; + border-radius: 0px; + font-size: 15px; + } + + .ui-tabs .ui-tabs-panel { + padding: 1.4em 3em 0em 0em; + } + + .content a { + color: @theme-color-link; + text-decoration: none; + } + + .ui-state-default { + border: 0px !important; + } + + .ui-state-active { + padding-bottom: 0px !important; + } + + .ui-state-active.ui-state-default { + border: 1px solid #cccccc !important; + } + + .ui-state-default:hover { + background-color: #eeeeee !important; + } + + .install { + padding: 11px 19px; + font-size: 17.5px; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; + color: #ffffff; + background-color: #5bb75b; + display: inline-block; + text-decoration: none; + } + + .install:hover { + text-decoration: underline; + } + + dt { + font-weight: bold; + line-height: 20px; + } + dd { + margin-left: 10px; + line-height: 20px; + } + + .featuredIcon { + height: 16px; + width: 16px; + margin-right: 5px; + } + +} diff --git a/plugins/CorePluginsAdmin/stylesheets/plugins_admin.less b/plugins/CorePluginsAdmin/stylesheets/plugins_admin.less index dc3a4965d7..1a913423c7 100644 --- a/plugins/CorePluginsAdmin/stylesheets/plugins_admin.less +++ b/plugins/CorePluginsAdmin/stylesheets/plugins_admin.less @@ -52,3 +52,52 @@ table.entityTable tr td a.uninstall { font-style:italic; color:#777; } + +#plugins { + + .plugin-desc-missingrequirements { + font-weight:bold; + font-style: italic; + a { + text-decoration: underline !important; + color: black; + } + } + + .settingsLink { + text-align: right; + width: 100%; + display: inline-block; + font-style: italic; + } +} + +.admin .pluginsFilter { + color: @theme-color-text-lighter; + .active { + font-weight: bold; + } + + a { + color: @theme-color-link; + text-decoration: none; + } + + a .counter { + color: #999999; + font-weight: normal; + } + + a:hover { + text-decoration: underline; + } + + .status { + display: inline-block; + margin-left: 20px; + } + + .getNewPlugins { + float: right; + } +} diff --git a/plugins/CorePluginsAdmin/templates/browsePlugins.twig b/plugins/CorePluginsAdmin/templates/browsePlugins.twig deleted file mode 100644 index 6dad365703..0000000000 --- a/plugins/CorePluginsAdmin/templates/browsePlugins.twig +++ /dev/null @@ -1,62 +0,0 @@ -{% extends mode is defined and mode == 'user' ? "user.twig" : "admin.twig" %} -{% import '@CorePluginsAdmin/macros.twig' as pluginsMacro %} - -{% block content %} - - <div class="pluginslistActionBar"> - - <h2 piwik-enriched-headline - feature-name="{{ 'CorePluginsAdmin_Marketplace'|translate }}" - >{{ 'CorePluginsAdmin_TeaserExtendPiwikByPlugin'|translate }}</h2> - - <div class="infoBox"> - {{ 'CorePluginsAdmin_PluginsExtendPiwik'|translate }} - {{ 'CorePluginsAdmin_InstallingNewPluginViaMarketplaceOrUpload'|translate('<a href="#" class="uploadPlugin">','</a>')|raw }} - <br/> - {{ 'CorePluginsAdmin_BeCarefulUsingPlugins'|translate }} - </div> - - {% include "@CorePluginsAdmin/browsePluginsActions.twig" %} - </div> - - {% if not isSuperUser %} - <div class="pluginslistNonSuperUserHint"> - {{ 'CorePluginsAdmin_NotAllowedToBrowseMarketplacePlugins'|translate }} - </div> - {% endif %} - - <div class="row pluginslist"> - - {% if plugins|length %} - - {% for plugin in plugins %} - - <div class="col-md-4"> - <div class="plugin"> - <div class="content" data-pluginName="{{ plugin.name }}"> - {% include "@CorePluginsAdmin/pluginOverview.twig" %} - </div> - - <div class="footer" data-pluginName="{{ plugin.name }}"> - {% if plugin.featured %} - {{ pluginsMacro.featuredIcon('right') }} - {% endif %} - {% include "@CorePluginsAdmin/pluginMetadata.twig" %} - </div> - </div> - </div> - - {% endfor %} - - {% else %} - {{ 'CorePluginsAdmin_NoPluginsFound'|translate }} - {% endif %} - </div> - - <div class="pluginFooterMessage"> - {% set marketplaceSellPluginSubject = 'CorePluginsAdmin_MarketplaceSellPluginSubject'|translate %} - {{ 'CorePluginsAdmin_GetEarlyAccessForPaidPlugins'|translate("<a href='mailto:hello@piwik.org?subject=" ~ marketplaceSellPluginSubject ~ "'>", "</a>")|raw }} - <br/> - {{ 'CorePluginsAdmin_DevelopersLearnHowToDevelopPlugins'|translate('<a href="?module=Proxy&action=redirect&url=http://developer.piwik.org/plugins" target="_blank">', '</a>')|raw }} - </div> -{% endblock %} diff --git a/plugins/CorePluginsAdmin/templates/browsePluginsActions.twig b/plugins/CorePluginsAdmin/templates/browsePluginsActions.twig deleted file mode 100644 index 0940df2b96..0000000000 --- a/plugins/CorePluginsAdmin/templates/browsePluginsActions.twig +++ /dev/null @@ -1,27 +0,0 @@ -<div class="ui-confirm" id="installPluginByUpload"> - <h2>{{ 'CorePluginsAdmin_TeaserExtendPiwikByUpload'|translate }}</h2> - - <p class="description"> {{ 'CorePluginsAdmin_AllowedUploadFormats'|translate }} </p> - - <form enctype="multipart/form-data" - method="post" - id="uploadPluginForm" - action="{{ linkTo({'action':'uploadPlugin', 'nonce': installNonce}) }}"> - <input type="file" name="pluginZip"> - <br /> - <input class="startUpload" type="submit" value="{{ 'CorePluginsAdmin_UploadZipFile'|translate }}"> - </form> -</div> - -<div class="sort"> - <a href="{{ linkTo({'sort': 'popular', 'query': ''}) }}" {% if 'popular' == sort %}class="active"{% endif %}>{{ 'CorePluginsAdmin_SortByPopular'|translate }}</a> - | - <a href="{{ linkTo({'sort': 'newest', 'query': ''}) }}" {% if 'newest' == sort %}class="active"{% endif %}>{{ 'CorePluginsAdmin_SortByNewest'|translate }}</a> - | - <a href="{{ linkTo({'sort': 'alpha', 'query': ''}) }}" {% if 'alpha' == sort %}class="active"{% endif %}>{{ 'CorePluginsAdmin_SortByAlpha'|translate }}</a> - | - <form action="{{ linkTo({'sort': ''}) }}" method="POST"> - <input value="{{ query }}" placeholder="{{ 'General_Search'|translate }} {{ plugins|length }} {{ 'General_Plugins'|translate|lcfirst }}..." type="text" name="query"/> - <button type="submit">{{ 'General_Search'|translate }}</button> - </form> -</div> diff --git a/plugins/CorePluginsAdmin/templates/browseThemes.twig b/plugins/CorePluginsAdmin/templates/browseThemes.twig deleted file mode 100644 index 106f507b00..0000000000 --- a/plugins/CorePluginsAdmin/templates/browseThemes.twig +++ /dev/null @@ -1,49 +0,0 @@ -{% extends 'admin.twig' %} - -{% block content %} - - <div class="pluginslistActionBar"> - - <h2 piwik-enriched-headline - feature-name="{{ 'CorePluginsAdmin_Marketplace'|translate }}" - >{{ 'CorePluginsAdmin_TeaserExtendPiwikByTheme'|translate }}</h2> - - <div class="infoBox"> - {{ 'CorePluginsAdmin_ThemesDescription'|translate }} - {{ 'CorePluginsAdmin_InstallingNewPluginViaMarketplaceOrUpload'|translate('<a href="#" class="uploadPlugin">','</a>')|raw }} - <br/> - {{ 'CorePluginsAdmin_BeCarefulUsingThemes'|translate }} - </div> - - </div> - - {% if not isSuperUser %} - <div class="pluginslistNonSuperUserHint"> - {{ 'CorePluginsAdmin_NotAllowedToBrowseMarketplaceThemes'|translate }} - </div> - {% endif %} - - <div class="row pluginslist themes"> - - {% if plugins|length %} - {% for plugin in plugins %} - - <div class="col-md-4"> - <div class="plugin"> - <div class="content" data-pluginName="{{ plugin.name }}"> - {% include "@CorePluginsAdmin/themeOverview.twig" %} - </div> - - <div class="footer" data-pluginName="{{ plugin.name }}"> - {% include "@CorePluginsAdmin/pluginMetadata.twig" %} - </div> - </div> - </div> - - {% endfor %} - {% else %} - {{ 'CorePluginsAdmin_NoThemesFound'|translate }} - {% endif %} - - </div> -{% endblock %} diff --git a/plugins/CorePluginsAdmin/templates/macros.twig b/plugins/CorePluginsAdmin/templates/macros.twig index 6eda0a2d31..5e0325d84a 100644 --- a/plugins/CorePluginsAdmin/templates/macros.twig +++ b/plugins/CorePluginsAdmin/templates/macros.twig @@ -96,13 +96,13 @@ {% macro missingRequirementsPleaseUpdateNotice(plugin) %} {% if plugin.missingRequirements and 0 < plugin.missingRequirements|length %} {% for req in plugin.missingRequirements -%} - <p class="missingRequirementsNotice"> + <div class="alert alert-danger"> {% set requirement = req.requirement|capitalize %} {% if 'Php' == requirement %} {% set requirement = 'PHP' %} {% endif %} {{ 'CorePluginsAdmin_MissingRequirementsNotice'|translate(requirement, req.actualVersion, req.requiredVersion) }} - </p> + </div> {%- endfor %} {% endif %} {% endmacro %} diff --git a/plugins/CorePluginsAdmin/templates/marketplace.twig b/plugins/CorePluginsAdmin/templates/marketplace.twig new file mode 100644 index 0000000000..9dd302f5ac --- /dev/null +++ b/plugins/CorePluginsAdmin/templates/marketplace.twig @@ -0,0 +1,75 @@ +{% extends mode is defined and mode == 'user' ? "user.twig" : "admin.twig" %} +{% import '@CorePluginsAdmin/macros.twig' as pluginsMacro %} + +{% block content %} + + <div class="marketplace"> + + <h2 piwik-enriched-headline feature-name="{{ 'CorePluginsAdmin_Marketplace'|translate }}"> + {{ 'CorePluginsAdmin_Marketplace'|translate }} + </h2> + + <ul class="nav nav-pills"> + <li {% if not showThemes %}class="active"{% endif %}> + <a href="{{ linkTo({'show': 'plugins'}) }}">{{ 'General_Plugins'|translate }}</a> + </li> + <li {% if showThemes %}class="active"{% endif %}> + <a href="{{ linkTo({'show': 'themes'}) }}">{{ 'CorePluginsAdmin_Themes'|translate }}</a> + </li> + </ul> + + <div class="marketplace-max-width"> + + <p> + {% if showThemes %} + {{ 'CorePluginsAdmin_ThemesDescription'|translate }} + {{ 'CorePluginsAdmin_InstallingNewPluginViaMarketplaceOrUpload'|translate('<a href="#" class="uploadPlugin">','</a>')|raw }} + <br/> + {{ 'CorePluginsAdmin_BeCarefulUsingThemes'|translate }} + {% else %} + {{ 'CorePluginsAdmin_PluginsExtendPiwik'|translate }} + {{ 'CorePluginsAdmin_InstallingNewPluginViaMarketplaceOrUpload'|translate('<a href="#" class="uploadPlugin">','</a>')|raw }} + <br/> + {{ 'CorePluginsAdmin_BeCarefulUsingPlugins'|translate }} + {% endif %} + </p> + + {% if not isSuperUser %} + <p> + {% if showThemes %} + {{ 'CorePluginsAdmin_NotAllowedToBrowseMarketplaceThemes'|translate }} + {% else %} + {{ 'CorePluginsAdmin_NotAllowedToBrowseMarketplacePlugins'|translate }} + {% endif %} + </p> + {% endif %} + + </div> + + <hr/> + + <div class="ui-confirm" id="installPluginByUpload"> + <h2>{{ 'CorePluginsAdmin_TeaserExtendPiwikByUpload'|translate }}</h2> + + <p class="description"> {{ 'CorePluginsAdmin_AllowedUploadFormats'|translate }} </p> + + <form enctype="multipart/form-data" method="post" id="uploadPluginForm" + action="{{ linkTo({'action':'uploadPlugin', 'nonce': installNonce}) }}"> + <input type="file" name="pluginZip"> + <br /> + <input class="startUpload" type="submit" value="{{ 'CorePluginsAdmin_UploadZipFile'|translate }}"> + </form> + </div> + + {% include '@CorePluginsAdmin/marketplace/plugin-list.twig' %} + + <div class="footer-message"> + {% set marketplaceSellPluginSubject = 'CorePluginsAdmin_MarketplaceSellPluginSubject'|translate %} + {{ 'CorePluginsAdmin_GetEarlyAccessForPaidPlugins'|translate("<a href='mailto:hello@piwik.org?subject=" ~ marketplaceSellPluginSubject ~ "'>", "</a>")|raw }} + <br/> + {{ 'CorePluginsAdmin_DevelopersLearnHowToDevelopPlugins'|translate('<a href="?module=Proxy&action=redirect&url=http://developer.piwik.org/plugins" target="_blank">', '</a>')|raw }} + </div> + + </div> + +{% endblock %} diff --git a/plugins/CorePluginsAdmin/templates/marketplace/plugin-list.twig b/plugins/CorePluginsAdmin/templates/marketplace/plugin-list.twig new file mode 100644 index 0000000000..eaf166e466 --- /dev/null +++ b/plugins/CorePluginsAdmin/templates/marketplace/plugin-list.twig @@ -0,0 +1,110 @@ +<div class="row marketplace-max-width"> + + {# Hide filters and search for themes because we don't have many of them #} + {% if not showThemes %} + <div class="col-sm-12 clearfix"> + + <form action="{{ linkTo({'sort': ''}) }}" method="post" class="plugin-search"> + <input value="{{ query }}" placeholder="{{ 'General_Search'|translate }} {{ plugins|length }} {{ 'General_Plugins'|translate|lcfirst }}..." type="text" name="query"/> + <button type="submit">{{ 'General_Search'|translate }}</button> + </form> + + <ul class="nav nav-pills"> + <li {% if 'popular' == sort %}class="active"{% endif %}> + <a href="{{ linkTo({'sort': 'popular', 'query': ''}) }}"> + {{ 'CorePluginsAdmin_SortByPopular'|translate }} + </a> + </li> + <li {% if 'newest' == sort %}class="active"{% endif %}> + <a href="{{ linkTo({'sort': 'newest', 'query': ''}) }}"> + {{ 'CorePluginsAdmin_SortByNewest'|translate }} + </a> + </li> + <li {% if 'alpha' == sort %}class="active"{% endif %}> + <a href="{{ linkTo({'sort': 'alpha', 'query': ''}) }}"> + {{ 'CorePluginsAdmin_SortByAlpha'|translate }} + </a> + </li> + </ul> + + </div> + {% endif %} + + {% for plugin in plugins %} + + <div class="col-md-4"> + <div class="panel plugin"> + + <div class="panel-heading"> + <h3 class="panel-title panel-title-block" title="{{ 'General_MoreDetails'|translate }}"> + <a class="plugin-details" href="#" data-pluginName="{{ plugin.name }}">{{ plugin.name }}</a> + </h3> + </div> + + <div class="panel-body"> + <p class="description"> + {{ plugin.description }} + <a class="more plugin-details" href="#" data-pluginName="{{ plugin.name }}" title="{{ 'General_MoreDetails'|translate }}"> + › {{ 'General_MoreLowerCase'|translate }}</a> + </p> + + {% if showThemes %} + {# Screenshot for themes #} + <a class="more plugin-details" href="#" data-pluginName="{{ plugin.name }}"> + <img title="{{ 'General_MoreDetails'|translate }}" + class="preview" src="{{ plugin.screenshots|first }}?w=250&h=150"/></a> + {% endif %} + + <ul class="metadata"> + <li> + {{ 'CorePluginsAdmin_Version'|translate }}: {{ plugin.latestVersion }} + {% if plugin.canBeUpdated %} + <a class="plugin-details update-available" href="#" data-pluginName="{{ plugin.name }}" data-activePluginTab="changelog" + title="{{ 'CorePluginsAdmin_PluginUpdateAvailable'|translate(plugin.currentVersion, plugin.latestVersion) }}"> + {{ 'CorePluginsAdmin_NewVersion'|translate }}</a> + {% endif %} + </li> + <li>{{ 'CorePluginsAdmin_Updated'|translate }}: {{ plugin.lastUpdated }}</li> + <li>{{ 'General_Downloads'|translate }}: {{ plugin.numDownloads }}</li> + <li>{{ 'CorePluginsAdmin_Developer'|translate }}: {{ pluginsMacro.pluginDeveloper(plugin.owner) }}</li> + </ul> + </div> + + {% if isSuperUser %} + <div class="panel-footer" data-pluginName="{{ plugin.name }}"> + {% if plugin.canBeUpdated and 0 == plugin.missingRequirements|length %} + <a class="btn btn-block" + href="{{ linkTo({'action':'updatePlugin', 'pluginName': plugin.name, 'nonce': updateNonce}) }}"> + {{ 'CoreUpdater_UpdateTitle'|translate }} + </a> + {% elseif plugin.isInstalled %} + <button class="btn btn-noop btn-block"> + {{ 'General_Installed'|translate }} + </button> + {% elseif plugin.missingRequirements|length > 0 %} + <a class="btn btn-link btn-block plugin-details" href="#" data-pluginName="{{ plugin.name }}" title="{{ 'General_MoreDetails'|translate }}"> + {{ 'CorePluginsAdmin_CannotInstall'|translate }} + </a> + {% else %} + <a href="{{ linkTo({'action': 'installPlugin', 'pluginName': plugin.name, 'nonce': installNonce}) }}" + class="btn btn-block"> + {{ 'CorePluginsAdmin_ActionInstall'|translate }} + </a> + {% endif %} + </div> + {% endif %} + + </div> + </div> + + {% endfor %} + + {% if plugins|length == 0 %} + {% if showThemes %} + {{ 'CorePluginsAdmin_NoThemesFound'|translate }} + {% else %} + {{ 'CorePluginsAdmin_NoPluginsFound'|translate }} + {% endif %} + {% endif %} + +</div> diff --git a/plugins/CorePluginsAdmin/templates/pluginDetails.twig b/plugins/CorePluginsAdmin/templates/pluginDetails.twig index 077f3755c5..7359ce3a19 100644 --- a/plugins/CorePluginsAdmin/templates/pluginDetails.twig +++ b/plugins/CorePluginsAdmin/templates/pluginDetails.twig @@ -68,9 +68,10 @@ <div id="tabs-changelog"> {{ pluginsMacro.missingRequirementsPleaseUpdateNotice(plugin) }} {% if plugin.canBeUpdated %} - <p class="updateAvailableNotice">{{ 'CorePluginsAdmin_PluginUpdateAvailable'|translate(plugin.currentVersion, plugin.latestVersion) }} + <div class="alert alert-warning"> + {{ 'CorePluginsAdmin_PluginUpdateAvailable'|translate(plugin.currentVersion, plugin.latestVersion) }} {% if plugin.repositoryChangelogUrl %}<a rel="noreferrer" target="_blank" href="{{ plugin.repositoryChangelogUrl }}">{{ 'CorePluginsAdmin_ViewRepositoryChangelog'|translate }}</a>{% endif %} - </p> + </div> {% endif %} {% if latestVersion.readmeHtml.changelog %} diff --git a/plugins/CorePluginsAdmin/templates/pluginMetadata.twig b/plugins/CorePluginsAdmin/templates/pluginMetadata.twig deleted file mode 100644 index 2c48868786..0000000000 --- a/plugins/CorePluginsAdmin/templates/pluginMetadata.twig +++ /dev/null @@ -1,9 +0,0 @@ -{% import '@CorePluginsAdmin/macros.twig' as plugins %} - -<hr class="metadataSeparator"/> -<ul class="metadata"> - <li class="odd">{{ 'CorePluginsAdmin_Version'|translate }}: <strong>{{ plugin.latestVersion }}</strong></li> - <li class="even">{{ 'CorePluginsAdmin_Updated'|translate }}: <strong>{{ plugin.lastUpdated }}</strong></li> - <li class="odd">{{ 'General_Downloads'|translate }}: <strong>{{ plugin.numDownloads }}</strong></li> - <li class="even">{{ 'CorePluginsAdmin_Developer'|translate }}: <strong>{{ plugins.pluginDeveloper(plugin.owner) }}</strong></li> -</ul>
\ No newline at end of file diff --git a/plugins/CorePluginsAdmin/templates/pluginOverview.twig b/plugins/CorePluginsAdmin/templates/pluginOverview.twig deleted file mode 100644 index f49d8878ed..0000000000 --- a/plugins/CorePluginsAdmin/templates/pluginOverview.twig +++ /dev/null @@ -1,29 +0,0 @@ -{% import '@CorePluginsAdmin/macros.twig' as plugins %} - -{% if isSuperUser %} - {% if plugin.canBeUpdated and 0 == plugin.missingRequirements|length %} - <a class="update" - href="{{ linkTo({'action':'updatePlugin', 'pluginName': plugin.name, 'nonce': updateNonce}) }}" - >{{ 'CoreUpdater_UpdateTitle'|translate }}</a> - {% elseif plugin.isInstalled %} - <span class="install">{{ 'General_Installed'|translate }}</span> - {% elseif 0 < plugin.missingRequirements|length %} - {% else %} - <a href="{{ linkTo({'action': 'installPlugin', 'pluginName': plugin.name, 'nonce': installNonce}) }}" - class="install">{{ 'CorePluginsAdmin_ActionInstall'|translate }}</a> - {% endif %} -{% endif %} - -<h3 class="header" title="{{ 'General_MoreDetails'|translate }}"> - <a href="javascript:void(0);" class="more">{{ plugin.name }}</a> -</h3> -<p class="description">{{ plugin.description }} - <br /> - <a href="javascript:void(0);" title="{{ 'General_MoreDetails'|translate }}" class="more">› {{ 'General_MoreLowerCase'|translate }}</a> -</p> - -{% if plugin.canBeUpdated %} - <p class="updateAvailableNotice" data-activePluginTab="changelog">{{ 'CorePluginsAdmin_PluginUpdateAvailable'|translate(plugin.currentVersion, plugin.latestVersion) }}</p> -{% endif %} - -{{ plugins.missingRequirementsPleaseUpdateNotice(plugin) }}
\ No newline at end of file diff --git a/plugins/CorePluginsAdmin/templates/themeOverview.twig b/plugins/CorePluginsAdmin/templates/themeOverview.twig deleted file mode 100644 index 3458b309c1..0000000000 --- a/plugins/CorePluginsAdmin/templates/themeOverview.twig +++ /dev/null @@ -1,30 +0,0 @@ -{% import '@CorePluginsAdmin/macros.twig' as plugins %} - -{% if isSuperUser %} - {% if plugin.canBeUpdated and 0 == plugin.missingRequirements|length %} - <a href="{{ linkTo({'action':'updatePlugin', 'pluginName': plugin.name, 'nonce': updateNonce}) }}" - class="update" - >{{ 'CoreUpdater_UpdateTitle'|translate }}</a> - {% elseif plugin.isInstalled %} - <span class="install">{{ 'General_Installed'|translate }}</span> - {% elseif 0 < plugin.missingRequirements|length %} - {% else %} - <a href="{{ linkTo({'action': 'installPlugin', 'pluginName': plugin.name, 'nonce': installNonce}) }}" - class="install">{{ 'CorePluginsAdmin_ActionInstall'|translate }}</a> - {% endif %} -{% endif %} - -<h3 class="header" title="{{ 'General_MoreDetails'|translate }}"> - <a href="javascript:void(0);" class="more">{{ plugin.name }}</a> -</h3> - -<p class="description">{% if plugin.featured %}{{ plugins.featuredIcon('right') }}{% endif %}{{ plugin.description }}</p> - -{% if plugin.canBeUpdated %} - <p class="updateAvailableNotice">{{ 'CorePluginsAdmin_PluginUpdateAvailable'|translate(plugin.currentVersion, plugin.latestVersion) }}</p> -{% endif %} - -{{ plugins.missingRequirementsPleaseUpdateNotice(plugin) }} - -<a href="javascript:void(0);" class="more"><img title="{{ 'General_MoreDetails'|translate }}" - class="preview" src="{{ plugin.screenshots|first }}?w=250&h=250"/></a> |