Repository: brooklyn-ui Updated Branches: refs/heads/master cdec21b6c -> bac67a0ff
tidy config editor styling - dropdown colors, alignment, uses monospace, and monospace refactored - flex display used much more too - lightning bolt / dsl editor correctly styled for height, roundedness - more complex css to solve roundedness - double new lines in config description render as paragraphs with spacing Project: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/repo Commit: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/commit/6c82d076 Tree: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/tree/6c82d076 Diff: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/diff/6c82d076 Branch: refs/heads/master Commit: 6c82d0762e59cfdb107353a91b73bba6d42bccb4 Parents: 6de1f67 Author: Alex Heneveld <[email protected]> Authored: Wed Oct 3 22:53:48 2018 +0100 Committer: Alex Heneveld <[email protected]> Committed: Thu Oct 4 01:23:03 2018 +0100 ---------------------------------------------------------------------- .../app/components/stream/stream.less | 2 +- .../main/inspect/activities/detail/detail.less | 3 - .../suggestion-dropdown.html | 6 +- .../suggestion-dropdown.less | 7 +- .../spec-editor/spec-editor.directive.js | 20 ++++- .../app/components/spec-editor/spec-editor.less | 77 ++++++++++++-------- .../spec-editor/spec-editor.template.html | 43 +++++++---- .../groovy-console/app/views/main/main.less | 2 +- ui-modules/utils/br-core/style/data.less | 7 +- ui-modules/utils/br-core/style/mixins.less | 5 ++ 10 files changed, 112 insertions(+), 60 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/6c82d076/ui-modules/app-inspector/app/components/stream/stream.less ---------------------------------------------------------------------- diff --git a/ui-modules/app-inspector/app/components/stream/stream.less b/ui-modules/app-inspector/app/components/stream/stream.less index 7efd9c9..8f43f73 100644 --- a/ui-modules/app-inspector/app/components/stream/stream.less +++ b/ui-modules/app-inspector/app/components/stream/stream.less @@ -24,7 +24,7 @@ stream { min-height: 4em; background: @gray; color: @gray-lighter; - font-family: monospace; + .monospace(); padding: 0.8em; padding-bottom: 1.2em; } http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/6c82d076/ui-modules/app-inspector/app/views/main/inspect/activities/detail/detail.less ---------------------------------------------------------------------- diff --git a/ui-modules/app-inspector/app/views/main/inspect/activities/detail/detail.less b/ui-modules/app-inspector/app/views/main/inspect/activities/detail/detail.less index 3ba9fbe..0d2e291 100644 --- a/ui-modules/app-inspector/app/views/main/inspect/activities/detail/detail.less +++ b/ui-modules/app-inspector/app/views/main/inspect/activities/detail/detail.less @@ -17,9 +17,6 @@ * under the License. */ -.monospace() { - font-family: Courier, monospace; -} @gray-light-lighter: lighten(@gray-light, 20%); .activity-detail { http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/6c82d076/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 56395a6..ad59161 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 @@ -42,13 +42,15 @@ <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 + <span class="main-control span-for-rounded-edge"> + <textarea ng-model="config[item.name]" class="form-control rounded-edge" name="{{item.name}}" id="{{item.name}}" auto-grow placeholder="{{defined(config[item.name]) ? null : item.defaultValue=='' || item.defaultValue==null ? '(empty)' : item.defaultValue}}" ng-focus="specEditor.recordFocus(item)" on-enter="specEditor.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="specEditor.isDslWizardButtonAllowed(item.name)"> + </span> + <span class="input-group-btn dsl-wizard-button rounded-edge" ng-if="specEditor.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> http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/6c82d076/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 fc2371e..219e64f 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 @@ -17,7 +17,7 @@ * under the License. */ -suggestion-dropdown { +suggestion-dropdown, .suggestion-dropdown { width: 100%; @@ -50,19 +50,20 @@ suggestion-dropdown { display: flex; flex-flow: row wrap; width: 100%; + cursor: pointer; } .dropdown-item-value { flex: 1 0 auto; + .monospace(); } .dropdown-item-description { flex: 10 1 auto; text-align: right; - font-style: italic; font-size: 80%; margin-bottom: 0; margin-left: 12px; - max-width: 70%; margin-top: 2px; line-height: 18px; + color: mix(@gray-light,@gray-lighter,75%); } } http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/6c82d076/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 03adce1..9f3a521 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 @@ -365,6 +365,16 @@ export function specEditorDirective($rootScope, $templateCache, $injector, $sani scope.getBadgeClass = (issues) => { return issues.some(issue => issue.level === ISSUE_LEVEL.ERROR) ? 'badge-danger' : 'badge-warning'; }; + + specEditor.descriptionHtml = (text) => { + let out = []; + for (let item of text.split(/\n\n+/)) { + out.push('<div class="paragraph-spacing"></div>'); + out.push($sanitize(item)); + } + out.splice(0,1); + return $sce.trustAsHtml(out.join("\n")); + }; function getConfigWidgetModeInternal(item, val) { if (angular.element($document[0].activeElement).hasClass("form-control") && item.widgetMode) { @@ -587,9 +597,10 @@ export function specEditorDirective($rootScope, $templateCache, $injector, $sani // don't treat constants as DSL (not helpful, and the DSL editor doesn't support it) return (val instanceof Dsl) && val.kind && val.kind.family != 'constant'; }; - specEditor.isDslWizardButtonAllowed = (key, index) => { + specEditor.isDslWizardButtonAllowed = (key, index, nonModelValue) => { let val = scope.model.config.get(key); if (specEditor.defined(val) && specEditor.defined(index) && index!=null) val = val[index]; + if (!specEditor.defined(val) || val===null || val==='') val = nonModelValue; if (!specEditor.defined(val) || val===null || val==='') return true; if (specEditor.isDslVal(val)) { return true; @@ -815,12 +826,15 @@ export function specEditorDirective($rootScope, $templateCache, $injector, $sani function refreshCustomValidation(model) { model.config.forEach((value, key) => { let config = model.miscData.get('config').find(config => config.name === key); + // Ideally code below would escaped or use template/directive; sanitize just catches attacks. + // (These values are automatically sanitized in any case, so that's redundant.) + // If we need an integer, check if the value is a number if (config.type === 'java.lang.Integer' && !angular.isNumber(value) && !(value instanceof Dsl)) { - model.addIssue(Issue.builder().group('config').ref(key).message($sce.trustAsHtml(`<code>${value}</code> is not a number`)).build()); + model.addIssue(Issue.builder().group('config').ref(key).message('<code>'+$sanitize(value)+'</code> is not a number').build()); } if (scope.state.config.codeModeError[key]) { - model.addIssue(Issue.builder().group('config').ref(key).message($sce.trustAsHtml(`<code>${value}</code> is not valid JSON`)).build()); + model.addIssue(Issue.builder().group('config').ref(key).message('<code>'+$sanitize(value)+'</code> is not valid JSON').build()); } }); } http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/6c82d076/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.less ---------------------------------------------------------------------- diff --git a/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.less b/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.less index 29bb911..b64a3eb 100644 --- a/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.less +++ b/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.less @@ -339,6 +339,7 @@ spec-editor { display: flex; flex-flow: row wrap; width: 100%; + > * { flex: 1 1 auto; } } .control-label { flex: 0 0 auto; @@ -347,6 +348,7 @@ spec-editor { } .label-rhs-buttons { flex: 1 0 auto; + align-items: center; text-align: right; order: 20; display: none; @@ -390,7 +392,7 @@ spec-editor { } &.code-mode-active .input-group textarea { - font-family: courier; + .monospace(); } } .issue { @@ -400,30 +402,38 @@ spec-editor { .control-label .info-spec-configuration when (@hide-info-button-when-not-hovered = true) { visibility: hidden; } - .btn-group, - .input-group { + .btn-group, .input-group { + display: flex; width: 100%; - } - .input-group { - .dsl-wizard-button { - max-width: 0; - width: 0; - overflow: hidden; + .main-control { + flex: 10 1 auto; } - } - .btn-group { .dsl-wizard-button { + flex: 0 0 auto; + display: flex; width: auto; + a { + align-items: center; + display: flex; + } } } + .input-group > span.rounded-edge:first-of-type, + .input-group > span.span-for-rounded-edge:first-of-type .rounded-edge { + border-bottom-left-radius: 4px; + border-top-left-radius: 4px; + // ensure outline on this e.g. for error appears above wizard button + z-index: 10; + } + .input-group span.rounded-edge:last-of-type, + .input-group span.span-for-rounded-edge:last-of-type .rounded-edge { + border-bottom-right-radius: 4px; + border-top-right-radius: 4px; + } &:not(:focus-within):not(:focus) { .hide-when-collapsed { display: none; } - input { - // the RHS is square if DSL button hidden; simplest fix is to make LHS square too - border-radius: 0; - } textarea { max-height: @input-height-base * 2; } @@ -432,6 +442,18 @@ spec-editor { border-radius: 0; cursor: pointer; } + .input-group span.rounded-edge:nth-last-of-type(2), + .input-group span.span-for-rounded-edge:nth-last-of-type(2) .rounded-edge { + border-bottom-right-radius: 4px; + border-top-right-radius: 4px; + } + .btn-group, .input-group { + .dsl-wizard-button { + display: none; + width: 0; + max-width: 0; + } + } } } .form-group:hover, .form-group:focus, .form-group:focus-within { @@ -449,12 +471,6 @@ spec-editor { .label-rhs-buttons { display: flex; } - .input-group { - .dsl-wizard-button { - max-width: none; - width: 1%; - } - } .caret-default:before { content: "\f0d8"; // fa-caret-up } @@ -471,11 +487,8 @@ spec-editor { display: none; } } - input, select { + input, select, textarea { cursor: pointer; - // the RHS for input is square if DSL button hidden; simplest fix is to make LHS square too - // would be nice if applies to select also, but it doesn't - border-radius: 0; } .boolean .btn-group { > .active { @@ -519,7 +532,6 @@ spec-editor { border-left: none; border-image: initial; border-bottom: none; //or for an underline effect, 1px solid @gray-light; - border-radius: 0; padding-bottom: 0px; background: none; height: auto; @@ -651,10 +663,13 @@ spec-editor { flex-grow: 1; span.input-group { display: flex; - input { + .main-control, input { width: 120px; // overridden by flex, but allows it to compress when not focused flex-grow: 1; } + .main-control { + display: flex; + } .dsl-wizard-button { width: auto; } @@ -679,7 +694,7 @@ spec-editor { display: flex; .collection-map-key { - font-family: monospace; + .monospace(); &:after { content: ':'; padding-left: 0.2em; @@ -774,8 +789,7 @@ spec-editor { } .dropdown-item { .config-name { - font-family: courier; - font-size: 95%; + .monospace(); margin-right: 1ex; } } @@ -834,6 +848,9 @@ spec-editor { &:extend(.catalog-selector-popover .palette-item-quick-info all); .config-type { margin-left: 1em; } .config-required { font-style: italic; } + .paragraph-spacing { + margin-bottom: 6px; + } } dsl-viewer { a { http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/6c82d076/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.template.html ---------------------------------------------------------------------- diff --git a/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.template.html b/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.template.html index 713da93..02e6206 100644 --- a/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.template.html +++ b/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.template.html @@ -188,13 +188,15 @@ </div> </div> - <select ng-switch-when="java.lang.Enum" + <span class="main-control span-for-rounded-edge"> + <select ng-switch-when="java.lang.Enum" ng-model="config[item.name]" ng-options="s.value as (s.description + (item.defaultValue === s.value ? ' --- default' : '')) for s in item.possibleValues" ng-focus="specEditor.recordFocus(item)" - class="form-control" + class="form-control rounded-edge" name="{{item.name}}" id="{{item.name}}"></select> + </span> <div ng-switch-when="map" ng-init="expandMode = 'default'" class="collection" @@ -224,19 +226,26 @@ </span> <div class="collection-item-grow"> <span class="input-group"> - <input type="text" ng-model="config[item.name][mapKey]" class="form-control" placeholder="(empty)" + <span class="main-control span-for-rounded-edge"> + <input type="text" ng-model="config[item.name][mapKey]" class="form-control rounded-edge" placeholder="(empty)" ng-focus="specEditor.recordFocus(item)" on-enter="specEditor.advanceControlInFormGroup" /> - <span class="input-group-btn dsl-wizard-button" ng-if="specEditor.isDslWizardButtonAllowed(item.name, mapKey)"> + </span> + <span class="input-group-btn dsl-wizard-button rounded-edge" ng-if="specEditor.isDslWizardButtonAllowed(item.name, mapKey)"> <a ui-sref="main.graphical.edit.dsl({entityId: model._id, for: item.name, index: mapKey})" class="btn btn-default" title="Open in DSL editor"><i class="fa fa-bolt"></i></a> </span> </span> </div> </li> - <li class="collection-item collection-add" ng-class="{'nonempty': nonempty(config[item.name])}"> - <input ng-model="newKey" type="text" placeholder="Add property key" class="form-control" + <li class="collection-item collection-add input-group" ng-class="{'nonempty': nonempty(config[item.name])}"> + <span class="main-control span-for-rounded-edge"> + <input ng-model="newKey" type="text" placeholder="Add property key" class="form-control rounded-edge" ng-focus="specEditor.recordFocus(item)" on-enter="specEditor.advanceOutToFormGroupInPanel" ng-blur="onAddMapProperty(item.name, newKey, $event); newKey = '';" required /> + </span> + <span class="input-group-btn dsl-wizard-button rounded-edge" ng-if="specEditor.isDslWizardButtonAllowed(item.name, null, newKey)"> + <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> </li> </ul> </div> @@ -268,21 +277,25 @@ </span> <div class="collection-item-grow"> <span class="input-group"> - <input type="text" ng-model="config[item.name][$index]" class="form-control" placeholder="(empty)" + <span class="main-control span-for-rounded-edge"> + <input type="text" ng-model="config[item.name][$index]" class="form-control rounded-edge" placeholder="(empty)" ng-focus="specEditor.recordFocus(item)" on-enter="specEditor.advanceControlInFormGroup" /> - <span class="input-group-btn dsl-wizard-button" ng-if="specEditor.isDslWizardButtonAllowed(item.name, $index)" ng-focus="specEditor.recordFocus(item)"> + </span> + <span class="input-group-btn dsl-wizard-button rounded-edge" ng-if="specEditor.isDslWizardButtonAllowed(item.name, $index)" ng-focus="specEditor.recordFocus(item)"> <a ui-sref="main.graphical.edit.dsl({entityId: model._id, for: item.name, index: $index})" class="btn btn-default" title="Open in DSL editor"><i class="fa fa-bolt"></i></a> </span> </span> </div> </li> - <li class="collection-item collection-add" ng-class="{'nonempty': config[item.name].length>0}"> + <li class="collection-item collection-add input-group" ng-class="{'nonempty': config[item.name].length>0}"> <span class="input-group"> - <input ng-model="newItem" type="text" placeholder="Add item" class="form-control" auto-focus="expandMode != 'closed'" + <span class="main-control span-for-rounded-edge"> + <input ng-model="newItem" type="text" placeholder="Add item" class="form-control rounded-edge" auto-focus="expandMode != 'closed'" ng-focus="specEditor.recordFocus(item)" on-enter="specEditor.advanceOutToFormGroupInPanel" ng-blur="onAddListItem(item.name, newItem, $event, $element); newItem = '';" required /> - <span class="input-group-btn dsl-wizard-button" ng-if="specEditor.isDslWizardButtonAllowed(item.name, -1)"> + </span> + <span class="input-group-btn dsl-wizard-button rounded-edge" ng-if="specEditor.isDslWizardButtonAllowed(item.name, -1, newItem)"> <a ui-sref="main.graphical.edit.dsl({entityId: model._id, for: item.name, index: config[item.name].length})" class="btn btn-default" title="Open in DSL editor"><i class="fa fa-bolt"></i></a> </span> </span> @@ -304,10 +317,12 @@ </div> <div class="input-group" ng-switch-default> - <textarea ng-model="config[item.name]" class="form-control" name="{{item.name}}" id="{{item.name}}" auto-grow + <span class="main-control span-for-rounded-edge"> + <textarea ng-model="config[item.name]" class="form-control rounded-edge" name="{{item.name}}" id="{{item.name}}" auto-grow placeholder="{{defined(config[item.name]) ? null : item.defaultValue=='' || item.defaultValue==null ? '(empty)' : item.defaultValue}}" ng-focus="specEditor.recordFocus(item)" on-enter="specEditor.advanceOutToFormGroupInPanel"></textarea> - <span class="input-group-btn dsl-wizard-button" ng-if="specEditor.isDslWizardButtonAllowed(item.name)"> + </span> + <span class="input-group-btn dsl-wizard-button rounded-edge" ng-if="specEditor.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> @@ -425,7 +440,7 @@ <p><i class="mini-icon fa fa-fw fa-cog"></i> <samp class="type-symbolic-name">{{item.name}}</samp> <span class="config-type label-color column-for-type oneline label label-success">{{item.type}}</span></p> </div> - <p class="quick-info-description" ng-if="item.description">{{item.description}}</p> + <p class="quick-info-description" ng-if="item.description" ng-bind-html="specEditor.descriptionHtml(item.description)"></p> <div class="quick-info-metadata config-default" ng-if="item.defaultValue"></i>Default value: <samp>{{item.defaultValue}}</samp></div> <div class="quick-info-metadata config-required" ng-if="item.constraints.required"><i>This field is required.</div> </div> http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/6c82d076/ui-modules/groovy-console/app/views/main/main.less ---------------------------------------------------------------------- diff --git a/ui-modules/groovy-console/app/views/main/main.less b/ui-modules/groovy-console/app/views/main/main.less index 831d55c..c6a89c2 100644 --- a/ui-modules/groovy-console/app/views/main/main.less +++ b/ui-modules/groovy-console/app/views/main/main.less @@ -43,7 +43,7 @@ padding: 10px; min-width: 80%; min-height: 100px; - font-family: 'DejaVu Sans Mono', monospace; + .monospace(); } .groovy-button { http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/6c82d076/ui-modules/utils/br-core/style/data.less ---------------------------------------------------------------------- diff --git a/ui-modules/utils/br-core/style/data.less b/ui-modules/utils/br-core/style/data.less index 02fbae0..5905d9c 100644 --- a/ui-modules/utils/br-core/style/data.less +++ b/ui-modules/utils/br-core/style/data.less @@ -16,7 +16,8 @@ * specific language governing permissions and limitations * under the License. */ -.data-card { +.data-card { // don't think this is used? + padding-bottom: 20px; dl, h3, h4 { padding-left: 40px; @@ -65,6 +66,6 @@ } .value-type { - font-family: monospace; + .monospace(); } -} \ No newline at end of file +} http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/6c82d076/ui-modules/utils/br-core/style/mixins.less ---------------------------------------------------------------------- diff --git a/ui-modules/utils/br-core/style/mixins.less b/ui-modules/utils/br-core/style/mixins.less index ece8bda..b4c8432 100644 --- a/ui-modules/utils/br-core/style/mixins.less +++ b/ui-modules/utils/br-core/style/mixins.less @@ -50,3 +50,8 @@ @accent-900: mix(black, @accent, 40%); } +.monospace() { + font-family: Courier, monospace; + font-size: 95%; +} +
