Shows icon to disable/enable Zen Mode (#12459)

* Added icon to enable/disable Zen Mode

* Removed comment

* Update layout.less

* Changed arrow direction and location

* Adjusted Zen Mode to correspond to refreshing page

* Display issue on dashboard page - double icons

* Update zen-mode.js

* Update en.json

* Update layout.less

* Update CoreHome.php

1 files changed, 10 insertions, 2 deletions

diff --git a/plugins/CoreHome/javascripts/zen-mode.js b/plugins/CoreHome/javascripts/zen-mode.js
index fe052210f9..1fd339a43a 100644
--- a/plugins/CoreHome/javascripts/zen-mode.js
+++ b/plugins/CoreHome/javascripts/zen-mode.js
@@ -1,16 +1,24 @@
 $(function () {
 
-
     angular.element(document).injector().invoke(handleZenMode);
 
     function handleZenMode ($rootElement, $cookies) {
         var zenMode = !!parseInt($cookies.get('zenMode'), 10);
+        var iconSwitcher = $('.top_controls .icon-arrowup');
+
+        iconSwitcher.click(function(event) {
+           Mousetrap.trigger('z')
+        });
 
         function updateZenMode() {
             if (zenMode) {
                 $('body').addClass('zenMode');
+                iconSwitcher.addClass('icon-arrowdown').removeClass('icon-arrowup');
+                iconSwitcher.prop('title', _pk_translate('CoreHome_ExitZenMode'));
             } else {
                 $('body').removeClass('zenMode');
+                iconSwitcher.removeClass('icon-arrowdown').addClass('icon-arrowup');
+                iconSwitcher.prop('title', _pk_translate('CoreHome_EnterZenMode'));
             }
         }
 
@@ -25,4 +33,4 @@ $(function () {
 
         updateZenMode();
     }
-});
\ No newline at end of file
+});