Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Renamed accordion usages to toggle for toggle card

Browse source 
refs https://github.com/TryGhost/Team/issues/1209
This commit is contained in:
Rishabh 2021-12-03 00:52:46 +05:30
parent a5b0f75486
commit 628150fd32
8 changed files with 29 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
ghost/admin/app/styles/components/koenig.css
View file

@ -1672,10 +1672,10 @@ button.emoji-picker__category-button.active {
letter-spacing: 0 !important;
}
/* Accordion card
/* Toggle card
/* --------------------------------------------------------------- */
.kg-accordion-card-container {
.kg-toggle-card-container {
position: relative;
min-height: 4rem;
min-width: 100%;
@ -1683,7 +1683,7 @@ button.emoji-picker__category-button.active {
padding: 0;
}
.kg-accordion-card {
.kg-toggle-card {
display: flex;
padding: 16px 24px;
background: transparent;
@ -1692,36 +1692,36 @@ button.emoji-picker__category-button.active {
flex-direction: column;
}
.kg-accordion-card-header {
.kg-toggle-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.kg-accordion-card-heading {
.kg-toggle-card-heading {
margin-right: 16px;
}
.kg-accordion-card-heading h4 {
.kg-toggle-card-heading h4 {
font-weight: 600 !important;
}
.kg-accordion-card-heading ::after {
.kg-toggle-card-heading ::after {
font-weight: 600 !important;
font-size: 2rem !important;
letter-spacing: .02rem;
line-height: 1.6em;
}
.kg-accordion-card-content ::after {
.kg-toggle-card-content ::after {
line-height: 1.6em;
}
.kg-accordion-card-content {
.kg-toggle-card-content {
margin-top: 8px;
}
.kg-accordion-card-arrow-container {
.kg-toggle-card-arrow-container {
width: 24px;
height: 24px;
display: flex;
@ -1729,7 +1729,7 @@ button.emoji-picker__category-button.active {
align-items: center;
}
.kg-accordion-card-arrow {
.kg-toggle-card-arrow {
width: 14px;
color: rgba(124, 139, 154, 0.5)
}
@ -1973,7 +1973,7 @@ button.emoji-picker__category-button.active {
transition: var(--animation-speed-normal) ease-out;
transform: scale(1.0);
}
.kg-audio-button:hover svg {
opacity: 1.0;
fill: var(--green);

2
ghost/admin/app/templates/settings/labs.hbs
View file

@ -368,7 +368,7 @@
<div class="gh-expandable-block">
<div class="gh-expandable-header">
<div>
<h4 class="gh-expandable-title">Cardmageddon - Accordion</h4>
<h4 class="gh-expandable-title">Cardmageddon - Toggle</h4>
<p class="gh-expandable-description">
Card for adding collapsible content
</p>

20
ghost/admin/lib/koenig-editor/addon/components/koenig-card-accordion.hbs → ghost/admin/lib/koenig-editor/addon/components/koenig-card-toggle.hbs
View file

@ -1,6 +1,6 @@
<KoenigCard
@env={{@env}}
@class={{concat (kg-style "container-card") " kg-accordion-card-container"}}
@class={{concat (kg-style "container-card") " kg-toggle-card-container"}}
@headerOffset={{@headerOffset}}
@toolbar={{this.toolbar}}
@payload={{@payload}}
@ -24,11 +24,11 @@
{{!-- edit mode view --}}
<div class="kg-accordion-card">
<div class="kg-toggle-card">
<KoenigBasicHtmlInput
@html={{@payload.heading}}
@placeholder="Add your heading here..."
@class="w-100 fw4 bn bg-transparent kg-accordion-card-heading"
@class="w-100 fw4 bn bg-transparent kg-toggle-card-heading"
@name="toggle-heading"
@defaultTag="h4"
@onChange={{action "setHeadingText"}}
@ -40,7 +40,7 @@
<KoenigBasicHtmlTextarea
@html={{@payload.content}}
@placeholder="Add your content here..."
@class="w-100 bn bg-transparent kg-accordion-card-content"
@class="w-100 bn bg-transparent kg-toggle-card-content"
@onChange={{action "setContentText"}}
@onFocus={{action (mut this.isFocused) true}}
@onBlur={{action (mut this.isFocused) false}}
@ -51,18 +51,18 @@
{{!-- rendered (non-edit) mode view --}}
<div class="kg-accordion-card">
<div class="kg-accordion-card-header">
<div class="kg-accordion-card-heading">
<div class="kg-toggle-card">
<div class="kg-toggle-card-header">
<div class="kg-toggle-card-heading">
<h4>{{{this.formattedHeading}}}</h4>
</div>
<div class="kg-accordion-card-arrow-container">
<div class="kg-accordion-card-arrow">
<div class="kg-toggle-card-arrow-container">
<div class="kg-toggle-card-arrow">
{{svg-jar "koenig/kg-toggle-card-open-arrow"}}
</div>
</div>
</div>
<div class="kg-accordion-card-content">
<div class="kg-toggle-card-content">
{{{this.formattedContent}}}
</div>

4
ghost/admin/lib/koenig-editor/addon/components/koenig-card-accordion.js → ghost/admin/lib/koenig-editor/addon/components/koenig-card-toggle.js
View file

@ -7,7 +7,7 @@ import {run} from '@ember/runloop';
import {inject as service} from '@ember/service';
import {set} from '@ember/object';
export default class KoenigCardAccordionComponent extends Component {
export default class KoenigCardToggleComponent extends Component {
@service config;
@service feature;
@service store;
@ -138,7 +138,7 @@ export default class KoenigCardAccordionComponent extends Component {
}
_focusInput() {
let headingInput = this.element.querySelector('.kg-accordion-card-heading .koenig-basic-html-input__editor');
let headingInput = this.element.querySelector('.kg-toggle-card-heading .koenig-basic-html-input__editor');
if (headingInput) {
headingInput.focus();

6
ghost/admin/lib/koenig-editor/addon/options/cards.js
View file

@ -15,7 +15,7 @@ export const CARD_COMPONENT_MAP = {
button: 'koenig-card-button',
callout: 'koenig-card-callout',
nft: 'koenig-card-nft',
toggle: 'koenig-card-accordion',
toggle: 'koenig-card-toggle',
'email-cta': 'koenig-card-email-cta',
paywall: 'koenig-card-paywall',
video: 'koenig-card-video',
@ -39,7 +39,7 @@ export const CARD_ICON_MAP = {
button: 'koenig/kg-card-type-gen-embed',
callout: 'koenig/kg-card-type-callout',
nft: 'koenig/kg-card-type-gen-embed',
toggle: 'koenig/kg-card-type-accordion',
toggle: 'koenig/kg-card-type-toggle',
'email-cta': 'koenig/kg-card-type-gen-embed',
paywall: 'koenig/kg-card-type-divider',
video: 'koenig/kg-card-type-video',
@ -194,7 +194,7 @@ export const CARD_MENU = [
},
{
label: 'Toggle',
icon: 'koenig/kg-card-type-accordion',
icon: 'koenig/kg-card-type-toggle',
desc: 'Add collapsible content',
matches: ['toggle'],
type: 'card',

1
ghost/admin/lib/koenig-editor/app/components/koenig-card-accordion.js
View file

@ -1 +0,0 @@
export {default} from 'koenig-editor/components/koenig-card-accordion';

1
ghost/admin/lib/koenig-editor/app/components/koenig-card-toggle.js Normal file
View file

@ -0,0 +1 @@
export {default} from 'koenig-editor/components/koenig-card-toggle';

0
ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-accordion.svg → ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-toggle.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 458 B

After

Width:  |  Height:  |  Size: 458 B