Add getting of letters into hint manager, change styles

apps/common/main/lib/component/HintManager.js

@@ -47,7 +47,9 @@ if (Common.UI === undefined) {
 }
 
 Common.UI.HintManager = new(function() {
-    var _isAlt = false,
+    var _lang = 'en',
+        _arrLetters = [],
+        _isAlt = false,
         _hintVisible = false,
         _currentLevel = -1,
         _controls = [],
@@ -113,6 +115,10 @@ Common.UI.HintManager = new(function() {
     };
 
     var _init = function() {
+        Common.NotificationCenter.on('app:ready', function (mode) {
+            _lang = mode.lang;
+            _getAlphabetLetters();
+        }.bind(this));
         $(document).on('keyup', function(e) {
             if (e.keyCode == Common.UI.Keys.ALT &&_isAlt) {
                 e.preventDefault();
@@ -145,6 +151,12 @@ Common.UI.HintManager = new(function() {
         });
     };
 
+    var _getAlphabetLetters = function () {
+        Common.Utils.loadConfig('../../common/main/resources/alphabetletters/alphabetletters.json', function (langsJson) {
+            _arrLetters = langsJson[_lang];
+        });
+    };
+
     return {
         init: _init
     }

apps/common/main/resources/alphabetletters/alphabetletters.json

@@ -0,0 +1,4 @@
+{
+  "en": ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"],
+  "ru": ["а", "б", "в", "г", "д", "е", "ё", "ж", "з", "и", "й", "к", "л", "м", "н", "о", "п", "р", "с", "т", "у", "ф", "х", "ц", "ч", "ш", "щ", "э", "ю", "я"]
+}

apps/common/main/resources/less/colors-table-dark.less

@@ -14,6 +14,7 @@
         --background-notification-badge: #ffd114;
         --background-scrim: fade(black, 60%);
         --background-loader: fade(#181818, 90%);
+        --background-alt-key-hint: #FFD938;
 
         --highlight-button-hover: #555;
         --highlight-button-pressed: #606060;

apps/common/main/resources/less/colors-table-ie-fix.less

@@ -12,6 +12,7 @@
 @background-notification-badge-ie: #ffd112;
 @background-scrim-ie: fade(#000, 20%);
 @background-loader-ie: fade(#181818, 90%);
+@background-alt-key-hint-ie: #FFD938;
 
 @highlight-button-hover-ie: #e0e0e0;
 @highlight-button-pressed-ie: #ccc;

apps/common/main/resources/less/colors-table.less

@@ -24,6 +24,7 @@
     --background-notification-badge: #ffd112;
     --background-scrim: fade(#000, 20%);
     --background-loader: fade(#181818, 90%);
+    --background-alt-key-hint: #FFD938;
 
     --highlight-button-hover: #e0e0e0;
     --highlight-button-pressed: #ccc;
@@ -141,6 +142,7 @@
 @background-notification-badge: var(--background-notification-badge);
 @background-scrim: var(--background-scrim);
 @background-loader: var(--background-loader);
+@background-alt-key-hint: var(--background-alt-key-hint);
 
 // Highlight
 // -------------------------

apps/common/main/resources/less/hint-manager.less

@@ -3,10 +3,11 @@
   z-index: @zindex-navbar + 3;
   width: 20px;
   text-align: center;
-  background-color: @background-notification-popover-ie;
+  background-color: @background-alt-key-hint-ie;
-  background-color: @background-notification-popover;
+  background-color: @background-alt-key-hint;
   color: @text-normal;
-  .box-shadow(0 4px 15px -2px rgba(0, 0, 0, 0.5));
   font-size: 12px;
   line-height: 18px;
+  padding: 0 4px;
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
 }