update ui

src/controllers/states/SnippetsDetailController.js

@@ -15,6 +15,8 @@ angular.module('codexen')
       vm.isLoaded = true
     })
 
+    // TODO: When deletion occurs, switch the next snippet
+    // TODO: Add deletion confirmation modal
     vm.delete = function () {
       Snippet.delete(vm.snippet.id)
       .success(function () {

src/directives/btn-edit-snippet.js

@@ -7,7 +7,7 @@ angular.module('codexen')
       },
       link: function (scope, el) {
         el.on('click', function () {
-          Modal.editSnippet(scope.snippet)
+          Modal.editSnippet(angular.copy(scope.snippet))
             .result.then(function (snippet) {
               $rootScope.$broadcast('snippetUpdated', snippet)
             }, function () {

src/directives/ui-ace.js

@@ -338,6 +338,10 @@ angular.module('ui.ace', [])
 
         scope.addCommand = acee.commands.addCommand
 
+        elm.on('click', function () {
+          acee.focus()
+        })
+
       }
     };
   }]);

src/styles/_shared.styl

@@ -1,11 +1,36 @@
 .alert
   margin: 5px 0
 
+input.form-control, textarea.form-control, input.inline-form-control
+  &::-webkit-input-placeholder
+   color $textColor
+  &:-moz-placeholder  /* Firefox 18- */
+   color $textColor
+  &::-moz-placeholder   /* Firefox 19+ */
+   color $textColor
+  &:-ms-input-placeholder
+    color $textColor
+
+
 .inline-form-control
   @extend .form-control
   width: auto
   display: inline-block
 
+.btn.btn-default
+  border-style solid
+  border-width 1px
+  btn-color($btn-default-color, $btn-default-bg, $btn-default-border)
+.btn.btn-primary
+  btn-color($btn-primary-color, $btn-primary-bg, $btn-primary-border)
+.btn.btn-info
+  btn-color($btn-info-color, $btn-info-bg, $btn-info-border)
+.btn.btn-success
+  btn-color($btn-success-color, $btn-success-bg, $btn-success-border)
+.btn.btn-danger
+  btn-color($btn-danger-color, $btn-danger-bg, $btn-danger-border)
+.btn.btn-warning
+  btn-color($btn-warning-color, $btn-warning-bg, $btn-warning-border)
 
 textarea.form-control, .ace_editor
   border-radius $input-border-radius

src/styles/_vars.styl

@@ -42,7 +42,7 @@ $brand-danger= $btnError
 
 $btn-default-bg= $buttonBackgroundColor
 $btn-default-color= $textColor
-$btn-default-border= $buttonBorderColor
+$btn-default-border= $baseBorderColor
 
 $link-color= $textColorHighlight
 
@@ -65,3 +65,22 @@ $modal-content-bg= $baseBackgroundColor
 $modal-content-border-color= $modal-header-border-color= $modal-footer-border-color= $baseBorderColor
 
 $jumbotron-bg= $backgroundColorHighlight
+
+$alert-danger-bg= $textColorError
+$alert-danger-border= dark($alert-danger-bg) ? darken($alert-danger-bg, 5%) : lighten($alert-danger-bg, 5%)
+$alert-danger-text= $textColorSelected
+
+$alert-info-bg= $textColorInfo
+$alert-info-border= dark($alert-info-bg) ? darken($alert-info-bg, 5%) : lighten($alert-info-bg, 5%)
+$alert-info-text= $textColorSelected
+
+$alert-success-bg= $textColorSuccess
+$alert-success-border= dark($alert-success-bg) ? darken($alert-success-bg, 5%) : lighten($alert-success-bg, 5%)
+$alert-success-text= $textColorSelected
+
+$alert-warning-bg= $textColorWarning
+$alert-warning-border= dark($alert-warning-bg) ? darken($alert-warning-bg, 5%) : lighten($alert-warning-bg, 5%)
+$alert-warning-text= $textColorSelected
+
+$panel-bg= $baseBackgroundColor
+$panel-default-border= $baseBorderColor

src/styles/directives/ui-select.styl

@@ -87,6 +87,8 @@ body > .select2-container.open
 .ui-select-bootstrap .ui-select-toggle
   position: relative
   border-radius $input-border-radius
+  .ui-select-placeholder
+    color $textColor
 
 
 .ui-select-bootstrap .ui-select-toggle > .caret
@@ -104,7 +106,7 @@ body > .select2-container.open
 
 
 .input-group > .ui-select-bootstrap > input.ui-select-search.form-control
-  border-radius: 4px /* FIXME hardcoded value :-/ */
+  border-radius: $input-border-radius
   border-top-right-radius: 0
   border-bottom-right-radius: 0
 
@@ -114,6 +116,7 @@ body > .select2-container.open
   text-align: left !important
   padding-right: 25px
   border-radius $input-border-radius
+  border solid 1px $input-border
 
 
 .ui-select-bootstrap > .ui-select-match > .caret

src/styles/mixins/btn-color.styl

@@ -0,0 +1,35 @@
+btn-color($color, $background, $border)
+  color $color
+  background-color $background
+  border-color $border
+
+  &:hover,
+  &:focus,
+  &.focus,
+  &:active,
+  &.active,
+  .open > .dropdown-toggle&
+    color dark($background) ? lighten($color, 10%) : darken($color, 10%)
+    background-color dark($background) ? lighten($background, 10%) : darken($background, 10%)
+    border-color dark($border) ? lighten($border, 12%) : darken($border, 12%)
+
+  &:active,
+  &.active,
+  .open > .dropdown-toggle&
+    background-image none
+
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] &
+    &,
+    &:hover,
+    &:focus,
+    &.focus,
+    &:active,
+    &.active
+      background-color $background
+      border-color $border
+
+  .badge
+    color $background
+    background-color $color

src/styles/states/auth.styl

@@ -0,0 +1,7 @@
+.auth-state
+  .panel
+    margin-top 50px
+  h1
+    margin 15px 0
+  .auth-control
+    margin 10px 0

src/styles/states/snippets.styl

@@ -44,11 +44,16 @@ $snippet-list-active-bg= $brand-primary
         cursor: pointer
         padding: 5px
         border-right 1px solid $baseBorderColor
+        border-bottom 1px solid $baseBorderColor
+        &:nth-child(even)
+          background-color $baseBackgroundColor
+        &:nth-child(odd)
+          background-color lighten($baseBackgroundColor, 2%)
         h4
           margin: 0
 
         &:hover
-          background-color: $snippet-list-item-hover-bg
+          background-color: $backgroundColorSelected
 
         p
           margin:0
@@ -78,17 +83,21 @@ $snippet-list-active-bg= $brand-primary
     right: 0
     overflow-x: hidden
     overflow-y: auto
+    background-color lighten($baseBackgroundColor, 2%)
 
 
 
 .snippets-detail-state
   .detail-header
+    background-color lighten($baseBackgroundColor, 5%)
     padding: 5px 10px
     height: 50px
-    border-bottom: solid 1px $border-color
+    border-bottom: solid 1px $baseBorderColor
     .detail-header-title
+      color: $textColorHighlight
       small
         font-size: 0.6em
+        color: $textColor
 
       line-height: 40px
       font-size: 1.2em

src/tpls/directives/side-nav.tpl.html

@@ -3,25 +3,19 @@
     <img width="30" class="img-circle" ng-src="http://www.gravatar.com/avatar/{{ vm.currentUser.email | gravatar }}">
     <a href ng-bind="vm.currentUser.name"></a>
     <span class="nav-control-group pull-right">
-      <a href class="btn btn-sm btn-default"><i class="fa fa-gears"></i></a>
+      <a href class="btn btn-sm btn-default"><i class="fa fa-gears fa-fw"></i></a>
-      <a href class="btn btn-sm btn-default" ng-click="vm.signOut()"><i class="fa fa-sign-out"></i></a>
+      <a href class="btn btn-sm btn-default" ng-click="vm.signOut()"><i class="fa fa-sign-out fa-fw"></i></a>
     </span>
 
   </div>
   <div ng-if="!vm.currentUser">
     <span>Guest</span>
 
-    <span class="dropdown" dropdown is-open>
+    <span class="nav-control-group pull-right">
-      <a type="button" name="button" dropdown-toggle class="btn btn-sm btn-default dropdown-toggle"><i class="fa fa-caret-down"></i></a>
+      <a class="btn btn-sm btn-default" ui-sref="auth.register"><i class="fa fa-user-plus fa-fw"></i></a>
-      <ul class="dropdown-menu">
+      <a class="btn btn-sm btn-default" ui-sref="auth.signin"><i class="fa fa-sign-in fa-fw"></i></a>
-        <li>
-          <a ui-sref="auth.signin"><i class="fa fa-sign-in"></i> Sign In</a>
-        </li>
-        <li>
-          <a ui-sref="auth.register"><i class="fa fa-user-plus"></i> Register</a>
-        </li>
-      </ul>
     </span>
+
   </div>
 </div>
 

src/tpls/modals/edit-snippet-modal.tpl.html

@@ -8,7 +8,7 @@
       <textarea ng-model="vm.snippet.description" name="description" class="form-control" placeholder="Description..."></textarea>
     </div>
     <div class="form-group">
-        <input ng-model="vm.snippet.callSign" type="text" name="callSign" class="inline-form-control" placeholder="Call sign">
+        <input ng-model="vm.snippet.callSign" type="text" name="callSign" class="inline-form-control" placeholder="Callsign">
 
         <ui-select ng-model="vm.snippet.mode" style="display: inline-block;" theme="bootstrap">
           <ui-select-match placeholder="Select Type">{{$select.selected}}</ui-select-match>
@@ -32,7 +32,7 @@
 
     <div class="form-group">
       <ui-select multiple tagging="vm.transform" tagging-tokens="SPACE|,|/" ng-model="vm.snippet.Tags" theme="bootstrap">
-        <ui-select-match placeholder="Write Tags">{{$item.name}}</ui-select-match>
+        <ui-select-match placeholder="Tags...">{{$item.name}}</ui-select-match>
         <ui-select-choices repeat="tag in vm.tagCandidates" refresh="vm.refreshTagCandidates($select.search)"
          refresh-delay="200">
           <div><span ng-bind-html="tag.name | highlight: $select.search"></span><span ng-if="tag.isTag">(new)</span></div>

src/tpls/modals/new-snippet-modal.tpl.html

@@ -8,7 +8,7 @@
       <textarea ng-model="vm.description" name="description" class="form-control" placeholder="Description..."></textarea>
     </div>
     <div class="form-group">
-        <input ng-model="vm.callSign" type="text" name="callSign" class="inline-form-control" placeholder="Call sign">
+        <input ng-model="vm.callSign" type="text" name="callSign" class="inline-form-control" placeholder="Callsign">
 
         <ui-select ng-model="vm.mode" style="display: inline-block;" on-select="vm.log(vm.mode.name.toLowerCase())" theme="bootstrap">
           <ui-select-match placeholder="Select Type">{{$select.selected}}</ui-select-match>
@@ -32,7 +32,7 @@
 
     <div class="form-group">
       <ui-select multiple tagging="vm.transform" tagging-tokens="SPACE|,|/" ng-model="vm.tags" theme="bootstrap">
-        <ui-select-match placeholder="Write Tags">{{$item.name}}</ui-select-match>
+        <ui-select-match placeholder="Tags...">{{$item.name}}</ui-select-match>
         <ui-select-choices repeat="tag in vm.tagCandidates" refresh="vm.refreshTagCandidates($select.search)"
          refresh-delay="200">
           <div><span ng-bind-html="tag.name | highlight: $select.search"></span><span ng-if="tag.isTag">(new)</span></div>

src/tpls/states/auth.register.tpl.html

@@ -1,56 +1,54 @@
-<div class="row">
-  <div class="col-sm-6 col-sm-offset-3">
-    <form novalidate name="registerForm" ng-submit="vm.signup()">
 
-      <!-- Email -->
+<form novalidate name="registerForm" ng-submit="registerForm.$valid?vm.signup():null">
-      <div class="form-group">
-        <label for="email">E-mail</label>
-        <input ng-model="vm.email" type="text" id="email" name="email" class="form-control" placeholder="E-mail" required>
 
-        <div class="alert alert-danger" ng-if="(registerForm.$submitted || registerForm.email.$touched) && !vm.isEmpty(registerForm.email.$error)">
+  <!-- Email -->
-          <div ng-show="registerForm.email.$error.required">No E-mail given.</div>
+  <div class="form-group">
-            <div ng-show="registerForm.email.$error.email">Invalid Address.</div>
+    <label for="email">E-mail</label>
-        </div>
+    <input ng-model="vm.email" type="email" id="email" name="email" class="form-control" placeholder="E-mail" required>
-      </div>
 
-      <!-- Password -->
+    <div class="alert alert-danger" ng-if="registerForm.$submitted && !vm.isEmpty(registerForm.email.$error)">
-      <div class="form-group">
+      <div ng-show="registerForm.email.$error.required">No E-mail given.</div>
-        <label for="password">Password</label>
+      <div ng-show="registerForm.email.$error.email">Invalid Address.</div>
-        <input ng-model="vm.password" type="password" id="password" name="password" class="form-control" placeholder="Password" required>
+    </div>
 
-        <div ng-click="vm.log(registerForm.password.$error)" class="alert alert-danger" ng-if="(registerForm.$submitted || registerForm.password.$touched) && !vm.isEmpty(registerForm.password.$error)">
-          <div ng-show="registerForm.password.$error.required">No password given.</div>
-        </div>
-      </div>
-
-      <hr>
-
-      <!-- Username -->
-      <div class="form-group">
-        <label for="name">Username</label>
-        <input ng-model="vm.name" ng-pattern="'^[A-Za-z0-9\-\_]+$'" type="text" id="name" name="name" class="form-control" required>
-
-        <div class="alert alert-danger" ng-if="(registerForm.$submitted || registerForm.name.$touched) && !vm.isEmpty(registerForm.name.$error)">
-          <div ng-show="registerForm.name.$error.required">No Username given.</div>
-            <div ng-show="registerForm.name.$error.pattern">Username should be ^[A-Za-z0-9\-\_]+$</div>
-        </div>
-      </div>
-
-
-      <!-- Profile name -->
-      <div class="form-group">
-        <label for="profileName">Profile name</label>
-        <input ng-model="vm.profileName" type="text" name="profileName" class="form-control" required>
-
-        <div class="alert alert-danger" ng-if="(registerForm.$submitted || registerForm.profileName.$touched) && !vm.isEmpty(registerForm.profileName.$error)">
-          <div ng-show="registerForm.profileName.$error.required">No Profile name given.</div>
-        </div>
-      </div>
-
-
-      <div class="form-group">
-        <button type="submit" class="btn btn-primary form-control">Register</button>
-      </div>
-    </form>
   </div>
-</div>
+
+  <!-- Password -->
+  <div class="form-group">
+    <label for="password">Password</label>
+    <input ng-model="vm.password" type="password" id="password" name="password" class="form-control" placeholder="Password" required>
+
+    <div class="alert alert-danger" ng-if="registerForm.$submitted && !vm.isEmpty(registerForm.password.$error)">
+      <div ng-show="registerForm.password.$error.required">No password given.</div>
+    </div>
+
+  </div>
+
+  <hr>
+
+  <!-- Username -->
+  <div class="form-group">
+    <label for="name">Username</label>
+    <input ng-model="vm.name" ng-pattern="'^[A-Za-z0-9\-\_]+$'" type="text" id="name" name="name" class="form-control" required>
+    <div class="alert alert-danger" ng-if="registerForm.$submitted && !vm.isEmpty(registerForm.name.$error)">
+      <div ng-show="registerForm.name.$error.required">No Username given.</div>
+      <div ng-show="registerForm.name.$error.pattern">Username should be ^[A-Za-z0-9\-\_]+$ (only alphanumeric, hyphen, underscore characters)</div>
+    </div>
+  </div>
+
+
+  <!-- Profile name -->
+  <div class="form-group">
+    <label for="profileName">Profile name</label>
+    <input ng-model="vm.profileName" type="text" name="profileName" class="form-control" required>
+
+    <div class="alert alert-danger" ng-if="registerForm.$submitted && !vm.isEmpty(registerForm.profileName.$error)">
+      <div ng-show="registerForm.profileName.$error.required">No Profile name given.</div>
+    </div>
+  </div>
+
+
+  <div class="form-group">
+    <button ng-class="{'btn-danger':registerForm.$invalid, 'btn-primary':registerForm.$valid}" type="submit" class="btn form-control">Register</button>
+  </div>
+</form>

src/tpls/states/auth.signin.tpl.html

@@ -1,19 +1,15 @@
-<div class="row">
+<form ng-submit="vm.signIn()">
-  <div class="col-sm-6 col-sm-offset-3">
+  <div class="form-group">
-    <form ng-submit="vm.signIn()">
+    <label for="email">E-mail</label>
-      <div class="form-group">
+    <input ng-model="vm.email" type="text" id="email" name="name" class="form-control" placeholder="E-mail">
-        <label for="email">E-mail</label>
-        <input ng-model="vm.email" type="text" id="email" name="name" class="form-control" placeholder="E-mail">
-      </div>
-
-      <div class="form-group">
-        <label for="password">Password</label>
-        <input ng-model="vm.password" type="password" id="password" name="name" class="form-control" placeholder="Password">
-      </div>
-
-      <div class="form-group">
-        <button type="submit" class="btn btn-primary form-control">Sign In</button>
-      </div>
-    </form>
   </div>
-</div>
+
+  <div class="form-group">
+    <label for="password">Password</label>
+    <input ng-model="vm.password" type="password" id="password" name="name" class="form-control" placeholder="Password">
+  </div>
+
+  <div class="form-group">
+    <button type="submit" class="btn btn-primary form-control">Sign In</button>
+  </div>
+</form>

src/tpls/states/auth.tpl.html

@@ -1,9 +1,19 @@
-<div class="container-fluid">
+<div class="auth-state container-fluid">
+  <div class="row">
+    <div class="col-sm-6 col-sm-offset-3 panel panel-default">
 
-  <div class="text-center">
+      <div class="text-center">
-    <h1>Auth</h1>
+
-    <a class="btn btn-default" ui-sref-active="active" ui-sref="auth.register">Register</a> or <a class="btn btn-default" ui-sref-active="active" ui-sref="auth.signin">Sign In</a>
+        <h1>Authentication</h1>
+
+        <div class="auth-control">
+          <a class="btn btn-default" ui-sref-active="active" ui-sref="auth.register"><i class="fa fa-user-plus fa-fw"></i> Register</a> or <a class="btn btn-default" ui-sref-active="active" ui-sref="auth.signin"><i class="fa fa-sign-in fa-fw"></i> Sign In</a>
+        </div>
+
+      </div>
+
+      <ui-view></ui-view>
+
+    </div>
   </div>
-  <ui-view></ui-view>
-
 </div>

src/tpls/states/snippets.detail.tpl.html

@@ -2,6 +2,7 @@
 
   <div class="detail-header">
     <span class="detail-header-title">
+      <small>callsign</small>
       <span ng-bind="vm.snippet.callSign"></span>
       <small><span ng-bind="vm.snippet.updatedAt|fromNow"></span> <i class="fa fa-clock-o"></i></small>
     </span>

src/tpls/states/snippets.list.tpl.html

@@ -29,7 +29,7 @@
       <li ng-repeat="snippet in vm.snippets | filter:vm.search" ui-sref="snippets.detail({id:snippet.id})" ui-sref-active="active">
         <div class="media">
           <div class="media-left">
-            <img width="25" height="25" src="http://www.gravatar.com/avatar/ea0b6ad1c11700120d1af08810caa19d" alt="" />
+            <img width="25" height="25" class="img-circle" src="http://www.gravatar.com/avatar/ea0b6ad1c11700120d1af08810caa19d" alt="" />
           </div>
           <div class="media-body">
             <p ng-bind="snippet.callSign" class="call-sign">