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

Side by Side Diff: options.html

Issue 6088024630755328: issue 1526 - Implement new options page design for Chrome/Opera/Safari (Closed)
Patch Set: Created Jan. 23, 2015, 6:09 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« no previous file with comments | « locale/en-US/options.json ('k') | options.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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 <script src="ext/common.js"></script>
25 <script src="ext/content.js"></script>
26 <script src="i18n.js"></script>
27 <script src="options.js"></script>
28 </head>
29 <body>
30 <!-- Navigation sidebar -->
31 <div id="nav-sidebar">
32 <div id="fixed-sidebar" class="fixed">
33 <div id="page-title">
34 <p class="i18n_options_page_name"></p>
35 <h1 class="i18n_options_abp"></h1>
36 </div>
37 <ul class="tabs vertical" id="main-navigation-tabs">
38 <li id="tab-general" data-show="content-general" class="active">
39 <span class="i18n_options_tab_general"></span>
40 <span class="icon"></span>
41 </li>
42 <li id="tab-advanced" data-show="content-advanced">
43 <span class="i18n_options_tab_advanced"></span>
44 <span class="icon"></span>
45 </li>
46 <li id="tab-help" data-show="content-help">
47 <span class="i18n_options_tab_help"></span>
48 <span class="icon"></span>
49 </li>
50 </ul>
51 <p class="nav-link">
52 <span class="i18n_options_version"></span> <span id="abp-version"></sp an>
53 </p>
54 <ul class="tabs vertical bottom">
55 <li id="tab-share">
56 <span class="i18n_options_tab_share"></span><span class="icon"></spa n>
57 </li>
58 <li id="tab-donate">
59 <span class="i18n_options_tab_donate"></span><span class="icon"></sp an>
60 </li>
61 </ul>
62 </div>
63 </div>
64 <div id="tab-content">
65 <div id="content-wrapper">
66 <div id="modal-background"></div>
67
68 <!-- General tab content -->
69 <div id="content-general">
70 <div>
71 <h1 class="i18n_options_blocking"></h1>
72 <div class="flex-container">
73 <div id="blocking-languages">
74 <p class="option-name"><span class="i18n_options_language_title" ></span> <a class="i18n_options_readMore highlighted" href="#" target="_blank">< /a></p>
saroyanm 2015/01/27 11:19:11 Done.
75 <ul class="table list" id="blocking-languages-table"></ul>
76 <hr>
77 <div class="controls">
78 <button id="add-website-language" data-show="blocking-language s-modal">
79 <span class="icon icon-add"></span><span class="i18n_options _language_add"></span>
80 </button>
81 </div>
82 </div>
83 <div id="further-blocking">
84 <p class="option-name"><strong class="i18n_options_furtherBlocki ng_title"></strong> <a class="i18n_options_readMore highlighted" href="#" target ="_blank"></a></p>
85 <ul class="table list" id="further-list-table"></ul>
86 <hr>
87 <div class="controls">
88 <button id="add-blocking-list" data-show="further-blocking-mod al">
89 <span class="icon icon-add"></span><span class="i18n_options _furtherBlocking_add"><span>
90 </button>
91 </div>
92 </div>
93 </div>
94 </div>
95 <div>
96 <h1 class="i18n_options_exceptions"></h1>
97 <div class="flex-container">
98 <div id="acceptable-ads">
99 <p class="option-name"><strong class="i18n_options_acceptableAds _title"></strong> <a class="i18n_options_readMore highlighted" href="#" target=" _blank"></a></p>
100 <ul class="table list">
101 <li><input type="checkbox"/><span id="allow-whitelist-cb"></sp an><span>Allow some non-intrusive advertising</span></li>
102 </ul>
103 </div>
104 <div id="whitelisting">
105 <p class="option-name"><strong class="i18n_options_whitelisted_t itle"></strong> <a class="i18n_options_readMore highlighted" href="#" target="_b lank"></a></p>
106 <ul class="table list" id="whitelisting-table"></ul>
107 <hr>
108 <div class="controls">
109 <div>
110 <span class="icon icon-add" id="whitelisting-add-icon"></spa n>
111 <input type="text" id="whitelisting-textbox" />
112 <span class="icon icon-enter" id="whitelisting-enter-icon">< /span>
113 </div>
114 <div>
115 <button class="button-add" id="whitelisting-add-btn">+<span class="i18n_options_btn_add"></span></button>
116 <span></span>
117 <button class="i18n_options_btn_cancel cancelbtn" id="whitel isting-cancel-btn"></button>
118 </div>
119 </div>
120 </div>
121 </div>
122 </div>
123 </div>
124
125 <!-- Advanced tab content -->
126 <div id="content-advanced">
127 <div>
128 <h1><span class="i18n_options_tweaks"></span><a class="i18n_options_ readMore highlighted" href="#"></a></h1>
129 <ul class="table" style="width: auto;">
130 <li>
131 <input type="checkbox" id="easylist"/><span></span><span id="blo ck-element-explanation" class="i18n_options_tweaks_blockElement"></span></li>
132 </ul>
133 </div>
134 <div>
135 <h1><span class="i18n_options_blockingList"></span><a class="i18n_op tions_readMore highlighted" href="#" target="_blank"></a></h1>
136 <ul class="tabs horizontal" id="blocking-list-tabs">
137 <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>
138 </ul>
139 <div id="blocking-list">
140 <div id="blocking-list-overview">
141 <ul class="table cols" style="width: auto;">
142 <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>
143 <li><input type="checkbox" id="easylist"/><span for="easylist" ></span><span>Easylist</span><span>Adblocking english sites</span><span>15 March 14 - 10:31</span></li>
144 <li><input type="checkbox" id="easylist+de"/><span for="easyli st+de"></span><span>Easylist Germany + Easylist</span><span>Adblocking english + german sites</span><span>15 March 14 - 10:31</span></li>
145 <li><input type="checkbox" id="annoyance-fb"/><span for="annoy ance-fb"></span><span>Facebook annoyance blocker</span><span>Blocks Facebook ann oyances</span><span>15 March 14 - 10:31</span></li>
146 <li><input type="checkbox" id="annoyance-youtube"/><span for=" annoyance-youtube"></span><span>Facebook annoyance blocker</span><span>Blocks Fa cebook annoyances</span><span>15 March 14 - 10:31</span></li>
147 <li><input type="checkbox" id="own-list"/><span for="own-list" ></span><span>Own blocking list</span><span>Your own blocking list</span><span>< a href="#">edit your blocking list</a></span></li>
148 </ul>
149 <hr />
150 <div class="controls">
151 <button>
152 <span class="icon icon-add"></span><span class="i18n_options _blockingList_add"></span>
153 </button>
154 <button>
155 <span class="icon icon-update"></span><span class="i18n_opti ons_blockingList_update"></span>
156 </button>
157 </div>
158 </div>
159 <div id="blocking-list-own">
160 <p class="i18n_options_blockingRules"></p>
161 <ul class="table list">
162 <li><span>zap2it.com##.zc-station-position</span></li>
163 <li><span>downturk.net##.zippo</span></li>
164 <li><span>yahoo.com##.y708-promo-middle</span></li>
165 <li><span>reflector.com##.yahooboss</span></li>
166 <li><span>yardbarker.com##.yard_leader</span></li>
167 <li><span>espn.co.uk##.will_hill</span></li>
168 <li><span>listverse.com##.wiki</span></li>
169 <li><span>planet5d.com##.wp-image-1573</span></li>
170 <li><span>buzzinn.net##.wpn_finner</span></li>
171 <li><span>talkers.com##.wpss_slideshow</span></li>
172 </ul>
173 <div class="controls" style="margin: 0px;">
174 <input type="text" placeholder="add your blocking rule here"/>
175 <div class="input-control">
176 <span class="input-separator"></span>
177 <span class="i18n_options_btn_add input-btn-text"></span>
178 <span class="icon icon-enter-blue"></span>
179 </div>
180 </div>
181 <div class="controls">
182 <button>
saroyanm 2015/01/27 11:19:11 Divs with class name "controls" are wrappers for t
183 <span class="icon icon-edit"></span>
184 <span class="i18n_options_blockingRules_edit"></span>
185 </button>
186 </div>
187 </div>
188 </div>
189 </div>
190 </div>
191
192 <!-- Help tab content -->
193 <div id="content-help">
194 <h1 class="i18n_options_faq"></h1>
195 <p class="i18n_options_faq_description"></p>
196 <p>
197 <a class="i18n_options_faq_link" href="#" target="_blank"></a>
198 </p>
199 <h1 class="i18n_options_forum"></h1>
200 <p class="i18n_options_forum_description"></p>
201 <p>
202 <a class="i18n_options_forum_link" href="#" target="_blank"></a>
203 </p>
204 <h1 class="i18n_options_media"></h1>
205 <p class="i18n_options_media_description"></p>
206 <p>
207 <a href="#" target="_blank">Twitter</a>
208 <a href="#" target="_blank">Facebook</a>
209 <a href="#" target="_blank">Google+</a>
210 </p>
211 </div>
212 </div>
213 </div>
214
215 <!-- Modal -->
216 <div id="modal">
217 <header>
218 <span id="modal-title"></span>
219 <button id="modal-close" class="i18n_options_close"></button>
220 </header>
221 <div class="content" id="modal-content">
222 <!-- Add other website language: Modal -->
223 <div id="blocking-languages-modal" data-title="options_modal_language_ti tle">
224 <div>
225 <h3 class="i18n_options_modal_language_added"></h3>
226 <ul class="table list" id="blocking-languages-modal-table"></ul>
227 </div>
228 <div id="other-language">
229 <h3 class="i18n_options_modal_language_other"></h3>
230 <div>
231 <input type="text" placeholder="find language" id="find-language" />
Thomas Greiner 2015/01/26 18:29:17 The placeholder text has to be translatable.
232 </div>
233 <ul class="table list" id="all-lang-table"></ul>
234 </div>
235 </div>
236 <!-- Add other blocking list: Modal -->
237 <div id="further-blocking-modal" data-title="options_modal_blocklist_tit le">
238 <div>
239 <h3 class="i18n_options_modal_blocklist_subscription_title"></h3>
240 <div>
241 <input id="blockingList-textbox" type="text" placeholder="www.your URL.com/blockinglist.txt" />
Thomas Greiner 2015/01/26 18:29:17 Personal preference: Usually, we use www.example.c
242 </div>
243 <div class="btn-wrapper" id="import-blockingList-btn">
244 <span class="icon icon-arrow"></span>
245 <span class="i18n_options_modal_blocklist_import text-blue"></span >
Thomas Greiner 2015/01/26 18:29:17 Here's another class that contains style informati
246 </div>
247 </div>
248 <div>
249 <h3 class="i18n_options_modal_edit_own_list"></h3>
250 <div class="btn-wrapper" id="edit-ownBlockingList-btn">
251 <span class="icon icon-arrow"></span>
252 <span class="i18n_options_modal_create_own_list text-blue"></span>
253 </div>
254 </div>
255 </div>
256 </div>
257 </div>
258 </body>
259 </html>
OLDNEW
« no previous file with comments | « locale/en-US/options.json ('k') | options.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld