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

[IMP] replace icon size select by selectable multi-size preview 

bzr revid: xmo@openerp.com-20140120162604-yoyg21bf1z306hwg
This commit is contained in:
Xavier Morel 2014-01-20 17:26:04 +01:00
parent 501e88d3eb
commit ca02581993
4 changed files with 59 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -219,6 +219,16 @@ ul.oe_menu_editor .disclose {
text-align: center;
cursor: pointer;
}
.modal #fa-preview {
text-align: center;
}
.modal #fa-preview span {
cursor: pointer;
padding: 0 15px;
}
.modal #fa-preview .font-icons-selected {
background-color: #dddddd;
}
.existing-attachments .pager .disabled {
display: none;

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

@ -173,17 +173,28 @@ ul.oe_menu_editor
visibility: visible !important
// fontawesome modal
.modal .font-icons-icons
font-size: 2em
max-height: 6em
overflow: auto
.modal
.font-icons-icons
font-size: 2em
max-height: 6em
overflow: auto
.font-icons-icon
display: inline-block
width: 2em
padding: 0.25em
.font-icons-icon
display: inline-block
width: 2em
padding: 0.25em
text-align: center
cursor: pointer
#fa-preview
text-align: center
cursor: pointer
span
cursor: pointer
padding: 0 15px
.font-icons-selected
background-color: #ddd
.existing-attachments .pager .disabled
display: none

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

@ -1463,6 +1463,13 @@
this.$('#fa-icon').val(e.target.getAttribute('data-id'));
this.update_preview();
},
'click #fa-preview span': function (e) {
e.preventDefault();
e.stopPropagation();
this.$('#fa-size').val(e.target.getAttribute('data-size'));
this.update_preview();
}
}),
// List of FontAwesome icons in 4.0.3, extracted from the cheatsheet.
@ -1508,7 +1515,7 @@
for (var i = 0; i < classes.length; i++) {
var cls = classes[i];
switch(cls) {
case 'fa-lg':case 'fa-2x':case 'fa-3x':case 'fa-4x':case 'fa-5x':
case 'fa-2x':case 'fa-3x':case 'fa-4x':case 'fa-5x':
// size classes
this.$('#fa-size').val(cls);
continue;
@ -1545,7 +1552,24 @@
];
},
update_preview: function () {
this.$('#fa-preview')[0].className = this.get_fa_classes().join(' ');
var $preview = this.$('#fa-preview').empty();
var sizes = ['', 'fa-2x', 'fa-3x', 'fa-4x', 'fa-5x'];
var classes = this.get_fa_classes();
var no_sizes = _.difference(classes, sizes).join(' ');
var selected = false;
for (var i = sizes.length - 1; i >= 0; i--) {
var size = sizes[i];
var $p = $('<span>')
.attr('data-size', size)
.addClass(size)
.addClass(no_sizes);
if ((size && _.contains(classes, size)) || (!size && !selected)) {
$p.addClass('font-icons-selected');
selected = true;
}
$preview.prepend($p);
}
}
});

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

@ -207,12 +207,12 @@
<t t-call="website.editor.dialog">
<t t-set="title">Icon:</t>
<form>
<div class="form-group">
Preview: <span id="fa-preview"/>
<div class="form-group" id="fa-preview">
</div>
<div class="form-group fa">
<label for="fa-icon">icon</label>
<input type="hidden" id="fa-icon" class="form-control"/>
<input type="hidden" id="fa-size" class="form-control"/>
<div class="font-icons-icons">
<span t-foreach="widget.icons" t-as="icon"
class="fa font-icons-icon"
@ -221,17 +221,6 @@
</span>
</div>
</div>
<div class="form-group">
<label for="fa-size">size</label>
<select id="fa-size" class="form-control">
<option value="">Default</option>
<option value="fa-lg">Large</option>
<option value="fa-2x">x2</option>
<option value="fa-3x">x3</option>
<option value="fa-4x">x4</option>
<option value="fa-5x">x5</option>
</select>
</div>
<div class="form-group">
<label for="fa-rotation">Rotation</label>
<select id="fa-rotation" class="form-control">