Skip to content

Commit

Permalink
Merge pull request olton#477 from greensolid/develop
Browse files Browse the repository at this point in the history 
Enhancements to dropdown, menu, slider and forms
  • Loading branch information
@olton
olton committed Feb 10, 2014
2 parents d00c6f4 + d6f15fe commit 6e2d297
Show file tree
Hide file tree
Showing 7 changed files with 45 additions and 83 deletions.
7 changes: 4 additions & 3 deletions docs/js/metro/metro-dropdown.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
(function( $ ) {
$.widget("metro.dropdown", {

version: "1.0.0",
version: "1.0.1",

options: {
effect: 'slide'
effect: 'slide',
toggleElement: false
},

_create: function(){
var that = this,
menu = this.element,
name = this.name,
parent = this.element.parent(),
toggle = parent.children('.dropdown-toggle');
toggle = this.options.toggleElement || parent.children('.dropdown-toggle');

if (menu.data('effect') != undefined) {
this.options.effect = menu.data('effect');
Expand Down
92 changes: 18 additions & 74 deletions docs/js/metro/metro-input-control.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,7 @@
case "search": control = this._createInputSearch(); break;
case "email": control = this._createInputEmail(); break;
case "tel": control = this._createInputTel(); break;
case "number": control = this._createInputNum(); break;
default: control = this._createInputText();
}

Expand Down Expand Up @@ -263,95 +264,38 @@
},

_createInputSearch: function(){
var element = this.element;

var wrapper = $("<div/>").addClass("input-control").addClass("text");
var button = $("<button/>").addClass("btn-search");
var clone = element.clone(true);
var parent = element.parent();

clone.appendTo(wrapper);
button.appendTo(wrapper);

wrapper.insertBefore(element);
element.remove();

return wrapper;
return this._createInputVal("text", "btn-search");
},

_createInputNum: function(){
return this._createInputVal("number", "btn-clear");
},

_createInputTel: function(){
var element = this.element;

var wrapper = $("<div/>").addClass("input-control").addClass("tel");
var button = $("<button/>").addClass("btn-clear");
var clone = element.clone(true);
var parent = element.parent();

clone.appendTo(wrapper);
button.appendTo(wrapper);

wrapper.insertBefore(element);
element.remove();

return wrapper;
return this._createInputVal("tel", "btn-clear");
},

_createInputEmail: function(){
var element = this.element;

var wrapper = $("<div/>").addClass("input-control").addClass("email");
var button = $("<button/>").addClass("btn-clear");
var clone = element.clone(true);
var parent = element.parent();

clone.appendTo(wrapper);
button.appendTo(wrapper);

wrapper.insertBefore(element);
element.remove();

return wrapper;
return this._createInputVal("email", "btn-clear");
},

_createInputText: function(){
var element = this.element;

var wrapper = $("<div/>").addClass("input-control").addClass("text");
var button = $("<button/>").addClass("btn-clear");
var clone = element.clone(true);
var parent = element.parent();

clone.appendTo(wrapper);
button.appendTo(wrapper);

wrapper.insertBefore(element);
element.remove();

return wrapper;
return this._createInputVal("text", "btn-clear");
},

_createInputPassword: function(){
var element = this.element;

var wrapper = $("<div/>").addClass("input-control").addClass("password");
var button = $("<button/>").addClass("btn-reveal");
var clone = element.clone(true);
var parent = element.parent();

clone.appendTo(wrapper);
button.appendTo(wrapper);

wrapper.insertBefore(element);
element.remove();

return wrapper;
return this._createInputVal("password", "btn-reveal");
},

_createInputFile: function(){
var element = this.element;
return this._createInputVal("file", "btn-file");
},

_createInputVal: function(name, buttonName) {
var element = this.element;

var wrapper = $("<div/>").addClass("input-control").addClass("file");
var button = $("<button/>").addClass("btn-file");
var wrapper = $("<div/>").addClass("input-control").addClass(name);
var button = $("<button/>").addClass(buttonName);
var clone = element.clone(true);
var parent = element.parent();

Expand All @@ -362,7 +306,7 @@
element.remove();

return wrapper;
},
},

_destroy: function(){},

Expand Down
2 changes: 1 addition & 1 deletion docs/js/metro/metro-notify.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@

if(this._notify != undefined) {
this._notify.hide('slow', function() {
$(this).remove();
this.remove();
_notifies.splice(_notifies.indexOf(this._notify), 1);
});
return this;
Expand Down
4 changes: 4 additions & 0 deletions docs/menus.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,6 +180,7 @@ <h4>Default</h4>
<li class="disabled"><a href="#">Disabled link</a></li>
<li class="divider"></li>
<li class="checked"><a href="#">Checked link</a></li>
<li class="unchecked"><a href="#">Unchecked link</a></li>
</ul>
</div>
<div class="span4">
Expand All @@ -194,6 +195,7 @@ <h4>Inverse</h4>
<li class="disabled"><a href="#">Disabled link</a></li>
<li class="divider"></li>
<li class="checked"><a href="#">Checked link</a></li>
<li class="unchecked"><a href="#">Unchecked link</a></li>
</ul>
</div>
<div class="span4">
Expand All @@ -208,6 +210,7 @@ <h4>Dark</h4>
<li class="disabled"><a href="#">Disabled link</a></li>
<li class="divider"></li>
<li class="checked"><a href="#">Checked link</a></li>
<li class="unchecked"><a href="#">Unchecked link</a></li>
</ul>
</div>
</div>
Expand All @@ -224,6 +227,7 @@ <h4>Dark</h4>
&lt;li class="disabled"&gt;&lt;a href="#"&gt;Disabled link&lt;/a&gt;&lt;/li&gt;
&lt;li class="divider"&gt;&lt;/li&gt;
&lt;li class="checked"&gt;&lt;a href="#"&gt;Checked link&lt;/a&gt;&lt;/li&gt;
&lt;li class="unchecked"&gt;&lt;a href="#"&gt;Unchecked link&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;ul class="dropdown-menu" data-role="dropdown"&gt;...&lt;/ul&gt;
Expand Down
5 changes: 4 additions & 1 deletion docs/slider.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,11 +147,14 @@ <h4>Options</h4>
</pre>
<pre class="prettyprint linenums">
$(function(){
$("#slider").slider({
var slider = $("#slider").slider({
position: 10,
accuracy: 1
});
});

// Short method to set position
slider.slider('value', 15);
</pre>
<p>This component required <code>metro-slider.js</code></p>
</div>
Expand Down
10 changes: 7 additions & 3 deletions less/forms.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,7 @@ label {
}

.input-control {
&.text, &.password, &.file, &.email, &.tel {
&.text, &.password, &.file, &.email, &.tel, &.number {
display: inline-block;
cursor: pointer;
position: relative;
Expand Down Expand Up @@ -336,7 +336,7 @@ label {
}

.input-control {
&.text, &.password, &.select, &.textarea, &.file, &.email, &.tel {
&.text, &.password, &.select, &.textarea, &.file, &.email, &.tel, &.number {
&.warning-state {
input, select, textarea {
border-color: @orange;
Expand Down Expand Up @@ -380,7 +380,7 @@ label {
}

.input-control {
&.text, &.password, &.select, &.textarea, &.file, &.email, &.tel {
&.text, &.password, &.select, &.textarea, &.file, &.email, &.tel, &.number {
&[class*="span"] {
margin-left: 0;
}
Expand All @@ -407,3 +407,7 @@ input[type="button"], input[type="submit"], input[type="reset"] {
.button;
}

input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
8 changes: 7 additions & 1 deletion less/menus.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -250,7 +250,7 @@
//color: @white;
}

li.checked a, li.checked-partial a {
li.checked a, li.checked-partial a, li.unchecked a {
&:before {
position: absolute;
left: 10px;
Expand All @@ -264,6 +264,12 @@
content: "\e0a8";
}
}

li.unchecked a {
&:before {
content: "\e0a7";
}
}

&.place-right {
right: -15px;
Expand Down

0 comments on commit 6e2d297

Please sign in to comment.