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

Card menu trigger styling

Browse source
This commit is contained in:
John O'Nolan 2017-03-15 17:43:12 +02:00
parent 715fe52793
commit f8dd2c37dd
4 changed files with 24 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
ghost/admin/app/styles/addons/ghost-editor/cardmenu.css
View file

@ -18,19 +18,23 @@
z-index: 9999999; /* have to compete with codemirror */ z-index: 9999999; /* have to compete with codemirror */
} }
#gh-cardmenu-button { .gh-cardmenu-button {
position:absolute; position: absolute;
width: 40px; width: 30px;
height: 40px; height: 30px;
background-color:pink; padding: 6px;
font-size:40px; border: var(--midgrey) 1px solid;
line-height: 40px; background: #fff;
color: powderblue; border-radius: 100%;
font-family: "Comic Sans MS", cursive, sans-serif; font-size: 16px;
line-height: 16px;
text-align: center;
color: var(--midgrey);
} }
#gh-cardmenu-button:hover {
background-color:red; .gh-cardmenu-button svg path {
color: yellow; stroke: var(--midgrey);
stroke-width: 2px;
} }
.gh-cardmenu-search { .gh-cardmenu-search {

8
ghost/admin/lib/gh-koenig/addon/components/koenig-plus-menu.js
View file

@ -130,19 +130,19 @@ export default Component.extend({
this.set('isButton', true); this.set('isButton', true);
run.schedule('afterRender', this, run.schedule('afterRender', this,
() => { () => {
let button = this.$('#gh-cardmenu-button'); let button = this.$('.gh-cardmenu-button');
button.css('top', offset.top + $editor.scrollTop() - editorOffset.top - 5); button.css('top', offset.top + $editor.scrollTop() - editorOffset.top - 2);
if (currentNode.tagName.toLowerCase() === 'li') { if (currentNode.tagName.toLowerCase() === 'li') {
button.css('left', this.$(currentNode.parentNode).position().left + $editor.scrollLeft() - 90); button.css('left', this.$(currentNode.parentNode).position().left + $editor.scrollLeft() - 90);
} else { } else {
button.css('left', offset.left + $editor.scrollLeft() - 90); button.css('left', offset.left + $editor.scrollLeft() - 50);
} }
}); });
}); });
}, },
actions: { actions: {
openMenu: function () { // eslint-disable-line openMenu: function () { // eslint-disable-line
let button = this.$('#gh-cardmenu-button'); let button = this.$('.gh-cardmenu-button');
let editor = this.get('editor'); let editor = this.get('editor');
this.set('isOpen', true); this.set('isOpen', true);

2
ghost/admin/lib/gh-koenig/addon/templates/components/koenig-plus-menu.hbs
View file

@ -1,5 +1,5 @@
{{#if showButton}} {{#if showButton}}
<button id="gh-cardmenu-button" {{action "openMenu"}}>+</button> <button class="gh-cardmenu-button" {{action "openMenu"}}>{{inline-svg "plus"}}</button>
{{/if}} {{/if}}
{{#if isOpen}} {{#if isOpen}}
<div class="gh-cardmenu"> <div class="gh-cardmenu">

1
ghost/admin/public/assets/icons/plus.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none"><path d="M11.5.5v22M22.5 11.5h-22"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 228 B