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