From 0c6c5c55a161f42e854fd840554c723effe65628 Mon Sep 17 00:00:00 2001
From: ludwiczakpawel <ludwiczakpawel@gmail.com>
Date: Wed, 13 Jan 2021 15:17:10 +0100
Subject: [PATCH] Code snippet fullscreen icon - setting constraints for size.
 (#12010)

* tooltips 1.0.1

* tooltips 1.0.1

* initial fix

* .

* .

* test

* Add data update script to re-save published articles

* Approve verified diffs

* Fix Rubocop violation

Co-authored-by: rhymes <rhymes@hey.com>
---
 app/assets/images/fullscreen-off.svg                 |  4 ++--
 app/assets/images/fullscreen-on.svg                  |  4 ++--
 app/assets/stylesheets/components/syntax.scss        |  5 +++--
 app/services/html/parser.rb                          | 12 ++++++++----
 ...save_articles_for_code_snippet_fullscreen_icon.rb |  9 +++++++++
 .../user_preview_article_body.approved.html          |  4 ++--
 6 files changed, 26 insertions(+), 12 deletions(-)
 create mode 100644 lib/data_update_scripts/20210104170542_resave_articles_for_code_snippet_fullscreen_icon.rb

diff --git a/app/assets/images/fullscreen-off.svg b/app/assets/images/fullscreen-off.svg
index 3c5d4c991..572dbd127 100644
--- a/app/assets/images/fullscreen-off.svg
+++ b/app/assets/images/fullscreen-off.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-    <path fill="#fff" d="M436 192H312c-13.3 0-24-10.7-24-24V44c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v84h84c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-276-24V44c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v84H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24zm0 300V344c0-13.3-10.7-24-24-24H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-84h84c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12H312c-13.3 0-24 10.7-24 24v124c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12z"/>
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"/>
 </svg>
diff --git a/app/assets/images/fullscreen-on.svg b/app/assets/images/fullscreen-on.svg
index cabf922fa..da7f6ad30 100644
--- a/app/assets/images/fullscreen-on.svg
+++ b/app/assets/images/fullscreen-on.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-    <path fill="#fff" d="M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"/>
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"/>
 </svg>
diff --git a/app/assets/stylesheets/components/syntax.scss b/app/assets/stylesheets/components/syntax.scss
index 9a5f77305..1f6efdedb 100644
--- a/app/assets/stylesheets/components/syntax.scss
+++ b/app/assets/stylesheets/components/syntax.scss
@@ -77,9 +77,10 @@ div.highlight {
 
 .highlight-action {
   display: none;
-  width: var(--su-4);
-  height: var(--su-4);
   cursor: pointer;
+  color: var(--base-inverted);
+  width: var(--su-5);
+  height: var(--su-5);
 }
 
 .highlight-action--fullscreen-on {
diff --git a/app/services/html/parser.rb b/app/services/html/parser.rb
index 02de9ea4e..f17340875 100644
--- a/app/services/html/parser.rb
+++ b/app/services/html/parser.rb
@@ -95,11 +95,15 @@ module Html
 
     def add_fullscreen_button_to_panel
       on_title = "Enter fullscreen mode"
-      on_cls = "highlight-action highlight-action--fullscreen-on"
-      icon_fullscreen_on = inline_svg_tag("fullscreen-on.svg", class: on_cls, title: on_title)
+      on_cls = "highlight-action crayons-icon highlight-action--fullscreen-on"
+      icon_fullscreen_on = inline_svg_tag(
+        "fullscreen-on.svg", class: on_cls, title: on_title, width: "20px", height: "20px"
+      )
       off_title = "Exit fullscreen mode"
-      off_cls = "highlight-action highlight-action--fullscreen-off"
-      icon_fullscreen_off = inline_svg_tag("fullscreen-off.svg", class: off_cls, title: off_title)
+      off_cls = "highlight-action crayons-icon highlight-action--fullscreen-off"
+      icon_fullscreen_off = inline_svg_tag(
+        "fullscreen-off.svg", class: off_cls, title: off_title, width: "20px", height: "20px"
+      )
       doc = Nokogiri::HTML.fragment(@html)
       doc.search("div.highlight__panel").each do |codeblock|
         fullscreen_action = <<~HTML
diff --git a/lib/data_update_scripts/20210104170542_resave_articles_for_code_snippet_fullscreen_icon.rb b/lib/data_update_scripts/20210104170542_resave_articles_for_code_snippet_fullscreen_icon.rb
new file mode 100644
index 000000000..3190e0a7f
--- /dev/null
+++ b/lib/data_update_scripts/20210104170542_resave_articles_for_code_snippet_fullscreen_icon.rb
@@ -0,0 +1,9 @@
+module DataUpdateScripts
+  class ResaveArticlesForCodeSnippetFullscreenIcon
+    def run
+      # We need to regenerate the markdown for code snippets
+      # See https://github.com/forem/forem/issues/11747#issuecomment-753620156
+      Article.published.find_each(&:save)
+    end
+  end
+end
diff --git a/spec/support/fixtures/approvals/user_preview_article_body.approved.html b/spec/support/fixtures/approvals/user_preview_article_body.approved.html
index b7a605ddf..76e8d0cf2 100644
--- a/spec/support/fixtures/approvals/user_preview_article_body.approved.html
+++ b/spec/support/fixtures/approvals/user_preview_article_body.approved.html
@@ -108,7 +108,7 @@ the present is our past.</p>
 </code></pre>
 <div class="highlight__panel js-actions-panel">
 <div class="highlight__panel-action js-fullscreen-code-action">
-    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512" class="highlight-action highlight-action--fullscreen-on"><title>Enter fullscreen mode</title><path fill="#fff" d="M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512" class="highlight-action highlight-action--fullscreen-off"><title>Exit fullscreen mode</title><path fill="#fff" d="M436 192H312c-13.3 0-24-10.7-24-24V44c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v84h84c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-276-24V44c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v84H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24zm0 300V344c0-13.3-10.7-24-24-24H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-84h84c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12H312c-13.3 0-24 10.7-24 24v124c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12z"></path></svg></div>
+    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title><path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title><path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path></svg></div>
 </div>
 </div>
 
@@ -122,7 +122,7 @@ function hello() {
 </code></pre>
 <div class="highlight__panel js-actions-panel">
 <div class="highlight__panel-action js-fullscreen-code-action">
-    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512" class="highlight-action highlight-action--fullscreen-on"><title>Enter fullscreen mode</title><path fill="#fff" d="M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512" class="highlight-action highlight-action--fullscreen-off"><title>Exit fullscreen mode</title><path fill="#fff" d="M436 192H312c-13.3 0-24-10.7-24-24V44c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v84h84c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-276-24V44c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v84H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24zm0 300V344c0-13.3-10.7-24-24-24H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-84h84c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12H312c-13.3 0-24 10.7-24 24v124c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12z"></path></svg></div>
+    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title><path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title><path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path></svg></div>
 </div>
 </div>