From 22a7d1c374db8592a22bfd701d51c35fecdac251 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@ghost.org>
Date: Thu, 6 Jul 2023 13:38:36 +0200
Subject: [PATCH] Added animated icon for "hide title + feature image" toggle
 (#17220)

closes https://github.com/TryGhost/Product/issues/3577

- adds icon as a handlebars file to avoid SVGO breaking the styles needed for the toggle to work
---
 .../app/components/gh-post-settings-menu.hbs  |  2 +-
 .../app/components/icons/eye-open-close.hbs   | 52 +++++++++++++++++++
 2 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 ghost/admin/app/components/icons/eye-open-close.hbs

diff --git a/ghost/admin/app/components/gh-post-settings-menu.hbs b/ghost/admin/app/components/gh-post-settings-menu.hbs
index dfbc47e9db..94d78fc183 100644
--- a/ghost/admin/app/components/gh-post-settings-menu.hbs
+++ b/ghost/admin/app/components/gh-post-settings-menu.hbs
@@ -154,7 +154,7 @@
                                 <div class="for-switch x-small">
                                     <label class="switch">
                                         <span>
-                                            {{svg-jar "eye-closed" class="feature"}}
+                                            <Icons::EyeOpenClose class="feature" @closed={{this.post.hideTitleAndFeatureImage}} />
                                             Hide title and feature image
                                         </span>
                                         <div class="gh-toggle-featured">
diff --git a/ghost/admin/app/components/icons/eye-open-close.hbs b/ghost/admin/app/components/icons/eye-open-close.hbs
new file mode 100644
index 0000000000..d670ce9b65
--- /dev/null
+++ b/ghost/admin/app/components/icons/eye-open-close.hbs
@@ -0,0 +1,52 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 32 32" class={{if @closed "eye-closed"}} ...attributes>
+    <title>eye open close</title>
+    <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#212121" stroke-linejoin="round"
+        class="nc-icon-wrapper">
+        <g class="js-nc-int-icon nc-int-eye-open-close">
+            <circle cx="16" cy="16" r="5" stroke="none" fill="#212121"></circle>
+            <path d="M2,16s6,8,14,8,14-8,14-8" data-cap="none" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path d="M2,16S8,8,16,8s14,8,14,8" data-cap="none" stroke-linecap="round" stroke-linejoin="round"></path>
+            <line data-cap="butt" opacity="0" x1="12.768" x2="11.563" y1="8.427" y2="4.583"></line>
+            <line data-cap="butt" opacity="0" x1="19.232" x2="20.437" y1="8.427" y2="4.583"></line>
+            <line data-cap="butt" opacity="0" x1="6.563" x2="4.141" y1="11.563" y2="8.482"></line>
+            <line data-cap="butt" opacity="0" x1="25.437" x2="27.859" y1="11.563" y2="8.482"></line>
+        </g>
+        <style data-cap="butt">
+            .nc-int-eye-open-close {
+                --transition-duration: .3s;
+                perspective: 100px
+            }
+
+            .nc-int-eye-open-close :nth-child(1) {
+                transform-origin: 16px 22px;
+                transition: transform var(--transition-duration) cubic-bezier(.65, .05, .36, 1)
+            }
+
+            .nc-int-eye-open-close :nth-child(3) {
+                transform-origin: 50% 50%;
+                transition: transform var(--transition-duration) cubic-bezier(.65, .05, .36, 1)
+            }
+
+            .nc-int-eye-open-close :nth-child(4),
+            .nc-int-eye-open-close :nth-child(5),
+            .nc-int-eye-open-close :nth-child(6),
+            .nc-int-eye-open-close :nth-child(7) {
+                transform-origin: 50% 50%;
+                transition: transform var(--transition-duration) cubic-bezier(.65, .05, .36, 1), opacity 0s calc(var(--transition-duration)/2)
+            }
+
+            .eye-closed .nc-int-eye-open-close :nth-child(1) {
+                transform: scale(0)
+            }
+
+            .eye-closed .nc-int-eye-open-close :nth-child(3),
+            .eye-closed .nc-int-eye-open-close :nth-child(4),
+            .eye-closed .nc-int-eye-open-close :nth-child(5),
+            .eye-closed .nc-int-eye-open-close :nth-child(6),
+            .eye-closed .nc-int-eye-open-close :nth-child(7) {
+                transform: rotateX(180deg);
+                opacity: 1
+            }
+        </style>
+    </g>
+</svg>
\ No newline at end of file