From 69b19cc06ceb983e2137ddf26b56fe4feb6ba84b Mon Sep 17 00:00:00 2001 From: gconsidine Date: Tue, 25 Apr 2017 10:55:28 -0400 Subject: [PATCH] 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']