Annotations: Annotation list style improvements (#16541)

moved page-action-bar to top and put header inside it, removed </input> to be able to run prettier

public/app/features/dashboard/components/DashLinks/editor.html

@@ -1,8 +1,21 @@
-<h3 class="dashboard-settings__header">
-  <a ng-click="ctrl.backToList()">Dashboard Links</a>
-  <span ng-show="ctrl.mode === 'new'">&gt; New</span>
-  <span ng-show="ctrl.mode === 'edit'">&gt; Edit</span>
-</h3>
+<div class="page-action-bar">
+  <h3 class="dashboard-settings__header">
+    <a ng-click="ctrl.backToList()">Dashboard Links</a>
+    <span ng-show="ctrl.mode === 'new'">&gt; New</span>
+    <span ng-show="ctrl.mode === 'edit'">&gt; Edit</span>
+  </h3>
+
+  <div class="page-action-bar__spacer"></div>
+  <a
+    type="button"
+    class="btn btn-primary"
+    ng-click="ctrl.setupNew()"
+    ng-if="ctrl.dashboard.links.length > 0"
+    ng-hide="ctrl.mode === 'edit' || ctrl.mode === 'new'"
+  >
+    <i class="fa fa-plus"></i> New</a
+  >
+</div>
 
 <div ng-if="ctrl.mode == 'list'">
   <div ng-if="ctrl.dashboard.links.length === 0">
@@ -17,18 +30,14 @@
       <div class="grafana-info-box">
         <h5>What are Dashboard Links?</h5>
         <p>
-					Dashboard Links allow you to place links to other dashboards and web sites directly in below the dashboard header.
+          Dashboard Links allow you to place links to other dashboards and web sites directly in below the dashboard
+          header.
         </p>
       </div>
     </div>
   </div>
 
   <div ng-if="ctrl.dashboard.links.length > 0">
-    <div class="page-action-bar">
-      <div class="page-action-bar__spacer"></div>
-      <a type="button" class="btn btn-primary" ng-click="ctrl.setupNew()">
-        <i class="fa fa-plus"></i> New</a>
-    </div>
     <table class="filter-table filter-table--hover">
       <thead>
         <tr>
@@ -41,17 +50,23 @@
         <tr ng-repeat="link in ctrl.dashboard.links">
           <td class="pointer" ng-click="ctrl.editLink(link)">
             <i class="fa fa-fw fa-external-link"></i>
-            {{link.type}}
+            {{ link.type }}
           </td>
           <td>
             <div ng-if="link.title">
-              {{link.title}}
+              {{ link.title }}
             </div>
             <div ng-if="!link.title && link.url">
-              {{link.url}}
+              {{ link.url }}
             </div>
-            <span ng-if="!link.title && link.tags" ng-repeat="tag in link.tags" tag-color-from-name="tag" class="label label-tag" style="margin-right: 6px">
-              {{tag}}
+            <span
+              ng-if="!link.title && link.tags"
+              ng-repeat="tag in link.tags"
+              tag-color-from-name="tag"
+              class="label label-tag"
+              style="margin-right: 6px"
+            >
+              {{ tag }}
             </span>
           </td>
           <td style="width: 1%">
@@ -77,41 +92,66 @@
       <div class="gf-form">
         <span class="gf-form-label width-8">Type</span>
         <div class="gf-form-select-wrapper width-10">
-          <select class="gf-form-input" ng-model="ctrl.link.type" ng-options="f for f in ['dashboards','link']"></select>
+          <select
+            class="gf-form-input"
+            ng-model="ctrl.link.type"
+            ng-options="f for f in ['dashboards','link']"
+          ></select>
         </div>
       </div>
 
       <div class="gf-form" ng-show="ctrl.link.type === 'dashboards'">
         <span class="gf-form-label width-8">With tags</span>
-        <bootstrap-tagsinput ng-model="ctrl.link.tags" tagclass="label label-tag" placeholder="add tags" style="margin-right: .25rem"></bootstrap-tagsinput>
+        <bootstrap-tagsinput
+          ng-model="ctrl.link.tags"
+          tagclass="label label-tag"
+          placeholder="add tags"
+          style="margin-right: .25rem"
+        ></bootstrap-tagsinput>
       </div>
 
-      <gf-form-switch ng-show="ctrl.link.type === 'dashboards'" class="gf-form" label="As dropdown" checked="ctrl.link.asDropdown"
-        switch-class="max-width-4" label-class="width-8"></gf-form-switch>
+      <gf-form-switch
+        ng-show="ctrl.link.type === 'dashboards'"
+        class="gf-form"
+        label="As dropdown"
+        checked="ctrl.link.asDropdown"
+        switch-class="max-width-4"
+        label-class="width-8"
+      ></gf-form-switch>
       <div class="gf-form" ng-show="ctrl.link.type === 'dashboards' && ctrl.link.asDropdown">
         <span class="gf-form-label width-8">Title</span>
-        <input type="text" ng-model="ctrl.link.title" class="gf-form-input max-width-10" ng-model-onblur>
+        <input type="text" ng-model="ctrl.link.title" class="gf-form-input max-width-10" ng-model-onblur />
       </div>
       <div ng-show="ctrl.link.type === 'link'">
         <div class="gf-form">
           <li class="gf-form-label width-8">Url</li>
-          <input type="text" ng-model="ctrl.link.url" class="gf-form-input width-20" ng-model-onblur>
+          <input type="text" ng-model="ctrl.link.url" class="gf-form-input width-20" ng-model-onblur />
         </div>
 
         <div class="gf-form">
           <span class="gf-form-label width-8">Title</span>
-          <input type="text" ng-model="ctrl.link.title" class="gf-form-input width-20" ng-model-onblur>
+          <input type="text" ng-model="ctrl.link.title" class="gf-form-input width-20" ng-model-onblur />
         </div>
 
         <div class="gf-form">
           <span class="gf-form-label width-8">Tooltip</span>
-          <input type="text" ng-model="ctrl.link.tooltip" class="gf-form-input width-20" placeholder="Open dashboard" ng-model-onblur>
+          <input
+            type="text"
+            ng-model="ctrl.link.tooltip"
+            class="gf-form-input width-20"
+            placeholder="Open dashboard"
+            ng-model-onblur
+          />
         </div>
 
         <div class="gf-form">
           <span class="gf-form-label width-8">Icon</span>
           <div class="gf-form-select-wrapper width-20">
-            <select class="gf-form-input" ng-model="ctrl.link.icon" ng-options="k as k for (k, v) in ctrl.iconMap"></select>
+            <select
+              class="gf-form-input"
+              ng-model="ctrl.link.icon"
+              ng-options="k as k for (k, v) in ctrl.iconMap"
+            ></select>
           </div>
         </div>
       </div>
@@ -120,9 +160,27 @@
     <div class="gf-form-group">
       <h5 class="section-heading">Include</h5>
       <div>
-        <gf-form-switch class="gf-form" label="Time range" checked="ctrl.link.keepTime" switch-class="max-width-6" label-class="width-9"></gf-form-switch>
-        <gf-form-switch class="gf-form" label="Variable values" checked="ctrl.link.includeVars" switch-class="max-width-6" label-class="width-9"></gf-form-switch>
-        <gf-form-switch class="gf-form" label="Open in new tab" checked="ctrl.link.targetBlank" switch-class="max-width-6" label-class="width-9"></gf-form-switch>
+        <gf-form-switch
+          class="gf-form"
+          label="Time range"
+          checked="ctrl.link.keepTime"
+          switch-class="max-width-6"
+          label-class="width-9"
+        ></gf-form-switch>
+        <gf-form-switch
+          class="gf-form"
+          label="Variable values"
+          checked="ctrl.link.includeVars"
+          switch-class="max-width-6"
+          label-class="width-9"
+        ></gf-form-switch>
+        <gf-form-switch
+          class="gf-form"
+          label="Open in new tab"
+          checked="ctrl.link.targetBlank"
+          switch-class="max-width-6"
+          label-class="width-9"
+        ></gf-form-switch>
       </div>
     </div>
   </div>