Microsoft is acquiring GitHub. Decentraleyes is leaving GitHub. Welcome to its new home!

To participate, please register, or sign in with an existing GitLab.com, Bitbucket, or GitHub account.

Past contributions on GitHub? Be sure to reclaim your Comments, Issues, and Pull Requests.

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">
<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>
......
......@@ -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);
}
......
Markdown is supported
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