Mathijs den Burger pushed to branch feature/cmng-psp1-CHANNELMGR-605 at cms-community / hippo-addon-channel-manager
Commits: 0fa2d077 by Mathijs den Burger at 2016-05-30T09:41:18+02:00 CHANNELMGR-605 change channel settings tooltip direction to 'left' Otherwise long tooltips may fall outside the right border of the page. - - - - - 5fd60263 by Mathijs den Burger at 2016-05-30T11:13:34+02:00 CHANNELMGR-605 limit width of help tooltips and remove transparency The width of the help icon tooltips is now limited to the sub-page width (minus the width of the help icon itself, because the tooltips are shown left of those help icons). Improve readability of the tooltips by making the background color black instead of the semi-transparent default color (which caused the underlying widgets to shine through). - - - - - dc8a199e by Mathijs den Burger at 2016-05-30T11:31:38+02:00 CHANNELMGR-605 make boolean fields full-width - - - - - 7c2de31e by Mathijs den Burger at 2016-05-30T11:32:57+02:00 CHANNELMGR-605 fix multi-line tooltips - - - - - 7 changed files: - frontend-ng/src/angularjs/channel/actions/settings/property/helpIcon/helpIcon.html - frontend-ng/src/angularjs/channel/actions/settings/property/property.html - frontend-ng/src/index.scss - frontend-ng/src/styles/_channel.scss - frontend-ng/src/styles/_subpage.scss - + frontend-ng/src/styles/_tooltips.scss - frontend-ng/src/styles/_variables.scss Changes: ===================================== frontend-ng/src/angularjs/channel/actions/settings/property/helpIcon/helpIcon.html ===================================== --- a/frontend-ng/src/angularjs/channel/actions/settings/property/helpIcon/helpIcon.html +++ b/frontend-ng/src/angularjs/channel/actions/settings/property/helpIcon/helpIcon.html @@ -15,6 +15,6 @@ --> <div ng-if="text" class="help-icon"> - <md-tooltip class="tooltip-multiline">{{ text }}</md-tooltip> + <md-tooltip class="tooltip-help-icon tooltip-multiline" md-direction="left">{{ text }}</md-tooltip> <md-icon class="material-icons">info_outline</md-icon> </div> ===================================== frontend-ng/src/angularjs/channel/actions/settings/property/property.html ===================================== --- a/frontend-ng/src/angularjs/channel/actions/settings/property/property.html +++ b/frontend-ng/src/angularjs/channel/actions/settings/property/property.html @@ -15,8 +15,9 @@ --> <div ng-switch="channelProperty.type"> - <md-input-container ng-switch-when="CheckBox" class="{{channelProperty.qaClass}}"> - <md-checkbox ng-model="channelProperty.value" + <md-input-container ng-switch-when="CheckBox" class="{{channelProperty.qaClass}}" layout="row"> + <md-checkbox flex + ng-model="channelProperty.value" ng-disabled="channelProperty.readOnly" aria-label="channelProperty.label"> {{ channelProperty.label }} ===================================== frontend-ng/src/index.scss ===================================== --- a/frontend-ng/src/index.scss +++ b/frontend-ng/src/index.scss @@ -25,3 +25,4 @@ @import 'styles/channel'; @import 'styles/subpage'; @import 'styles/tree'; +@import 'styles/tooltips'; ===================================== frontend-ng/src/styles/_channel.scss ===================================== --- a/frontend-ng/src/styles/_channel.scss +++ b/frontend-ng/src/styles/_channel.scss @@ -12,6 +12,8 @@ // See the License for the specific language governing permissions and // limitations under the License. +$help-icon-width: 24px; + .mask { height: 100%; left: 0; @@ -50,10 +52,9 @@ md-input-container.input-container-picker { cursor: default; position: absolute; top: 10px; - right: -24px; + right: -$help-icon-width; } -md-tooltip.tooltip-multiline ._md-content { - height: auto; - white-space: pre; +.tooltip-help-icon ._md-content { + max-width: $subpage-max-width - $help-icon-width; // avoid that help icon tooltips get wider than the subpage } ===================================== frontend-ng/src/styles/_subpage.scss ===================================== --- a/frontend-ng/src/styles/_subpage.scss +++ b/frontend-ng/src/styles/_subpage.scss @@ -17,5 +17,5 @@ } .subpage-form { - width: 570px; // avoid that subpage forms get too wide -} \ No newline at end of file + width: $subpage-max-width; // avoid that subpage forms get too wide +} ===================================== frontend-ng/src/styles/_tooltips.scss ===================================== --- /dev/null +++ b/frontend-ng/src/styles/_tooltips.scss @@ -0,0 +1,26 @@ +/* + * Copyright 2016 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. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +md-tooltip { + ._md-content { + background-color: $tooltip-bg !important; + } + + &.tooltip-multiline ._md-content { + height: auto; + white-space: pre; + } +} + ===================================== frontend-ng/src/styles/_variables.scss ===================================== --- a/frontend-ng/src/styles/_variables.scss +++ b/frontend-ng/src/styles/_variables.scss @@ -42,3 +42,9 @@ $tree-active-color: $white; // DragDrop placeholder $tree-dd-bg: $black-shadow; + +// Sub-pages +$subpage-max-width: 570px; + +// Do not use transparent tooltips +$tooltip-bg: $black; View it on GitLab: https://code.onehippo.org/cms-community/hippo-addon-channel-manager/compare/aad93e244d88585696e1fd9ccbbba7caec2dec28...7c2de31eddc919616dd425d3b809fa05474c4372
_______________________________________________ Hippocms-svn mailing list Hippocms-svn@lists.onehippo.org https://lists.onehippo.org/mailman/listinfo/hippocms-svn