feat(apps): minor progress on apps edit view

public/app/core/directives/misc.js

@@ -62,12 +62,13 @@ function (angular, coreModule, kbn) {
         var label = '<label for="' + scope.$id + model + '" class="checkbox-label">' +
           text + tip + '</label>';
 
-        var template = '<input class="cr1" id="' + scope.$id + model + '" type="checkbox" ' +
+        var template =
+          '<input class="cr1" id="' + scope.$id + model + '" type="checkbox" ' +
           '       ng-model="' + model + '"' + ngchange +
           '       ng-checked="' + model + '"></input>' +
           ' <label for="' + scope.$id + model + '" class="cr1"></label>';
 
-        template = label + template;
+        template = template + label;
         elem.replaceWith($compile(angular.element(template))(scope));
       }
     };

public/app/features/apps/partials/edit.html

@@ -7,34 +7,30 @@
 
 <div class="page-container" style="background: transparent; border: 0;">
 	<div class="apps-side-box">
-		<img class="apps-ide-box-logo" src="{{ctrl.appModel.info.logos.large}}">
-		</img>
+		<div class="apps-side-box-logo" >
+			<img src="{{ctrl.appModel.info.logos.large}}">
+		</div>
 		<ul class="app-side-box-links">
+			<li>
+				By <a href="{{ctrl.appModel.info.author.url}}" class="external-link" target="_blank">{{ctrl.appModel.info.author.name}}</a>
+			</li>
 			<li ng-repeat="link in ctrl.appModel.info.links">
-				<a href="{{link.url}}">{{link.name}}</a>
+				<a href="{{link.url}}" class="external-link" target="_blank">{{link.name}}</a>
 			</li>
 		</ul>
 	</div>
-  <div class="page-wide" ng-init="ctrl.init()">
+
+  <div class="page-wide-margined" ng-init="ctrl.init()">
 		<h2>{{ctrl.appModel.name}}</h2>
 		<em>
 			{{ctrl.appModel.info.description}}
 		</em>
 
-		<form name="editForm">
-			<div class="tight-form">
-				<ul class="tight-form-list">
-					<li class="tight-form-item">
+		<div class="form-inline">
 			<editor-checkbox text="Enabled" model="ctrl.appModel.enabled" change="enabledChanged()"></editor-checkbox>
-					</li>
-					<li class="tight-form-item">
 			<editor-checkbox text="Pinned" model="ctrl.appModel.pinned" change="enabledChanged()"></editor-checkbox>
-					</li>
-				</ul>
-				<div class="clearfix"></div>
 		</div>
 
 			<app-config-loader></app-config-loader>
-		</form>
 	</div>
 </div>

public/app/features/panel/panel_directive.js

@@ -90,7 +90,7 @@ function (angular, $, config) {
               scope.target.refId = 'A';
             }
 
-            var panelEl = angular.element(document.createElement('metric-query-editor-' + ds.meta.type));
+            var panelEl = angular.element(document.createElement('metric-query-editor-' + ds.meta.id));
             elem.append(panelEl);
             $compile(panelEl)(editorScope);
           });

public/less/apps.less

+.apps-side-box {
+  float: left;
+}
+
+.apps-side-box-logo {
+  padding: 15px;
+  background: @grafanaPanelBackground;
+  width: 120px;
+  text-align: center;
+  img {
+    max-width: 100px;
+  }
+  margin-bottom: 10px;
+}
+
+.app-side-box-links {
+  list-style: none;
+  margin: 0;
+
+  li {
+    background: @grafanaPanelBackground;
+    margin-top: 4px;
+    padding-left: 10px;
+    line-height: 25px;
+  }
+}

public/less/gfbox.less

@@ -84,6 +84,11 @@
   max-width: 1000px;
 }
 
+.page-wide-margined {
+  margin-left: 170px;
+  max-width: 1000px;
+}
+
 .admin-page {
   max-width: 800px;
   margin-left: 10px;

public/less/grafana.less

@@ -21,6 +21,7 @@
 @import "tabs.less";
 @import "timepicker.less";
 @import "alerting.less";
+@import "apps.less";
 @import "filter-controls.less";
 @import "filter-list.less";
 @import "filter-table.less";

public/less/type.less

@@ -245,3 +245,8 @@ address {
   font-style: normal;
   line-height: @baseLineHeight;
 }
+
+a.external-link {
+  color: @blue;
+  text-decoration: underline;
+}