diff --git a/awx/ui/client/features/credentials/add-credentials.controller.js b/awx/ui/client/features/credentials/add-credentials.controller.js index b9a0a9fce6..60294a63bd 100644 --- a/awx/ui/client/features/credentials/add-credentials.controller.js +++ b/awx/ui/client/features/credentials/add-credentials.controller.js @@ -24,11 +24,6 @@ function AddCredentialsController (models, $state) { }); vm.form.organization._placeholder = DEFAULT_ORGANIZATION_PLACEHOLDER; - vm.form.organization._data = organization.get('results'); - vm.form.organization._format = 'objects'; - vm.form.organization._exp = 'org as org.name for org in state._data'; - vm.form.organization._display = 'name'; - vm.form.organization._key = 'id'; vm.form.credential_type._data = credentialType.get('results'); vm.form.credential_type._placeholder = 'SELECT A TYPE'; diff --git a/awx/ui/client/features/credentials/add-edit-credentials.view.html b/awx/ui/client/features/credentials/add-edit-credentials.view.html index d8b45d7a30..186056af2b 100644 --- a/awx/ui/client/features/credentials/add-edit-credentials.view.html +++ b/awx/ui/client/features/credentials/add-edit-credentials.view.html @@ -10,7 +10,7 @@ - + diff --git a/awx/ui/client/lib/components/_index.less b/awx/ui/client/lib/components/_index.less index d26fbbc11d..dc1a201c5b 100644 --- a/awx/ui/client/lib/components/_index.less +++ b/awx/ui/client/lib/components/_index.less @@ -1,7 +1,8 @@ @import 'action/_index'; @import 'input/_index'; -@import 'panel/_index'; @import 'modal/_index'; +@import 'panel/_index'; @import 'popover/_index'; @import 'tabs/_index'; +@import 'table/_index'; @import 'utility/_index'; diff --git a/awx/ui/client/lib/components/form/form.directive.js b/awx/ui/client/lib/components/form/form.directive.js index 7838ace48b..d85ca856fd 100644 --- a/awx/ui/client/lib/components/form/form.directive.js +++ b/awx/ui/client/lib/components/form/form.directive.js @@ -2,6 +2,9 @@ function atFormLink (scope, el, attrs, controllers) { let formController = controllers[0]; let form = el[0]; + scope.ns = 'form'; + scope[scope.ns] = { modal: {} }; + formController.init(scope, form); } @@ -9,10 +12,10 @@ function AtFormController (eventService) { let vm = this || {}; let scope; + let modal; let form; vm.components = []; - vm.modal = {}; vm.state = { isValid: false, disabled: false, @@ -22,6 +25,7 @@ function AtFormController (eventService) { vm.init = (_scope_, _form_) => { scope = _scope_; form = _form_; + modal = scope[scope.ns].modal; vm.setListeners(); }; @@ -102,7 +106,7 @@ function AtFormController (eventService) { message = err.data; } - vm.modal.show('Unable to Submit', `Unexpected Error: ${message}`); + modal.show('Unable to Submit', `Unexpected Error: ${message}`); } }; @@ -110,7 +114,7 @@ function AtFormController (eventService) { let title = 'Unable to Submit'; let message = 'Unexpected server error. View the console for more information'; - vm.modal.show(title, message); + modal.show(title, message); return true; }; diff --git a/awx/ui/client/lib/components/form/form.partial.html b/awx/ui/client/lib/components/form/form.partial.html index dd2d00b40e..881f857fe6 100644 --- a/awx/ui/client/lib/components/form/form.partial.html +++ b/awx/ui/client/lib/components/form/form.partial.html @@ -5,5 +5,5 @@ - + 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 @@