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

Delta Between Two Patch Sets: options.html

Issue 6088024630755328: issue 1526 - Implement new options page design for Chrome/Opera/Safari (Closed)
Left Patch Set: Created Jan. 21, 2015, 6:52 p.m.
Right Patch Set: Comment about solution being temprorary is added to subscriptions.xml Created June 13, 2015, 12:59 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
Left: Side by side diff | Download
Right: Side by side diff | Download
« no previous file with change/comment | « locale/en-US/options.json ('k') | options.js » ('j') | no next file with change/comment »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
LEFTRIGHT
1 <!DOCTYPE html> 1 <!DOCTYPE html>
Thomas Greiner 2015/01/22 17:56:30 This page contains a couple of subpages so I'd fin
saroyanm 2015/01/23 18:18:39 Done.
2 <!-- 2 <!--
3 - This file is part of Adblock Plus <http://adblockplus.org/>, 3 - This file is part of Adblock Plus <https://adblockplus.org/>,
Thomas Greiner 2015/01/22 17:56:30 Nit: Change to "https"
saroyanm 2015/01/23 18:18:39 Done.
4 - Copyright (C) 2006-2015 Eyeo GmbH 4 - Copyright (C) 2006-2015 Eyeo GmbH
5 - 5 -
6 - Adblock Plus is free software: you can redistribute it and/or modify 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 7 - it under the terms of the GNU General Public License version 3 as
8 - published by the Free Software Foundation. 8 - published by the Free Software Foundation.
9 - 9 -
10 - Adblock Plus is distributed in the hope that it will be useful, 10 - Adblock Plus is distributed in the hope that it will be useful,
11 - but WITHOUT ANY WARRANTY; without even the implied warranty of 11 - but WITHOUT ANY WARRANTY; without even the implied warranty of
12 - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 12 - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13 - GNU General Public License for more details. 13 - GNU General Public License for more details.
14 - 14 -
15 - You should have received a copy of the GNU General Public License 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/>. 16 - along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>.
17 --> 17 -->
18 18
19 <html> 19 <html>
20 <head> 20 <head>
21 <meta charset="utf-8"> 21 <meta charset="utf-8">
22 <title class="i18n_options_page_title"></title> 22 <title class="i18n_options_page_title"></title>
23 <link rel="stylesheet" href="skin/options.css"> 23 <link rel="stylesheet" href="skin/options.css">
24 <script type="text/javascript" src="ext/common.js"></script> 24 <style id="search-style"></style>
Thomas Greiner 2015/01/22 17:56:30 No need to specify the <script> type
saroyanm 2015/01/23 18:18:39 Done. We are using type attribute also in other HT
Thomas Greiner 2015/01/26 18:29:17 No, we usually take care of inconsistencies when s
25 <script type="text/javascript" src="ext/content.js"></script> 25 <script src="ext/common.js"></script>
26 <script type="text/javascript" src="i18n.js"></script> 26 <script src="ext/content.js"></script>
27 <script type="text/javascript" src="options.js"></script> 27 <script src="i18n.js"></script>
28 <script src="options.js"></script>
28 </head> 29 </head>
29 <body> 30 <body data-tab="general">
30 <div id="left-sidebar"> 31 <!-- Navigation sidebar -->
32 <div id="nav-sidebar">
31 <div id="fixed-sidebar" class="fixed"> 33 <div id="fixed-sidebar" class="fixed">
32 <div id="page-title"> 34 <div id="page-title">
33 <p class="i18n_options_page_name"></p> 35 <p class="i18n_options_page_header_1"></p>
34 <h1>Adblock <b>Plus</b></h1> 36 <h1 class="i18n_options_page_header_2"></h1>
Thomas Greiner 2015/01/22 17:56:30 This text needs to be taken from "locale/en-US/opt
saroyanm 2015/01/23 18:18:39 Done.
35 </div> 37 </div>
36 <ul class="tabs vertical" id="main-navigation-tabs"> 38 <ul id="main-navigation-tabs" class="tabs vertical">
37 <li id="tab-general" data-show="content-general" class="active"><span class="i18n_options_tab_general"></span><span class="icon"></span></li> 39 <li id="tab-general" data-show="general" class="active">
Thomas Greiner 2015/01/22 17:56:30 Don't put every list item in one single line to im
saroyanm 2015/01/23 18:18:39 Done.
38 <li id="tab-advanced" data-show="content-advanced"><span class="i18n_o ptions_tab_advanced"></span><span class="icon"></span></li> 40 <span class="i18n_options_tab_general"></span>
39 <li id="tab-help" data-show="content-help"><span class="i18n_options_t ab_help"></span><span class="icon"></span></li> 41 <span class="icon"></span>
42 </li>
43 <li id="tab-advanced" data-show="advanced">
44 <span class="i18n_options_tab_advanced"></span>
45 <span class="icon"></span>
46 </li>
47 <li id="tab-help" data-show="help">
48 <span class="i18n_options_tab_help"></span>
49 <span class="icon"></span>
50 </li>
40 </ul> 51 </ul>
41 <p class="nav-blue"> 52 <p class="nav-link">
Thomas Greiner 2015/01/22 17:56:30 Don't include colors in class names because the co
saroyanm 2015/01/23 18:18:39 Done.
42 <span class="i18n_options_version"></span> <span id="version">2.5.10</ span> 53 <span class="i18n_options_version"></span> <span id="abp-version"></sp an>
Thomas Greiner 2015/01/22 17:56:30 Don't hardcode the version number. Request it from
saroyanm 2015/01/23 18:18:39 Done.
43 </p> 54 </p>
44 <ul class="tabs vertical bottom"> 55 <ul class="tabs vertical bottom">
45 <li id="tab-share"><span class="i18n_options_tab_share"></span><span c lass="icon"></span></li> 56 <li id="tab-share">
46 <li id="tab-donate"><span class="i18n_options_tab_donate"></span><span class="icon"></span></li> 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>
47 </ul> 62 </ul>
48 </div> 63 </div>
49 </div> 64 </div>
50 <div id="tab-content"> 65 <div id="tab-content">
51 <div id="content-wrapper"> 66 <div id="content-wrapper">
52 <div id="modal-background"></div> 67 <div id="dialog-background"></div>
68
69 <!-- General tab content -->
53 <div id="content-general"> 70 <div id="content-general">
54 <div> 71 <div>
Thomas Greiner 2015/01/22 17:56:30 You're wrapping everything inside a <div> but don'
saroyanm 2015/01/23 18:18:39 Thanks, indentation was missing it wraps Blocking
55 <h1 class="i18n_options_blocking"></h1> 72 <h1 class="i18n_options_blocking_title"></h1>
56 <hr> 73 <div class="flex-container">
Thomas Greiner 2015/01/22 17:56:30 You could use "border-bottom" instead of <hr> here
saroyanm 2015/01/23 18:18:39 Done.
57 <div class="flex-container"> 74 <div id="blocking-languages">
58 <div id="blocking-languages" class="left"> 75 <p class="option-name">
Thomas Greiner 2015/01/22 17:56:30 Don't use "left" or "right" in class names since w
saroyanm 2015/01/23 18:18:39 Done.
59 <p class="option-name"><b class="i18n_options_language_adblocking" ></b> <span class="i18n_options_language_title"></span> <a class="i18n_options_r eadMore dotted" href="#" target="_blank"></a></p> 76 <span class="i18n_options_language_title"></span>
Thomas Greiner 2015/01/22 17:56:30 Generally, we avoid using HTML elements that conve
saroyanm 2015/01/23 18:18:39 Done.
60 <ul class="table list" id="blocking-languages-table"></ul> 77 <a class="i18n_options_readMore tooltip" target="_blank"></a>
61 <hr> 78 </p>
62 <div class="controls"> 79 <ul id="blocking-languages-table" class="table list">
63 <div class="button" id="add-website-language" data-show="blockin g-languages-modal"> 80 <template>
Thomas Greiner 2015/01/22 17:56:30 It'd be great if you could use standard HTML eleme
saroyanm 2015/01/23 18:18:39 Done.
64 <span class="icon icon-add"></span><span class="i18n_options_l anguage_add text-blue"></span> 81 <input type="checkbox" class="control" />
65 </div> 82 <span class="display"></span>
66 </div> 83 </template>
67 </div> 84 </ul>
68 <div id="further-blocking"> 85 <div class="controls">
69 <p class="option-name"><b class="i18n_options_furtherBlocking_titl e"></b> <a class="i18n_options_readMore dotted" href="#" target="_blank"></a></p > 86 <button id="add-website-language">
Thomas Greiner 2015/01/22 17:56:30 Again, don't use implementation specific details l
saroyanm 2015/01/23 18:18:39 Done.
70 <ul class="table list" id="further-list-table"></ul> 87 <span class="icon icon-add"></span>
71 <hr> 88 <span class="i18n_options_language_add"></span>
72 <div class="controls"> 89 </button>
73 <div class="button" id="add-blocking-list" data-show="further-bl ocking-modal"> 90 </div>
74 <span class="icon icon-add"></span><span class="i18n_options_f urtherBlocking_add text-blue"><span> 91 </div>
75 </div> 92 <div id="further-blocking">
76 </div> 93 <p class="option-name">
77 </div> 94 <strong class="i18n_options_furtherBlocking_title"></strong>
78 </div> 95 <a class="i18n_options_readMore tooltip" target="_blank"></a>
79 </div> 96 </p>
80 97 <div id="custom-wrapper">
81 <div> 98 <ul id="recommend-list-table" class="table list">
82 <h1 class="i18n_options_exception"></h1> 99 <template>
83 <hr> 100 <input type="checkbox" class=control />
84 <div class="flex-container"> 101 <span class="display"></span>
85 <div class="left" id="acceptable-ads"> 102 <span class="popular"></span>
86 <p class="option-name"><b class="i18n_options_acceptableAds_title" ></b> <a class="i18n_options_readMore dotted" href="#" target="_blank"></a></p> 103 </template>
87 <ul class="table list"> 104 </ul>
88 <li><input type='checkbox'/><label id="allow-whitelist-cb"></lab el><span>Allow some non-intrusive advertising</span></li> 105 <ul id="custom-list-table" class="table list">
Thomas Greiner 2015/01/22 17:56:30 Use " instead of ' for consistency
Thomas Greiner 2015/01/22 17:56:30 Actually, the <span> should be the label for the c
saroyanm 2015/01/23 18:18:39 Done.
saroyanm 2015/01/23 18:18:39 Yes for now, It make sense to change with span, be
Thomas Greiner 2015/01/26 18:29:17 That's not what I meant. I thought more of somethi
89 </ul> 106 <template>
90 </div> 107 <input type="checkbox" class="control" />
91 <div id="whitelisting"> 108 <span class="display"></span>
92 <p class="option-name"><b class="i18n_options_whitelisted_title">< /b> <a class="i18n_options_readMore dotted" href="#" target="_blank"></a></p> 109 </template>
93 <ul class="table list" id="whitelisting-table"></ul> 110 </ul>
94 <hr> 111 </div>
95 <div class="controls"> 112 <div class="controls">
96 <span class="icon icon-add" id="whitelisting-add-icon"></span> 113 <button id="add-blocking-list">
97 <input type="text" id="whitelisting-textbox" /> 114 <span class="icon icon-add"></span>
98 <span class="icon icon-enter" id="whitelisting-enter-icon"></spa n> 115 <span class="i18n_options_furtherBlocking_add"><span>
99 </div> 116 </button>
100 <div style="display: flex;"> 117 </div>
Thomas Greiner 2015/01/22 17:56:30 All styles should be inside a CSS file to separate
saroyanm 2015/01/23 18:18:39 Done.
101 <button class="addbtn" id="whitelisting-add-btn">+<span class="i 18n_options_btn_add"></span></button> 118 </div>
Thomas Greiner 2015/01/22 17:56:30 Why not "button-add"? That should be more consiste
saroyanm 2015/01/23 18:18:39 Done.
102 <span style="flex: 1;"></span> 119 </div>
103 <button class="i18n_options_btn_cancel cancelbtn" id="whitelisti ng-cancel-btn"></button> 120 </div>
104 </div> 121 <div>
105 </div> 122 <h1 class="i18n_options_exceptions_title"></h1>
106 </div> 123 <div class="flex-container">
107 </div> 124 <div id="acceptable-ads">
108 </div> 125 <p class="option-name">
126 <strong class="i18n_options_acceptableAds_title"></strong>
127 <a class="i18n_options_readMore tooltip" target="_blank"></a>
128 </p>
129 <ul id="acceptableads-table" class="table list">
130 <template>
131 <input type="checkbox" class="control" />
132 <span class="display"></span>
133 </template>
134 </ul>
135 </div>
136 <div id="whitelisting">
137 <p class="option-name">
138 <strong class="i18n_options_whitelisted_title"></strong>
139 <a class="i18n_options_readMore tooltip" target="_blank"></a>
140 </p>
141 <ul id="whitelisting-table" class="table list">
142 <template>
143 <button class="delete control"></button>
144 <span class="display"></span>
145 </template>
146 </ul>
147 <div class="controls">
148 <div>
149 <span id="whitelisting-add-icon" class="icon icon-add"></spa n>
150 <input type="text" id="whitelisting-textbox" />
151 <span id="whitelisting-enter-icon" class="icon icon-enter">< /span>
152 </div>
153 <div>
154 <button id="whitelisting-add-button" class="button-add">
155 +<span class="i18n_options_button_add"></span>
156 </button>
157 <span></span>
158 <button id="whitelisting-cancel-button" class="i18n_options_ button_cancel cancel-button"></button>
159 </div>
160 </div>
161 </div>
162 </div>
163 </div>
164 </div>
165
166 <!-- Advanced tab content -->
109 <div id="content-advanced"> 167 <div id="content-advanced">
110 <div> 168 <div>
111 <h1 class="i18n_options_tweaks"></h1> 169 <h1><span class="i18n_options_tweaks_title"></span><a class="i18n_op tions_readMore tooltip" href="#"></a></h1>
112 <a class="i18n_options_readMore dotted" href="#"></a>
113 <hr />
114 <ul class="table" style="width: auto;"> 170 <ul class="table" style="width: auto;">
115 <li> 171 <li>
116 <input type='checkbox' id="easylist"/><label for="easylist"></la bel><span class="i18n_options_tweaks_blockElement"></span> <a class="i18n_option s_tweaks_blockElement_highlight dotted" href="#" target="_blank"></a></li> 172 <input type="checkbox" id="easylist"/><span id="block-element-ex planation" class="i18n_options_tweaks_blockElement"></span></li>
117 </ul> 173 </ul>
118 </div> 174 </div>
119 <div> 175 <div>
120 <h1 class="i18n_options_blockingList"></h1> 176 <h1><span class="i18n_options_blockingList_title"></span><a class="i 18n_options_readMore tooltip" href="#" target="_blank"></a></h1>
121 <a class="i18n_options_readMore dotted" href="#" target="_blank"></a > 177 <ul id="blocking-list-tabs" class="tabs horizontal">
122 <hr />
123 <ul class="tabs horizontal" id="blocking-list-tabs">
124 <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> 178 <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>
125 </ul> 179 </ul>
126 <div id="blocking-list"> 180 <div id="blocking-list">
127 <div id="blocking-list-overview"> 181 <div id="blocking-list-overview">
128 <ul class="table cols" style="width: auto;"> 182 <ul class="table cols" style="width: auto;">
129 <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> 183 <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>
130 <li><input type='checkbox' id="easylist"/><label for="easylist "></label><span>Easylist</span><span>Adblocking english sites</span><span>15 Mar ch 14 - 10:31</span></li> 184 <li><input type="checkbox" id="easylist"/><span>Easylist</span ><span>Adblocking english sites</span><span>15 March 14 - 10:31</span></li>
131 <li><input type='checkbox' id="easylist+de"/><label for="easyl ist+de"></label><span>Easylist Germany + Easylist</span><span>Adblocking english + german sites</span><span>15 March 14 - 10:31</span></li> 185 <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>
132 <li><input type='checkbox' id="annoyance-fb"/><label for="anno yance-fb"></label><span>Facebook annoyance blocker</span><span>Blocks Facebook a nnoyances</span><span>15 March 14 - 10:31</span></li> 186 <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>
133 <li><input type='checkbox' id="annoyance-youtube"/><label for= "annoyance-youtube"></label><span>Facebook annoyance blocker</span><span>Blocks Facebook annoyances</span><span>15 March 14 - 10:31</span></li> 187 <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>
134 <li><input type='checkbox' id="own-list"/><label for="own-list "></label><span>Own blocking list</span><span>Your own blocking list</span><span ><a href="#">edit your blocking list</a></span></li> 188 <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>
135 </ul> 189 </ul>
136 <hr class=""/> 190 <div class="controls">
137 <div class="controls"> 191 <button>
138 <div class="button"> 192 <span class="icon icon-add"></span><span class="i18n_options _blockingList_add"></span>
139 <span class="icon icon-add"></span><span class="i18n_options _blockingList_add text-blue"></span> 193 </button>
140 </div> 194 <button>
141 <div class="button"> 195 <span class="icon icon-update"></span><span class="i18n_opti ons_blockingList_update"></span>
142 <span class="icon icon-update"></span><span class="i18n_opti ons_blockingList_update text-blue"></span> 196 </button>
143 </div>
144 </div> 197 </div>
145 </div> 198 </div>
146 <div id="blocking-list-own"> 199 <div id="blocking-list-own">
147 <p class="i18n_options_blockingRules"></p> 200 <p class="i18n_options_blockingRules"></p>
148 <ul class="table list"> 201 <ul class="table list">
149 <li><span>zap2it.com##.zc-station-position</span></li> 202 <li><span>zap2it.com##.zc-station-position</span></li>
150 <li><span>downturk.net##.zippo</span></li> 203 <li><span>downturk.net##.zippo</span></li>
151 <li><span>yahoo.com##.y708-promo-middle</span></li> 204 <li><span>yahoo.com##.y708-promo-middle</span></li>
152 <li><span>reflector.com##.yahooboss</span></li> 205 <li><span>reflector.com##.yahooboss</span></li>
153 <li><span>yardbarker.com##.yard_leader</span></li> 206 <li><span>yardbarker.com##.yard_leader</span></li>
154 <li><span>espn.co.uk##.will_hill</span></li> 207 <li><span>espn.co.uk##.will_hill</span></li>
155 <li><span>listverse.com##.wiki</span></li> 208 <li><span>listverse.com##.wiki</span></li>
156 <li><span>planet5d.com##.wp-image-1573</span></li> 209 <li><span>planet5d.com##.wp-image-1573</span></li>
157 <li><span>buzzinn.net##.wpn_finner</span></li> 210 <li><span>buzzinn.net##.wpn_finner</span></li>
158 <li><span>talkers.com##.wpss_slideshow</span></li> 211 <li><span>talkers.com##.wpss_slideshow</span></li>
159 </ul> 212 </ul>
160 <div class="controls" style="margin: 0px;"> 213 <div class="controls" style="margin: 0px;">
161 <input type="text" placeholder="add your blocking rule here"/> 214 <input type="text" placeholder="add your blocking rule here"/>
162 <div class="input-control"> 215 <div class="input-control">
163 <span class="input-separator"></span> 216 <span class="input-separator"></span>
164 <span class="i18n_options_btn_add input-btn-text"></span> 217 <span class="i18n_options_button_add input-button-text"></sp an>
165 <span class="icon icon-enter-blue"></span> 218 <span class="icon icon-enter-blue"></span>
166 </div> 219 </div>
167 </div> 220 </div>
168 <div class="controls button"> 221 <div class="controls">
169 <span class="icon icon-edit"></span> 222 <button>
170 <span class="i18n_options_blockingRules_edit text-blue"></span > 223 <span class="icon icon-edit"></span>
171 </div> 224 <span class="i18n_options_blockingRules_edit"></span>
172 </div> 225 </button>
173 </div> 226 </div>
174 </div> 227 </div>
175 </div> 228 </div>
229 </div>
230 </div>
231
232 <!-- Help tab content -->
176 <div id="content-help"> 233 <div id="content-help">
177 <h1>1. <span class="i18n_options_faq"></span></h1> 234 <h1 class="i18n_options_faq_title"></h1>
Thomas Greiner 2015/01/22 17:56:30 No need to do manual enumeration. Just use <ol> or
saroyanm 2015/01/23 18:18:39 Done.
178 <hr />
179 <p class="i18n_options_faq_description"></p> 235 <p class="i18n_options_faq_description"></p>
180 <p> 236 <p>
181 <span class="icon icon-arrow"></span> 237 <a class="i18n_options_faq_title" href="#" target="_blank"></a>
Thomas Greiner 2015/01/22 17:56:30 This can be added using the "::before" pseudo elem
saroyanm 2015/01/23 18:18:39 Done.
182 <a class="i18n_options_faq_link text-blue" href="#" target="_blank" ></a>
183 </p> 238 </p>
184 <h1>2. <span class="i18n_options_forum"></span></h1> 239 <h1 class="i18n_options_forum_title"></h1>
185 <hr />
186 <p class="i18n_options_forum_description"></p> 240 <p class="i18n_options_forum_description"></p>
187 <p> 241 <p>
188 <span class="icon icon-arrow"></span> 242 <a class="i18n_options_forum_link" href="#" target="_blank"></a>
189 <a class="i18n_options_forum_link text-blue" href="#" target="_blan k"></a>
190 </p> 243 </p>
191 <h1>3. <span class="i18n_options_media"></span></h1> 244 <h1 class="i18n_options_media_title"></h1>
192 <hr />
193 <p class="i18n_options_media_description"></p> 245 <p class="i18n_options_media_description"></p>
194 <p> 246 <p>
195 <span class="icon icon-arrow"></span> 247 <a href="#" target="_blank">Twitter</a>
196 <a class="text-blue" href="#" target="_blank">Twitter</a> 248 <a href="#" target="_blank">Facebook</a>
197 <span class="icon icon-arrow"></span> 249 <a href="#" target="_blank">Google+</a>
198 <a class="text-blue" href="#" target="_blank">Facebook</a>
199 <span class="icon icon-arrow"></span>
200 <a class="text-blue" href="#" target="_blank">Google+</a>
201 </p> 250 </p>
202 </div> 251 </div>
203 </div> 252 </div>
204 </div> 253 </div>
205 <div id="modal" style="display: block;"> 254
206 <div> 255 <!-- Dialog -->
Thomas Greiner 2015/01/22 17:56:30 We use two spaces for indentation.
saroyanm 2015/01/23 18:18:39 Done.
207 <div class="header"> 256 <div id="dialog">
Thomas Greiner 2015/01/22 17:56:30 Use the <header> element instead to stick to stand
saroyanm 2015/01/23 18:18:39 Done.
257 <header>
258 <span id="dialog-title">
259 <span id="dialog-title-customlist" class="i18n_options_dialog_customli st_title"></span>
260 <span id="dialog-title-language" class="i18n_options_dialog_language_t itle"></span>
261 </span>
262 <button id="dialog-close" class="i18n_options_close"></button>
263 </header>
264 <div id="dialog-body" class="content">
265 <!-- Add other website language: Dialog -->
266 <div id="dialog-content-language" class="dialog-content">
267 <div class="dialog-content-block">
268 <h3 class="i18n_options_dialog_language_added"></h3>
269 <ul id="blocking-languages-dialog-table" class="table list">
270 <template>
271 <span class="display"></span>
272 </template>
273 </ul>
274 </div>
275 <div id="other-language" class="dialog-content-block">
276 <h3 class="i18n_options_dialog_language_other"></h3>
208 <div> 277 <div>
209 <div> 278 <input type="search" id="find-language" />
210 <span id="modal-title"></span> 279 </div>
Thomas Greiner 2015/01/22 17:56:30 This structure is quite confusing and looks somewh
saroyanm 2015/01/23 18:18:39 Thanks, should be better now.
211 </div> 280 <ul id="all-lang-table" class="table list">
212 <div class="close-wrapper"> 281 <template>
213 <span class="separator"></span> 282 <button class="button-add control">
Thomas Greiner 2015/01/22 17:56:30 I guess this can be achieved using a border.
saroyanm 2015/01/23 18:18:39 Done.
214 <div class="button" id="modal-close"> 283 +<span></span>
215 <span class="icon icon-close"></span> 284 </button>
216 <span class="i18n_options_close close"></span> 285 <span class="display"></span>
217 </div> 286 </template>
218 </div> 287 </ul>
219 </div> 288 </div>
220 </div> 289 </div>
221 <div class="content" id="modal-content"> 290 <!-- Add other blocking list: Dialog -->
Thomas Greiner 2015/01/22 17:56:30 What about the dialog for "abp:subscribe" links? I
saroyanm 2015/01/23 18:18:39 I thought it should be same dialog. Can you pleas
Thomas Greiner 2015/01/26 18:29:17 I asked Sven to attach it to the issue description
222 <div style="display: none;" id="blocking-languages-modal" data-title ="options_modal_language_title"> 291 <div id="dialog-content-customlist" class="dialog-content">
Thomas Greiner 2015/01/22 17:56:30 What do you need the "data-title" attribute here f
saroyanm 2015/01/23 18:18:39 I'm using that attribute to change the title of mo
Thomas Greiner 2015/01/26 18:29:17 You could achieve the same effect using a CSS clas
223 <div> 292 <div class="dialog-content-block">
224 <h3 class="i18n_options_modal_language_added"></h3> 293 <h3 class="i18n_options_dialog_customlist_subscription_title"></h3>
225 <ul class="table list" id="blocking-languages-modal-table"></ul> 294 <div>
226 </div> 295 <input id="blockingList-textbox" type="text" placeholder="www.exam ple.com/blockinglist.txt" />
227 <div id="other-language"> 296 </div>
228 <h3 class="i18n_options_modal_language_other"></h3> 297 <div id="import-blockingList-button" class="button-wrapper">
229 <div> 298 <span class="icon icon-arrow"></span>
230 <input type="text" placeholder="find language" id="find-langua ge" /> 299 <span class="i18n_options_dialog_customlist_import"></span>
231 </div> 300 </div>
232 <ul class="table list" id="all-lang-table"></ul> 301 </div>
233 </div> 302 <div class="dialog-content-block">
234 </div> 303 <h3 class="i18n_options_dialog_edit_own_list"></h3>
235 <div style="display: none;" id="further-blocking-modal" data-title=" options_modal_blocklist_title"> 304 <div id="edit-ownBlockingList-button" class="button-wrapper">
236 <div> 305 <span class="icon icon-arrow"></span>
237 <h3 class="i18n_options_modal_blocklist_subscription_title"></h3 > 306 <span class="i18n_options_dialog_create_own_list"></span>
238 <div>
239 <input id="blockingList-textbox" type="text" placeholder="www. yourURL.com/blockinglist.txt" />
240 </div>
241 <div class="btn-wrapper" id="import-blockingList-btn">
242 <span class="icon icon-arrow"></span>
243 <span class="i18n_options_modal_blocklist_import text-blue"></ span>
244 </div>
245 </div>
246 <div>
247 <h3 class="i18n_options_modal_edit_own_list"></h3>
248 <div class="btn-wrapper" id="edit-ownBlockingList-btn">
249 <span class="icon icon-arrow"></span>
250 <span class="i18n_options_modal_create_own_list text-blue"></s pan>
251 </div>
252 </div>
253 </div> 307 </div>
254 </div> 308 </div>
255 </div> 309 </div>
256 </div> 310 </div>
311 </div>
257 </body> 312 </body>
258 </html> 313 </html>
LEFTRIGHT

Powered by Google App Engine
This is Rietveld