TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-01 05:50:35 +03:00
Code Issues Projects Releases Wiki Activity

Added animated icon for "hide title + feature image" toggle (#17220)

Browse Source 
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
This commit is contained in:
Kevin Ansfield 2023-07-06 13:38:36 +02:00 committed by GitHub
parent c9f2271665
commit 22a7d1c374
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 53 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ghost/admin/app/components/gh-post-settings-menu.hbs
View File

@ -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">

52
ghost/admin/app/components/icons/eye-open-close.hbs Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB