Add input-search component

awx/ui/client/components/_badge.less

@@ -0,0 +1,8 @@
+.at-Badge {
+    font-size: @at-font-sm;
+    padding: 0 @at-padding-sm;
+    margin: 0;
+    background-color: @at-gray;
+    color: @at-white;
+    border-radius: @at-border-radius-md;
+}

awx/ui/client/components/_button.less

@@ -0,0 +1,4 @@
+.at-Button {
+    padding: @at-padding-xs @at-padding-md;
+    padding-bottom: @at-padding-xs + 1;
+}

awx/ui/client/components/_index.less

@@ -1 +1,4 @@
+@import '_badge';
+@import '_button';
+@import '_input';
 @import '_panel';

awx/ui/client/components/_input.less

@@ -0,0 +1,29 @@
+.at-InputSearch {
+}
+
+.at-InputSearch-field {
+    .at-placeholder;  
+
+    border-color: @at-gray-lighter;
+    background-color: @at-white; 
+    font-size: @at-font-md;
+
+    @include placeholder(@at-gray);
+}
+
+.at-InputSearch-field:focus {
+    border-color: @at-gray-lighter;
+}
+
+.at-Input-searchButton {
+    .at-buttonColor;
+
+    padding: 4px 10px;
+    padding-bottom: 5px;
+    font-size: @at-font-lg;
+}
+
+.at-Input-searchButton:hover {
+    .at-buttonColorHover;
+}
+

awx/ui/client/components/_panel.less

@@ -1,9 +1,14 @@
 .at-Panel {
-    margin: @at-margin-md 0;
+    margin: @at-margin-md 0 0 0;
+    padding: @at-padding-md;
 }
 
-// TODO (remove override on cleanup):
-.at-Panel-heading:hover {
-    cursor: default;
+.at-Panel-heading {
+    margin: 0;
+    padding: 0;
+}
+
+.at-Panel-body {
+    margin: @at-margin-md 0 0 0;
+    padding: 0;
 }
-// TODO-end

awx/ui/client/components/badge.directive.js

@@ -0,0 +1,12 @@
+function atBadge () {
+    return {
+        restrict: 'E',
+        transclude: true,
+        templateUrl: 'static/partials/components/badge.partial.html',
+        scope: {
+            config: '='
+        }
+    };
+}
+
+export default atBadge;

awx/ui/client/components/badge.partial.html

@@ -0,0 +1,8 @@
+<div class="at-Badge">
+  <div ng-if="config.text">
+    {{ config.text }}
+  </div>
+
+  <ng-if="!config" ng-transclude></ng-transclude>
+</div>
+

awx/ui/client/components/index.js

@@ -1,8 +1,14 @@
+import badge from './badge.directive';
+import inputSearch from './input-search.directive';
 import panel from './panel.directive';
 import panelHeading from './panel-heading.directive';
+import panelBody from './panel-body.directive';
 
 angular
     .module('at.components', [])
+    .directive('atBadge', badge)
+    .directive('atInputSearch', inputSearch)
     .directive('atPanel', panel)
-    .directive('atPanelHeading', panelHeading);
+    .directive('atPanelHeading', panelHeading)
+    .directive('atPanelBody', panelBody);
 

awx/ui/client/components/input-search.directive.js

@@ -0,0 +1,20 @@
+// TODO: i18n
+
+function atInputSearch () {
+    function link (scope) {
+        scope.config = scope.config || {};
+        scope.config.placeholder = scope.config.placeholder || 'SEARCH';
+    }
+
+    return {
+        restrict: 'E',
+        transclude: true,
+        templateUrl: 'static/partials/components/input-search.partial.html',
+        link,
+        scope: {
+            config: '='
+        }
+    };
+}
+
+export default atInputSearch;

awx/ui/client/components/input-search.partial.html

@@ -0,0 +1,10 @@
+<div class="input-group at-InputSearch">
+  <input type="text" 
+         class="form-control at-InputSearch-field" 
+         placeholder="{{ config.placeholder }}" />
+  <div class="input-group-btn">
+    <button class="btn btn-default at-Input-searchButton" type="button">
+      <span class="fa fa-search"></span>
+    </button>
+  </div>
+</div>

awx/ui/client/components/panel-body.directive.js

@@ -0,0 +1,9 @@
+function atPanelBody () {
+    return {
+        restrict: 'E',
+        transclude: true,
+        templateUrl: 'static/partials/components/panel-body.partial.html'
+    };
+}
+
+export default atPanelBody;

awx/ui/client/components/panel-body.partial.html

@@ -0,0 +1,3 @@
+<div class="panel-body at-Panel-body">
+  <ng-transclude></ng-transclude>
+</div>

awx/ui/client/components/panel-heading.directive.js

@@ -4,7 +4,7 @@ function atPanelHeading () {
         transclude: true,
         templateUrl: 'static/partials/components/panel-heading.partial.html',
         scope: {
-            heading: '=config'
+            config: '='
         }
     };
 }

awx/ui/client/components/panel-heading.partial.html

@@ -1,13 +1,11 @@
 <div class="panel-heading at-Panel-heading">
-  <div ng-if="heading" class="at-Title-row">
-    <div ng-if="heading.title" class="at-Title-text">
-      {{ heading.title }}
-    </div>
-    <div ng-if="heading.titleBadge" class="at-Title-badge">
-      {{ heading.titleBadge }}
+  <div ng-if="config" class="at-Title-row">
+    <div ng-if="config.title.text" class="at-Title-text">
+      {{ config.title.text }}
     </div>
+    <at-badge config="config.badge"></at-badge>
   </div>
   
-  <ng-if="!heading" ng-transclude></ng-transclude>
+  <ng-if="!config" ng-transclude></ng-transclude>
 </div>
 

awx/ui/client/src/credentials/index.controller.js

@@ -1,10 +1,26 @@
 function IndexController () {
-  let vm = this;
+    let vm = this;
 
-  vm.panel = {
-    title: 'Credentials',
-    titleBadge: 5
-  };
+    vm.panel = {
+        heading: {
+            title: {
+                text: 'Credentials'
+            },
+            badge: {
+                text: 5
+            }
+        }
+    };
+
+    vm.key = {
+        on: false,
+        button: {
+            text: 'Key'
+        },
+        body: {
+            text: 'Yadda yadda yadda'
+        }
+    };
 }
 
 // IndexController.$inject = [];

awx/ui/client/src/credentials/index.view.html

@@ -1,6 +1,22 @@
 <at-panel>
-  <at-panel-heading config="vm.panel">
-  </at-panel-heading>
-  <at-panel-body>
+  <at-panel-heading config="vm.panel.heading"></at-panel-heading>
+  <at-panel-body config="vm.panel.body">
+    <div class="row">
+      <div class="col-md-5">
+        <at-input-search config="vm.panel.search"></at-input-search>
+      </div>
+      <div class="col-md-1 at-u-noPadding">
+        <button class="btn btn-default at-Button" ng-click="vm.key.on = !vm.key.on">
+          {{ vm.key.button.text }}
+        </button>
+      </div>
+    </div>
+    <div ng-show="vm.key.on" class="row">
+      <div class="col-md-12">
+        <div class="well">
+          {{ vm.key.body.text }}  
+        </div>
+      </div>
+    </div>
   </at-panel-body>
 </at-panel>

awx/ui/client/theme/_common.less

@@ -12,11 +12,3 @@
     text-transform: uppercase;
 }
 
-.at-Title-badge {
-    font-size: @at-font-sm;
-    padding: 0 @at-padding-sm;
-    margin: 0;
-    background-color: @at-gray;
-    color: @at-white;
-    border-radius: @at-border-radius-md;
-}

awx/ui/client/theme/_mixins.less

@@ -0,0 +1,23 @@
+.at-placeholder {
+    &:-moz-placeholder {
+        color: @at-gray-dark;
+    }
+    &:-ms-input-placeholder {
+        color: @at-gray-dark;
+    }
+    &::-webkit-input-placeholder {
+        color: @at-gray-dark;
+    }
+}
+
+.at-buttonColor () {
+    background-color: @at-white;
+    border-color: @at-gray-lighter;
+    color: @at-gray;
+}
+
+.at-buttonColorHover () {
+    background-color: @at-gray-lightest;  
+    border-color: @at-gray-lighter;
+    color: @at-gray;
+}

awx/ui/client/theme/_temporary-overrides.less

@@ -0,0 +1,5 @@
+// TODO (remove override on cleanup):
+
+.at-Panel-heading:hover {
+    cursor: default;
+}

awx/ui/client/theme/_utility.less

@@ -0,0 +1,3 @@
+.at-u-noPadding {
+    padding: 0;
+}

awx/ui/client/theme/_variables.less

@@ -1,10 +1,14 @@
 @at-white: #ffffff;
+@at-gray-lightest: #fafafa;
+@at-gray-lighter: #b7b7b7;
 @at-gray: #848992;
 @at-gray-dark: #707070;
 
 @at-font-sm: 12px;
 @at-font-md: 14px;
+@at-font-lg: 16px;
 
+@at-padding-xs: 6px;
 @at-padding-sm: 10px;
 @at-padding-md: 20px;
 
@@ -12,5 +16,3 @@
 @at-margin-md: 20px;
 
 @at-border-radius-md: 5px;
-
-

awx/ui/client/theme/index.less

@@ -1,4 +1,14 @@
+// App-wide styles 
 @import '_variables';
+@import '_mixins';
+@import '_utility';
 @import '_common';
 
+// Component and feature specific aggregated styles
 @import '../components/_index';
+
+/*
+ * Temporary overrides used only during the transition away from old style
+ * structure to new style structure. Overrides unwanted/uneeded rules.
+ */
+@import '_temporary-overrides';