Mercurial Hosting > nabble

comparison src/nabble/view/naml/ui_components.naml @ 0:7ecd1a4ef557

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add content
author Franklin Schmidt <fschmidt@gmail.com>
date Thu, 21 Mar 2019 19:15:52 -0600
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:7ecd1a4ef557
1 ==========================================
2 VERTICAL TAB CONTROL
3 ==========================================
4
5 <macro name="vertical_tab_control" dot_parameter="vertical_tabs">
6 <n.put_in_head.>
7 <style type="text/css">
8 table.vertical-control {
9 margin: 1em 0;
10 width:100%;
11 border-collapse:collapse;
12 }
13 table.vertical-control td {
14 padding:0;
15 vertical-align:top;
16 }
17 table.vertical-control td.details {
18 width:90%;
19 padding:.5em 1em;
20 }
21 ul.vertical-control {
22 width:100%;
23 list-style-type:none;
24 padding:0;
25 margin:0;
26 }
27 ul.vertical-control li {
28 padding: .3em;
29 white-space:nowrap;
30 }
31 ul.vertical-control li.selected {
32 border-top-left-radius:5px;
33 border-bottom-left-radius:5px;
34 -moz-border-radius-topleft:5px;
35 -moz-border-radius-bottomleft:5px;
36 }
37 </style>
38 </n.put_in_head.>
39 <table class="vertical-control">
40 <tr>
41 <td>
42 <ul class="vertical-control">
43 <n.vertical_tab.>
44 <n.vertical_tabs/>
45 </n.vertical_tab.>
46 </ul>
47 </td>
48 <td class="details shaded-bg-color">
49 <n.vertical_tabs/>
50 </td>
51 </tr>
52 </table>
53 </macro>
54
55 <macro name="vertical_tab" dot_parameter="do">
56 <n.do/>
57 </macro>
58
59 <macro name="is_vertical_tab">
60 <n.is_in_command name="vertical_tab" />
61 </macro>
62
63 <macro name="add_vertical_tab" dot_parameter="text" parameters="url,selected,details,icon,style">
64 <n.if.is_vertical_tab>
65 <then>
66 <n.if.selected>
67 <then><li class="selected shaded-bg-color" style="[n.style/]"><n.hide_null.icon/> <n.truncate. size="25"><n.text/></n.truncate.></li></then>
68 <else><li style="[n.style/]"><n.hide_null.icon/> <a href="[n.url/]"><n.truncate. size="25"><n.text/></n.truncate.></a></li></else>
69 </n.if.selected>
70 </then>
71 <else>
72 <n.if.selected>
73 <then.details/>
74 </n.if.selected>
75 </else>
76 </n.if.is_vertical_tab>
77 </macro>
78
79 ==========================================
80 HORIZONTAL TAB CONTROL
81 ==========================================
82
83 <macro name="horizontal_tab_control" dot_parameter="horizontal_tabs" parameters="is_live">
84 <n.put_in_head.>
85 <script src="[n.tabs_library_path/]" type="text/javascript"></script>
86 <style type="text/css">
87 div.tab-contents {
88 margin-top:1.5em;
89 }
90 </style>
91 </n.put_in_head.>
92 <script type="text/javascript">
93 NabbleTabs.startTabControl(<n.hide_null.is_live/>);
94 <n.horizontal_tab.><n.horizontal_tabs/></n.horizontal_tab.>
95 NabbleTabs.endTabControl();
96 </script>
97 <n.if.is_null.is_live>
98 <then>
99 <div class="tab-contents">
100 <n.horizontal_tabs/>
101 </div>
102 </then>
103 </n.if.is_null.is_live>
104 </macro>
105
106 <macro name="horizontal_tab" dot_parameter="do">
107 <n.do/>
108 </macro>
109
110 <macro name="is_horizontal_tab">
111 <n.is_in_command name="horizontal_tab" />
112 </macro>
113
114 <macro name="add_horizontal_tab" parameters="url,text,selected,details">
115 <n.if.is_horizontal_tab>
116 <then>
117 NabbleTabs.addTab('<n.url/>', '<n.javascript_string_encode.text/>', <n.selected/>);
118 </then>
119 <else>
120 <n.if.selected>
121 <then.details/>
122 </n.if.selected>
123 </else>
124 </n.if.is_horizontal_tab>
125 </macro>
126
127 <macro name="add_live_horizontal_tab" parameters="element_id,text,selected,details,onclick">
128 <n.if.is_horizontal_tab>
129 <then>
130 <n.if.is_null.onclick>
131 <then>NabbleTabs.addLiveTab('<n.element_id/>', '<n.javascript_string_encode.text/>', <n.selected/>);</then>
132 <else>NabbleTabs.addLiveTab('<n.element_id/>', '<n.javascript_string_encode.text/>', <n.selected/>, <n.onclick/>);</else>
133 </n.if.is_null.onclick>
134 </then>
135 <else.details/>
136 </n.if.is_horizontal_tab>
137 </macro>
138
139 ==========================================
140 SLIDER
141 ==========================================
142
143 <macro name="slider" dot_parameter="contents" requires="html">
144 <n.put_in_head.>
145 <script src="/util/nabblegallery-1.2.js"></script>
146 </n.put_in_head.>
147 <n.slider_counter.increment/>
148 <div id="slider[n.slider_id/]" style="width:100%">
149 <table id="gallery-view[n.slider_id/]">
150 <tr>
151 <td style="width:20px">
152 <img id="prev[n.slider_id/]" src="/images/left.png" style="cursor:pointer;display:none"/>
153 </td>
154 <td>
155 <div id="gallery[n.slider_id/]" style="width:500px;overflow-x:hidden;position:relative">
156 <table id="images[n.slider_id/]" style="border-collapse:collapse;margin-top:.7em;">
157 <tr style="vertical-align:top">
158 <n.contents/>
159 </tr>
160 </table>
161 </div>
162 </td>
163 <td style="width:20px">
164 <img id="next[n.slider_id/]" src="/images/right.png" style="cursor:pointer"/>
165 </td>
166 </tr>
167 </table>
168 </div>
169 <script type="text/javascript">
170 function update<n.slider_id/>() {
171 fixGalleryWidth(<n.slider_id/>);
172 };
173 galleryReady(<n.slider_id/>);
174 $(window).load(update<n.slider_id/>).resize(update<n.slider_id/>);
175 </script>
176 </macro>
177
178 <macro name="slider_id">
179 <n.slider_counter.value/>
180 </macro>
181
182 <macro name="slider_counter" dot_parameter="do">
183 <n.counter name="slider" do="[n.do/]" />
184 </macro>
185
186 ==========================================
187 TOOLTIP
188 ==========================================
189
190 <macro name="tooltip" dot_parameter="contents" parameters="use_title, delay, position">
191 <n.if.not.is_ajax>
192 <then.put_in_head.compress.tooltip_head/>
193 </n.if.not.is_ajax>
194 <n.set_var. name='tag_id'>tooltip<n.random max="99999"/></n.set_var.>
195 <div id="[n.var name='tag_id'/]" class="nabble-tooltip" use_title="[n.null_to_false.use_title/]">
196 <n.hide_null.contents/>
197 <div class="nabble-tooltip-arrow">
198 <div class="d1">&diams;</div>
199 <div class="d2">&diams;</div>
200 </div>
201 </div>
202 <script type="text/javascript">
203 Nabble.startTooltip(Nabble.get('<n.var name='tag_id'/>'), '<n.default to="up" text="[n.position/]"/>', <n.default to="400" text="[n.delay/]"/>);
204 </script>
205 </macro>
206
207 <macro name="tooltip_head">
208 <n.tooltip_css/>
209 <n.tooltip_js/>
210 </macro>
211
212 <macro name="tooltip_small_row" dot_parameter="contents">
213 <div class="nabble-tooltip-small-row second-font">
214 <n.contents/>
215 </div>
216 </macro>
217
218 <macro name="tooltip_css">
219 <style type="text/css">
220 div.nabble-tooltip,
221 div.nabble-tooltip * {
222 color: #EEE;
223 font-weight:bold;
224 }
225 div.nabble-tooltip {
226 background: #000;
227 font-size:90%;
228 line-height:normal;
229 display: none;
230 position: absolute;
231 z-index: 88888;
232 padding: .5em;
233 border: 1px solid #FFF;
234 white-space:normal;
235 -moz-border-radius: 3px;
236 -webkit-border-radius: 3px;
237 border-radius: 3px;
238 }
239 div.nabble-tooltip-small-row,
240 div.nabble-tooltip-small-row * {
241 color:#D0EAF2;
242 }
243 div.nabble-tooltip-small-row {
244 font-size:80%;
245 font-weight:normal;
246 padding-top: .4em;
247 }
248 div.nabble-tooltip-arrow {
249 font: 40px Arial, Sans-serif;
250 line-height:1em;
251 left:15px;
252 position:absolute;
253 bottom:-15px;
254 height:15px;
255 width:30px;
256 overflow:hidden;
257 }
258 div.nabble-tooltip-arrow div {
259 position:absolute;
260 }
261 div.nabble-tooltip-arrow div.d1 {
262 top:-22px;
263 color: #FFF;
264 }
265 div.nabble-tooltip-arrow div.d2 {
266 top:-25px;
267 color: #000;
268 }
269 </style>
270 </macro>
271
272 <macro name="tooltip_js">
273 <script type="text/javascript">
274 <![CDATA[
275 Nabble.startTooltip = function(e, position, delay) {
276 if (e.nabbletooltip)
277 return;
278 e.nabbletooltip = true;
279 var $this = $(e);
280 var $arrow = $this.children().last();
281 var $elem = $this.prev();
282 $elem.hover(
283 function() {
284 setTip();
285 setTimer();
286 },
287 function() {
288 stopTimer();
289 $this.hide();
290 }
291 );
292 function setTimer() {
293 $this.showTipTimer = setTimeout(function() {
294 $('div.nabble-tooltip').hide();
295 stopTimer();
296 $this.fadeTo('fast', .8);
297 }, delay);
298 };
299 function stopTimer() {
300 clearInterval($this.showTipTimer);
301 };
302 function setTip(){
303 if ($this.parent().get() != document.body)
304 $(document.body).append($this);
305 var useTitle = $this.attr('use_title') == 'true';
306 if (useTitle) {
307 var title = $elem.attr('title');
308 if (title != '') {
309 $arrow.remove();
310 $this.html(title);
311 $elem.attr('title','');
312 $this.append($arrow);
313 }
314 }
315 var win = $(window).width();
316 if (position == 'up') {
317 var w = $this.outerWidth();
318 if (w > 250) {
319 w = 250;
320 $this.width(w);
321 }
322 var xMid = $elem.offset().left + $elem.outerWidth()/2;
323 var xTip = xMid - w/2;
324 if (xTip+w > win-5)
325 xTip = win-w-5;
326 if (xTip < 0)
327 xTip = 0;
328 var xArrow = xMid-xTip-11;
329 var yTip = $elem.offset().top-$this.outerHeight()-12;
330 $arrow.css('left', xArrow);
331 $this.css({'top' : yTip, 'left' : xTip});
332 } else if (position == 'right') {
333 var h = $this.outerHeight();
334 var yMid = $elem.offset().top + $elem.outerHeight()/2;
335 var yTip = yMid - h/2;
336 var xTip = $elem.offset().left + $elem.outerWidth() + 10;
337 $arrow.width(8).height(24).css({bottom:0,left:-8});
338 var yArrow = (h - 24)/2;
339 $arrow.css({top:yArrow});
340 var $d1 = $arrow.children().first();
341 var $d2 = $arrow.children().last();
342 $d1.css({top:-11});
343 $d2.css({top:-11,left:1});
344 $this.css({'top' : yTip, 'left' : xTip});
345 }
346 };
347 };
348 ]]>
349 </script>
350 </macro>
351
352 ==========================================
353 CUSTOM DROPDOWN
354 ==========================================
355
356 <macro name="custom_dropdown" parameters="clickable_id, panel_id">
357 <n.put_in_head.>
358 <script type="text/javascript">
359 <![CDATA[
360 var ddPanels = [];
361 Nabble.asDropdown = function(clickableId, panelId) {
362 ddPanels.push(panelId);
363 $(document).ready(function() {
364 var $clickable = $('#'+clickableId);
365 var $panel = $('#'+panelId);
366 $panel.css({
367 position:'absolute',
368 zIndex: 5555,
369 display:'none'
370 });
371 $clickable.addClass('custom-dropdown');
372 $clickable.click(function(e) {
373 e.stopPropagation();
374 var isVisible = $panel.css('display') != 'none';
375 closeDropdowns();
376 if (!isVisible) {
377 var left = $(this).position().left - 5;
378 var w = $panel.outerWidth();
379 var win = $(window).width() - 10;
380 if (left+w > win)
381 left = win - w -10;
382 left = left < 0? 0 : left;
383 $panel.css('left', left);
384 $panel.show();
385 }
386 });
387 $(document).click(function(e) {
388 if ($(e.target).hasClass('custom-dropdown'))
389 return;
390 closeDropdowns();
391 });
392 function closeDropdowns() {
393 for (var i=0;i<ddPanels.length;i++)
394 $('#'+ddPanels[i]).hide();
395 };
396 });
397 };
398 ]]>
399 </script>
400 </n.put_in_head.>
401 <script type="text/javascript">
402 Nabble.asDropdown('<n.clickable_id/>', '<n.panel_id/>');
403 </script>
404 </macro>