Unified Diff: options.html
Issue 6088024630755328:
issue 1526 - Implement new options page design for Chrome/Opera/Safari (Closed)
Patch Set:
Created March 6, 2015, 11:44 a.m.
Use n/p to move between diff chunks;
N/P to move between comments.
« locale/en-US/options.json ('K')
|
« locale/en-US/options.json ('k')
|
options.js » ('j')
|
options.js » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| Index: options.html |
| =================================================================== |
| new file mode 100644 |
| --- /dev/null |
| +++ b/options.html |
| @@ -0,0 +1,313 @@ |
| +<!DOCTYPE html> |
| +<!-- |
| + - This file is part of Adblock Plus <https://adblockplus.org/>, |
| + - Copyright (C) 2006-2015 Eyeo GmbH |
| + - |
| + - Adblock Plus is free software: you can redistribute it and/or modify |
| + - it under the terms of the GNU General Public License version 3 as |
| + - published by the Free Software Foundation. |
| + - |
| + - Adblock Plus is distributed in the hope that it will be useful, |
| + - but WITHOUT ANY WARRANTY; without even the implied warranty of |
| + - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
| + - GNU General Public License for more details. |
| + - |
| + - You should have received a copy of the GNU General Public License |
| + - along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>. |
| + --> |
| + |
| +<html> |
| + <head> |
| + <meta charset="utf-8"> |
| + <title class="i18n_options_page_title"></title> |
| + <link type="text/css" rel="stylesheet" href="skin/options.css"> |
| + <style type="text/css" id="search-style"></style> |
| + <script src="ext/common.js"></script> |
| + <script src="ext/content.js"></script> |
| + <script src="i18n.js"></script> |
| + <script src="options.js"></script> |
| + </head> |
| + <body data-tab="general"> |
| + <!-- Navigation sidebar --> |
| + <div id="nav-sidebar"> |
| + <div id="fixed-sidebar" class="fixed"> |
| + <div id="page-title"> |
| + <p class="i18n_options_page_name"></p> |
| + <h1 class="i18n_options_abp"></h1> |
| + </div> |
| + <ul class="tabs vertical" id="main-navigation-tabs"> |
| + <li id="tab-general" data-show="general" class="active"> |
| + <span class="i18n_options_tab_general"></span> |
| + <span class="icon"></span> |
| + </li> |
| + <li id="tab-advanced" data-show="advanced"> |
| + <span class="i18n_options_tab_advanced"></span> |
| + <span class="icon"></span> |
| + </li> |
| + <li id="tab-help" data-show="help"> |
| + <span class="i18n_options_tab_help"></span> |
| + <span class="icon"></span> |
| + </li> |
| + </ul> |
| + <p class="nav-link"> |
| + <span class="i18n_options_version"></span> <span id="abp-version"></span> |
| + </p> |
| + <ul class="tabs vertical bottom"> |
| + <li id="tab-share"> |
| + <span class="i18n_options_tab_share"></span><span class="icon"></span> |
| + </li> |
| + <li id="tab-donate"> |
| + <span class="i18n_options_tab_donate"></span><span class="icon"></span> |
| + </li> |
| + </ul> |
| + </div> |
| + </div> |
| + <div id="tab-content"> |
| + <div id="content-wrapper"> |
| + <div id="modal-background"></div> |
| + |
| + <!-- General tab content --> |
| + <div id="content-general"> |
| + <div> |
| + <h1 class="i18n_options_blocking"></h1> |
| + <div class="flex-container"> |
| + <div id="blocking-languages"> |
| + <p class="option-name"> |
| + <span class="i18n_options_language_title"></span> |
| + <a class="i18n_options_readMore tooltip" target="_blank"></a> |
| + </p> |
| + <ul class="table list" id="blocking-languages-table"> |
| + <template> |
| + <input type="checkbox" class="control" /> |
| + <span class="display"></span> |
| + </template> |
| + </ul> |
| + <div class="controls"> |
| + <button id="add-website-language"> |
| + <span class="icon icon-add"></span> |
| + <span class="i18n_options_language_add"></span> |
| + </button> |
| + </div> |
| + </div> |
| + <div id="further-blocking"> |
| + <p class="option-name"> |
| + <strong class="i18n_options_furtherBlocking_title"></strong> |
| + <a class="i18n_options_readMore tooltip" target="_blank"></a> |
| + </p> |
| + <div id="custom-wrapper"> |
| + <ul class="table list" id="recommend-list-table"> |
| + <template> |
| + <input type="checkbox" class=control /> |
| + <span class="display"></span> |
| + <span class="popular"></span> |
| + </template> |
| + </ul> |
| + <ul class="table list" id="custom-list-table"> |
| + <template> |
| + <input type="checkbox" class="control" /> |
| + <span class="display"></span> |
| + </template> |
| + </ul> |
| + </div> |
| + <div class="controls"> |
| + <button id="add-blocking-list"> |
| + <span class="icon icon-add"></span> |
| + <span class="i18n_options_furtherBlocking_add"><span> |
| + </button> |
| + </div> |
| + </div> |
| + </div> |
| + </div> |
| + <div> |
| + <h1 class="i18n_options_exceptions"></h1> |
| + <div class="flex-container"> |
| + <div id="acceptable-ads"> |
| + <p class="option-name"> |
| + <strong class="i18n_options_acceptableAds_title"></strong> |
| + <a class="i18n_options_readMore tooltip" target="_blank"></a> |
| + </p> |
| + <ul id="acceptableads-table" class="table list"> |
| + <template> |
| + <input type="checkbox" class="control" /> |
| + <span class="display"></span> |
| + </template> |
| + </ul> |
| + </div> |
| + <div id="whitelisting"> |
| + <p class="option-name"> |
| + <strong class="i18n_options_whitelisted_title"></strong> |
| + <a class="i18n_options_readMore tooltip" target="_blank"></a> |
| + </p> |
| + <ul class="table list" id="whitelisting-table"> |
| + <template> |
| + <button class="delete control"></button> |
| + <span class="display"></span> |
| + </template> |
| + </ul> |
| + <div class="controls"> |
| + <div> |
| + <span class="icon icon-add" id="whitelisting-add-icon"></span> |
| + <input type="text" id="whitelisting-textbox" /> |
| + <span class="icon icon-enter" id="whitelisting-enter-icon"></span> |
| + </div> |
| + <div> |
| + <button class="button-add" id="whitelisting-add-button"> |
| + +<span class="i18n_options_button_add"></span> |
| + </button> |
| + <span></span> |
| + <button class="i18n_options_button_cancel cancel-button" id="whitelisting-cancel-button"></button> |
| + </div> |
| + </div> |
| + </div> |
| + </div> |
| + </div> |
| + </div> |
| + |
| + <!-- Advanced tab content --> |
| + <div id="content-advanced"> |
| + <div> |
| + <h1><span class="i18n_options_tweaks"></span><a class="i18n_options_readMore tooltip" href="#"></a></h1> |
| + <ul class="table" style="width: auto;"> |
| + <li> |
| + <input type="checkbox" id="easylist"/><span id="block-element-explanation" class="i18n_options_tweaks_blockElement"></span></li> |
| + </ul> |
| + </div> |
| + <div> |
| + <h1><span class="i18n_options_blockingList"></span><a class="i18n_options_readMore tooltip" href="#" target="_blank"></a></h1> |
| + <ul class="tabs horizontal" id="blocking-list-tabs"> |
| + <li class="i18n_options_tab_overview active" data-show="blocking-list-overview"></li><li class="i18n_options_tab_ownList" data-show="blocking-list-own"></li> |
| + </ul> |
| + <div id="blocking-list"> |
| + <div id="blocking-list-overview"> |
| + <ul class="table cols" style="width: auto;"> |
| + <li class="col-name"><span class="i18n_options_tableCol_name"></span><span class="i18n_options_tableCol_description"></span><span class="i18n_options_tableCol_date"></span></li> |
| + <li><input type="checkbox" id="easylist"/><span>Easylist</span><span>Adblocking english sites</span><span>15 March 14 - 10:31</span></li> |
| + <li><input type="checkbox" id="easylist+de"/><span>Easylist Germany + Easylist</span><span>Adblocking english + german sites</span><span>15 March 14 - 10:31</span></li> |
| + <li><input type="checkbox" id="annoyance-fb"/><span>Facebook annoyance blocker</span><span>Blocks Facebook annoyances</span><span>15 March 14 - 10:31</span></li> |
| + <li><input type="checkbox" id="annoyance-youtube"/><span>Facebook annoyance blocker</span><span>Blocks Facebook annoyances</span><span>15 March 14 - 10:31</span></li> |
| + <li><input type="checkbox" id="own-list"/><span>Own blocking list</span><span>Your own blocking list</span><span><a href="#">edit your blocking list</a></span></li> |
| + </ul> |
| + <div class="controls"> |
| + <button> |
| + <span class="icon icon-add"></span><span class="i18n_options_blockingList_add"></span> |
| + </button> |
| + <button> |
| + <span class="icon icon-update"></span><span class="i18n_options_blockingList_update"></span> |
| + </button> |
| + </div> |
| + </div> |
| + <div id="blocking-list-own"> |
| + <p class="i18n_options_blockingRules"></p> |
| + <ul class="table list"> |
| + <li><span>zap2it.com##.zc-station-position</span></li> |
| + <li><span>downturk.net##.zippo</span></li> |
| + <li><span>yahoo.com##.y708-promo-middle</span></li> |
| + <li><span>reflector.com##.yahooboss</span></li> |
| + <li><span>yardbarker.com##.yard_leader</span></li> |
| + <li><span>espn.co.uk##.will_hill</span></li> |
| + <li><span>listverse.com##.wiki</span></li> |
| + <li><span>planet5d.com##.wp-image-1573</span></li> |
| + <li><span>buzzinn.net##.wpn_finner</span></li> |
| + <li><span>talkers.com##.wpss_slideshow</span></li> |
| + </ul> |
| + <div class="controls" style="margin: 0px;"> |
| + <input type="text" placeholder="add your blocking rule here"/> |
| + <div class="input-control"> |
| + <span class="input-separator"></span> |
| + <span class="i18n_options_button_add input-button-text"></span> |
| + <span class="icon icon-enter-blue"></span> |
| + </div> |
| + </div> |
| + <div class="controls"> |
| + <button> |
| + <span class="icon icon-edit"></span> |
| + <span class="i18n_options_blockingRules_edit"></span> |
| + </button> |
| + </div> |
| + </div> |
| + </div> |
| + </div> |
| + </div> |
| + |
| + <!-- Help tab content --> |
| + <div id="content-help"> |
| + <h1 class="i18n_options_faq"></h1> |
| + <p class="i18n_options_faq_description"></p> |
| + <p> |
| + <a class="i18n_options_faq_link" href="#" target="_blank"></a> |
| + </p> |
| + <h1 class="i18n_options_forum"></h1> |
| + <p class="i18n_options_forum_description"></p> |
| + <p> |
| + <a class="i18n_options_forum_link" href="#" target="_blank"></a> |
| + </p> |
| + <h1 class="i18n_options_media"></h1> |
| + <p class="i18n_options_media_description"></p> |
| + <p> |
| + <a href="#" target="_blank">Twitter</a> |
| + <a href="#" target="_blank">Facebook</a> |
| + <a href="#" target="_blank">Google+</a> |
| + </p> |
| + </div> |
| + </div> |
| + </div> |
| + |
| + <!-- Modal --> |
| + <div id="modal"> |
| + <header> |
| + <span id="modal-title"> |
| + <span id="modal-title-customlist" class="i18n_options_modal_customlist_title"></span> |
| + <span id="modal-title-language" class="i18n_options_modal_language_title"></span> |
| + </span> |
| + <button id="modal-close" class="i18n_options_close"></button> |
| + </header> |
| + <div class="content" id="modal-body"> |
| + <!-- Add other website language: Modal --> |
| + <div class="modal-content" id="modal-content-language"> |
| + <div class="modal-content-block"> |
| + <h3 class="i18n_options_modal_language_added"></h3> |
| + <ul class="table list" id="blocking-languages-modal-table"> |
| + <template> |
| + <span class="display"></span> |
| + </template> |
| + </ul> |
| + </div> |
| + <div class="modal-content-block" id="other-language"> |
| + <h3 class="i18n_options_modal_language_other"></h3> |
| + <div> |
| + <input type="search" id="find-language" /> |
| + </div> |
| + <ul class="table list" id="all-lang-table"> |
| + <template> |
| + <button class="button-add control"> |
| + <span></span> |
| + </button> |
| + <span class="display"></span> |
| + </template> |
| + </ul> |
| + </div> |
| + </div> |
| + <!-- Add other blocking list: Modal --> |
| + <div class="modal-content" id="modal-content-customlist"> |
| + <div class="modal-content-block"> |
| + <h3 class="i18n_options_modal_customlist_subscription_title"></h3> |
| + <div> |
| + <input id="blockingList-textbox" type="text" placeholder="www.example.com/blockinglist.txt" /> |
| + </div> |
| + <div class="button-wrapper" id="import-blockingList-button"> |
| + <span class="icon icon-arrow"></span> |
| + <span class="i18n_options_modal_customlist_import"></span> |
| + </div> |
| + </div> |
| + <div class="modal-content-block"> |
| + <h3 class="i18n_options_modal_edit_own_list"></h3> |
| + <div class="button-wrapper" id="edit-ownBlockingList-button"> |
| + <span class="icon icon-arrow"></span> |
| + <span class="i18n_options_modal_create_own_list"></span> |
| + </div> |
| + </div> |
| + </div> |
| + </div> |
| + </div> |
| + </body> |
| +</html> |
« locale/en-US/options.json ('K')
|
« locale/en-US/options.json ('k')
|
options.js » ('j')
|
options.js » ('J')
