Mathijs den Burger pushed to branch master at cms-community /
hippo-addon-channel-manager
Commits:
646b714b by Mathijs den Burger at 2018-02-23T14:37:01+01:00
CHANNELMGR-1738 Center manage content button icons
Use flexbox to center icons exactly. Tweak the padding of the containing
button to center icons "visually" since not all icons have their
visual center-of-mass in the center of the canvas.
- - - - -
5 changed files:
- frontend-ng/src/app/channel/hippoIframe/overlay/overlay.service.js
- frontend-ng/src/app/channel/hippoIframe/overlay/overlay.service.spec.js
- frontend-ng/src/images/html/plus-white.svg
- frontend-ng/src/images/html/search-white.svg
- frontend-ng/src/styles/string/hippo-iframe.scss
Changes:
=====================================
frontend-ng/src/app/channel/hippoIframe/overlay/overlay.service.js
=====================================
--- a/frontend-ng/src/app/channel/hippoIframe/overlay/overlay.service.js
+++ b/frontend-ng/src/app/channel/hippoIframe/overlay/overlay.service.js
@@ -420,6 +420,7 @@ class OverlayService {
if (config.documentUuid) {
const editContentButton = {
+ id: 'edit-content',
mainIcon: contentLinkSvg,
optionIcon: '', // edit button should never be a option button
callback: () => this._editContent(config.documentUuid),
@@ -430,6 +431,7 @@ class OverlayService {
if (config.parameterName) {
const selectDocumentButton = {
+ id: 'select-document',
mainIcon: searchWhiteSvg,
optionIcon: searchSvg,
callback: () => this._pickPath(config),
@@ -441,6 +443,7 @@ class OverlayService {
if (config.templateQuery) {
const createContentButton = {
+ id: 'create-content',
mainIcon: plusWhiteSvg,
optionIcon: plusSvg,
callback: () => this._createContent(config),
@@ -456,7 +459,7 @@ class OverlayService {
_createMainButton(button, manageContentConfig) {
const mainButton = $(`<button
title="${button.tooltip}">${button.mainIcon}</button>`);
- mainButton.addClass('hippo-fab-main qa-manage-content-link');
+ mainButton.addClass(`hippo-fab-main hippo-fab-main-${button.id}
qa-manage-content-link`);
if (button.isDisabled) {
mainButton.addClass('hippo-fab-main-disabled');
@@ -484,7 +487,7 @@ class OverlayService {
_createOptionButton(button, index) {
const optionButton = $(`<button
title="${button.tooltip}">${button.optionIcon}</button>`);
- optionButton.addClass(`hippo-fab-option hippo-fab-option-${index}`);
+ optionButton.addClass(`hippo-fab-option hippo-fab-option-${button.id}
hippo-fab-option-${index}`);
if (button.isDisabled) {
optionButton.addClass('hippo-fab-option-disabled');
=====================================
frontend-ng/src/app/channel/hippoIframe/overlay/overlay.service.spec.js
=====================================
--- a/frontend-ng/src/app/channel/hippoIframe/overlay/overlay.service.spec.js
+++ b/frontend-ng/src/app/channel/hippoIframe/overlay/overlay.service.spec.js
@@ -705,7 +705,7 @@ describe('OverlayService', () => {
const buttons = OverlayService._getButtons(config);
expect(buttons.length).toEqual(3);
- expect(Object.keys(buttons[0])).toEqual(['mainIcon', 'optionIcon',
'callback', 'tooltip']);
+ expect(Object.keys(buttons[0])).toEqual(['id', 'mainIcon', 'optionIcon',
'callback', 'tooltip']);
});
describe('_initManageContentConfig', () => {
=====================================
frontend-ng/src/images/html/plus-white.svg
=====================================
--- a/frontend-ng/src/images/html/plus-white.svg
+++ b/frontend-ng/src/images/html/plus-white.svg
@@ -13,6 +13,6 @@
See the License for the specific language governing permissions and
limitations under the License.
-->
-<svg height="24" viewBox="3 2 24 24" width="24"
xmlns="http://www.w3.org/2000/svg";>
+<svg height="24" viewBox="0 0 24 24" width="24"
xmlns="http://www.w3.org/2000/svg";>
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</svg>
=====================================
frontend-ng/src/images/html/search-white.svg
=====================================
--- a/frontend-ng/src/images/html/search-white.svg
+++ b/frontend-ng/src/images/html/search-white.svg
@@ -13,7 +13,7 @@
See the License for the specific language governing permissions and
limitations under the License.
-->
-<svg height="24" viewBox="2 1 24 24" width="24" x="0px" y="0px"
xmlns="http://www.w3.org/2000/svg";
+<svg height="24" viewBox="0 0 24 24" width="24" x="0px" y="0px"
xmlns="http://www.w3.org/2000/svg";
enable-background="new 0 0 24 24" xml:space="preserve">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09
3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5
4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5
11.99 14 9.5 14z"/>
</svg>
\ No newline at end of file
=====================================
frontend-ng/src/styles/string/hippo-iframe.scss
=====================================
--- a/frontend-ng/src/styles/string/hippo-iframe.scss
+++ b/frontend-ng/src/styles/string/hippo-iframe.scss
@@ -276,8 +276,9 @@
@extend %hippo-material-btn;
border: 0;
+ display: flex;
height: 100%;
- padding: 8px 0 0 5px;
+ padding: 0; // reset user-agent specific padding around buttons
width: 100%;
&:hover:not(.hippo-fab-main-disabled) {
@@ -290,6 +291,18 @@
box-shadow: $overlay-link-shadow-active !important;
}
+ &-edit-content {
+ // center icon visually
+ padding-left: 6px;
+ padding-top: 2px;
+ }
+
+ &-select-document {
+ // center icon visually
+ padding-left: 3px;
+ padding-top: 3px;
+ }
+
&-open svg {
fill: $white;
}
@@ -328,7 +341,7 @@
animation-name: enter;
background-color: $white;
border: 0;
- display: block;
+ display: flex;
fill: $overlay-link-shadow-color;
height: 32px;
margin-top: 4px;
@@ -351,8 +364,13 @@
@include disabled-fab;
}
+ &-select-document {
+ // center icon visually
+ padding-left: 3px;
+ padding-top: 3px;
+ }
+
svg {
- margin-top: 5px;
transform: scale(.8);
}
}
View it on GitLab:
https://code.onehippo.org/cms-community/hippo-addon-channel-manager/commit/646b714b2d489eade8226485261e29447ff1c412
---
View it on GitLab:
https://code.onehippo.org/cms-community/hippo-addon-channel-manager/commit/646b714b2d489eade8226485261e29447ff1c412
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
