Show tooltips with dark theme description

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

@@ -96,6 +96,7 @@ define([
 
             hide: function() {
                 if (this.cmpEl) this.cmpEl.hide();
+                this.trigger('hide');
             },
 
             close: function() {
@@ -108,7 +109,7 @@ define([
                     this.cmpEl.css({top : showxy.top + 5 + 'px', left: showxy.left + 5 + 'px'});
                     return;
                 }
-                
+
                 var placement = this.placement.split('-');
                 if (placement.length>0) {
                     var top, left, bottom, right;

apps/documenteditor/main/app/controller/Viewport.js

@@ -327,8 +327,28 @@ define([
                     Common.NotificationCenter.on('uitheme:change', function (name) {
                         mnuitemDarkTheme.setChecked(Common.UI.Themes.isDarkTheme());
                     });
-                }
 
+                    if (!Common.localStorage.getBool("hide-dark-theme-tip")) {
+                        me.themeTip = new Common.UI.SynchronizeTip({
+                            target: me.header.btnOptions.$el,
+                            placement   : 'bottom-left',
+                            showLink: false,
+                            extCls: (config.customization && config.customization.toolbarNoTabs) ? 'toolbar-color' : 'theme-color',
+                            text: me.textTipTheme
+                        });
+                        me.themeTip.on({
+                            'closeclick': function() {
+                                me.themeTip.hide();
+                            },
+                            'hide': function() {
+                                me.themeTip = undefined;
+                                Common.localStorage.setBool("hide-dark-theme-tip", true);
+                            }
+                        });
+                        me.themeTip.show();
+                        me.header.btnOptions.on('click', function() { me.themeTip && me.themeTip.hide(); });
+                    }
+                }
                 me.header.btnOptions.menu.on('item:click', me.onOptionsItemClick.bind(this));
             }
         },
@@ -435,6 +455,7 @@ define([
         },
 
         textFitPage: 'Fit to Page',
-        textFitWidth: 'Fit to Width'
+        textFitWidth: 'Fit to Width',
+        textTipTheme: 'You can switch to Dark Theme in the View Settings'
     }, DE.Controllers.Viewport));
 });

apps/documenteditor/main/locale/en.json

@@ -1172,6 +1172,7 @@
   "DE.Controllers.Toolbar.txtSymbol_zeta": "Zeta",
   "DE.Controllers.Viewport.textFitPage": "Fit to Page",
   "DE.Controllers.Viewport.textFitWidth": "Fit to Width",
+  "DE.Controllers.Viewport.textTipTheme": "You can switch to Dark Theme in the View Settings",
   "DE.Views.AddNewCaptionLabelDialog.textLabel": "Label:",
   "DE.Views.AddNewCaptionLabelDialog.textLabelError": "Label must not be empty.",
   "DE.Views.BookmarksDialog.textAdd": "Add",

apps/presentationeditor/main/app/controller/Viewport.js

@@ -330,6 +330,27 @@ define([
                     Common.NotificationCenter.on('uitheme:change', function (name) {
                         mnuitemDarkTheme.setChecked(Common.UI.Themes.isDarkTheme());
                     });
+
+                    if (!Common.localStorage.getBool("hide-dark-theme-tip")) {
+                        me.themeTip = new Common.UI.SynchronizeTip({
+                            target: me.header.btnOptions.$el,
+                            placement   : 'bottom-left',
+                            showLink: false,
+                            extCls: (config.customization && config.customization.toolbarNoTabs) ? 'toolbar-color' : 'theme-color',
+                            text: me.textTipTheme
+                        });
+                        me.themeTip.on({
+                            'closeclick': function() {
+                                me.themeTip.hide();
+                            },
+                            'hide': function() {
+                                me.themeTip = undefined;
+                                Common.localStorage.setBool("hide-dark-theme-tip", true);
+                            }
+                        });
+                        me.themeTip.show();
+                        me.header.btnOptions.on('click', function() { me.themeTip && me.themeTip.hide(); });
+                    }
                 }
 
                 me.header.btnOptions.menu.on('item:click', me.onOptionsItemClick.bind(this));
@@ -478,6 +499,7 @@ define([
         },
 
         textFitPage: 'Fit to Page',
-        textFitWidth: 'Fit to Width'
+        textFitWidth: 'Fit to Width',
+        textTipTheme: 'You can switch to Dark Theme in the View Settings'
     }, PE.Controllers.Viewport));
 });

apps/presentationeditor/main/locale/en.json

@@ -1042,6 +1042,7 @@
   "PE.Controllers.Toolbar.txtSymbol_zeta": "Zeta",
   "PE.Controllers.Viewport.textFitPage": "Fit to Slide",
   "PE.Controllers.Viewport.textFitWidth": "Fit to Width",
+  "PE.Controllers.Viewport.textTipTheme": "You can switch to Dark Theme in the View Settings",
   "PE.Views.ChartSettings.textAdvanced": "Show advanced settings",
   "PE.Views.ChartSettings.textChartType": "Change Chart Type",
   "PE.Views.ChartSettings.textEditData": "Edit Data",

apps/spreadsheeteditor/main/app/controller/Viewport.js

@@ -341,6 +341,27 @@ define([
                     Common.NotificationCenter.on('uitheme:change', function (name) {
                         mnuitemDarkTheme.setChecked(Common.UI.Themes.isDarkTheme());
                     });
+
+                    if (!Common.localStorage.getBool("hide-dark-theme-tip")) {
+                        me.themeTip = new Common.UI.SynchronizeTip({
+                            target: me.header.btnOptions.$el,
+                            placement   : 'bottom-left',
+                            showLink: false,
+                            extCls: (config.customization && config.customization.toolbarNoTabs) ? 'toolbar-color' : 'theme-color',
+                            text: me.textTipTheme
+                        });
+                        me.themeTip.on({
+                            'closeclick': function() {
+                                me.themeTip.hide();
+                            },
+                            'hide': function() {
+                                me.themeTip = undefined;
+                                Common.localStorage.setBool("hide-dark-theme-tip", true);
+                            }
+                        });
+                        me.themeTip.show();
+                        me.header.btnOptions.on('click', function() { me.themeTip && me.themeTip.hide(); });
+                    }
                 }
 
                 me.header.btnOptions.menu.on('item:click', me.onOptionsItemClick.bind(this));
@@ -532,6 +553,7 @@ define([
         textHideHeadings: 'Hide Headings',
         textHideGridlines: 'Hide Gridlines',
         textFreezePanes: 'Freeze Panes',
-        textFreezePanesShadow: 'Show Freezed Panes Shadow'
+        textFreezePanesShadow: 'Show Freezed Panes Shadow',
+        textTipTheme: 'You can switch to Dark Theme in the View Settings'
     }, SSE.Controllers.Viewport));
 });

apps/spreadsheeteditor/main/locale/en.json

@@ -1282,6 +1282,7 @@
   "SSE.Controllers.Viewport.textHideFBar": "Hide Formula Bar",
   "SSE.Controllers.Viewport.textHideGridlines": "Hide Gridlines",
   "SSE.Controllers.Viewport.textHideHeadings": "Hide Headings",
+  "SSE.Controllers.Viewport.textTipTheme": "You can switch to Dark Theme in the View Settings",
   "SSE.Views.AdvancedSeparatorDialog.strDecimalSeparator": "Decimal separator",
   "SSE.Views.AdvancedSeparatorDialog.strThousandsSeparator": "Thousands separator",
   "SSE.Views.AdvancedSeparatorDialog.textLabel": "Settings used to recognize numeric data",