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

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

@ -18,20 +18,24 @@
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 svg path {
stroke: var(--midgrey);
stroke-width: 2px;
} }
#gh-cardmenu-button:hover {
background-color:red;
color: yellow;
}
.gh-cardmenu-search { .gh-cardmenu-search {
position: relative; position: relative;

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);

4
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">
@ -14,4 +14,4 @@
{{koenig-menu-item tool=tool editor=editor range=range selected=tool.selected clicked=(action "closeMenu")}} {{koenig-menu-item tool=tool editor=editor range=range selected=tool.selected clicked=(action "closeMenu")}}
{{/each}} {{/each}}
</div> </div>
{{/if}} {{/if}}

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