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';