[ux] port forms

clientapp/templates.js

@@ -196,7 +196,7 @@ exports.pages.groupchat = function anonymous(locals) {
 exports.pages.main = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<section class="page main"><div><h3>Current status</h3><div contenteditable="true" class="status"></div></div><div id="avatarChanger"><h3>Change Avatar</h3><div class="uploadRegion"><p>Drag and drop a new avatar here</p><img/><form><input id="uploader" type="file"/></form></div></div><div><h3>Add / Approve Contacts</h3><input type="text" id="addcontact"/><button class="addContact">Add</button><ul id="contactrequests"></ul></div><div><h3>Desktop Integration</h3><button class="enableAlerts">Enable alerts</button><button class="primary installFirefox">Install app</button></div></section>');
+        buf.push('<section class="page main"><div><h3>Current status</h3><div contenteditable="true" class="status"></div></div><div id="avatarChanger"><h3>Change Avatar</h3><div class="uploadRegion"><p>Drag and drop a new avatar here</p><img/><form><input id="uploader" type="file"/></form></div></div><div><h3>Add / Approve Contacts</h3><input type="text" id="addcontact" class="inline"/><button class="addContact">Add</button><ul id="contactrequests"></ul></div><div><h3>Desktop Integration</h3><button class="enableAlerts">Enable alerts</button><button class="primary installFirefox">Install app</button></div></section>');
     }
     return buf.join("");
 };

clientapp/templates/pages/main.jade

@@ -14,7 +14,7 @@ section.page.main
 
   div
     h3 Add / Approve Contacts
-    input(type="text")#addcontact
+    input(type="text", class="inline")#addcontact
     button.addContact Add
     ul#contactrequests
 

public/css/app/chat.styl

@@ -204,12 +204,8 @@
     position: relative
 
   textarea
-    width: 100%
-    position: relative
     height: 30px
-    line-height: $line-height-base
+    padding: 6px 10px
-    padding: 5px
-    background: white
 
     &.editing
       background-color: #fffcea

public/css/app/forms.styl

@@ -1,40 +1,98 @@
-// Forms and Buttons
+// Forms
 
-input[type=text], input[type=email], input[type=search], input[type=password], textarea, .main .status
+input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], input[type=url], input[type=file], textarea, .main .status
-  -webkit-appearance: none
+  width: 100%
-  roundall(3px)
-  padding: 0 10px
-  background-color: white
-  border: 1px solid $gray-lighter
-  font-size: $font-size-small
-  color: $gray
   borderbox()
-  font-family: $font-family-gotham
-  -webkit-font-smoothing: antialiased
-  -webkit-appearance: none
 
-  transition: border .2s ease-in 0
+  &.inline
-  -webkit-transition: border .2s ease-in 0
+    display: inline-block
-  -moz-transition: border .2s ease-in 0
+    width: auto
 
-input[type=text], input[type=email], input[type=search], input[type=password], .main .status
+input[type=text], input[type=email], input[type=password], input[type=search], 
+input[type=date], input[type=url], input[type=file], textarea, select, input[type=checkbox], input[type=radio]
+
+  &:disabled
+    cursor: not-allowed
+
+.invalid
+
+  label
+    color: $red
+
+  input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], input[type=url], input[type=file], textarea
+    background: $red-lighter
+    border: 1px solid $red-light
+    color: $red-light
+
+    &:focus
+      border: 1px solid $red-light
+      box-shadow: 0 0 5px $red-light
+
+.valid
+
+  label
+    color: $green
+
+  input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], input[type=url], input[type=file], textarea
+    background: $green-lighter
+    border: 1px solid $green-light
+    color: $green-light
+
+    &:focus
+      border: 1px solid $green-light
+      box-shadow: 0 0 5px $green-light
+
+input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], input[type=url], input[type=file], textarea, select, .main .status
+  display: block
+  border-radius: 3px
+  border: 1px solid $gray-lighter
+
+  &:focus
+    outline: none
+    border: 1px solid $blue-light
+    box-shadow: 0 0 5px $blue-light
+    transition: all .3s ease-in
+    -webkit-transition: all .3s ease-in
+
+  &:disabled
+    background: lighten($gray-lighter, 60%)
+
+input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], input[type=url], .main .status
   height: 35px
+  padding: 5px 10px
 
 textarea
+  padding: 10px
   resize: none
+  font-size: $font-size-small
 
-input[type=text]:focus, 
+input[type=file]
-input[type=email]:focus, 
+  padding: 15px
-input[type=search]:focus,
+  background: lighten($gray-lighter, 70%)
-input[type=password]:focus,
+  font-size: $font-size-small
-textarea:focus,
+  color: $gray-light
-.main .status:focus
-  outline: none
-  border: 1px solid lighten($blue, 50%)
 
 label
   display: block
   margin-bottom: 5px
-  font-size: 13px
   font-weight: $font-weight-bold
-  color: $gray
+  font-size: $font-size-small
+
+.has-icon
+  position: relative
+
+  .ss-icon
+    position: absolute
+    top: 31px
+    right: 10px
+    font-size: $font-size-small
+    transition: all .3s ease-in
+
+    &.ss-delete
+      color: $red-light
+
+    &.ss-check
+      color: $green-light
+
+    &.ss-search
+      color: $gray-lighter

public/css/app/settings.styl

@@ -5,19 +5,14 @@
   padding: 20px
   border-bottom: 1px solid $gray-lighter
 
-  .status
-    padding: 10px
-
   &:last-of-type
     border: none
 
 .uploadRegion
   padding: 15px
-  font-size: $font-size-small
   roundall(3px)
   margin: 10px 0
-  color: $gray-light
+  border: 1px solid $gray-lighter
-  background: lighten($gray-light, 93%)
 
   p
     margin: 0

public/css/otalk.css

@@ -785,12 +785,8 @@ h3 {
   position: relative;
 }
 .chatBox textarea {
-  width: 100%;
-  position: relative;
   height: 30px;
-  line-height: 18px;
+  padding: 6px 10px;
-  padding: 5px;
-  background: #fff;
 }
 .chatBox textarea.editing {
   background-color: #fffcea;
@@ -801,15 +797,11 @@ h3 {
   padding: 20px;
   border-bottom: 1px solid #eee;
 }
-.main > div .status {
-  padding: 10px;
-}
 .main > div:last-of-type {
   border: none;
 }
 .uploadRegion {
   padding: 15px;
-  font-size: 12px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   -khtml-border-radius: 3px;
@@ -817,8 +809,7 @@ h3 {
   -border-radius: 3px;
   border-radius: 3px;
   margin: 10px 0;
-  color: #878787;
+  border: 1px solid #eee;
-  background: #f7f7f7;
 }
 .uploadRegion p {
   margin: 0;
@@ -897,60 +888,188 @@ h3 {
 }
 input[type=text],
 input[type=email],
-input[type=search],
 input[type=password],
+input[type=search],
+input[type=date],
+input[type=url],
+input[type=file],
 textarea,
 .main .status {
-  -webkit-appearance: none;
+  width: 100%;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  -khtml-border-radius: 3px;
-  -o-border-radius: 3px;
-  -border-radius: 3px;
-  border-radius: 3px;
-  padding: 0 10px;
-  background-color: #fff;
-  border: 1px solid #eee;
-  font-size: 12px;
-  color: #565656;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  font-family: 'Gotham SSm A', 'Gotham SSm B', Helvetica, Arial, sans-serif;
+}
-  -webkit-font-smoothing: antialiased;
+input[type=text].inline,
-  -webkit-appearance: none;
+input[type=email].inline,
-  -webkit-transition: border 0.2s ease-in 0;
+input[type=password].inline,
-  -o-transition: border 0.2s ease-in 0;
+input[type=search].inline,
-  transition: border 0.2s ease-in 0;
+input[type=date].inline,
-  -moz-transition: border 0.2s ease-in 0;
+input[type=url].inline,
-  -webkit-transition: border 0.2s ease-in 0;
+input[type=file].inline,
-  -moz-transition: border 0.2s ease-in 0;
+textarea.inline,
+.main .status.inline {
+  display: inline-block;
+  width: auto;
+}
+input[type=text]:disabled,
+input[type=email]:disabled,
+input[type=password]:disabled,
+input[type=search]:disabled,
+input[type=date]:disabled,
+input[type=url]:disabled,
+input[type=file]:disabled,
+textarea:disabled,
+select:disabled,
+input[type=checkbox]:disabled,
+input[type=radio]:disabled {
+  cursor: not-allowed;
+}
+.invalid label {
+  color: #de0a32;
+}
+.invalid input[type=text],
+.invalid input[type=email],
+.invalid input[type=password],
+.invalid input[type=search],
+.invalid input[type=date],
+.invalid input[type=url],
+.invalid input[type=file],
+.invalid textarea {
+  background: #fff7f8;
+  border: 1px solid #fdcad3;
+  color: #fdcad3;
+}
+.invalid input[type=text]:focus,
+.invalid input[type=email]:focus,
+.invalid input[type=password]:focus,
+.invalid input[type=search]:focus,
+.invalid input[type=date]:focus,
+.invalid input[type=url]:focus,
+.invalid input[type=file]:focus,
+.invalid textarea:focus {
+  border: 1px solid #fdcad3;
+  box-shadow: 0 0 5px #fdcad3;
+}
+.valid label {
+  color: #43bb6e;
+}
+.valid input[type=text],
+.valid input[type=email],
+.valid input[type=password],
+.valid input[type=search],
+.valid input[type=date],
+.valid input[type=url],
+.valid input[type=file],
+.valid textarea {
+  background: #f4fbf6;
+  border: 1px solid #c6ebd3;
+  color: #c6ebd3;
+}
+.valid input[type=text]:focus,
+.valid input[type=email]:focus,
+.valid input[type=password]:focus,
+.valid input[type=search]:focus,
+.valid input[type=date]:focus,
+.valid input[type=url]:focus,
+.valid input[type=file]:focus,
+.valid textarea:focus {
+  border: 1px solid #c6ebd3;
+  box-shadow: 0 0 5px #c6ebd3;
 }
 input[type=text],
 input[type=email],
-input[type=search],
 input[type=password],
+input[type=search],
+input[type=date],
+input[type=url],
+input[type=file],
+textarea,
+select,
 .main .status {
-  height: 35px;
+  display: block;
-}
+  border-radius: 3px;
-textarea {
+  border: 1px solid #eee;
-  resize: none;
 }
 input[type=text]:focus,
 input[type=email]:focus,
-input[type=search]:focus,
 input[type=password]:focus,
+input[type=search]:focus,
+input[type=date]:focus,
+input[type=url]:focus,
+input[type=file]:focus,
 textarea:focus,
+select:focus,
 .main .status:focus {
   outline: none;
   border: 1px solid #88d5f7;
+  box-shadow: 0 0 5px #88d5f7;
+  -webkit-transition: all 0.3s ease-in;
+  -o-transition: all 0.3s ease-in;
+  transition: all 0.3s ease-in;
+  -moz-transition: all 0.3s ease-in;
+  -webkit-transition: all 0.3s ease-in;
+}
+input[type=text]:disabled,
+input[type=email]:disabled,
+input[type=password]:disabled,
+input[type=search]:disabled,
+input[type=date]:disabled,
+input[type=url]:disabled,
+input[type=file]:disabled,
+textarea:disabled,
+select:disabled,
+.main .status:disabled {
+  background: #f8f8f8;
+}
+input[type=text],
+input[type=email],
+input[type=password],
+input[type=search],
+input[type=date],
+input[type=url],
+.main .status {
+  height: 35px;
+  padding: 5px 10px;
+}
+textarea {
+  padding: 10px;
+  resize: none;
+  font-size: 12px;
+}
+input[type=file] {
+  padding: 15px;
+  background: #fafafa;
+  font-size: 12px;
+  color: #878787;
 }
 label {
   display: block;
   margin-bottom: 5px;
-  font-size: 13px;
   font-weight: 800;
-  color: #565656;
+  font-size: 12px;
+}
+.has-icon {
+  position: relative;
+}
+.has-icon .ss-icon {
+  position: absolute;
+  top: 31px;
+  right: 10px;
+  font-size: 12px;
+  -webkit-transition: all 0.3s ease-in;
+  -o-transition: all 0.3s ease-in;
+  transition: all 0.3s ease-in;
+  -moz-transition: all 0.3s ease-in;
+}
+.has-icon .ss-icon.ss-delete {
+  color: #fdcad3;
+}
+.has-icon .ss-icon.ss-check {
+  color: #c6ebd3;
+}
+.has-icon .ss-icon.ss-search {
+  color: #eee;
 }
 button {
   border: none;

public/x-manifest.cache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# 0.0.1 1382650276075
+# 0.0.1 1382651972797
 
 CACHE:
 /app.js