From b81e651c570b60f5b4705a5a1b8f0c339b3522cd Mon Sep 17 00:00:00 2001
From: Ankur <as3445@drexel.edu>
Date: Fri, 1 Feb 2013 18:04:41 -0500
Subject: [PATCH] Save button

turns blue when the page is unsaved
---
 css/style.css         | 20 ++++++++++++++++++++
 js/editors/unsaved.js |  2 ++
 nav.php               | 11 ++++++-----
 3 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/css/style.css b/css/style.css
index 4ae89ba77b..29c3577ed6 100644
--- a/css/style.css
+++ b/css/style.css
@@ -24,6 +24,7 @@ p {
   margin: 0;
 }
 
+
 #control {
   z-index: 199999;
   min-width: 865px;
@@ -915,8 +916,27 @@ ie6, li {
   background-position: 8px 7px;
 }
 
+.unsaved {
+  background-color: #2ba6cb;
+  border: 1px solid #1e728c;
+  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset,
+                      1px 2px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset,
+                      1px 2px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset,
+                      1px 2px 1px rgba(0, 0, 0, 0.2);
+  color: white;
+  /*font-weight: bold; */
+  -webkit-transition: background-color 0.15s ease-in-out; 
+  -moz-transition: background-color 0.15s ease-in-out; 
+  -o-transition: background-color 0.15s ease-in-out; 
+  transition: background-color 0.15s ease-in-out; 
+  /* Hovers */ /* Sizes */ /* Colors */ /* Radii */ /* Layout */ /* Disabled ---------- */ 
+}
+
 .button.download {
   padding-left: 24px;
+
 /*  background-image: url(/images/arrow_down_12x12.png);*/
   background-image: url(../images/download.png);
   background-repeat: no-repeat;
diff --git a/js/editors/unsaved.js b/js/editors/unsaved.js
index a96b949741..4ccade1b99 100644
--- a/js/editors/unsaved.js
+++ b/js/editors/unsaved.js
@@ -24,6 +24,7 @@ function updateTitle(revert, onload) {
   // if (jsbin.settings.home) title = jsbin.settings.home + '@' + title;
   if (editors.html.ready && editors.javascript.ready) {
     if (!revert) {
+      $('#save').addClass('unsaved');
       document.title = title + ' [unsaved]';
       warn_on_unload = "You have unsaved changes!";
       // if ($revert.addClass('enable').is(':hidden')) {
@@ -31,6 +32,7 @@ function updateTitle(revert, onload) {
       // }
     } else {
       document.title = title;
+      $('#save').removeClass('unsaved');
     }
   }
 }
diff --git a/nav.php b/nav.php
index 1daaa2bf01..7ebc89c7fa 100644
--- a/nav.php
+++ b/nav.php
@@ -3,13 +3,14 @@
     <div class="buttons">
       <a id="account" class="tab button gap" href="<?php echo ROOT?>">New Page</a>
 
-      <a id="view" target="<?php echo $code_id?>" class="tab button group light left" href="http://<?php echo $_SERVER['HTTP_HOST'] . ROOT . $code_id?>">View</a>
-
-        <?php if ($code_id) : ?>
-          <a id="save" title="Save a new revision" class="button light save group" href="<?php echo $code_id_path?>save">Save</a>
+       <?php if ($code_id) : ?>
+          <a id="save" title="Save a new revision" class="button light save group left" href="<?php echo $code_id_path?>save">Save</a>
         <?php else : ?>
-          <a id="save" class="tab button light save group" href="<?php echo ROOT?>save">Save</a>
+          <a id="save" class="tab button light save group left" href="<?php echo ROOT?>save">Save</a>
         <?php endif ?>
+      <a id="view" target="<?php echo $code_id?>" class="tab button group light" href="http://<?php echo $_SERVER['HTTP_HOST'] . ROOT . $code_id?>">View</a>
+
+       
 
         <?php if ($ownership) :?>
                 <div class="button group gap right tall">