[REF] *: BS4, adapt input-group structure

The input-group-addon class has been replaced by a combination of the
input-group-text and the input-group-append/prepend classes. The
input-group-btn class is replaced by the input-group-append/prepend
classes.
This commit is contained in:
qsm-odoo
2018-07-27 12:36:54 +02:00
parent 59237ea819
commit b437808f66
24 changed files with 113 additions and 74 deletions
+2 -2
View File
@@ -217,7 +217,7 @@
<div t-if='searchbar_inputs' class="collapse navbar-collapse text-right" id="o_portal_searchbar_collapse">
<div class="navbar-form o_portal_search_panel">
<div class="input-group">
<div class="input-group-btn">
<div class="input-group-prepend">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
<span id="search_label" class="d-none d-md-inline mr4">Search</span>
</button>
@@ -231,7 +231,7 @@
</div>
</div>
<input type="text" class="form-control" t-att-value='search' name="search"/>
<span class="input-group-btn">
<span class="input-group-append">
<button class="btn btn-secondary search-submit" type="button"><span class="fa fa-search d-none d-md-inline-block"/><span class="fa fa-arrow-right d-inline-block d-md-none"/></button>
</span>
</div>
+1 -1
View File
@@ -30,7 +30,7 @@ if(!the_form.length) {
// Printing mode: will disable all the controls in the form
if (_.isUndefined(submit_controller)) {
$(".js_surveyform .input-group-addon span.fa-calendar").css("pointer-events", "none");
$(".js_surveyform .input-group-text span.fa-calendar").css("pointer-events", "none");
$('.js_surveyform :input').prop('disabled', true);
print_mode = true;
}
+1 -1
View File
@@ -52,7 +52,7 @@
<div class="o_kanban_header">
<div class="input-group">
<input type="text" class="o_input" placeholder="Column title"/>
<span class="input-group-btn">
<span class="input-group-append">
<button class="btn btn-primary o_kanban_add" type="button">Add</button>
</span>
</div>
+2 -2
View File
@@ -361,8 +361,8 @@
<label for="db" class="control-label">Database</label>
<div class="input-group">
<input type="text" name="db" t-att-value="request.db" id="db" class="form-control" required="required" readonly="readonly"/>
<span class="input-group-btn">
<a role="button" href="/web/database/selector" class="btn btn-secondary">Select <i class="fa fa-database" role="img" aria-label="Database" title="Database"></i></a>
<span class="input-group-append">
<a role="button" href="/web/database/selector" class="btn btn-secondary">Select <i class="fa fa-database" role="img" aria-label="Database" title="Database"></i></a>
</span>
</div>
</div>
+12 -4
View File
@@ -388,7 +388,9 @@
<div class="col-md-5">
<div class="input-group">
<input type="number" min="0" max="100" class="form-control input-sm" id="o_bg_img_opt_custom_size_x" placeholder="auto"/>
<div class="input-group-addon">%</div>
<div class="input-group-append">
<div class="input-group-text">%</div>
</div>
</div>
</div>
</div>
@@ -397,7 +399,9 @@
<div class="col-md-5">
<div class="input-group">
<input type="number" min="0" max="100" class="form-control input-sm" id="o_bg_img_opt_custom_size_y" placeholder="auto"/>
<div class="input-group-addon">%</div>
<div class="input-group-append">
<div class="input-group-text">%</div>
</div>
</div>
</div>
</div>
@@ -410,7 +414,9 @@
<div class="col-md-5">
<div class="input-group">
<input type="number" min="0" max="100" class="form-control input-sm" id="o_bg_img_opt_custom_pos_x" placeholder="auto"/>
<div class="input-group-addon">%</div>
<div class="input-group-append">
<div class="input-group-text">%</div>
</div>
</div>
</div>
</div>
@@ -419,7 +425,9 @@
<div class="col-md-5">
<div class="input-group">
<input type="number" min="0" max="100" class="form-control input-sm" id="o_bg_img_opt_custom_pos_y" placeholder="auto"/>
<div class="input-group-addon">%</div>
<div class="input-group-append">
<div class="input-group-text">%</div>
</div>
</div>
</div>
</div>
@@ -3,14 +3,16 @@
<t t-name="website.contentMenu.dialog.submenu">
<li t-att-data-menu-id="submenu.id">
<div class="input-group">
<span class="input-group-addon fa fa-bars" role="img" aria-label="Dropdown menu" title="Dropdown menu"/>
<div class="input-group-prepend">
<span class="input-group-text fa fa-bars" role="img" aria-label="Dropdown menu" title="Dropdown menu"/>
</div>
<span class="form-control">
<span class="js_menu_label">
<t t-esc="submenu.name"/>
</span>
<i t-if="submenu.is_homepage" class="pull-right fa fa-home" style="margin-top: 3px" role="img" aria-label="Home" title="Home"/>
</span>
<span class="input-group-btn">
<span class="input-group-append">
<button type="button" class="btn btn-primary js_edit_menu fa fa-pencil-square-o" aria-label="Edit menu" title="Edit menu"/>
<button type="button" class="btn btn-danger js_delete_menu fa fa-trash-o" aria-label="Delete menu" title="Delete menu"/>
</span>
@@ -57,7 +57,9 @@
<label class="control-label col-md-3" for="page_url">Page URL</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon" t-att-title="widget.serverUrl"><small><t t-esc="widget.serverUrlTrunc"/></small></span>
<div class="input-group-prepend">
<span class="input-group-text" t-att-title="widget.serverUrl"><small><t t-esc="widget.serverUrlTrunc"/></small></span>
</div>
<input type="text" class="form-control input-sm" id="page_url" t-att-value="widget.page.url" />
</div>
</div>
@@ -130,9 +132,11 @@
<div class="col-md-9">
<div class='input-group date' id='date_publish_container'>
<input type='text' class="form-control" name="date_publish" id="date_publish" />
<span class="input-group-addon">
<span class="fa fa-calendar" role="img" aria-label="Publish date" title="Publish date"></span>
</span>
<div class="input-group-append">
<span class="input-group-text">
<span class="fa fa-calendar" role="img" aria-label="Publish date" title="Publish date"></span>
</span>
</div>
</div>
</div>
</div>
@@ -46,10 +46,10 @@
<div class="form-inline" role="form">
<div class="input-group">
<input type="text" style="min-width:170px" name="seo_page_keywords" class="form-control" placeholder="Keyword" maxlength="30"/>
<span class="input-group-btn">
<span class="input-group-append">
<select name="seo_page_language" id="language-box" class="btn form-control"/>
</span>
<span class="input-group-btn">
<span class="input-group-append">
<button data-action="add" class="btn btn-success" type="button">Add</button>
</span>
</div>
+1 -1
View File
@@ -847,7 +847,7 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml
<div class="oe_search">
<input type="text" name="search" class="search-query form-control oe_search_box" placeholder="Search..." t-att-value="search" />
</div>
<span class="input-group-btn">
<span class="input-group-append">
<button type="submit" class="btn btn-secondary oe_search_button" aria-label="Search" title="Search"><i class="fa fa-search"/></button>
</span>
</div>
@@ -668,7 +668,9 @@
<div class="row">
<div class="col-md-6">
<div class="input-group">
<div class="input-group-addon"><span class="text-nowrap" t-esc="opportunity.company_currency.symbol"/></div>
<div class="input-group-prepend">
<div class="input-group-text"><span class="text-nowrap" t-esc="opportunity.company_currency.symbol"/></div>
</div>
<input type="text" name="planned_revenue" class="form-control planned_revenue" t-att-value="opportunity.planned_revenue" placeholder="Planned Revenue"/>
</div>
</div>
@@ -678,7 +680,9 @@
<div class="col-md-5">
<div class="input-group">
<input type="text" name="probability" class="form-control probability" t-att-value="opportunity.probability" placeholder="Probability"/>
<div class="input-group-addon">%</div>
<div class="input-group-append">
<div class="input-group-text">%</div>
</div>
</div>
</div>
</div>
@@ -706,7 +710,9 @@
<label>Deadline: </label>
<div class='input-group date'>
<input type="text" name="date_deadline" t-att-value="opportunity.date_deadline" class="form-control date_deadline" data-date-format="YYYY-MM-DD" t-att-name="prefix" placeholder="YYYY-MM-DD" />
<span class="input-group-addon"><span class="fa fa-calendar" role="img" aria-label="Calendar"></span></span>
<div class="input-group-append">
<span class="input-group-text"><span class="fa fa-calendar" role="img" aria-label="Calendar"></span></span>
</div>
</div>
</div>
</div>
@@ -727,7 +733,9 @@
<label class="control-label" for="activity_date_deadline">Next Activity Date</label>
<div class='input-group date'>
<input type="text" name="activity_date_deadline" t-att-value="user_activity.date_deadline" class="form-control activity_date_deadline" data-date-format="YYYY-MM-DD" t-att-name="prefix" placeholder="YYYY-MM-DD" />
<span class="input-group-addon"><span class="fa fa-calendar" role="img" aria-label="Calendar" title="Calendar"></span></span>
<div class="input-group-append">
<span class="input-group-text"><span class="fa fa-calendar" role="img" aria-label="Calendar" title="Calendar"></span></span>
</div>
</div>
</div>
</main>
+1 -1
View File
@@ -24,7 +24,7 @@ sAnimation.registry.follow = sAnimation.Class.extend({
// not if editable mode to allow designer to edit
if (!this.editableMode) {
$('.js_follow > .input-group-btn.d-none').removeClass('d-none');
$('.js_follow > .input-group-append.d-none').removeClass('d-none');
this.$target.find('.js_follow_btn, .js_unfollow_btn').on('click', function (event) {
event.preventDefault();
self._onClick();
@@ -10,10 +10,10 @@
class="js_follow_email form-control"
placeholder="your email..."
groups="base.group_public"/>
<span class="input-group-btn">
<div class="input-group-append">
<button href="#" t-attf-class="btn btn-secondary js_unfollow_btn">Unsubscribe</button>
<button href="#" t-attf-class="btn btn-primary js_follow_btn">Subscribe</button>
</span>
</div>
</div>
</template>
@@ -30,7 +30,7 @@ sAnimation.registry.follow_alias = sAnimation.Class.extend({
// not if editable mode to allow designer to edit alert field
if (!this.editableMode) {
this.$('> .alert').addClass('d-none');
this.$('> .input-group-btn.d-none').removeClass('d-none');
this.$('> .input-group-append.d-none').removeClass('d-none');
this.$('.js_follow_btn, .js_unfollow_btn').on('click', function (event) {
event.preventDefault();
self._onClick();
@@ -23,7 +23,7 @@
name="email"
class="js_follow_email form-control"
placeholder="your email..."/>
<span class="input-group-btn">
<span class="input-group-append">
<button href="#" class="btn btn-primary js_follow_btn">Subscribe</button>
</span>
</div>
@@ -60,12 +60,12 @@
name="email"
class="js_follow_email form-control"
placeholder="your email..."/>
<span t-if="'unsubscribe' not in request.params" class="input-group-btn">
<div t-if="'unsubscribe' not in request.params" class="input-group-append">
<button href="#" class="btn btn-primary js_follow_btn">Subscribe</button>
</span>
<span t-if="'unsubscribe' in request.params" class="input-group-btn">
</div>
<div t-if="'unsubscribe' in request.params" class="input-group-append">
<button href="#" class="btn btn-primary js_follow_btn">Unsubscribe</button>
</span>
</div>
</div>
<p class="js_mg_details d-none">
<span class="js_mg_email d-none"><a href="#" class="js_mg_email"><i class="fa fa-envelope-o"/> send mail</a> - </span>
@@ -31,7 +31,7 @@ sAnimation.registry.subscribe = sAnimation.Class.extend({
// not if editable mode to allow designer to edit alert field
if (!this.editableMode) {
$('.js_subscribe > .alert').addClass('d-none');
$('.js_subscribe > .input-group-btn.d-none').removeClass('d-none');
$('.js_subscribe > .input-group-append.d-none').removeClass('d-none');
this.$target.find('.js_subscribe_btn').on('click', function (event) {
event.preventDefault();
self._onClick();
@@ -55,7 +55,7 @@ sAnimation.registry.subscribe = sAnimation.Class.extend({
'email': $email.length ? $email.val() : false,
},
}).then(function (subscribe) {
self.$target.find(".js_subscribe_email, .input-group-btn").addClass('d-none');
self.$target.find(".js_subscribe_email, .input-group-append").addClass('d-none');
self.$target.find(".alert").removeClass('d-none');
self.$target.find('input.js_subscribe_email').attr("disabled", subscribe ? "disabled" : false);
self.$target.attr("data-subscribe", subscribe ? 'on' : 'off');
@@ -19,7 +19,7 @@
<template id="s_newsletter_subscribe_form" name="Newsletter">
<div class="oe_snippet_body input-group js_subscribe" data-list-id="0">
<input type="email" name="email" class="js_subscribe_email form-control" placeholder="your email..."/>
<span class="input-group-btn">
<span class="input-group-append">
<a role="button" href="#" class="btn btn-primary js_subscribe_btn">Subscribe</a>
<a role="button" href="#" class="btn btn-success js_subscribed_btn d-none" disabled="disabled">Thanks</a>
</span>
@@ -40,9 +40,9 @@
<div class="o_popup_content_dev" data-oe-placeholder="Type Here ..."/>
<div class="input-group o_not_editable o_popup_animated o_popup_bounce_del500ms o_popup_bounce_small" >
<input type="email" name="email" class="popup_subscribe_email form-control" placeholder="your email..." autofocus="autofocus"/>
<span class="input-group-btn">
<div class="input-group-append">
<a role="button" href="#" class="btn btn-success popup_subscribe_btn">Subscribe</a>
</span>
</div>
</div>
</div>
</div>
@@ -197,17 +197,21 @@
<template id="change_quantity" inherit_id="website_quote.pricing" active="False" customize_show="True" name="Change Quantity">
<xpath expr="//div[@id='quote_qty']" position="replace">
<div class="input-group oe_website_spinner">
<span class="input-group-addon d-print-none">
<a t-attf-href="./update_line/#{ line.id }/?order_id=#{ quotation.id }&amp;remove=True&amp;token=#{ quotation.access_token }" class="mb8 js_update_line_json" aria-label="Remove one" title="Remove one">
<span class="fa fa-minus"/>
</a>
</span>
<div class="input-group-prepend d-print-none">
<span class="input-group-text">
<a t-attf-href="./update_line/#{ line.id }/?order_id=#{ quotation.id }&amp;remove=True&amp;token=#{ quotation.access_token }" class="mb8 js_update_line_json" aria-label="Remove one" title="Remove one">
<span class="fa fa-minus"/>
</a>
</span>
</div>
<input type="text" class="js_quantity form-control" t-att-data-id="line.id" t-att-value="line.product_uom_qty"/>
<span class="input-group-addon d-print-none">
<a t-attf-href="./update_line/#{ line.id }/?order_id=#{ quotation.id }&amp;token=#{ quotation.access_token }" class="mb8 js_update_line_json" aria-label="Add one" title="Add one">
<span class="fa fa-plus"/>
</a>
</span>
<div class="input-group-append d-print-none">
<span class="input-group-text">
<a t-attf-href="./update_line/#{ line.id }/?order_id=#{ quotation.id }&amp;token=#{ quotation.access_token }" class="mb8 js_update_line_json" aria-label="Add one" title="Add one">
<span class="fa fa-plus"/>
</a>
</span>
</div>
</div>
</xpath>
</template>
@@ -194,7 +194,7 @@ odoo.define('website_sale.website_sale', function (require) {
$(oe_website_sale).on('click', 'a.js_add_cart_json', function (ev) {
ev.preventDefault();
var $link = $(ev.currentTarget);
var $input = $link.parent().find("input");
var $input = $link.closest('.input-group').find("input");
var product_id = +$input.closest('*:has(input[name="product_id"])').find('input[name="product_id"]').val();
var min = parseFloat($input.data("min") || 0);
var max = parseFloat($input.data("max") || Infinity);
@@ -36,7 +36,7 @@ tour.register('shop_buy_product', {
{
content: "click on add to cart",
extra_trigger: 'label:contains(Steel) input:propChecked',
trigger: '#product_detail form[action^="/shop/cart/update"] .btn',
trigger: '#product_detail form[action^="/shop/cart/update"] .btn-primary',
},
{
content: "add suggested",
+21 -13
View File
@@ -577,13 +577,17 @@
<template id="product_quantity" inherit_id="website_sale.product" customize_show="True" name="Select Quantity">
<xpath expr="//a[@id='add_to_cart']" position="before">
<div class="css_quantity input-group oe_website_spinner" contenteditable="false">
<a t-attf-href="#" class="mb8 input-group-addon js_add_cart_json" aria-label="Remove one" title="Remove one">
<i class="fa fa-minus"></i>
</a>
<div class="input-group-prepend">
<a t-attf-href="#" class="btn btn-secondary js_add_cart_json" aria-label="Remove one" title="Remove one">
<i class="fa fa-minus"></i>
</a>
</div>
<input type="text" class="form-control quantity" data-min="1" name="add_qty" value="1"/>
<a t-attf-href="#" class="mb8 input-group-addon float_left js_add_cart_json" aria-label="Add one" title="Add one">
<i class="fa fa-plus"></i>
</a>
<div class="input-group-append">
<a t-attf-href="#" class="btn btn-secondary float_left js_add_cart_json" aria-label="Add one" title="Add one">
<i class="fa fa-plus"></i>
</a>
</div>
</div>
</xpath>
</template>
@@ -842,13 +846,17 @@
</td>
<td class="text-center td-qty">
<div class="css_quantity input-group oe_website_spinner">
<a t-attf-href="#" class="mb8 input-group-addon js_add_cart_json d-none d-md-inline-block" aria-label="Remove one" title="Remove one">
<i class="fa fa-minus"></i>
</a>
<div class="input-group-prepend">
<a t-attf-href="#" class="mb8 btn btn-link js_add_cart_json d-none d-md-inline-block" aria-label="Remove one" title="Remove one">
<i class="fa fa-minus"></i>
</a>
</div>
<input type="text" class="js_quantity form-control quantity" t-att-data-line-id="line.id" t-att-data-product-id="line.product_id.id" t-att-value="int(line.product_uom_qty) == line.product_uom_qty and int(line.product_uom_qty) or line.product_uom_qty" />
<a t-attf-href="#" class="mb8 input-group-addon float_left js_add_cart_json d-none d-md-inline-block" aria-label="Add one" title="Add one">
<i class="fa fa-plus"></i>
</a>
<div class="input-group-append">
<a t-attf-href="#" class="mb8 btn btn-link float_left js_add_cart_json d-none d-md-inline-block" aria-label="Add one" title="Add one">
<i class="fa fa-plus"></i>
</a>
</div>
</div>
</td>
<td class="text-center td-price" name="price">
@@ -1007,7 +1015,7 @@
<input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
<div class="input-group" style='margin-left:auto; margin-right: auto'>
<input name="promo" style='min-width:180px' class="form-control" type="text" placeholder="code..." t-att-value="website_sale_order.pricelist_id.code or None" />
<div class="input-group-btn">
<div class="input-group-append">
<a role="button" class="btn btn-secondary a-submit">Apply</a>
</div>
</div>
@@ -57,13 +57,17 @@
</td>
<td class="text-center td-qty">
<div class="css_quantity input-group oe_website_spinner">
<a t-attf-href="#" class="mb8 input-group-addon js_add_cart_json d-none d-md-inline-block" aria-label="Remove one" title="Remove one">
<i class="fa fa-minus"></i>
</a>
<div class="input-group-prepend">
<a t-attf-href="#" class="btn btn-secondary js_add_cart_json d-none d-md-inline-block" aria-label="Remove one" title="Remove one">
<i class="fa fa-minus"></i>
</a>
</div>
<input type="text" class="js_quantity form-control quantity" data-min="1" name="add_qty" value="1"/>
<a t-attf-href="#" class="mb8 input-group-addon float_left js_add_cart_json d-none d-md-inline-block" aria-label="Add one" title="Add one">
<i class="fa fa-plus"></i>
</a>
<div class="input-group-append">
<a t-attf-href="#" class="btn btn-secondary float_left js_add_cart_json d-none d-md-inline-block" aria-label="Add one" title="Add one">
<i class="fa fa-plus"></i>
</a>
</div>
</div>
</td>
<td class="text-center td-price" name="price">
@@ -13,9 +13,11 @@
</xpath>
<xpath expr="//div[hasclass('css_quantity')]//i[hasclass('fa-plus')]/.." position="replace">
<t t-if="line._get_stock_warning(clear=False)">
<a t-attf-href="#" class="mb8 input-group-addon">
<i class='fa fa-warning text-warning' t-att-title="line._get_stock_warning()" role="img" aria-label="Warning"/>
</a>
<div class="input-group-append">
<a t-attf-href="#" class="btn btn-link">
<i class='fa fa-warning text-warning' t-att-title="line._get_stock_warning()" role="img" aria-label="Warning"/>
</a>
</div>
</t>
<t t-else="1">
<t>$0</t>
@@ -57,4 +59,3 @@
</odoo>
@@ -110,7 +110,7 @@
<form t-attf-action="/slides/#{slug(channel)}" role="search" method="get">
<div class="input-group">
<input type="text" class="form-control" name="search" t-attf-placeholder="Search in #{channel.name}" t-att-value="search"/>
<span class="input-group-btn">
<span class="input-group-append">
<button class="btn btn-primary" type="submit" aria-label="Search" title="Search">
<i class="fa fa-search"></i>
</button>
@@ -702,7 +702,7 @@
<form class="form-group oe_slide_js_share_email" role="form">
<div class="input-group col-lg-6">
<input type="email" class="form-control" placeholder="your-friend@domain.com"/>
<span class="input-group-btn">
<span class="input-group-append">
<button class="btn btn-primary" type="button"
data-loading-text="Sending..."
t-attf-data-slide-id="#{slide.id}"