From 10d482f1d3deb4c717fbb87f523428196634a326 Mon Sep 17 00:00:00 2001 From: Thomas Steur Date: Wed, 9 Sep 2015 14:53:39 +0000 Subject: Left menu design --- config/global.ini.php | 2 - core/Menu/MenuAbstract.php | 11 + core/Period.php | 1 + core/Plugin/Controller.php | 1 - core/Updates/2.15.0-b13.php | 45 +++ lang/en.json | 2 +- plugins/API/templates/listAllAPI.twig | 11 +- plugins/CoreAdminHome/CoreAdminHome.php | 1 - plugins/CoreAdminHome/Menu.php | 10 +- .../CoreAdminHome/stylesheets/generalSettings.less | 16 +- plugins/CoreAdminHome/stylesheets/menu.less | 71 ---- plugins/CoreAdminHome/templates/_menu.twig | 3 - plugins/CoreHome/CoreHome.php | 19 +- plugins/CoreHome/Menu.php | 14 +- .../enrichedheadline.directive.less | 10 + .../menudropdown/menudropdown.directive.less | 8 +- .../quick-access/quick-access.controller.js | 78 +++++ .../quick-access/quick-access.directive.html | 36 ++ .../quick-access/quick-access.directive.js | 258 ++++++++++++++ .../quick-access/quick-access.directive.less | 55 +++ .../angularjs/selector/selector.directive.js | 86 +++++ .../angularjs/selector/selector.directive.less | 59 ++++ .../siteselector/siteselector.directive.html | 23 +- .../siteselector/siteselector.directive.js | 8 +- .../siteselector/siteselector.directive.less | 227 ++++++------ plugins/CoreHome/javascripts/calendar.js | 15 - plugins/CoreHome/javascripts/corehome.js | 17 +- plugins/CoreHome/javascripts/menu.js | 118 +++++-- plugins/CoreHome/javascripts/menu_init.js | 15 +- plugins/CoreHome/javascripts/top_controls.js | 34 +- plugins/CoreHome/lang/en.json | 4 +- plugins/CoreHome/stylesheets/coreHome.less | 62 +--- .../CoreHome/stylesheets/dataTable/_dataTable.less | 4 +- .../stylesheets/jquery.ui.autocomplete.css | 2 +- plugins/CoreHome/stylesheets/layout.less | 390 +++++++++++++++++++++ plugins/CoreHome/stylesheets/menu.less | 177 ---------- plugins/CoreHome/stylesheets/notification.less | 5 +- plugins/CoreHome/stylesheets/zen-mode.less | 10 +- .../ReportsByDimension/_reportsByDimension.twig | 2 +- plugins/CoreHome/templates/_headerMessage.twig | 46 ++- plugins/CoreHome/templates/_indexContent.twig | 19 - plugins/CoreHome/templates/_menu.twig | 65 ++-- plugins/CoreHome/templates/_periodSelect.twig | 10 +- plugins/CoreHome/templates/_siteSelectHeader.twig | 4 +- plugins/CoreHome/templates/_topBar.twig | 36 +- plugins/CoreHome/templates/_topBarTopMenu.twig | 37 -- plugins/CoreHome/templates/_topScreen.twig | 20 +- plugins/CoreHome/templates/_uiControl.twig | 1 + plugins/CoreHome/templates/_userMenu.twig | 3 - .../CoreHome/templates/getDefaultIndexView.twig | 22 +- plugins/CoreHome/templates/macros.twig | 26 -- plugins/CorePluginsAdmin/Menu.php | 4 +- plugins/CoreVisualizations/javascripts/jqplot.js | 2 +- plugins/Dashboard/Dashboard.php | 1 + plugins/Dashboard/DashboardManagerControl.php | 2 +- plugins/Dashboard/DashboardSettingsControlBase.php | 2 +- plugins/Dashboard/Menu.php | 21 +- plugins/Dashboard/javascripts/dashboard.js | 14 +- plugins/Dashboard/javascripts/dashboardObject.js | 14 +- plugins/Dashboard/javascripts/widgetMenu.js | 9 +- plugins/Dashboard/stylesheets/dashboard.less | 47 +-- plugins/Dashboard/stylesheets/standalone.css | 9 +- plugins/Dashboard/stylesheets/widget.less | 2 +- .../Dashboard/templates/_dashboardSettings.twig | 8 +- plugins/Dashboard/templates/index.twig | 5 +- .../SimpleUITest_simplePage.png | Bin 15196 -> 15064 bytes .../SimpleUITest_simplePagePartial.png | Bin 9676 -> 10004 bytes plugins/Goals/templates/manageGoals.twig | 6 +- plugins/ImageGraph/templates/testAllSizes.twig | 8 +- plugins/Installation/stylesheets/installation.css | 4 +- plugins/LeftMenu/API.php | 44 --- plugins/LeftMenu/LeftMenu.php | 35 -- plugins/LeftMenu/Settings.php | 67 ---- plugins/LeftMenu/lang/bg.json | 5 - plugins/LeftMenu/lang/cs.json | 11 - plugins/LeftMenu/lang/da.json | 10 - plugins/LeftMenu/lang/de.json | 11 - plugins/LeftMenu/lang/el.json | 11 - plugins/LeftMenu/lang/en.json | 11 - plugins/LeftMenu/lang/es.json | 11 - plugins/LeftMenu/lang/fi.json | 8 - plugins/LeftMenu/lang/fr.json | 11 - plugins/LeftMenu/lang/hi.json | 11 - plugins/LeftMenu/lang/it.json | 11 - plugins/LeftMenu/lang/ja.json | 10 - plugins/LeftMenu/lang/nl.json | 11 - plugins/LeftMenu/lang/pl.json | 6 - plugins/LeftMenu/lang/pt-br.json | 11 - plugins/LeftMenu/lang/pt.json | 11 - plugins/LeftMenu/lang/ro.json | 10 - plugins/LeftMenu/lang/ru.json | 9 - plugins/LeftMenu/lang/sr.json | 11 - plugins/LeftMenu/lang/sv.json | 11 - plugins/LeftMenu/lang/tl.json | 10 - plugins/LeftMenu/lang/tr.json | 5 - plugins/LeftMenu/lang/zh-cn.json | 6 - plugins/LeftMenu/stylesheets/theme.less | 150 -------- plugins/LeftMenu/tests/Integration/APITest.php | 149 -------- plugins/Morpheus/Menu.php | 22 ++ plugins/Morpheus/fonts/piwik.eot | Bin 15684 -> 20640 bytes plugins/Morpheus/fonts/piwik.ttf | Bin 15528 -> 20484 bytes plugins/Morpheus/images/logo.svg | 10 +- plugins/Morpheus/images/signout.png | Bin 0 -> 345 bytes plugins/Morpheus/javascripts/piwikHelper.js | 16 + plugins/Morpheus/stylesheets/base/colors.less | 1 - plugins/Morpheus/stylesheets/base/icons.css | 156 ++++++--- plugins/Morpheus/stylesheets/base/mixins.less | 2 +- plugins/Morpheus/stylesheets/general/_admin.less | 50 --- plugins/Morpheus/stylesheets/general/_forms.less | 38 +- plugins/Morpheus/stylesheets/ieonly.css | 6 +- plugins/Morpheus/stylesheets/main.less | 171 ++------- plugins/Morpheus/stylesheets/theme.less | 4 +- plugins/Morpheus/stylesheets/ui/_components.less | 59 +--- plugins/Morpheus/stylesheets/uibase/_header.less | 34 +- .../stylesheets/uibase/_headerMessage.less | 32 +- .../stylesheets/uibase/_languageSelect.less | 13 + plugins/Morpheus/stylesheets/uibase/_loading.less | 13 +- .../Morpheus/stylesheets/uibase/_periodSelect.less | 21 +- plugins/Morpheus/templates/admin.twig | 32 +- plugins/Morpheus/templates/dashboard.twig | 33 +- plugins/Morpheus/templates/demo.twig | 5 + plugins/Morpheus/templates/user.twig | 31 +- .../angularjs/dashboard/dashboard.directive.less | 11 +- plugins/MultiSites/templates/getSitesInfo.twig | 17 +- plugins/Overlay/stylesheets/overlay.css | 10 +- plugins/ScheduledReports/templates/index.twig | 12 +- plugins/SegmentEditor/SegmentSelectorControl.php | 2 +- plugins/SegmentEditor/javascripts/Segmentation.js | 14 +- .../SegmentEditor/stylesheets/segmentation.less | 92 +++-- .../SegmentEditor/templates/_segmentSelector.twig | 11 +- plugins/SitesManager/stylesheets/SitesManager.less | 3 +- .../SitesManager/templates/siteWithoutData.twig | 6 +- plugins/UserCountryMap/javascripts/realtime-map.js | 11 +- .../UserCountryMap/stylesheets/realtime-map.less | 4 + plugins/UsersManager/templates/index.twig | 2 - plugins/UsersManager/templates/userSettings.twig | 2 +- plugins/Widgetize/Menu.php | 1 - plugins/Widgetize/templates/index.twig | 11 +- plugins/ZenMode/ZenMode.php | 51 --- .../quick-access/quick-access.directive.html | 41 --- .../quick-access/quick-access.directive.js | 140 -------- .../quick-access/quick-access.directive.less | 20 -- .../zen-mode/zen-mode-switcher.directive.js | 54 --- plugins/ZenMode/angularjs/zen-mode/zen-mode.less | 93 ----- plugins/ZenMode/javascripts/zen-mode.js | 138 -------- plugins/ZenMode/lang/cs.json | 10 - plugins/ZenMode/lang/da.json | 9 - plugins/ZenMode/lang/de.json | 10 - plugins/ZenMode/lang/el.json | 10 - plugins/ZenMode/lang/en.json | 10 - plugins/ZenMode/lang/es.json | 10 - plugins/ZenMode/lang/fa.json | 5 - plugins/ZenMode/lang/fr.json | 10 - plugins/ZenMode/lang/hi.json | 8 - plugins/ZenMode/lang/it.json | 10 - plugins/ZenMode/lang/ja.json | 9 - plugins/ZenMode/lang/nb.json | 6 - plugins/ZenMode/lang/nl.json | 10 - plugins/ZenMode/lang/pl.json | 8 - plugins/ZenMode/lang/pt-br.json | 10 - plugins/ZenMode/lang/ro.json | 9 - plugins/ZenMode/lang/ru.json | 9 - plugins/ZenMode/lang/sr.json | 10 - plugins/ZenMode/lang/sv.json | 9 - plugins/ZenMode/lang/ta.json | 6 - plugins/ZenMode/lang/tl.json | 9 - tests/UI/expected-ui-screenshots | 2 +- tests/UI/specs/DashboardManager_spec.js | 2 +- tests/UI/specs/Dashboard_spec.js | 24 +- tests/UI/specs/EmptySite_spec.js | 2 +- tests/UI/specs/Login_spec.js | 4 +- tests/UI/specs/MeasurableManager_spec.js | 2 +- tests/UI/specs/Menus_spec.js | 29 +- tests/UI/specs/MultiSites_spec.js | 2 +- tests/UI/specs/QuickAccess_spec.js | 75 ++++ tests/UI/specs/SegmentSelectorEditor_spec.js | 14 +- tests/UI/specs/SiteSelector_spec.js | 2 +- tests/UI/specs/UIIntegration_spec.js | 59 ++-- .../screenshot-testing/support/page-renderer.js | 48 ++- tests/resources/screenshot-override/override.css | 4 +- 180 files changed, 2171 insertions(+), 2804 deletions(-) create mode 100644 core/Updates/2.15.0-b13.php delete mode 100644 plugins/CoreAdminHome/stylesheets/menu.less delete mode 100644 plugins/CoreAdminHome/templates/_menu.twig create mode 100644 plugins/CoreHome/angularjs/quick-access/quick-access.controller.js create mode 100644 plugins/CoreHome/angularjs/quick-access/quick-access.directive.html create mode 100644 plugins/CoreHome/angularjs/quick-access/quick-access.directive.js create mode 100644 plugins/CoreHome/angularjs/quick-access/quick-access.directive.less create mode 100644 plugins/CoreHome/angularjs/selector/selector.directive.js create mode 100644 plugins/CoreHome/angularjs/selector/selector.directive.less create mode 100644 plugins/CoreHome/stylesheets/layout.less delete mode 100644 plugins/CoreHome/stylesheets/menu.less delete mode 100644 plugins/CoreHome/templates/_indexContent.twig delete mode 100644 plugins/CoreHome/templates/_topBarTopMenu.twig delete mode 100644 plugins/CoreHome/templates/_userMenu.twig delete mode 100644 plugins/CoreHome/templates/macros.twig delete mode 100644 plugins/LeftMenu/API.php delete mode 100755 plugins/LeftMenu/LeftMenu.php delete mode 100644 plugins/LeftMenu/Settings.php delete mode 100644 plugins/LeftMenu/lang/bg.json delete mode 100644 plugins/LeftMenu/lang/cs.json delete mode 100644 plugins/LeftMenu/lang/da.json delete mode 100644 plugins/LeftMenu/lang/de.json delete mode 100644 plugins/LeftMenu/lang/el.json delete mode 100644 plugins/LeftMenu/lang/en.json delete mode 100644 plugins/LeftMenu/lang/es.json delete mode 100644 plugins/LeftMenu/lang/fi.json delete mode 100644 plugins/LeftMenu/lang/fr.json delete mode 100644 plugins/LeftMenu/lang/hi.json delete mode 100644 plugins/LeftMenu/lang/it.json delete mode 100644 plugins/LeftMenu/lang/ja.json delete mode 100644 plugins/LeftMenu/lang/nl.json delete mode 100644 plugins/LeftMenu/lang/pl.json delete mode 100644 plugins/LeftMenu/lang/pt-br.json delete mode 100644 plugins/LeftMenu/lang/pt.json delete mode 100644 plugins/LeftMenu/lang/ro.json delete mode 100644 plugins/LeftMenu/lang/ru.json delete mode 100644 plugins/LeftMenu/lang/sr.json delete mode 100644 plugins/LeftMenu/lang/sv.json delete mode 100644 plugins/LeftMenu/lang/tl.json delete mode 100644 plugins/LeftMenu/lang/tr.json delete mode 100644 plugins/LeftMenu/lang/zh-cn.json delete mode 100644 plugins/LeftMenu/stylesheets/theme.less delete mode 100644 plugins/LeftMenu/tests/Integration/APITest.php mode change 100644 => 100755 plugins/Morpheus/fonts/piwik.eot mode change 100644 => 100755 plugins/Morpheus/fonts/piwik.ttf create mode 100644 plugins/Morpheus/images/signout.png delete mode 100644 plugins/ZenMode/ZenMode.php delete mode 100644 plugins/ZenMode/angularjs/quick-access/quick-access.directive.html delete mode 100644 plugins/ZenMode/angularjs/quick-access/quick-access.directive.js delete mode 100644 plugins/ZenMode/angularjs/quick-access/quick-access.directive.less delete mode 100644 plugins/ZenMode/angularjs/zen-mode/zen-mode-switcher.directive.js delete mode 100644 plugins/ZenMode/angularjs/zen-mode/zen-mode.less delete mode 100644 plugins/ZenMode/javascripts/zen-mode.js delete mode 100644 plugins/ZenMode/lang/cs.json delete mode 100644 plugins/ZenMode/lang/da.json delete mode 100644 plugins/ZenMode/lang/de.json delete mode 100644 plugins/ZenMode/lang/el.json delete mode 100755 plugins/ZenMode/lang/en.json delete mode 100644 plugins/ZenMode/lang/es.json delete mode 100644 plugins/ZenMode/lang/fa.json delete mode 100644 plugins/ZenMode/lang/fr.json delete mode 100644 plugins/ZenMode/lang/hi.json delete mode 100644 plugins/ZenMode/lang/it.json delete mode 100644 plugins/ZenMode/lang/ja.json delete mode 100644 plugins/ZenMode/lang/nb.json delete mode 100644 plugins/ZenMode/lang/nl.json delete mode 100644 plugins/ZenMode/lang/pl.json delete mode 100644 plugins/ZenMode/lang/pt-br.json delete mode 100644 plugins/ZenMode/lang/ro.json delete mode 100644 plugins/ZenMode/lang/ru.json delete mode 100644 plugins/ZenMode/lang/sr.json delete mode 100644 plugins/ZenMode/lang/sv.json delete mode 100644 plugins/ZenMode/lang/ta.json delete mode 100644 plugins/ZenMode/lang/tl.json create mode 100644 tests/UI/specs/QuickAccess_spec.js diff --git a/config/global.ini.php b/config/global.ini.php index 2b86a1c131..cb49709b37 100644 --- a/config/global.ini.php +++ b/config/global.ini.php @@ -780,8 +780,6 @@ Plugins[] = MobileMessaging Plugins[] = Overlay Plugins[] = SegmentEditor Plugins[] = Insights -Plugins[] = ZenMode -Plugins[] = LeftMenu Plugins[] = Morpheus Plugins[] = Contents Plugins[] = TestRunner diff --git a/core/Menu/MenuAbstract.php b/core/Menu/MenuAbstract.php index 7651a1199d..a742df41ab 100644 --- a/core/Menu/MenuAbstract.php +++ b/core/Menu/MenuAbstract.php @@ -30,6 +30,7 @@ abstract class MenuAbstract extends Singleton protected $edits = array(); protected $renames = array(); protected $orderingApplied = false; + protected $menuIcons = array(); protected static $menus = array(); /** @@ -48,6 +49,11 @@ abstract class MenuAbstract extends Singleton return $this->menu; } + public function registerMenuIcon($menuName, $icon) + { + $this->menuIcons[$menuName] = $icon; + } + /** * Returns a list of available plugin menu instances. * @@ -164,6 +170,11 @@ abstract class MenuAbstract extends Singleton $this->menu[$menuName]['_order'] = $order; $this->menu[$menuName]['_name'] = $menuName; $this->menu[$menuName]['_tooltip'] = $tooltip; + if (!empty($this->menuIcons[$menuName])) { + $this->menu[$menuName]['_icon'] = $this->menuIcons[$menuName]; + } else { + $this->menu[$menuName]['_icon'] = 'icon-arrow-right'; + } } if (!empty($subMenuName)) { $this->menu[$menuName][$subMenuName]['_url'] = $url; diff --git a/core/Period.php b/core/Period.php index 11ddb9c7c2..80dc9f6f21 100644 --- a/core/Period.php +++ b/core/Period.php @@ -104,6 +104,7 @@ abstract class Period if (self::isMultiplePeriod($dateString, 'day')) { return; } + Date::factory($dateString); } diff --git a/core/Plugin/Controller.php b/core/Plugin/Controller.php index 3aab8374fb..df56b4a8da 100644 --- a/core/Plugin/Controller.php +++ b/core/Plugin/Controller.php @@ -15,7 +15,6 @@ use Piwik\API\Request; use Piwik\Common; use Piwik\Config as PiwikConfig; use Piwik\Config; -use Piwik\Container\StaticContainer; use Piwik\DataTable\Filter\CalculateEvolutionFilter; use Piwik\Date; use Piwik\Exception\NoPrivilegesException; diff --git a/core/Updates/2.15.0-b13.php b/core/Updates/2.15.0-b13.php new file mode 100644 index 0000000000..2420eeaecc --- /dev/null +++ b/core/Updates/2.15.0-b13.php @@ -0,0 +1,45 @@ +uninstallPlugin('LeftMenu'); + $this->uninstallPlugin('ZenMode'); + } + + private function uninstallPlugin($plugin) + { + $pluginManager = Manager::getInstance(); + + if ($pluginManager->isPluginInstalled($plugin)) { + if ($pluginManager->isPluginActivated($plugin)) { + $pluginManager->deactivatePlugin($plugin); + } + + $pluginManager->unloadPlugin($plugin); + $pluginManager->uninstallPlugin($plugin); + } else { + $this->makeSurePluginIsRemovedFromFilesystem($plugin); + } + } + + private function makeSurePluginIsRemovedFromFilesystem($plugin) + { + Manager::deletePluginFromFilesystem($plugin); + } +} diff --git a/lang/en.json b/lang/en.json index 8e954f711f..3925c960e7 100644 --- a/lang/en.json +++ b/lang/en.json @@ -402,7 +402,7 @@ "YearsDays": "%1$s years %2$s days", "Yes": "Yes", "YouAreCurrentlyUsing": "You are currently using Piwik %s.", - "YouAreViewingDemoShortMessage": "You are currently viewing the demo of Piwik", + "YouAreViewingDemoShortMessage": "You are viewing the demo of Piwik", "YouMustBeLoggedIn": "You must be logged in to access this functionality.", "YourChangesHaveBeenSaved": "Your changes have been saved." }, diff --git a/plugins/API/templates/listAllAPI.twig b/plugins/API/templates/listAllAPI.twig index 47a1327c36..d3c551c997 100644 --- a/plugins/API/templates/listAllAPI.twig +++ b/plugins/API/templates/listAllAPI.twig @@ -2,18 +2,17 @@ {% set title %}{{ 'API_ReportingApiReference'|translate }}{% endset %} +{% block topcontrols %} + {% include "@CoreHome/_siteSelectHeader.twig" %} + {% include "@CoreHome/_periodSelect.twig" %} +{% endblock %} + {% block content %}

{{ title }}

- {% include "@CoreHome/_siteSelectHeader.twig" %} - -
- {% include "@CoreHome/_periodSelect.twig" %} -
-

{{ 'API_PluginDescription'|translate }}

diff --git a/plugins/CoreAdminHome/CoreAdminHome.php b/plugins/CoreAdminHome/CoreAdminHome.php index 75f1230cd6..305506038a 100644 --- a/plugins/CoreAdminHome/CoreAdminHome.php +++ b/plugins/CoreAdminHome/CoreAdminHome.php @@ -38,7 +38,6 @@ class CoreAdminHome extends \Piwik\Plugin public function getStylesheetFiles(&$stylesheets) { $stylesheets[] = "libs/jquery/themes/base/jquery-ui.min.css"; - $stylesheets[] = "plugins/CoreAdminHome/stylesheets/menu.less"; $stylesheets[] = "plugins/Morpheus/stylesheets/base.less"; $stylesheets[] = "plugins/Morpheus/stylesheets/main.less"; $stylesheets[] = "plugins/CoreAdminHome/stylesheets/generalSettings.less"; diff --git a/plugins/CoreAdminHome/Menu.php b/plugins/CoreAdminHome/Menu.php index 7994979450..91d8ac8197 100644 --- a/plugins/CoreAdminHome/Menu.php +++ b/plugins/CoreAdminHome/Menu.php @@ -23,10 +23,10 @@ class Menu extends \Piwik\Plugin\Menu $hasAdminAccess = Piwik::isUserHasSomeAdminAccess(); if ($hasAdminAccess) { - $menu->addManageItem(null, "", $order = 1); - $menu->addSettingsItem(null, "", $order = 5); - $menu->addDiagnosticItem(null, "", $order = 10); - $menu->addDevelopmentItem(null, "", $order = 15); + $menu->addManageItem(null, array(), $order = 1); + $menu->addSettingsItem(null, array(), $order = 5); + $menu->addDiagnosticItem(null, array(), $order = 10); + $menu->addDevelopmentItem(null, array(), $order = 15); if (Piwik::hasUserSuperUserAccess()) { $menu->addSettingsItem('General_General', @@ -51,7 +51,7 @@ class Menu extends \Piwik\Plugin\Menu $url = $this->urlForAction('generalSettings'); } - $menu->addItem('CoreAdminHome_Administration', null, $url, 10); + $menu->addItem('icon-configure', null, $url, 980, Piwik::translate('CoreAdminHome_Administration')); } } diff --git a/plugins/CoreAdminHome/stylesheets/generalSettings.less b/plugins/CoreAdminHome/stylesheets/generalSettings.less index eac16b6c4c..9d232f789b 100644 --- a/plugins/CoreAdminHome/stylesheets/generalSettings.less +++ b/plugins/CoreAdminHome/stylesheets/generalSettings.less @@ -13,9 +13,6 @@ } #content.admin { - margin: 0 0 0 260px; - padding: 0 0 40px; - display: table; font-size: 13px; // Fix the 

 blocks because of the display: table
@@ -25,8 +22,8 @@
 }
 
 .admin #header_message {
-    margin-top: 10px;
-    margin-right: 10px;
+    margin-top: 8px;
+    margin-right: 8px;
 }
 
 table.admin {
@@ -92,9 +89,9 @@ table.admin tbody td:hover, table.admin tbody th:hover {
     width: 100%;
 
     &:first-of-type:not(.secondary) {
-        margin-top: 17px;
+        margin-top: 7px;
         margin-bottom: 16px;
-        border-bottom: 1px solid #DADADA;
+        border-bottom: 1px solid @theme-color-background-tinyContrast;
     }
 }
 
@@ -162,11 +159,6 @@ table.admin tbody td:hover, table.admin tbody th:hover {
     margin-left: 0px;
 }
 
-/* to override .admin a */
-.admin .sites_autocomplete a {
-    color: #255792;
-}
-
 /* trusted host styles */
 #trustedHostSettings input {
     width: 238px;
diff --git a/plugins/CoreAdminHome/stylesheets/menu.less b/plugins/CoreAdminHome/stylesheets/menu.less
deleted file mode 100644
index af76bc8281..0000000000
--- a/plugins/CoreAdminHome/stylesheets/menu.less
+++ /dev/null
@@ -1,71 +0,0 @@
-#container {
-  clear: left;
-}
-
-.Menu--admin {
-    padding: 0;
-    float: left;
-    width: 240px;
-}
-
-.Menu--admin > .Menu-tabList {
-    -moz-background-size: 5px 100%;
-    background-size: 5px 100%;
-    background-position: 0 0, 100% 0;
-    background-repeat: no-repeat;
-}
-
-.Menu--admin > .Menu-tabList {
-    padding-left: 5px;
-    margin-bottom: 0;
-    margin-top: 0.1em;
-    border: 1px solid @theme-color-background-lowContrast;
-    border-radius: 5px;
-    border-left: 0px;
-}
-
-.Menu--admin > .Menu-tabList li {
-    list-style: none;
-    margin: 0;
-}
-
-.Menu--admin > .Menu-tabList > li {
-    padding-bottom: 5px;
-}
-
-.Menu--admin > .Menu-tabList > li > a,
-.Menu--admin > .Menu-tabList > li > span {
-    text-decoration: none;
-    border-bottom: 1px dotted #778;
-    display: block;
-    padding: 5px 10px;
-    font-size: 18px;
-    color: #7E7363;
-}
-
-.Menu--admin > .Menu-tabList li li a {
-    text-decoration: none;
-    padding: 0.6em 0.9em;
-    font-size: 14px;
-    display: block;
-}
-
-.Menu--admin > .Menu-tabList li li a:link,
-.Menu--admin > .Menu-tabList li li a:visited {
-    color: #000;
-}
-
-.Menu--admin > .Menu-tabList li li a:hover,
-.Menu--admin > .Menu-tabList li li a.active {
-    color: @theme-color-menu-contrast-textActive !important;
-    background: @theme-color-menu-contrast-background;
-    border-color: #000;
-}
-
-.Menu--admin > .Menu-tabList li li a:hover {
-    text-decoration: underline;
-}
-
-.Menu--admin > .Menu-tabList li li a.current {
-    background: #defdbb;
-}
diff --git a/plugins/CoreAdminHome/templates/_menu.twig b/plugins/CoreAdminHome/templates/_menu.twig
deleted file mode 100644
index 080f36e93c..0000000000
--- a/plugins/CoreAdminHome/templates/_menu.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{% import '@CoreHome/macros.twig' as corehome %}
-
-{{ corehome.sidebarMenu(adminMenu, currentModule, currentAction) }}
\ No newline at end of file
diff --git a/plugins/CoreHome/CoreHome.php b/plugins/CoreHome/CoreHome.php
index 23da8326aa..802c79004b 100644
--- a/plugins/CoreHome/CoreHome.php
+++ b/plugins/CoreHome/CoreHome.php
@@ -61,7 +61,6 @@ class CoreHome extends \Piwik\Plugin
         $stylesheets[] = "plugins/Morpheus/stylesheets/base.less";
         $stylesheets[] = "plugins/Morpheus/stylesheets/main.less";
         $stylesheets[] = "plugins/CoreHome/stylesheets/coreHome.less";
-        $stylesheets[] = "plugins/CoreHome/stylesheets/menu.less";
         $stylesheets[] = "plugins/CoreHome/stylesheets/dataTable.less";
         $stylesheets[] = "plugins/CoreHome/stylesheets/cloud.less";
         $stylesheets[] = "plugins/CoreHome/stylesheets/jquery.ui.autocomplete.css";
@@ -72,9 +71,12 @@ class CoreHome extends \Piwik\Plugin
         $stylesheets[] = "plugins/CoreHome/stylesheets/sparklineColors.less";
         $stylesheets[] = "plugins/CoreHome/stylesheets/notification.less";
         $stylesheets[] = "plugins/CoreHome/stylesheets/zen-mode.less";
+        $stylesheets[] = "plugins/CoreHome/stylesheets/layout.less";
         $stylesheets[] = "plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.directive.less";
         $stylesheets[] = "plugins/CoreHome/angularjs/dialogtoggler/ngdialog.less";
         $stylesheets[] = "plugins/CoreHome/angularjs/notification/notification.directive.less";
+        $stylesheets[] = "plugins/CoreHome/angularjs/quick-access/quick-access.directive.less";
+        $stylesheets[] = "plugins/CoreHome/angularjs/selector/selector.directive.less";
     }
 
     public function getJsFiles(&$jsFiles)
@@ -163,6 +165,11 @@ class CoreHome extends \Piwik\Plugin
 
         $jsFiles[] = "plugins/CoreHome/angularjs/ajax-form/ajax-form.controller.js";
         $jsFiles[] = "plugins/CoreHome/angularjs/ajax-form/ajax-form.directive.js";
+
+        $jsFiles[] = "plugins/CoreHome/angularjs/quick-access/quick-access.controller.js";
+        $jsFiles[] = "plugins/CoreHome/angularjs/quick-access/quick-access.directive.js";
+
+        $jsFiles[] = "plugins/CoreHome/angularjs/selector/selector.directive.js";
     }
 
     public function getClientSideTranslationKeys(&$translationKeys)
@@ -171,8 +178,11 @@ class CoreHome extends \Piwik\Plugin
         $translationKeys[] = 'General_Loading';
         $translationKeys[] = 'General_Show';
         $translationKeys[] = 'General_Hide';
-        $translationKeys[] = 'Intl_Year_Short';
+        $translationKeys[] = 'General_Website';
+        $translationKeys[] = 'General_ChooseWebsite';
+        $translationKeys[] = 'Intl_YearShort';
         $translationKeys[] = 'General_MultiSitesSummary';
+        $translationKeys[] = 'General_SearchNoResults';
         $translationKeys[] = 'CoreHome_YouAreUsingTheLatestVersion';
         $translationKeys[] = 'CoreHome_IncludeRowsWithLowPopulation';
         $translationKeys[] = 'CoreHome_ExcludeRowsWithLowPopulation';
@@ -184,6 +194,7 @@ class CoreHome extends \Piwik\Plugin
         $translationKeys[] = 'CoreHome_UnFlattenDataTable';
         $translationKeys[] = 'CoreHome_ExternalHelp';
         $translationKeys[] = 'CoreHome_ClickToEditX';
+        $translationKeys[] = 'CoreHome_Menu';
         $translationKeys[] = 'SitesManager_NotFound';
         $translationKeys[] = 'Annotations_ViewAndAddAnnotations';
         $translationKeys[] = 'General_RowEvolutionRowActionTooltipTitle';
@@ -255,8 +266,10 @@ class CoreHome extends \Piwik\Plugin
         $translationKeys[] = 'General_LoadingData';
         $translationKeys[] = 'General_ErrorRequest';
         $translationKeys[] = 'General_YourChangesHaveBeenSaved';
+        $translationKeys[] = 'General_LearnMore';
         $translationKeys[] = 'CoreHome_UndoPivotBySubtable';
         $translationKeys[] = 'CoreHome_PivotBySubtable';
-        $translationKeys[] = 'General_LearnMore';
+        $translationKeys[] = 'CoreHome_QuickAccessTitle';
+        $translationKeys[] = 'CoreHome_Segments';
     }
 }
diff --git a/plugins/CoreHome/Menu.php b/plugins/CoreHome/Menu.php
index 83e5d053d6..03c847ac97 100644
--- a/plugins/CoreHome/Menu.php
+++ b/plugins/CoreHome/Menu.php
@@ -27,24 +27,24 @@ class Menu extends \Piwik\Plugin\Menu
         }
 
         if (Plugin\Manager::getInstance()->isPluginActivated('Feedback')) {
-            $menu->addItem('General_Help', null, array('module' => 'Feedback', 'action' => 'index'));
+            $menu->addItem('icon-help', null, array('module' => 'Feedback', 'action' => 'index'), $order = 990, Piwik::translate('General_Help'));
         }
 
         if (Piwik::isUserIsAnonymous()) {
-            if (Plugin\Manager::getInstance()->isPluginActivated('Feedback')) {
-                $menu->addItem($login, null, array('module' => 'Feedback', 'action' => 'index'), 998);
+            if (Plugin\Manager::getInstance()->isPluginActivated('ScheduledReports')) {
+                $menu->addItem('icon-user', null, array('module' => 'ScheduledReports', 'action' => 'index'), 970, $login);
             } else {
-                $menu->addItem($login, null, array('module' => 'API', 'action' => 'listAllAPI'), 998);
+                $menu->addItem('icon-user', null, array('module' => 'API', 'action' => 'listAllAPI'), 970, $login);
             }
         } else {
-            $menu->addItem($login, null, array('module' => 'UsersManager', 'action' => 'userSettings'), 998);
+            $menu->addItem('icon-user', null, array('module' => 'UsersManager', 'action' => 'userSettings'), 970, $login);
         }
 
         $module = $this->getLoginModule();
         if (Piwik::isUserIsAnonymous()) {
-            $menu->addItem('Login_LogIn', null, array('module' => $module, 'action' => false), 999);
+            $menu->addItem('icon-sign-in', null, array('module' => $module, 'action' => false), 1000, Piwik::translate('Login_LogIn'));
         } else {
-            $menu->addItem('General_Logout', null, array('module' => $module, 'action' => 'logout', 'idSite' => null), 999);
+            $menu->addItem('icon-sign-out', null, array('module' => $module, 'action' => 'logout', 'idSite' => null), 1000, Piwik::translate('General_Logout'));
         }
     }
 
diff --git a/plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.directive.less b/plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.directive.less
index 054c0bdba0..4ffb8326f0 100644
--- a/plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.directive.less
+++ b/plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.directive.less
@@ -2,6 +2,16 @@
     display: none;
 }
 
+[piwik-enriched-headline] {
+    visibility: hidden;
+    height: 47px;
+}
+
+[piwik-enriched-headline].ng-isolate-scope {
+    visibility: visible;
+    height: auto;
+}
+
 .enrichedHeadline {
     min-height: 22px;
 
diff --git a/plugins/CoreHome/angularjs/menudropdown/menudropdown.directive.less b/plugins/CoreHome/angularjs/menudropdown/menudropdown.directive.less
index da8b79a1fc..05d0a0771f 100644
--- a/plugins/CoreHome/angularjs/menudropdown/menudropdown.directive.less
+++ b/plugins/CoreHome/angularjs/menudropdown/menudropdown.directive.less
@@ -25,7 +25,7 @@
   }
 
   .items {
-    z-index: 21;
+    z-index: 200;
     position: absolute;
     border: 1px solid @color-silver-l80 !important;
     background: @theme-color-background-base;
@@ -41,7 +41,7 @@
       .search_ico {
         position: absolute;
         right: 25px;
-        top: 22px;
+        top: 27px;
         margin: 0px;
         left: initial;
       }
@@ -74,11 +74,11 @@
       text-align: left;
 
       &:hover {
-        background: @color-silver-l80;
+        background: @theme-color-background-tinyContrast;
       }
 
       &.active {
-        background-color: @color-silver-l80;
+        background-color: @theme-color-background-tinyContrast;
       }
 
       &.category {
diff --git a/plugins/CoreHome/angularjs/quick-access/quick-access.controller.js b/plugins/CoreHome/angularjs/quick-access/quick-access.controller.js
new file mode 100644
index 0000000000..9e1fefba82
--- /dev/null
+++ b/plugins/CoreHome/angularjs/quick-access/quick-access.controller.js
@@ -0,0 +1,78 @@
+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+(function () {
+    angular.module('piwikApp').controller('QuickAccessController', QuickAccessController);
+
+    QuickAccessController.$inject = ['$scope', '$filter', 'siteSelectorModel'];
+
+    function QuickAccessController($scope, $filter, siteSelectorModel){
+
+        this.menuItems = [];
+        this.numMenuItems = 0;
+        this.sitesModel = siteSelectorModel;
+
+        this.onKeypress = function (event) {
+            if (38 == event.which) {
+                $scope.highlightPreviousItem();
+                event.preventDefault();
+            } else if (40 == event.which) {
+                $scope.highlightNextItem();
+                event.preventDefault();
+            } else if (13 == event.which) {
+                $scope.clickQuickAccessMenuItem();
+            }
+        };
+
+        this.searchMenu = function (searchTerm) {
+            searchTerm = searchTerm.toLowerCase();
+
+            var index = -1;
+            var menuItemsIndex = {};
+            var menuItems = [];
+
+            var moveToCategory = function (i, submenuItem) {
+                submenuItem = angular.copy(submenuItem); // force rerender of element to prevent weird side effects
+                submenuItem.menuIndex = ++index; // needed for proper highlighting with arrow keys
+
+                var category = submenuItem.category;
+                if (!(category in menuItemsIndex)) {
+                    menuItems.push({title: category, items: []});
+                    menuItemsIndex[category] = menuItems.length - 1;
+                }
+
+                var indexOfCategory = menuItemsIndex[category];
+                menuItems[indexOfCategory].items.push(submenuItem);
+            };
+
+            $scope.resetSearchIndex();
+
+            if ($scope.hasSitesSelector) {
+                this.sitesModel.searchSite(searchTerm);
+            }
+
+            var topMenuItems  = $filter('filter')($scope.getTopMenuItems(), searchTerm);
+            var leftMenuItems = $filter('filter')($scope.getLeftMenuItems(), searchTerm);
+            var segmentItems  = $filter('filter')($scope.getSegmentItems(), searchTerm);
+
+            $.each(topMenuItems, moveToCategory);
+            $.each(leftMenuItems, moveToCategory);
+            $.each(segmentItems, moveToCategory);
+
+            this.numMenuItems = topMenuItems.length + leftMenuItems.length + segmentItems.length;
+            this.menuItems = menuItems;
+        };
+
+        this.selectSite = function (idsite) {
+            this.sitesModel.loadSite(idsite);
+        };
+
+        this.selectMenuItem = function (index) {
+            $scope.selectMenuItem(index);
+        };
+
+    }
+})();
diff --git a/plugins/CoreHome/angularjs/quick-access/quick-access.directive.html b/plugins/CoreHome/angularjs/quick-access/quick-access.directive.html
new file mode 100644
index 0000000000..ccf97c14dc
--- /dev/null
+++ b/plugins/CoreHome/angularjs/quick-access/quick-access.directive.html
@@ -0,0 +1,36 @@
+

+    
+    
+    
    
+        
  • {{ 'General_SearchNoResults' | translate }}
    • 
+    

+    
+    
    
+        
  • {{ 'SitesManager_Sites' | translate }}
    • 
+        
  • {{ 'MultiSites_LoadingWebsites' | translate }}
    • 
+        
    • 
+    

+

\ No newline at end of file
diff --git a/plugins/CoreHome/angularjs/quick-access/quick-access.directive.js b/plugins/CoreHome/angularjs/quick-access/quick-access.directive.js
new file mode 100644
index 0000000000..226b325ee0
--- /dev/null
+++ b/plugins/CoreHome/angularjs/quick-access/quick-access.directive.js
@@ -0,0 +1,258 @@
+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+/**
+ * Usage:
+ * 
...

+ * Will show dialog once showDialog evaluates to true.
+ *
+ * Will execute the "executeMyFunction" function in the current scope once the yes button is pressed.
+ */
+(function () {
+    angular.module('piwikApp').directive('piwikQuickAccess', QuickAccessDirective);
+
+    QuickAccessDirective.$inject = ['$rootElement', '$timeout', 'piwik'];
+
+    function QuickAccessDirective ($rootElement, $timeout, piwik) {
+
+        return {
+            restrict: 'A',
+            replace: true,
+            scope: {},
+            templateUrl: 'plugins/CoreHome/angularjs/quick-access/quick-access.directive.html?cb=' + piwik.cacheBuster,
+            controller: 'QuickAccessController',
+            controllerAs: 'quickAccess',
+            link: function (scope, element, attrs) {
+
+                var menuIndex = -1; // the menu index is used to identify which element to click
+                var topMenuItems = []; // cache for top menu items
+                var leftMenuItems = []; // cache for left menu items
+                var segmentItems = []; // cache for segment items
+                var hasSegmentSelector = angular.element('.segmentEditorPanel').length;
+                scope.hasSitesSelector = angular.element('[piwik-siteselector]').length;
+
+                function trim(str) {
+                    return str.replace(/^\s+|\s+$/g,'');
+                }
+
+                scope.getTopMenuItems = function()
+                {
+                    if (topMenuItems && topMenuItems.length) {
+                        return topMenuItems;
+                    }
+
+                    var category = _pk_translate('CoreHome_Menu');
+
+                    $rootElement.find('#topRightBar .navbar-right li > a').each(function (index, element) {
+                        var $element = $(element);
+
+                        if ($element.is('#topmenu-usersmanager')) {
+                            // ignore languages manager
+                            return;
+                        }
+
+                        var text = trim($element.text());
+
+                        if (!text) {
+                            text = trim($element.attr('title')); // possibly a icon, use title instead
+                        }
+
+                        if (text) {
+                            topMenuItems.push({name: text, index: ++menuIndex, category: category});
+                            $element.attr('quick_access', menuIndex);
+                        }
+                    });
+
+                    return topMenuItems;
+                };
+
+                scope.getLeftMenuItems = function ()
+                {
+                    if (leftMenuItems && leftMenuItems.length) {
+                        return leftMenuItems;
+                    }
+
+                    $rootElement.find('#secondNavBar .menuTab').each(function (index, element) {
+                        var $element = angular.element(element);
+                        var category = trim($element.find('> .item').text());
+
+                        if (category && -1 !== category.lastIndexOf("\n")) {
+                            // remove "\n\nMenu"
+                            category = trim(category.substr(0, category.lastIndexOf("\n")));
+                        }
+
+                        $element.find('li .item').each(function (i, element) {
+                            var $element = angular.element(element);
+                            var text = trim($element.text());
+
+                            if (text) {
+                                leftMenuItems.push({name: text, category: category, index: ++menuIndex});
+                                $element.attr('quick_access', menuIndex);
+                            }
+                        })
+
+                    });
+
+                    return leftMenuItems;
+                };
+
+                scope.getSegmentItems = function()
+                {
+                    if (!hasSegmentSelector) {
+                        return [];
+                    }
+
+                    if (segmentItems && segmentItems.length) {
+                        return segmentItems;
+                    }
+
+                    var category = _pk_translate('CoreHome_Segments');
+
+                    $rootElement.find('.segmentList [data-idsegment]').each(function (index, element) {
+                        var $element = angular.element(element);
+                        var text = trim($element.find('.segname').text());
+
+                        if (text) {
+                            segmentItems.push({name: text, category: category, index: ++menuIndex});
+                            $element.attr('quick_access', menuIndex);
+                        }
+                    });
+
+                    return segmentItems;
+                };
+
+                scope.activateSearch = function()
+                {
+                    scope.$eval('view.searchActive = true');
+                    $timeout(function () {
+                        scope.$apply();
+                    }, 0);
+                };
+
+                scope.deactivateSearch = function()
+                {
+                    scope.$eval('search.term = ""');
+                    scope.$eval('view.searchActive = false');
+                    element.find('input').blur();
+                    $timeout(function () {
+                        scope.$apply();
+                    }, 0);
+                };
+
+                function isElementInViewport(element) {
+
+                    var rect = element.getBoundingClientRect();
+
+                    return (
+                        rect.top >= 0 &&
+                        rect.left >= 0 &&
+                        rect.bottom <= $(window).height() &&
+                        rect.right <= $(window).width()
+                    );
+                }
+
+                function getCurrentlySelectedElement(index)
+                {
+                    var results = element.find('li.result');
+                    if (results && results.length && results[scope.search.index]) {
+                        return $(results[scope.search.index]);
+                    }
+                }
+
+                function makeSureSelectedItemIsInViewport() {
+                    var element = getCurrentlySelectedElement();
+
+                    if (element && element[0] && !isElementInViewport(element[0])) {
+                        scrollFirstElementIntoView(element);
+                    }
+                }
+
+                function scrollFirstElementIntoView(element)
+                {
+                    if (element && element[0] && element[0].scrollIntoView) {
+                        // make sure search is visible
+                        element[0].scrollIntoView();
+                    }
+                }
+
+                scope.highlightPreviousItem = function()
+                {
+                    if (0 >= (scope.search.index - 1)) {
+                        scope.search.index = 0;
+                    } else {
+                        scope.search.index--;
+                    }
+                    makeSureSelectedItemIsInViewport();
+                };
+
+                scope.resetSearchIndex = function () {
+                    scope.search.index = 0;
+                    makeSureSelectedItemIsInViewport();
+                };
+
+                scope.highlightNextItem = function()
+                {
+                    var numTotal = element.find('li.result').length;
+
+                    if (numTotal <= (scope.search.index + 1)) {
+                        scope.search.index = numTotal - 1;
+                    } else {
+                        scope.search.index++;
+                    }
+
+                    makeSureSelectedItemIsInViewport();
+                };
+
+                scope.clickQuickAccessMenuItem = function()
+                {
+                    var selectedMenuElement = getCurrentlySelectedElement();
+                    if (selectedMenuElement) {
+                        $timeout(function () {
+                            selectedMenuElement.click();
+                        }, 20);
+                    }
+                };
+
+                scope.selectMenuItem = function(index)
+                {
+                    var target = $rootElement.find('[quick_access=' + index + ']');
+
+                    if (target && target.length && target[0]) {
+                        scope.deactivateSearch();
+
+                        var actualTarget = target[0];
+
+                        var href = $(actualTarget).attr('href');
+
+                        if (href && href.length > 10 && actualTarget && actualTarget.click) {
+                            try {
+                                actualTarget.click();
+                            } catch (e) {
+                                $(actualTarget).click();
+                            }
+                        } else {
+                            $(actualTarget).click();
+                        }
+                    }
+                };
+
+                Mousetrap.bind('f', function(event) {
+                    if (event.preventDefault) {
+                        event.preventDefault();
+                    } else {
+                        event.returnValue = false; // IE
+                    }
+
+                    scrollFirstElementIntoView(element);
+
+                    scope.activateSearch();
+                });
+
+            }
+        };
+    }
+})();
\ No newline at end of file
diff --git a/plugins/CoreHome/angularjs/quick-access/quick-access.directive.less b/plugins/CoreHome/angularjs/quick-access/quick-access.directive.less
new file mode 100644
index 0000000000..1c46c7533d
--- /dev/null
+++ b/plugins/CoreHome/angularjs/quick-access/quick-access.directive.less
@@ -0,0 +1,55 @@
+.quick-access {
+  position: relative;
+
+  li {
+    font-size: 11px;
+  }
+
+  li a {
+    padding: 10px 19px;
+    display: inline-block;
+    text-decoration: none;
+    word-break: break-all;
+  }
+
+  .icon-search {
+    position: absolute;
+    font-size: 14px;
+    top: 10px;
+    left: 10px;
+
+  }
+  input {
+    width:100%;
+    height: 100%;
+    border: 0 !important;
+    box-shadow: 0 0 !important;
+    border-radius: 0 !important;
+    font-size: 11px;
+    &:focus {
+      outline: none;
+    }
+  }
+  .selected {
+    background-color: @theme-color-background-tinyContrast !important;
+  }
+  .quick-access-category {
+    text-align: left !important;
+    font-size: 11px;
+    padding: 5px 5px 5px 10px;
+    cursor: pointer;
+  }
+  .result {
+    cursor: pointer;
+  }
+  .quick-access-category:hover {
+    background: none !important;
+  }
+  .no-result {
+    padding: 10px 19px;
+    cursor: default;
+  }
+  .websiteCategory {
+    cursor: default;
+  }
+}
\ No newline at end of file
diff --git a/plugins/CoreHome/angularjs/selector/selector.directive.js b/plugins/CoreHome/angularjs/selector/selector.directive.js
new file mode 100644
index 0000000000..eec9dda6d1
--- /dev/null
+++ b/plugins/CoreHome/angularjs/selector/selector.directive.js
@@ -0,0 +1,86 @@
+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+/**
+ *
+ */
+(function () {
+    angular.module('piwikApp').directive('piwikExpandOnClick', piwikExpandOnClick);
+
+    piwikExpandOnClick.$inject = ['$document'];
+
+    function piwikExpandOnClick($document){
+
+        return {
+            restrict: 'A',
+            link: function(scope, element, attr) {
+                element.find('.title').on('click', function () {
+                    element.toggleClass('expanded');
+                });
+
+                function onClickOutsideElement (event) {
+                    if (element.has(event.target).length === 0) {
+                        element.removeClass('expanded');
+                    }
+                }
+
+                function onEscapeHandler (event) {
+                    if (event.which === 27) {
+                        element.removeClass('expanded');
+                    }
+                }
+
+                $document.on('keyup', onEscapeHandler);
+                $document.on('mouseup', onClickOutsideElement);
+                scope.$on('$destroy', function() {
+                    $document.off('mouseup', onClickOutsideElement);
+                    $document.off('keyup', onEscapeHandler);
+                });
+            }
+        };
+    }
+
+    angular.module('piwikApp').directive('piwikExpandOnHover', piwikExpandOnHover);
+
+    piwikExpandOnHover.$inject = ['$document'];
+
+    function piwikExpandOnHover($document){
+
+        return {
+            restrict: 'A',
+            link: function(scope, element, attr) {
+
+                element.on('mouseenter', '.title', function () {
+                    element.addClass('expanded');
+                });
+
+                element.on('mouseleave', function () {
+                    element.removeClass('expanded');
+                });
+
+                function onClickOutsideElement (event) {
+                    if (element.has(event.target).length === 0) {
+                        element.removeClass('expanded');
+                    }
+                }
+
+                function onEscapeHandler (event) {
+                    if (event.which === 27) {
+                        element.removeClass('expanded');
+                    }
+                }
+
+                $document.on('keyup', onEscapeHandler);
+                $document.on('mouseup', onClickOutsideElement);
+                scope.$on('$destroy', function() {
+                    $document.off('mouseup', onClickOutsideElement);
+                    $document.off('keyup', onEscapeHandler);
+                });
+            }
+        };
+    }
+})();
diff --git a/plugins/CoreHome/angularjs/selector/selector.directive.less b/plugins/CoreHome/angularjs/selector/selector.directive.less
new file mode 100644
index 0000000000..9c0e207d4d
--- /dev/null
+++ b/plugins/CoreHome/angularjs/selector/selector.directive.less
@@ -0,0 +1,59 @@
+.piwikSelector {
+  display: inline-block;
+  line-height: 0;
+
+  span.title,
+  a.title {
+    .font-default(11px, 12px);
+    display: inline-block;
+    width: 100%;
+    padding: 11px 19px 10px;
+    white-space: nowrap;
+    cursor: pointer;
+    text-transform: uppercase;
+    text-decoration: none;
+    color: @theme-color-text;
+
+    &.activityIndicator {
+      background: url(plugins/Morpheus/images/loading-blue.gif) no-repeat right 9px;
+
+      .icon {
+        visibility: hidden;
+      }
+    }
+
+    .icon {
+      padding-left: 6px;
+      display: inline-block;
+      vertical-align: top;
+
+      &.iconHidden {
+        visibility: hidden;
+      }
+    }
+
+    .icon:not(.icon-fixed) {
+      float: right;
+      &:after {
+        clear:right;
+        content: ' ';
+      }
+    }
+
+    &:hover, &:focus {
+      text-decoration: none;
+    }
+  }
+
+  .dropdown {
+    .font-default(11px, 15px);
+    display: none;
+    padding: 5px 19px 11px 19px;
+  }
+
+  &.expanded {
+    .dropdown {
+      display: block;
+    }
+  }
+}
diff --git a/plugins/CoreHome/angularjs/siteselector/siteselector.directive.html b/plugins/CoreHome/angularjs/siteselector/siteselector.directive.html
index 5f6a3cac8a..3a4cbec8f2 100644
--- a/plugins/CoreHome/angularjs/siteselector/siteselector.directive.html
+++ b/plugins/CoreHome/angularjs/siteselector/siteselector.directive.html
@@ -1,5 +1,6 @@
-

+