Verified Commit 33bccd25 authored by Thomas Rientjes's avatar Thomas Rientjes
Browse files

Improve configuration feedback

parent 3b13b60b
...@@ -7,15 +7,29 @@ body { ...@@ -7,15 +7,29 @@ body {
cursor: default; cursor: default;
font-family: 'Noto Sans', Arial, sans-serif !important; font-family: 'Noto Sans', Arial, sans-serif !important;
font-size: 12px; font-size: 12px;
margin-top: -15px;
padding: 10px !important; padding: 10px !important;
} }
.option { .option {
margin-bottom: 22px; margin-top: 25px;
} }
.notice { .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 { ...@@ -74,10 +88,58 @@ body {
*/ */
.icon { .icon {
color: #777;
margin-right: 3px; 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 * Links
*/ */
...@@ -118,14 +180,19 @@ body { ...@@ -118,14 +180,19 @@ body {
display: flex; display: flex;
} }
.notice-head {
font-weight: 600;
margin-bottom: 6px;
}
.notice-body { .notice-body {
background-color: #fbfbfb; align-items: center;
border-radius: 3px; display: flex;
border: 1px solid #e7e7e7; }
color: #595959;
display: inline-block; .notice-message {
font-size: 11px; line-height: 1.3;
padding: 8px 10px; margin-right: 14px;
} }
/** /**
......
...@@ -23,6 +23,29 @@ ...@@ -23,6 +23,29 @@
<script src="options.js"></script> <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"> <section class="option">
<div class="title-option"> <div class="title-option">
...@@ -105,13 +128,18 @@ ...@@ -105,13 +128,18 @@
</section> </section>
<section class="notice hidden" id="notice-locale"> <section class="notice notice-default hidden" id="notice-locale">
<div class="notice-body" dir="ltr"> <div class="notice-body" dir="ltr">
<i class="fai fa-exclamation-triangle icon"></i> <div class="notice-message">
Your preferred language is not yet fully supported.
<a class="link-text" href="https://crowdin.com/project/decentraleyes" target="_blank"> <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 Help Translate
</a> </a>
......
...@@ -48,16 +48,33 @@ options._renderOptionsPanel = function () { ...@@ -48,16 +48,33 @@ options._renderOptionsPanel = function () {
elements.whitelistedDomains.value = domainWhitelist; elements.whitelistedDomains.value = domainWhitelist;
options._registerOptionChangedEventListeners(elements); options._registerOptionChangedEventListeners(elements);
options._registerMiscellaneousEventListeners();
if (options._optionValues.blockMissing === true) {
options._renderBlockMissingNotice();
}
if (options._languageSupported === false) { if (options._languageSupported === false) {
options._renderLocaleNotice(); 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 () { options._renderLocaleNotice = function () {
let localeNoticeElement = document.getElementById('notice-locale'); let localeNoticeElement = document.getElementById('notice-locale');
localeNoticeElement.setAttribute('class', 'notice'); localeNoticeElement.setAttribute('class', 'notice notice-default');
}; };
options._registerOptionChangedEventListeners = function (elements) { options._registerOptionChangedEventListeners = function (elements) {
...@@ -69,6 +86,19 @@ options._registerOptionChangedEventListeners = function (elements) { ...@@ -69,6 +86,19 @@ options._registerOptionChangedEventListeners = function (elements) {
elements.whitelistedDomains.addEventListener('keyup', options._onOptionChanged); 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 () { options._determineOptionValues = function () {
return new Promise((resolve) => { return new Promise((resolve) => {
...@@ -173,6 +203,15 @@ options._onOptionChanged = function ({target}) { ...@@ -173,6 +203,15 @@ options._onOptionChanged = function ({target}) {
optionValue = target.value; optionValue = target.value;
} }
if (optionKey === Setting.BLOCK_MISSING) {
if (optionValue === true) {
options._renderBlockMissingNotice();
} else {
options._hideBlockMissingNotice();
}
}
if (optionKey === Setting.DISABLE_PREFETCH) { if (optionKey === Setting.DISABLE_PREFETCH) {
options._configureLinkPrefetching(optionValue); options._configureLinkPrefetching(optionValue);
} }
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment