Permalink
Browse files

working through edit views, back button, beginning of set origin beha…

…vior
  • Loading branch information...
1 parent af6b020 commit e2c9a2dcce2eec90e549348b4e1a8e4fb7545f8b @bmcmahen committed Mar 24, 2013
View
Binary file not shown.

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -62,7 +62,7 @@ Trailmix.behaviors.observeTrails = function(context){
if (this.autorun) this.autorun.stop();
if (this.handle) {
this.handle.stop();
- this.removeAllFeatures();
+ context.removeAllFeatures();
}
}
};
@@ -80,10 +80,8 @@ Trailmix.behaviors.observeBoundsChanges = function(context){
northEast: [ bounds._northEast.lat, bounds._northEast.lng ]
};
- if (MapBounds.find().count() > 1)
- MapBounds.insert(boundObject);
- else
- MapBounds.update({}, boundObject);
+ if (MapBounds.find().count() > 1) MapBounds.insert(boundObject);
+ else MapBounds.update({}, boundObject);
context.browseLocation = context.map.getCenter();
context.browseZoom = context.map.getZoom();
},
@@ -102,7 +100,6 @@ Trailmix.behaviors.observeBoundsChanges = function(context){
// map at that location.
Trailmix.behaviors.geoLocate = function(context){
return {
-
onLocationFound: function(e){
context.map.setView(e.latlng, 12);
},
@@ -116,3 +113,19 @@ Trailmix.behaviors.geoLocate = function(context){
}
};
};
+
+Trailmix.behaviors.selectOrigin = function(context){
+ return {
+ onClick: function(e){
+ console.log('clicked here', e);
+ },
+
+ on: function(){
+ context.map.on('click', this.onClick);
+ },
+
+ off : function() {
+ context.map.off('click', this.onClick);
+ }
+ };
+};
@@ -45,8 +45,16 @@ Trailmix.MapView = (function(){
});
},
- // TODO: Modes aren't necessarily mutually exclusive. If we are
- // editing, for instance, we will be in 'detail' mode.
+ // TODO: Modes aren't necessarily mutually exclusive.
+ // If we are editing, for instance, we will be in 'detail' mode.
+ // If we are switching between detail, and browse, then we
+ // should reset our modes. This means we should probably
+ // keep an array of modes, and iterate through each, exiting
+ // each mode if need be.
+ // Otherwise we could:
+ // (1) Session.set('mapView', 'detail');
+ // (2) Session.set('mapView', 'origin');
+ // How do we _exit_ modes, then?
enterMode: function(name){
if (this.mode && name !== 'drawing') this.mode.exit();
console.log(this);
@@ -7,12 +7,12 @@
enter: function(){
_.each(this.behaviors, function(behavior){
this.context.install(behavior);
- });
+ }, this);
},
exit: function(){
_.each(this.behaviors, function(behavior){
this.context.uninstall(behavior);
- });
+ }, this);
}
};
@@ -51,6 +51,17 @@
return mode;
};
+ Trailmix.modes.UserInput = function(context){
+ var mode = {
+ context: context,
+ behaviors: [
+ Trailmix.behaviors.selectOrigin(context)
+ ]
+ };
+ _.extend(mode, modeFunctions);
+ return mode;
+ };
+
})();
@@ -2,15 +2,12 @@
Template.sideBar.helpers({
-
browsingView : function() {
return Session.equals('mapView', 'browse');
},
-
detailView : function(){
return Session.equals('mapView', 'detail');
}
-
});
Template.detailView.events({
@@ -35,17 +32,17 @@
// XXX Optimize to also get those in the surrounding area? (or do
// this on the subscription?)
// XXX eventually use $where && $box if minimongo ever supports the
- // geo stuff.
+ // geo stuff.
var bounds = MapBounds.findOne();
if (bounds){
var sw = bounds.southWest
- , ne = bounds.northEast;
+ , ne = bounds.northEast;
return Trails.find({
'coordinates.0': {'$gte' : sw[0], '$lte' : ne[0]},
'coordinates.1': {'$gte' : sw[1], '$lte' : ne[1]}
});
- }
+ }
}
});
@@ -55,7 +52,7 @@
Session.set('currentTrail', this._id);
}
})
-
+
})(Trailmix);
@@ -41,7 +41,7 @@ body
.tab-content
position absolute
- top 112px
+ top 142px
left 0
right 0
bottom 0
@@ -1,14 +1,68 @@
@import 'nib'
@import 'variables'
-// Our Basic Button. Thanks Bootstrap Dudes.
+.btn-back
+ display inline-block
+ position relative
+ width 110px
+ z-index 1
+ font-family $font-family
+ font-weight 600
+ color $gray
+ text-shadow: 0 1px 1px rgba(255,255,255,0.4)
+ padding 0 10px 0 25px
+ line-height 40px
+ text-decoration none
+
+ &:hover:before
+ &:hover:after
+ background linear-gradient($white, #f6f6f6)
+ border-color #bbb
+ box-shadow 1px 1px 2px rgba(0,0,0,0.1)
+ cursor inherit
+
+ &:active:before
+ &:active:after
+ box-shadow inset 0 2px 4px -2px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05) !important
+
+ &:before
+ content ''
+ position absolute
+ box-sizing border-box
+ left 19px
+ height 30px
+ right 34px
+ border: 1px solid #dcdcdc
+ margin-top 5px
+ z-index -1
+ border-left-width 0
+ background $white
+ box-shadow: 1px 1px 2px rgba(0,0,0,0.05)
+ border-radius 2px
+
+ &:after
+ content ''
+ position absolute
+ box-sizing border-box
+ left 9px
+ height 22px
+ border: 1px solid #dcdcdc
+ width 22px
+ box-shadow: 1px 1px 2px rgba(0,0,0,0.05)
+ top 9px
+ z-index -2
+ background $white
+ border-top 0 transparent
+ border-right 0 transparent
+ border-radius 2px 4px
+ transform rotate(45deg)
+
+// Our Basic Button. Thanks Bootstrap Dudes.
.btn
font-family $font-family
font-weight 600
- border: 1px solid rgb(224, 224, 224);
- border-bottom-color: rgb(204, 204, 204);
- background rgb(226,226, 226)
- background-image: linear-gradient(rgb(255, 255, 255), rgb(226, 226, 226))
+ border: 1px solid #dcdcdc
+ background #f5f5f5
box-shadow: 1px 1px 2px rgba(0,0,0,0.05)
background-repeat: repeat-x
border-radius 2px
@@ -45,9 +99,10 @@
background-image none
&:hover
- transition background-position 0.2s linear
- background-position 0 -15px
- cursor pointer
+ background linear-gradient(#f5f5f5,#f1f1f1)
+ border 1px solid #bbb
+ box-shadow 1px 1px 2px rgba(0,0,0,0.1)
+ cursor default
// Button Colours
.btn-green
@@ -60,15 +115,27 @@
.btn-blue
background $blue
- background-image linear-gradient(rgb(180, 174, 255), rgb(121, 114, 202))
+ border: 1px solid #888
+ border-bottom: 1px solid #555
+
+ &:hover
+ background linear-gradient($blue, rgb(0, 163, 224))
+ border: 1px solid #555
+ border-bottom: 1px solid #222
+ box-shadow 1px 1px 2px rgba(0,0,0,0.1)
.btn-pink
background $pink
- background-image linear-gradient(rgb(240, 123, 239), rgb(207, 106, 206))
.btn-green
background $green
- background-image: linear-gradient(rgb(211, 203, 77), rgb(168, 163, 63))
+
+ &:hover
+ background linear-gradient($green, rgb(190, 192, 73))
+ border 1px solid #777
+ border-bottom 1px solid #444
+ box-shadow 1px 1px 2px rgba(0,0,0,0.1)
+
// Close button
button.close
@@ -92,3 +159,6 @@ button.close
border-top-left-radius 0
border-bottom-left-radius 0
+input[type=submit]
+ border-radius 2px
+
@@ -3,7 +3,7 @@
input
border 0px
- border-radius 2px
+ border-radius 0
margin 8px
&[type='text']
@@ -14,6 +14,8 @@ input
box-sizing border-box
border 1px solid rgba(213, 213, 213, 0.54)
font-family $font-family
+ background rgb(247, 245, 245)
+ border-radius 0
box-shadow: inset 1px 1px 1px rgba(0,0,0,0.3);
&.large
@@ -23,7 +25,10 @@ input
&.wide
width 100%
-form
+ &[type='submit']
+ border-radius 2px
+
+form
display block
box-sizing border-box
margin 15px
@@ -33,9 +38,11 @@ form
& label
display block
- font-size 14px
- margin-top 10px
+ font-size 12px
+ margin-top 17px
font-weight 600
+ color #666
+ text-transform uppercase
& input
& textarea
@@ -51,7 +58,9 @@ form
& textarea
width 100%
min-height 200px
- border-radius 2px
+ border-radius 0
+ padding 5px
+ background rgb(247, 245, 245)
box-shadow: inset 1px 1px 1px rgba(0,0,0,0.3);
box-sizing border-box
border 1px solid rgba(213, 213, 213, 0.54)
Oops, something went wrong.

0 comments on commit e2c9a2d

Please sign in to comment.