From f11aef01efbb929c963651758d680ee09b8cd4e2 Mon Sep 17 00:00:00 2001 From: gconsidine Date: Tue, 20 Jun 2017 10:02:47 -0400 Subject: [PATCH 1/8] Add contextual variables and update references --- .../edit-credentials.controller.js | 2 +- .../client/lib/components/action/_index.less | 4 +- .../lib/components/form/action.directive.js | 4 +- .../client/lib/components/input/_index.less | 95 ++++++------- .../lib/components/input/group.directive.js | 15 +- .../lib/components/input/lookup.partial.html | 2 +- .../client/lib/components/panel/_index.less | 8 +- .../client/lib/components/popover/_index.less | 26 ++-- awx/ui/client/lib/components/tabs/_index.less | 19 +-- .../lib/components/tabs/tab.partial.html | 2 +- awx/ui/client/lib/theme/_base-variables.less | 67 +++++++++ awx/ui/client/lib/theme/_common.less | 38 ------ .../lib/theme/_contextual-variables.less | 128 ++++++++++++++++++ awx/ui/client/lib/theme/_global.less | 41 ++++++ awx/ui/client/lib/theme/_mixins.less | 37 ++--- awx/ui/client/lib/theme/_variables.less | 72 ---------- awx/ui/client/lib/theme/index.less | 5 +- 17 files changed, 349 insertions(+), 216 deletions(-) create mode 100644 awx/ui/client/lib/theme/_base-variables.less delete mode 100644 awx/ui/client/lib/theme/_common.less create mode 100644 awx/ui/client/lib/theme/_contextual-variables.less create mode 100644 awx/ui/client/lib/theme/_global.less delete mode 100644 awx/ui/client/lib/theme/_variables.less diff --git a/awx/ui/client/features/credentials/edit-credentials.controller.js b/awx/ui/client/features/credentials/edit-credentials.controller.js index b7370fe7c6..421baa1808 100644 --- a/awx/ui/client/features/credentials/edit-credentials.controller.js +++ b/awx/ui/client/features/credentials/edit-credentials.controller.js @@ -77,7 +77,7 @@ function EditCredentialsController (models, $state, $scope) { }; vm.form.onSaveSuccess = res => { - $state.go('credentials', { reload: true }); + $state.go('credentials.edit', { credential_id: credential.get('id') }, { reload: true }); }; } diff --git a/awx/ui/client/lib/components/action/_index.less b/awx/ui/client/lib/components/action/_index.less index 95231f8a41..6208e2a41d 100644 --- a/awx/ui/client/lib/components/action/_index.less +++ b/awx/ui/client/lib/components/action/_index.less @@ -1,7 +1,7 @@ .at-ActionGroup { - margin-top: @at-space-6x; + margin-top: @at-margin-panel; button:last-child { - margin-left: @at-space-5x; + margin-left: @at-margin-panel-inset; } } diff --git a/awx/ui/client/lib/components/form/action.directive.js b/awx/ui/client/lib/components/form/action.directive.js index 883e94cb89..90dbf561ef 100644 --- a/awx/ui/client/lib/components/form/action.directive.js +++ b/awx/ui/client/lib/components/form/action.directive.js @@ -38,14 +38,14 @@ function atFormActionController ($state) { vm.setCancelDefaults = () => { scope.text = 'CANCEL'; scope.fill = 'Hollow'; - scope.color = 'white'; + scope.color = 'default'; scope.action = () => $state.go('^'); }; vm.setSaveDefaults = () => { scope.text = 'SAVE'; scope.fill = ''; - scope.color = 'green'; + scope.color = 'success'; scope.action = () => form.submit(); }; } diff --git a/awx/ui/client/lib/components/input/_index.less b/awx/ui/client/lib/components/input/_index.less index bc04b24246..166e7018db 100644 --- a/awx/ui/client/lib/components/input/_index.less +++ b/awx/ui/client/lib/components/input/_index.less @@ -1,17 +1,17 @@ .at-Input { - .at-mixin-Placeholder(@at-gray-dark-3x); + .at-mixin-Placeholder(@at-color-input-placeholder); - height: @at-input-height; - background: @at-white; + height: @at-height-input; + background: @at-color-input-background; border-radius: @at-border-radius; - color: @at-gray-dark-5x; + color: @at-color-input-text; &, &:active { - border-color: @at-gray-dark-2x; + border-color: @at-color-input-border; } &:focus { - border-color: @at-blue; + border-color: @at-color-input-focus; } } @@ -21,43 +21,43 @@ & > label { & > input[type=checkbox] { - height: @at-input-height; + height: @at-height-input; margin: 0; padding: 0; } & > p { margin: 0; - padding: 0 0 0 @at-space-6x; + padding: 0 0 0 @at-padding-panel; line-height: @at-line-height-tall; } } } .at-InputContainer { - margin-top: @at-space-6x; + margin-top: @at-margin-panel; } .at-Input-button { - min-width: @at-input-button-width; display: block; - height: @at-input-height; + height: @at-height-button; + line-height: 1; &, &:active, &:hover, &:focus { - color: @at-gray-dark-3x; - border-color: @at-gray-dark-2x; - background-color: @at-white; + color: @at-color-button-text-default; + border-color: @at-color-input-border; + background-color: @at-color-default; cursor: pointer; } } .at-Input--focus { - border-color: @at-blue; + border-color: @at-color-input-focus; } .at-Input--rejected { &, &:focus { - border-color: @at-red; + border-color: @at-color-input-error; } } @@ -66,7 +66,6 @@ height: 100%; width: 100%; left: 0; - right: @at-input-button-width; z-index: -2; opacity: 0; } @@ -77,15 +76,15 @@ .at-InputGroup { padding: 0; - margin: @at-space-6x 0 0 0; + margin: @at-margin-panel 0 0 0; } .at-InputGroup-border { position: absolute; - width: @at-inset-width; + width: 5px; height: 100%; - background: @at-gray-dark; - left: -@at-inset-width; + background: @at-color-panel-border; + left: -5px; } .at-InputGroup-button { @@ -93,19 +92,21 @@ & > button { height: 100%; + border-right: none; + color: @at-color-button-text-default; } } .at-InputGroup-title { - .at-mixin-Heading(@at-font-size-2x); - margin: 0 0 0 @at-space-5x; + .at-mixin-Heading(@at-font-size-panel-inset-heading); + margin: 0 0 0 @at-margin-panel-inset; } .at-InputGroup-divider { clear: both; margin: 0; padding: 0; - height: @at-space-6x; + height: @at-height-divider; } .at-InputLabel { @@ -114,17 +115,17 @@ } .at-InputLabel-name { - color: @at-gray-dark-4x; - font-size: @at-font-size-2x; - font-weight: @at-font-weight; + color: @at-color-form-label; + font-size: @at-font-size-form-label; + font-weight: @at-font-weight-body; text-transform: uppercase; } .at-InputLabel-hint { - margin-left: @at-space-4x; - color: @at-gray-dark-3x; - font-size: @at-font-size; - font-weight: @at-font-weight; + margin-left: @at-margin-form-label-hint; + color: @at-color-input-hint; + font-size: @at-font-size-help-text; + font-weight: @at-font-weight-body; line-height: @at-line-height-short; } @@ -137,15 +138,15 @@ margin-bottom: 0; & > input[type=checkbox] { - margin: 0 @at-space 0 0; + margin: 0 3px 0 0; position: relative; - top: @at-space; + top: 3px } & > p { - font-size: @at-font-size; - color: @at-gray-dark-4x; - font-weight: @at-font-weight; + font-size: @at-font-size-help-text; + color: @at-color-form-label; + font-weight: @at-font-weight-body; display: inline; margin: 0; padding: 0; @@ -153,16 +154,16 @@ } .at-InputMessage--rejected { - font-size: @at-font-size; - color: @at-red; - margin: @at-space-3x 0 0 0; + font-size: @at-font-size-help-text; + color: @at-color-error; + margin: @at-margin-input-message 0 0 0; padding: 0; } .at-InputLabel-required { - color: @at-red; - font-weight: @at-font-weight-2x; - font-size: @at-font-size-2x; + color: @at-color-error; + font-weight: @at-font-weight-heading; + font-size: @at-font-size-form-label; margin: 0; } @@ -171,13 +172,13 @@ width: 100%; & > i { - font-size: @at-font-size; + font-size: @at-font-size-button; position: absolute; z-index: 3; pointer-events: none; - top: @at-space-4x; - right: @at-space-4x; - color: @at-gray-dark-2x; + top: @at-height-input / 3; + right: @at-height-input / 3; + color: @at-color-icon; } } @@ -188,7 +189,7 @@ } .at-InputSelect-select { - height: @at-input-height; + height: @at-height-input; cursor: pointer; position: absolute; z-index: 1; diff --git a/awx/ui/client/lib/components/input/group.directive.js b/awx/ui/client/lib/components/input/group.directive.js index 5ffb8029b1..550cd1c0ef 100644 --- a/awx/ui/client/lib/components/input/group.directive.js +++ b/awx/ui/client/lib/components/input/group.directive.js @@ -49,7 +49,6 @@ function AtInputGroupController ($scope, $compile) { vm.insert(group); state._group = group; - vm.compile(group); }; vm.createComponentConfigs = inputs => { @@ -138,20 +137,22 @@ function AtInputGroupController ($scope, $compile) { vm.createComponent = (input, index) => { let tabindex = Number(scope.tab) + index; let col = input._expand ? 12 : scope.col; - - return angular.element( + let component = angular.element( `<${input._component} col="${col}" tab="${tabindex}" state="${state._reference}._group[${index}]"> ` ); + + $compile(component)(scope.$parent) + + return component; }; vm.createDivider = () => { - return angular.element(''); - }; + let divider = angular.element(''); + $compile(divider[0])(scope.$parent); - vm.compile = group => { - group.forEach(component => $compile(component._element[0])(scope.$parent)); + return divider; }; vm.clear = () => { diff --git a/awx/ui/client/lib/components/input/lookup.partial.html b/awx/ui/client/lib/components/input/lookup.partial.html index d5f0ca89b7..05239176ca 100644 --- a/awx/ui/client/lib/components/input/lookup.partial.html +++ b/awx/ui/client/lib/components/input/lookup.partial.html @@ -4,7 +4,7 @@
-
- + diff --git a/awx/ui/client/lib/components/index.js b/awx/ui/client/lib/components/index.js index 3f24c7376b..a227872c69 100644 --- a/awx/ui/client/lib/components/index.js +++ b/awx/ui/client/lib/components/index.js @@ -10,6 +10,7 @@ import inputMessage from './input/message.directive'; import inputNumber from './input/number.directive'; import inputSelect from './input/select.directive'; import inputSecret from './input/secret.directive'; +import inputSearch from './input/search.directive'; import inputText from './input/text.directive'; import inputTextarea from './input/textarea.directive'; import inputTextareaSecret from './input/textarea-secret.directive'; @@ -20,6 +21,7 @@ import panelBody from './panel/body.directive'; import popover from './popover/popover.directive'; import tab from './tabs/tab.directive'; import tabGroup from './tabs/group.directive'; +import table from './table/table.directive'; import BaseInputController from './input/base.controller'; @@ -37,6 +39,7 @@ angular .directive('atInputNumber', inputNumber) .directive('atInputSecret', inputSecret) .directive('atInputSelect', inputSelect) + .directive('atInputSearch', inputSearch) .directive('atInputText', inputText) .directive('atInputTextarea', inputTextarea) .directive('atInputTextareaSecret', inputTextareaSecret) @@ -47,6 +50,7 @@ angular .directive('atPopover', popover) .directive('atTab', tab) .directive('atTabGroup', tabGroup) + .directive('atTable', table) .service('BaseInputController', BaseInputController); diff --git a/awx/ui/client/lib/components/input/_index.less b/awx/ui/client/lib/components/input/_index.less index 166e7018db..9d52ea1c03 100644 --- a/awx/ui/client/lib/components/input/_index.less +++ b/awx/ui/client/lib/components/input/_index.less @@ -13,6 +13,10 @@ &:focus { border-color: @at-color-input-focus; } + + &[disabled] { + background: @at-color-input-disabled; + } } .at-InputCheckbox { @@ -94,6 +98,7 @@ height: 100%; border-right: none; color: @at-color-button-text-default; + min-width: @at-input-button-width; } } @@ -167,6 +172,42 @@ margin: 0; } +.at-InputSearch-group--left { + padding-right: @at-margin-item-column; +} + +.at-InputSearch-group--right { + padding-left: 0; +} + +.at-InputSearch-well { + margin: @at-margin-top-search-key 0 0 0; + padding: @at-padding-well; +} + +.at-InputSearch-well { + margin: @at-margin-top-search-key 0 0 0; + padding: @at-padding-well; +} + +.at-InputSearch-toggle { + width: 100%; + + &, &:focus, &:visited, &:active { + background: @at-color-default; + cursor: pointer; + } +} + +.at-InputSearch-toggle--active { + &, &:hover, &:focus, &:visited, &:active { + border: @at-color-search-key-active; + background: @at-color-search-key-active; + color: @at-color-default; + cursor: pointer; + } +} + .at-InputSelect { position: relative; width: 100%; @@ -178,7 +219,7 @@ pointer-events: none; top: @at-height-input / 3; right: @at-height-input / 3; - color: @at-color-icon; + color: @at-color-input-icon; } } diff --git a/awx/ui/client/lib/components/input/lookup.directive.js b/awx/ui/client/lib/components/input/lookup.directive.js index 950edeca39..801e4b55e8 100644 --- a/awx/ui/client/lib/components/input/lookup.directive.js +++ b/awx/ui/client/lib/components/input/lookup.directive.js @@ -2,6 +2,13 @@ function atInputLookupLink (scope, element, attrs, controllers) { let formController = controllers[0]; let inputController = controllers[1]; + scope.ns = 'lookup'; + scope[scope.ns] = { + modal: {}, + search: {}, + table: {} + }; + if (scope.tab === '1') { element.find('input')[0].focus(); } @@ -12,36 +19,25 @@ function atInputLookupLink (scope, element, attrs, controllers) { function AtInputLookupController (baseInputController) { let vm = this || {}; - vm.lookup = {}; + let scope; + let modal; + let search; + let table; - vm.init = (scope, element, form) => { - baseInputController.call(vm, 'input', scope, element, form); + vm.init = (_scope_, element, form) => { + baseInputController.call(vm, 'input', _scope_, element, form); - vm.lookup.modal = { - title: 'Select Organization', - buttons: [ - { - type: 'cancel' - }, - { - type: 'select' - } - ] - }; + scope = _scope_; - vm.lookup.search = { - placeholder: 'test' - }; - - vm.lookup.table = { - - }; + modal = scope.lookup.modal; + search = scope.lookup.search; + table = scope.lookup.table; vm.check(); }; vm.search = () => { - vm.modal.show('test'); + modal.show(`Select ${scope.state.label}`); }; } diff --git a/awx/ui/client/lib/components/input/lookup.partial.html b/awx/ui/client/lib/components/input/lookup.partial.html index 05239176ca..dc168d9d77 100644 --- a/awx/ui/client/lib/components/input/lookup.partial.html +++ b/awx/ui/client/lib/components/input/lookup.partial.html @@ -23,8 +23,8 @@ - - - + + + diff --git a/awx/ui/client/lib/components/input/search.directive.js b/awx/ui/client/lib/components/input/search.directive.js new file mode 100644 index 0000000000..d75d49e39e --- /dev/null +++ b/awx/ui/client/lib/components/input/search.directive.js @@ -0,0 +1,54 @@ +const DEFAULT_PLACEHOLDER = 'SEARCH'; + +function atInputSearchLink (scope, element, attrs, controllers) { + let inputController = controllers[0]; + let property = `scope.${scope.ns}.search`; + + let done = scope.$watch(property, () => { + inputController.init(scope, element); + done(); + }); +} + +function AtInputSearchController (baseInputController) { + let vm = this || {}; + + let toggleButton; + let input; + + vm.init = (scope, element) => { + toggleButton = element.find('.at-InputSearch-toggle')[0]; + input = element.find('.at-Input')[0]; + + vm.placeholder = DEFAULT_PLACEHOLDER; + vm.search = scope[scope.ns].search; + // baseInputController.call(vm, 'input', scope, element, form); + + //vm.check(); + }; + + vm.toggle = () => { + input.focus(); + vm.isToggleActive = !vm.isToggleActive; + }; +} + +AtInputSearchController.$inject = ['BaseInputController']; + +function atInputSearch (pathService) { + return { + restrict: 'E', + transclude: true, + replace: true, + require: ['atInputSearch'], + templateUrl: pathService.getPartialPath('components/input/search'), + controller: AtInputSearchController, + controllerAs: 'vm', + link: atInputSearchLink, + scope: true + }; +} + +atInputSearch.$inject = ['PathService']; + +export default atInputSearch; diff --git a/awx/ui/client/lib/components/input/search.partial.html b/awx/ui/client/lib/components/input/search.partial.html new file mode 100644 index 0000000000..d95b75adb3 --- /dev/null +++ b/awx/ui/client/lib/components/input/search.partial.html @@ -0,0 +1,31 @@ +
+
+
+
+
+ + + + +
+
+
+
+ +
+
+
+
+
+

Some info here

+
+
+
+
diff --git a/awx/ui/client/lib/components/modal/_index.less b/awx/ui/client/lib/components/modal/_index.less index 11e962e98b..ba5ac620ec 100644 --- a/awx/ui/client/lib/components/modal/_index.less +++ b/awx/ui/client/lib/components/modal/_index.less @@ -1,10 +1,28 @@ +.at-Modal-body { + font-size: @at-font-size; + padding: 0; +} + +.at-Modal-dismiss { + .at-mixin-ButtonIcon(); + font-size: @at-font-size-modal-dismiss; + color: @at-color-icon-dismiss; + text-align: right; +} + +.at-Modal-heading { + margin: 0; + overflow: visible; + + & > .at-Modal-dismiss { + margin: 0; + } +} + .at-Modal-title { margin: 0; padding: 0; - .at-mixin-Heading(@at-font-size-3x); + .at-mixin-Heading(@at-font-size-modal-heading); } -.at-Modal-body { - font-size: @at-font-size; -} diff --git a/awx/ui/client/lib/components/modal/modal.directive.js b/awx/ui/client/lib/components/modal/modal.directive.js index 10f18a0afc..b5072affa6 100644 --- a/awx/ui/client/lib/components/modal/modal.directive.js +++ b/awx/ui/client/lib/components/modal/modal.directive.js @@ -1,29 +1,39 @@ const DEFAULT_ANIMATION_DURATION = 150; -function atModalLink (scope, el, attr, controllers) { +function atModalLink (scope, el, attrs, controllers) { let modalController = controllers[0]; let container = el[0]; + let property = `scope.${scope.ns}.modal`; - modalController.init(scope, container); + let done = scope.$watch(property, () => { + modalController.init(scope, container); + done(); + }); } -function AtModalController () { +function AtModalController (eventService) { let vm = this; - let scope; let container; + let listeners; - vm.init = (_scope_, _container_) => { - scope = _scope_; + vm.init = (scope, _container_) => { container = _container_; - scope.state.show = vm.show; - scope.state.hide = vm.hide; + vm.modal = scope[scope.ns].modal; + vm.modal.show = vm.show; + vm.modal.hide = vm.hide; }; vm.show = (title, message) => { - scope.title = title; - scope.message = message; + vm.modal.title = title; + vm.modal.message = message; + + event.stopPropagation(); + + listeners = eventService.addListeners([ + [window, 'click', vm.clickToHide] + ]); container.style.display = 'block'; container.style.opacity = 1; @@ -32,14 +42,34 @@ function AtModalController () { vm.hide = () => { container.style.opacity = 0; + eventService.remove(listeners); + setTimeout(() => { container.style.display = 'none'; - scope.message = ''; - scope.title = ''; + vm.modal.message = ''; + vm.modal.title = ''; }, DEFAULT_ANIMATION_DURATION); }; + + vm.clickToHide = event => { + if (vm.clickIsOutsideContainer(event)) { + console.log('outside'); + } else { + console.log('inside'); + } + }; + + vm.clickIsOutsideContainer = e => { + let pos = container.getBoundingClientRect(); + let ex = e.clientX; + let ey = e.clientY; + + console.log(e, pos); + }; } +AtModalController.$inject = ['EventService']; + function atModal (pathService) { return { restrict: 'E', @@ -50,9 +80,7 @@ function atModal (pathService) { controller: AtModalController, controllerAs: 'vm', link: atModalLink, - scope: { - state: '=' - } + scope: true }; } diff --git a/awx/ui/client/lib/components/modal/modal.partial.html b/awx/ui/client/lib/components/modal/modal.partial.html index 9d96d1ff2a..1547b1d857 100644 --- a/awx/ui/client/lib/components/modal/modal.partial.html +++ b/awx/ui/client/lib/components/modal/modal.partial.html @@ -1,20 +1,31 @@