From cba42378595bd036af961bfa3e18cfcbb87dd82c Mon Sep 17 00:00:00 2001 From: gconsidine Date: Wed, 19 Apr 2017 12:13:05 -0400 Subject: [PATCH 01/45] Add component dir --- awx/ui/client/components/action-add.directive.js | 0 awx/ui/client/components/action-cancel.directive.js | 0 awx/ui/client/components/action-delete.directive.js | 0 awx/ui/client/components/action-save.directive.js | 0 awx/ui/client/components/form.directive.js | 0 awx/ui/client/components/input-checkbox.directive.js | 0 awx/ui/client/components/input-dropdown.directive.js | 0 awx/ui/client/components/input-search.directive.js | 0 awx/ui/client/components/input-secret.directive.js | 0 awx/ui/client/components/input-textarea.directive.js | 0 awx/ui/client/components/input.directive.js | 0 awx/ui/client/components/list-item.directive.js | 0 awx/ui/client/components/list.directive.js | 0 awx/ui/client/components/pagination.directive.js | 0 awx/ui/client/components/panel.directive.js | 0 awx/ui/client/components/popover.directive.js | 0 awx/ui/client/components/prompt.directive.js | 0 awx/ui/client/components/tab-navigation.directive.js | 0 awx/ui/client/components/tab.directive.js | 0 awx/ui/client/components/table.directive.js | 0 awx/ui/client/components/toggle-button.directive.js | 0 awx/ui/client/components/toggle-content.directive.js | 0 22 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 awx/ui/client/components/action-add.directive.js create mode 100644 awx/ui/client/components/action-cancel.directive.js create mode 100644 awx/ui/client/components/action-delete.directive.js create mode 100644 awx/ui/client/components/action-save.directive.js create mode 100644 awx/ui/client/components/form.directive.js create mode 100644 awx/ui/client/components/input-checkbox.directive.js create mode 100644 awx/ui/client/components/input-dropdown.directive.js create mode 100644 awx/ui/client/components/input-search.directive.js create mode 100644 awx/ui/client/components/input-secret.directive.js create mode 100644 awx/ui/client/components/input-textarea.directive.js create mode 100644 awx/ui/client/components/input.directive.js create mode 100644 awx/ui/client/components/list-item.directive.js create mode 100644 awx/ui/client/components/list.directive.js create mode 100644 awx/ui/client/components/pagination.directive.js create mode 100644 awx/ui/client/components/panel.directive.js create mode 100644 awx/ui/client/components/popover.directive.js create mode 100644 awx/ui/client/components/prompt.directive.js create mode 100644 awx/ui/client/components/tab-navigation.directive.js create mode 100644 awx/ui/client/components/tab.directive.js create mode 100644 awx/ui/client/components/table.directive.js create mode 100644 awx/ui/client/components/toggle-button.directive.js create mode 100644 awx/ui/client/components/toggle-content.directive.js diff --git a/awx/ui/client/components/action-add.directive.js b/awx/ui/client/components/action-add.directive.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/awx/ui/client/components/action-cancel.directive.js b/awx/ui/client/components/action-cancel.directive.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/awx/ui/client/components/action-delete.directive.js b/awx/ui/client/components/action-delete.directive.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/awx/ui/client/components/action-save.directive.js b/awx/ui/client/components/action-save.directive.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/awx/ui/client/components/form.directive.js b/awx/ui/client/components/form.directive.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/awx/ui/client/components/input-checkbox.directive.js b/awx/ui/client/components/input-checkbox.directive.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/awx/ui/client/components/input-dropdown.directive.js b/awx/ui/client/components/input-dropdown.directive.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/awx/ui/client/components/input-search.directive.js b/awx/ui/client/components/input-search.directive.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/awx/ui/client/components/input-secret.directive.js b/awx/ui/client/components/input-secret.directive.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/awx/ui/client/components/input-textarea.directive.js b/awx/ui/client/components/input-textarea.directive.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/awx/ui/client/components/input.directive.js b/awx/ui/client/components/input.directive.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/awx/ui/client/components/list-item.directive.js b/awx/ui/client/components/list-item.directive.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/awx/ui/client/components/list.directive.js b/awx/ui/client/components/list.directive.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/awx/ui/client/components/pagination.directive.js b/awx/ui/client/components/pagination.directive.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/awx/ui/client/components/panel.directive.js b/awx/ui/client/components/panel.directive.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/awx/ui/client/components/popover.directive.js b/awx/ui/client/components/popover.directive.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/awx/ui/client/components/prompt.directive.js b/awx/ui/client/components/prompt.directive.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/awx/ui/client/components/tab-navigation.directive.js b/awx/ui/client/components/tab-navigation.directive.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/awx/ui/client/components/tab.directive.js b/awx/ui/client/components/tab.directive.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/awx/ui/client/components/table.directive.js b/awx/ui/client/components/table.directive.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/awx/ui/client/components/toggle-button.directive.js b/awx/ui/client/components/toggle-button.directive.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/awx/ui/client/components/toggle-content.directive.js b/awx/ui/client/components/toggle-content.directive.js new file mode 100644 index 0000000000..e69de29bb2 From 637fb8fe27cd11a0c64b426520ec7cb9f8a8e043 Mon Sep 17 00:00:00 2001 From: gconsidine Date: Thu, 20 Apr 2017 18:07:28 -0400 Subject: [PATCH 02/45] Add basic component functionality --- awx/ui/.eslintignore | 2 + awx/ui/.eslintrc.js | 7 ++- awx/ui/client/components/_index.less | 1 + awx/ui/client/components/_panel.less | 9 +++ awx/ui/client/components/index.js | 8 +++ .../components/panel-heading.directive.js | 12 ++++ .../components/panel-heading.partial.html | 13 ++++ awx/ui/client/components/panel.directive.js | 9 +++ awx/ui/client/components/panel.partial.html | 3 + awx/ui/client/src/app.js | 7 ++- .../src/credentials/index.controller.js | 12 ++++ awx/ui/client/src/credentials/index.js | 17 ++++++ awx/ui/client/src/credentials/index.view.html | 6 ++ awx/ui/client/src/credentials/main.js | 61 ------------------- awx/ui/client/theme/_common.less | 22 +++++++ awx/ui/client/theme/_variables.less | 16 +++++ awx/ui/client/theme/index.less | 4 ++ awx/ui/grunt-tasks/browserSync.js | 1 + awx/ui/grunt-tasks/concurrent.js | 8 +-- awx/ui/grunt-tasks/copy.js | 13 ++++ awx/ui/grunt-tasks/less.js | 3 +- awx/ui/grunt-tasks/watch.js | 11 +++- 22 files changed, 172 insertions(+), 73 deletions(-) create mode 100644 awx/ui/client/components/_index.less create mode 100644 awx/ui/client/components/_panel.less create mode 100644 awx/ui/client/components/index.js create mode 100644 awx/ui/client/components/panel-heading.directive.js create mode 100644 awx/ui/client/components/panel-heading.partial.html create mode 100644 awx/ui/client/components/panel.partial.html create mode 100644 awx/ui/client/src/credentials/index.controller.js create mode 100644 awx/ui/client/src/credentials/index.js create mode 100644 awx/ui/client/src/credentials/index.view.html delete mode 100644 awx/ui/client/src/credentials/main.js create mode 100644 awx/ui/client/theme/_common.less create mode 100644 awx/ui/client/theme/_variables.less create mode 100644 awx/ui/client/theme/index.less diff --git a/awx/ui/.eslintignore b/awx/ui/.eslintignore index 9222615c2c..d806c9acc1 100644 --- a/awx/ui/.eslintignore +++ b/awx/ui/.eslintignore @@ -11,3 +11,5 @@ templates tests client/**/*.js +!client/components/**/*.js + diff --git a/awx/ui/.eslintrc.js b/awx/ui/.eslintrc.js index 9eabfdcf47..6d1174fa55 100644 --- a/awx/ui/.eslintrc.js +++ b/awx/ui/.eslintrc.js @@ -15,8 +15,9 @@ module.exports = { jsyaml: true }, rules: { - indent: ['error', 4], - 'comma-dangle': 'off', - 'prefer-const': ['off'] + indent: [0, 4], + 'comma-dangle': 0, + 'prefer-const': 0, + 'space-before-function-paren': [2, 'always'] } }; diff --git a/awx/ui/client/components/_index.less b/awx/ui/client/components/_index.less new file mode 100644 index 0000000000..51028d0369 --- /dev/null +++ b/awx/ui/client/components/_index.less @@ -0,0 +1 @@ +@import '_panel'; diff --git a/awx/ui/client/components/_panel.less b/awx/ui/client/components/_panel.less new file mode 100644 index 0000000000..2f73622fcb --- /dev/null +++ b/awx/ui/client/components/_panel.less @@ -0,0 +1,9 @@ +.at-Panel { + margin: @at-margin-md 0; +} + +// TODO (remove override on cleanup): +.at-Panel-heading:hover { + cursor: default; +} +// TODO-end diff --git a/awx/ui/client/components/index.js b/awx/ui/client/components/index.js new file mode 100644 index 0000000000..b327c46d39 --- /dev/null +++ b/awx/ui/client/components/index.js @@ -0,0 +1,8 @@ +import panel from './panel.directive'; +import panelHeading from './panel-heading.directive'; + +angular + .module('at.components', []) + .directive('atPanel', panel) + .directive('atPanelHeading', panelHeading); + diff --git a/awx/ui/client/components/panel-heading.directive.js b/awx/ui/client/components/panel-heading.directive.js new file mode 100644 index 0000000000..3718f19768 --- /dev/null +++ b/awx/ui/client/components/panel-heading.directive.js @@ -0,0 +1,12 @@ +function atPanelHeading () { + return { + restrict: 'E', + transclude: true, + templateUrl: 'static/partials/components/panel-heading.partial.html', + scope: { + heading: '=config' + } + }; +} + +export default atPanelHeading; diff --git a/awx/ui/client/components/panel-heading.partial.html b/awx/ui/client/components/panel-heading.partial.html new file mode 100644 index 0000000000..760b4c8c42 --- /dev/null +++ b/awx/ui/client/components/panel-heading.partial.html @@ -0,0 +1,13 @@ +
+
+
+ {{ heading.title }} +
+
+ {{ heading.titleBadge }} +
+
+ + +
+ diff --git a/awx/ui/client/components/panel.directive.js b/awx/ui/client/components/panel.directive.js index e69de29bb2..3ea08ba67f 100644 --- a/awx/ui/client/components/panel.directive.js +++ b/awx/ui/client/components/panel.directive.js @@ -0,0 +1,9 @@ +function atPanel () { + return { + restrict: 'E', + transclude: true, + templateUrl: 'static/partials/components/panel.partial.html' + }; +} + +export default atPanel; diff --git a/awx/ui/client/components/panel.partial.html b/awx/ui/client/components/panel.partial.html new file mode 100644 index 0000000000..fdd858378f --- /dev/null +++ b/awx/ui/client/components/panel.partial.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/awx/ui/client/src/app.js b/awx/ui/client/src/app.js index 02b13f0f40..46733e7d68 100644 --- a/awx/ui/client/src/app.js +++ b/awx/ui/client/src/app.js @@ -60,7 +60,6 @@ import login from './login/main'; import activityStream from './activity-stream/main'; import standardOut from './standard-out/main'; import Templates from './templates/main'; -import credentials from './credentials/main'; import jobs from './jobs/main'; import teams from './teams/main'; import users from './users/main'; @@ -72,6 +71,9 @@ import footer from './footer/main'; import scheduler from './scheduler/main'; import instanceGroups from './instance-groups/main'; +import '../components'; +import './credentials'; + var tower = angular.module('Tower', [ // how to add CommonJS / AMD third-party dependencies: // 1. npm install --save package-name @@ -118,7 +120,6 @@ var tower = angular.module('Tower', [ standardOut.name, Templates.name, portalMode.name, - credentials.name, jobs.name, teams.name, users.name, @@ -131,6 +132,8 @@ var tower = angular.module('Tower', [ 'PromptDialog', 'AWDirectives', 'features', + 'at.components', + 'at.feature.credentials' ]) .constant('AngularScheduler.partials', urlPrefix + 'lib/angular-scheduler/lib/') diff --git a/awx/ui/client/src/credentials/index.controller.js b/awx/ui/client/src/credentials/index.controller.js new file mode 100644 index 0000000000..60cb0ec65b --- /dev/null +++ b/awx/ui/client/src/credentials/index.controller.js @@ -0,0 +1,12 @@ +function IndexController () { + let vm = this; + + vm.panel = { + title: 'Credentials', + titleBadge: 5 + }; +} + +// IndexController.$inject = []; + +export default IndexController; diff --git a/awx/ui/client/src/credentials/index.js b/awx/ui/client/src/credentials/index.js new file mode 100644 index 0000000000..8d2fac4063 --- /dev/null +++ b/awx/ui/client/src/credentials/index.js @@ -0,0 +1,17 @@ +import IndexController from './index.controller'; + +function routes ($stateProvider) { + $stateProvider.state({ + name: 'credentials', + url: '/credentials', + templateUrl: '/static/views/credentials/index.view.html', + controller: IndexController, + controllerAs: 'vm' + }); +} + +routes.$inject = [ + '$stateProvider' +]; + +angular.module('at.feature.credentials', []).config(routes); diff --git a/awx/ui/client/src/credentials/index.view.html b/awx/ui/client/src/credentials/index.view.html new file mode 100644 index 0000000000..7b321e801a --- /dev/null +++ b/awx/ui/client/src/credentials/index.view.html @@ -0,0 +1,6 @@ + + + + + + diff --git a/awx/ui/client/src/credentials/main.js b/awx/ui/client/src/credentials/main.js deleted file mode 100644 index 0dfe1d8d5d..0000000000 --- a/awx/ui/client/src/credentials/main.js +++ /dev/null @@ -1,61 +0,0 @@ -/************************************************* - * Copyright (c) 2016 Ansible, Inc. - * - * All Rights Reserved - *************************************************/ - -import ownerList from './ownerList.directive'; -import CredentialsList from './list/credentials-list.controller'; -import CredentialsAdd from './add/credentials-add.controller'; -import CredentialsEdit from './edit/credentials-edit.controller'; -import BecomeMethodChange from './factories/become-method-change.factory'; -import CredentialFormSave from './factories/credential-form-save.factory'; -import KindChange from './factories/kind-change.factory'; -import OwnerChange from './factories/owner-change.factory'; -import CredentialList from './credentials.list'; -import CredentialForm from './credentials.form'; -import { N_ } from '../i18n'; - -export default - angular.module('credentials', []) - .directive('ownerList', ownerList) - .factory('BecomeMethodChange', BecomeMethodChange) - .factory('CredentialFormSave', CredentialFormSave) - .factory('KindChange', KindChange) - .factory('OwnerChange', OwnerChange) - .controller('CredentialsList', CredentialsList) - .controller('CredentialsAdd', CredentialsAdd) - .controller('CredentialsEdit', CredentialsEdit) - .factory('CredentialList', CredentialList) - .factory('CredentialForm', CredentialForm) - .config(['$stateProvider', 'stateDefinitionsProvider', - function($stateProvider, stateDefinitionsProvider) { - let stateDefinitions = stateDefinitionsProvider.$get(); - - // lazily generate a tree of substates which will replace this node in ui-router's stateRegistry - // see: stateDefinition.factory for usage documentation - $stateProvider.state({ - name: 'credentials', - url: '/credentials', - lazyLoad: () => stateDefinitions.generateTree({ - parent: 'credentials', - modes: ['add', 'edit'], - list: 'CredentialList', - form: 'CredentialForm', - controllers: { - list: CredentialsList, - add: CredentialsAdd, - edit: CredentialsEdit - }, - data: { - activityStream: true, - activityStreamTarget: 'credential' - }, - ncyBreadcrumb: { - parent: 'setup', - label: N_('CREDENTIALS') - } - }) - }); - } - ]); diff --git a/awx/ui/client/theme/_common.less b/awx/ui/client/theme/_common.less new file mode 100644 index 0000000000..705343a3ec --- /dev/null +++ b/awx/ui/client/theme/_common.less @@ -0,0 +1,22 @@ +.at-Title-row { + align-items: center; + flex: 1 0 auto; + display: flex; +} + +.at-Title-text { + color: @at-gray-dark; + font-size: @at-font-md; + font-weight: bold; + margin-right: @at-margin-sm; + 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; +} diff --git a/awx/ui/client/theme/_variables.less b/awx/ui/client/theme/_variables.less new file mode 100644 index 0000000000..f14a662e53 --- /dev/null +++ b/awx/ui/client/theme/_variables.less @@ -0,0 +1,16 @@ +@at-white: #ffffff; +@at-gray: #848992; +@at-gray-dark: #707070; + +@at-font-sm: 12px; +@at-font-md: 14px; + +@at-padding-sm: 10px; +@at-padding-md: 20px; + +@at-margin-sm: 10px; +@at-margin-md: 20px; + +@at-border-radius-md: 5px; + + diff --git a/awx/ui/client/theme/index.less b/awx/ui/client/theme/index.less new file mode 100644 index 0000000000..cb5a44e92b --- /dev/null +++ b/awx/ui/client/theme/index.less @@ -0,0 +1,4 @@ +@import '_variables'; +@import '_common'; + +@import '../components/_index'; diff --git a/awx/ui/grunt-tasks/browserSync.js b/awx/ui/grunt-tasks/browserSync.js index efb32e31f9..9dc0272d48 100644 --- a/awx/ui/grunt-tasks/browserSync.js +++ b/awx/ui/grunt-tasks/browserSync.js @@ -18,6 +18,7 @@ module.exports = { }, keepalive: false, watchTask: true, + reloadDebounce: 1000, // The browser-sync-client lib will write your current scroll position to window.name // https://github.com/BrowserSync/browser-sync-client/blob/a2718faa91e11553feca7a3962313bf1ec6ba3e5/dist/index.js#L500 // This strategy is enabled in the core browser-sync lib, and not externally documented as an option. Yay! diff --git a/awx/ui/grunt-tasks/concurrent.js b/awx/ui/grunt-tasks/concurrent.js index 45085340bf..3cafeba559 100644 --- a/awx/ui/grunt-tasks/concurrent.js +++ b/awx/ui/grunt-tasks/concurrent.js @@ -1,16 +1,16 @@ module.exports = { dev: { - tasks: ['copy:vendor', 'copy:assets', 'copy:partials', 'copy:languages', 'copy:config', 'less:dev'], + tasks: ['copy:vendor', 'copy:assets', 'copy:partials', 'copy:views', 'copy:languages', 'copy:config', 'less:dev'], }, // This concurrent target is intended for development ui builds that do not require raising browser-sync or filesystem polling devNoSync: { - tasks: ['copy:vendor', 'copy:assets', 'copy:partials', 'copy:languages', 'copy:config', 'less:dev', 'webpack:dev'], + tasks: ['copy:vendor', 'copy:assets', 'copy:partials', 'copy:views', 'copy:languages', 'copy:config', 'less:dev', 'webpack:dev'], }, prod: { - tasks: ['newer:copy:vendor', 'newer:copy:assets', 'newer:copy:partials', 'newer:copy:languages', 'newer:copy:config', 'newer:less:prod'] + tasks: ['newer:copy:vendor', 'newer:copy:assets', 'newer:copy:partials', 'newer:copy:views', 'newer:copy:languages', 'newer:copy:config', 'newer:less:prod'] }, watch: { - tasks: ['watch:css', 'watch:partials', 'watch:assets', ['webpack:dev', 'watch:config']], + tasks: ['watch:css', 'watch:partials', 'watch:views', 'watch:assets', ['webpack:dev', 'watch:config']], options: { logConcurrentOutput: true } diff --git a/awx/ui/grunt-tasks/copy.js b/awx/ui/grunt-tasks/copy.js index 5e32be24b3..fc66d09ea6 100644 --- a/awx/ui/grunt-tasks/copy.js +++ b/awx/ui/grunt-tasks/copy.js @@ -30,6 +30,14 @@ module.exports = { dest: 'static/lib/' }] }, + views: { + files: [{ + cwd: 'client/src', + expand: true, + src: ['**/*.view.html'], + dest: 'static/views/' + }] + }, partials: { files: [{ cwd: 'client/src', @@ -41,6 +49,11 @@ module.exports = { expand: true, src: ['*.html'], dest: 'static/partials/' + }, { + cwd: 'client/components', + expand: true, + src: ['*.partial.html'], + dest: 'static/partials/components/' }] }, languages: { diff --git a/awx/ui/grunt-tasks/less.js b/awx/ui/grunt-tasks/less.js index d7c6d98245..782b7787d4 100644 --- a/awx/ui/grunt-tasks/less.js +++ b/awx/ui/grunt-tasks/less.js @@ -10,18 +10,19 @@ module.exports = { src: [ 'client/legacy-styles/*.less', 'client/src/**/*.less', + 'client/theme/index.less' ] }], options: { sourceMap: true } }, - prod: { files: { 'static/tower.min.css': [ 'client/legacy-styles/*.less', 'client/src/**/*.less', + 'client/theme/index.less' ] }, options: { diff --git a/awx/ui/grunt-tasks/watch.js b/awx/ui/grunt-tasks/watch.js index ba0b852038..91f1b1b72e 100644 --- a/awx/ui/grunt-tasks/watch.js +++ b/awx/ui/grunt-tasks/watch.js @@ -1,12 +1,19 @@ module.exports = { css: { files: 'client/**/*.less', - tasks: ['newer:less:dev'] + tasks: ['less:dev'] }, partials: { - files: 'client/src/**/*.html', + files: [ + 'client/components/*.partial.html', + 'client/src/**/*.partial.html' + ], tasks: ['newer:copy:partials'] }, + views: { + files: 'client/src/**/*.view.html', + tasks: ['newer:copy:views'] + }, assets: { files: 'client/assets', tasks: ['newer:copy:assets'] From c60d5abc5b11a3416bc1108c31e42ed1a2869b04 Mon Sep 17 00:00:00 2001 From: gconsidine Date: Fri, 21 Apr 2017 17:05:11 -0400 Subject: [PATCH 03/45] Add input-search component --- awx/ui/client/components/_badge.less | 8 +++++ awx/ui/client/components/_button.less | 4 +++ awx/ui/client/components/_index.less | 3 ++ awx/ui/client/components/_input.less | 29 +++++++++++++++++++ awx/ui/client/components/_panel.less | 15 ++++++---- awx/ui/client/components/badge.directive.js | 12 ++++++++ awx/ui/client/components/badge.partial.html | 8 +++++ awx/ui/client/components/index.js | 8 ++++- .../components/input-search.directive.js | 20 +++++++++++++ .../components/input-search.partial.html | 10 +++++++ .../client/components/panel-body.directive.js | 9 ++++++ .../client/components/panel-body.partial.html | 3 ++ .../components/panel-heading.directive.js | 2 +- .../components/panel-heading.partial.html | 12 ++++---- .../src/credentials/index.controller.js | 26 +++++++++++++---- awx/ui/client/src/credentials/index.view.html | 22 ++++++++++++-- awx/ui/client/theme/_common.less | 8 ----- awx/ui/client/theme/_mixins.less | 23 +++++++++++++++ awx/ui/client/theme/_temporary-overrides.less | 5 ++++ awx/ui/client/theme/_utility.less | 3 ++ awx/ui/client/theme/_variables.less | 6 ++-- awx/ui/client/theme/index.less | 10 +++++++ 22 files changed, 214 insertions(+), 32 deletions(-) create mode 100644 awx/ui/client/components/_badge.less create mode 100644 awx/ui/client/components/_button.less create mode 100644 awx/ui/client/components/_input.less create mode 100644 awx/ui/client/components/badge.directive.js create mode 100644 awx/ui/client/components/badge.partial.html create mode 100644 awx/ui/client/components/input-search.partial.html create mode 100644 awx/ui/client/components/panel-body.directive.js create mode 100644 awx/ui/client/components/panel-body.partial.html create mode 100644 awx/ui/client/theme/_mixins.less create mode 100644 awx/ui/client/theme/_temporary-overrides.less create mode 100644 awx/ui/client/theme/_utility.less diff --git a/awx/ui/client/components/_badge.less b/awx/ui/client/components/_badge.less new file mode 100644 index 0000000000..c3d69b7ef4 --- /dev/null +++ b/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; +} diff --git a/awx/ui/client/components/_button.less b/awx/ui/client/components/_button.less new file mode 100644 index 0000000000..340ae0e8b7 --- /dev/null +++ b/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; +} diff --git a/awx/ui/client/components/_index.less b/awx/ui/client/components/_index.less index 51028d0369..d5caa0db0a 100644 --- a/awx/ui/client/components/_index.less +++ b/awx/ui/client/components/_index.less @@ -1 +1,4 @@ +@import '_badge'; +@import '_button'; +@import '_input'; @import '_panel'; diff --git a/awx/ui/client/components/_input.less b/awx/ui/client/components/_input.less new file mode 100644 index 0000000000..fb2dfb9b07 --- /dev/null +++ b/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; +} + diff --git a/awx/ui/client/components/_panel.less b/awx/ui/client/components/_panel.less index 2f73622fcb..47686b419d 100644 --- a/awx/ui/client/components/_panel.less +++ b/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 diff --git a/awx/ui/client/components/badge.directive.js b/awx/ui/client/components/badge.directive.js new file mode 100644 index 0000000000..991ee5584b --- /dev/null +++ b/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; diff --git a/awx/ui/client/components/badge.partial.html b/awx/ui/client/components/badge.partial.html new file mode 100644 index 0000000000..3d5a0f0672 --- /dev/null +++ b/awx/ui/client/components/badge.partial.html @@ -0,0 +1,8 @@ +
+
+ {{ config.text }} +
+ + +
+ diff --git a/awx/ui/client/components/index.js b/awx/ui/client/components/index.js index b327c46d39..033bab7f76 100644 --- a/awx/ui/client/components/index.js +++ b/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); diff --git a/awx/ui/client/components/input-search.directive.js b/awx/ui/client/components/input-search.directive.js index e69de29bb2..7c3b315ed1 100644 --- a/awx/ui/client/components/input-search.directive.js +++ b/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; diff --git a/awx/ui/client/components/input-search.partial.html b/awx/ui/client/components/input-search.partial.html new file mode 100644 index 0000000000..94a65d8461 --- /dev/null +++ b/awx/ui/client/components/input-search.partial.html @@ -0,0 +1,10 @@ +
+ +
+ +
+
diff --git a/awx/ui/client/components/panel-body.directive.js b/awx/ui/client/components/panel-body.directive.js new file mode 100644 index 0000000000..02170edcfe --- /dev/null +++ b/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; diff --git a/awx/ui/client/components/panel-body.partial.html b/awx/ui/client/components/panel-body.partial.html new file mode 100644 index 0000000000..371d08af3e --- /dev/null +++ b/awx/ui/client/components/panel-body.partial.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/awx/ui/client/components/panel-heading.directive.js b/awx/ui/client/components/panel-heading.directive.js index 3718f19768..238a494c85 100644 --- a/awx/ui/client/components/panel-heading.directive.js +++ b/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: '=' } }; } diff --git a/awx/ui/client/components/panel-heading.partial.html b/awx/ui/client/components/panel-heading.partial.html index 760b4c8c42..b18ee0a67d 100644 --- a/awx/ui/client/components/panel-heading.partial.html +++ b/awx/ui/client/components/panel-heading.partial.html @@ -1,13 +1,11 @@
-
-
- {{ heading.title }} -
-
- {{ heading.titleBadge }} +
+
+ {{ config.title.text }}
+
- +
diff --git a/awx/ui/client/src/credentials/index.controller.js b/awx/ui/client/src/credentials/index.controller.js index 60cb0ec65b..0efbb3b229 100644 --- a/awx/ui/client/src/credentials/index.controller.js +++ b/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 = []; diff --git a/awx/ui/client/src/credentials/index.view.html b/awx/ui/client/src/credentials/index.view.html index 7b321e801a..8af0a27dce 100644 --- a/awx/ui/client/src/credentials/index.view.html +++ b/awx/ui/client/src/credentials/index.view.html @@ -1,6 +1,22 @@ - - - + + +
+
+ +
+
+ +
+
+
+
+
+ {{ vm.key.body.text }} +
+
+
diff --git a/awx/ui/client/theme/_common.less b/awx/ui/client/theme/_common.less index 705343a3ec..174f2c0735 100644 --- a/awx/ui/client/theme/_common.less +++ b/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; -} diff --git a/awx/ui/client/theme/_mixins.less b/awx/ui/client/theme/_mixins.less new file mode 100644 index 0000000000..486093b827 --- /dev/null +++ b/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; +} diff --git a/awx/ui/client/theme/_temporary-overrides.less b/awx/ui/client/theme/_temporary-overrides.less new file mode 100644 index 0000000000..e7070fa42d --- /dev/null +++ b/awx/ui/client/theme/_temporary-overrides.less @@ -0,0 +1,5 @@ +// TODO (remove override on cleanup): + +.at-Panel-heading:hover { + cursor: default; +} diff --git a/awx/ui/client/theme/_utility.less b/awx/ui/client/theme/_utility.less new file mode 100644 index 0000000000..ac6ee55f23 --- /dev/null +++ b/awx/ui/client/theme/_utility.less @@ -0,0 +1,3 @@ +.at-u-noPadding { + padding: 0; +} diff --git a/awx/ui/client/theme/_variables.less b/awx/ui/client/theme/_variables.less index f14a662e53..3708a28c03 100644 --- a/awx/ui/client/theme/_variables.less +++ b/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; - - diff --git a/awx/ui/client/theme/index.less b/awx/ui/client/theme/index.less index cb5a44e92b..5a8441bb5c 100644 --- a/awx/ui/client/theme/index.less +++ b/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'; From 69b19cc06ceb983e2137ddf26b56fe4feb6ba84b Mon Sep 17 00:00:00 2001 From: gconsidine Date: Tue, 25 Apr 2017 10:55:28 -0400 Subject: [PATCH 04/45] Refactor component folder structure --- awx/ui/client/components/_button.less | 4 --- awx/ui/client/components/_common.less | 17 ++++++++++ awx/ui/client/components/_index.less | 10 +++--- .../_index.less} | 0 .../add.directive.js} | 0 .../cancel.directive.js} | 0 .../delete.directive.js} | 0 .../save.directive.js} | 0 .../{_badge.less => badge/_index.less} | 0 .../components/{ => badge}/badge.directive.js | 2 +- .../components/{ => badge}/badge.partial.html | 0 awx/ui/client/components/index.js | 17 ++++++---- .../components/input-secret.directive.js | 0 .../components/input-textarea.directive.js | 0 awx/ui/client/components/input.directive.js | 0 .../{_input.less => input/_index.less} | 4 +-- .../search.directive.js} | 2 +- .../search.partial.html} | 0 .../secret.directive.js} | 0 .../textarea.directive.js} | 0 .../{ => list}/list-item.directive.js | 0 .../components/{ => list}/list.directive.js | 0 .../{ => pagination}/pagination.directive.js | 0 .../{_panel.less => panel/_index.less} | 0 .../body.directive.js} | 2 +- .../body.partial.html} | 0 .../heading.directive.js} | 2 +- .../heading.partial.html} | 0 .../components/{ => panel}/panel.directive.js | 2 +- .../components/{ => panel}/panel.partial.html | 0 .../{ => popover}/popover.directive.js | 0 .../{ => prompt}/prompt.directive.js | 0 .../components/{ => table}/table.directive.js | 0 .../{ => tabs}/tab-navigation.directive.js | 0 .../components/{ => tabs}/tab.directive.js | 0 .../components/toggle-button.directive.js | 0 .../components/toggle-content.directive.js | 0 awx/ui/client/components/toggle/_index.less | 32 +++++++++++++++++++ .../components/toggle/button.directive.js | 12 +++++++ .../components/toggle/button.partial.html | 9 ++++++ .../components/toggle/content.directive.js | 12 +++++++ .../components/toggle/content.partial.html | 10 ++++++ .../src/credentials/index.controller.js | 5 +-- awx/ui/client/src/credentials/index.view.html | 19 +++++------ awx/ui/client/theme/_mixins.less | 6 ++-- awx/ui/client/theme/_variables.less | 14 ++++++-- awx/ui/grunt-tasks/copy.js | 2 +- awx/ui/grunt-tasks/watch.js | 2 +- 48 files changed, 144 insertions(+), 41 deletions(-) delete mode 100644 awx/ui/client/components/_button.less create mode 100644 awx/ui/client/components/_common.less rename awx/ui/client/components/{action-add.directive.js => action/_index.less} (100%) rename awx/ui/client/components/{action-cancel.directive.js => action/add.directive.js} (100%) rename awx/ui/client/components/{action-delete.directive.js => action/cancel.directive.js} (100%) rename awx/ui/client/components/{action-save.directive.js => action/delete.directive.js} (100%) rename awx/ui/client/components/{form.directive.js => action/save.directive.js} (100%) rename awx/ui/client/components/{_badge.less => badge/_index.less} (100%) rename awx/ui/client/components/{ => badge}/badge.directive.js (68%) rename awx/ui/client/components/{ => badge}/badge.partial.html (100%) delete mode 100644 awx/ui/client/components/input-secret.directive.js delete mode 100644 awx/ui/client/components/input-textarea.directive.js delete mode 100644 awx/ui/client/components/input.directive.js rename awx/ui/client/components/{_input.less => input/_index.less} (84%) rename awx/ui/client/components/{input-search.directive.js => input/search.directive.js} (85%) rename awx/ui/client/components/{input-search.partial.html => input/search.partial.html} (100%) rename awx/ui/client/components/{input-checkbox.directive.js => input/secret.directive.js} (100%) rename awx/ui/client/components/{input-dropdown.directive.js => input/textarea.directive.js} (100%) rename awx/ui/client/components/{ => list}/list-item.directive.js (100%) rename awx/ui/client/components/{ => list}/list.directive.js (100%) rename awx/ui/client/components/{ => pagination}/pagination.directive.js (100%) rename awx/ui/client/components/{_panel.less => panel/_index.less} (100%) rename awx/ui/client/components/{panel-body.directive.js => panel/body.directive.js} (68%) rename awx/ui/client/components/{panel-body.partial.html => panel/body.partial.html} (100%) rename awx/ui/client/components/{panel-heading.directive.js => panel/heading.directive.js} (75%) rename awx/ui/client/components/{panel-heading.partial.html => panel/heading.partial.html} (100%) rename awx/ui/client/components/{ => panel}/panel.directive.js (61%) rename awx/ui/client/components/{ => panel}/panel.partial.html (100%) rename awx/ui/client/components/{ => popover}/popover.directive.js (100%) rename awx/ui/client/components/{ => prompt}/prompt.directive.js (100%) rename awx/ui/client/components/{ => table}/table.directive.js (100%) rename awx/ui/client/components/{ => tabs}/tab-navigation.directive.js (100%) rename awx/ui/client/components/{ => tabs}/tab.directive.js (100%) delete mode 100644 awx/ui/client/components/toggle-button.directive.js delete mode 100644 awx/ui/client/components/toggle-content.directive.js create mode 100644 awx/ui/client/components/toggle/_index.less create mode 100644 awx/ui/client/components/toggle/button.directive.js create mode 100644 awx/ui/client/components/toggle/button.partial.html create mode 100644 awx/ui/client/components/toggle/content.directive.js create mode 100644 awx/ui/client/components/toggle/content.partial.html diff --git a/awx/ui/client/components/_button.less b/awx/ui/client/components/_button.less deleted file mode 100644 index 340ae0e8b7..0000000000 --- a/awx/ui/client/components/_button.less +++ /dev/null @@ -1,4 +0,0 @@ -.at-Button { - padding: @at-padding-xs @at-padding-md; - padding-bottom: @at-padding-xs + 1; -} diff --git a/awx/ui/client/components/_common.less b/awx/ui/client/components/_common.less new file mode 100644 index 0000000000..160fcac71c --- /dev/null +++ b/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) } + diff --git a/awx/ui/client/components/_index.less b/awx/ui/client/components/_index.less index d5caa0db0a..e90b33419f 100644 --- a/awx/ui/client/components/_index.less +++ b/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'; + diff --git a/awx/ui/client/components/action-add.directive.js b/awx/ui/client/components/action/_index.less similarity index 100% rename from awx/ui/client/components/action-add.directive.js rename to awx/ui/client/components/action/_index.less diff --git a/awx/ui/client/components/action-cancel.directive.js b/awx/ui/client/components/action/add.directive.js similarity index 100% rename from awx/ui/client/components/action-cancel.directive.js rename to awx/ui/client/components/action/add.directive.js diff --git a/awx/ui/client/components/action-delete.directive.js b/awx/ui/client/components/action/cancel.directive.js similarity index 100% rename from awx/ui/client/components/action-delete.directive.js rename to awx/ui/client/components/action/cancel.directive.js diff --git a/awx/ui/client/components/action-save.directive.js b/awx/ui/client/components/action/delete.directive.js similarity index 100% rename from awx/ui/client/components/action-save.directive.js rename to awx/ui/client/components/action/delete.directive.js diff --git a/awx/ui/client/components/form.directive.js b/awx/ui/client/components/action/save.directive.js similarity index 100% rename from awx/ui/client/components/form.directive.js rename to awx/ui/client/components/action/save.directive.js diff --git a/awx/ui/client/components/_badge.less b/awx/ui/client/components/badge/_index.less similarity index 100% rename from awx/ui/client/components/_badge.less rename to awx/ui/client/components/badge/_index.less diff --git a/awx/ui/client/components/badge.directive.js b/awx/ui/client/components/badge/badge.directive.js similarity index 68% rename from awx/ui/client/components/badge.directive.js rename to awx/ui/client/components/badge/badge.directive.js index 991ee5584b..e040dbbdb9 100644 --- a/awx/ui/client/components/badge.directive.js +++ b/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: '=' } diff --git a/awx/ui/client/components/badge.partial.html b/awx/ui/client/components/badge/badge.partial.html similarity index 100% rename from awx/ui/client/components/badge.partial.html rename to awx/ui/client/components/badge/badge.partial.html diff --git a/awx/ui/client/components/index.js b/awx/ui/client/components/index.js index 033bab7f76..47b7fd8141 100644 --- a/awx/ui/client/components/index.js +++ b/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); + diff --git a/awx/ui/client/components/input-secret.directive.js b/awx/ui/client/components/input-secret.directive.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/awx/ui/client/components/input-textarea.directive.js b/awx/ui/client/components/input-textarea.directive.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/awx/ui/client/components/input.directive.js b/awx/ui/client/components/input.directive.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/awx/ui/client/components/_input.less b/awx/ui/client/components/input/_index.less similarity index 84% rename from awx/ui/client/components/_input.less rename to awx/ui/client/components/input/_index.less index fb2dfb9b07..6d880adce0 100644 --- a/awx/ui/client/components/_input.less +++ b/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 { diff --git a/awx/ui/client/components/input-search.directive.js b/awx/ui/client/components/input/search.directive.js similarity index 85% rename from awx/ui/client/components/input-search.directive.js rename to awx/ui/client/components/input/search.directive.js index 7c3b315ed1..e64f58ac57 100644 --- a/awx/ui/client/components/input-search.directive.js +++ b/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: '=' diff --git a/awx/ui/client/components/input-search.partial.html b/awx/ui/client/components/input/search.partial.html similarity index 100% rename from awx/ui/client/components/input-search.partial.html rename to awx/ui/client/components/input/search.partial.html diff --git a/awx/ui/client/components/input-checkbox.directive.js b/awx/ui/client/components/input/secret.directive.js similarity index 100% rename from awx/ui/client/components/input-checkbox.directive.js rename to awx/ui/client/components/input/secret.directive.js diff --git a/awx/ui/client/components/input-dropdown.directive.js b/awx/ui/client/components/input/textarea.directive.js similarity index 100% rename from awx/ui/client/components/input-dropdown.directive.js rename to awx/ui/client/components/input/textarea.directive.js diff --git a/awx/ui/client/components/list-item.directive.js b/awx/ui/client/components/list/list-item.directive.js similarity index 100% rename from awx/ui/client/components/list-item.directive.js rename to awx/ui/client/components/list/list-item.directive.js diff --git a/awx/ui/client/components/list.directive.js b/awx/ui/client/components/list/list.directive.js similarity index 100% rename from awx/ui/client/components/list.directive.js rename to awx/ui/client/components/list/list.directive.js diff --git a/awx/ui/client/components/pagination.directive.js b/awx/ui/client/components/pagination/pagination.directive.js similarity index 100% rename from awx/ui/client/components/pagination.directive.js rename to awx/ui/client/components/pagination/pagination.directive.js diff --git a/awx/ui/client/components/_panel.less b/awx/ui/client/components/panel/_index.less similarity index 100% rename from awx/ui/client/components/_panel.less rename to awx/ui/client/components/panel/_index.less diff --git a/awx/ui/client/components/panel-body.directive.js b/awx/ui/client/components/panel/body.directive.js similarity index 68% rename from awx/ui/client/components/panel-body.directive.js rename to awx/ui/client/components/panel/body.directive.js index 02170edcfe..2f8f5b0102 100644 --- a/awx/ui/client/components/panel-body.directive.js +++ b/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' }; } diff --git a/awx/ui/client/components/panel-body.partial.html b/awx/ui/client/components/panel/body.partial.html similarity index 100% rename from awx/ui/client/components/panel-body.partial.html rename to awx/ui/client/components/panel/body.partial.html diff --git a/awx/ui/client/components/panel-heading.directive.js b/awx/ui/client/components/panel/heading.directive.js similarity index 75% rename from awx/ui/client/components/panel-heading.directive.js rename to awx/ui/client/components/panel/heading.directive.js index 238a494c85..51f29e8a1f 100644 --- a/awx/ui/client/components/panel-heading.directive.js +++ b/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: '=' } diff --git a/awx/ui/client/components/panel-heading.partial.html b/awx/ui/client/components/panel/heading.partial.html similarity index 100% rename from awx/ui/client/components/panel-heading.partial.html rename to awx/ui/client/components/panel/heading.partial.html diff --git a/awx/ui/client/components/panel.directive.js b/awx/ui/client/components/panel/panel.directive.js similarity index 61% rename from awx/ui/client/components/panel.directive.js rename to awx/ui/client/components/panel/panel.directive.js index 3ea08ba67f..70ae28d30a 100644 --- a/awx/ui/client/components/panel.directive.js +++ b/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' }; } diff --git a/awx/ui/client/components/panel.partial.html b/awx/ui/client/components/panel/panel.partial.html similarity index 100% rename from awx/ui/client/components/panel.partial.html rename to awx/ui/client/components/panel/panel.partial.html diff --git a/awx/ui/client/components/popover.directive.js b/awx/ui/client/components/popover/popover.directive.js similarity index 100% rename from awx/ui/client/components/popover.directive.js rename to awx/ui/client/components/popover/popover.directive.js diff --git a/awx/ui/client/components/prompt.directive.js b/awx/ui/client/components/prompt/prompt.directive.js similarity index 100% rename from awx/ui/client/components/prompt.directive.js rename to awx/ui/client/components/prompt/prompt.directive.js diff --git a/awx/ui/client/components/table.directive.js b/awx/ui/client/components/table/table.directive.js similarity index 100% rename from awx/ui/client/components/table.directive.js rename to awx/ui/client/components/table/table.directive.js diff --git a/awx/ui/client/components/tab-navigation.directive.js b/awx/ui/client/components/tabs/tab-navigation.directive.js similarity index 100% rename from awx/ui/client/components/tab-navigation.directive.js rename to awx/ui/client/components/tabs/tab-navigation.directive.js diff --git a/awx/ui/client/components/tab.directive.js b/awx/ui/client/components/tabs/tab.directive.js similarity index 100% rename from awx/ui/client/components/tab.directive.js rename to awx/ui/client/components/tabs/tab.directive.js diff --git a/awx/ui/client/components/toggle-button.directive.js b/awx/ui/client/components/toggle-button.directive.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/awx/ui/client/components/toggle-content.directive.js b/awx/ui/client/components/toggle-content.directive.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/awx/ui/client/components/toggle/_index.less b/awx/ui/client/components/toggle/_index.less new file mode 100644 index 0000000000..4e5a52f4bf --- /dev/null +++ b/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; +} diff --git a/awx/ui/client/components/toggle/button.directive.js b/awx/ui/client/components/toggle/button.directive.js new file mode 100644 index 0000000000..b20ca29eee --- /dev/null +++ b/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; diff --git a/awx/ui/client/components/toggle/button.partial.html b/awx/ui/client/components/toggle/button.partial.html new file mode 100644 index 0000000000..e3f87eeb14 --- /dev/null +++ b/awx/ui/client/components/toggle/button.partial.html @@ -0,0 +1,9 @@ + diff --git a/awx/ui/client/components/toggle/content.directive.js b/awx/ui/client/components/toggle/content.directive.js new file mode 100644 index 0000000000..f8b3358201 --- /dev/null +++ b/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; diff --git a/awx/ui/client/components/toggle/content.partial.html b/awx/ui/client/components/toggle/content.partial.html new file mode 100644 index 0000000000..941328a5a2 --- /dev/null +++ b/awx/ui/client/components/toggle/content.partial.html @@ -0,0 +1,10 @@ +
+
+
+ {{ config.content.text }} +
+
+ + +
+ diff --git a/awx/ui/client/src/credentials/index.controller.js b/awx/ui/client/src/credentials/index.controller.js index 0efbb3b229..a244214ed7 100644 --- a/awx/ui/client/src/credentials/index.controller.js +++ b/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' } }; diff --git a/awx/ui/client/src/credentials/index.view.html b/awx/ui/client/src/credentials/index.view.html index 8af0a27dce..695ee02df7 100644 --- a/awx/ui/client/src/credentials/index.view.html +++ b/awx/ui/client/src/credentials/index.view.html @@ -2,21 +2,18 @@
-
+
-
-
-
-
-
- {{ vm.key.body.text }} -
-
-
+ diff --git a/awx/ui/client/theme/_mixins.less b/awx/ui/client/theme/_mixins.less index 486093b827..3748df965d 100644 --- a/awx/ui/client/theme/_mixins.less +++ b/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; } diff --git a/awx/ui/client/theme/_variables.less b/awx/ui/client/theme/_variables.less index 3708a28c03..4de6f6b422 100644 --- a/awx/ui/client/theme/_variables.less +++ b/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; diff --git a/awx/ui/grunt-tasks/copy.js b/awx/ui/grunt-tasks/copy.js index fc66d09ea6..9c179945a6 100644 --- a/awx/ui/grunt-tasks/copy.js +++ b/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/' }] }, diff --git a/awx/ui/grunt-tasks/watch.js b/awx/ui/grunt-tasks/watch.js index 91f1b1b72e..a0149ab6e0 100644 --- a/awx/ui/grunt-tasks/watch.js +++ b/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'] From 90b3378725319ae7e53905937e2118f8dcc49ec5 Mon Sep 17 00:00:00 2001 From: gconsidine Date: Tue, 25 Apr 2017 11:54:56 -0400 Subject: [PATCH 05/45] Add test directory --- awx/ui/client/test/karma.conf.js | 18 ++++++++++++++++++ awx/ui/client/test/panel.spec.js | 20 ++++++++++++++++++++ 2 files changed, 38 insertions(+) create mode 100644 awx/ui/client/test/karma.conf.js create mode 100644 awx/ui/client/test/panel.spec.js diff --git a/awx/ui/client/test/karma.conf.js b/awx/ui/client/test/karma.conf.js new file mode 100644 index 0000000000..eb164cfc26 --- /dev/null +++ b/awx/ui/client/test/karma.conf.js @@ -0,0 +1,18 @@ +module.exports = config => { + config.set({ + basePath: '..', + singleRun: true, + autoWatch: true, + frameworks: ['jasmine'], + browsers: ['PhantomJS'], + reporters: ['mocha'], + files: [ + 'components/**/*.js', + 'test/*.spec.js' + ], + plugins: [ + 'karma-jasmine' + 'karma-mocha-reporter' + ], + }); +}; diff --git a/awx/ui/client/test/panel.spec.js b/awx/ui/client/test/panel.spec.js new file mode 100644 index 0000000000..50d1307867 --- /dev/null +++ b/awx/ui/client/test/panel.spec.js @@ -0,0 +1,20 @@ +describe('Components | panel', () => { + var $compile, + $rootScope; + + beforeEach(module('at.components')); + + beforeEach(inject((_$compile_, _$rootScope_) => { + $compile = _$compile_; + $rootScope = _$rootScope_; + })); + + it('should load the navigation partial', function() { + var element = $compile('')($rootScope); + + $rootScope.$digest(); + + console.log(element.html()); + //expect(element.html()).toContain('