1 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
---|
2 | <html>
|
---|
3 | <head>
|
---|
4 | <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
|
---|
5 | <title>DFD0055 - Protótipo de tela: expresso-admin</title>
|
---|
6 | <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/ui-lightness/jquery-ui.css" type="text/css" media="screen" />
|
---|
7 |
|
---|
8 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
|
---|
9 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.js"></script>
|
---|
10 |
|
---|
11 |
|
---|
12 | <style>
|
---|
13 | body { font-size:11px;}
|
---|
14 | fieldset, div {margin:0;}
|
---|
15 | .ui-autocomplete-input { height:22px; width:200px; margin-right:-1px; }
|
---|
16 | #wrap-progressbar { height:22px; width:122px; float:left; }
|
---|
17 | #wrap-progressbar #inner-progressbar { text-align:center; width:100px; }
|
---|
18 | #wrap-progressbar #inner-progressbar span { font-size:10px; line-height:12px; }
|
---|
19 | #wrap-progressbar #inner-progressbar #progressbar { width:100px; height:10px; }
|
---|
20 | .clear {clear:both;}
|
---|
21 | #fieldset1 label {width:95px;display:inline-block;}
|
---|
22 | fieldset { border:1px solid #AAA; border-radius:5px; margin:5px;}
|
---|
23 | ul {list-style:none; margin:0; padding:0;}
|
---|
24 |
|
---|
25 | #list-acc-users li, #search-result-users li {margin-right:5px;border-radius:3px;}
|
---|
26 | #list-acc-mails li {margin-right:5px;padding-bottom:4px;border-radius:3px;}
|
---|
27 | #list-acc-users li:hover, #list-acc-mails li:hover, #search-result-users li:hover {background-color:#DDD;}
|
---|
28 | #list-acc-users li span.ui-icon, #list-acc-mails li span.ui-icon, #search-result-users li span.ui-icon {display:none; margin:2px;}
|
---|
29 | #list-acc-users li input, #list-acc-mails li input, #search-result-users li input {margin-top:5px;}
|
---|
30 | #list-acc-users li label, #list-acc-mails li label, #search-result-users li label {margin-top:-5px;}
|
---|
31 | #list-acc-users li:hover span, #list-acc-mails li:hover span, #search-result-users li:hover span {display:inline;}
|
---|
32 | #search-result-users li span.ui-icon {display:none;}
|
---|
33 | .ui-icon {float:right;}
|
---|
34 | #icon-bar1 .ui-icon {float:left; margin:0 3px;}
|
---|
35 | #icon-bar1 span {float:left; margin:2px 3px 0 0;}
|
---|
36 | .ui-icon-trash, .ui-icon-edit, .ui-icon-close, .ui-icon-plus, .ui-icon-pencil {background-color:#EEE;}
|
---|
37 | .ui-icon-trash:hover, .ui-icon-edit:hover, .ui-icon-close:hover, .ui-icon-plus:hover, .ui-icon-pencil:hover {background-color:#BBB;}
|
---|
38 | .ui-autocomplete-input {width:170px;}
|
---|
39 | .ui-accordion .ui-accordion-content{padding:5px;}
|
---|
40 |
|
---|
41 | .foot-note {width:905px; padding:5px;margin-top:20px;border-top:1px solid #ddd;}
|
---|
42 | .acc-list {font-family: "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif; font-size:11px; color:#555; }
|
---|
43 | .acc-list h3{font-family: "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif; font-size:11px; color:#555; margin:0; padding:5px 3px; background-color:#fff;}
|
---|
44 | .acc-list ul{ margin:5px 0;}
|
---|
45 | .acc-list ul li{ border-radius:3px; padding:3px;}
|
---|
46 | .acc-list ul li:hover {background-color:#DDD;}
|
---|
47 | .acc-list ul li.active {background-color:#EB8F00;}
|
---|
48 | .acc-list ul li strong {display:block;}
|
---|
49 | .acc-list ul li em {display:block;}
|
---|
50 |
|
---|
51 | </style>
|
---|
52 |
|
---|
53 | </head>
|
---|
54 | <body>
|
---|
55 |
|
---|
56 | <script type="text/javascript">
|
---|
57 |
|
---|
58 | //nao accordion
|
---|
59 | (function( $ ) {
|
---|
60 | $.widget( "ui.combobox", {
|
---|
61 | _create: function() {
|
---|
62 | var self = this,
|
---|
63 | select = this.element.hide(),
|
---|
64 | selected = select.children( ":selected" ),
|
---|
65 | value = selected.val() ? selected.text() : "";
|
---|
66 | var input = this.input = $( "<input>" )
|
---|
67 | .insertAfter( select )
|
---|
68 | .val( value )
|
---|
69 | .autocomplete({
|
---|
70 | delay: 0,
|
---|
71 | minLength: 0,
|
---|
72 | source: function( request, response ) {
|
---|
73 | var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
|
---|
74 | response( select.children( "option" ).map(function() {
|
---|
75 | var text = $( this ).text();
|
---|
76 | if ( this.value && ( !request.term || matcher.test(text) ) )
|
---|
77 | return {
|
---|
78 | label: text.replace(
|
---|
79 | new RegExp(
|
---|
80 | "(?![^&;]+;)(?!<[^<>]*)(" +
|
---|
81 | $.ui.autocomplete.escapeRegex(request.term) +
|
---|
82 | ")(?![^<>]*>)(?![^&;]+;)", "gi"
|
---|
83 | ), "<strong>$1</strong>" ),
|
---|
84 | value: text,
|
---|
85 | option: this
|
---|
86 | };
|
---|
87 | }) );
|
---|
88 | },
|
---|
89 | select: function( event, ui ) {
|
---|
90 | ui.item.option.selected = true;
|
---|
91 | self._trigger( "selected", event, {
|
---|
92 | item: ui.item.option
|
---|
93 | });
|
---|
94 | },
|
---|
95 | change: function( event, ui ) {
|
---|
96 | if ( !ui.item ) {
|
---|
97 | var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ),
|
---|
98 | valid = false;
|
---|
99 | select.children( "option" ).each(function() {
|
---|
100 | if ( $( this ).text().match( matcher ) ) {
|
---|
101 | this.selected = valid = true;
|
---|
102 | return false;
|
---|
103 | }
|
---|
104 | });
|
---|
105 | if ( !valid ) {
|
---|
106 | // remove invalid value, as it didn't match anything
|
---|
107 | $( this ).val( "" );
|
---|
108 | select.val( "" );
|
---|
109 | input.data( "autocomplete" ).term = "";
|
---|
110 | return false;
|
---|
111 | }
|
---|
112 | }
|
---|
113 | }
|
---|
114 | })
|
---|
115 | .addClass( "ui-widget ui-widget-content ui-corner-left" );
|
---|
116 |
|
---|
117 | input.data( "autocomplete" )._renderItem = function( ul, item ) {
|
---|
118 | return $( "<li></li>" )
|
---|
119 | .data( "item.autocomplete", item )
|
---|
120 | .append( "<a>" + item.label + "</a>" )
|
---|
121 | .appendTo( ul );
|
---|
122 | };
|
---|
123 |
|
---|
124 | this.button = $( "<button type='button'> </button>" )
|
---|
125 | .attr( "tabIndex", -1 )
|
---|
126 | .attr( "title", "Show All Items" )
|
---|
127 | .insertAfter( input )
|
---|
128 | .button({
|
---|
129 | icons: {
|
---|
130 | primary: "ui-icon-triangle-1-s"
|
---|
131 | },
|
---|
132 | text: false
|
---|
133 | })
|
---|
134 | .removeClass( "ui-corner-all" )
|
---|
135 | .addClass( "ui-corner-right ui-button-icon" )
|
---|
136 | .click(function() {
|
---|
137 | // close if already visible
|
---|
138 | if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
|
---|
139 | input.autocomplete( "close" );
|
---|
140 | return;
|
---|
141 | }
|
---|
142 |
|
---|
143 | // work around a bug (likely same cause as #5265)
|
---|
144 | $( this ).blur();
|
---|
145 |
|
---|
146 | // pass empty string as value to search for, displaying all results
|
---|
147 | input.autocomplete( "search", "" );
|
---|
148 | input.focus();
|
---|
149 | });
|
---|
150 | },
|
---|
151 |
|
---|
152 | destroy: function() {
|
---|
153 | this.input.remove();
|
---|
154 | this.button.remove();
|
---|
155 | this.element.show();
|
---|
156 | $.Widget.prototype.destroy.call( this );
|
---|
157 | }
|
---|
158 | });
|
---|
159 | })( jQuery );
|
---|
160 |
|
---|
161 | $(function() {
|
---|
162 |
|
---|
163 | //autocomplete
|
---|
164 | $( "#combobox" ).combobox();
|
---|
165 | //accordion
|
---|
166 | $( "#accordion" ).accordion({ fillSpace: true }).resizable();
|
---|
167 |
|
---|
168 | $( ".button, #input-button1, #input-button2" ).button();
|
---|
169 |
|
---|
170 | //toggle user list
|
---|
171 | var callback1 = function(){ $('#acl1').toggle( 'slide', false, 500 ) };
|
---|
172 | var callback2 = function(){ $('#users1').effect( 'size', { from:{width:430}, to:{ width:665} }, 200 ) };
|
---|
173 | $( ".edit-acl1" ).click(function(){
|
---|
174 | if ($('#users1').css('width') == '665px') {
|
---|
175 | $('#users1').effect( 'size', { from:{width:665}, to:{ width:430} }, 500, callback1 );
|
---|
176 | } else {
|
---|
177 | $('#acl1').toggle( 'slide', {direction:'left'}, 400, callback2 );
|
---|
178 | }
|
---|
179 | });
|
---|
180 | //#toggle user list
|
---|
181 |
|
---|
182 | $( "#progressbar" ).progressbar({
|
---|
183 | value: 37
|
---|
184 | });
|
---|
185 |
|
---|
186 | //toggle icon-bar1-selected
|
---|
187 | $('#list-acc-users li').click(function(){
|
---|
188 | var j =0;
|
---|
189 | $('#list-acc-users input').each(function(){
|
---|
190 | if (this.checked)
|
---|
191 | j++;
|
---|
192 | });
|
---|
193 |
|
---|
194 | if (j > 0) {
|
---|
195 | if ($('#icon-bar1-selected').css('display') == 'none')
|
---|
196 | $('#icon-bar1-selected').effect( 'slide', false, 400 );
|
---|
197 | } else {
|
---|
198 | if ($('#icon-bar1-selected').css('display') != 'none')
|
---|
199 | $('#icon-bar1-selected').toggle( 'slide', false, 400 );
|
---|
200 | }
|
---|
201 | });
|
---|
202 | //#toggle icon-bar1-selected
|
---|
203 |
|
---|
204 | //toggle search result edit
|
---|
205 | $('#input-search').keydown(function() {
|
---|
206 | $('#search-result').css('display','block');
|
---|
207 | });
|
---|
208 | $('#search-result li').click(function(){
|
---|
209 | var i =0;
|
---|
210 | $('#search-result input').each(function(){
|
---|
211 | if (this.checked)
|
---|
212 | i++;
|
---|
213 | });
|
---|
214 |
|
---|
215 | if (i === 1) {
|
---|
216 | $('#search-result-addall').css('display','none');
|
---|
217 | $('#search-result-add').css('display','inline-block');
|
---|
218 | if ($('#acl2').css('display') == 'none') {
|
---|
219 | $('#acl2').effect( 'slide', false, 400 );
|
---|
220 | }
|
---|
221 | } else if (i > 1) {
|
---|
222 | $('#search-result-addall').css('display','inline-block');
|
---|
223 | $('#search-result-add').css('display','none');
|
---|
224 | }
|
---|
225 | });
|
---|
226 | //#toggle search result edit
|
---|
227 | });
|
---|
228 | </script>
|
---|
229 | <div style="width:875px;height:510px;">
|
---|
230 | <div class="acc-list" style="width:190px;height:100%;float:left;border:1px solid #DDD;background-color:#EEE;border-radius:3px;margin-left:1px;">
|
---|
231 | <h3>Contas Compartilhadas</h3>
|
---|
232 | <ul>
|
---|
233 | <li><strong>Mocca Café</strong><em>mocca@compart.org</em></li>
|
---|
234 | <li class="active"><strong>Teste Café</strong><em>conta1teste@compart.org</em></li>
|
---|
235 | <li><strong>Capuccino Café</strong><em>capuccino@compart.org</em></li>
|
---|
236 | <li><strong>Expresso Café</strong><em>espresso@compart.org</em></li>
|
---|
237 | </ul>
|
---|
238 | </div>
|
---|
239 | <div style="width:680px;height:100%;float:right;">
|
---|
240 | <div id="accordion">
|
---|
241 | <h3><a href="#">Gerenciar dados conta compartilhada: <em>Teste Café</em></a></h3>
|
---|
242 | <div>
|
---|
243 |
|
---|
244 | <div style="width:665px;">
|
---|
245 | <fieldset id="fieldset1">
|
---|
246 | <legend>Dados da conta</legend>
|
---|
247 | <!-- coisa tensa -->
|
---|
248 | <div class="ui-widget">
|
---|
249 | <label>Organização: </label>
|
---|
250 | <select id="combobox">
|
---|
251 | <option value="org">+ PROGNUS</option>
|
---|
252 | <option value="org1">org1</option>
|
---|
253 | <option value="org2">org2</option>
|
---|
254 | <option value="org3">org3</option>
|
---|
255 | <option value="org4">org4</option>
|
---|
256 | </select>
|
---|
257 | </div>
|
---|
258 | <div style="float:left;">
|
---|
259 | <div>
|
---|
260 | <label>Nome da conta: </label>
|
---|
261 | <input class="ui-corner-all" id="input-nome" type="text" style="width:198px" value="Teste Café"/>
|
---|
262 | </div>
|
---|
263 | <div>
|
---|
264 | <label>Descrição: </label>
|
---|
265 | <input class="ui-corner-all" id="input-descricao" type="text" style="width:198px" value="Teste de conta com café"/>
|
---|
266 | </div>
|
---|
267 | <div>
|
---|
268 | <div style="float:left; margin-right:10px">
|
---|
269 | <label>Cota de email: </label>
|
---|
270 | <input class="ui-corner-all" id="input-descricao" value="700" type="text" style="width:50px;text-align:right;"/><span>MB</span>
|
---|
271 | </div>
|
---|
272 | <div id="wrap-progressbar">
|
---|
273 | <div id="inner-progressbar">
|
---|
274 | <span><strong>204MB</strong> utilizados</span>
|
---|
275 | <div id="progressbar"></div>
|
---|
276 | </div>
|
---|
277 | <span id="btn-trash1" class="ui-icon ui-icon-trash ui-corner-all" style="margin-top: -17px;"></span>
|
---|
278 | </div>
|
---|
279 | <!--<div style="float:right; margin-right:5px"><input id="input-button2" type="button" value="Esvaziar INBOX"/></div>-->
|
---|
280 | <div class="clear"></div>
|
---|
281 | </div>
|
---|
282 | <div>
|
---|
283 | <div>
|
---|
284 | <input type="checkbox" name="opcao" value="op1" checked="checked"id="opcao1"/> <label for="opcao1" style="width:200px;">Ativar conta</label>
|
---|
285 | </div>
|
---|
286 | <div>
|
---|
287 | <input type="checkbox" name="opcao" value="op1" id="opcao2"/> <label for="opca2" style="width:200px;">Omitir do catálogo</label>
|
---|
288 | </div>
|
---|
289 | </div>
|
---|
290 | </div>
|
---|
291 | <fieldset style="float:right; width:275px; height:100px;">
|
---|
292 | <label>Email da conta: </label>
|
---|
293 | <input class="ui-corner-all" id="input-email" type="text" style="width:130px"/>
|
---|
294 | <span style="margin:5px 18px 0 0" class="ui-icon ui-icon-plus ui-corner-all"></span>
|
---|
295 | <ul id="list-acc-mails" style="height:70px; overflow:auto;">
|
---|
296 | <li><em>conta1teste@compart.org</em><span class="ui-icon ui-icon-close ui-corner-all"></span></label></li>
|
---|
297 | <li><em>teste2@contacompart.teste.gov</em><span class="ui-icon ui-icon-close ui-corner-all"></span></label></li>
|
---|
298 | <li><em>teste33@contacompart.teste.gov</em><span class="ui-icon ui-icon-close ui-corner-all"></span></label></li>
|
---|
299 | <li><em>teste14@contacompart.teste.gov</em><span class="ui-icon ui-icon-close ui-corner-all"></span></label></li>
|
---|
300 | <li><em>teste5@contacompart.teste.gov</em><span class="ui-icon ui-icon-close ui-corner-all"></span></label></li>
|
---|
301 | <li><em>teste23@contacompart.teste.gov</em><span class="ui-icon ui-icon-close ui-corner-all"></span></label></li>
|
---|
302 | </ul>
|
---|
303 | <div class="clear"></div>
|
---|
304 | </fieldset>
|
---|
305 | </fieldset>
|
---|
306 | </div>
|
---|
307 | <div class="clear"></div>
|
---|
308 | <div id="users1" style="height:173px;width:665px;float:left;">
|
---|
309 | <fieldset style="height:100%;">
|
---|
310 | <legend>Usuários da conta</legend>
|
---|
311 | <ul id="list-acc-users" style="height:160px; overflow:auto;">
|
---|
312 | <li><input type="checkbox" name="opcao" value="op1" id="opcao21"/> <label for="opcao21">Talita Equina da Silva <span class="ui-icon ui-icon-close ui-corner-all"></span><span class="ui-icon ui-icon-pencil edit-acl1 ui-corner-all">Editar prefs</span></label></li>
|
---|
313 | <li><input type="checkbox" name="opcao" value="op1" id="opcao22"/> <label for="opcao22">Random Molusco da Silva <span class="ui-icon ui-icon-close ui-corner-all"></span><span class="ui-icon ui-icon-pencil edit-acl1 ui-corner-all"></span></label></li>
|
---|
314 | <li><input type="checkbox" name="opcao" value="op1" id="opcao23"/> <label for="opcao23">Mano Daltonico dos Santos <span class="ui-icon ui-icon-close ui-corner-all"></span><span class="ui-icon ui-icon-pencil edit-acl1 ui-corner-all"></span></label></li>
|
---|
315 | <li><input type="checkbox" name="opcao" value="op1" id="opcao24"/> <label for="opcao24">Fulano da Silva <span class="ui-icon ui-icon-close ui-corner-all"></span><span class="ui-icon ui-icon-pencil edit-acl1 ui-corner-all"></span></label></li>
|
---|
316 | <li><input type="checkbox" name="opcao" value="op1" id="opcao25"/> <label for="opcao25">Beltrano dos Santos <span class="ui-icon ui-icon-close ui-corner-all"></span><span class="ui-icon ui-icon-pencil edit-acl1 ui-corner-all"></span></label></li>
|
---|
317 | <li><input type="checkbox" name="opcao" value="op1" id="opcao26"/> <label for="opcao26">Fulano da Silva <span class="ui-icon ui-icon-close ui-corner-all"></span><span class="ui-icon ui-icon-pencil edit-acl1 ui-corner-all"></span></label></li>
|
---|
318 | <li><input type="checkbox" name="opcao" value="op1" id="opcao21"/> <label for="opcao21">Talita Equina da Silva <span class="ui-icon ui-icon-close ui-corner-all"></span><span class="ui-icon ui-icon-pencil edit-acl1 ui-corner-all"></span></label></li>
|
---|
319 | <li><input type="checkbox" name="opcao" value="op1" id="opcao22"/> <label for="opcao22">Random Molusco da Silva <span class="ui-icon ui-icon-close ui-corner-all"></span><span class="ui-icon ui-icon-pencil edit-acl1 ui-corner-all"></span></label></li>
|
---|
320 | <li><input type="checkbox" name="opcao" value="op1" id="opcao23"/> <label for="opcao23">Mano Daltonico dos Santos <span class="ui-icon ui-icon-close ui-corner-all"></span><span class="ui-icon ui-icon-pencil edit-acl1 ui-corner-all"></span></label></li>
|
---|
321 | <li><input type="checkbox" name="opcao" value="op1" id="opcao24"/> <label for="opcao24">Fulano da Silva <span class="ui-icon ui-icon-close ui-corner-all"></span><span class="ui-icon ui-icon-pencil edit-acl1 ui-corner-all"></span></label></li>
|
---|
322 | <li><input type="checkbox" name="opcao" value="op1" id="opcao25"/> <label for="opcao25">Beltrano dos Santos <span class="ui-icon ui-icon-close ui-corner-all"></span><span class="ui-icon ui-icon-pencil edit-acl1 ui-corner-all"></span></label></li>
|
---|
323 | <li><input type="checkbox" name="opcao" value="op1" id="opcao26"/> <label for="opcao26">Fulano da Silva <span class="ui-icon ui-icon-close ui-corner-all"></span><span class="ui-icon ui-icon-pencil edit-acl1 ui-corner-all"></span></label></li>
|
---|
324 | </ul>
|
---|
325 | </fieldset>
|
---|
326 | </div>
|
---|
327 | <div id="acl1" style="height:173px;float:right;display:none;">
|
---|
328 | <fieldset style="width:200px; height:100%;">
|
---|
329 | <legend>Permissões</legend>
|
---|
330 | <ul id="list-acc-users" style="height:173px; width:100px; float:left; overflow:auto;">
|
---|
331 | <li><strong>Gerais</strong></li>
|
---|
332 | <li><input type="checkbox" name="opcao" value="op1" id="opcao21"/> <label for="opcao21">Leitura</label></li>
|
---|
333 | <li><input type="checkbox" name="opcao" value="op1" id="opcao21"/> <label for="opcao21">Exclusão</label></li>
|
---|
334 | <li><input type="checkbox" name="opcao" value="op1" id="opcao21"/> <label for="opcao21">Criação</label></li>
|
---|
335 | <li><input type="checkbox" name="opcao" value="op1" id="opcao21"/> <label for="opcao21">Enviar</label></li>
|
---|
336 | <li><input type="checkbox" name="opcao" value="op1" id="opcao21"/> <label for="opcao21">Salvar</label></li>
|
---|
337 | <li><input type="checkbox" name="opcao" value="op1" id="opcao21"/> <label for="opcao21">Pasta</label></li>
|
---|
338 | <li><input type="checkbox" name="opcao" value="op1" id="opcao21"/> <label for="opcao21">Gerente</label></li>
|
---|
339 | </ul>
|
---|
340 | <ul id="list-acc-users" style="height:133px; width:100px; float:left;overflow:auto;">
|
---|
341 | <li><strong>Agenda</strong></li>
|
---|
342 | <li><input type="checkbox" name="opcao" value="op1" id="opcao21"/> <label for="opcao21">Leitura</label></li>
|
---|
343 | <li><input type="checkbox" name="opcao" value="op1" id="opcao21"/> <label for="opcao21">Adicionar</label></li>
|
---|
344 | <li><input type="checkbox" name="opcao" value="op1" id="opcao21"/> <label for="opcao21">Editar</label></li>
|
---|
345 | <li><input type="checkbox" name="opcao" value="op1" id="opcao21"/> <label for="opcao21">Excluir</label></li>
|
---|
346 | <li><input type="checkbox" name="opcao" value="op1" id="opcao21"/> <label for="opcao21">Privado</label></li>
|
---|
347 | </ul>
|
---|
348 | <span class="button" style="margin-left:30px;">Aplicar</span>
|
---|
349 | </fieldset>
|
---|
350 | </div>
|
---|
351 | <div id="icon-bar1" style="width:665px;margin-top:200px;">
|
---|
352 | <fieldset id="icon-bar1-selected" style="float:left;width:150px;display:none;">
|
---|
353 | <legend>Seleção:</legend>
|
---|
354 | <span class="ui-icon ui-icon-pencil ui-corner-all"></span><span>Editar</span>
|
---|
355 | <span class="ui-icon ui-icon-trash ui-corner-all"></span><span>Excluir</span>
|
---|
356 | </fieldset>
|
---|
357 | <fieldset style="float:left;width:150px;">
|
---|
358 | <legend>Novo:</legend>
|
---|
359 | <span class="ui-icon ui-icon-plus ui-corner-all"></span><span>Adicionar usuário</span>
|
---|
360 | </fieldset>
|
---|
361 | <div style="float:right; margin-top:20px;">
|
---|
362 | <span class="button">Aplicar</span><span class="button">Cancelar</span>
|
---|
363 | </div>
|
---|
364 | </div>
|
---|
365 | </div>
|
---|
366 |
|
---|
367 |
|
---|
368 | <!-- acordion aba 2 -->
|
---|
369 | <h3><a href="#">Adicionar usuários na conta compartilhada: <em>Teste Café</em></a></h3>
|
---|
370 | <div>
|
---|
371 | <div style="width:220px;">
|
---|
372 | <input class="ui-corner-all" id="input-search" type="text" style="width:200px;"/><span class="ui-icon ui-icon-search ui-corner-all" style="margin:5px 0 0 -20px;"></span>
|
---|
373 | </div>
|
---|
374 | <div id="search-result" style="width:320px; float:left; margin:0;background-color:#E4E3EE;border-radius:3px;height:410px;overflow:auto;display:none;">
|
---|
375 | <ul id="search-result-users" style="">
|
---|
376 | <li><input type="checkbox" name="opcao" value="op1" id="opcao511"/> <label for="opcao511">Talita Equina da Silva <span class="ui-icon ui-icon-close edit-acl2 ui-corner-all"></span></label></li>
|
---|
377 | <li><input type="checkbox" name="opcao" value="op1" id="opcao512"/> <label for="opcao512">Random Molusco da Silva <span class="ui-icon ui-icon-close edit-acl2 ui-corner-all"></span></label></li>
|
---|
378 | <li><input type="checkbox" name="opcao" value="op1" id="opcao513"/> <label for="opcao513">Mano Daltonico dos Santos <span class="ui-icon ui-icon-close edit-acl2 ui-corner-all"></span></label></li>
|
---|
379 | <li><input type="checkbox" name="opcao" value="op1" id="opcao514"/> <label for="opcao514">Fulano da Silva <span class="ui-icon ui-icon-close edit-acl2 ui-corner-all"></span></label></li>
|
---|
380 | <li><input type="checkbox" name="opcao" value="op1" id="opcao515"/> <label for="opcao515">Beltrano dos Santos <span class="ui-icon ui-icon-close edit-acl2 ui-corner-all"></span></label></li>
|
---|
381 | <li><input type="checkbox" name="opcao" value="op1" id="opcao516"/> <label for="opcao516">Fulano da Silva <span class="ui-icon ui-icon-close edit-acl2 ui-corner-all"></span></label></li>
|
---|
382 | <li><input type="checkbox" name="opcao" value="op1" id="opcao517"/> <label for="opcao517">Talita Equina da Silva <span class="ui-icon ui-icon-close edit-acl2 ui-corner-all"></span></label></li>
|
---|
383 | <li><input type="checkbox" name="opcao" value="op1" id="opcao518"/> <label for="opcao518">Random Molusco da Silva <span class="ui-icon ui-icon-close edit-acl2 ui-corner-all"></span></label></li>
|
---|
384 | <li><input type="checkbox" name="opcao" value="op1" id="opcao519"/> <label for="opcao519">Mano Daltonico dos Santos <span class="ui-icon ui-icon-close edit-acl2 ui-corner-all"></span></label></li>
|
---|
385 | <li><input type="checkbox" name="opcao" value="op1" id="opcao521"/> <label for="opcao521">Fulano da Silva <span class="ui-icon ui-icon-close edit-acl2 ui-corner-all"></span></label></li>
|
---|
386 | <li><input type="checkbox" name="opcao" value="op1" id="opcao522"/> <label for="opcao522">Beltrano dos Santos <span class="ui-icon ui-icon-close edit-acl2 ui-corner-all"></span></span></label></li>
|
---|
387 | <li><input type="checkbox" name="opcao" value="op1" id="opcao523"/> <label for="opcao523">Fulano da Silva <span class="ui-icon ui-icon-close edit-acl2 ui-corner-all"></span></label></li>
|
---|
388 | </ul>
|
---|
389 | </div>
|
---|
390 | <div id="acl2" style="width:300px; float:right; display:none;">
|
---|
391 | <fieldset>
|
---|
392 | <legend>Permissões</legend>
|
---|
393 | <ul id="list-acc-users" style="">
|
---|
394 | <li><input type="checkbox" name="opcao" value="op1" id="opcao21"/> <label for="opcao21">Leitura</label></li>
|
---|
395 | <li><input type="checkbox" name="opcao" value="op1" id="opcao21"/> <label for="opcao21">Exclusão</label></li>
|
---|
396 | <li><input type="checkbox" name="opcao" value="op1" id="opcao21"/> <label for="opcao21">Criação</label></li>
|
---|
397 | <li><input type="checkbox" name="opcao" value="op1" id="opcao21"/> <label for="opcao21">Enviar</label></li>
|
---|
398 | <li><input type="checkbox" name="opcao" value="op1" id="opcao21"/> <label for="opcao21">Salvar</label></li>
|
---|
399 | <li><input type="checkbox" name="opcao" value="op1" id="opcao21"/> <label for="opcao21">Pasta</label></li>
|
---|
400 | <li><input type="checkbox" name="opcao" value="op1" id="opcao21"/> <label for="opcao21">Gerente</label></li>
|
---|
401 | </ul>
|
---|
402 | </fieldset>
|
---|
403 | <fieldset>
|
---|
404 | <legend>Agenda de Eventos</legend>
|
---|
405 | <ul id="list-acc-users" style="">
|
---|
406 | <li><input type="checkbox" name="opcao" value="op1" id="opcao21"/> <label for="opcao21">Leitura</label></li>
|
---|
407 | <li><input type="checkbox" name="opcao" value="op1" id="opcao21"/> <label for="opcao21">Adicionar</label></li>
|
---|
408 | <li><input type="checkbox" name="opcao" value="op1" id="opcao21"/> <label for="opcao21">Editar</label></li>
|
---|
409 | <li><input type="checkbox" name="opcao" value="op1" id="opcao21"/> <label for="opcao21">Excluir</label></li>
|
---|
410 | <li><input type="checkbox" name="opcao" value="op1" id="opcao21"/> <label for="opcao21">Privado</label></li>
|
---|
411 | </ul>
|
---|
412 | </fieldset>
|
---|
413 | <div style="text-align:right;margin:3px;">
|
---|
414 | <span id="search-result-add" class="button">Adicionar</span>
|
---|
415 | <span id="search-result-addall" class="button">Adicionar todos</span>
|
---|
416 | <span id="search-result-cancel" class="button">Cancelar</span>
|
---|
417 | </div>
|
---|
418 | </div>
|
---|
419 | </div>
|
---|
420 | </div> <!--acordion-->
|
---|
421 | </div>
|
---|
422 | </div>
|
---|
423 |
|
---|
424 | <div class="clear"></div>
|
---|
425 | <div class="foot-note">
|
---|
426 | <span>*<small>Os protótipos de tela apresentados limitam-se a mera apresentação da estrutura e disposição dos elementos na tela,
|
---|
427 | não devendo servir, portanto, para definição de características específicas do layout como ícones, cores e efeitos de eventos disparados.
|
---|
428 | A presença dos ícones nestes protótipos não pressupõe a autorização de uso no Expresso Livre. </small></span>
|
---|
429 | </div>
|
---|
430 | </body>
|
---|
431 | </html> |
---|