Skip to content
This repository was archived by the owner on Mar 14, 2020. It is now read-only.

[property view] implement a new input for custom icons #102

Closed
zeroooing wants to merge 1 commit into from
Closed

[property view] implement a new input for custom icons #102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions src/css/builder.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -774,6 +774,46 @@ body.ui-tabs.ui-widget {
border-radius: 6px;
text-decoration: none;
}
.propertyView .droplist {

@zhizhangchen zhizhangchen Jul 2, 2012

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think "datalist" might be a better name than "droplist"

background: #fff;
border-top: 0;
top: 27px;
left: 0;
-webkit-box-shadow: 0 4px 5px rgba(0,0,0,.15);
z-index: 999;
width: 100%;
border-radius: 0 0 5px 5px;
padding: 0px 5px;
}
.propertyView .droplist li {
clear:both;
cursor: pointer;
line-height: 80%;
padding: 7px 0px 8px;
margin: 0;
list-style: none;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white));
background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%);
}
.propertyView .droplist li:hover {
background-image: none;
background-color:#b0c4de;
}
.propertyView .droplist > ul {
list-style-type: none ;
margin: 0 4px 4px 0;
max-height: 200px;
padding: 0px;
position: relative;
overflow-x: hidden;
overflow-y: auto;
}
.propertyView .datalist-input {
border-radius: 5px 5px 0px 0px;
outline-color: #E59700;
outline-style: auto;
outline-width: 5px;
}
.propertyView .buttonStyle:focus,
.propertyView .buttonStyle:hover {
color: #eee;
Expand Down
47 changes: 47 additions & 0 deletions src/js/views/property.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -294,6 +294,53 @@
},
});
break;
case "datalist":
$('<div class="title"/>')
.append(
$('<input type="text" value=""/>')
.attr('id', valueId)
.addClass('labelInput')
.click({'p': p, 'value': value}, function(e){
var o, value = e.data.value, p = e.data.p;
value.find('ul').html("");
for(o in options[p]) {
$('<li>' + options[p][o] + '</li>').appendTo(value.find('ul'));
}
$(this).toggleClass('datalist-input');
value.find('.droplist').toggle();
return false;
})
.keyup({ 'p' : p, 'value' : value}, function(e){
var matchedOptions = [], o,
inputedText = this.value,
value = e.data.value;
matchedOptions = $.grep(options[e.data.p], function(item, i){
return item.indexOf(inputedText) >= 0;
});
value.find('ul').html("");

for (o in matchedOptions) {
$('<li>' + matchedOptions[o] + '</li>')
.appendTo(value.find('ul'));
}
$(this).addClass('datalist-input');
value.find('.droplist').show();
})
)
.append(
$('<div style="display:none"/>')
.addClass('droplist')
.append('<ul/>')
)
.appendTo(value);
value.delegate(".droplist li", "click", {'valueId': valueId, 'value': value}, function(e) {
var value = e.data.value,
valueId = e.data.valueId;
value.find('#'+ valueId).val($(this).text()).change().end()
.find('.droplist').hide().end();
});
value.find('#'+ valueId).val(valueVal);
break;
default:
// handle property has options
if (options[p]) {
Expand Down
2 changes: 1 addition & 1 deletion src/js/widgets.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -580,7 +580,7 @@ var BWidgetRegistry = {
htmlAttribute: "data-rel"
},
icon: {
type: "string",
type: "datalist",
options: [ "none", "alert", "arrow-d", "arrow-l", "arrow-r",
"arrow-u", "back", "check", "delete", "forward",
"gear", "grid", "home", "info", "minus", "plus",
Expand Down