[IMP] website editor snippet: vertical selector (eg.: used for drag and drop column)
[odoo/odoo.git] / addons / website / static / src / xml / website.snippets.xml
1 <?xml version="1.0" encoding="utf-8"?>
2 <templates id="template" xml:space="preserve">
3
4     <!-- Editor -->
5
6     <t t-name="website.snippets">
7         <div id='oe_snippets' class='hide'>
8             <ul class="nav nav-pills">
9               <li class="active"><a data-toggle="pill" href="#snippet_structure">Structure</a></li>
10               <li class=""><a data-toggle="pill" href="#snippet_content">Content</a></li>
11               <li class=""><a data-toggle="pill" href="#snippet_emphasize">Emphasize</a></li>
12               <li class=""><a data-toggle="pill" href="#snippet_style">Style</a></li>
13             </ul>
14             <div class="pill-content">
15                 <div class="pill-pane active" id="snippet_structure"></div>
16                 <div class="pill-pane" id="snippet_content"></div>
17                 <div class="pill-pane" id="snippet_emphasize"></div>
18                 <div class="pill-pane" id="snippet_style"></div>
19                 <div class="pill-pane" id="snippet_unsorted"></div>
20             </div>
21         </div>
22     </t>
23
24     <t t-name="website.snippet_overlay">
25         <div class="oe_overlay">
26             <div class="oe_overlay_options">
27                 <div class="dropdown oe_options">
28                     <i data-toggle="dropdown" class="btn btn-primary icon icon-cog"></i>
29                     <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
30                         <li><a href="#" class="button js_box_remove">Remove this snippet</a></li>
31                     </ul>
32                 </div>
33                 <div class="oe_label"></div>
34                 <div class="oe_move"><i class="js_box_move icon btn btn-primary icon-move"></i></div>
35             </div>
36         </div>
37     </t>
38
39     <t t-name="website.snippet_manipulator">
40         <div class='oe_snippet_manipulator'></div>
41     </t>
42
43     <!-- Snippets -->
44
45     <div t-name="website.snippets.resize" data-snippet-id='resize'>
46         <!-- custom data for the widget -->
47         <div class='oe_handles'>
48             <div class='oe_handle n'></div>
49             <div class='oe_handle e'></div>
50             <div class='oe_handle w'></div>
51             <div class='oe_handle s'></div>
52         </div>
53         <div class='oe_snippet_thumbnail oe_label'>Margin resize</div>
54     </div>
55
56     <div t-name="website.snippets.colmd" data-snippet-id='colmd' data-action='insert' data-selector-vertical-childs='.row'>
57         <div class='oe_snippet_thumbnail oe_label'>Column</div>
58     </div>
59
60     <div t-name="website.snippets.carousel" data-snippet-id='carousel' data-category='emphasize' data-action='insert' data-selector-siblings='.container'>
61         
62         <!-- editor bar to display inside the top edit bar -->
63         <li class='oe_snippet_options'>
64             <a href="#" class="button js_add">Add layer</a>
65         </li>
66         <li class='oe_snippet_options'>
67             <a href="#" class="button js_remove">Remove current layer</a>
68         </li>
69         <li>
70             <div class="dropdown">
71                 <a data-toggle="dropdown" href="#">test</a>
72                 <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
73                     <li>inside</li>
74                 </ul>
75             </div>
76         </li>
77         <li class='oe_snippet_options'>
78             <select name="carousel-background">
79                 <option value="/website/static/src/img/greenfields.jpg">greenfields</option>
80                 <option value="/website/static/src/img/landscape.png">landscape</option>
81                 <option value="/website/static/src/img/aqua.jpg">aqua</option>
82             </select>
83         </li>
84         <li class='oe_snippet_options'>
85             <select name="carousel-style">
86                 <option value="no_image">No image</option>
87                 <option value="image_left">Image left</option>
88                 <option value="image_right">Image right</option>
89             </select>
90         </li>
91
92         <!-- thumbnail to display inside the bottom widget list editor -->
93         <div class='oe_snippet_thumbnail oe_label'>carousel</div>
94
95         <!-- body to insert after drag and drop thumbnail -->
96         <div id="myCarousel" class="oe_snippet_body carousel slide" data-interval="10000">
97             <!-- Carousel items -->
98             <div class="carousel-inner">
99                 <div class="item active" style="background-image: url(/website/static/src/img/greenfields.jpg); background-size: cover;">
100                     <div class="container">
101                         <div class="content" style="padding-top: 90px; padding-bottom:45px;">
102                             <h1>Create Awesome Websites</h1>
103                             <h3>Super easy, fully flexible</h3>
104                             <a href="/page/website.contactus" class="btn btn-success btn-large mt16">Contact us</a>
105                         </div>
106                     </div>
107                 </div>
108             </div>
109             <!-- Carousel nav -->
110             <a class="carousel-control left" href="#myCarousel" data-slide="prev"></a>
111             <a class="carousel-control right" href="#myCarousel" data-slide="next"></a>
112         </div>
113
114         <!-- custom data for the widget -->
115         <div class="item" style="background-image: url(/website/static/src/img/china.jpg); background-size: cover; background-position: bottom;" >
116             <div class='container'>
117                 <div class="content" style="padding-top: 90px; padding-bottom:45px;">
118                     <h1>Your New Banner Slide</h1>
119                     <h3>With another convincing subtitle</h3>
120                     <a href="/page/website.contactus" class="btn btn-success btn-large mt16">Contact us</a>
121                 </div>
122             </div>
123         </div>
124     </div>
125
126     <div t-name="website.snippets.darken" data-snippet-id='darken' data-category='style' data-action='mutate' data-selector='.container'>
127         <div class='oe_snippet_thumbnail oe_label'>Darken</div>
128     </div>
129
130     <div t-name="website.snippets.surprise" data-snippet-id='vomify' data-category='content' data-action='mutate' data-selector='.container'>
131         <div class="oe_snippet_body" style="display: none;"></div>
132         <div class='oe_snippet_thumbnail oe_label' style='background-image:radial-gradient(red,orange,yellow,green,blue);'>Surprise!</div>
133     </div>
134
135     <div t-name="website.snippets.spacer" data-snippet-id='resize' data-category='structure' data-action='insert' data-selector-siblings='.container'>
136         <div class='oe_snippet_thumbnail oe_label'>Spacer</div>
137         <div class="oe_snippet_body container mt32"></div>
138     </div>
139
140     <div t-name="website.snippets.title" data-snippet-id='title' data-category='structure' data-action='insert' data-selector-siblings='.container'>
141         <div class='oe_snippet_thumbnail oe_label'>Main Title</div>
142         <section class="oe_snippet_body container">
143             <div class="row">
144                 <div class="col-md-12 text-center">
145                     <h1 class="mt64">Welcome To Your New Homepage,</h1>
146                     <h2 class="mt32 subheader">where <b><em>everything</em></b> can be customized </h2>
147                 </div>
148             </div>
149         </section>
150     </div>
151
152     <div t-name="website.snippets.three-collumns" data-snippet-id='three-collumns' data-category='structure' data-action='insert' data-selector-siblings='.container'>
153         <div class='oe_snippet_thumbnail oe_label'>three-collumns</div>
154         <section class="oe_snippet_body container">
155             <div class="row">
156                 <div class="col-md-12 text-center">
157                     <h2 class="mt48">Ut enim ad minim veniam</h2>
158                 </div>
159             </div>
160             <div class="row mt32">
161                 <div class="col-md-4">
162                     <img class="img-rounded img-responsive" src="/website/static/src/img/china_thumb.jpg"/>
163                     <h4 class="mt16">Cillum Dolore</h4>
164                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
165                         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
166                         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
167                         consequat.</p>
168                 </div>
169                 <div class="col-md-4">
170                     <img class="img-rounded img-responsive" src="/website/static/src/img/desert_thumb.jpg"/>
171                     <h4 class="mt16">Mollit Anim</h4>
172                     <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
173                         dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
174                         proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
175                 </div>
176                 <div class="col-md-4">
177                     <img class="img-rounded img-responsive" src="/website/static/src/img/deers_thumb.jpg"/>
178                     <h4 class="mt16">Nemo Enim Ipsam</h4>
179                     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
180                         doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
181                         veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
182                         ipsam voluptatem quia voluptas</p>
183                 </div>
184             </div>
185         </section>
186     </div>
187
188     <div t-name="website.snippets.header-block" data-snippet-id='header-block' data-category='structure' data-action='insert' data-selector-siblings='.container'>
189         <div class='oe_snippet_thumbnail oe_label'>header-block</div>
190         <section class="container oe_snippet_body">
191             <div class="row">
192                 <div class="col-md-5">
193                     <img class="img-rounded img-responsive" src="/website/static/src/img/island.jpg"/>
194                 </div>
195                 <div class="col-md-6 col-lg-offset-1">
196                     <p class="mt16">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
197                         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
198                         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
199                         consequat.</p>
200                     <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
201                         dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
202                         proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
203                     <div class="text-center">
204                         <a href="http://www.openerp.com/start" class="btn btn-default mt16 btn-lg btn-primary">Call To  <em>Action</em></a>
205                     </div>
206                 </div>
207             </div>
208         </section>
209     </div>
210
211 </templates>