[MERGE] forward port of branch 8.0 up to e883193
[odoo/odoo.git] / addons / website / static / src / xml / website.editor.xml
1 <templates id="template" xml:space="preserve">
2     <t t-name="website.editorbar">
3         <div id="website-top-navbar" class="navbar navbar-inverse navbar-fixed-top hidden-xs" style="display: none;">
4             <div class="navbar-header" id="website-top-edit">
5                 <ul class="nav navbar-nav js_editor_placeholder pull-right">
6                 </ul>
7                 <form class="navbar-form text-muted">
8                     <button type="button" data-action="save"
9                             class="btn btn-primary btn-xs">Save</button>
10                     or
11                     <a href="#" data-action="cancel" class="btn btn-link btn-xs">Discard</a>
12                 </form>
13             </div>
14         </div>
15     </t>
16
17     <t t-name="website.editor.dialog">
18         <div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
19             <div class="modal-dialog">
20                 <div class="modal-content">
21                     <div class="modal-header">
22                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
23                         <h3 class="modal-title"><t t-esc="title"/></h3>
24                     </div>
25                     <div class="modal-body"><t t-raw="__content__"/></div>
26                     <div class="modal-footer">
27                         <button type="button" class="btn btn-primary save">Save</button>
28                         <button type="button" class="btn hidden wait" disabled="disabled"/>
29                         or
30                         <a href="#" data-dismiss="modal" aria-hidden="true">Discard</a>
31                     </div>
32                 </div>
33             </div>
34         </div>
35     </t>
36     <t t-name="website.editor.dialog.link.footer-button">
37         <button type="button" class="btn pull-left remove btn-danger">Remove Link</button>
38     </t>
39     <t t-name="website.editor.dialog.link">
40         <t t-call="website.editor.dialog">
41             <t t-set="title">Link to</t>
42             <form>
43                 <ul class="list-group">
44                     <li class="list-group-item form-group active">
45                         <h4 class="list-group-item-heading">
46                             <label for="link-page" class="control-label">
47                                 Page
48                             </label>
49                         </h4>
50                         <input class="page form-control url-source"
51                                id="link-page" type="hidden"/>
52                     </li>
53                     <li class="list-group-item form-group clearfix">
54                         <div class="pull-right" style="display: none;">
55                             <label>
56                                 <input type="checkbox" class="window-new"/>
57                                 Open in new window
58                             </label>
59                         </div>
60                         <h4 class="list-group-item-heading">
61                             <label for="link-external" class="control-label">
62                                 URL or Email Address
63                             </label>
64                         </h4>
65                         <input type="text" class="form-control url email-address url-source"
66                                id="link-external" placeholder="http://openerp.com"/>
67                     </li>
68                 </ul>
69                 <div class="form-horizontal">
70                     <div class="form-group">
71                         <label for="link-text" class="col-sm-2 control-label">
72                             Link text
73                         </label>
74                         <div class="col-sm-10">
75                             <input type="text" class="form-control" id="link-text"/>
76                         </div>
77                     </div>
78                 </div>
79                 <div class="form-horizontal link-style">
80                     <div class="form-group">
81                         <label class="col-sm-2 control-label">
82                             Style
83                         </label>
84                         <div class="col-sm-4">
85                             <div class="dropdown" style="line-height: 2em;">
86                                 <a data-toggle="dropdown" class="btn btn-default" href="#">Color Style <span class="caret"></span></a>
87                                 <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
88                                     <li>
89                                         <label class="btn btn-link">Link<input value="" class="link-style" type="radio" name="link-style-type" checked="checked"/></label>
90                                     </li>
91                                     <li>
92                                         <label class="btn btn-default">Basic<input value="btn-default" class="link-style" type="radio" name="link-style-type"/></label>
93                                     </li>
94                                     <li>
95                                         <label class="btn btn-success">Success<input value="btn-success" class="link-style" type="radio" name="link-style-type"/></label>
96                                     </li>
97                                     <li>
98                                         <label class="btn btn-primary">Primary<input value="btn-primary" class="link-style" type="radio" name="link-style-type"/></label>
99                                     </li>
100                                     <li>
101                                         <label class="btn btn-info">Info<input value="btn-info" class="link-style" type="radio" name="link-style-type"/></label>
102                                     </li>
103                                     <li>
104                                         <label class="btn btn-warning">Warning<input value="btn-warning" class="link-style" type="radio" name="link-style-type"/></label>
105                                     </li>
106                                     <li>
107                                         <label class="btn btn-danger">Danger<input value="btn-danger" class="link-style" type="radio" name="link-style-type"/></label>
108                                     </li>
109                                 </ul>
110                             </div>
111                         </div>
112                         <div class="col-sm-4">
113                             <div class="dropdown" style="line-height: 2em;">
114                                 <a data-toggle="dropdown" class="btn btn-default" href="#">Size <span class="caret"></span></a>
115                                 <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
116                                     <li>
117                                         <label class="btn btn-default btn-xs">Extra Small<input value="btn-xs" class="link-style" type="radio" name="link-style-size"/></label>
118                                     </li>
119                                     <li>
120                                         <label class="btn btn-default btn-sm">Small<input value="btn-sm" class="link-style" type="radio" name="link-style-size"/></label>
121                                     </li>
122                                     <li>
123                                         <label class="btn btn-default">Default<input value="" class="link-style" type="radio" name="link-style-size" checked="checked"/></label>
124                                     </li>
125                                     <li>
126                                         <label class="btn btn-default btn-lg">Large<input value="btn-lg" class="link-style" type="radio" name="link-style-size"/></label>
127                                     </li>
128                                 </ul>
129                             </div>
130                         </div>
131                     </div>
132                 </div>
133                 <div class="form-horizontal link-style">
134                     <div class="form-group">
135                         <label class="col-sm-2 control-label">
136                             Preview
137                         </label>
138                         <div class="col-sm-10" style="line-height: 2em;">
139                             <a id="link-preview" href="#"></a>
140                         </div>
141                     </div>
142                 </div>
143             </form>
144         </t>
145     </t>
146     <t t-name="website.editor.dialog.media">
147         <div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
148             <div class="modal-dialog select-media">
149                 <div class="modal-content">
150                     <div class="modal-header">
151                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
152                         <h3 class="modal-title">Select a Media</h3>
153                     </div>
154                     <div class="modal-body">
155                         <ul class="nav nav-tabs">
156                             <li class="active"><a href="#editor-media-image" data-toggle="tab">Image</a></li>
157                             <li><a href="#editor-media-icon" data-toggle="tab">Pictogram</a></li>
158                             <li><a href="#editor-media-video" data-toggle="tab">Video</a></li>
159                             <li class="search" style="float: right;">
160                                 <ul class="pager mb0 mt0">
161                                     <li class="previous disabled"><a href="#">← Previous</a></li>
162                                     <li class="next disabled"><a href="#">Next →</a></li>
163                                 </ul>
164                             </li>
165                             <li class="search" style="float: right;">
166                                 <form action="#">
167                                     <div class="form-group font-icons fa fa-search mb0">
168                                         <input type="search" class="form-control" id="icon-search"/>
169                                     </div>
170                                 </form>
171                             </li>
172                         </ul>
173
174                         <!-- Tab panes -->
175                         <div class="tab-content">
176                             <div class="tab-pane fade in active" id="editor-media-image">
177                                 
178                             </div>
179                             <div class="tab-pane fade" id="editor-media-icon">
180                                 
181                             </div>
182                             <div class="tab-pane fade" id="editor-media-video">
183                                 
184                             </div>
185                         </div>
186                     </div>
187                     <div class="modal-footer">
188                         <button type="button" class="btn btn-primary save">Save</button>
189                         <button type="button" class="btn hidden wait" disabled="disabled"/>
190                         or
191                         <a href="#" data-dismiss="modal" aria-hidden="true">Discard</a>
192                     </div>
193                 </div>
194             </div>
195         </div>
196     </t>
197     <t t-name="website.editor.dialog.image">
198         <div>
199             <form method="POST"
200                   action="/website/attach"
201                   enctype="multipart/form-data"
202                   target="fileframe"
203                   class="form-inline">
204                 <div class="well">
205                     <div class="form-group pull-left">
206                         <input type="file" name="upload" accept="image/*" multiple="multiple" style="position: absolute; opacity: 0; width: 1px; height: 1px;"/>
207                         <input type="hidden" name="disable_optimization" value=""/>
208                         <div class="btn-group">
209                             <button type="button" class="btn btn-primary filepicker">Upload an image from your computer</button>
210                             <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
211                                 <span class="caret"></span>
212                                 <span class="sr-only">Alternate Upload</span>
213                             </button>
214                             <ul class="dropdown-menu" role="menu">
215                                 <li><a href="#" class="js_disable_optimization">Upload image without optimization</a></li>
216                             </ul>
217                         </div>
218                         <button type="button" class="btn hidden wait" disabled="disabled">Uploading...</button>
219                     </div>
220                     <div>
221                         <span class="text-muted"> — or — </span>
222                         <label for="iamgeurl">Add an image URL</label>
223                         <div class="form-group btn-group">
224                             <input type="text" name="url" class="form-control url pull-left" style="width: 320px;" id="iamgeurl" placeholder="http://openerp.com/logo.png"/>
225                             <button class="btn btn-default" type="submit">Add</button>
226                         </div>
227                     </div>
228                 </div>
229                 <input type="hidden" name="func"/>
230                 <div class="help-block"/>
231                 <div class="existing-attachments"/>
232             </form>
233         </div>
234         <iframe src="about:blank" name="fileframe" class="hidden"/>
235     </t>
236     <t t-name="website.editor.dialog.image.existing">
237         <div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
238             <div class="modal-dialog select-image">
239                 <div class="modal-content">
240                     <div class="modal-header">
241                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
242                         <h3 class="modal-title">Select a Picture</h3>
243                     </div>
244                     <div class="modal-body has-error">
245                         <div class="existing-attachments"/>
246                         <div class="help-block"/>
247                     </div>
248                     <div class="modal-footer">
249                         <a href="#" data-dismiss="modal" aria-hidden="true">Discard</a>
250                     </div>
251                 </div>
252             </div>
253         </div>
254     </t>
255     <t t-name="website.editor.dialog.image.existing.content">
256         <div class="existing-attachments">
257             <div class="row mt16" t-foreach="rows" t-as="row">
258                 <div class="col-sm-2 existing-attachment-cell"
259                      t-foreach="row" t-as="attachment">
260                     <i class="fa fa-times existing-attachment-remove" t-att-data-id="attachment.id"/>
261                     <img t-att-src="attachment.website_url" t-att-alt="attachment.name" t-att-title="attachment.name" class="img img-responsive"/>
262                 </div>
263             </div>
264         </div>
265     </t>
266     <t t-name="website.editor.dialog.image.existing.error">
267         <div class="help-block">
268             <p>The image could not be deleted because it is used in the
269                following pages or views:</p>
270             <ul t-foreach="views" t-as="view">
271                 <li>
272                     <a t-attf-href="/web#model=ir.ui.view&amp;id=#{view.id}">
273                         <t t-esc="view.name"/>
274                     </a>
275                 </li>
276             </ul>
277         </div>
278     </t>
279     <t t-name="website.editor.table.panel">
280         <table class="editorbar-panel">
281             <tr t-foreach="rows"><td t-foreach="cols">&#8203;</td></tr>
282         </table>
283     </t>
284     <t t-name="website.editor.table">
285         <table class="table table-bordered table-responsive">
286             <tbody>
287                 <tr t-foreach="rows"><td t-foreach="cols">&#8203;</td></tr>
288             </tbody>
289         </table>
290     </t>
291
292     <t t-name="website.editor.discard">
293         <div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
294             <div class="modal-dialog">
295                 <div class="modal-content">
296                     <div class="modal-header">
297                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
298                         <h3 class="modal-title">Discard edition</h3>
299                     </div>
300                     <div class="modal-body">
301                         <p>
302                             If you discard the current edition, <em>all</em>
303                             unsaved changes will be lost.
304                         </p>
305                         <p>You can cancel to return to the edition mode.</p>
306                     </div>
307                     <div class="modal-footer">
308                         <button type="button" class="btn btn-danger">Discard</button>
309                         or
310                         <a href="#" data-dismiss="modal" aria-hidden="true">Cancel</a>
311                     </div>
312                 </div>
313             </div>
314         </div>
315     </t>
316
317     <t t-name="website.editor.hoverbutton.link">
318         <button contentEditable="false" type="button" class="btn btn-primary hover-edition-button btn-xs">Change</button>
319     </t>
320
321     <t t-name="website.editor.hoverbutton.media">
322         <div contentEditable="false" class="hover-edition dropdown">
323             <a class="btn btn-primary btn-sm" data-toggle="dropdown" href="#">Customize</a>
324             <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
325                 <li><a href="#" class="hover-edition-button">Change Media</a></li>
326                 <li><a href="#" class="hover-style-button">Style</a></li>
327                 <li class="dropdown-submenu">
328                     <a href="#" tabindex="-1">Rotation</a>
329                     <ul class="dropdown-menu">
330                         <li data-value="fa-spin"><a>Spin</a></li>
331                         <li data-value="fa-flip-horizontal"><a>Horizontal flip</a></li>
332                         <li data-value="fa-flip-vertical"><a>Vertical flip</a></li>
333                     </ul>
334                 </li>
335                 <li><a href="#" data-value="fa-border">border</a></li>
336             </ul>
337         </div>
338     </t>
339
340     <t t-name="website.editor.dialog.font-icons">
341         <form action="#">
342             <input type="hidden" id="fa-icon"/>
343             <input type="hidden" id="fa-size"/>
344             <div class="font-icons-icons">
345                 <t t-call="website.editor.dialog.font-icons.icons">
346                     <t t-set="icons" t-value="widget.icons"/>
347                 </t>
348             </div>
349             <div class="form-group mt32" id="fa-preview">
350
351             </div>
352         </form>
353     </t>
354     <t t-name="website.editor.dialog.font-icons.icons">
355         <span t-foreach="icons" t-as="icon"
356               class="fa font-icons-icon"
357               t-att-data-id="icon.id">
358             <t t-esc="icon.text"/>
359         </span>
360     </t>
361
362     <t t-name="website.editor.dialog.video">
363         <form action="#" class="form-inline">
364             <div class="well">
365                 <div class="form-group btn-group">
366                     <span class="text-muted pull-right" style="margin-left:10px; line-height: 2em;">(Youtube, Vimeo, Dailymotion)</span>
367                     <label for="urlvideo" style="width: 220px; line-height: 2em;" class="pull-left">Set a video URL</label>
368                     <input type="text"
369                         name="url"
370                         class="form-control url pull-left"
371                         style="width: 400px;"
372                         id="urlvideo"
373                         placeholder="//www.youtube.com/embed/yws1tbgNV7k"
374                         t-translation="off"/>
375                     <button class="btn btn-default">Preview</button>
376                 </div>
377                 <div class="form-group btn-group">
378                     <label for="urlvideo" style="width: 220px; line-height: 2em;" class="pull-left"><span class="text-muted">— or —</span> Embed Video (HTML)</label>
379                     <input type="text"
380                         name="embed"
381                         class="form-control url pull-left"
382                         style="width: 400px;"
383                         id="embedvideo"
384                         placeholder='&lt;iframe src="//www.youtube.com/embed/yws1tbgNV7k"&gt;&lt;/iframe&gt;'
385                         t-translation="off"/>
386                     <button class="btn btn-default">Preview</button>
387                 </div>
388             </div>
389             
390             <div id="video-preview" style="width: 450px; margin: 0 auto;">
391                 <div class="media_iframe_video">
392                     <iframe
393                         src=""
394                         frameborder="0"
395                         allowfullscreen="allowfullscreen"></iframe>
396                 </div>
397             </div>
398
399             <input type="hidden" id="video_id" value=""/>
400             <input type="hidden" id="video_type" value=""/>
401
402             <div class="text-center mt32">
403                 <div class="checkbox">
404                     <label><input type="checkbox" id="autoplay"/> Autoplay</label>
405                 </div>
406             </div>
407         </form>
408     </t>
409
410 </templates>