diff --git a/pages/options/options.css b/pages/options/options.css index 5498098c2f626d2151c2e56c45eece362a57d4b0..ba2532a48483183b1e1655deef4d0a8f7c61f18e 100644 --- a/pages/options/options.css +++ b/pages/options/options.css @@ -7,15 +7,29 @@ body { cursor: default; font-family: 'Noto Sans', Arial, sans-serif !important; font-size: 12px; + margin-top: -15px; padding: 10px !important; } .option { - margin-bottom: 22px; + margin-top: 25px; } .notice { - margin-top: 12px; + border-radius: 3px; + box-sizing: border-box; + margin-top: 25px; + max-width: 470px; + padding: 14px 16px; +} + +.notice-default { + background-color: #f1f1f1; +} + +.notice-warning { + background-color: #ffa500; + color: #fff; } /** @@ -74,10 +88,58 @@ body { */ .icon { - color: #777; margin-right: 3px; } +/** + * Buttons + */ + +.button { + -moz-user-select: none; + background-color: #f5f5f5; + border-radius: 2px; + border: 1px solid #cfcfcf; + color: #5f5f5f; + cursor: pointer; + float: right; + font-size: 12px; + outline: 0; + padding: 5px 22px; + text-decoration: none; + user-select: none; + white-space: nowrap; +} + +.button:hover { + background-color: #fff; +} + +.button:active { + background-color: #dedede; +} + +.button-warning { + background-color: #ea9700; + border: 1px solid #d88c00; + color: #fff; +} + +.button-warning:hover { + background-color: #d88c00; + border-color: #c98200; +} + +.button-warning:active { + background-color: #c07c00; + border-color: #b47400; +} + +.button-notice { + margin-left: auto; + padding: 5px 9px; +} + /** * Links */ @@ -118,14 +180,19 @@ body { display: flex; } +.notice-head { + font-weight: 600; + margin-bottom: 6px; +} + .notice-body { - background-color: #fbfbfb; - border-radius: 3px; - border: 1px solid #e7e7e7; - color: #595959; - display: inline-block; - font-size: 11px; - padding: 8px 10px; + align-items: center; + display: flex; +} + +.notice-message { + line-height: 1.3; + margin-right: 14px; } /** diff --git a/pages/options/options.html b/pages/options/options.html index 4639cdc7632b3a57672de1afde0ba7af756707a9..fafe71faf0e39735912953f52e7c50d9bf0eb8cd 100644 --- a/pages/options/options.html +++ b/pages/options/options.html @@ -23,6 +23,29 @@ <script src="options.js"></script> + <section class="notice notice-warning hidden" id="notice-block-missing"> + + <div class="notice-head"> + + <i class="fai fa-exclamation-triangle icon"></i> + <span data-i18n-content="blockMissingTitle"></span> + + </div> + + <div class="notice-body" dir="ltr"> + + <div class="notice-message"> + This feature breaks websites. Do not leave it enabled, unless you are prepared to manually whitelist any affected domains. + </div> + + <div class="button button-notice button-warning" id="button-block-missing"> + Disable + </div> + + </div> + + </section> + <section class="option"> <div class="title-option"> @@ -105,13 +128,18 @@ </section> - <section class="notice hidden" id="notice-locale"> + <section class="notice notice-default hidden" id="notice-locale"> <div class="notice-body" dir="ltr"> - <i class="fai fa-exclamation-triangle icon"></i> - Your preferred language is not yet fully supported. - <a class="link-text" href="https://crowdin.com/project/decentraleyes" target="_blank"> + <div class="notice-message"> + + <i class="fai fa-exclamation-triangle icon"></i> + Your preferred language is not yet fully supported. + + </div> + + <a class="button button-notice" href="https://crowdin.com/project/decentraleyes" target="_blank"> Help Translate </a> diff --git a/pages/options/options.js b/pages/options/options.js index 17c403ed238073e9a56a75d9eefdc67628ce4589..cc7ce9ad9366519ea60b13bd0d98589c4895d689 100644 --- a/pages/options/options.js +++ b/pages/options/options.js @@ -48,16 +48,33 @@ options._renderOptionsPanel = function () { elements.whitelistedDomains.value = domainWhitelist; options._registerOptionChangedEventListeners(elements); + options._registerMiscellaneousEventListeners(); + + if (options._optionValues.blockMissing === true) { + options._renderBlockMissingNotice(); + } if (options._languageSupported === false) { options._renderLocaleNotice(); } }; +options._renderBlockMissingNotice = function () { + + let blockMissingNoticeElement = document.getElementById('notice-block-missing'); + blockMissingNoticeElement.setAttribute('class', 'notice notice-warning'); +}; + +options._hideBlockMissingNotice = function () { + + let blockMissingNoticeElement = document.getElementById('notice-block-missing'); + blockMissingNoticeElement.setAttribute('class', 'notice notice-warning hidden'); +}; + options._renderLocaleNotice = function () { let localeNoticeElement = document.getElementById('notice-locale'); - localeNoticeElement.setAttribute('class', 'notice'); + localeNoticeElement.setAttribute('class', 'notice notice-default'); }; options._registerOptionChangedEventListeners = function (elements) { @@ -69,6 +86,19 @@ options._registerOptionChangedEventListeners = function (elements) { elements.whitelistedDomains.addEventListener('keyup', options._onOptionChanged); }; +options._registerMiscellaneousEventListeners = function () { + + let blockMissingButtonElement = document.getElementById('button-block-missing'); + + blockMissingButtonElement.addEventListener('click', function () { + + let changeEvent = new Event('change'); + + options._optionElements.blockMissing.checked = false; + options._optionElements.blockMissing.dispatchEvent(changeEvent); + }); +}; + options._determineOptionValues = function () { return new Promise((resolve) => { @@ -173,6 +203,15 @@ options._onOptionChanged = function ({target}) { optionValue = target.value; } + if (optionKey === Setting.BLOCK_MISSING) { + + if (optionValue === true) { + options._renderBlockMissingNotice(); + } else { + options._hideBlockMissingNotice(); + } + } + if (optionKey === Setting.DISABLE_PREFETCH) { options._configureLinkPrefetching(optionValue); }