TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-09-20 09:08:54 +03:00
Code Issues Projects Releases Wiki Activity

Made longer URLs scrollable on hover for Email CTA and Button modules in the editor

Browse Source 
no issue
This commit is contained in:
James Morris 2022-09-02 18:36:29 +01:00
parent f765b019c5
commit dd65c99104
6 changed files with 129 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
ghost/admin/app/styles/app-dark.css
View File

@ -1135,6 +1135,7 @@ kbd {
/* Finishing touches */
/* ---------------------------------------------------- */
.gh-done {
background: #15171A;
}
@ -1292,4 +1293,25 @@ kbd {
.gh-input-group-tier-trial-disabled .gh-input-append:before {
background: #0e0f11;
}
/* Settings Links */
.kg-settings-link-url::before {
background: rgb(28,30,33);
background: linear-gradient(90deg, rgba(28,30,33,1) 0%, rgba(28,30,33,0) 100%);
}
.kg-settings-link-url::after {
background: rgb(28,30,33);
background: linear-gradient(90deg, rgba(28,30,33,0) 0%, rgba(28,30,33,1) 100%);
}
.ember-power-select-option[aria-current="true"] .kg-settings-link-url.scroller::before {
background: linear-gradient(90deg, rgba(19,20,22,1) 0%, rgba(19,20,22,0) 100%);
}
.ember-power-select-option[aria-current="true"] .kg-settings-link-url::after {
background: linear-gradient(90deg, rgba(19,20,22,0) 0%, rgba(19,20,22,1) 100%);
}

51
ghost/admin/app/styles/layouts/editor.css
View File

@ -1013,10 +1013,59 @@ figure {
}
.kg-settings-link-url {
position: relative;
display: block;
width: 100%;
overflow: hidden;
padding: 0;
margin: 0;
text-align: left;
}
.kg-settings-link-url::before {
content: '';
position: absolute;
top: 0;
left: -20px;
width: 20px;
height: 100%;
background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
z-index: 999;
opacity: 0;
transition: all 250ms ease-out;
}
.kg-settings-link-url::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 100%;
background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
z-index: 999;
}
.ember-power-select-option[aria-current="true"] .kg-settings-link-url.scroller::before {
opacity: 1;
left: 0;
background: linear-gradient(90deg, rgba(244,245,245,1) 0%, rgba(244,245,245,0) 100%);
}
.ember-power-select-option[aria-current="true"] .kg-settings-link-url::after {
background: linear-gradient(90deg, rgba(244,245,245,0) 0%, rgba(244,245,245,1) 100%);
}
.kg-settings-link-url > span {
display: inline-block;
font-weight: 400;
font-size: 1.2rem;
color: var(--midgrey);
letter-spacing: 0;
line-height: 1.3em;
}
transition: transform 250ms ease-in-out;
transform: translateX(0); /* used for dynamic positioning with js */
padding-right: 8px; /* extra padding used for dynamic positioning with js */
}

2
ghost/admin/lib/koenig-editor/addon/components/koenig-card-button.hbs
View File

@ -84,7 +84,7 @@
as |suggestion|
>
<span class="kg-settings-link-title" title="{{suggestion.name}}">{{suggestion.name}}</span>
<span class="kg-settings-link-url" title="{{suggestion.url}}">{{suggestion.url}}</span>
<span class="kg-settings-link-url" {{on "mouseenter" this.enterLinkURL}} {{on "mouseleave" this.leaveLinkURL}}><span>{{suggestion.url}}</span></span>
</GhInputWithSelect>
</div>
</div>

28
ghost/admin/lib/koenig-editor/addon/components/koenig-card-button.js
View File

@ -18,6 +18,8 @@ export default class KoenigCardButtonComponent extends Component {
@tracked contentFocused = false;
@tracked offers = null;
linkScrollerTimeout = null; // needs to be global so can be cleared when needed across functions
get isEmpty() {
const {buttonText, buttonUrl} = this.args.payload;
@ -135,6 +137,32 @@ export default class KoenigCardButtonComponent extends Component {
document.querySelector(selector)?.focus();
}
@action
enterLinkURL(event) {
event.stopPropagation();
const parent = event.target;
const child = event.target.querySelector('span');
clearTimeout(this.linkScrollerTimeout);
if (child.offsetWidth > parent.offsetWidth) {
this.linkScrollerTimeout = setTimeout(() => {
parent.classList.add('scroller');
child.style.transform = `translateX(-${(child.offsetWidth - parent.offsetWidth) + 8}px)`;
}, 100);
}
}
@action
leaveLinkURL(event) {
event.stopPropagation();
clearTimeout(this.linkScrollerTimeout);
const parent = event.target;
const child = event.target.querySelector('span');
child.style.transform = 'translateX(0)';
parent.classList.remove('scroller');
}
@task({restartable: true})
*fetchOffersTask() {
this.offers = yield this.store.query('offer', {limit: 'all', filter: 'status:active'});

2
ghost/admin/lib/koenig-editor/addon/components/koenig-card-email-cta.hbs
View File

@ -148,7 +148,7 @@
as |suggestion|
>
<span class="kg-settings-link-title" title="{{suggestion.name}}">{{suggestion.name}}</span>
<span class="kg-settings-link-url" title="{{suggestion.url}}">{{suggestion.url}}</span>
<span class="kg-settings-link-url" {{on "mouseenter" this.enterLinkURL}} {{on "mouseleave" this.leaveLinkURL}}><span>{{suggestion.url}}</span></span>
</GhInputWithSelect>
</div>
</div>

27
ghost/admin/lib/koenig-editor/addon/components/koenig-card-email-cta.js
View File

@ -24,6 +24,7 @@ export default class KoenigCardEmailCtaComponent extends Component {
buttonTextInputId = 'button-text-input-' + guidFor(this);
urlInputId = 'url-input-' + guidFor(this);
linkScrollerTimeout = null; // needs to be global so can be cleared when needed across functions
get isEmpty() {
const {html, showButton, buttonText, buttonUrl} = this.args.payload;
@ -215,6 +216,32 @@ export default class KoenigCardEmailCtaComponent extends Component {
document.querySelector(selector)?.focus();
}
@action
enterLinkURL(event) {
event.stopPropagation();
const parent = event.target;
const child = event.target.querySelector('span');
clearTimeout(this.linkScrollerTimeout);
if (child.offsetWidth > parent.offsetWidth) {
this.linkScrollerTimeout = setTimeout(() => {
parent.classList.add('scroller');
child.style.transform = `translateX(-${(child.offsetWidth - parent.offsetWidth) + 8}px)`;
}, 100);
}
}
@action
leaveLinkURL(event) {
event.stopPropagation();
clearTimeout(this.linkScrollerTimeout);
const parent = event.target;
const child = event.target.querySelector('span');
child.style.transform = 'translateX(0)';
parent.classList.remove('scroller');
}
@task({restartable: true})
*fetchOffersTask() {
this.offers = yield this.store.query('offer', {limit: 'all', filter: 'status:active'});