You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@brooklyn.apache.org by he...@apache.org on 2018/08/20 09:39:24 UTC
[04/12] brooklyn-ui git commit: show a nice dropdown for the values
supplied, including supporting description
show a nice dropdown for the values supplied, including supporting description
Project: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/repo
Commit: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/commit/ee98bd40
Tree: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/tree/ee98bd40
Diff: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/diff/ee98bd40
Branch: refs/heads/master
Commit: ee98bd40f5c68b97b06343b061b674fad4332b22
Parents: 19de59d
Author: Alex Heneveld <al...@cloudsoftcorp.com>
Authored: Tue Aug 7 12:20:06 2018 +0100
Committer: Alex Heneveld <al...@cloudsoftcorp.com>
Committed: Tue Aug 7 12:20:06 2018 +0100
----------------------------------------------------------------------
.../suggestion-dropdown.html | 29 ++++++++++++---
.../custom-config-widget/suggestion-dropdown.js | 15 +++++++-
.../suggestion-dropdown.less | 38 ++++++++++++++++++--
.../spec-editor/spec-editor.directive.js | 10 +-----
4 files changed, 75 insertions(+), 17 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/ee98bd40/ui-modules/blueprint-composer/app/components/custom-config-widget/suggestion-dropdown.html
----------------------------------------------------------------------
diff --git a/ui-modules/blueprint-composer/app/components/custom-config-widget/suggestion-dropdown.html b/ui-modules/blueprint-composer/app/components/custom-config-widget/suggestion-dropdown.html
index 4ca05cc..82ecfea 100644
--- a/ui-modules/blueprint-composer/app/components/custom-config-widget/suggestion-dropdown.html
+++ b/ui-modules/blueprint-composer/app/components/custom-config-widget/suggestion-dropdown.html
@@ -36,13 +36,32 @@
</span>
<div class="control-value" ng-class="{ 'inline-control': item.widgetMode==='boolean', 'unset': !defined(config[item.name]), 'has-default': defined(item.defaultValue) && item.defaultValue!=null }">
- <div class="hide-when-collapsed">
+ <div class="hide-when-collapsed extra-label" ng-if="params['label-expanded']">
{{ params['label-expanded'] || "" }}
</div>
- <div>
- <span class="hide-when-expanded">{{ params['label-collapsed'] || "" }}</span>
- {{ config[item.name] }}
+ <div class="config-flex-row">
+ <span class="hide-when-expanded inline-label extra-label" ng-if="params['label-collapsed']">{{ params['label-collapsed'] || "" }}</span>
+ <div class="input-group">
+ <textarea ng-model="config[item.name]" class="form-control" name="{{item.name}}" id="{{item.name}}" auto-grow
+ placeholder="{{defined(config[item.name]) ? null : item.defaultValue=='' || item.defaultValue==null ? '(empty)' : item.defaultValue}}"
+ ng-focus="recordFocus(item)" on-enter="advanceOutToFormGroupInPanel"
+ uib-typeahead="suggestion.value for suggestion in getSuggestions() | filter:{value:$viewValue}"
+ typeahead-min-length=0
+ typeahead-template-url="SuggestionTemplate.html"></textarea>
+ <span class="input-group-btn dsl-wizard-button" ng-if="isDslWizardButtonAllowed(item.name)">
+ <a ui-sref="main.graphical.edit.dsl({entityId: model._id, for: item.name})" class="btn btn-default" title="Open in DSL editor"><i class="fa fa-bolt"></i></a>
+ </span>
+ </div>
</div>
</div>
-</div>
\ No newline at end of file
+</div>
+
+<!--TYPEAHEAD TEMPLATE :: START-->
+<script type="text/ng-template" id="SuggestionTemplate.html">
+ <div class="dropdown-item">
+ <span class="dropdown-item-value" ng-bind-html="match.model.value | uibTypeaheadHighlight:query"></span>
+ <p class="dropdown-item-description" ng-if="match.model.description">{{ match.model.description }}</p>
+ </div>
+</script>
+<!--TYPEAHEAD TEMPLATE :: END-->
http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/ee98bd40/ui-modules/blueprint-composer/app/components/custom-config-widget/suggestion-dropdown.js
----------------------------------------------------------------------
diff --git a/ui-modules/blueprint-composer/app/components/custom-config-widget/suggestion-dropdown.js b/ui-modules/blueprint-composer/app/components/custom-config-widget/suggestion-dropdown.js
index 7c23092..e64e3e8 100644
--- a/ui-modules/blueprint-composer/app/components/custom-config-widget/suggestion-dropdown.js
+++ b/ui-modules/blueprint-composer/app/components/custom-config-widget/suggestion-dropdown.js
@@ -40,7 +40,20 @@ export function suggestionDropdownDirective($rootScope) {
function link(scope) {
scope.$parent.copyScopeForCustomConfigWidget(scope);
- console.log("params for widget for "+scope.item.name, scope.params);
+
+ scope.getSuggestions = () => {
+ var result = [];
+ if (scope.params['suggestion-values']) {
+ scope.params['suggestion-values'].forEach( (v) => {
+ if (v["value"]) {
+ result.push(v);
+ } else {
+ result.push({value: v});
+ }
+ });
+ return result;
+ }
+ };
}
}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/ee98bd40/ui-modules/blueprint-composer/app/components/custom-config-widget/suggestion-dropdown.less
----------------------------------------------------------------------
diff --git a/ui-modules/blueprint-composer/app/components/custom-config-widget/suggestion-dropdown.less b/ui-modules/blueprint-composer/app/components/custom-config-widget/suggestion-dropdown.less
index c080a1b..91762e7 100644
--- a/ui-modules/blueprint-composer/app/components/custom-config-widget/suggestion-dropdown.less
+++ b/ui-modules/blueprint-composer/app/components/custom-config-widget/suggestion-dropdown.less
@@ -24,7 +24,41 @@ suggestion-dropdown {
.control-value {
// for widgets that are text, this aligns it with the label when collapsed and gives nice spacing when expanded.
// (for widgets that are dropdowns etc this should be omitted)
- padding-top: 2px;
+// padding-top: 2px;
+ }
+ .extra-label {
+ // this seems to work best here (instead of padding above) when combining a label with a textarea control
+ padding-top: 4px;
+ }
+ .inline-label {
+ margin-right: 5px;
+ white-space: nowrap;
+ }
+ spec-editor .spec-configuration .form-group & .control-value .config-flex-row {
+ flex-flow: nowrap;
+ }
+ .form-group:not(:focus-within):not(:focus) & .control-value .dropdown-menu {
+ // hide the dropdown menu when collapsed
+ display: none;
+ }
+ .dropdown-menu li a {
+ // quite a lot of padding in normal dropdown, in the ul and in the a
+ padding: 0;
+ }
+
+ .dropdown-item {
+ display: flex;
+ flex-flow: row wrap;
+ }
+ .dropdown-item-value {
+ }
+ .dropdown-item-description {
+ flex: 1 1 auto;
+ text-align: right;
+ font-style: italic;
+ font-size: 80%;
+ flex: 1 1 auto;
+ margin-bottom: 0;
+ margin-left: 6px;
}
-
}
http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/ee98bd40/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.directive.js
----------------------------------------------------------------------
diff --git a/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.directive.js b/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.directive.js
index 17ab03a..b48366a 100644
--- a/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.directive.js
+++ b/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.directive.js
@@ -106,10 +106,7 @@ export function specEditorDirective($rootScope, $templateCache, $injector, $sani
codeModeActive: {},
codeModeForced: {},
codeModeError: {},
- customConfigWidgetMetadata: {
- "defaultDisplayName": { enabled: true, widget: "known-widget-missing" },
- "download.url": { enabled: true, widget: "suggestion-dropdown" },
- },
+ customConfigWidgetMetadata: {},
},
location: {
open: false
@@ -612,18 +609,13 @@ export function specEditorDirective($rootScope, $templateCache, $injector, $sani
}
function loadCustomConfigWidgetMetadata(model) {
- console.log("misc data", model.miscData, scope.model.miscData.get('ui-composer-hints'));
var customConfigWidgets = (scope.model.miscData.get('ui-composer-hints') || {})['config-widgets'] || [];
- console.log("customs", customConfigWidgets);
customConfigWidgets.forEach( (wd) => {
- console.log("looking at", wd);
var keys = wd.keys || [ wd.key ];
keys.forEach( (k) => {
- console.log("setting key", k);
scope.state.config.customConfigWidgetMetadata[k] = angular.extend({ enabled: true }, scope.state.config.customConfigWidgetMetadata[k], wd);
});
});
- console.log("custom config", scope.state.config.customConfigWidgetMetadata);
}
/* config state for each item is stored in multiple places: