phrasing 3.1.0 → 3.2.0

data/app/assets/javascripts/phrasing.js.erb

@@ -18,32 +18,7 @@ var phrasing_setup = function(){
         xhr.setRequestHeader("X-CSRF-Token", token);
    });
 
-// SPINNER
-  var opts = {
-    lines: 9, // The number of lines to draw
-    length: 0, // The length of each line
-    width: 7, // The line thickness
-    radius: 12, // The radius of the inner circle
-    corners: 1, // Corner roundness (0..1)
-    rotate: 0, // The rotation offset
-    direction: 1, // 1: clockwise, -1: counterclockwise
-    color: '#FFF', // #rgb or #rrggbb or array of colors
-    speed: 1.9, // Rounds per second
-    trail: 58, // Afterglow percentage
-    shadow: false, // Whether to render a shadow
-    hwaccel: false, // Whether to use hardware acceleration
-    className: 'spinner', // The CSS class to assign to the spinner
-    zIndex: 2e9, // The z-index (defaults to 2000000000)
-    top: 'auto', // Top position relative to parent in px
-    left: 'auto' // Left position relative to parent in px
-  };
-
-  var target = document.getElementById('phrasing-spinner');
-  var spinner = new Spinner(opts).spin(target);
-  spinner.stop();
-
 // Hash size function
-
   Object.size = function(obj) {
       var size = 0, key;
       for (key in obj) {
@@ -52,8 +27,6 @@ var phrasing_setup = function(){
       return size;
   };
 
-
-
 ///ON TEXTCHANGE TRIGGER AJAX
   var trigger_binded_events_for_phrasable_class = 1;
   var timer = {}
@@ -61,7 +34,8 @@ var phrasing_setup = function(){
 
   $('.phrasable').on('DOMNodeInserted DOMNodeRemoved DOMCharacterDataModified', function(e){
 
-    $('#phrasing-edit-mode-bubble #phrasing-spinner p').css("color", "red").text("Currently editing..")
+    $('#phrasing-edit-mode-bubble #phrasing-saved-status-headline p').text("Saving")
+    $('#phrasing-saved-status-indicator-circle').css('background-color', 'orange')
     
     if (trigger_binded_events_for_phrasable_class == 1){
 
@@ -96,14 +70,7 @@ var phrasing_setup = function(){
       type: "PUT",
       url: url,
       data: { new_value: content },
-      beforeSend: function(){
-        spinner.spin(target);
-      },
       success: function(e){
-        spinner.stop();
-
-        // console.log("I've sent a ajax request: " + content);
-
         trigger_binded_events_for_phrasable_class = 0;
         if(content == "Empty"){
           $('span.phrasable[data-url="'+ url +'"]').html(content)
@@ -113,20 +80,15 @@ var phrasing_setup = function(){
         trigger_binded_events_for_phrasable_class = 1;
 
         if (Object.size(timer_status) == 0){
-          $('#phrasing-edit-mode-bubble #phrasing-spinner p').css("color", "green").text("Everything saved.")
+          $('#phrasing-edit-mode-bubble #phrasing-saved-status-headline p').text("Saved")
+          $('#phrasing-saved-status-indicator-circle').css('background-color', '#56AE45')
         }
       },
       error: function(e){
-        spinner.stop();
-        var warningMessages = [e.responseText, "Unable to save!"];
-        var intervalIndex = 0;
-        $('#phrasing-edit-mode-bubble #phrasing-spinner p').css("color", "red").text(warningMessages[1])
-        setInterval(function(){
-          var text = warningMessages[intervalIndex++ % warningMessages.length]
-          $('#phrasing-edit-mode-bubble #phrasing-spinner p').css("color", "red").text(text)
-        },2000);
+        $('#phrasing-edit-mode-bubble #phrasing-saved-status-headline p').text("Error")
+        $('#phrasing-saved-status-indicator-circle').css('background-color', 'red')
       }
-    })
+    });
   }
 
 // EDIT MODE SWITCH MODE BUTTON
@@ -151,18 +113,7 @@ var phrasing_setup = function(){
     $('#edit-mode-onoffswitch').prop('checked', false)
   }
 
-// Information icon for the edit mode bubble
-  $('#phrasing-info-icon-container, #phrasing-info-container').on('click',function(){
-    if($('#phrasing-info-container').is(':visible')){
-      $('#phrasing-edit-mode-bubble').animate({height: 180}, 200, function(){
-        $('#phrasing-info-container').hide()
-      })
-    }else{
-      $('#phrasing-info-container').show();
-      $('#phrasing-edit-mode-bubble').animate({height: 255}, 200)
-    }
-  }); 
 };
 
 $(document).ready(phrasing_setup)
-// $(document).on('page:load', phrasing_setup)
+// $(document).on('page:load', phrasing_setup)

data/app/assets/stylesheets/phrasing_edit_mode_bubble.css.scss

@@ -5,127 +5,127 @@
   }
   webkit-box-sizing:content-box;
   box-sizing:content-box;
-  background: rgba(00,00,00, .7);
-  color:white;
-  border: 2px solid black;
+  background: rgba(255,255,255, 1);
+  color:grey;
+  border: 2px solid #EFEFEF;
   position: fixed;
-  width:105px;
-  height:180px;
+  width:130px;
+  height:135px;
   bottom:10px;
   right:10px;
   z-index: 9999;
   font-family: Arial, Helvetica, sans-serif;
   font-size:14px;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
 
-  -webkit-border-radius: 20px;
-  -moz-border-radius: 20px;
-  border-radius: 20px;
-
-  p#edit-mode-headline{
-    text-align: center;
-    padding-top:10px;
-    color:white;
-    font-weight: bold;
+  p{
+    line-height:20px;
   }
+  ::selection{ color: grey;  background: white; } 
 
-// On/Off Switch
-  .onoffswitch {
+  #phrasing-edit-mode, #phrasing-saved-status, #phrasing-edit-all-phrases{
+    height:32px;
+    margin-top:10px;
+  }
+  #phrasing-edit-mode-headline{
+    height:30px;
+    width:45px;
+    float:left;
     padding-left:15px;
-    position: relative; 
-    width: 74px;
-    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
+    padding-top:5px;
   }
-  .onoffswitch-checkbox {
-      display: none;
+  #phrasing-onoffswitch{
+    float:left;
   }
-  .onoffswitch-label {
+  // On/Off Switch
+  .onoffswitch {
+    position: relative; width: 60px;
+    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
+    .onoffswitch-checkbox {
+      display: none;
+    }
+    .onoffswitch-label {
       display: block; overflow: hidden; cursor: pointer;
-      border: 2px solid #666666; border-radius: 5px;
-  }
-  .onoffswitch-inner {
+      border: 2px solid #CCCCCC; border-radius: 5px;
+    }
+    .onoffswitch-inner {
       width: 200%; margin-left: -100%;
       -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
       -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
-  }
-  .onoffswitch-inner:before, .onoffswitch-inner:after {
-      float: left; width: 50%; height: 23px; padding: 0; line-height: 23px;
-      font-size: 13px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
-      -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
-  }
-  .onoffswitch-inner:before {
-      content: "ON";
-      padding-left: 8px;
-      background-color: #6194FD; color: #FFFFFF;
-  }
-  .onoffswitch-inner:after {
-      content: "OFF";
-      padding-right: 8px;
-      background-color: #F8F8F8; color: #666666;
-      text-align: right;
-  }
-  .onoffswitch-switch {
-      width: 31px; margin: 0px;
+      &:before, &:after {
+        float: left; width: 50%; height: 25px; padding: 0; line-height: 25px;
+        font-size: 40px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
+        -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; content: "";
+      }
+      &:before {
+        padding-left: 10px;
+        background-color: #56AE45;
+      }
+      &:after {
+        padding-right: 10px;
+        background-color: #CCCCCC;
+        text-align: right;
+      }
+    }
+    .onoffswitch-switch {
+      width: 27px; margin: 0px;
       background: #FFFFFF;
-      border: 2px solid #666666; border-radius: 5px;
-      position: absolute; top: 0; bottom: 0; right: 39px;
+      border: 3px solid #CCCCCC; border-radius: 5px;
+      position: absolute; top: 0; bottom: 0; right: 29px;
       -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
       -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; 
       background-image: -moz-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
       background-image: -webkit-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
       background-image: -o-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
       background-image: linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
-  }
-  .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
-      margin-left: 0;
-  }
-  .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
-      right: 0px; 
-  }
-
-  // Spinner
-  #phrasing-spinner{
-    margin-top: 10px;
-    // background-color: black;
-    text-align: center;
-    font-weight: bold;
-    height:40px;
-    p{
-      color:white;
     }
-  }
 
-  #view-all-phrases{
-    margin-top:10px;
-    // background-color: black;
-    text-align: center;
-    font-weight: bold;
-    a{
-      color: #0088cc;
-      &:hover{
-        text-decoration: none;
+    .onoffswitch-checkbox:checked {
+      +.onoffswitch-label {
+        border: 2px solid #56AE45;
+        .onoffswitch-inner {
+          margin-left: 0;
+        }
+        .onoffswitch-switch {
+          right: 0px;
+          border: 3px solid #56AE45;
+        }
       }
     }
   }
-
-  #phrasing-info-icon-container{
-    text-align:center;
-    cursor:pointer;
-    .phrasing-info-icon{
-      margin-top:-12px;
-    }
+  #phrasing-saved-status-headline{
+    height:30px;
+    width:45px;
+    float:left;
+    padding-left:15px;
+    padding-top:5px;
+  }
+  #phrasing-saved-status-indicator{
+    float:left;
+  }
+  #phrasing-saved-status-indicator-circle{
+    background-color:green;
+    width:20px;
+    height:20px;
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    margin-left:10px;
+    margin-top:5px;
+  }
+  #phrasing-edit-all-phrases-headline{
+    height:30px;
+    width:45px;
+    float:left;
+    padding-left:15px;
+    padding-top:5px;
   }
-
-  #phrasing-info-container{
-    display:none;
-    text-align:center;
-    cursor:pointer;
-    p{
-      font-size:12px;
-      line-height:14px;
-    }
-    color: #8c8c8c;
-    &.phrasing-info-visible{
-      display:block;
+  #phrasing-edit-all-phrases-icon-container{
+    float:left;
+    .phrasing-edit-all-phrases-icon{
+      margin-left:10px;
+      margin-top:7px;
     }
   }
 

data/app/views/phrasing/_initializer.html.haml

@@ -9,17 +9,25 @@
           %button.italic i
 
   #phrasing-edit-mode-bubble
-    %p#edit-mode-headline Edit mode:
-    .onoffswitch
-      %input#edit-mode-onoffswitch.onoffswitch-checkbox{checked: "checked", name: "onoffswitch", type: "checkbox"}/
-      %label.onoffswitch-label{for: "edit-mode-onoffswitch"}
-        .onoffswitch-inner
-        .onoffswitch-switch
-    #phrasing-spinner
-      %p No changes made.
-    #view-all-phrases
-      %p= link_to "All phrases", phrasing_phrases_path, data: { no_turbolink: true }
-    #phrasing-info-icon-container
-      = image_tag "phrasing_information_icon.png", class: "phrasing-info-icon"
-    #phrasing-info-container
-      %p Your content will be saved automatically 3 seconds after you stop typing.
+    
+    #phrasing-edit-mode
+      #phrasing-edit-mode-headline
+        %p Edit
+      #phrasing-onoffswitch
+        .onoffswitch
+          %input#edit-mode-onoffswitch.onoffswitch-checkbox{checked: "checked", name: "onoffswitch", type: "checkbox"}/
+          %label.onoffswitch-label{for: "edit-mode-onoffswitch"}
+            .onoffswitch-inner
+            .onoffswitch-switch
+    
+    #phrasing-saved-status
+      #phrasing-saved-status-headline
+        %p Saved
+      #phrasing-saved-status-indicator
+        #phrasing-saved-status-indicator-circle
+
+    #phrasing-edit-all-phrases
+      #phrasing-edit-all-phrases-headline
+        %p Edit all
+      #phrasing-edit-all-phrases-icon-container
+        = link_to image_tag("phrasing_icon_edit_all.png", class: 'phrasing-edit-all-phrases-icon'), phrasing_phrases_path, data: { no_turbolink: true }

data/lib/phrasing.rb

@@ -11,7 +11,7 @@ module Phrasing
       initializer :assets, :group => :all do
         ::Rails.application.config.assets.paths << ::Rails.root.join('app', 'assets', 'fonts')
         ::Rails.application.config.assets.paths << ::Rails.root.join('app', 'assets', 'images')
-        ::Rails.application.config.assets.precompile += ['editor.js', 'phrasing_engine.css', 'phrasing_engine.js', 'icomoon.dev.svg', 'icomoon.svg', 'icomoon.eot', 'icomoon.ttf', 'icomoon.woff', 'phrasing_information_icon.png']
+        ::Rails.application.config.assets.precompile += ['editor.js', 'phrasing_engine.css', 'phrasing_engine.js', 'icomoon.dev.svg', 'icomoon.svg', 'icomoon.eot', 'icomoon.ttf', 'icomoon.woff', 'phrasing_icon_edit_all.png']
       end
     end
   end

data/lib/phrasing/version.rb

@@ -1,3 +1,3 @@
 module Phrasing
-  VERSION = "3.1.0"
+  VERSION = "3.2.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: phrasing
 version: !ruby/object:Gem::Version
-  version: 3.1.0
+  version: 3.2.0
   prerelease: 
 platform: ruby
 authors:
@@ -10,7 +10,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-01-02 00:00:00.000000000 Z
+date: 2014-01-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -125,7 +125,7 @@ files:
 - app/assets/fonts/icomoon.svg
 - app/assets/fonts/icomoon.ttf
 - app/assets/fonts/icomoon.woff
-- app/assets/images/phrasing_information_icon.png
+- app/assets/images/phrasing_icon_edit_all.png
 - app/assets/javascripts/editor.js
 - app/assets/javascripts/head.js
 - app/assets/javascripts/phrasing.js.erb