Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-15 03:01:37 -05:00
Code Issues Activity

Added design for success and error states for editing newsletter links

Browse source 
refs https://github.com/TryGhost/Team/issues/2095
refs https://github.com/TryGhost/Team/issues/2098

- Added success state design for editing links in newsletters
- Added error state for invalid URL when editing links in newsletters
This commit is contained in:
Djordje Vlaisavljevic 2022-10-18 10:53:34 +02:00 • committed by GitHub
parent 18c52f2a2a
commit a014b5838a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 56 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
ghost/admin/app/components/posts/links-table.hbs
View file

@ -14,8 +14,9 @@
{{#each this.visibleLinks as |link|}}
<div class="gh-links-list-item">
{{#if (feature "fixNewsletterLinks")}}
<div class="flex items-center">
<div class="gh-links-list-url">
{{#if link.isEditing}}
<div class="gh-links-list-input-container">
<input
aria-label="Link"
type="text"
@ -29,13 +30,15 @@
{{autofocus}}
data-prevent-escape-close-modal="true"
/>
<span class="gh-links-list-item-error">Please enter a valid link</span>
</div>
{{else}}
<a href="{{link.link.to}}" target="_blank" rel="noopener noreferrer">
{{link.link.title}}
</a>
<button type="button" class="flex items-center" aria-label="Edit link" {{on "click" (fn this.editLink link.link.link_id)}}>{{svg-jar "pen"}}</button>
<button type="button" class="flex items-center gh-links-list-item-edit" aria-label="Edit link" {{on "click" (fn this.editLink link.link.link_id)}}>{{svg-jar "pen"}}</button>
<span class="gh-links-list-item-success">{{svg-jar "check-circle"}}</span>
{{/if}}
{{!-- <a href="{{link.link.to}}" target="_blank" rel="noopener noreferrer">{{link.link.title}}</a> --}}
</div>
{{else}}
<a href="{{link.link.to}}" target="_blank" rel="noopener noreferrer">{{link.link.title}}</a>

52
ghost/admin/app/styles/layouts/content.css
View file

@ -998,6 +998,12 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
border-bottom: 0 none;
}
.gh-links-list-url {
display: flex;
align-items: center;
padding-right: 32px;
}
.gh-links-list-item a {
margin: 0;
padding: 0;
@ -1012,7 +1018,7 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
color: var(--midgrey-d2);
}
.gh-links-list-item svg {
.gh-links-list-item-edit>svg {
display: none;
width: 14px;
margin-left: 8px;
@ -1021,7 +1027,7 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
animation: fade-in 0.3s;
}
.gh-links-list-item:hover svg {
.gh-links-list-item:hover .gh-links-list-item-edit>svg {
display: inline;
}
@ -1029,6 +1035,48 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
animation: fade-in .2s ease-in-out;
}
.gh-links-list-input-container {
width: 100%;
}
.gh-links-list-item-success {
opacity: 0;
display: flex;
}
.gh-links-list-item-success.gh-links-list-item-success-show {
animation: fade-in-out 3s;
}
.gh-links-list-item-error {
display: none;
margin: 6px 0 0;
color: var(--red);
font-size: 1.25rem;
font-weight: 400;
line-height: 1;
}
.error .gh-links-list-item-error {
display: block;
}
@keyframes fade-in-out {
0% { opacity: 0; }
20% { opacity: 1 }
95% { opacity: 1; }
100% {opacity: 0; }
}
.gh-links-list-item-success svg {
width: 14px;
margin-left: 8px;
}
.gh-links-list-item-success svg path {
stroke: var(--green);
}
.gh-links-list-clicks {
margin: 0;
color: var(--darkgrey);