Commit b5534ca1 authored by Manvel Saroyan's avatar Manvel Saroyan

Issue 5706 - Finish custom subscription dialog implementation

parent 768d7232
......@@ -385,21 +385,29 @@
"description": "Dialog title for adding a predefined subscription",
"message": "Do you really want to use this filter list?"
},
"options_dialog_custom_title": {
"description": "Title of custom subscription modal dialog",
"options_dialog_import_title": {
"description": "Title of 'Add a filter list' dialog",
"message": "Add a filter list"
},
"options_close": {
"description": "Close modal button",
"message": "close"
},
"options_dialog_custom_subscription_title": {
"description": "Add custom subscription modal import hint message",
"message": "Filter list location"
"options_dialog_import_subscription_title": {
"description": "Input label in 'Add a filter list' dialog",
"message": "Filter list name"
},
"options_dialog_custom_import": {
"description": "Button in add custom subscription modal dialog",
"message": "Add filter list"
"options_dialog_import_subscription_title_error": {
"description": "Error message of 'Filter list name' input in 'Add a filter list' dialog",
"message": "Please fill out the field"
},
"options_dialog_import_subscription_location": {
"description": "Input label in 'Add a filter list' dialog",
"message": "Filter list URL"
},
"options_dialog_import_subscription_location_error": {
"description": "Error message of 'Filter list URL' input in 'Add a filter list' dialog",
"message": "Enter a valid URL"
},
"options_dialog_edit_own_list": {
"description": "Edit own filter list section name in custom subscription modal dialog",
......
......@@ -253,8 +253,8 @@
</div>
</template>
</ul>
<div class="side-controls">
<button class="i18n_options_filterList_add primary" data-action="open-dialog" data-dialog="custom"></button>
<div class="side-controls wrap">
<button class="i18n_options_filterList_add primary" data-action="open-dialog" data-dialog="import"></button>
<button id="update" class="i18n_options_filterList_update secondary" data-action="update-all-subscriptions"></button>
</div>
</section>
......@@ -275,10 +275,10 @@
</p>
</div>
<textarea id="custom-filters-raw" rows="15"></textarea>
<div class="side-controls">
<div class="side-controls wrap">
<button id="custom-filters-edit" class="i18n_options_customFilter_edit secondary" data-action="edit-custom-filters">
</button>
<div id="custom-filters-raw-controls">
<div class="side-controls" id="custom-filters-raw-controls">
<button class="i18n_options_customFilter_cancel secondary" data-action="cancel-custom-filters"></button>
<button class="i18n_options_customFilter_save primary" data-action="save-custom-filters"></button>
</div>
......@@ -332,7 +332,7 @@
<header>
<span id="dialog-title">
<h3 id="dialog-title-about" class="i18n_options_dialog_about_title"></h3>
<h3 id="dialog-title-custom" class="i18n_options_dialog_custom_title"></h3>
<h3 id="dialog-title-import" class="i18n_options_dialog_import_title"></h3>
<h3 id="dialog-title-language-add" class="i18n_options_dialog_language_title"></h3>
<h3 id="dialog-title-language-change" class="i18n_options_dialog_language_title"></h3>
<h3 id="dialog-title-predefined" class="i18n_options_dialog_predefined_title"></h3>
......@@ -362,15 +362,26 @@
</template>
</ul>
</div>
<!-- Add custom subscription -->
<div id="dialog-content-custom" class="dialog-content">
<div>
<label for="blockingList-textbox" class="i18n_options_dialog_custom_subscription_title"></label>
<input id="blockingList-textbox" type="text" class="default-focus" placeholder="https://website.com/filterlist.txt" />
</div>
<p>
<button class="i18n_options_dialog_custom_import primary" data-action="import-subscription"></button>
</p>
<!-- Add import subscription -->
<div id="dialog-content-import" class="dialog-content">
<form data-validation="custom" novalidate>
<p class="floating-input">
<input placeholder=" " id="import-list-title" type="text" class="default-focus" required />
<label for="import-list-title" class="i18n_options_dialog_import_subscription_title"></label>
<span class="attention"></span>
<span class="i18n_options_dialog_import_subscription_title_error error-msg"></span>
</p>
<p class="floating-input">
<input placeholder=" " id="import-list-url" type="url" class="default-focus" required/>
<label for="import-list-url" class="i18n_options_dialog_import_subscription_location"></label>
<span class="attention"></span>
<span class="i18n_options_dialog_import_subscription_location_error error-msg"></span>
</p>
<p class="side-controls">
<button class="i18n_options_customFilter_cancel secondary" type="reset" data-action="close-dialog"></button>
<button type="button" class="i18n_options_dialog_import_title primary" data-action="validate-import-subscription"></button>
</p>
</form>
</div>
<!-- Add predefined subscription -->
<div id="dialog-content-predefined" class="dialog-content">
......
......@@ -677,6 +677,23 @@
url: findParentData(element, "access", false)
});
break;
case "validate-import-subscription":
let form = findParentData(element, "validation", true);
if (!form)
return;
if (form.checkValidity())
{
addEnableSubscription(E("import-list-url").value,
E("import-list-title").value);
form.reset();
closeDialog();
}
else
{
form.querySelector(":invalid").focus();
}
break;
}
}
......
<svg id="d61eebd0-97f9-423d-bcac-e4902cefb8ce" data-name="artwork" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>attention</title><path d="M24,0A24,24,0,1,0,48,24,24,24,0,0,0,24,0Zm0,46A22,22,0,1,1,46,24,22,22,0,0,1,24,46Z"/><polygon points="22.93 26.41 24.93 26.41 25.35 17.55 25.45 14.58 22.43 14.58 22.51 17.55 22.93 26.41"/><path d="M23.94,28.26a1.87,1.87,0,0,0-1.39.57,2.18,2.18,0,0,0,0,2.91,1.87,1.87,0,0,0,1.39.57,1.83,1.83,0,0,0,1.38-.57,2.21,2.21,0,0,0,0-2.91A1.83,1.83,0,0,0,23.94,28.26Z"/></svg>
\ No newline at end of file
......@@ -93,6 +93,7 @@ ul
}
input[type="text"],
input[type="url"],
textarea,
main
{
......@@ -277,6 +278,127 @@ button.list:hover
border-color: #099CD0;
}
.side-controls:not(.wrap)
{
margin: 0.8rem 0rem;
display: flex;
justify-content: flex-end;
}
.side-controls button
{
margin: 0rem;
-moz-margin-start: 1rem;
-webkit-margin-start: 1rem;
}
.side-controls.wrap button
{
margin: 0.8rem 0rem;
-moz-margin-start: auto;
-webkit-margin-start: auto;
}
/*
Forms
*/
.floating-input
{
position: relative;
padding-top: 0.7rem;
margin: 1.8rem 0rem 0.5rem 0rem;
}
.floating-input input
{
border-color: #CDCDCD;
border-width: 0px 0px 1px 0px;
outline: none;
font-size: 1.3rem;
padding: 5px;
width: 100%;
}
.floating-input input:placeholder-shown ~ label,
.floating-input input + label,
.floating-input input:focus + label
{
position: absolute;
top: 0.9rem;
left: 0.3rem;
font-size: 1.3rem;
}
.floating-input input + label,
.floating-input input:focus + label
{
top: -0.5rem;
font-size: 0.9rem;
}
html[dir="rtl"] .floating-input input:placeholder-shown ~ label,
html[dir="rtl"] .floating-input input ~ label,
html[dir="rtl"] .floating-input input:focus ~ label
{
right: 0.3rem;
left: auto;
}
[data-validation] .floating-input input:focus:invalid
{
border-color: #C11D27;
}
[data-validation] .floating-input input:focus:invalid ~ .attention::before,
[data-validation] .floating-input input:focus:valid ~ .attention::before
{
content: "";
position: absolute;
display: block;
margin: 0.5rem;
height: 1.5rem;
width: 1.5rem;
border: 0rem;
top: 0.5rem;
right: 0rem;
}
html[dir="rtl"] [data-validation] .floating-input input:focus:invalid ~ .attention::before,
html[dir="rtl"] [data-validation] .floating-input input:focus:valid ~ .attention::before
{
left: 0rem;
right: auto;
}
[data-validation] .floating-input input:focus:invalid ~ .attention::before
{
background-color: #C11D27;
-webkit-mask: url(icons/attention.svg);
mask: url(icons/attention.svg);
}
[data-validation] .floating-input input:focus:valid ~ .attention::before
{
top: 0.8rem;
background-color: green;
-webkit-mask: url(icons/checkmark.svg);
mask: url(icons/checkmark.svg);
}
[data-validation] .floating-input input ~ .error-msg
{
margin-top: 0.5rem;
color: #C11D27;
display: block;
visibility: hidden;
}
[data-validation] .floating-input input:focus:invalid ~ .error-msg
{
visibility: visible;
}
/*
Sidebar
*/
......@@ -861,13 +983,6 @@ button[role="checkbox"]:not(.toggle)
margin-bottom: 1.5rem;
}
.side-controls button
{
margin: 0.8rem 0rem;
-moz-margin-start: auto;
-webkit-margin-start: auto;
}
#custom-filters h3
{
margin: 0rem;
......@@ -886,18 +1001,6 @@ button[role="checkbox"]:not(.toggle)
border: 2px solid #099CD0;
}
#custom-filters-raw-controls
{
display: flex;
justify-content: flex-end;
}
#custom-filters-raw-controls button
{
-moz-margin-start: 1rem;
-webkit-margin-start: 1rem;
}
#empty-custom-filters
{
padding: 1.5rem;
......@@ -1224,12 +1327,6 @@ body[data-dialog] #dialog-background
margin: 1rem 1.8rem;
}
#dialog-body button
{
-moz-margin-start: auto;
-webkit-margin-start: auto;
}
[data-dialog="language-change"] .dialog-content,
[data-dialog="language-add"] .dialog-content
{
......@@ -1256,19 +1353,9 @@ body[data-dialog] #dialog-background
margin-bottom: 2rem;
}
#dialog label
[data-dialog="import"] .side-controls
{
font-size: 0.9rem;
margin: 0px;
}
#dialog input[type="text"]
{
border-color: #CDCDCD;
border-width: 0px 0px 1px 0px;
font-size: 1.3rem;
padding: 5px;
width: 100%;
margin-top: 2.45rem;
}
#dialog .table
......@@ -1302,8 +1389,8 @@ body[data-dialog] #dialog-background
body:not([data-dialog="about"]) #dialog-title-about,
body:not([data-dialog="about"]) #dialog-content-about,
body:not([data-dialog="custom"]) #dialog-title-custom,
body:not([data-dialog="custom"]) #dialog-content-custom,
body:not([data-dialog="import"]) #dialog-title-import,
body:not([data-dialog="import"]) #dialog-content-import,
body:not([data-dialog="language-add"]) #dialog-title-language-add,
body:not([data-dialog="language-change"]) #dialog-title-language-change,
body:not([data-dialog="language-add"]):not([data-dialog="language-change"]) #dialog-content-language-add,
......
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