From d9e195f19bd6093471a95a1a73b986589287546a Mon Sep 17 00:00:00 2001 From: picasso Date: Wed, 9 Feb 2022 10:34:54 +0100 Subject: [PATCH] fixed bug when selector is disabled --- admin/css/zutranslate-blocks.css | 2 +- admin/js/zutranslate-blocks.min.js | 4 +--- sass/zutranslate-blocks.scss | 6 +++++- scripts/admin/components/copy-control.js | 6 +----- 4 files changed, 8 insertions(+), 10 deletions(-) diff --git a/admin/css/zutranslate-blocks.css b/admin/css/zutranslate-blocks.css index ea51a3b..ffddb00 100644 --- a/admin/css/zutranslate-blocks.css +++ b/admin/css/zutranslate-blocks.css @@ -1 +1 @@ -@-webkit-keyframes flashing-shake{0%,10%{-webkit-transform:skewX(-15deg);transform:skewX(-15deg)}15%,5%{-webkit-transform:skewX(15deg);transform:skewX(15deg)}20%,to{-webkit-transform:skewX(0deg);transform:skewX(0deg)}30%{background-color:#ff3358}}@keyframes flashing-shake{0%,10%{-webkit-transform:skewX(-15deg);transform:skewX(-15deg)}15%,5%{-webkit-transform:skewX(15deg);transform:skewX(15deg)}20%,to{-webkit-transform:skewX(0deg);transform:skewX(0deg)}30%{background-color:#ff3358}}.components-zu-lang-control{margin-top:12px;margin-bottom:8px!important}.components-zu-lang-control .zukit-select-item__button-wrapper{margin-top:6px}.components-zu-lang-control .zukit-select-item__button-wrapper.is-selected{box-shadow:none}.components-zu-lang-control .zukit-select-item__button-wrapper.is-selected .components-button{background-color:rgba(188,42,141,.3);color:#bc2a8d;position:relative;opacity:.6}.components-zu-lang-control .zukit-select-item__button-wrapper.is-selected .components-button svg{position:absolute;top:-13px;left:5px;background-color:#bc2a8d;border-radius:50%;padding:4px;fill:#fff}.components-zu-lang-control .zukit-select-item__button-wrapper.is-selected .components-button span{font-weight:300}.components-zu-lang-control .zukit-select-item__button-wrapper.is-selected .components-button:focus:not(:disabled){box-shadow:0 0 0 1px #bc2a8d!important}.components-zu-lang-control .components-button.components-button{height:50px;background-color:rgba(0,124,186,.05);border-color:rgba(0,124,186,.3);transition-property:background-color,color;transition-duration:.3s;transition-timing-function:ease-out}.components-zu-lang-control .components-button.components-button:hover{background-color:rgba(0,124,186,.7)!important;color:#fff!important}.components-zu-lang-control .components-button.components-button .__lang{text-overflow:ellipsis;overflow:hidden;padding:0 5px;width:100%;letter-spacing:1px;font-weight:400;font-family:Ubuntu,Roboto,"Open Sans","Helvetica Neue",sans-serif}.components-zu-lang-control .components-button.components-button .__lang.__with-flags{font-size:15px;margin-top:3px}.components-zu-lang-control .components-button.components-button .__lang .__flag{margin-right:6px;border:1px solid #a0a5aa}.components-zu-copy-control{display:flex;justify-content:space-between;align-items:center}.components-zu-copy-control .components-button.components-button{border-radius:4px;box-shadow:none;height:40px;transition-property:background-color,color,box-shadow;transition-duration:.3s;transition-timing-function:ease-out}.components-zu-copy-control__action{margin-left:3px;width:calc(50% - 12px);justify-content:center;border:1px solid rgba(101,42,174,.3);background-color:rgba(180,141,228,.3);color:#652aae}.components-zu-copy-control__action:active:not([aria-disabled=true]),.components-zu-copy-control__action:hover{background-color:#b48de4;color:#fff}.components-zu-copy-control__action:focus:not(:disabled):not(.is-flashing){box-shadow:0 0 0 1px #652aae!important}.components-zu-copy-control__action.is-flashing{-webkit-animation:flashing-shake 1000ms ease-out infinite;animation:flashing-shake 1000ms ease-out infinite;box-shadow:0 0 0 1px #ff3358;color:#fff}.components-zu-copy-control__lang{color:#652aae}.components-zu-copy-control__lang:hover{background-color:rgba(101,42,174,.05);color:#652aae}.components-zu-copy-control__lang:focus:not(:disabled){box-shadow:0 0 0 1px rgba(101,42,174,.3)!important}.components-zu-copy-control .components-button[aria-expanded=true]{color:#652aae}.components-zu-copy-control__arrow{display:flex;align-items:center}.components-zu-copy-control>span{display:none}.components-zu-copy-control__toggle{margin-top:12px}.components-zu-copy-control__toggle .components-form-toggle .components-form-toggle__track{border-color:#b48de4}.components-zu-copy-control__toggle .components-form-toggle .components-form-toggle__thumb{background-color:#6128a6;border-color:#6128a6}.components-zu-copy-control__toggle .components-form-toggle.is-checked .components-form-toggle__track{background-color:#652aae}.components-zu-copy-control__toggle .components-form-toggle.is-checked .components-form-toggle__thumb{background-color:#fff}.components-zu-copy-control__toggle .components-form-toggle .components-form-toggle__input:focus+.components-form-toggle__track{box-shadow:0 0 0 2px #fff,0 0 0 4px #b48de4}.components-zu-copy-control__popup{margin-top:2px!important}.components-zu-copy-control__popup .components-popover__content{margin-right:-48px!important}.components-zu-copy-control__popup .components-button{outline:1px solid rgba(101,42,174,.1)!important;border-left:4px solid transparent;padding-left:8px;box-shadow:none!important}.components-zu-copy-control__popup .components-button .components-menu-items__item-icon.has-icon-right{margin:0 10px 0 0;border:1px solid #a0a5aa;min-width:10px}.components-zu-copy-control__popup .components-button:focus:not(:disabled){border-left-color:#652aae} \ No newline at end of file +@-webkit-keyframes flashing-shake{0%,10%{-webkit-transform:skewX(-15deg);transform:skewX(-15deg)}15%,5%{-webkit-transform:skewX(15deg);transform:skewX(15deg)}20%,to{-webkit-transform:skewX(0deg);transform:skewX(0deg)}30%{background-color:#ff3358}}@keyframes flashing-shake{0%,10%{-webkit-transform:skewX(-15deg);transform:skewX(-15deg)}15%,5%{-webkit-transform:skewX(15deg);transform:skewX(15deg)}20%,to{-webkit-transform:skewX(0deg);transform:skewX(0deg)}30%{background-color:#ff3358}}.components-zu-lang-control{margin-top:12px;margin-bottom:8px!important}.components-zu-lang-control .zukit-select-item__button-wrapper{margin-top:6px}.components-zu-lang-control .zukit-select-item__button-wrapper.is-selected{box-shadow:none}.components-zu-lang-control .zukit-select-item__button-wrapper.is-selected .components-button{background-color:rgba(188,42,141,.3);color:#bc2a8d;position:relative;opacity:.6}.components-zu-lang-control .zukit-select-item__button-wrapper.is-selected .components-button svg{position:absolute;top:-13px;left:5px;background-color:#bc2a8d;border-radius:50%;padding:4px;fill:#fff}.components-zu-lang-control .zukit-select-item__button-wrapper.is-selected .components-button span{font-weight:300}.components-zu-lang-control .zukit-select-item__button-wrapper.is-selected .components-button:focus:not(:disabled){box-shadow:0 0 0 1px #bc2a8d!important}.components-zu-lang-control .components-button.components-button{height:50px;background-color:rgba(0,124,186,.05);border-color:rgba(0,124,186,.3);transition-property:background-color,color;transition-duration:.3s;transition-timing-function:ease-out}.components-zu-lang-control .components-button.components-button:hover{background-color:rgba(0,124,186,.7)!important;color:#fff!important}.components-zu-lang-control .components-button.components-button .__lang{text-overflow:ellipsis;overflow:hidden;padding:0 5px;width:100%;letter-spacing:1px;font-weight:400;font-family:Ubuntu,Roboto,"Open Sans","Helvetica Neue",sans-serif}.components-zu-lang-control .components-button.components-button .__lang.__with-flags{font-size:15px;margin-top:3px}.components-zu-lang-control .components-button.components-button .__lang .__flag{margin-right:6px;border:1px solid #a0a5aa}.components-zu-copy-control{display:flex;justify-content:space-between;align-items:center}.components-zu-copy-control .components-button.components-button{border-radius:4px;box-shadow:none;height:40px;transition-property:background-color,color,box-shadow;transition-duration:.3s;transition-timing-function:ease-out}.components-zu-copy-control__action{margin-left:3px;width:calc(50% - 12px);justify-content:center;border:1px solid rgba(101,42,174,.3);background-color:rgba(180,141,228,.3);color:#652aae}.components-zu-copy-control__action:active:not([aria-disabled=true]),.components-zu-copy-control__action:hover{background-color:#b48de4;color:#fff}.components-zu-copy-control__action:focus:not(:disabled):not(.is-flashing){box-shadow:0 0 0 1px #652aae!important}.components-zu-copy-control__action.is-flashing{-webkit-animation:flashing-shake 1000ms ease-out infinite;animation:flashing-shake 1000ms ease-out infinite;box-shadow:0 0 0 1px #ff3358;color:#fff}.components-zu-copy-control__lang{color:#652aae}.components-zu-copy-control__lang:hover:not(:disabled){background-color:rgba(101,42,174,.05);color:#652aae}.components-zu-copy-control__lang:focus:not(:disabled){box-shadow:0 0 0 1px rgba(101,42,174,.3)!important}.components-zu-copy-control__lang:disabled,.components-zu-copy-control__lang[aria-disabled=true]{color:#652aae;opacity:.5}.components-zu-copy-control .components-button[aria-expanded=true]{color:#652aae}.components-zu-copy-control__arrow{display:flex;align-items:center}.components-zu-copy-control>span{display:none}.components-zu-copy-control__toggle{margin-top:12px}.components-zu-copy-control__toggle .components-form-toggle .components-form-toggle__track{border-color:#b48de4}.components-zu-copy-control__toggle .components-form-toggle .components-form-toggle__thumb{background-color:#6128a6;border-color:#6128a6}.components-zu-copy-control__toggle .components-form-toggle.is-checked .components-form-toggle__track{background-color:#652aae}.components-zu-copy-control__toggle .components-form-toggle.is-checked .components-form-toggle__thumb{background-color:#fff}.components-zu-copy-control__toggle .components-form-toggle .components-form-toggle__input:focus+.components-form-toggle__track{box-shadow:0 0 0 2px #fff,0 0 0 4px #b48de4}.components-zu-copy-control__popup{margin-top:2px!important}.components-zu-copy-control__popup .components-popover__content{margin-right:-48px!important}.components-zu-copy-control__popup .components-button{outline:1px solid rgba(101,42,174,.1)!important;border-left:4px solid transparent;padding-left:8px;box-shadow:none!important}.components-zu-copy-control__popup .components-button .components-menu-items__item-icon.has-icon-right{margin:0 10px 0 0;border:1px solid #a0a5aa;min-width:10px}.components-zu-copy-control__popup .components-button:focus:not(:disabled){border-left-color:#652aae} \ No newline at end of file diff --git a/admin/js/zutranslate-blocks.min.js b/admin/js/zutranslate-blocks.min.js index 864ed80..ebcd3dc 100644 --- a/admin/js/zutranslate-blocks.min.js +++ b/admin/js/zutranslate-blocks.min.js @@ -1609,7 +1609,6 @@ var zutranslate_blocks = (function (exports) { return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", { className: copyPrefix }, /*#__PURE__*/React.createElement(Button, { - disabled: isDisabled, className: mergeClasses("".concat(copyPrefix, "__action"), { 'is-flashing': isFlashing }), @@ -1631,8 +1630,7 @@ var zutranslate_blocks = (function (exports) { className: "".concat(copyPrefix, "__popup"), position: "bottom right", onFocusOutside: closeOutside - }, /*#__PURE__*/React.createElement(NavigableMenu // ref={ menuContainer } - , { + }, /*#__PURE__*/React.createElement(NavigableMenu, { onKeyDown: onEscape }, menuItems)))), /*#__PURE__*/React.createElement(ToggleControl, { className: "".concat(copyPrefix, "__toggle"), diff --git a/sass/zutranslate-blocks.scss b/sass/zutranslate-blocks.scss index 006d789..b8f362a 100644 --- a/sass/zutranslate-blocks.scss +++ b/sass/zutranslate-blocks.scss @@ -127,13 +127,17 @@ $copy-control-flashing-end-color: $red-color; } &__lang { color: $zutranslate-copy-selected-text-color; - &:hover { + &:hover:not(:disabled) { background-color: rgba($zutranslate-copy-selected-text-color, 0.05); color: $zutranslate-copy-selected-text-color; } &:focus:not(:disabled) { box-shadow: 0 0 0 1px rgba($zutranslate-copy-selected-text-color, 0.3) !important; } + &:disabled, &[aria-disabled="true"] { + color: $zutranslate-copy-selected-text-color; + opacity: 0.5; + } } .components-button[aria-expanded="true"] { color: $zutranslate-copy-selected-text-color; diff --git a/scripts/admin/components/copy-control.js b/scripts/admin/components/copy-control.js index 67c121e..b98aa04 100644 --- a/scripts/admin/components/copy-control.js +++ b/scripts/admin/components/copy-control.js @@ -101,7 +101,6 @@ const CopyControl = ({ <>