DNN-21317: show the pane name when put mouse hover it. (#19)

* DNN-21317: show the pane name when put mouse hover it. * DNN-21317: use data-name attribute.
dnnsoftware · Sep 6, 2018 · 295b155 · 295b155
1 parent 3274d0b
commit 295b155
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 0 deletions.
diff --git a/EditBar/Dnn.EditBar.UI/editBar/resources/ContentEditorManager/Js/ModuleManager.js b/EditBar/Dnn.EditBar.UI/editBar/resources/ContentEditorManager/Js/ModuleManager.js
@@ -49,6 +49,7 @@ if (typeof dnn === "undefined" || dnn === null) { dnn = {}; };
             $this.addClass('dnnModuleManager');
             $this.append(this._generateLayout());
 
+            this._initPaneName();
             this._injectVisualEffects();
 
             this._handleEvents();
@@ -73,6 +74,13 @@ if (typeof dnn === "undefined" || dnn === null) { dnn = {}; };
         _generateLayout: function () {
             return $('<a href="#" class="addModuleHandler" aria-label="Add Module"><span></span></a><a href="#" class="addExistingModuleHandler" aria-label="Add Existing Module"><span></span></a>');
         },
+
+        _initPaneName: function() {
+            if (!this.$pane.attr('data-name')) {
+                var paneName = this.$pane.attr('id').replace('dnn_', '');
+                this.$pane.attr('data-name', paneName);
+            }
+        },
 
         _injectVisualEffects: function () {
             var actionMenus = [];

diff --git a/EditBar/Dnn.EditBar.UI/editBar/resources/ContentEditorManager/Styles/ContentEditor.css b/EditBar/Dnn.EditBar.UI/editBar/resources/ContentEditorManager/Styles/ContentEditor.css
@@ -39,6 +39,33 @@
 .dnnModuleManager .addModuleHandler.active span {
     /*display: inline-block;*/
 }
+.dnnModuleManager:before {
+    content: attr(data-name);
+    display: inline-block;
+    box-sizing: border-box;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    height: 16px;
+    line-height: 12px;
+    color: #333;
+    font-size: 9px;
+    background-color: #fff;
+    padding: 2px 4px;
+    text-transform: uppercase;
+    font-weight: bold;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    transition-duration: 200ms;
+    opacity: 0;
+}
+.dnnModuleManager.active-pane:before {
+    opacity: 1;
+}
 .dnnModuleDialog {
     width: 646px;
     overflow-x: hidden;