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

Improve configuration feedback

parent 3b13b60b
......@@ -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;
}
/**
......
......@@ -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">
<div class="notice-message">
<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>
<a class="button button-notice" href="https://crowdin.com/project/decentraleyes" target="_blank">
Help Translate
</a>
......
......@@ -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);
}
......
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