vines-services 0.1.1 → 0.1.2

data/web/javascripts/services.js

@@ -168,7 +168,7 @@ ServicesPage = (function() {
     var code, prev;
     $('#syntax-status').text('');
     prev = $('#syntax').data('prev');
-    code = $.trim($('#syntax').val());
+    code = $('#syntax').val().trim();
     $('#syntax').data('prev', code);
     if (!(code && code !== prev)) {
       return;
@@ -194,38 +194,43 @@ ServicesPage = (function() {
   ServicesPage.prototype.validateForm = function() {
     var name, valid;
     $('#name-error').empty();
+    $('#unix-users-error').empty();
     valid = true;
-    name = $.trim($('#name').val());
+    name = $('#name').val().trim();
     if (name === '') {
       $('#name-error').text('Name is required.');
       valid = false;
     }
+    if (this.accounts().length === 0) {
+      $('#unix-users-error').text('At least one user account is required.');
+      valid = false;
+    }
     return valid;
   };
+  ServicesPage.prototype.accounts = function() {
+    var accounts, u, _i, _len, _results;
+    accounts = $('#unix-users').val().split(',');
+    _results = [];
+    for (_i = 0, _len = accounts.length; _i < _len; _i++) {
+      u = accounts[_i];
+      if (u.trim().length > 0) {
+        _results.push(u.trim());
+      }
+    }
+    return _results;
+  };
   ServicesPage.prototype.save = function() {
-    var accounts, service, u, users;
+    var service, users;
     if (!this.validateForm()) {
-      return;
+      return false;
     }
     users = $('#users :checked').map(function() {
       return $(this).val();
     }).get();
-    accounts = $('#unix-users').val().split(',');
-    accounts = (function() {
-      var _i, _len, _results;
-      _results = [];
-      for (_i = 0, _len = accounts.length; _i < _len; _i++) {
-        u = accounts[_i];
-        if ($.trim(u).length > 0) {
-          _results.push($.trim(u));
-        }
-      }
-      return _results;
-    })();
     service = {
       name: $('#name').val(),
       code: $('#syntax').val(),
-      accounts: accounts,
+      accounts: this.accounts(),
       users: users
     };
     if ($('#id').val().length > 0) {
@@ -320,7 +325,7 @@ ServicesPage = (function() {
       $('#services li').removeClass('selected');
     }
     $('#beta').empty();
-    $("<form id=\"editor-form\" class=\"sections y-fill scroll\">\n  <input id=\"id\" type=\"hidden\"/>\n  <div>\n    <section>\n      <h2>Service</h2>\n      <fieldset>\n        <label for=\"name\">Name</label>\n        <input id=\"name\" type=\"text\"/>\n        <p id=\"name-error\" class=\"error\"></p>\n        <label for=\"syntax\">Criteria</label>\n        <textarea id=\"syntax\" placeholder=\"fqdn starts with 'www.' and platform is 'mac_os_x'\"></textarea>\n        <p id=\"syntax-status\"></p>\n      </fieldset>\n    </section>\n    <section>\n      <h2>Members</h2>\n      <fieldset id=\"service-preview\">\n        <ul id=\"members\" class=\"scroll\"></ul>\n      </fieldset>\n    </section>\n    <section>\n      <h2>Permissions</h2>\n      <fieldset>\n        <label>Users</label>\n        <ul id=\"users\" class=\"scroll\"></ul>\n        <label for=\"unix-users\">Unix Accounts</label>\n        <input id=\"unix-users\" type=\"text\"/>\n      </fieldset>\n    </section>\n  </div>\n</form>\n<form id=\"editor-buttons\">\n  <input id=\"save\" type=\"submit\" value=\"Save\"/>\n</form>").appendTo('#beta');
+    $("<form id=\"editor-form\" class=\"sections y-fill scroll\">\n  <input id=\"id\" type=\"hidden\"/>\n  <div>\n    <section>\n      <h2>Service</h2>\n      <fieldset>\n        <label for=\"name\">Name</label>\n        <input id=\"name\" type=\"text\"/>\n        <p id=\"name-error\" class=\"error\"></p>\n        <label for=\"syntax\">Criteria</label>\n        <textarea id=\"syntax\" placeholder=\"fqdn starts with 'www.' and platform is 'mac_os_x'\"></textarea>\n        <p id=\"syntax-status\"></p>\n      </fieldset>\n    </section>\n    <section>\n      <h2>Members</h2>\n      <fieldset id=\"service-preview\">\n        <ul id=\"members\" class=\"scroll\"></ul>\n      </fieldset>\n    </section>\n    <section>\n      <h2>Permissions</h2>\n      <fieldset>\n        <label>Users</label>\n        <ul id=\"users\" class=\"scroll\"></ul>\n        <label for=\"unix-users\">Unix Accounts</label>\n        <input id=\"unix-users\" type=\"text\"/>\n        <p id=\"unix-users-error\" class=\"error\"></p>\n        <p class=\"hint\">Comma separated user names like: apache, postgres, root, etc.</p>\n      </fieldset>\n    </section>\n  </div>\n</form>\n<form id=\"editor-buttons\">\n  <input id=\"save\" type=\"submit\" value=\"Save\"/>\n</form>").appendTo('#beta');
     if (service) {
       this.findMembers(service.id);
       $('#id').val(service.id);

data/web/javascripts/systems.js

@@ -46,7 +46,7 @@ SystemsPage = (function() {
     return groups;
   };
   SystemsPage.prototype.roster = function() {
-    var contact, contacts, group, groups, items, name, optgroup, option, sorted, _i, _len, _results;
+    var contact, contacts, group, groups, icon, items, name, optgroup, option, opts, sorted, _i, _len, _results;
     groups = this.groupContacts();
     sorted = (function() {
       var _results;
@@ -81,7 +81,7 @@ SystemsPage = (function() {
         _results2 = [];
         for (_j = 0, _len2 = contacts.length; _j < _len2; _j++) {
           contact = contacts[_j];
-          option = $("<li data-jid=\"" + contact.jid + "\">\n  <span class=\"text\"></span>\n  <span class=\"unread\" style=\"display:none;\"></span>\n</li>").appendTo(items);
+          option = $("<li data-jid=\"" + contact.jid + "\">\n  <span class=\"icon\"></span>\n  <span class=\"text\"></span>\n  <span class=\"unread\" style=\"display:none;\"></span>\n</li>").appendTo(items);
           if (contact.offline()) {
             option.addClass('offline');
           }
@@ -91,7 +91,25 @@ SystemsPage = (function() {
           name = contact.name || contact.jid.split('@')[0];
           option.attr('data-name', name);
           option.attr('data-group', group);
-          _results2.push($('.text', option).text(name));
+          $('.text', option).text(name);
+          opts = {
+            fill: '#fff',
+            stroke: '#404040',
+            'stroke-width': 0.3,
+            opacity: 1.0,
+            scale: 0.65
+          };
+          icon = (function() {
+            switch (group) {
+              case 'People':
+                return ICONS.man;
+              case 'Services':
+                return ICONS.magic;
+              default:
+                return ICONS.run;
+            }
+          })();
+          _results2.push(new Button($('.icon', option), icon, opts));
         }
         return _results2;
       }).call(this));
@@ -106,7 +124,7 @@ SystemsPage = (function() {
     if (me || from === this.currentContact) {
       bottom = this.atBottom();
       this.appendMessage(message);
-      if (bottom) {
+      if (bottom || me) {
         return this.scroll({
           animate: true
         });
@@ -139,6 +157,7 @@ SystemsPage = (function() {
     node = $("<li data-jid=\"" + from + "\"><pre></pre></li>").appendTo('#messages');
     prefix = me ? '$ ' : '';
     $('pre', node).text(prefix + message.text);
+    $('#message-form').css('top', '0px');
     if (!me) {
       node.append("<footer>\n  <span class=\"author\"></span> @\n  <span class=\"time\">" + (this.datef(message.received)) + "</span>\n</footer>");
       return $('.author', node).text(name);
@@ -192,6 +211,7 @@ SystemsPage = (function() {
       return $(this).remove();
     });
     $('#roster').hide();
+    $('#message').focus();
     selected = $(event.currentTarget);
     jid = selected.attr('data-jid');
     contact = this.session.roster[jid];
@@ -201,7 +221,7 @@ SystemsPage = (function() {
     this.currentContact = jid;
     $('#message-label').text($('.text', selected).text());
     $('#messages').empty();
-    $('#message').focus();
+    $('#message-form').css('top', '10px');
     this.layout.resize();
     return this.restoreChat(jid);
   };
@@ -262,10 +282,31 @@ SystemsPage = (function() {
     input.val('');
     return false;
   };
+  SystemsPage.prototype.showRoster = function() {
+    var container, form, height, items, rform, roster, up;
+    container = $('#container');
+    form = $('#message-form');
+    roster = $('#roster');
+    items = $('#roster-items');
+    rform = $('#roster-form');
+    up = container.height() - form.position().top < container.height() / 2;
+    if (up) {
+      roster.css('top', '');
+      roster.css('bottom', (form.outerHeight() + 5) + 'px');
+      height = container.height() - form.outerHeight() - 20;
+    } else {
+      roster.css('bottom', '');
+      roster.css('top', (form.position().top + form.outerHeight()) + 'px');
+      height = container.height() - form.position().top - 30;
+    }
+    items.css('max-height', (height - rform.outerHeight() - 40) + 'px');
+    roster.css('max-height', height + 'px');
+    return roster.show();
+  };
   SystemsPage.prototype.drawBlankSlate = function() {
     $("<form id=\"blank-slate\" class=\"float\">\n  <p>\n    Services, and individual systems, can be controlled by sending\n    them shell commands through this terminal. Select a system to chat with\n    to get started.\n  </p>\n  <input type=\"submit\" value=\"Select System\"/>\n</form>").appendTo('#alpha');
     return $('#blank-slate').submit(__bind(function() {
-      $('#roster').show();
+      this.showRoster();
       this.layout.resize();
       return false;
     }, this));
@@ -278,7 +319,8 @@ SystemsPage = (function() {
     }
     $('body').attr('id', 'systems-page');
     $('#container').hide().empty();
-    $("<div id=\"alpha\" class=\"primary column x-fill y-fill\">\n  <ul id=\"messages\" class=\"scroll y-fill\"></ul>\n  <form id=\"message-form\">\n    <label id=\"message-label\"></label>\n    <input id=\"message\" name=\"message\" type=\"text\" maxlength=\"1024\" placeholder=\"Type a command and press enter to send\"/>\n  </form>\n  <div id=\"roster\" class=\"float\" style=\"display:none;\">\n    <ul id=\"roster-items\"></ul>\n    <div id=\"roster-form\"></div>\n  </div>\n</div>").appendTo('#container');
+    $("<div id=\"alpha\" class=\"primary column x-fill y-fill\">\n  <ul id=\"messages\" class=\"scroll\"></ul>\n  <form id=\"message-form\">\n    <label id=\"message-label\"></label>\n    <input id=\"message\" name=\"message\" type=\"text\" maxlength=\"1024\" placeholder=\"Type a command and press enter to send\"/>\n  </form>\n  <div id=\"roster\" class=\"float\" style=\"display:none;\">\n    <ul id=\"roster-items\"></ul>\n    <div id=\"roster-form\"></div>\n  </div>\n</div>").appendTo('#container');
+    $('#message-form').css('top', '10px');
     $('#message-form').submit(__bind(function() {
       return this.send();
     }, this));
@@ -288,9 +330,20 @@ SystemsPage = (function() {
     $('#message').focus(function() {
       return $('#roster').hide();
     });
+    $(document).keyup(function(e) {
+      if (e.keyCode === 27) {
+        return $('#roster').hide();
+      }
+    });
     this.roster();
     $('#message-label').click(__bind(function() {
-      return $('#roster').toggle();
+      var roster;
+      roster = $('#roster');
+      if (roster.is(':visible')) {
+        return roster.hide();
+      } else {
+        return this.showRoster();
+      }
     }, this));
     $('#message').keyup(__bind(function(e) {
       switch (e.keyCode) {
@@ -314,6 +367,7 @@ SystemsPage = (function() {
     $('#container').show();
     this.layout = this.resize();
     this.scroll();
+    $('#message').focus();
     new Filter({
       list: '#roster-items',
       form: '#roster-form',
@@ -322,20 +376,15 @@ SystemsPage = (function() {
     return $('form', '#roster-form').show();
   };
   SystemsPage.prototype.resize = function() {
-    var container, form, items, label, msg, rform, roster;
+    var container, form, label, msg, msgs;
     container = $('#container');
-    roster = $('#roster');
-    items = $('#roster-items');
-    rform = $('#roster-form');
+    msgs = $('#messages');
     msg = $('#message');
     form = $('#message-form');
     label = $('#message-label');
     return new Layout(function() {
-      var height;
       msg.width(form.width() - label.width() - 32);
-      height = container.height() - form.height() - 10;
-      roster.css('max-height', height);
-      return items.css('max-height', height - rform.outerHeight() - 10);
+      return msgs.css('max-height', container.height() - form.height());
     });
   };
   return SystemsPage;

data/web/stylesheets/app.css

@@ -49,7 +49,14 @@ form.sections .error {
   color: #dd2828;
   font-size: 8pt;
   width: 89%;
-}#systems-page #container {
+}
+.hint {
+  color: #aaa;
+  font-size: 8pt;
+  line-height: 1;
+  margin-top: 3px;
+}
+#systems-page #container {
   height: 100%;
 }
 #systems-page #alpha {
@@ -72,7 +79,6 @@ form.sections .error {
   margin-bottom: 20px;
 }
 #systems-page #messages {
-  height: 100%;
   list-style: none;
   width: 100%;
 }
@@ -91,14 +97,15 @@ form.sections .error {
   font-family: Menlo, monospace;
   font-size: 11px;
   line-height: 1.3;
+  word-wrap: break-word;
 }
 #systems-page #messages li footer {
   font-weight: bold;
 }
 #systems-page #message-form {
-  height: 25px;
-  position: absolute;
-  bottom: 0;
+  height: 21px;
+  line-height: 1;
+  position: relative;
   width: 100%;
 }
 #systems-page #message-label {
@@ -107,8 +114,6 @@ form.sections .error {
   font-family: Menlo, monospace;
   font-size: 11px;
   padding: 0 2px 0 10px;
-  position: relative;
-  top: -3px;
 }
 #systems-page #message-label::after {
   margin: 0;
@@ -124,38 +129,39 @@ form.sections .error {
   font-size: 11px;
   margin: 0;
   padding: 0;
-  position: relative;
-  top: -3px;
 }
 #systems-page #message:focus {
   box-shadow: none;
 }
 #systems-page #roster {
-  background: #fff;
-  border: 1px solid #c4c4c4;
-  border-radius: 5px;
-  box-shadow: 0 10px 15px rgba(0,0,0, 0.15);
-  padding-top: 3px;
+  background: rgba(60, 60, 60, 0.98);
+  border: 2px solid rgb(12, 12, 12);
+  border-radius: 3px;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.75);
+  min-width: 250px;
   position: absolute;
-  bottom: 25px;
   left: 10px;
 }
 #systems-page #roster-items {
-  font-family: "Lucida Grande", Helvetica, sans-serif;
-  font-size: 11px;
-  margin-bottom: 3px;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 500;
   overflow-y: auto;
+  text-shadow: 0 1px 1px rgb(21, 21, 21);
 }
 #systems-page #roster-items li {
-  border-top: 1px solid transparent;
-  border-bottom: 1px solid transparent;
-  line-height: 1.5;
+  border-top: 1px solid rgb(80, 80, 80);
+  border-bottom: 1px solid rgb(48, 48, 48);
+  line-height: 38px;
   list-style: none;
   padding-right: 50px;
   position: relative;
 }
 #systems-page #roster-items li.offline {
-  color: rgba(0, 0, 0, 0.25);
+  color: #888;
+}
+#systems-page #roster-items li.offline .icon {
+  opacity: 0.3;
 }
 #systems-page #roster-items li:hover:not(.group) {
   background: #319be7;
@@ -164,40 +170,58 @@ form.sections .error {
   background: -o-linear-gradient(#319be7, #1b78d9);
   background: -webkit-linear-gradient(#319be7, #1b78d9);
   border-top: 1px solid #148ddf;
-  border-bottom: 1px solid #095bba;
   color: #fff;
   cursor: pointer;
   text-shadow: -1px 1px 1px hsl(210, 51%, 45%), 0px -1px 1px hsl(210, 51%, 49%);
 }
-#systems-page #roster-items li:not(.group) {
-  padding-left: 3em;
-}
 #systems-page #roster-items li.group {
-  color: #808080;
-  padding-left: 20px;
+  background: #404040;
+  background: -moz-linear-gradient(#404040, #353535);
+  background: -ms-linear-gradient(#404040, #353535);
+  background: -o-linear-gradient(#404040, #353535);
+  background: -webkit-linear-gradient(#404040, #353535);
+  color: #ccc;
+  font-size: 10px;
+  font-weight: bold;
+  line-height: 2;
+  padding-left: 10px;
+  text-transform: uppercase;
+}
+#systems-page #roster-items li .icon {
+  position: absolute;
+  height: 32px;
+  width: 32px;
+  top: 2px;
+}
+#systems-page #roster-items li .icon svg {
+  height: 32px;
+  width: 32px;
+}
+#systems-page #roster-items li .text {
+  padding-left: 32px;
 }
 #systems-page #roster-items li .unread {
-  color: #c0c0c0;
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 30px;
+  color: #fff;
   display: inline-block;
-  font-size: 9px;
+  font-size: 11px;
   font-weight: bold;
   line-height: 15px;
+  padding: 0 6px;
   position: absolute;
   right: 10px;
-  top: 1px;
+  top: 12px;
 }
 #systems-page #roster-items li:hover .unread {
   color: #fff;
 }
 #systems-page #roster-form {
-  background: #f8f8f8;
-  background: -moz-linear-gradient(#f8f8f8, #eee);
-  background: -ms-linear-gradient(#f8f8f8, #eee);
-  background: -o-linear-gradient(#f8f8f8, #eee);
-  background: -webkit-linear-gradient(#f8f8f8, #eee);
-  border-top: 1px solid #c4c4c4;
-  border-bottom-right-radius: 5px;
-  border-bottom-left-radius: 5px;
+  background: rgb(80, 80, 80);
+  background: -moz-linear-gradient(rgb(80,80,80), rgb(48, 48, 48));
+  background: -ms-linear-gradient(rgb(80,80,80), rgb(48, 48, 48));
+  background: -o-linear-gradient(rgb(80,80,80), rgb(48, 48, 48));
+  background: -webkit-linear-gradient(rgb(80,80,80), rgb(48, 48, 48));
   padding: 3px 5px;
 }
 #systems-page #roster-form form {

data/web/stylesheets/common.css

@@ -49,4 +49,10 @@ form.sections .error {
   color: #dd2828;
   font-size: 8pt;
   width: 89%;
-}
+}
+.hint {
+  color: #aaa;
+  font-size: 8pt;
+  line-height: 1;
+  margin-top: 3px;
+}

data/web/stylesheets/systems.css

@@ -21,7 +21,6 @@
   margin-bottom: 20px;
 }
 #systems-page #messages {
-  height: 100%;
   list-style: none;
   width: 100%;
 }
@@ -40,14 +39,15 @@
   font-family: Menlo, monospace;
   font-size: 11px;
   line-height: 1.3;
+  word-wrap: break-word;
 }
 #systems-page #messages li footer {
   font-weight: bold;
 }
 #systems-page #message-form {
-  height: 25px;
-  position: absolute;
-  bottom: 0;
+  height: 21px;
+  line-height: 1;
+  position: relative;
   width: 100%;
 }
 #systems-page #message-label {
@@ -56,8 +56,6 @@
   font-family: Menlo, monospace;
   font-size: 11px;
   padding: 0 2px 0 10px;
-  position: relative;
-  top: -3px;
 }
 #systems-page #message-label::after {
   margin: 0;
@@ -73,38 +71,39 @@
   font-size: 11px;
   margin: 0;
   padding: 0;
-  position: relative;
-  top: -3px;
 }
 #systems-page #message:focus {
   box-shadow: none;
 }
 #systems-page #roster {
-  background: #fff;
-  border: 1px solid #c4c4c4;
-  border-radius: 5px;
-  box-shadow: 0 10px 15px rgba(0,0,0, 0.15);
-  padding-top: 3px;
+  background: rgba(60, 60, 60, 0.98);
+  border: 2px solid rgb(12, 12, 12);
+  border-radius: 3px;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.75);
+  min-width: 250px;
   position: absolute;
-  bottom: 25px;
   left: 10px;
 }
 #systems-page #roster-items {
-  font-family: "Lucida Grande", Helvetica, sans-serif;
-  font-size: 11px;
-  margin-bottom: 3px;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 500;
   overflow-y: auto;
+  text-shadow: 0 1px 1px rgb(21, 21, 21);
 }
 #systems-page #roster-items li {
-  border-top: 1px solid transparent;
-  border-bottom: 1px solid transparent;
-  line-height: 1.5;
+  border-top: 1px solid rgb(80, 80, 80);
+  border-bottom: 1px solid rgb(48, 48, 48);
+  line-height: 38px;
   list-style: none;
   padding-right: 50px;
   position: relative;
 }
 #systems-page #roster-items li.offline {
-  color: rgba(0, 0, 0, 0.25);
+  color: #888;
+}
+#systems-page #roster-items li.offline .icon {
+  opacity: 0.3;
 }
 #systems-page #roster-items li:hover:not(.group) {
   background: #319be7;
@@ -113,40 +112,58 @@
   background: -o-linear-gradient(#319be7, #1b78d9);
   background: -webkit-linear-gradient(#319be7, #1b78d9);
   border-top: 1px solid #148ddf;
-  border-bottom: 1px solid #095bba;
   color: #fff;
   cursor: pointer;
   text-shadow: -1px 1px 1px hsl(210, 51%, 45%), 0px -1px 1px hsl(210, 51%, 49%);
 }
-#systems-page #roster-items li:not(.group) {
-  padding-left: 3em;
-}
 #systems-page #roster-items li.group {
-  color: #808080;
-  padding-left: 20px;
+  background: #404040;
+  background: -moz-linear-gradient(#404040, #353535);
+  background: -ms-linear-gradient(#404040, #353535);
+  background: -o-linear-gradient(#404040, #353535);
+  background: -webkit-linear-gradient(#404040, #353535);
+  color: #ccc;
+  font-size: 10px;
+  font-weight: bold;
+  line-height: 2;
+  padding-left: 10px;
+  text-transform: uppercase;
+}
+#systems-page #roster-items li .icon {
+  position: absolute;
+  height: 32px;
+  width: 32px;
+  top: 2px;
+}
+#systems-page #roster-items li .icon svg {
+  height: 32px;
+  width: 32px;
+}
+#systems-page #roster-items li .text {
+  padding-left: 32px;
 }
 #systems-page #roster-items li .unread {
-  color: #c0c0c0;
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 30px;
+  color: #fff;
   display: inline-block;
-  font-size: 9px;
+  font-size: 11px;
   font-weight: bold;
   line-height: 15px;
+  padding: 0 6px;
   position: absolute;
   right: 10px;
-  top: 1px;
+  top: 12px;
 }
 #systems-page #roster-items li:hover .unread {
   color: #fff;
 }
 #systems-page #roster-form {
-  background: #f8f8f8;
-  background: -moz-linear-gradient(#f8f8f8, #eee);
-  background: -ms-linear-gradient(#f8f8f8, #eee);
-  background: -o-linear-gradient(#f8f8f8, #eee);
-  background: -webkit-linear-gradient(#f8f8f8, #eee);
-  border-top: 1px solid #c4c4c4;
-  border-bottom-right-radius: 5px;
-  border-bottom-left-radius: 5px;
+  background: rgb(80, 80, 80);
+  background: -moz-linear-gradient(rgb(80,80,80), rgb(48, 48, 48));
+  background: -ms-linear-gradient(rgb(80,80,80), rgb(48, 48, 48));
+  background: -o-linear-gradient(rgb(80,80,80), rgb(48, 48, 48));
+  background: -webkit-linear-gradient(rgb(80,80,80), rgb(48, 48, 48));
   padding: 3px 5px;
 }
 #systems-page #roster-form form {