[IMP] web_editor: simplify button color choices
Now only suggest bootstrap classes for buttons: link/primary/secondary. Also review the link dialog to show only the options which are meaningful to the chosen type. Note: it will still be possible to change from an old color to primary or secondary). Part of https://github.com/odoo/odoo/pull/52220 task-2197038
This commit is contained in:
qsm-odoo
@@ -19,6 +19,7 @@ var LinkDialog = Dialog.extend({
|
||||
]),
|
||||
events: _.extend({}, Dialog.prototype.events || {}, {
|
||||
'input': '_onAnyChange',
|
||||
'change [name="link_style_color"]': '_onTypeChange',
|
||||
'change': '_onAnyChange',
|
||||
'input input[name="url"]': '_onURLInput',
|
||||
}),
|
||||
@@ -27,20 +28,28 @@ var LinkDialog = Dialog.extend({
|
||||
* @constructor
|
||||
*/
|
||||
init: function (parent, options, editable, linkInfo) {
|
||||
var self = this;
|
||||
this.options = options || {};
|
||||
|
||||
this._super(parent, _.extend({
|
||||
title: _t("Link to"),
|
||||
}, this.options));
|
||||
|
||||
this.trigger_up('getRecordInfo', {
|
||||
recordInfo: this.options,
|
||||
callback: function (recordInfo) {
|
||||
_.defaults(self.options, recordInfo);
|
||||
callback: recordInfo => {
|
||||
_.defaults(this.options, recordInfo);
|
||||
},
|
||||
});
|
||||
|
||||
this.colorsData = [
|
||||
{type: '', label: _t("Link"), btnPreview: 'link'},
|
||||
{type: 'primary', label: _t("Primary"), btnPreview: 'primary'},
|
||||
{type: 'secondary', label: _t("Secondary"), btnPreview: 'secondary'},
|
||||
// Note: by compatibility the dialog should be able to remove old
|
||||
// colors that were suggested like the BS status colors or the
|
||||
// alpha -> epsilon classes. This is currently done by removing
|
||||
// all btn-* classes anyway.
|
||||
];
|
||||
|
||||
this.editable = editable;
|
||||
this.data = linkInfo || {};
|
||||
|
||||
@@ -142,6 +151,8 @@ var LinkDialog = Dialog.extend({
|
||||
start: function () {
|
||||
var self = this;
|
||||
|
||||
this.buttonOptsCollapseEl = this.el.querySelector('#o_link_dialog_button_opts_collapse');
|
||||
|
||||
this.$('input.link-style').prop('checked', false).first().prop('checked', true);
|
||||
if (this.data.iniClassName) {
|
||||
this.$('input[name="link_style_color"], select[name="link_style_size"] > option, select[name="link_style_shape"] > option').each(function () {
|
||||
@@ -163,21 +174,7 @@ var LinkDialog = Dialog.extend({
|
||||
this._onURLInput();
|
||||
}
|
||||
|
||||
// Hide the duplicate color buttons (most of the times, primary = alpha
|
||||
// and secondary = beta for example but this may depend on the theme)
|
||||
this.opened().then(function () {
|
||||
var colors = [];
|
||||
_.each(self.$('.o_link_dialog_color .o_btn_preview'), function (btn) {
|
||||
var $btn = $(btn);
|
||||
var color = $btn.css('background-color');
|
||||
if (_.contains(colors, color)) {
|
||||
$btn.hide(); // Not remove to be able to edit buttons with those styles
|
||||
} else {
|
||||
colors.push(color);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
this._updateOptionsUI();
|
||||
this._adaptPreview();
|
||||
|
||||
this.$('input:visible:first').focus();
|
||||
@@ -285,6 +282,13 @@ var LinkDialog = Dialog.extend({
|
||||
isNewWindow: isNewWindow,
|
||||
};
|
||||
},
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_updateOptionsUI: function () {
|
||||
const el = this.el.querySelector('[name="link_style_color"]:checked');
|
||||
$(this.buttonOptsCollapseEl).collapse(el && el.value ? 'show' : 'hide');
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Handlers
|
||||
@@ -296,6 +300,12 @@ var LinkDialog = Dialog.extend({
|
||||
_onAnyChange: function () {
|
||||
this._adaptPreview();
|
||||
},
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_onTypeChange() {
|
||||
this._updateOptionsUI();
|
||||
},
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
|
||||
@@ -364,26 +364,11 @@ body .modal {
|
||||
|
||||
// LINK EDITOR DIALOG COLOR SELECTOR
|
||||
.o_link_dialog {
|
||||
.o_link_dialog_color > .o_link_dialog_color_item {
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 0; // Important for themes
|
||||
border: 2px solid rgba(0, 0, 0, 0.25);
|
||||
border-radius: 50%;
|
||||
|
||||
input:checked + i::before {
|
||||
content: "\f00c";
|
||||
@include o-position-absolute($top: 6px, $left: 5px);
|
||||
}
|
||||
|
||||
&.btn-link {
|
||||
padding: 3px 9px;
|
||||
|
||||
> span {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
input.link-style:checked + span::after {
|
||||
content: "\f00c";
|
||||
display: inline-block;
|
||||
font-family: FontAwesome;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.o_link_dialog_preview {
|
||||
|
||||
@@ -459,42 +459,38 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-form-label col-md-3">Size</label>
|
||||
<div class="col-md-9">
|
||||
<select name="link_style_size" class="form-control link-style">
|
||||
<option value="sm">Small</option>
|
||||
<option value="" selected="selected">Medium</option>
|
||||
<option value="lg">Large</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-form-label col-md-3">Style</label>
|
||||
<div class="col-md-9">
|
||||
<select name="link_style_shape" class="form-control link-style">
|
||||
<option value="" selected="selected">Default</option>
|
||||
<option value="outline">Outline</option>
|
||||
<option value="rounded-circle">Rounded</option>
|
||||
<option value="outline,rounded-circle">Outline-Rounded</option>
|
||||
<option value="flat">Flat</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-form-label col-md-3">Color</label>
|
||||
<div class="col-md-9">
|
||||
<div class="o_link_dialog_color">
|
||||
<label role="button" t-attf-class="o_link_dialog_color_item o_btn_preview btn btn-link text-center" data-color="">
|
||||
<span>L</span>
|
||||
<input class="d-none link-style" name="link_style_color" type="radio" value=""/>
|
||||
<i class="fa"/>
|
||||
<label class="col-form-label col-md-3">Type</label>
|
||||
<div class="col-md-9 d-flex align-items-center">
|
||||
<t t-foreach="widget.colorsData" t-as="colorData">
|
||||
<label role="button" class="m-0 mr-2">
|
||||
<input type="radio" name="link_style_color" class="d-none link-style" t-att-value="colorData.type"/>
|
||||
<span t-esc="colorData.label"
|
||||
t-attf-class="o_btn_preview btn btn-sm btn-#{colorData.btnPreview} #{colorData.type ? '' : 'px-0'}"/>
|
||||
</label>
|
||||
<t t-foreach="['alpha', 'beta', 'gamma', 'delta', 'epsilon', 'primary', 'secondary', 'success', 'info', 'warning', 'danger']" t-as="color">
|
||||
<label role="button" t-attf-class="o_link_dialog_color_item o_btn_preview btn btn-#{color}" t-attf-aria-label="Color for #{color}" t-attf-title="Color for #{color}">
|
||||
<input type="radio" name="link_style_color" class="d-none link-style" t-att-value="color"/>
|
||||
<i class="fa"/>
|
||||
</label>
|
||||
</t>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
<div id="o_link_dialog_button_opts_collapse" class="collapse">
|
||||
<div class="form-group row">
|
||||
<label class="col-form-label col-md-3">Size</label>
|
||||
<div class="col-md-9">
|
||||
<select name="link_style_size" class="form-control link-style">
|
||||
<option value="sm">Small</option>
|
||||
<option value="" selected="selected">Medium</option>
|
||||
<option value="lg">Large</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-form-label col-md-3">Style</label>
|
||||
<div class="col-md-9">
|
||||
<select name="link_style_shape" class="form-control link-style">
|
||||
<option value="" selected="selected">Default</option>
|
||||
<option value="outline">Outline</option>
|
||||
<option value="rounded-circle">Rounded</option>
|
||||
<option value="outline,rounded-circle">Outline-Rounded</option>
|
||||
<option value="flat">Flat</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user