remove wallpaper

4 files changed, 43 insertions, 9 deletions

diff --git a/public/assets/img/scissors.png b/public/assets/img/scissors.png
new file mode 100644
index 0000000..f604cb6
--- /dev/null
+++ b/public/assets/img/scissors.png
diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js
index 61ecb78..bcae3c5 100644
--- a/public/assets/javascripts/ui/editor/WallpaperPicker.js
+++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js
@@ -7,6 +7,7 @@ var WallpaperPicker = UploadView.extend({
 
 	events: {
 		"click .swatch": 'pick',
+		"click .wallpaperRemove": 'remove',
   },
 	
 	initialize: function(){
@@ -67,23 +68,34 @@ var WallpaperPicker = UploadView.extend({
 	
 	pick: function(e){
     var $swatch = $(e.currentTarget)
+    this.follow( e, $swatch.css('background-image') )
+  },
+  
+	remove: function(e){
+	  this.follow( e, "none" )
+	  $(".floatingSwatch").addClass("scissors")
+	},
+
+  follow: function(e, wallpaper, icon){
+    icon = icon || wallpaper
+    
 		var $floatingSwatch = $(".floatingSwatch")
 
-    $floatingSwatch.css('background-image', $swatch.css('background-image'))
+    $floatingSwatch.css('background-image', wallpaper)
 
-		Scenery.nextWallpaper = $swatch.css('background-image')
+		Scenery.nextWallpaper = wallpaper
 
 		setTimeout(function(){
 			function _followCursor(e) {
 				$floatingSwatch.css({
 					top: (e.pageY + 10) + 'px',
-					left: (e.pageX + 10) + 'px'
+					left: (e.pageX + 10) + 'px',
 				});
 			}
-			$(window).on('mousemove', _followCursor);
+			$(window).on('mousemove', _followCursor)
 			$(window).one('click', function () {
-				$(window).off('mousemove', _followCursor);
-				$floatingSwatch.hide();
+				$(window).off('mousemove', _followCursor)
+				$floatingSwatch.removeClass("scissors").hide()
 			});
 			$floatingSwatch.show()
 			_followCursor(e);
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index c2e7119..5922ab5 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -68,6 +68,12 @@ a{
 	z-index: 10;
 	pointer-events: none;
 }
+.floatingSwatch.scissors {
+  background-image: url(/assets/img/scissors.png) !important;
+  background-repeat: no-repeat;
+  border: 0;
+  box-shadow: 0 0 transparent;
+}
 
 .ants {
 	max-width:320px;
@@ -1135,18 +1141,30 @@ iframe.embed {
   border-bottom: 1px solid black;
   min-height: 30px;
 }
-.wallpaperUpload {
+.wallpaper {
   font-size: 14px;
   font-weight: 300;
 }
-.wallpaperUpload label {
+.wallpaper label {
   position: relative;
   top: -6px;
   float: none;
 }
-.wallpaperUpload .icon-ios7-upload-outline {
+.wallpaper form {
+  padding: 2px 0 0 0;
+}
+.wallpaper .icon-ios7-upload-outline {
   font-size: 26px;
 }
+.wallpaper .wallpaperRemove {
+  cursor: pointer;
+  border-top: 1px solid black;
+  padding: 4px 0 0 0;
+}
+.wallpaper .wallpaperRemove img {
+  width: 18px;
+  margin: 0 4px;
+}
 .wallpaperUpload .upload-icon.uploading {
 }
 .wallpaperUpload .upload-icon.uploading:before {
diff --git a/views/controls/editor/wallpaper.ejs b/views/controls/editor/wallpaper.ejs
index 55ecf85..02ab16d 100644
--- a/views/controls/editor/wallpaper.ejs
+++ b/views/controls/editor/wallpaper.ejs
@@ -11,6 +11,10 @@
     <input type="text" placeholder="Enter Image URL" class="url">
  -->
   </div>
+  <div class="wallpaperRemove">
+    <img src="/assets/img/scissors.png">
+    <label>Remove Wallpaper</label>
+  </div>
 </div>
 
 <div class="floatingSwatch"></div>