feat(panel): working on panel help text and unifying panel links, panel errors, and panel help into a single panel feature, #4079 , #6847

public/app/features/dashboard/partials/panel_info.html

@@ -10,7 +10,7 @@
 		</a>
 	</div>
 
-	<div class="modal-content" ng-bind-html="html">
+	<div class="modal-content markdown-html" ng-bind-html="html">
 	</div>
 
 </div>

public/app/features/panel/panel_ctrl.ts

@@ -263,7 +263,9 @@ export class PanelCtrl {
     var linkSrv = this.$injector.get('linkSrv');
     var templateSrv = this.$injector.get('templateSrv');
     var interpolatedMarkdown = templateSrv.replace(markdown, this.panel.scopedVars);
-    var html = new Remarkable().render(interpolatedMarkdown);
+    var html = '<div class="markdown-html">';
+
+    html += new Remarkable().render(interpolatedMarkdown);
 
     if (this.panel.links && this.panel.links.length > 0) {
       html += '<ul>';
@@ -274,7 +276,7 @@ export class PanelCtrl {
       html += '</ul>';
     }
 
-    return html;
+    return html + '</div>';
   }
 
   openInfo() {

public/app/features/plugins/partials/plugin_edit.html

@@ -31,7 +31,7 @@
 
   <div class="page-body">
     <div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Readme'">
-      <div ng-bind-html="ctrl.readmeHtml" class="plugin-markdown-readme">
+      <div ng-bind-html="ctrl.readmeHtml" class="markdown-html">
       </div>
     </div>
 

public/app/plugins/panel/text/module.html

@@ -1,2 +1,2 @@
-<p class="panel-text-content" ng-bind-html="ctrl.content" ng-show="ctrl.content">
+<p class="markdown-html panel-text-content" ng-bind-html="ctrl.content" ng-show="ctrl.content">
 </p>

public/sass/base/_type.scss

@@ -290,3 +290,42 @@ a.external-link {
 .pointer {
   cursor: pointer;
 }
+
+.markdown-html {
+  img {
+    max-width: 100%;
+  }
+
+  ul {
+    padding-left: $spacer*1.5;
+    margin-bottom: $spacer;
+  }
+
+  table {
+    td, th {
+      padding: $spacer*.5 $spacer;
+    }
+    th {
+      font-weight: normal;
+      background: $table-bg-accent;
+    }
+  }
+
+  table, th, td {
+    border: 1px solid $table-border;
+    border-collapse: collapse;
+  }
+
+  a {
+    text-decoration: underline;
+    color: $external-link-color;
+    &:hover {
+      color: lighten($external-link-color, 10%);
+    }
+  }
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+}
+

public/sass/components/_drop.scss

@@ -29,12 +29,11 @@ $easing: cubic-bezier(0, 0, 0.265, 1.00);
 }
 
 .drop-help {
-  ul {
-    padding-left: $spacer;
-  }
-
   a {
-    text-decoration: underline;
+    color: $white;
+    &:hover {
+      color: darken($white, 10%);
+    }
   }
 }
 

public/sass/components/_panel_text.scss

@@ -1,8 +1 @@
 
-.panel-text-content {
-  ul {
-    margin: 0 0 $spacer $spacer * 1.5;
-  }
-  li {line-height: 2;}
-  a { color: $external-link-color; }
-}

public/sass/pages/_plugins.scss

@@ -37,32 +37,6 @@
   overflow: hidden;
 }
 
-.plugin-markdown-readme {
-  img {
-    max-width: 100%;
-  }
-
-  ul {
-    padding-left: $spacer*1.5;
-    margin-bottom: $spacer*2;
-  }
-
-  table {
-    td, th {
-      padding: $spacer*.5 $spacer;
-    }
-    th {
-      font-weight: normal;
-      background: $table-bg-accent;
-    }
-  }
-
-  table, th, td {
-    border: 1px solid $table-border;
-    border-collapse: collapse;
-  }
-}
-
 .get-more-plugins-link {
   color: $text-muted;
   font-size: $font-size-sm;