Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Side by Side Diff: options.html

Issue 6088024630755328: issue 1526 - Implement new options page design for Chrome/Opera/Safari (Closed)
Patch Set: Created Feb. 13, 2015, 10:52 a.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <!--
3 - This file is part of Adblock Plus <https://adblockplus.org/>,
4 - Copyright (C) 2006-2015 Eyeo GmbH
5 -
6 - Adblock Plus is free software: you can redistribute it and/or modify
7 - it under the terms of the GNU General Public License version 3 as
8 - published by the Free Software Foundation.
9 -
10 - Adblock Plus is distributed in the hope that it will be useful,
11 - but WITHOUT ANY WARRANTY; without even the implied warranty of
12 - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13 - GNU General Public License for more details.
14 -
15 - You should have received a copy of the GNU General Public License
16 - along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>.
17 -->
18
19 <html>
20 <head>
21 <meta charset="utf-8">
22 <title class="i18n_options_page_title"></title>
23 <link rel="stylesheet" href="skin/options.css">
24 <style id="search_style"></style>
Thomas Greiner 2015/02/18 17:19:27 All other ID values in this file use "-" as word s
Thomas Greiner 2015/02/18 17:19:27 Add `type="text/css"` for consistency.
saroyanm 2015/02/26 12:18:33 Done.
saroyanm 2015/02/26 12:18:33 Done.
25 <script src="ext/common.js"></script>
26 <script src="ext/content.js"></script>
27 <script src="i18n.js"></script>
28 <script src="options.js"></script>
29 </head>
30 <body data-tab="general">
31 <!-- Navigation sidebar -->
32 <div id="nav-sidebar">
33 <div id="fixed-sidebar" class="fixed">
34 <div id="page-title">
35 <p class="i18n_options_page_name"></p>
36 <h1 class="i18n_options_abp"></h1>
37 </div>
38 <ul class="tabs vertical" id="main-navigation-tabs">
39 <li id="tab-general" data-show="content-general" class="active">
40 <span class="i18n_options_tab_general"></span>
41 <span class="icon"></span>
42 </li>
43 <li id="tab-advanced" data-show="content-advanced">
44 <span class="i18n_options_tab_advanced"></span>
45 <span class="icon"></span>
46 </li>
47 <li id="tab-help" data-show="content-help">
48 <span class="i18n_options_tab_help"></span>
49 <span class="icon"></span>
50 </li>
51 </ul>
52 <p class="nav-link">
53 <span class="i18n_options_version"></span> <span id="abp-version"></sp an>
54 </p>
55 <ul class="tabs vertical bottom">
56 <li id="tab-share">
57 <span class="i18n_options_tab_share"></span><span class="icon"></spa n>
58 </li>
59 <li id="tab-donate">
60 <span class="i18n_options_tab_donate"></span><span class="icon"></sp an>
61 </li>
62 </ul>
63 </div>
64 </div>
65 <div id="tab-content">
66 <div id="content-wrapper">
67 <div id="modal-background"></div>
68
69 <!-- General tab content -->
70 <div id="content-general">
71 <div>
72 <h1 class="i18n_options_blocking"></h1>
73 <div class="flex-container">
74 <div id="blocking-languages">
75 <p class="option-name">
76 <span class="i18n_options_language_title"></span>
77 <a class="i18n_options_readMore tooltip" href="#" target="_bla nk"></a>
78 </p>
79 <ul class="table list" id="blocking-languages-table"></ul>
80 <div class="controls">
81 <button id="add-website-language">
82 <span class="icon icon-add"></span>
83 <span class="i18n_options_language_add"></span>
84 </button>
85 </div>
86 </div>
87 <div id="further-blocking">
88 <p class="option-name">
89 <strong class="i18n_options_furtherBlocking_title"></strong>
90 <a class="i18n_options_readMore tooltip" href="#" target="_bla nk"></a>
91 </p>
92 <div id="custom-wrapper">
93 <ul class="table list" id="recommend-list-table"></ul>
94 <ul class="table list" id="custom-list-table"></ul>
95 </div>
96 <div class="controls">
97 <button id="add-blocking-list">
98 <span class="icon icon-add"></span>
99 <span class="i18n_options_furtherBlocking_add"><span>
100 </button>
101 </div>
102 </div>
103 </div>
104 </div>
105 <div>
106 <h1 class="i18n_options_exceptions"></h1>
107 <div class="flex-container">
108 <div id="acceptable-ads">
109 <p class="option-name">
110 <strong class="i18n_options_acceptableAds_title"></strong>
111 <a class="i18n_options_readMore tooltip" href="#" target="_bla nk"></a>
112 </p>
113 <ul id="acceptableads-table" class="table list"></ul>
114 </div>
115 <div id="whitelisting">
116 <p class="option-name">
117 <strong class="i18n_options_whitelisted_title"></strong>
118 <a class="i18n_options_readMore tooltip" href="#" target="_bla nk"></a>
119 </p>
120 <ul class="table list" id="whitelisting-table"></ul>
121 <div class="controls">
122 <div>
123 <span class="icon icon-add" id="whitelisting-add-icon"></spa n>
124 <input type="text" id="whitelisting-textbox" />
125 <span class="icon icon-enter" id="whitelisting-enter-icon">< /span>
126 </div>
127 <div>
128 <button class="button-add" id="whitelisting-add-btn">
129 +<span class="i18n_options_btn_add"></span>
130 </button>
131 <span></span>
132 <button class="i18n_options_btn_cancel cancelbtn" id="whitel isting-cancel-btn"></button>
133 </div>
134 </div>
135 </div>
136 </div>
137 </div>
138 </div>
139
140 <!-- Advanced tab content -->
141 <div id="content-advanced">
142 <div>
143 <h1><span class="i18n_options_tweaks"></span><a class="i18n_options_ readMore tooltip" href="#"></a></h1>
144 <ul class="table" style="width: auto;">
145 <li>
146 <input type="checkbox" id="easylist"/><span id="block-element-ex planation" class="i18n_options_tweaks_blockElement"></span></li>
147 </ul>
148 </div>
149 <div>
150 <h1><span class="i18n_options_blockingList"></span><a class="i18n_op tions_readMore tooltip" href="#" target="_blank"></a></h1>
151 <ul class="tabs horizontal" id="blocking-list-tabs">
152 <li class="i18n_options_tab_overview active" data-show="blocking-l ist-overview"></li><li class="i18n_options_tab_ownList" data-show="blocking-list -own"></li>
153 </ul>
154 <div id="blocking-list">
155 <div id="blocking-list-overview">
156 <ul class="table cols" style="width: auto;">
157 <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>
158 <li><input type="checkbox" id="easylist"/><span>Easylist</span ><span>Adblocking english sites</span><span>15 March 14 - 10:31</span></li>
159 <li><input type="checkbox" id="easylist+de"/><span>Easylist Ge rmany + Easylist</span><span>Adblocking english + german sites</span><span>15 Ma rch 14 - 10:31</span></li>
160 <li><input type="checkbox" id="annoyance-fb"/><span>Facebook a nnoyance blocker</span><span>Blocks Facebook annoyances</span><span>15 March 14 - 10:31</span></li>
161 <li><input type="checkbox" id="annoyance-youtube"/><span>Faceb ook annoyance blocker</span><span>Blocks Facebook annoyances</span><span>15 Marc h 14 - 10:31</span></li>
162 <li><input type="checkbox" id="own-list"/><span>Own blocking l ist</span><span>Your own blocking list</span><span><a href="#">edit your blockin g list</a></span></li>
163 </ul>
164 <div class="controls">
165 <button>
166 <span class="icon icon-add"></span><span class="i18n_options _blockingList_add"></span>
167 </button>
168 <button>
169 <span class="icon icon-update"></span><span class="i18n_opti ons_blockingList_update"></span>
170 </button>
171 </div>
172 </div>
173 <div id="blocking-list-own">
174 <p class="i18n_options_blockingRules"></p>
175 <ul class="table list">
176 <li><span>zap2it.com##.zc-station-position</span></li>
177 <li><span>downturk.net##.zippo</span></li>
178 <li><span>yahoo.com##.y708-promo-middle</span></li>
179 <li><span>reflector.com##.yahooboss</span></li>
180 <li><span>yardbarker.com##.yard_leader</span></li>
181 <li><span>espn.co.uk##.will_hill</span></li>
182 <li><span>listverse.com##.wiki</span></li>
183 <li><span>planet5d.com##.wp-image-1573</span></li>
184 <li><span>buzzinn.net##.wpn_finner</span></li>
185 <li><span>talkers.com##.wpss_slideshow</span></li>
186 </ul>
187 <div class="controls" style="margin: 0px;">
188 <input type="text" placeholder="add your blocking rule here"/>
189 <div class="input-control">
190 <span class="input-separator"></span>
191 <span class="i18n_options_btn_add input-btn-text"></span>
192 <span class="icon icon-enter-blue"></span>
193 </div>
194 </div>
195 <div class="controls">
196 <button>
197 <span class="icon icon-edit"></span>
198 <span class="i18n_options_blockingRules_edit"></span>
199 </button>
200 </div>
201 </div>
202 </div>
203 </div>
204 </div>
205
206 <!-- Help tab content -->
207 <div id="content-help">
208 <h1 class="i18n_options_faq"></h1>
209 <p class="i18n_options_faq_description"></p>
210 <p>
211 <a class="i18n_options_faq_link" href="#" target="_blank"></a>
212 </p>
213 <h1 class="i18n_options_forum"></h1>
214 <p class="i18n_options_forum_description"></p>
215 <p>
216 <a class="i18n_options_forum_link" href="#" target="_blank"></a>
217 </p>
218 <h1 class="i18n_options_media"></h1>
219 <p class="i18n_options_media_description"></p>
220 <p>
221 <a href="#" target="_blank">Twitter</a>
222 <a href="#" target="_blank">Facebook</a>
223 <a href="#" target="_blank">Google+</a>
224 </p>
225 </div>
226 </div>
227 </div>
228
229 <!-- Modal -->
230 <div id="modal">
231 <header>
232 <span id="modal-title"></span>
233 <button id="modal-close" class="i18n_options_close"></button>
234 </header>
235 <div class="content" id="modal-content">
236 <!-- Add other website language: Modal -->
237 <div id="modal-content-language">
238 <div>
239 <h3 class="i18n_options_modal_language_added"></h3>
240 <ul class="table list" id="blocking-languages-modal-table"></ul>
241 </div>
242 <div id="other-language">
243 <h3 class="i18n_options_modal_language_other"></h3>
244 <div>
245 <input type="text" id="find-language" />
246 </div>
247 <ul class="table list" id="all-lang-table"></ul>
248 </div>
249 </div>
250 <!-- Add other blocking list: Modal -->
251 <div id="modal-content-customlist">
252 <div>
253 <h3 class="i18n_options_modal_customlist_subscription_title"></h3>
254 <div>
255 <input id="blockingList-textbox" type="text" placeholder="www.exam ple.com/blockinglist.txt" />
256 </div>
257 <div class="btn-wrapper" id="import-blockingList-btn">
258 <span class="icon icon-arrow"></span>
259 <span class="i18n_options_modal_customlist_import"></span>
260 </div>
261 </div>
262 <div>
263 <h3 class="i18n_options_modal_edit_own_list"></h3>
264 <div class="btn-wrapper" id="edit-ownBlockingList-btn">
265 <span class="icon icon-arrow"></span>
266 <span class="i18n_options_modal_create_own_list"></span>
267 </div>
268 </div>
269 </div>
270 </div>
271 </div>
272 </body>
273 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld