TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-24 06:35:49 +03:00
Code Issues Projects Releases Wiki Activity

Styled emoji picker in callout card

Browse Source
This commit is contained in:
Sanne de Vries 2021-11-16 13:34:36 +01:00
parent cdf0565d3b
commit 3ec39ae255
2 changed files with 88 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
ghost/admin/app/styles/components/koenig.css
View File

@ -1392,10 +1392,25 @@
}
.kg-callout-emoji {
padding-right: 12px;
line-height: 1.6;
margin-right: 8px;
margin-left: -8px;
padding: 0 8px;
font-size: 2rem;
line-height: 1.6;
cursor: pointer;
border-radius: var(--border-radius);
}
.kg-callout-emoji:hover {
background: rgba(0, 0, 0, 0.06);
}
.kg-card-callout-white .kg-callout-emoji:hover {
background: var(--whitegrey);
}
.kg-callout-emoji.active {
background: rgba(0, 0, 0, 0.06);
}
.kg-callout-palette {
@ -1465,6 +1480,70 @@
background: var(--adjusted-accent-color);
}
.emoji-picker__wrapper {
margin-top: 1rem !important;
}
.emoji-picker {
border: 0 !important;
font-family: var(--font-family) !important;
box-shadow:
0px -1px 10px rgba(0, 0, 0, 0.08),
0px 2.8px 2.2px rgba(0, 0, 0, 0.014),
0px 6.7px 5.3px rgba(0, 0, 0, 0.02),
0px 12.5px 10px rgba(0, 0, 0, 0.025),
0px 22.3px 17.9px rgba(0, 0, 0, 0.03),
0px 41.8px 33.4px rgba(0, 0, 0, 0.036),
0px 100px 80px rgba(0, 0, 0, 0.05)
;
}
.emoji-picker__search-container {
margin: 0 !important;
}
.emoji-picker__search {
padding: 24px 16px !important;
color: var(--middarkgrey) !important;
border: 0 !important;
border-bottom: 1px solid var(--whitegrey-d1) !important;
font-family: var(--font-family) !important;
font-size: 1.45rem !important;
border-radius: 0 !important;
}
.emoji-picker__search-icon {
top: calc(50% - .4rem) !important;
right: 1.8rem !important;
color: var(--lightgrey) !important;
}
button.emoji-picker__category-button {
color: var(--midlightgrey) !important;
}
button.emoji-picker__category-button.active {
color: var(--darkgrey) !important;
border-bottom: var(--category-border-bottom-size) solid transparent !important;
}
.emoji-picker__content {
margin-top: 2rem !important;
}
.emoji-picker__emojis {
padding: 0 8px !important;
}
.emoji-picker__category-name {
margin: .8rem 0 1rem !important;
color: var(--darkgrey) !important;
font-family: var(--font-family) !important;
font-size: 1.3rem !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
}
/* Accordion card
/* --------------------------------------------------------------- */

8
ghost/admin/lib/koenig-editor/addon/components/koenig-card-callout.js
View File

@ -67,7 +67,13 @@ export default class KoenigCardCalloutComponent extends Component {
}
});
this.picker = new EmojiButton();
this.picker = new EmojiButton({
position: 'bottom',
recentsCount: 24,
showPreview: false,
initialCategory: 'recents'
});
this.picker.on('emoji', (selection) => {
this.setCalloutEmoji(selection.emoji);
});