add some styles to forms, work on notifications

cugos · Sep 12, 2015 · a0650bd · a0650bd
1 parent 92a9e71
commit a0650bd
Show file tree

Hide file tree

Showing 4 changed files with 122 additions and 9 deletions.
diff --git a/src/js/form.dropchop.js b/src/js/form.dropchop.js
@@ -17,7 +17,7 @@ var dropchop = (function(dc) {
     var $html = $('<form>').addClass('dropchop-form dropchop-form-'+trigger)
       .attr('id', 'dropchop-form')
       .attr('data', name);
-    var $title = $('<h3>').addClass('dropchop-form-title').text(name).appendTo($html);
+    var $title = $('<h2>').addClass('dropchop-form-title').text(name).appendTo($html);
     var $desc = $('<p>').addClass('dropchop-form-description').text(info.description).appendTo($html);
 
     // create params
@@ -29,7 +29,13 @@ var dropchop = (function(dc) {
     }
 
     // create submit button
-    var $submit = $('<button>').addClass('dropchop-form-submit').text('Execute').attr('for', name);
+    var $submit = $('<button>').addClass('dropchop-btn dropchop-btn-green dropchop-form-submit').text('Execute').attr('for', name);
+    var $cancel = $('<button>').addClass('dropchop-btn dropchop-btn-cancel dropchop-form-cancel').text('Cancel').attr('type', 'button');
+    $cancel.on('click', function(event) {
+      event.preventDefault();
+      dc.form.remove();
+      return false;
+    });
     $html.on('submit', function(event) {
       event.preventDefault();
       // get the parameters from the form
@@ -45,6 +51,8 @@ var dropchop = (function(dc) {
       return false;
     });
     $html.append($submit);
+    $html.append($cancel);
+
     dc.$elem.append($html);
     // submit button needs trigger operation:geo with op and parameter array
   };
@@ -86,6 +94,12 @@ var dropchop = (function(dc) {
         .attr('name', p.name)
         .attr('value', p.default);
       return $i;
+    },
+    checkbox: function(p) {
+      var $i = $('<input>').attr('type', 'checkbox')
+        .attr('name', p.name)
+        .attr('value', p.default);
+      return $i;
     }
   };
 

diff --git a/src/js/layers.dropchop.js b/src/js/layers.dropchop.js
@@ -20,7 +20,7 @@ var dropchop = (function(dc) {
     var l = _makeLayer(file, blob);
     dc.layers.list[l.stamp] = l;
 
-    dc.notify('new', l.name + ' has been added!', 5000);
+    dc.notify('success', l.name + ' has been added!', 5000);
 
     // trigger layer:added
     $(dc.layerlist).trigger('layer:added', [l]);

diff --git a/src/js/ops.dropchop.js b/src/js/ops.dropchop.js
@@ -52,7 +52,14 @@ var dropchop = (function(dc) {
    */
   dc.ops.geoExecute = function(event, operation, parameters) {
     var prep = dc.ops.prepareTurfParams(operation, parameters);
-    var result = turf[operation].apply(null, prep.options);
+    var result = null;
+    try {
+      result = turf[operation].apply(null, prep.options, 5000);
+    } catch(err) {
+      dc.notify('error', err);
+      throw err;
+    }
+
 
     var newFile = {
       name: prep.name,

diff --git a/src/scss/dropchop.scss b/src/scss/dropchop.scss
@@ -1,4 +1,7 @@
 $grey: #c0c0c0;
+$green: #2ECC40;
+$red: #ff7a72;
+
 body {
   padding: 0;
   margin: 0;
@@ -12,6 +15,49 @@ body {
   }
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  padding: 0;
+  font-family: "Inconsolata", monospace;
+}
+p {
+  margin: 0;
+  padding: 0;
+}
+input,
+label,
+.dropchop-btn {
+  font-family: "Inconsolata", monospace; 
+}
+
+.dropchop-btn {
+  border: none;
+  padding: 0.5em 1em;
+  font-size: 1em;
+  cursor: pointer;
+
+  &.dropchop-btn-green {
+    background: $green;
+    color: white;
+    &:hover {
+      background: darken($green, 10);
+    }
+  }
+  &.dropchop-btn-cancel {
+    background: transparent;
+    color: red;
+    &:hover {
+      background: #f6f6f6;
+    }
+  }
+}
+
+
 
 #dropchop {
   position: relative;
@@ -48,18 +94,23 @@ $width: 280px;
     margin-right: 5px;
     position: absolute;
     top: 8px;
-    left: 4px;
+    left: 9px;
   }
   .layer-name {
     display: block;
-    padding: 8px 0 8px 25px;
-    font-size: 0.9em;
+    padding: 8px 10px 8px 30px;
+    font-size: 0.85em;
+    color: #999;
+    word-wrap: break-word;
     &:hover {
       background: #f6f6f6;
     }
     &.selected {
       background: #333;
       color: #f6f6f6;
+      &:hover {
+        background: #444;
+      }
     }
   }
 }
@@ -79,8 +130,14 @@ $width: 280px;
   clear: both;
   padding: 5px;
   margin: 10px 10px 0 0;
-  background: limegreen;
-  color: white;
+  &.success {
+    background: $green;
+    color: white;
+  }
+  &.error {
+    background: $red;
+    color: white;
+  }
 }
 
 
@@ -118,4 +175,39 @@ $width: 280px;
   margin-left: 1px;
   background: white;
   padding: 10px;
+  .dropchop-form-title {}
+  .dropchop-form-description {
+    font-size: 0.9em;
+    color: #999;
+    border-bottom: 1px solid #f6f6f6;
+    padding: 0.5em 0;
+    margin-bottom: 0.8em;
+  }
+  .dropchop-form-submit,
+  .dropchop-form-cancel {
+    float:right;
+    margin-left: 10px;
+  }
+}
+.dropchop-form-parameter {
+  margin-bottom: 1em;
+  label {
+    display: block;
+    color: #555;
+    font-size: 1.1em;
+    text-transform: uppercase;
+    font-weight: 900;
+  }
+  input,
+  select {
+    display: block;
+    width: 100%;
+    padding: 0.5em;
+    font-size: 0.9em;
+  }
+  .dropchop-form-parameter-description {
+    font-size: 0.8em;
+    text-transform: none;
+    font-weight: 100;
+  }
 }