Skip to content

Commit

Permalink
modified picker, new characters, all sorts of looney shit
Browse files Browse the repository at this point in the history
  • Loading branch information
@AndrewRayCode
AndrewRayCode committed Aug 29, 2011
1 parent 3c72da1 commit af20a64
Show file tree
Hide file tree
Showing 4 changed files with 93 additions and 31 deletions.
38 changes: 18 additions & 20 deletions FunForms.css
View file
@@ -1,32 +1,30 @@
.fun-checkbox {display:inline-block; width:12px; height:12px; border:1px solid #9e9fa1; border-bottom:1px solid #888; border-top:1px solid #bbb; border-radius:3px; box-shadow:2px 2px 2px #ddd, inset 0 0 2px #686c77; cursor:pointer;
background:-moz-linear-gradient(top, #bbc0ca 0%, #d2d5dc 100%); /* FF3.6+ */
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbc0ca), color-stop(100%,#d2d5dc)); /* Chrome,Safari4+ */
background:-webkit-linear-gradient(top, #bbc0ca 0%,#d2d5dc 100%); /* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top, #bbc0ca 0%,#d2d5dc 100%); /* Opera11.10+ */
background:-ms-linear-gradient(top, #bbc0ca 0%,#d2d5dc 100%); /* IE10+ */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbc0ca', endColorstr='#d2d5dc',GradientType=0 ); /* IE6-9 */
background:linear-gradient(top, #bbc0ca 0%,#d2d5dc 100%); /* W3C */ }
background:-moz-linear-gradient(top, #bbc0ca 0%, #d2d5dc 100%);
background:-webkit-linear-gradient(top, #bbc0ca 0%,#d2d5dc 100%);
background:linear-gradient(top, #bbc0ca 0%,#d2d5dc 100%);}

.fun-checkbox.checked:after {content:'✓'; text-shadow:0 0 1px #fff; opacity:0.8; color:#aa3037; position:absolute; top:-4px; left:2px; cursor:pointer;}

.fun-checkbox.checked {position:relative;
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#feddd7), to(#fec3cd));
background: -webkit-radial-gradient(circle, #feddd7, #fec3cd);
background: -moz-radial-gradient(circle, #feddd7, #fec3cd);
background: -ms-radial-gradient(circle, #feddd7, #fec3cd);
box-shadow:0 0 5px #FFA2A2, 1px 1px 2px #daaac3, inset 0 0 2px red; }

input[type="text"] {border:1px solid #aaa; padding:4px; font-family:serif; font-size:12pt; color:#666; box-shadow:2px 2px 3px #ccc;
background:-moz-linear-gradient(top, #e0e0e0 0%, #fff 40%); /* FF3.6+ */
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ddd), color-stop(100%,#fff)); /* Chrome,Safari4+ */
background:-webkit-linear-gradient(top, #ddd 10%,#fff 100%); /* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top, #ddd 10%,#fff 100%); /* Opera11.10+ */
background:-ms-linear-gradient(top, #ddd 10%,#fff 100%); /* IE10+ */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ddd', endColorstr='#fff',GradientType=0 ); /* IE6-9 */
background:linear-gradient(top, #ddd 10%,#fff 100%); /* W3C */ }
background:-moz-linear-gradient(top, #e0e0e0 0%, #fff 40%);
background:-webkit-linear-gradient(top, #e0e0e0 10%,#fff 100%);
background:linear-gradient(top, #e0e0e0 10%,#fff 100%);}
input[type="text"]:focus {border:1px solid #dd8888; color:#444; box-shadow:inset 0 0 2px #eed2d2, 2px 2px 4px #ffcccc;}

.fun-picker {position:absolute; display:none; z-index:999999; background:#fff; border-radius:8px; box-shadow:2px 2px 10px #666;}
.fun-picker ul {}
.fun-picker ul li {float:left; display:block; padding:3px;}
.fun-picker ul li:hover {cursor:pointer;}
.fun-picker {position:absolute; z-index:999999; background:#fff; border-radius:12px; box-shadow:2px 2px 10px #666;}
.fun-picker ul {border:1px solid #999; box-shadow:1px 1px 3px #ccc; border-radius:6px; float:left; margin:8px; padding:0; overflow:hidden; max-width:150px; border-right:0 none; border-bottom:0 none;}
.fun-picker ul li {float:left; display:block; padding:3px; border-right:1px solid #999; border-left:1px solid #fff; width:17px; height:17px; text-shadow:-1px -1px 1px #666, 1px 1px 1px #fff; text-align:center; border-bottom:1px solid #aaa;
background: -moz-linear-gradient(top, #eee 0%, #fff 18%, #ddd 100%);
background: -webkit-linear-gradient(top, #eee 0%,#fff 18%,#ddd 100%);
background: linear-gradient(top, #eee 0%,#fff 18%,#ddd 100%);
}
.fun-picker ul li:hover {cursor:pointer; text-shadow:0 0 0 transparent; border-left:1px solid #dd4242; border-top:1px solid #FFA2A2; padding-top:2px; color:#fff;
background: -moz-linear-gradient(top, #dd4242 0%, #aa2222 100%);
background: -webkit-linear-gradient(top, #dd4242 0%,#aa2222 100%);
background: linear-gradient(top, #dd4242 0%,#aa2222 100%);
}
23 changes: 20 additions & 3 deletions FunForms.js
View file
Expand Up @@ -38,7 +38,8 @@
Implements: Options,

options: {
offsetTop: 2
offsetTop: 2,
blurTimeout: 100
},

initialize: function(input, options){
Expand Down Expand Up @@ -68,6 +69,8 @@

show: function() {
document.body.bind('click.fun' + this.id, this.bodyClick.bindWithEvent(this));
this.input.addEvent('blur', this.blurTest.bind(this));

this.unbindEvents();

var position = this.input.getPosition(),
Expand All @@ -81,22 +84,36 @@
}).fade('in');
},

blurTest: function(evt) {
this.blurred = true;
var me = this;
setTimeout(function() {
if(me.blurred) {
me.hide();
}
}, this.options.blurTimeout);
},

bodyClick: function(evt) {
if(!(evt.target.getParents().contains(this.input) || evt.target == this.input)) {
var parents = evt.target.getParents();
if(!(parents.contains(this.input) || parents.contains(this.picker) || evt.target == this.input)) {
this.hide();
} else {
this.blurred = false;
}
},

hide: function() {
document.body.unbind('click.fun' + this.id);
this.input.removeEvents('blur');

this.bindEvents();

this.picker.fade('out');
},

pickClick: function(evt) {
this.input.set('value', evt.target.get('text'));
this.hide();
}
});

Expand Down
9 changes: 6 additions & 3 deletions builder.css
View file
Expand Up @@ -95,8 +95,6 @@ box-shadow:1px 1px 0 #ae350e,
1px 2px 0 #ae350e;
-webkit-transition:all 0.12s ease-out;
-moz-transition:all 0.12s ease-out;
-o-transition:all 0.12s ease-out;
-ms-transition:all 0.12s ease-out;
transition:all 0.12s ease-out;}
ul.nav li a:hover {text-decoration:none; border:0 none; top:0; left:0; padding-bottom:5px;
box-shadow:1px 1px 0 #ce553e,
Expand Down Expand Up @@ -144,10 +142,15 @@ box-shadow:1px 1px 0 #ce553e,
.config {float:left; width:200px; padding:0 10px 10px;}
.options {border-left:13px solid #eee; overflow:auto; clear:both; padding:0 0 0 10px; margin:10px 0 0 1px;}
.options .group {padding:2px 0; margin:4px 0 0; float:left; clear:both;}
#wtf {margin-left:10px;}
.group label {cursor:pointer; color:#444; padding:0 0 0 2px;}
.group label:hover {color:#000;}
.config.characters {width:250px;}
.config.characters input {font-family:monospace; float:left; width:25px; text-align:center;}
.config.characters label {margin-left:1px; display:block; float:left; padding:8px 10px 4px; }
.config.characters .group {clear:both; float:left; margin:0 0 10px;}
.fun-picker ul li {font-family:monospace;}

#wtf {margin-left:10px;}
.wtf {clear:both; margin:10px; border:3px solid #ddd; height:34px; padding:10px; font-size:10pt; box-shadow:inset 0 0 10px #eee; margin:0 0 20px;}
.wtf label {display:block; font-style:italic; color:#aaa; display:none; font-size:11pt; margin:0 0 3px;}
.wtf #placeholder {display:block; margin:10px auto 0; width:400px; color:#888; text-transform:uppercase;}
Expand Down
54 changes: 49 additions & 5 deletions index.html
View file
Expand Up @@ -96,18 +96,18 @@ <h2 id="nav-options">Options</h2>

<div class="config characters">
<div class="group">
<label for="modified-char">Modified Character</label>
<input type="text" value="༇" id="modified-char" />
<label for="modified-char">Modified Character</label>
</div>

<div class="group">
<label for="conflict-char">Conflict Character</label>
<input type="text" value="௰" id="conflict-char" />
<label for="conflict-char">Conflict Character</label>
</div>

<div class="group">
<label for="max-conflicted-files">Maximum Conflicted Files</label>
<input type="text" value="2" />
<label for="max-conflicted-files">Maximum Conflicted Files</label>
</div>
</div>
</section>
Expand Down Expand Up @@ -332,14 +332,58 @@ <h4>Links:</h4>

<div class="fun-picker" id="modified-picker">
<ul>
<li>a</li>
<li>༇</li>
<li>△</li>
<li>±</li>
<li>☢</li>
<li>☠</li>
<li>☣</li>
<li>!</li>
<li>ʘ</li>
<li>Ѽ</li>
<li>Ѿ</li>
<li>✓</li>
<li>✔</li>
<li>§</li>
<li>✜</li>
<li>✻</li>
<li>❤</li>
<li>✎</li>
<li>⚛ </li>
<li>x</li>
<li>*</li>
<li>+</li>
<li>@</li>
<li>#</li>
<li>-</li>
</ul>
</div>
<div class="fun-picker" id="conflict-picker">
<ul>
<li>a</li>
<li>༇</li>
<li>△</li>
<li>±</li>
<li>☢</li>
<li>☠</li>
<li>☣</li>
<li>!</li>
<li>ʘ</li>
<li>Ѽ</li>
<li>Ѿ</li>
<li>✓</li>
<li>✔</li>
<li>§</li>
<li>✜</li>
<li>✻</li>
<li>❤</li>
<li>✎</li>
<li>⚛ </li>
<li>x</li>
<li>*</li>
<li>+</li>
<li>@</li>
<li>#</li>
<li>-</li>
</ul>
</div>
</body>
Expand Down

0 comments on commit af20a64

Please sign in to comment.