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
2024-11-22 08:57:10 -06:00 · 2019-03-22 11:52:06 -04:00 · 2019-03-22 11:52:06 -04:00 · 51e08feb7e
commit 51e08feb7e
parent da187f0967
6 changed files with 53 additions and 18 deletions
--- a/app/assets/stylesheets/common/base/lightbox.scss
+++ b/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;
--- a/app/assets/stylesheets/mobile/lightbox.scss
+++ b/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;
--- a/db/migrate/20190322152347_force_rebake_on_posts_with_lightboxes.rb
+++ b/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
--- a/lib/cooked_post_processor.rb
+++ b/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)
--- a/spec/components/cooked_post_processor_spec.rb
+++ b/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

--- a/spec/services/search_indexer_spec.rb
+++ b/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>