odoo
/
odoo
2
0
Fork 0
Code Pull Requests Releases Activity

[IMP] website: replace the select box into dropdown for link editor to have a preview

This commit is contained in:
Christophe Matthieu 2014-07-11 11:09:24 +02:00
parent 67e15d8d86
commit 1eee1d2c51
4 changed files with 82 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
addons/website/static/src/css/editor.css
View File

@ -165,6 +165,23 @@ table.editorbar-panel td.selected {
background-color: #b1c9d9;
}
.link-style .dropdown > .btn {
min-width: 160px;
}
.link-style .link-style {
display: none;
}
.link-style li {
text-align: center;
}
.link-style li label {
width: 100px;
margin: 0 5px;
}
.link-style .col-sm-2 > * {
line-height: 2em;
}
/* ---- TRANSLATIONS ---- {{{ */
.oe_translate_or {
color: white;

13
addons/website/static/src/css/editor.sass
View File

@ -134,6 +134,19 @@ table.editorbar-panel
td.selected
background-color: #b1c9d9
.link-style
.dropdown > .btn
min-width: 160px
.link-style
display: none
li
text-align: center
label
width: 100px
margin: 0 5px
.col-sm-2 > *
line-height: 2em
// }}}
/* ---- TRANSLATIONS ---- {{{ */

10
addons/website/static/src/js/website.editor.js
View File

@ -947,7 +947,7 @@
'change input#link-text': function (e) {
this.text = $(e.target).val();
},
'change select.link-style': function (e) {
'change .link-style': function (e) {
this.preview();
},
}),
@ -1006,8 +1006,8 @@
def.reject();
}
var style = this.$("#link-style-type").val();
var size = this.$("#link-style-size").val();
var style = this.$("input[name='link-style-type']:checked").val();
var size = this.$("input[name='link-style-size']:checked").val();
var classes = (style && style.length ? "btn " : "") + style + " " + size;
if ($e.hasClass('email-address') && $e.val().indexOf("@") !== -1) {
@ -1056,10 +1056,10 @@
var classes = this.element && this.element.$.className;
if (classes) {
this.$('option[value!=""]').each(function () {
this.$('input[value!=""]').each(function () {
var $option = $(this);
if (classes.indexOf($option.val()) !== -1) {
$option.attr("selected", "selected");
$option.attr("checked", "checked");
}
});
}

69
addons/website/static/src/xml/website.editor.xml
View File

@ -76,38 +76,63 @@
</div>
</div>
</div>
<div class="form-horizontal">
<div class="form-horizontal link-style">
<div class="form-group">
<label for="link-style-type" class="col-sm-2 control-label">
<label class="col-sm-2 control-label">
Style
</label>
<div class="col-sm-5">
<select id="link-style-type" class="form-control link-style" style="display: inline-block;">
<option value="" selected="selected">Link</option>
<option value="btn-default">Basic</option>
<option value="btn-primary">Primary</option>
<option value="btn-success">Success</option>
<option value="btn-info">Info</option>
<option value="btn-warning">Warning</option>
<option value="btn-danger">Danger</option>
</select>
<div class="col-sm-4">
<div class="dropdown" style="line-height: 2em;">
<a data-toggle="dropdown" class="btn btn-default" href="#">Color Style <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>
<label class="btn btn-link">Link<input value="" class="link-style" type="radio" name="link-style-type" checked="checked"/></label>
</li>
<li>
<label class="btn btn-default">Basic<input value="btn-default" class="link-style" type="radio" name="link-style-type"/></label>
</li>
<li>
<label class="btn btn-primary">Primary<input value="btn-primary" class="link-style" type="radio" name="link-style-type"/></label>
</li>
<li>
<label class="btn btn-info">Info<input value="btn-info" class="link-style" type="radio" name="link-style-type"/></label>
</li>
<li>
<label class="btn btn-warning">Warning<input value="btn-warning" class="link-style" type="radio" name="link-style-type"/></label>
</li>
<li>
<label class="btn btn-danger">Danger<input value="btn-danger" class="link-style" type="radio" name="link-style-type"/></label>
</li>
</ul>
</div>
</div>
<div class="col-sm-5">
<select id="link-style-size" class="form-control link-style" style="display: inline-block;">
<option value="btn-xs">Extra Small</option>
<option value="btn-sm">Small</option>
<option value="" selected="selected">Default</option>
<option value="btn-lg">Large</option>
</select>
<div class="col-sm-4">
<div class="dropdown" style="line-height: 2em;">
<a data-toggle="dropdown" class="btn btn-default" href="#">Size <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>
<label class="btn btn-default btn-xs">Extra Small<input value="btn-xs" class="link-style" type="radio" name="link-style-size"/></label>
</li>
<li>
<label class="btn btn-default btn-sm">Small<input value="btn-sm" class="link-style" type="radio" name="link-style-size"/></label>
</li>
<li>
<label class="btn btn-default">Default<input value="" class="link-style" type="radio" name="link-style-size" checked="checked"/></label>
</li>
<li>
<label class="btn btn-default btn-lg">Large<input value="btn-lg" class="link-style" type="radio" name="link-style-size"/></label>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="form-horizontal">
<div class="form-horizontal link-style">
<div class="form-group">
<label for="link-text" class="col-sm-2 control-label">
<label class="col-sm-2 control-label">
Preview
</label>
<div class="col-sm-10" style="line-height: 2;">
<div class="col-sm-10" style="line-height: 2em;">
<a id="link-preview" href="#"></a>
</div>
</div>