Refactor component folder structure

awx/ui/client/components/_button.less

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

awx/ui/client/components/_common.less

@@ -0,0 +1,17 @@
+.at-Button(@bg, @bg-hover: @bg, @color, @color-hover: @color) {
+    color: @color;
+    background-color: @bg;
+    padding: @at-padding-xs @at-padding-md;
+    padding-bottom: @at-padding-xs + 1;
+
+    &:hover {
+        color: @color-hover;
+        background-color: @bg-hover;
+    }
+}
+
+.at-Button--success { .at-Button(@at-success, @at-success-dark, @at-white) }
+.at-Button--link { .at-Button(@at-link, @at-link-dark, @at-white) }
+.at-Button--danger { .at-Button(@at-danger, @at-danger, @at-white) }
+.at-Button--light { .at-Button(@at-white, @at-gray-light, @at-gray-dark) }
+

awx/ui/client/components/_index.less

@@ -1,4 +1,6 @@
-@import '_badge';
-@import '_button';
-@import '_input';
-@import '_panel';
+@import '_common';
+@import 'badge/_index';
+@import 'input/_index';
+@import 'panel/_index';
+@import 'toggle/_index';
+

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

@@ -2,7 +2,7 @@ function atBadge () {
     return {
         restrict: 'E',
         transclude: true,
-        templateUrl: 'static/partials/components/badge.partial.html',
+        templateUrl: 'static/partials/components/badge/badge.partial.html',
         scope: {
             config: '='
         }

awx/ui/client/components/index.js

@@ -1,8 +1,10 @@
-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';
+import badge from './badge/badge.directive';
+import inputSearch from './input/search.directive';
+import panel from './panel/panel.directive';
+import panelHeading from './panel/heading.directive';
+import panelBody from './panel/body.directive';
+import toggleButton from './toggle/button.directive';
+import toggleContent from './toggle/content.directive';
 
 angular
     .module('at.components', [])
@@ -10,5 +12,8 @@ angular
     .directive('atInputSearch', inputSearch)
     .directive('atPanel', panel)
     .directive('atPanelHeading', panelHeading)
-    .directive('atPanelBody', panelBody);
+    .directive('atPanelBody', panelBody)
+    .directive('atToggleButton', toggleButton)
+    .directive('atToggleContent', toggleContent);
+
 

awx/ui/client/components/input/_index.less

@@ -4,7 +4,7 @@
 .at-InputSearch-field {
     .at-placeholder;  
 
-    border-color: @at-gray-lighter;
+    border-color: @at-gray-light;
     background-color: @at-white; 
     font-size: @at-font-md;
 
@@ -12,7 +12,7 @@
 }
 
 .at-InputSearch-field:focus {
-    border-color: @at-gray-lighter;
+    border-color: @at-gray-light;
 }
 
 .at-Input-searchButton {

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

@@ -9,7 +9,7 @@ function atInputSearch () {
     return {
         restrict: 'E',
         transclude: true,
-        templateUrl: 'static/partials/components/input-search.partial.html',
+        templateUrl: 'static/partials/components/input/search.partial.html',
         link,
         scope: {
             config: '='

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

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

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

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

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

@@ -2,7 +2,7 @@ function atPanel () {
     return {
         restrict: 'E',
         transclude: true,
-        templateUrl: 'static/partials/components/panel.partial.html'
+        templateUrl: 'static/partials/components/panel/panel.partial.html'
     };
 }
 

awx/ui/client/components/toggle/_index.less

@@ -0,0 +1,32 @@
+.at-ToggleButton {
+    &, &:focus {
+        border-color: @at-gray-light;
+        background-color: @at-white;
+    }
+
+    &:hover {
+        background-color: @at-gray-lighter;
+    }
+
+    & > span:hover {
+        border-color: @at-gray-light;
+        background-color: inherit;
+    }
+}
+
+.at-ToggleButton--show {
+    &, &:hover, &:focus {
+        background-color: @at-link;
+        border-color: @at-link;
+        color: @at-white;
+    }
+}
+
+.at-ToggleContent-well {
+    margin: @at-margin-sm 0 0 0;
+    padding: @at-padding-md;
+    border-radius: 4px;
+    border: 1px solid transparent;
+    background-color: @at-gray-lightest;
+    color: @at-gray-dark;
+}

awx/ui/client/components/toggle/button.directive.js

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

awx/ui/client/components/toggle/button.partial.html

@@ -0,0 +1,9 @@
+<button class="btn btn-default at-Button at-ToggleButton"
+        ng-class="{ 'at-ToggleButton--show': config.show }"
+        ng-click="config.show = !config.show">
+  <span ng-if="config.button">
+    {{ config.button.text }}
+  </span>
+
+  <ng-transclude ng-if="!config.button"></ng-transclude>
+</button>

awx/ui/client/components/toggle/content.directive.js

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

awx/ui/client/components/toggle/content.partial.html

@@ -0,0 +1,10 @@
+<div ng-show="config.show" class="row">
+  <div ng-if="config.content" class="col-sm-12">
+    <div class="well at-ToggleContent-well">
+      {{ config.content.text }}  
+    </div>
+  </div>
+
+  <ng-transclude ng-if="!config.content"></ng-transclude>
+</div>
+

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

@@ -13,11 +13,12 @@ function IndexController () {
     };
 
     vm.key = {
-        on: false,
+        id: 'key-group',
+        show: false,
         button: {
             text: 'Key'
         },
-        body: {
+        content: {
             text: 'Yadda yadda yadda'
         }
     };

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

@@ -2,21 +2,18 @@
   <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">
+      <div class="col-sm-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 }}
+      <div class="col-sm-1 at-u-noPadding">
+        <at-toggle-button config="vm.key"></at-toggle-button>
+      </div>
+      <div class="col-sm-1 pull-right">
+        <button class="btn at-Button--success pull-right">
+          + ADD
         </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-toggle-content config="vm.key"></at-toggle-content>
   </at-panel-body>
 </at-panel>

awx/ui/client/theme/_mixins.less

@@ -12,12 +12,12 @@
 
 .at-buttonColor () {
     background-color: @at-white;
-    border-color: @at-gray-lighter;
+    border-color: @at-gray-light;
     color: @at-gray;
 }
 
 .at-buttonColorHover () {
-    background-color: @at-gray-lightest;  
-    border-color: @at-gray-lighter;
+    background-color: @at-gray-lighter;  
+    border-color: @at-gray-light;
     color: @at-gray;
 }

awx/ui/client/theme/_variables.less

@@ -1,9 +1,19 @@
 @at-white: #ffffff;
-@at-gray-lightest: #fafafa;
-@at-gray-lighter: #b7b7b7;
+
+@at-gray-lightest: #f6f6f6;
+@at-gray-lighter: #fafafa;
+@at-gray-light: #b7b7b7;
 @at-gray: #848992;
 @at-gray-dark: #707070;
 
+@at-link: #337AB7;
+@at-link-dark: #286090;
+
+@at-success: #5CB85C;
+@at-success-dark: #449D44;
+
+@at-danger: #449D44;
+
 @at-font-sm: 12px;
 @at-font-md: 14px;
 @at-font-lg: 16px;

awx/ui/grunt-tasks/copy.js

@@ -52,7 +52,7 @@ module.exports = {
         }, {
             cwd: 'client/components',
             expand: true,
-            src: ['*.partial.html'],
+            src: ['**/*.partial.html'],
             dest: 'static/partials/components/'
         }]
     },

awx/ui/grunt-tasks/watch.js

@@ -5,7 +5,7 @@ module.exports = {
     },
     partials: {
         files: [
-            'client/components/*.partial.html',
+            'client/components/**/*.partial.html',
             'client/src/**/*.partial.html'
         ],
         tasks: ['newer:copy:partials']