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
