phrasing 3.1.0 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. data/app/assets/images/phrasing_icon_edit_all.png +0 -0
  2. data/app/assets/javascripts/phrasing.js.erb +8 -57
  3. data/app/assets/stylesheets/phrasing_edit_mode_bubble.css.scss +92 -92
  4. data/app/views/phrasing/_initializer.html.haml +22 -14
  5. data/lib/phrasing.rb +1 -1
  6. data/lib/phrasing/version.rb +1 -1
  7. metadata +3 -3
  8. data/app/assets/images/phrasing_information_icon.png +0 -0
data/app/assets/javascripts/phrasing.js.erb CHANGED
@@ -18,32 +18,7 @@ var phrasing_setup = function(){
18
18
  xhr.setRequestHeader("X-CSRF-Token", token);
19
19
  });
20
20
 
21
- // SPINNER
22
- var opts = {
23
- lines: 9, // The number of lines to draw
24
- length: 0, // The length of each line
25
- width: 7, // The line thickness
26
- radius: 12, // The radius of the inner circle
27
- corners: 1, // Corner roundness (0..1)
28
- rotate: 0, // The rotation offset
29
- direction: 1, // 1: clockwise, -1: counterclockwise
30
- color: '#FFF', // #rgb or #rrggbb or array of colors
31
- speed: 1.9, // Rounds per second
32
- trail: 58, // Afterglow percentage
33
- shadow: false, // Whether to render a shadow
34
- hwaccel: false, // Whether to use hardware acceleration
35
- className: 'spinner', // The CSS class to assign to the spinner
36
- zIndex: 2e9, // The z-index (defaults to 2000000000)
37
- top: 'auto', // Top position relative to parent in px
38
- left: 'auto' // Left position relative to parent in px
39
- };
40
-
41
- var target = document.getElementById('phrasing-spinner');
42
- var spinner = new Spinner(opts).spin(target);
43
- spinner.stop();
44
-
45
21
  // Hash size function
46
-
47
22
  Object.size = function(obj) {
48
23
  var size = 0, key;
49
24
  for (key in obj) {
@@ -52,8 +27,6 @@ var phrasing_setup = function(){
52
27
  return size;
53
28
  };
54
29
 
55
-
56
-
57
30
  ///ON TEXTCHANGE TRIGGER AJAX
58
31
  var trigger_binded_events_for_phrasable_class = 1;
59
32
  var timer = {}
@@ -61,7 +34,8 @@ var phrasing_setup = function(){
61
34
 
62
35
  $('.phrasable').on('DOMNodeInserted DOMNodeRemoved DOMCharacterDataModified', function(e){
63
36
 
64
- $('#phrasing-edit-mode-bubble #phrasing-spinner p').css("color", "red").text("Currently editing..")
37
+ $('#phrasing-edit-mode-bubble #phrasing-saved-status-headline p').text("Saving")
38
+ $('#phrasing-saved-status-indicator-circle').css('background-color', 'orange')
65
39
 
66
40
  if (trigger_binded_events_for_phrasable_class == 1){
67
41
 
@@ -96,14 +70,7 @@ var phrasing_setup = function(){
96
70
  type: "PUT",
97
71
  url: url,
98
72
  data: { new_value: content },
99
- beforeSend: function(){
100
- spinner.spin(target);
101
- },
102
73
  success: function(e){
103
- spinner.stop();
104
-
105
- // console.log("I've sent a ajax request: " + content);
106
-
107
74
  trigger_binded_events_for_phrasable_class = 0;
108
75
  if(content == "Empty"){
109
76
  $('span.phrasable[data-url="'+ url +'"]').html(content)
@@ -113,20 +80,15 @@ var phrasing_setup = function(){
113
80
  trigger_binded_events_for_phrasable_class = 1;
114
81
 
115
82
  if (Object.size(timer_status) == 0){
116
- $('#phrasing-edit-mode-bubble #phrasing-spinner p').css("color", "green").text("Everything saved.")
83
+ $('#phrasing-edit-mode-bubble #phrasing-saved-status-headline p').text("Saved")
84
+ $('#phrasing-saved-status-indicator-circle').css('background-color', '#56AE45')
117
85
  }
118
86
  },
119
87
  error: function(e){
120
- spinner.stop();
121
- var warningMessages = [e.responseText, "Unable to save!"];
122
- var intervalIndex = 0;
123
- $('#phrasing-edit-mode-bubble #phrasing-spinner p').css("color", "red").text(warningMessages[1])
124
- setInterval(function(){
125
- var text = warningMessages[intervalIndex++ % warningMessages.length]
126
- $('#phrasing-edit-mode-bubble #phrasing-spinner p').css("color", "red").text(text)
127
- },2000);
88
+ $('#phrasing-edit-mode-bubble #phrasing-saved-status-headline p').text("Error")
89
+ $('#phrasing-saved-status-indicator-circle').css('background-color', 'red')
128
90
  }
129
- })
91
+ });
130
92
  }
131
93
 
132
94
  // EDIT MODE SWITCH MODE BUTTON
@@ -151,18 +113,7 @@ var phrasing_setup = function(){
151
113
  $('#edit-mode-onoffswitch').prop('checked', false)
152
114
  }
153
115
 
154
- // Information icon for the edit mode bubble
155
- $('#phrasing-info-icon-container, #phrasing-info-container').on('click',function(){
156
- if($('#phrasing-info-container').is(':visible')){
157
- $('#phrasing-edit-mode-bubble').animate({height: 180}, 200, function(){
158
- $('#phrasing-info-container').hide()
159
- })
160
- }else{
161
- $('#phrasing-info-container').show();
162
- $('#phrasing-edit-mode-bubble').animate({height: 255}, 200)
163
- }
164
- });
165
116
  };
166
117
 
167
118
  $(document).ready(phrasing_setup)
168
- // $(document).on('page:load', phrasing_setup)
119
+ // $(document).on('page:load', phrasing_setup)
data/app/assets/stylesheets/phrasing_edit_mode_bubble.css.scss CHANGED
@@ -5,127 +5,127 @@
5
5
  }
6
6
  webkit-box-sizing:content-box;
7
7
  box-sizing:content-box;
8
- background: rgba(00,00,00, .7);
9
- color:white;
10
- border: 2px solid black;
8
+ background: rgba(255,255,255, 1);
9
+ color:grey;
10
+ border: 2px solid #EFEFEF;
11
11
  position: fixed;
12
- width:105px;
13
- height:180px;
12
+ width:130px;
13
+ height:135px;
14
14
  bottom:10px;
15
15
  right:10px;
16
16
  z-index: 9999;
17
17
  font-family: Arial, Helvetica, sans-serif;
18
18
  font-size:14px;
19
+ -webkit-border-radius: 10px;
20
+ -moz-border-radius: 10px;
21
+ border-radius: 10px;
19
22
 
20
- -webkit-border-radius: 20px;
21
- -moz-border-radius: 20px;
22
- border-radius: 20px;
23
-
24
- p#edit-mode-headline{
25
- text-align: center;
26
- padding-top:10px;
27
- color:white;
28
- font-weight: bold;
23
+ p{
24
+ line-height:20px;
29
25
  }
26
+ ::selection{ color: grey; background: white; }
30
27
 
31
- // On/Off Switch
32
- .onoffswitch {
28
+ #phrasing-edit-mode, #phrasing-saved-status, #phrasing-edit-all-phrases{
29
+ height:32px;
30
+ margin-top:10px;
31
+ }
32
+ #phrasing-edit-mode-headline{
33
+ height:30px;
34
+ width:45px;
35
+ float:left;
33
36
  padding-left:15px;
34
- position: relative;
35
- width: 74px;
36
- -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
37
+ padding-top:5px;
37
38
  }
38
- .onoffswitch-checkbox {
39
- display: none;
39
+ #phrasing-onoffswitch{
40
+ float:left;
40
41
  }
41
- .onoffswitch-label {
42
+ // On/Off Switch
43
+ .onoffswitch {
44
+ position: relative; width: 60px;
45
+ -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
46
+ .onoffswitch-checkbox {
47
+ display: none;
48
+ }
49
+ .onoffswitch-label {
42
50
  display: block; overflow: hidden; cursor: pointer;
43
- border: 2px solid #666666; border-radius: 5px;
44
- }
45
- .onoffswitch-inner {
51
+ border: 2px solid #CCCCCC; border-radius: 5px;
52
+ }
53
+ .onoffswitch-inner {
46
54
  width: 200%; margin-left: -100%;
47
55
  -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
48
56
  -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
49
- }
50
- .onoffswitch-inner:before, .onoffswitch-inner:after {
51
- float: left; width: 50%; height: 23px; padding: 0; line-height: 23px;
52
- font-size: 13px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
53
- -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
54
- }
55
- .onoffswitch-inner:before {
56
- content: "ON";
57
- padding-left: 8px;
58
- background-color: #6194FD; color: #FFFFFF;
59
- }
60
- .onoffswitch-inner:after {
61
- content: "OFF";
62
- padding-right: 8px;
63
- background-color: #F8F8F8; color: #666666;
64
- text-align: right;
65
- }
66
- .onoffswitch-switch {
67
- width: 31px; margin: 0px;
57
+ &:before, &:after {
58
+ float: left; width: 50%; height: 25px; padding: 0; line-height: 25px;
59
+ font-size: 40px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
60
+ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; content: "";
61
+ }
62
+ &:before {
63
+ padding-left: 10px;
64
+ background-color: #56AE45;
65
+ }
66
+ &:after {
67
+ padding-right: 10px;
68
+ background-color: #CCCCCC;
69
+ text-align: right;
70
+ }
71
+ }
72
+ .onoffswitch-switch {
73
+ width: 27px; margin: 0px;
68
74
  background: #FFFFFF;
69
- border: 2px solid #666666; border-radius: 5px;
70
- position: absolute; top: 0; bottom: 0; right: 39px;
75
+ border: 3px solid #CCCCCC; border-radius: 5px;
76
+ position: absolute; top: 0; bottom: 0; right: 29px;
71
77
  -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
72
78
  -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
73
79
  background-image: -moz-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
74
80
  background-image: -webkit-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
75
81
  background-image: -o-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
76
82
  background-image: linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
77
- }
78
- .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
79
- margin-left: 0;
80
- }
81
- .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
82
- right: 0px;
83
- }
84
-
85
- // Spinner
86
- #phrasing-spinner{
87
- margin-top: 10px;
88
- // background-color: black;
89
- text-align: center;
90
- font-weight: bold;
91
- height:40px;
92
- p{
93
- color:white;
94
83
  }
95
- }
96
84
 
97
- #view-all-phrases{
98
- margin-top:10px;
99
- // background-color: black;
100
- text-align: center;
101
- font-weight: bold;
102
- a{
103
- color: #0088cc;
104
- &:hover{
105
- text-decoration: none;
85
+ .onoffswitch-checkbox:checked {
86
+ +.onoffswitch-label {
87
+ border: 2px solid #56AE45;
88
+ .onoffswitch-inner {
89
+ margin-left: 0;
90
+ }
91
+ .onoffswitch-switch {
92
+ right: 0px;
93
+ border: 3px solid #56AE45;
94
+ }
106
95
  }
107
96
  }
108
97
  }
109
-
110
- #phrasing-info-icon-container{
111
- text-align:center;
112
- cursor:pointer;
113
- .phrasing-info-icon{
114
- margin-top:-12px;
115
- }
98
+ #phrasing-saved-status-headline{
99
+ height:30px;
100
+ width:45px;
101
+ float:left;
102
+ padding-left:15px;
103
+ padding-top:5px;
104
+ }
105
+ #phrasing-saved-status-indicator{
106
+ float:left;
107
+ }
108
+ #phrasing-saved-status-indicator-circle{
109
+ background-color:green;
110
+ width:20px;
111
+ height:20px;
112
+ -webkit-border-radius: 10px;
113
+ -moz-border-radius: 10px;
114
+ margin-left:10px;
115
+ margin-top:5px;
116
+ }
117
+ #phrasing-edit-all-phrases-headline{
118
+ height:30px;
119
+ width:45px;
120
+ float:left;
121
+ padding-left:15px;
122
+ padding-top:5px;
116
123
  }
117
-
118
- #phrasing-info-container{
119
- display:none;
120
- text-align:center;
121
- cursor:pointer;
122
- p{
123
- font-size:12px;
124
- line-height:14px;
125
- }
126
- color: #8c8c8c;
127
- &.phrasing-info-visible{
128
- display:block;
124
+ #phrasing-edit-all-phrases-icon-container{
125
+ float:left;
126
+ .phrasing-edit-all-phrases-icon{
127
+ margin-left:10px;
128
+ margin-top:7px;
129
129
  }
130
130
  }
131
131
 
data/app/views/phrasing/_initializer.html.haml CHANGED
@@ -9,17 +9,25 @@
9
9
  %button.italic i
10
10
 
11
11
  #phrasing-edit-mode-bubble
12
- %p#edit-mode-headline Edit mode:
13
- .onoffswitch
14
- %input#edit-mode-onoffswitch.onoffswitch-checkbox{checked: "checked", name: "onoffswitch", type: "checkbox"}/
15
- %label.onoffswitch-label{for: "edit-mode-onoffswitch"}
16
- .onoffswitch-inner
17
- .onoffswitch-switch
18
- #phrasing-spinner
19
- %p No changes made.
20
- #view-all-phrases
21
- %p= link_to "All phrases", phrasing_phrases_path, data: { no_turbolink: true }
22
- #phrasing-info-icon-container
23
- = image_tag "phrasing_information_icon.png", class: "phrasing-info-icon"
24
- #phrasing-info-container
25
- %p Your content will be saved automatically 3 seconds after you stop typing.
12
+
13
+ #phrasing-edit-mode
14
+ #phrasing-edit-mode-headline
15
+ %p Edit
16
+ #phrasing-onoffswitch
17
+ .onoffswitch
18
+ %input#edit-mode-onoffswitch.onoffswitch-checkbox{checked: "checked", name: "onoffswitch", type: "checkbox"}/
19
+ %label.onoffswitch-label{for: "edit-mode-onoffswitch"}
20
+ .onoffswitch-inner
21
+ .onoffswitch-switch
22
+
23
+ #phrasing-saved-status
24
+ #phrasing-saved-status-headline
25
+ %p Saved
26
+ #phrasing-saved-status-indicator
27
+ #phrasing-saved-status-indicator-circle
28
+
29
+ #phrasing-edit-all-phrases
30
+ #phrasing-edit-all-phrases-headline
31
+ %p Edit all
32
+ #phrasing-edit-all-phrases-icon-container
33
+ = 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 CHANGED
@@ -11,7 +11,7 @@ module Phrasing
11
11
  initializer :assets, :group => :all do
12
12
  ::Rails.application.config.assets.paths << ::Rails.root.join('app', 'assets', 'fonts')
13
13
  ::Rails.application.config.assets.paths << ::Rails.root.join('app', 'assets', 'images')
14
- ::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']
14
+ ::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']
15
15
  end
16
16
  end
17
17
  end
data/lib/phrasing/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module Phrasing
2
- VERSION = "3.1.0"
2
+ VERSION = "3.2.0"
3
3
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: phrasing
3
3
  version: !ruby/object:Gem::Version
4
- version: 3.1.0
4
+ version: 3.2.0
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -10,7 +10,7 @@ authors:
10
10
  autorequire:
11
11
  bindir: bin
12
12
  cert_chain: []
13
- date: 2014-01-02 00:00:00.000000000 Z
13
+ date: 2014-01-16 00:00:00.000000000 Z
14
14
  dependencies:
15
15
  - !ruby/object:Gem::Dependency
16
16
  name: rails
@@ -125,7 +125,7 @@ files:
125
125
  - app/assets/fonts/icomoon.svg
126
126
  - app/assets/fonts/icomoon.ttf
127
127
  - app/assets/fonts/icomoon.woff
128
- - app/assets/images/phrasing_information_icon.png
128
+ - app/assets/images/phrasing_icon_edit_all.png
129
129
  - app/assets/javascripts/editor.js
130
130
  - app/assets/javascripts/head.js
131
131
  - app/assets/javascripts/phrasing.js.erb