DEV: Refactor icons used in lightbox HTML

Uses <svg> elements instead of hacky CSS pseudoelements

Adds a migration to mark posts with lightboxes as needing a rebake

app/assets/stylesheets/common/base/lightbox.scss

@@ -1,3 +1,5 @@
+$meta-element-margin: 6px;
+
 .lightbox-wrapper .lightbox {
   position: relative;
   display: inline-block;
@@ -40,36 +42,50 @@
   background: $primary;
   opacity: 0;
   transition: opacity 0.2s;
-
-  span {
-    float: left;
-  }
+  display: flex;
+  align-items: center;
 
   .filename {
-    margin: 6px 6px 2px 6px;
-    max-width: 100%;
+    margin: $meta-element-margin;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+    // TODO: delete this by May 2019
     &:before {
       // ideally, the SVG used here should be in HTML and reference the SVG sprite
       content: svg-uri(
         '<svg xmlns="http://www.w3.org/2000/svg" width="14px" height="16px" viewBox="0 0 512 512" fill="#{$secondary}"><path d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm-6 336H54a6 6 0 0 1-6-6V118a6 6 0 0 1 6-6h404a6 6 0 0 1 6 6v276a6 6 0 0 1-6 6zM128 152c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zM96 352h320v-80l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L192 304l-39.515-39.515c-4.686-4.686-12.284-4.686-16.971 0L96 304v48z"/></svg>'
       );
-      margin-right: 5px;
+      margin-right: $meta-element-margin;
       display: inline-block;
       vertical-align: middle;
       opacity: 0.8;
     }
   }
 
+  .d-icon {
+    margin: $meta-element-margin;
+    opacity: 0.8;
+    color: $secondary;
+    + .filename {
+      margin-left: 0px;
+    }
+    // TODO: delete this by May 2019
+    + .filename:before {
+      display: none;
+    }
+  }
+
   .informations {
-    margin: 6px;
+    margin: $meta-element-margin;
     padding-right: 20px;
     color: $secondary-high;
     font-size: $font-0;
+    flex-shrink: 0;
+    flex-grow: 3;
   }
 
+  // TODO: delete this by May 2019
   .expand {
     position: absolute;
     bottom: 2px;

app/assets/stylesheets/mobile/lightbox.scss

@@ -5,9 +5,7 @@
 }
 
 .meta {
-  display: flex;
   align-items: center;
-  justify-content: center;
   background: $secondary;
   color: $primary-high;
   height: 25px;
@@ -16,10 +14,16 @@
   right: 0;
 
   .filename,
-  .informations {
+  .informations,
+  .d-icon-far-image {
     display: none;
   }
 
+  .d-icon-discourse-expand {
+    color: $primary-high;
+  }
+
+  // TODO: Delete by May 2019
   .expand {
     position: initial;
     float: none;

db/migrate/20190322152347_force_rebake_on_posts_with_lightboxes.rb

@@ -0,0 +1,13 @@
+class ForceRebakeOnPostsWithLightboxes < ActiveRecord::Migration[5.2]
+  def up
+    # Picking up changes to lightbox HTML in cooked_post_processor
+    execute <<~SQL
+      UPDATE posts SET baked_version = 0
+      WHERE cooked LIKE '%lightbox-wrapper%'
+    SQL
+  end
+
+  def down
+    # no op, does not really matter
+  end
+end

lib/cooked_post_processor.rb

@@ -424,9 +424,10 @@ class CookedPostProcessor
 
     a["title"] = CGI.escapeHTML(img["title"] || filename)
 
+    meta.add_child create_icon_node("far-image")
     meta.add_child create_span_node("filename", a["title"])
     meta.add_child create_span_node("informations", informations)
-    meta.add_child create_span_node("expand")
+    meta.add_child create_icon_node("discourse-expand")
   end
 
   def get_filename(upload, src)

spec/components/cooked_post_processor_spec.rb

@@ -434,7 +434,7 @@ describe CookedPostProcessor do
 
         expect(cpp.html).to match_html <<~HTML
           <p><div class="lightbox-wrapper"><a class="lightbox" href="//test.localhost/uploads/default/original/1X/1234567890123456.jpg" data-download-href="//test.localhost/uploads/default/#{upload.sha1}" title="logo.png"><img src="//test.localhost/uploads/default/optimized/1X/#{upload.sha1}_#{OptimizedImage::VERSION}_690x788.png" width="690" height="788"><div class="meta">
-          <span class="filename">logo.png</span><span class="informations">1750×2000 1.21 KB</span><span class="expand"></span>
+          <svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use xlink:href="#far-image"></use></svg><span class="filename">logo.png</span><span class="informations">1750×2000 1.21 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use xlink:href="#discourse-expand"></use></svg>
           </div></a></div></p>
         HTML
 
@@ -539,7 +539,7 @@ describe CookedPostProcessor do
 
         expect(cpp.html).to match_html <<~HTML
           <p><div class="lightbox-wrapper"><a class="lightbox" href="//test.localhost/uploads/default/original/1X/1234567890123456.jpg" data-download-href="//test.localhost/uploads/default/#{upload.sha1}" title="logo.png"><img src="//test.localhost/uploads/default/optimized/1X/#{upload.sha1}_#{OptimizedImage::VERSION}_230x500.png" width="230" height="500"><div class="meta">
-          <span class="filename">logo.png</span><span class="informations">1125×2436 1.21 KB</span><span class="expand"></span>
+          <svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use xlink:href="#far-image"></use></svg><span class="filename">logo.png</span><span class="informations">1125×2436 1.21 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use xlink:href="#discourse-expand"></use></svg>
           </div></a></div></p>
         HTML
 
@@ -575,7 +575,7 @@ describe CookedPostProcessor do
 
         expect(cpp.html). to match_html <<~HTML
           <p><div class="lightbox-wrapper"><a class="lightbox" href="//test.localhost/subfolder/uploads/default/original/1X/1234567890123456.jpg" data-download-href="//test.localhost/subfolder/uploads/default/#{upload.sha1}" title="logo.png"><img src="//test.localhost/subfolder/uploads/default/optimized/1X/#{upload.sha1}_#{OptimizedImage::VERSION}_690x788.png" width="690" height="788"><div class="meta">
-          <span class="filename">logo.png</span><span class="informations">1750×2000 1.21 KB</span><span class="expand"></span>
+          <svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use xlink:href="#far-image"></use></svg><span class="filename">logo.png</span><span class="informations">1750×2000 1.21 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use xlink:href="#discourse-expand"></use></svg>
           </div></a></div></p>
         HTML
 
@@ -589,7 +589,7 @@ describe CookedPostProcessor do
 
         expect(cpp.html).to match_html <<~HTML
           <p><div class="lightbox-wrapper"><a class="lightbox" href="//test.localhost/subfolder/uploads/default/original/1X/1234567890123456.jpg" data-download-href="//test.localhost/subfolder/uploads/default/#{upload.sha1}" title="&amp;gt;&amp;lt;img src=x onerror=alert(&amp;#39;haha&amp;#39;)&amp;gt;.png"><img src="//test.localhost/subfolder/uploads/default/optimized/1X/#{upload.sha1}_#{OptimizedImage::VERSION}_690x788.png" width="690" height="788"><div class="meta">
-          <span class="filename">&amp;gt;&amp;lt;img src=x onerror=alert(&amp;#39;haha&amp;#39;)&amp;gt;.png</span><span class="informations">1750×2000 1.21 KB</span><span class="expand"></span>
+          <svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use xlink:href="#far-image"></use></svg><span class="filename">&amp;gt;&amp;lt;img src=x onerror=alert(&amp;#39;haha&amp;#39;)&amp;gt;.png</span><span class="informations">1750×2000 1.21 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use xlink:href="#discourse-expand"></use></svg>
           </div></a></div></p>
         HTML
       end
@@ -619,7 +619,7 @@ describe CookedPostProcessor do
 
         expect(cpp.html).to match_html <<~HTML
           <p><div class="lightbox-wrapper"><a class="lightbox" href="//test.localhost/uploads/default/original/1X/1234567890123456.jpg" data-download-href="//test.localhost/uploads/default/#{upload.sha1}" title="WAT"><img src="//test.localhost/uploads/default/optimized/1X/#{upload.sha1}_#{OptimizedImage::VERSION}_690x788.png" title="WAT" width="690" height="788"><div class="meta">
-          <span class="filename">WAT</span><span class="informations">1750×2000 1.21 KB</span><span class="expand"></span>
+          <svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use xlink:href="#far-image"></use></svg><span class="filename">WAT</span><span class="informations">1750×2000 1.21 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use xlink:href="#discourse-expand"></use></svg>
           </div></a></div></p>
         HTML
 

spec/services/search_indexer_spec.rb

@@ -50,9 +50,10 @@ describe SearchIndexer do
         <a class="lightbox" href="#{Discourse.base_url_no_prefix}/uploads/episodeinteractive/original/3X/1/6/16790095df3baf318fb2eb1d7e5d7860dc45d48b.jpg" data-download-href="#{Discourse.base_url_no_prefix}/uploads/episodeinteractive/16790095df3baf318fb2eb1d7e5d7860dc45d48b" title="Untitled design (21).jpg" rel="nofollow noopener">
           <img src="#{Discourse.base_url_no_prefix}/uploads/episodeinteractive/optimized/3X/1/6/16790095df3baf318fb2eb1d7e5d7860dc45d48b_1_563x500.jpg" alt="Untitled%20design%20(21)" width="563" height="500">
           <div class="meta">
+            <svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use xlink:href="#far-image"></use></svg>
             <span class="filename">Untitled design (21).jpg</span>
             <span class="informations">1280x1136 472 KB</span>
-            <span class="expand"></span>
+            <svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use xlink:href="#discourse-expand"></use></svg>
           </div>
         </a>
       </div>