From f5666eed009be13d710f3420954a9cfbb4378c88 Mon Sep 17 00:00:00 2001 From: Shu Muto Date: Wed, 11 Jul 2018 16:56:52 +0900 Subject: [PATCH] Use new style for help in Angular ModalFormService ModalFormService (horizon.framework.widgets.form.ModalFormService, used in create key pair dialog or create user dialog) and WizardModalService (horizon.framework.widgets.modal.wizard-modal.service, used in create instance dialog or create image dialog) are used in dialogs for create/edit/etc in Angularized panel. But their help descriptions are shown in different style. Angularization proposes new look and feel, so ModalFormService should follow new style for help description like WizardModalService. This patch proposes new style for help in dialogs that uses ModalFormService. And "?" button for opening help panel is overlaped on input field on the first row, so this patch moves it up little bit. In this new style, if the help contents is too simple, it is not needed to make description space in the right harf of dialog for looks consistency, it is prefer not to add help panel, i.e. simply do not show "?" button. Change-Id: Ia720180c7aaef1f3d9c5e24dbebe3fe2d796d6c7 Closes-Bug: #1781151 --- .../widgets/form/modal-form.controller.js | 1 + .../form/modal-form.controller.spec.js | 7 ++++++- .../framework/widgets/form/modal-form.html | 3 +++ .../widgets/form/modal-form.service.js | 3 ++- .../widgets/form/modal-form.service.spec.js | 4 +++- .../roles/actions/create.action.service.js | 4 +++- .../roles/actions/edit.action.service.js | 4 +++- .../actions/workflow/workflow.service.js | 7 ++----- .../containers/containers.controller.js | 10 ++++------ .../containers/create-container.help.html | 20 +++++++++---------- .../core/keypairs/actions/create.service.js | 16 ++++----------- .../core/keypairs/actions/import.service.js | 16 ++++----------- .../scss/components/_help_panel.scss | 3 ++- 13 files changed, 46 insertions(+), 52 deletions(-) diff --git a/horizon/static/framework/widgets/form/modal-form.controller.js b/horizon/static/framework/widgets/form/modal-form.controller.js index 2a725f00b8..3c3e8f06b4 100644 --- a/horizon/static/framework/widgets/form/modal-form.controller.js +++ b/horizon/static/framework/widgets/form/modal-form.controller.js @@ -50,6 +50,7 @@ ctrl.submitText = context.submitText; ctrl.submitIcon = context.submitIcon; ctrl.cancel = cancel; + ctrl.helpUrl = context.helpUrl; function submit($event, schemaForm) { $event.preventDefault(); diff --git a/horizon/static/framework/widgets/form/modal-form.controller.spec.js b/horizon/static/framework/widgets/form/modal-form.controller.spec.js index 45779cf972..d70b6c3350 100644 --- a/horizon/static/framework/widgets/form/modal-form.controller.spec.js +++ b/horizon/static/framework/widgets/form/modal-form.controller.spec.js @@ -31,7 +31,8 @@ title: "title", form: "form", schema: "schema", - model: "model" + model: "model", + helpUrl: "help.html" }; ctrl = $controller( 'horizon.framework.widgets.form.ModalFormController', @@ -63,6 +64,10 @@ expect(ctrl.model).toEqual('model'); }); + it('sets helpUrl on scope', function() { + expect(ctrl.helpUrl).toEqual('help.html'); + }); + it('calls modalInstance close on submit', function() { spyOn(modalInstance, 'close'); ctrl.submit(mockEvent, mockSchemaValidForm); diff --git a/horizon/static/framework/widgets/form/modal-form.html b/horizon/static/framework/widgets/form/modal-form.html index d1e7452812..b4413b703c 100644 --- a/horizon/static/framework/widgets/form/modal-form.html +++ b/horizon/static/framework/widgets/form/modal-form.html @@ -16,6 +16,9 @@ pristine: { errors: false, success: false } }" ng-submit="ctrl.submit($event, schemaForm)"> + + +
diff --git a/horizon/static/framework/widgets/form/modal-form.service.js b/horizon/static/framework/widgets/form/modal-form.service.js index 30dcd8fa42..ad4a17cb9e 100644 --- a/horizon/static/framework/widgets/form/modal-form.service.js +++ b/horizon/static/framework/widgets/form/modal-form.service.js @@ -59,7 +59,8 @@ submitIcon: config.submitIcon || "check", schema: config.schema, form: config.form, - model: config.model + model: config.model, + helpUrl: config.helpUrl }; } }, diff --git a/horizon/static/framework/widgets/form/modal-form.service.spec.js b/horizon/static/framework/widgets/form/modal-form.service.spec.js index 04d65ced46..2d14ef5002 100644 --- a/horizon/static/framework/widgets/form/modal-form.service.spec.js +++ b/horizon/static/framework/widgets/form/modal-form.service.spec.js @@ -41,7 +41,8 @@ "form": "form", "model": "model", "submitIcon": "icon", - "submitText": "save" + "submitText": "save", + "helpUrl": "help.html" }; var modalService = service.open(modalConfig); var context = modalService.resolve.context(); @@ -51,6 +52,7 @@ expect(context.model).toEqual('model'); expect(context.submitIcon).toEqual('icon'); expect(context.submitText).toEqual('save'); + expect(context.helpUrl).toEqual('help.html'); }); it('sets default values for optional parameters', function() { diff --git a/openstack_dashboard/dashboards/identity/static/dashboard/identity/roles/actions/create.action.service.js b/openstack_dashboard/dashboards/identity/static/dashboard/identity/roles/actions/create.action.service.js index f41eb26887..f115195efd 100644 --- a/openstack_dashboard/dashboards/identity/static/dashboard/identity/roles/actions/create.action.service.js +++ b/openstack_dashboard/dashboards/identity/static/dashboard/identity/roles/actions/create.action.service.js @@ -23,6 +23,7 @@ createService.$inject = [ '$q', + 'horizon.dashboard.identity.roles.basePath', 'horizon.dashboard.identity.roles.resourceType', 'horizon.dashboard.identity.roles.role-schema', 'horizon.app.core.openstack-service-api.keystone', @@ -40,6 +41,7 @@ */ function createService( $q, + basePath, resourceType, schema, keystoneAPI, @@ -74,7 +76,7 @@ schema: schema, form: ['*'], model: model, - size: 'sm' + size: 'md' }; return modalFormService.open(config).then(submit); } diff --git a/openstack_dashboard/dashboards/identity/static/dashboard/identity/roles/actions/edit.action.service.js b/openstack_dashboard/dashboards/identity/static/dashboard/identity/roles/actions/edit.action.service.js index 4641f17b59..ddd240f5ab 100644 --- a/openstack_dashboard/dashboards/identity/static/dashboard/identity/roles/actions/edit.action.service.js +++ b/openstack_dashboard/dashboards/identity/static/dashboard/identity/roles/actions/edit.action.service.js @@ -23,6 +23,7 @@ editService.$inject = [ '$q', + 'horizon.dashboard.identity.roles.basePath', 'horizon.dashboard.identity.roles.resourceType', 'horizon.dashboard.identity.roles.role-schema', 'horizon.app.core.openstack-service-api.keystone', @@ -39,6 +40,7 @@ */ function editService( $q, + basePath, resourceType, schema, keystoneAPI, @@ -76,7 +78,7 @@ schema: schema, form: ['*'], model: response.data, - size: 'sm' + size: 'md' }; return modalFormService.open(config).then(service.submit); } diff --git a/openstack_dashboard/dashboards/identity/static/dashboard/identity/users/actions/workflow/workflow.service.js b/openstack_dashboard/dashboards/identity/static/dashboard/identity/users/actions/workflow/workflow.service.js index 19f3df1ef9..f54c99eafb 100644 --- a/openstack_dashboard/dashboards/identity/static/dashboard/identity/users/actions/workflow/workflow.service.js +++ b/openstack_dashboard/dashboards/identity/static/dashboard/identity/users/actions/workflow/workflow.service.js @@ -109,10 +109,6 @@ type: 'template', templateUrl: basePath + "actions/workflow/error." + errorTemplate + ".html", condition: errorTemplate === "default" - }, - { - type: 'template', - templateUrl: basePath + "actions/workflow/info." + action + ".help.html" } ] }, @@ -197,7 +193,8 @@ schema: schema, form: form, model: model, - size: 'md' + size: 'md', + helpUrl: basePath + "actions/workflow/info." + action + ".help.html" }; keystone.getVersion().then(function (response) { diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/containers/containers.controller.js b/openstack_dashboard/dashboards/project/static/dashboard/project/containers/containers.controller.js index 6feab36a0c..a695b4d0dc 100644 --- a/openstack_dashboard/dashboards/project/static/dashboard/project/containers/containers.controller.js +++ b/openstack_dashboard/dashboards/project/static/dashboard/project/containers/containers.controller.js @@ -196,7 +196,7 @@ items: [ { type: 'section', - htmlClass: 'col-sm-6', + htmlClass: 'col-sm-12', items: [ { key: 'name', @@ -217,10 +217,6 @@ ] } ] - }, - { - type: 'template', - templateUrl: basePath + 'create-container.help.html' } ] } @@ -232,7 +228,9 @@ title: gettext('Create Container'), schema: createContainerSchema, form: createContainerForm, - model: model + model: model, + size: 'md', + helpUrl: basePath + 'create-container.help.html' }; return modalFormService.open(config).then(function then() { return ctrl.createContainerAction(model); diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/containers/create-container.help.html b/openstack_dashboard/dashboards/project/static/dashboard/project/containers/create-container.help.html index 443ee03f12..0bd87e98b7 100644 --- a/openstack_dashboard/dashboards/project/static/dashboard/project/containers/create-container.help.html +++ b/openstack_dashboard/dashboards/project/static/dashboard/project/containers/create-container.help.html @@ -1,11 +1,9 @@ -
-

- A container is a storage compartment for your data and provides a way for - you to organize your data. You can think of a container as a folder in - Windows® or a directory in UNIX®. The primary difference between a - container and these other file system concepts is that containers cannot be - nested. You can, however, create an unlimited number of containers within - your account. Data must be stored in a container so you must have at least - one container defined in your account prior to uploading data. -

-
+

+ A container is a storage compartment for your data and provides a way for + you to organize your data. You can think of a container as a folder in + Windows® or a directory in UNIX®. The primary difference between a + container and these other file system concepts is that containers cannot be + nested. You can, however, create an unlimited number of containers within + your account. Data must be stored in a container so you must have at least + one container defined in your account prior to uploading data. +

diff --git a/openstack_dashboard/static/app/core/keypairs/actions/create.service.js b/openstack_dashboard/static/app/core/keypairs/actions/create.service.js index c65c6dd414..29f6b8dbc0 100644 --- a/openstack_dashboard/static/app/core/keypairs/actions/create.service.js +++ b/openstack_dashboard/static/app/core/keypairs/actions/create.service.js @@ -63,7 +63,7 @@ items: [ { type: "section", - htmlClass: "col-sm-6", + htmlClass: "col-sm-12", items: [ { key: "name", @@ -78,16 +78,6 @@ required: true } ] - }, - { - type: "section", - htmlClass: "col-sm-6", - items: [ - { - type: "template", - templateUrl: basePath + "actions/create.description.html" - } - ] } ] } @@ -121,7 +111,9 @@ "schema": schema, "form": form, "model": model, - "submitIcon": "plus" + "submitIcon": "plus", + "size": "md", + "helpUrl": basePath + "actions/create.description.html" }; return modal.open(config).then(submit); } diff --git a/openstack_dashboard/static/app/core/keypairs/actions/import.service.js b/openstack_dashboard/static/app/core/keypairs/actions/import.service.js index bece383bfa..e447f17c0d 100644 --- a/openstack_dashboard/static/app/core/keypairs/actions/import.service.js +++ b/openstack_dashboard/static/app/core/keypairs/actions/import.service.js @@ -66,7 +66,7 @@ items: [ { type: "section", - htmlClass: "col-sm-6", + htmlClass: "col-sm-12", items: [ { key: "name", @@ -85,16 +85,6 @@ templateUrl: basePath + "actions/import.public-key.html" } ] - }, - { - type: "section", - htmlClass: "col-sm-6", - items: [ - { - type: "template", - templateUrl: basePath + "actions/import.description.html" - } - ] } ] } @@ -128,7 +118,9 @@ "schema": schema, "form": form, "model": model, - "submitIcon": "upload" + "submitIcon": "upload", + "size": "md", + "helpUrl": basePath + "actions/import.description.html" }; return modal.open(config).then(submit); } diff --git a/openstack_dashboard/static/dashboard/scss/components/_help_panel.scss b/openstack_dashboard/static/dashboard/scss/components/_help_panel.scss index af80a5ba3c..a18d068f16 100644 --- a/openstack_dashboard/static/dashboard/scss/components/_help_panel.scss +++ b/openstack_dashboard/static/dashboard/scss/components/_help_panel.scss @@ -1,10 +1,11 @@ $help-panel-width: 400px; +$help-panel-top: -5px; .help-toggle, .wizard-help, .help-panel { position: absolute; - top: $padding-xs-horizontal; + top: $help-panel-top; right: 0; z-index: 2; // TODO(robcresswell) untangle the need for this sorcery }