[ADD] theme saas-12

This commit is contained in:
Design
2021-05-11 16:11:13 +02:00
committed by Jeremy Kersten
commit 656443f9d0
3593 changed files with 101105 additions and 0 deletions
+27
View File
@@ -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.
+1
View File
@@ -0,0 +1 @@
import controllers
+12
View File
@@ -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'],
}
@@ -0,0 +1 @@
import main
+17
View File
@@ -0,0 +1,17 @@
# -*- coding: utf-8 -*-
# Part of Odoo. See LICENSE file for full copyright and licensing details.
import json
from openerp import http
from openerp.http import request
class SnipperGoogleMap(http.Controller):
@http.route('/website/google_maps_api_key', type='json', auth='public', website=True)
def google_maps_api_key(self, **post):
google_maps_api_key = request.env['ir.config_parameter'].sudo().get_param('google_maps_api_key')
data = {
'google_maps_api_key': google_maps_api_key or ''
}
return json.dumps(data)
Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

@@ -0,0 +1,24 @@
<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>
Binary file not shown.

After

Width:  |  Height:  |  Size: 120 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 197 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 214 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 597 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

@@ -0,0 +1,105 @@
odoo.define('snippet_google_map.s_google_map_editor', function (require) {
'use strict';
var ajax = require('web.ajax');
var Dialog = require("web_editor.widget").Dialog;
var core = require('web.core');
var s_options = require('web_editor.snippets.options');
var googleScriptLoaded = require("snippet_google_map.s_google_map_frontend").googleScriptLoaded;
var _t = core._t;
ajax.loadXML('/snippet_google_map/static/src/xml/s_google_map_modal.xml', core.qweb);
s_options.registry.map = s_options.Class.extend({
default_location: "(50.854975,4.3753899)",
map: function (type, value, $li) {
if (type !== 'click') return;
var self = this;
this.dialog = new Dialog(null, {
size: "medium",
title: _t("Customize your map"),
buttons: [
{text: _t("Save"), classes: "btn-primary", close: true, click: function () {
if (!this.$("#placeBk").val()) {
this.$("#placeBk").val(self.default_location);
}
self.$target.attr({
"data-map-gps": this.$("#placeBk").val(),
"data-pin-style": this.$("#pin_style").val(),
"data-pin-address": this.$("#pin_address").val(),
});
self.$target.data("snippet-view").redraw();
}},
{text: _t("Cancel"), close: true}
],
$content: $(core.qweb.render("snippet_google_map.s_google_map_modal"))
});
this.dialog.opened().then((function () {
this.$("#pin_address").val(self.$target.attr('data-pin-address'));
this.$("#pin_style").val(self.$target.attr('data-pin-style'));
this.$("#placeBk").val(self.$target.attr('data-map-gps'));
var autocomplete = new google.maps.places.Autocomplete(this.$('#pin_address').get(0), {types: ['geocode']});
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
self.dialog.$("#placeBk").val(place.geometry ? place.geometry.location : self.default_location);
});
}).bind(this.dialog));
googleScriptLoaded.then(function () {
self.dialog.open();
});
},
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._super.apply(this, arguments);
this.map('click', null, null);
},
});
});
@@ -0,0 +1,119 @@
odoo.define('snippet_google_map.s_google_map_frontend', function (require) {
'use strict';
var s_animation = require('web_editor.snippets.animation');
var ajax = require('web.ajax');
var googleScriptLoaded = $.Deferred();
s_animation.registry.s_google_map = s_animation.Class.extend({
selector : "section.s_google_map",
start: function () {
if (typeof google !== 'object' || typeof google.maps !== 'object') {
if (!s_animation.registry.s_google_map.isScriptLoading) {
s_animation.registry.s_google_map.isScriptLoading = true;
window.odoo_snippet_google_map_redraw_all = function odoo_snippet_google_map_redraw_all() {
_.each($('section.s_google_map'), function (map) {
$(map).data('snippet-view') && $(map).data('snippet-view').redraw();
});
s_animation.registry.s_google_map.isScriptLoading = false;
googleScriptLoaded.resolve();
};
ajax.jsonRpc("/website/google_maps_api_key", 'call', {})
.then(function(data) {
var key_param = '';
var data_json = JSON.parse(data)
if (data_json.google_maps_api_key !== '') {
key_param = '&key=' + data_json.google_maps_api_key
}
$('head').append($('<script/>', {
type: "text/javascript",
src: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&callback=odoo_snippet_google_map_redraw_all" + key_param,
}));
});
}
} else {
this.redraw();
}
},
redraw: function () {
// Define a default map's colors set
var std = [];
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 = this.$target.find('.map_container');
var 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);
});
// Create Marker & Infowindow
if (this.$target.attr('data-pin-style') === "flat") {
new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(p[0],p[1]),
icon: "/snippet_google_map/static/src/img/marker.png",
});
} else {
new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(p[0], p[1])
});
}
map.setMapTypeId(google.maps.MapTypeId[this.$target.attr('data-map-type')]); // Update Map Type
map.setZoom(parseInt(this.$target.attr('data-map-zoom'))); // Update Map Zoom
// Update Map Color
if (this.$target.attr('data-map-color') !== "") {
this.update_map_color(map);
}
},
update_map_color: function (map) {
var mapColor = eval("this." + this.$target.attr('data-map-color'));
var thisMap = new google.maps.StyledMapType(mapColor, {name: "Styled Map"});
map.mapTypes.set('map_style', thisMap);
map.setMapTypeId('map_style');
},
});
// This prototype permit to save if the google maps script is already loading or not.
// This script cannot be loaded 2 times, so if we have 2 snippets in the same view
// we don't want to call 2 times the scripts because the first one is not finished.
// And we cannot put in in an asset because we don't want to load this script on each
// page, but only page with a google maps snippet...
s_animation.registry.s_google_map.prototype.isScriptLoading = false;
return {
googleScriptLoaded: googleScriptLoaded,
};
});
@@ -0,0 +1,113 @@
// ======= 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%;
}
&.readable{
.map_container {
position: relative;
}
}
.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;
left: 0;
right: 0;
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;
&:after {
display:none;
}
}
@@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
<div t-name="snippet_google_map.s_google_map_modal" class="form-horizontal">
<div class="form-group">
<label for="pin_address" class="col-sm-3 control-label text-right">Address</label>
<div class="col-sm-9">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-building-o"/></div>
<input type="text" class="form-control" id="pin_address" placeholder="Your address"/>
<input type="hidden" id="placeBk"/>
</div>
</div>
<div class="col-sm-9 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="col-sm-9">
<select id="pin_style" name="pin_style" class="col-sm-5">
<option value="flat">Flat</option>
<option>Default</option>
</select>
</div>
</div>
</div>
</templates>
+23
View File
@@ -0,0 +1,23 @@
<openerp>
<data>
<template id="assets_frontend_less" name="Google Map Assets" inherit_id="website.assets_frontend">
<xpath expr="." position="inside">
<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>
+60
View File
@@ -0,0 +1,60 @@
<?xml version="1.0" encoding="utf-8"?>
<openerp>
<data>
<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.snippets">
<xpath expr="//div[@id='snippet_feature']/div[contains(@class, 'o_panel_body')]/t" position="before">
<t t-snippet="snippet_google_map.s_google_map" t-thumbnail="/snippet_google_map/static/src/img/thumbnail.png"/>
</xpath>
</template>
<!-- Snippet's Options -->
<template id="s_google_map_option" inherit_id="website.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"/>Map Options</a>
</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#"><i class="fa fa-fw fa-road"/>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>
<li class="dropdown-submenu">
<a tabindex="-1" href="#"><i class="fa fa-fw fa-search"/>Zoom</a>
<ul class="dropdown-menu">
<li data-map_zoom="6"><a>1</a></li>
<li data-map_zoom="8"><a>2</a></li>
<li data-map_zoom="10"><a>3</a></li>
<li data-map_zoom="12"><a>4</a></li>
<li data-map_zoom="14"><a>5</a></li>
<li data-map_zoom="16"><a>6</a></li>
<li data-map_zoom="18"><a>7</a></li>
<li data-map_zoom="20"><a>8</a></li>
</ul>
</li>
</div>
</xpath>
</template>
</data>
</openerp>