[ADD] theme 8.0

snippet_google_map/LICENSE

@@ -0,0 +1,27 @@
+Odoo Proprietary License v1.0
+
+This software and associated files (the "Software") may only be used (executed,
+modified, executed after modifications) if you have purchased a valid license
+from the authors, typically via Odoo Apps, or if you have received a written
+agreement from the authors of the Software (see the COPYRIGHT file).
+
+You may develop Odoo modules that use the Software as a library (typically
+by depending on it, importing it and using its resources), but without copying
+any source code or material from the Software. You may distribute those
+modules under the license of your choice, provided that this license is
+compatible with the terms of the Odoo Proprietary License (For example:
+LGPL, MIT, or proprietary licenses similar to this one).
+
+It is forbidden to publish, distribute, sublicense, or sell copies of the Software
+or modified copies of the Software.
+
+The above copyright notice and this permission notice must be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+DEALINGS IN THE SOFTWARE.

snippet_google_map/__openerp__.py

@@ -0,0 +1,12 @@
+{
+    'name':'Google Map Snippet',
+    'description':'Google Map Snippet',
+    'category': 'Website',
+    'version':'1.1',
+    'author':'Odoo S.A.',
+    'data': [
+        'views/assets.xml',
+        'views/s_google_map.xml',
+    ],
+    'depends': ['theme_common'],
+}

snippet_google_map/doc/index.rst

@@ -0,0 +1,34 @@
+You need to install the *Less CSS* compiler to run this snippet
+
+* on Linux, use your distribution's package manager to install nodejs and npm.
+   * In debian wheezy and Ubuntu 13.10 and before you need to install nodejs manually:
+
+       .. code-block:: console
+
+           $ wget -qO- https://deb.nodesource.com/setup | bash -
+           $ apt-get install -y nodejs
+
+   * In later debian (>jessie) and ubuntu (>14.04) you may need to add a symlink as npm packages call ``node`` but debian calls the binary ``nodejs``
+
+       .. code-block:: console
+
+           $ apt-get install -y npm
+           $ sudo ln -s /usr/bin/nodejs /usr/bin/node
+
+   * Once npm is installed, use it to install less and less-plugin-clean-css:
+
+       .. code-block:: console
+
+           $ sudo npm install -g less less-plugin-clean-css
+
+* on OS X, install nodejs via your preferred package manager (`homebrew <http://brew.sh/>`_, `macports <https://www.macports.org/>`_) then install less and less-plugin-clean-css:
+
+   .. code-block:: console
+
+       $ sudo npm install -g less less-plugin-clean-css
+
+* on Windows, `install nodejs <http://nodejs.org/download/>`_, reboot (to update the `PATH`) and install less and less-plugin-clean-css:
+
+   .. code-block:: ps1
+
+       C:\> npm install -g less less-plugin-clean-css

snippet_google_map/static/description/index.html

@@ -0,0 +1,27 @@
+
+
+<div class="container">
+  <p>The Google Map Snippet embeds a Google Map on your site. This is a great way to display the location of your business or event. Add a title and address for the location to display in the snippet.</p>
+  <br/>
+  <br/>
+ 
+
+  <small>When you start typing an address, the page populates a list of autocomplete suggestions powered by Google.</small> 
+  <img src="screen_1.jpg" class="img-responsive" alt="">
+  <br/>
+  <br/>
+
+
+  <div class="row">
+    <div class="col-sm-6">
+      <h4>Map Type</h4>
+      <img src="screen_2.jpg" class="img-responsive" alt="">
+    </div>
+    <div class="col-sm-6">
+      <h4>Map Zoom</h4>
+      <img src="screen_3.jpg" class="img-responsive" alt="">
+    </div>
+  </div>
+
+
+</div>

snippet_google_map/static/src/img/marker.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="48px" height="48px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.19;}
+	.st1{fill:#D36868;}
+	.st2{fill:#AF5151;}
+	.st3{fill:#913D3D;}
+</style>
+<ellipse class="st0" cx="23.5" cy="44.7" rx="10.4" ry="3.3"/>
+<path class="st1" d="M23.5,0c-9.4,0-17,7.5-17,16.8s17,28,17,28s17-18.7,17-28S32.9,0,23.5,0z"/>
+<circle class="st2" cx="23.5" cy="15.5" r="4.2"/>
+<path class="st3" d="M23.5,12.2c2.2,0,3.9,1.6,4.2,3.8c0-0.2,0.1-0.3,0.1-0.5c0-2.3-1.9-4.2-4.2-4.2s-4.2,1.9-4.2,4.2
+	c0,0.2,0,0.3,0.1,0.5C19.6,13.9,21.3,12.2,23.5,12.2z"/>
+</svg>

snippet_google_map/static/src/js/s_google_map_editor.js

@@ -0,0 +1,91 @@
+(function(){
+    'use strict';
+
+    var website = openerp.website;
+
+    website.add_template_file('/snippet_google_map/static/src/xml/s_google_map_modal.xml');
+
+    website.openerp_website = {};
+    
+    website.snippet.options.map = website.snippet.Option.extend({
+        
+        map: function (type, value, $li) {
+            if (type !== 'click') return;
+            var self = this;  
+            self.$modal = $(openerp.qweb.render("snippet_google_map.s_google_map_modal"));
+            self.$modal.appendTo('body');           
+            self.$modal.modal();
+
+            self.$modal.on('shown.bs.modal', function () {
+                self.$modal.find("#pin_title").val(self.$target.attr('data-pin-title'));
+                self.$modal.find("#pin_style").val(self.$target.attr('data-pin-style'));
+                var autocomplete = new google.maps.places.Autocomplete((self.$modal.find('#pin_address').get(0)),{ types: ['geocode'] });               
+                google.maps.event.addListener(autocomplete, 'place_changed', function() {
+                    var place = autocomplete.getPlace();
+                    if (!place.geometry) {
+                      self.$modal.find("#placeBk").val("(50.854975,4.3753899)");
+                    } else {
+                        self.$modal.find("#placeBk").val(place.geometry.location);
+                    }
+                });
+            });
+
+            self.$modal.find("#sub_map").on('click', function () {
+                if (!self.$modal.find("#placeBk").val()) {
+                    self.$modal.find("#placeBk").val("(50.854975,4.3753899)")
+                }         
+                self.$target.attr('data-map-gps', (self.$modal.find("#placeBk").val()));         
+                self.$target.attr('data-pin-style', (self.$modal.find("#pin_style").val()));
+                self.$modal.modal('hide');
+                self.$target.data('snippet-view').redraw();             
+            });         
+        },
+
+        map_type: function (type, value, $li) {
+            if (type !== 'click') return;
+            this.$target.attr('data-map-type', value);
+            this.$target.attr('data-map-color', "");
+            this.$target.data('snippet-view').redraw();
+        },
+        map_color: function (type, value, $li) {
+            if (type !== 'click') return;
+            this.$target.attr('data-map-color', value);
+            this.$target.data('snippet-view').redraw();
+        },
+        map_zoom: function (type, value, $li) {
+            if (type !== 'click') return;
+            this.$target.attr('data-map-zoom', value);
+            this.$target.data('snippet-view').redraw();
+        },
+        map_gps: function (type, value, $li) {
+            this.$target.attr('data-map-gps', value);
+            this.$target.data('snippet-view').redraw();
+        },
+        set_active: function () {
+            this.$el.find('[data-map_type]')
+                .removeClass('active')
+                .filter('[data-map_type="'+this.$target.attr('data-map-type')+'"]')
+                .addClass('active');
+            this.$el.find('[data-map_color]')
+                .removeClass('active')
+                .filter('[data-map_color="'+this.$target.attr('data-map-color')+'"]')
+                .addClass('active');
+            this.$el.find('[data-map_zoom]')
+                .removeClass('active')
+                .filter('[data-map_zoom="'+this.$target.attr('data-map-zoom')+'"]')
+                .addClass('active');
+            this.$el.find('[data-map_gps]')
+                .removeClass('active')
+                .filter('[data-map_gps="'+this.$target.attr('data-map-gps')+'"]')
+                .addClass('active');
+        },
+
+        drop_and_build_snippet: function () {
+            this.map('click', null, null);
+        },
+        start: function () {
+          this.$target.data('snippet-view').redraw();
+        }
+    });
+
+})();

snippet_google_map/static/src/js/s_google_map_frontend.js

@@ -0,0 +1,101 @@
+
+(function(){
+    'use strict';
+
+    var website = openerp.website;
+    website.openerp_website = {};
+
+    // GARDENIA MAP 
+    website.snippet.animationRegistry.s_google_map = website.snippet.Animation.extend({
+        selector : "section.s_google_map",
+
+        start : function() {
+            var self = this;
+            if (typeof google === 'object' && typeof google.maps === 'object') {
+                self.redraw();
+            }
+        },
+    
+        redraw: function () {
+            var self = this;
+
+            //Define a default map's colors set
+            var std = [];
+            var stdMap = new google.maps.StyledMapType(std, {name: "Std Map"});
+
+            // Default options, will be overwritten by the user 
+            var myOptions = { 
+                zoom:12,
+                center:new google.maps.LatLng(50.854975,4.3753899),
+                mapTypeId: google.maps.MapTypeId.ROADMAP,
+                panControl: false,
+                zoomControl: false,
+                mapTypeControl: false,
+                streetViewControl: false,
+                scrollwheel:false,
+                mapTypeControlOptions: {
+                  mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
+                }
+            };
+
+            //Render Map
+            var mapC    = self.$target.find('.map_container'), 
+                map     = new google.maps.Map(mapC.get(0), myOptions);
+
+            //Update GPS position
+            var p   =  this.$target.attr('data-map-gps').substring(1).slice(0, -1).split(',');
+            var gps =  new google.maps.LatLng( p[0],p[1] );
+            map.setCenter(gps);
+
+            //Update Map on screen resize
+            google.maps.event.addDomListener(window, 'resize', function() {
+                map.setCenter(gps);
+            });
+            google.maps.event.addDomListener(map, 'resize', function() {
+                map.setCenter(gps);
+            });
+
+            //Create Marker & Infowindow 
+            if(self.$target.attr('data-pin-style') == "flat") {
+                var is_internetExplorer11 = navigator.userAgent.toLowerCase().indexOf('trident') > -1;
+                var marker_url = (is_internetExplorer11) ? '/snippet_google_map/static/src/img/s_google_map/marker.png' : '/snippet_google_map/static/src/img/marker.svg';
+
+                var marker = new google.maps.Marker({
+                    map: map,
+                    animation: google.maps.Animation.DROP,
+                    position: new google.maps.LatLng(p[0],p[1] ),
+                    icon: marker_url
+                });
+            } else {
+                var marker = new google.maps.Marker({
+                    map: map,
+                    animation: google.maps.Animation.DROP,
+                    position: new google.maps.LatLng(p[0],p[1] )
+                });
+            }
+
+            //Update Map Type
+            map.setMapTypeId(google.maps.MapTypeId[self.$target.attr('data-map-type')]);
+
+            //Update Map Zoom
+            map.setZoom(parseInt(self.$target.attr('data-map-zoom')));
+
+            //Update Map Color (execute only if a map color palette is not defined)
+            if(self.$target.attr('data-map-color') != ""){
+                self.update_map_color(map);
+            }
+        },
+
+        update_map_color: function(map){
+            var self = this;
+            var mapColor = eval("self." + self.$target.attr('data-map-color'));
+            
+            var thisMap = new google.maps.StyledMapType(mapColor, {name: "TEST"});
+            map.mapTypes.set('map_style', thisMap);
+            map.setMapTypeId('map_style');
+            
+        }
+
+
+    });
+})();

snippet_google_map/static/src/less/s_google_map.less

@@ -0,0 +1,115 @@
+//  ======= Variables ============================
+//  ==============================================
+//  Change main snippet's propriety easily
+
+//  es. @s_google_map-desc-bg: red;
+
+    @s_google_map-desc-alpha        : 0.80;
+    @s_google_map-desc-hover-alpha  : 0.55;
+
+    @s_google_map-desc-bg           : @brand-primary;
+    @s_google_map-desc-hover-bg     : @brand-primary;
+
+    @s_google_map-desc-p-color      : white;
+    @s_google_map-desc-p-color      : white;
+
+
+
+//  ====== hooks(hook) =====================================
+//  ===========================================================
+//  Use them to inject NEW rules or overwrite the old ones.  
+//  This method is more maintenable than classic css overwrite
+//  'couse it works also if the snippet's structure will change. 
+
+//  How to: 
+//  in your theme, just call the backdoor like a normal 
+//  CSS class adding parethesis at the end ".backdoor-name()" 
+//  (this will prevent the creation of a standard CSS class).
+//  Add your rules inside. Your style will take the priority.
+//  Done. 
+
+//  .s_google_map-hook(){
+//    background: red;
+//    min-height: 200px;
+//  }
+
+    .s_google_map-hook(){}
+
+    .s_google_map-desc-hook(){}
+
+    .s_google_map-desc-p-hook(){}
+
+    .s_google_map-desc-span-hook(){}
+
+
+// Default Style ================================
+// ==============================================
+
+.s_google_map {
+  height: 100%;
+  min-height: 300px;
+  position: relative;
+  .s_google_map-hook(); //.s_google_map backdoor
+
+  .map_container {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+  } 
+
+  .description{
+    z-index: 99;
+    background: @s_google_map-desc-bg;
+    background: rgba(red(@s_google_map-desc-bg), green(@s_google_map-desc-bg), blue(@s_google_map-desc-bg) , @s_google_map-desc-alpha);
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    padding: 0 1em;
+    color: white;
+    .transition(background-color 250ms ease);
+    .s_google_map-desc-hook(); //.description backdoor
+    
+    font {
+      float: left;
+      margin-top: 20px;
+      margin-bottom: 15px;
+      font-weight: bold;
+      text-transform: uppercase;
+      .s_google_map-desc-p-hook(); //.description p backdoor
+    }
+    
+    span{
+      float: left;
+      text-transform: none;
+      font-weight: normal;
+      margin-top: 20px;
+      margin-left: 10px;
+      .s_google_map-desc-span-hook(); //.description span backdoor
+    }
+  }
+  
+  &:hover .description{
+      background: @s_google_map-desc-hover-bg;
+      background: rgba(red(@s_google_map-desc-hover-bg), green(@s_google_map-desc-hover-bg), blue(@s_google_map-desc-hover-bg) , @s_google_map-desc-hover-alpha);
+  }  
+} 
+
+#mapModal {
+  z-index: 3000;
+}
+
+.pac-container { // google map autosuggestion
+  z-index: 3001;
+}
+
+a#map_options:after {
+  content: none;
+}
+
+.cke_editable section.s_google_map {
+  div.controls {
+    display: block;
+  }
+} 

snippet_google_map/static/src/xml/s_google_map_modal.xml

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+<t t-name="snippet_google_map.s_google_map_modal">
+  <div class="modal fade" id="mapModal" contenteditable="False" contentEditable="false" backdrop="false" tabindex="1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="z-index:2001">
+  
+    <div class="modal-dialog">
+      <div class="modal-content gard_modal">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal">
+            <span aria-hidden="true">×</span>
+            <span class="sr-only">Close</span>
+          </button>
+          <h4 class="modal-title">Customize your map</h4> 
+        </div>
+          
+        <div class="modal-body" contenteditable="false">
+            
+
+          <div class="form-group ">
+            <label for="pin_address text-right" class="col-sm-3 control-label text-right">Address</label>
+            <div class="input-group col-sm-8">  
+              <div class="input-group-addon"><i class="fa fa-building-o"></i></div>                 
+              <input type="text" class="form-control" id="pin_address" placeholder="Your address" />
+              <input type="hidden" id="placeBk"/>
+            </div>
+            <div class="col-sm-8 col-sm-offset-3">
+              <small class="help-block ">e.g. De Brouckere, Brussels, Belgium</small>
+            </div>
+          </div>
+
+          <div class="form-group ">
+            <label for="pin_style" class="col-sm-3 control-label text-right">Marker Style</label> 
+            <div class="input-group col-sm-8">                      
+              <select id="pin_style" name="pin_style" class=" col-sm-5">
+                <option value="flat">Flat</option>
+                <option>Default</option>
+              </select>
+            </div>
+          </div>
+
+
+
+
+        </div> <!-- modal-body -->
+
+        <div class="modal-footer">
+          <button id="cancel" data-dismiss="modal" class="btn btn-primary">Cancel</button>
+          <button id="sub_map"  class="btn btn-danger">Save</button>
+        </div>
+      </div><!-- /.modal-content -->
+    </div><!-- /.modal-dialog -->
+  </div><!-- / .modal -->
+</t>
+</templates>

snippet_google_map/views/assets.xml

@@ -0,0 +1,23 @@
+<openerp>
+  <data>
+    
+    <template id="assets_frontend_less" name="Google Map Assets" inherit_id="website_less.option_bootstrap_less">
+      <xpath expr="//link[last()]" position="after">
+        <link href="/snippet_google_map/static/src/less/s_google_map.less" rel="stylesheet" type="text/less"/>
+      </xpath>
+    </template>
+
+    <template id="assets_frontend_js" name="Google Map Assets" inherit_id="website.assets_frontend">
+      <xpath expr="//script[last()]" position="after">
+        <script src="/snippet_google_map/static/src/js/s_google_map_frontend.js" rel="stylesheet" type="text/less"/>
+      </xpath>
+    </template>
+
+    <template id="assets_editor" name="Google Map Editor Assets" inherit_id="website.assets_editor">
+      <xpath expr="." position="inside">
+        <script src="/snippet_google_map/static/src/js/s_google_map_editor.js" rel="stylesheet" type="text/less"/>
+      </xpath>
+    </template>
+
+  </data>
+</openerp>

snippet_google_map/views/s_google_map.xml

@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<openerp>
+  <data>
+
+  <!-- Snippet's Body -->
+  <template name="Google Map" id="s_google_map">
+    <section class="s_google_map" data-map-type="ROADMAP" data-map-color="" data-map-zoom="12" data-map-gps="(50.854975,4.3753899)" data-pin-style="flat" style="height: 488px; overflow: hidden;">
+      <div class="map_container" /> 
+      <div class="description">
+        <font>Visit us:</font>
+        <span> Our office is located in the northeast of Brussels. TEL (555) 432 2365 </span>
+      </div>
+    </section>
+  </template>
+
+  <!-- Add to the top bar -->
+  <template id="google_map_snippet" inherit_id="website_less.snippets">
+    <xpath expr="//div[@id='snippet_feature']" position="inside">
+      <t t-snippet="snippet_google_map.s_google_map" t-thumbnail="/snippet_google_map/static/src/img/thumbnail.png"/>
+    </xpath>
+  </template>
+  
+  <!-- GoogleMaps Api 
+  // This MUST to be colled in this way. Otherwise if you add the API into website_frontend, it will be loaded multiple time-->
+  <template id="s_google_map_API" name="google maps api" inherit_id="website.layout" active="True">
+    <xpath expr="//body" position="inside">
+      <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&#38;libraries=places"></script>
+    </xpath>
+  </template>
+
+  <!-- Snippet's Options -->
+  <template id="s_google_map_option" inherit_id="website_less.snippet_options">
+    <xpath expr="//div[@data-js='blog-style']" position="before">
+      <div data-js='map' data-selector="section.s_google_map">
+
+        <li data-map="">
+          <a><i class="fa fa-fw fa-cog"></i>Map Options</a>
+        </li>
+  
+        <li class="dropdown-submenu">
+          <a tabindex="-1" href="#"><i class="fa fa-fw fa-road"></i>Type</a>
+          <ul class="dropdown-menu">
+            <li data-map_type="ROADMAP"><a>RoadMap</a></li>
+            <li data-map_type="TERRAIN"><a>Terrain</a></li>
+            <li data-map_type="SATELLITE"><a>Satellite</a></li>
+            <li data-map_type="HYBRID"><a>Hybrid</a></li>
+          </ul>
+        </li>
+
+        <!-- 
+        Map's colors palettes must be defined using javascript (this map is generated using google API).
+        Have a look to the snippet's less file for more info about. 
+        -->
+          
+        <li class="dropdown-submenu">
+          <a tabindex="-1" href="#"><i class="fa fa-fw fa-search"></i>Zoom</a>
+          <ul class="dropdown-menu">
+            <li data-map_zoom="12"><a>12</a></li>
+            <li data-map_zoom="13"><a>13</a></li>
+            <li data-map_zoom="14"><a>14</a></li>
+            <li data-map_zoom="15"><a>15</a></li>
+            <li data-map_zoom="16"><a>16</a></li>
+            <li data-map_zoom="17"><a>17</a></li>
+            <li data-map_zoom="18"><a>18</a></li>
+          </ul>
+        </li>
+
+      </div>
+    </xpath>         
+  </template>
+
+  </data>
+</openerp>