pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[MOV] website: add s_progress_bar snippet from themes repo

Browse Source 
Part of https://github.com/odoo/odoo/pull/42937
task-2088157
This commit is contained in:
qsm-odoo
2020-01-24 13:02:02 +00:00
parent a74cd7ad4f
commit fb9aab745b
6 changed files with 157 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/__manifest__.py
+1
View File
@@ -64,6 +64,7 @@
'views/snippets/s_timeline.xml',
'views/snippets/s_process_steps.xml',
'views/snippets/s_text_highlight.xml',
'views/snippets/s_progress_bar.xml',
'views/snippets/s_mega_menu_multi_menus.xml',
'views/snippets/s_mega_menu_menu_image_menu.xml',
'views/website_views.xml',
addons/website/static/src/img/snippets_thumbs/s_progress_bar.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 325 B

addons/website/static/src/snippets/s_progress_bar/options.js
+113
View File
@@ -0,0 +1,113 @@
odoo.define('website.s_progress_bar_options', function (require) {
'use strict';
const core = require('web.core');
const options = require('web_editor.snippets.options');
const _t = core._t;
options.registry.progress = options.Class.extend({
/**
* @override
*/
start: function () {
if (this.$overlay) {
this._bindMoveProgress();
}
this._super();
},
//--------------------------------------------------------------------------
// Options
//--------------------------------------------------------------------------
/**
* Changes the position of the progressbar text.
*
* @see this.selectClass for parameters
*/
display: function (previewMode, widgetValue, params) {
// retro-compatibility
if (this.$target.hasClass('progress')) {
this.$target.removeClass('progress');
this.$target.find('.progress-bar').wrap($('<div/>', {
class: 'progress',
}));
this.$target.find('.progress-bar span').addClass('s_progress_bar_text');
}
let $text = this.$target.find('.s_progress_bar_text');
if (!$text.length) {
$text = $('<span/>').addClass('s_progress_bar_text').html(_t('80% Development'));
}
if (widgetValue === 'inline') {
$text.appendTo(this.$target.find('.progress-bar'));
} else {
$text.insertBefore(this.$target.find('.progress'));
}
},
//--------------------------------------------------------------------------
// Private
//--------------------------------------------------------------------------
/**
* @override
*/
_computeWidgetState: function (methodName, params) {
switch (methodName) {
case 'display': {
const isInline = this.$target.find('.s_progress_bar_text')
.parent('.progress-bar').length;
return isInline ? 'inline' : 'below';
}
}
return this._super(...arguments);
},
/**
* Binds the editor padding feature to the progress bar width.
*/
_bindMoveProgress: function () {
var self = this;
var $e = this.$overlay.find(".o_handle.e").removeClass("readonly");
const $progressBar = this.$target.find('.progress-bar');
const $parent = $progressBar.parent();
var pos = $parent.offset();
var width = $parent.width();
var time;
function move(event) {
clearTimeout(time);
time = setTimeout(function () {
var value = (event.clientX - pos.left) / width * 100 | 0;
if (value > 100) {
value = 100;
}
if (value < 0) {
value = 0;
}
const $progressBarText = self.$target.find('.s_progress_bar_text');
// Target precisely the XX% not only XX to not replace wrong element
// eg 'Since 1978 we have completed 45%' <- don't replace 1978
$progressBarText.text($progressBarText.text().replace(/[0-9]+%/, value + '%'));
$progressBar.attr("data-value", value);
$progressBar.attr("aria-valuenow", value);
if (value < 3) {
value = 3;
}
$progressBar.css("width", value + "%");
}, 5);
}
$e.on("mousedown", function () {
self.$overlay.addClass('d-none');
$(document)
.on("mousemove", move)
.one("mouseup", function () {
self.$overlay.removeClass('d-none');
$(document).off("mousemove", move);
self.trigger_up('cover_update');
});
});
},
});
});
addons/website/views/assets.xml
+1
View File
@@ -116,6 +116,7 @@
<script type="text/javascript" src="/website/static/src/snippets/s_chart/options.js"/>
<script type="text/javascript" src="/website/static/src/snippets/s_rating/options.js"/>
<script type="text/javascript" src="/website/static/src/snippets/s_tabs/options.js"/>
<script type="text/javascript" src="/website/static/src/snippets/s_progress_bar/options.js"/>
<script type="text/javascript" src="/website/static/src/js/editor/wysiwyg_multizone.js"/>
<script type="text/javascript" src="/website/static/src/js/editor/wysiwyg_multizone_translate.js"/>
addons/website/views/snippets/s_progress_bar.xml
+40
View File
@@ -0,0 +1,40 @@
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template name="Progress Bar" id="s_progress_bar">
<div class="s_progress_bar" data-display="inline">
<h4>We are almost done!</h4>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="s_progress_bar_text">80% Development</span>
</div>
</div>
</div>
</template>
<template id="s_progress_bar_options" inherit_id="website.snippet_options">
<xpath expr="." position="inside">
<div data-js="progress" data-selector=".s_progress_bar" >
<we-select string="Display">
<we-button data-display="inline">Inline</we-button>
<we-button data-display="below">Below Each Other</we-button>
</we-select>
<we-colorpicker string="Colors" data-apply-to=".progress-bar"
data-select-style="true"
data-css-property="background-color"
data-color-prefix="bg-"/>
<we-checkbox string="Striped" data-select-class="progress-bar-striped" data-apply-to=".progress-bar"/>
<we-checkbox string="Animated" data-select-class="progress-bar-animated" data-apply-to=".progress-bar"/>
</div>
</xpath>
<xpath expr="//div[@id='so_content_addition']" position="attributes">
<attribute name="data-selector" add=".s_progress_bar" separator=","/>
<attribute name="data-drop-near" add=".s_progress_bar" separator=","/>
</xpath>
</template>
<!-- No related CSS but there is some in theme overrides -->
<template id="assets_snippet_s_progress_bar_css_000" inherit_id="website.assets_frontend">
</template>
</odoo>
addons/website/views/snippets/snippets.xml
+2 -2
View File
@@ -96,7 +96,7 @@
<t id="mass_mailing_newsletter_hook"/>
<t t-snippet="website.s_text_highlight" t-thumbnail="/website/static/src/img/snippets_thumbs/s_color_block.png"/>
<t t-snippet="website.s_chart" t-thumbnail="/website/static/src/img/snippets_thumbs/s_chart.png"/>
<!-- Progress Bar -->
<t t-snippet="website.s_progress_bar" t-thumbnail="/website/static/src/img/snippets_thumbs/s_progress_bar.png"/>
<!-- Tags -->
<!-- Quote -->
<t id="event_speaker_bio_hook"/>
@@ -326,7 +326,7 @@
t-att-data-selector="so_snippet_addition_selector"
data-drop-in=":not(p).oe_structure:not(.oe_structure_solo), :not(p)[data-oe-type=html], :not(p).oe_structure.oe_structure_solo:not(:has(> section, > div))"/>
<t t-set="so_content_addition_selector" t-translation="off">blockquote, .s_card, .s_alert, .o_facebook_page, .s_share, .s_rating, .s_hr, .s_countdown, .s_chart, .s_text_highlight</t>
<t t-set="so_content_addition_selector" t-translation="off">blockquote, .s_card, .s_alert, .o_facebook_page, .s_share, .s_rating, .s_hr, .s_countdown, .s_chart, .s_text_highlight, .s_progress_bar</t>
<div id="so_content_addition"
t-att-data-selector="so_content_addition_selector"
t-attf-data-drop-near="p, h1, h2, h3, .row > div > img, #{so_content_addition_selector}"