happo 2.2.1 → 2.3.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: cc566abbe483b89e474a285181c8b9fecb5c56c8
4
- data.tar.gz: 4562a7960785de93eed8d66012ff583b8385b665
3
+ metadata.gz: 88d89187e77ba6225483b0018803b72cb3226fc3
4
+ data.tar.gz: 0dad6cf7d66a3df8b2403c78ff881a065b15dacd
5
5
  SHA512:
6
- metadata.gz: 6b91a8e431508812db6b92b0f333e98088832a5fe7f2cc6a9f0c33b87cedb865dec0b1eeb2a7fac371e84ac3a700abdbb0bd642778a41a8ae150f397172373ef
7
- data.tar.gz: 31cf66c036ddb6cd4986588e200f5f8ab8042d1de74106d923817c83d6ea6ed4c3b29bb96ec4dbf58ab6255ea0b481f1bb7d89f0a2349f2e00ec4cc8fe552160
6
+ metadata.gz: e377214d9a7d2a1f01cd2b91f5d3b6f89f55c9755f13105b8ac9bf233ec27c690642faf3343e23bdc20b31c7e2e478a0a01660ce140c60dd8d8413c9cc9efd9b
7
+ data.tar.gz: 5b6ae122c2553cb4e30eee81af44410f76770d4fe7d4d460734e48b33cf95a503661e9ada714c04bcbc455b7284cd462a26605ab5bf45d4d72adc0827d18c48e
Binary file
@@ -1,4 +1,67 @@
1
1
  body {
2
- background-color: #f0f0f0;
3
- font-family: helvetica, arial;
2
+ background-color: #ebebeb;
3
+ background-image: linear-gradient(
4
+ 45deg,
5
+ #f4f4f4 25%,
6
+ transparent 25%,
7
+ transparent 75%,
8
+ #f4f4f4 75%,
9
+ #f4f4f4
10
+ ), linear-gradient(
11
+ 45deg,
12
+ #f4f4f4 25%,
13
+ transparent 25%,
14
+ transparent 75%,
15
+ #f4f4f4 75%,
16
+ #f4f4f4
17
+ );
18
+ background-position: 0 0, 10px 10px;
19
+ background-size: 20px 20px;
20
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
21
+ margin: 0;
22
+ }
23
+
24
+ .anchored {
25
+ color: #000000;
26
+ text-decoration: none;
27
+ }
28
+
29
+ .anchored:hover {
30
+ text-decoration: underline;
31
+ }
32
+
33
+ .anchored::after {
34
+ background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMy45IDEyYzAtMS43MSAxLjM5LTMuMSAzLjEtMy4xaDRWN0g3Yy0yLjc2IDAtNSAyLjI0LTUgNXMyLjI0IDUgNSA1aDR2LTEuOUg3Yy0xLjcxIDAtMy4xLTEuMzktMy4xLTMuMXpNOCAxM2g4di0ySDh2MnptOS02aC00djEuOWg0YzEuNzEgMCAzLjEgMS4zOSAzLjEgMy4xcy0xLjM5IDMuMS0zLjEgMy4xaC00VjE3aDRjMi43NiAwIDUtMi4yNCA1LTVzLTIuMjQtNS01LTV6Ii8+PC9zdmc+);
35
+ content: '';
36
+ display: inline-block;
37
+ height: 24px;
38
+ opacity: .2;
39
+ vertical-align: middle;
40
+ width: 24px;
41
+ }
42
+
43
+ .anchored:hover::after {
44
+ opacity: 1;
45
+ }
46
+
47
+ .header {
48
+ align-items: baseline;
49
+ background-color: #ffffff;
50
+ box-shadow: 0 0 4px rgba(0, 0, 0, .3);
51
+ display: flex;
52
+ flex-wrap: wrap;
53
+ justify-content: space-between;
54
+ padding: 20px 10px 15px;
55
+ }
56
+
57
+ .header > :first-child {
58
+ margin-right: 10px;
59
+ }
60
+
61
+ .header__title {
62
+ margin: 0;
63
+ }
64
+
65
+ .main {
66
+ padding: 10px;
4
67
  }
data/lib/happo/server.rb CHANGED
@@ -25,8 +25,79 @@ module Happo
25
25
  end
26
26
 
27
27
  get '/review' do
28
- @snapshots = Happo::Utils.current_snapshots
29
- erb :review
28
+ result_summary = Happo::Utils.last_result_summary
29
+
30
+ diff_images = result_summary[:diff_examples].map do |example|
31
+ file_path = Happo::Utils.path_to(
32
+ example[:description],
33
+ example[:viewport],
34
+ 'diff.png'
35
+ )
36
+ example[:url] = "/resource?file=#{ERB::Util.url_encode(file_path)}"
37
+ example
38
+ end
39
+
40
+ new_images = result_summary[:new_examples].map do |example|
41
+ file_path = Happo::Utils.path_to(
42
+ example[:description],
43
+ example[:viewport],
44
+ 'current.png'
45
+ )
46
+ example[:url] = "/resource?file=#{ERB::Util.url_encode(file_path)}"
47
+ example
48
+ end
49
+ erb :diffs, locals: {
50
+ diff_images: diff_images,
51
+ new_images: new_images
52
+ }
53
+ end
54
+
55
+ get '/review-demo' do
56
+ diff_images = [
57
+ {
58
+ description: '<First> with "test"',
59
+ viewport: 'small',
60
+ url: 'http://placehold.it/350x150',
61
+ },
62
+ {
63
+ description: '<First> some other \'test\'',
64
+ viewport: 'medium',
65
+ url: 'http://placehold.it/550x150',
66
+ },
67
+ {
68
+ description: '<First>',
69
+ viewport: 'large',
70
+ url: 'http://placehold.it/850x150',
71
+ },
72
+ ]
73
+
74
+ new_images = [
75
+ {
76
+ description: '<New>',
77
+ viewport: 'small',
78
+ url: 'http://placehold.it/350x150',
79
+ },
80
+ {
81
+ description: '<New>',
82
+ viewport: 'medium',
83
+ url: 'http://placehold.it/550x150',
84
+ },
85
+ {
86
+ description: '<New>',
87
+ viewport: 'large',
88
+ url: 'http://placehold.it/850x150',
89
+ },
90
+ {
91
+ description: '<SomethingElseNew>',
92
+ viewport: 'small',
93
+ url: 'http://placehold.it/350x150',
94
+ },
95
+ ]
96
+
97
+ erb :diffs, locals: {
98
+ diff_images: diff_images,
99
+ new_images: new_images
100
+ }
30
101
  end
31
102
 
32
103
  get '/resource' do
@@ -12,8 +12,7 @@ module Happo
12
12
  end
13
13
 
14
14
  def upload_diffs
15
- result_summary = YAML.load(File.read(File.join(
16
- Happo::Utils.config['snapshots_folder'], 'result_summary.yaml')))
15
+ result_summary = Happo::Utils.last_result_summary
17
16
 
18
17
  return [] if result_summary[:diff_examples].empty? &&
19
18
  result_summary[:new_examples].empty?
@@ -51,7 +50,7 @@ module Happo
51
50
 
52
51
  html = bucket.objects.build("#{dir}/index.html")
53
52
  path = File.expand_path(
54
- File.join(File.dirname(__FILE__), 'diffs.html.erb'))
53
+ File.join(File.dirname(__FILE__), 'views', 'diffs.erb'))
55
54
  html.content = ERB.new(File.read(path)).result(binding)
56
55
  html.content_type = 'text/html'
57
56
  html.save
data/lib/happo/utils.rb CHANGED
@@ -32,7 +32,11 @@ module Happo
32
32
 
33
33
  def self.config_from_file
34
34
  config_file_name = ENV['HAPPO_CONFIG_FILE'] || '.happo.yaml'
35
- YAML.load(ERB.new(File.read(config_file_name)).result)
35
+ if File.exist?(config_file_name)
36
+ YAML.load(ERB.new(File.read(config_file_name)).result)
37
+ else
38
+ {}
39
+ end
36
40
  end
37
41
 
38
42
  def self.normalize_description(description)
@@ -57,25 +61,51 @@ module Happo
57
61
  query: query).to_s
58
62
  end
59
63
 
60
- def self.current_snapshots
61
- prepare_file = lambda do |file|
62
- viewport_dir = File.expand_path('..', file)
63
- description_dir = File.expand_path('..', viewport_dir)
64
- {
65
- description: Base64.decode64(File.basename(description_dir)),
66
- viewport: File.basename(viewport_dir).sub('@', ''),
67
- file: file
68
- }
64
+ def self.pluralize(count, singular, plural)
65
+ if count == 1
66
+ "#{count} #{singular}"
67
+ else
68
+ "#{count} #{plural}"
69
+ end
70
+ end
71
+
72
+ def self.page_title(diff_images, new_images)
73
+ title = []
74
+
75
+ unless diff_images.count == 0
76
+ title << pluralize(diff_images.count, 'diff', 'diffs')
69
77
  end
70
78
 
71
- snapshots_folder = Happo::Utils.config['snapshots_folder']
72
- diff_files = Dir.glob("#{snapshots_folder}/**/diff.png")
73
- previous_images = Dir.glob("#{snapshots_folder}/**/previous.png")
79
+ title << "#{new_images.count} new" unless new_images.count == 0
80
+
81
+ "#{title.join(', ')} · Happo"
82
+ end
83
+
84
+ def self.favicon_as_base64
85
+ favicon = File.expand_path('../public/favicon.ico', __FILE__)
86
+ "data:image/ico;base64,#{Base64.encode64(File.binread(favicon))}"
87
+ end
88
+
89
+ def self.css_styles
90
+ File.read(File.expand_path('../public/happo-styles.css', __FILE__))
91
+ end
92
+
93
+ def self.last_result_summary
94
+ YAML.load(File.read(File.join(
95
+ self.config['snapshots_folder'], 'result_summary.yaml')))
96
+ end
97
+
98
+ def self.to_inline_slug(string)
99
+ value = string.gsub(/[^\x00-\x7F]/n, '').to_s
100
+ value.gsub!(/[']+/, '')
101
+ value.gsub!(/\W+/, ' ')
102
+ value.strip!
103
+ value.tr!(' ', '-')
104
+ URI.escape(value)
105
+ end
74
106
 
75
- {
76
- diffs: diff_files.map(&prepare_file),
77
- previous_images: previous_images.map(&prepare_file)
78
- }
107
+ def self.image_slug(diff_image)
108
+ to_inline_slug("#{diff_image[:description]} #{diff_image[:viewport]}")
79
109
  end
80
110
  end
81
111
  end
data/lib/happo/version.rb CHANGED
@@ -1,4 +1,4 @@
1
1
  # Defines the gem version.
2
2
  module Happo
3
- VERSION = '2.2.1'
3
+ VERSION = '2.3.0'
4
4
  end
@@ -2,28 +2,40 @@
2
2
  <html>
3
3
  <head>
4
4
  <title>Happo Debug Tool</title>
5
- <link rel="stylesheet" href="/happo-styles.css"></link>
5
+
6
+ <link rel="shortcut icon" href="<%= Happo::Utils.favicon_as_base64 %>" />
7
+
8
+ <style>
9
+ <%= Happo::Utils.css_styles %>
10
+ </style>
11
+
6
12
  <script src="/happo-runner.js"></script>
7
13
  <% @config['source_files'].each do |source_file| %>
8
14
  <script src="/resource?file=<%= ERB::Util.url_encode(source_file) %>"></script>
9
15
  <% end %>
10
16
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
11
17
  </head>
18
+
12
19
  <body>
13
- <h1>Happo Debug Tool</h1>
14
- <p>Click on an item to render that example in isolation.</p>
15
- <script>
16
- (function() {
17
- var ul = $('<ul>');
18
- $('body').append(ul);
19
- $.each(happo.defined, function(_, example) {
20
- ul.append($('<li>').append(
21
- $('<a>', {
22
- href: '/?description=' + encodeURIComponent(example.description)
23
- }).text(example.description)
24
- ));
25
- });
26
- }());
27
- </script>
20
+ <header class="header">
21
+ <h1 class="header__title">Happo Debug Tool</h1>
22
+ </header>
23
+
24
+ <main class="main">
25
+ <p>Click on an item to render that example in isolation.</p>
26
+ <script>
27
+ (function() {
28
+ var ul = $('<ul>');
29
+ $('main').append(ul);
30
+ $.each(happo.defined, function(_, example) {
31
+ ul.append($('<li>').append(
32
+ $('<a>', {
33
+ href: '/?debug=true&description=' + encodeURIComponent(example.description)
34
+ }).text(example.description)
35
+ ));
36
+ });
37
+ }());
38
+ </script>
39
+ </main>
28
40
  </body>
29
41
  </html>
@@ -0,0 +1,61 @@
1
+ <% require 'rack' %>
2
+ <% require 'happo' %>
3
+ <!DOCTYPE html>
4
+ <html>
5
+ <head>
6
+ <title><%= Happo::Utils.page_title(diff_images, new_images) %></title>
7
+
8
+ <link rel="shortcut icon" href="<%= Happo::Utils.favicon_as_base64 %>" />
9
+
10
+ <style>
11
+ <%= Happo::Utils.css_styles %>
12
+ </style>
13
+ </head>
14
+
15
+ <body>
16
+ <header class="header">
17
+ <h1 class="header_title">
18
+ <%= Happo::Utils.page_title(diff_images, new_images) %>
19
+ </h1>
20
+ <div class="header__time">Generated: <%= Time.now %></div>
21
+ </header>
22
+
23
+ <main class="main">
24
+ <% if diff_images.count > 0%>
25
+ <h2 id="diffs">
26
+ <a class="anchored" href="#diffs">
27
+ Diffs (<%= diff_images.count %>)
28
+ </a>
29
+ </h2>
30
+
31
+ <% diff_images.each do |image| %>
32
+ <h3 id="<%= Happo::Utils.image_slug(image) %>">
33
+ <a class="anchored" href="#<%= Happo::Utils.image_slug(image) %>">
34
+ <%= Rack::Utils.escape_html(image[:description]) %> @ <%= image[:viewport] %>
35
+ </a>
36
+ </h3>
37
+
38
+ <img src="<%= image[:url] %>">
39
+ <% end %>
40
+ <% end %>
41
+
42
+ <% if new_images.count > 0%>
43
+ <h2 id="new">
44
+ <a class="anchored" href="#new">
45
+ New examples (<%= new_images.count %>)
46
+ </a>
47
+ </h2>
48
+
49
+ <% new_images.each do |image| %>
50
+ <h3 id="<%= Happo::Utils.image_slug(image) %>">
51
+ <a class="anchored" href="#<%= Happo::Utils.image_slug(image) %>">
52
+ <%= Rack::Utils.escape_html(image[:description]) %> @ <%= image[:viewport] %>
53
+ </a>
54
+ </h3>
55
+
56
+ <img src="<%= image[:url] %>">
57
+ <% end %>
58
+ <% end %>
59
+ </main>
60
+ </body>
61
+ </html>
@@ -2,6 +2,9 @@
2
2
  <html>
3
3
  <head>
4
4
  <title>Happo</title>
5
+
6
+ <link rel="shortcut icon" href="<%= Happo::Utils.favicon_as_base64 %>" />
7
+
5
8
  <style type="text/css">
6
9
  * {
7
10
  -webkit-transition: none !important;
@@ -11,17 +14,32 @@
11
14
  -moz-animation-duration: 0s !important;
12
15
  animation-duration: 0s !important;
13
16
  }
17
+
18
+ body {
19
+ background-color: #fff;
20
+ margin: 0;
21
+ <% unless params[:debug] %>
22
+ /*
23
+ We disable pointer events to prevent spurious diffs happening as a
24
+ result of an accidental mouse hover (or click) in the browser
25
+ window where happo is running.
26
+ */
27
+ pointer-events: none;
28
+ <% end %>
29
+ }
14
30
  </style>
15
31
 
16
32
  <% @config['stylesheets'].each do |stylesheet| %>
17
33
  <link rel="stylesheet" type="text/css"
18
34
  href="/resource?file=<%= ERB::Util.url_encode(stylesheet) %>">
19
35
  <% end %>
36
+
20
37
  <script src="/happo-runner.js"></script>
21
38
  <% @config['source_files'].each do |source_file| %>
22
39
  <script src="/resource?file=<%= ERB::Util.url_encode(source_file) %>"></script>
23
40
  <% end %>
24
41
  </head>
25
- <body style="background-color: #fff; margin: 0; pointer-events: none;">
42
+
43
+ <body>
26
44
  </body>
27
45
  </html>
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: happo
3
3
  version: !ruby/object:Gem::Version
4
- version: 2.2.1
4
+ version: 2.3.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Henric Trotzig
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2016-08-18 00:00:00.000000000 Z
12
+ date: 2016-08-29 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: chunky_png
@@ -144,8 +144,8 @@ extra_rdoc_files: []
144
144
  files:
145
145
  - bin/happo
146
146
  - lib/happo.rb
147
- - lib/happo/diffs.html.erb
148
147
  - lib/happo/logger.rb
148
+ - lib/happo/public/favicon.ico
149
149
  - lib/happo/public/happo-runner.js
150
150
  - lib/happo/public/happo-styles.css
151
151
  - lib/happo/runner.rb
@@ -160,8 +160,8 @@ files:
160
160
  - lib/happo/utils.rb
161
161
  - lib/happo/version.rb
162
162
  - lib/happo/views/debug.erb
163
+ - lib/happo/views/diffs.erb
163
164
  - lib/happo/views/index.erb
164
- - lib/happo/views/review.erb
165
165
  homepage: http://rubygems.org/gems/happo
166
166
  licenses:
167
167
  - MIT
@@ -182,7 +182,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
182
182
  version: '0'
183
183
  requirements: []
184
184
  rubyforge_project:
185
- rubygems_version: 2.4.5.1
185
+ rubygems_version: 2.5.1
186
186
  signing_key:
187
187
  specification_version: 4
188
188
  summary: Happo
@@ -1,29 +0,0 @@
1
- <% require 'rack' %>
2
- <!DOCTYPE html>
3
- <html>
4
- <head>
5
- <title>Happo diffs</title>
6
- </head>
7
- <body>
8
- <h1>Happo diffs</h1>
9
- <p>File generated: <%= Time.now %></p>
10
-
11
- <h2>Diffs</h2>
12
- <% diff_images.each do |diff| %>
13
- <h3>
14
- <%= Rack::Utils.escape_html(diff[:description]) %> @ <%= diff[:viewport] %>
15
- </h3>
16
- <p><img src="<%= diff[:url] %>"></p>
17
- <% end %>
18
-
19
- <hr>
20
-
21
- <h2>New examples</h2>
22
- <% new_images.each do |image| %>
23
- <h3>
24
- <%= Rack::Utils.escape_html(image[:description]) %> @ <%= image[:viewport] %>
25
- </h3>
26
- <p><img src="<%= image[:url] %>"></p>
27
- <% end %>
28
- </body>
29
- </html>
@@ -1,27 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>Happo Review Tool</title>
5
- <link rel="stylesheet" href="/happo-styles.css"></link>
6
- </head>
7
- <body>
8
- <h1>Happo Review Tool</h1>
9
- <h2>DIFFS</h2>
10
- <% @snapshots[:diffs].each do |diff| %>
11
- <h3>
12
- <%= h diff[:description] %> @ <%= diff[:viewport] %>
13
- </h3>
14
- <p><img src="/resource?file=<%= ERB::Util.url_encode(diff[:file]) %>"></p>
15
- <% end %>
16
-
17
- <hr>
18
-
19
- <h2>PREVIOUS</h2>
20
- <% @snapshots[:previous_images].each do |previous_image| %>
21
- <h3>
22
- <%= h previous_image[:description] %> @ <%= previous_image[:viewport] %>
23
- </h3>
24
- <p><img src="/resource?file=<%= ERB::Util.url_encode(previous_image[:file]) %>"></p>
25
- <% end %>
26
- </body>
27
- </html>