Bert Leunis pushed to branch feature/CHANNELMGR-1388 at cms-community / hippo-addon-channel-manager
Commits: 9004fea5 by Bert Leunis at 2018-03-01T15:20:59+01:00 CHANNELMGR-1388 show boolean field in the content editor Element md-checkbox is used from material design. Using the ng-switch on this element directly gives an error, so it is wrapped in a span. To make setting (checking) the checkbox work for a "true" value the ng-*-value directives are used. - - - - - 768edcae by Bert Leunis at 2018-03-01T16:48:42+01:00 CHANNELMGR-1388 use grey color for selected checkbox. Add hint after checkbox label. Also fixed the showing of the field label! - - - - - 3 changed files: - frontend-ng/src/app/channel/sidePanels/rightSidePanel/contentEditor/fields/primitiveField/primitiveField.html - frontend-ng/src/app/channel/sidePanels/rightSidePanel/rightSidePanel.scss - frontend-ng/src/styles/_variables.scss Changes: ===================================== frontend-ng/src/app/channel/sidePanels/rightSidePanel/contentEditor/fields/primitiveField/primitiveField.html ===================================== --- a/frontend-ng/src/app/channel/sidePanels/rightSidePanel/contentEditor/fields/primitiveField/primitiveField.html +++ b/frontend-ng/src/app/channel/sidePanels/rightSidePanel/contentEditor/fields/primitiveField/primitiveField.html @@ -1,5 +1,5 @@ <!-- - Copyright 2016-2017 Hippo B.V. (http://www.onehippo.com) + Copyright 2016-2018 Hippo B.V. (http://www.onehippo.com) Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -22,7 +22,7 @@ ng-switch="::$ctrl.fieldType.type" ng-class="{ 'has-focused-field': $ctrl.hasFocus }" > - <label ng-if="::$first" + <label ng-if="::$first && $ctrl.fieldType.type !== 'BOOLEAN'" layout layout-align="start center" class="field-title"> @@ -72,6 +72,25 @@ ng-required="::$ctrl.fieldType.required" ng-pattern="/^[+-]?((\d+((\.)\d*)?)|((\.)\d+))$/"> + <span ng-switch-when="BOOLEAN"> + <md-checkbox ng-model="fieldValue.value" + ng-true-value="'true'" + ng-false-value="'false'" + ng-change="$ctrl.valueChanged()" + name="{{::$ctrl.getFieldName($index)}}" + ng-focus="$ctrl.focusPrimitive($event)" + ng-blur="$ctrl.blurPrimitive($event)"> + {{::$ctrl.fieldType.displayName}} + <md-icon ng-if="::$ctrl.fieldType.hint"> + info_outline + + <md-tooltip> + {{ ::$ctrl.fieldType.hint }} + </md-tooltip> + </md-icon> + </md-checkbox> + </span> + <textarea ng-switch-when="MULTILINE_STRING" ng-model="fieldValue.value" ng-change="$ctrl.valueChanged()" ===================================== frontend-ng/src/app/channel/sidePanels/rightSidePanel/rightSidePanel.scss ===================================== --- a/frontend-ng/src/app/channel/sidePanels/rightSidePanel/rightSidePanel.scss +++ b/frontend-ng/src/app/channel/sidePanels/rightSidePanel/rightSidePanel.scss @@ -33,6 +33,20 @@ right-side-panel { } } + md-input-container > span > md-checkbox { + &.md-default-theme.md-checked .md-ink-ripple, md-checkbox.md-checked .md-ink-ripple { + color: $grey-550; + } + + &.md-checked > div.md-container.md-ink-ripple > div.md-icon { + background-color: $grey-550; + } + + > div.md-label > md-icon { + font-size: 16px; + } + } + .btn-fullwidth, .btn-normalwidth { margin: 0 !important; ===================================== frontend-ng/src/styles/_variables.scss ===================================== --- a/frontend-ng/src/styles/_variables.scss +++ b/frontend-ng/src/styles/_variables.scss @@ -68,6 +68,7 @@ $grey-200: #e8e8ea; $grey-300: #d9d9dd; $grey-400: #b8bcbf; $grey-500: #92a0a5; +$grey-550: #778188; $grey-600: #697279; $grey-700: #39434c; $grey-800: #22272f; View it on GitLab: https://code.onehippo.org/cms-community/hippo-addon-channel-manager/compare/65b38f042d6ab25652cd1e716e4946840f8c7874...768edcaebd72cfe3bdfdcaa686dd7dfcdb9ac6be --- View it on GitLab: https://code.onehippo.org/cms-community/hippo-addon-channel-manager/compare/65b38f042d6ab25652cd1e716e4946840f8c7874...768edcaebd72cfe3bdfdcaa686dd7dfcdb9ac6be You're receiving this email because of your account on code.onehippo.org.
_______________________________________________ Hippocms-svn mailing list Hippocms-svn@lists.onehippo.org https://lists.onehippo.org/mailman/listinfo/hippocms-svn
