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

Editor card-menu and toolbar style updates

Browse Source
This commit is contained in:
John O'Nolan 2017-03-08 21:08:20 +08:00
parent 06e2912c14
commit 8aa02da02c
12 changed files with 100 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
ghost/admin/app/styles/addons/gh-koenig/koenig-toolbar.css
View File

@ -30,6 +30,9 @@
}
.gh-toolbar-btn {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
width: 32px;
font-size: 1.6rem;
@ -46,12 +49,25 @@
padding-right: 8px;
}
.gh-toolbar-btn svg {
height: 1.4rem;
}
.gh-toolbar-btn svg g {
stroke-width: 2px;
stroke: color(var(--lightgrey) l(-10%));
}
.gh-toolbar-btn:hover {
color: #fff;
cursor: pointer;
text-shadow: #000 0 1px 6px;
}
.gh-toolbar-btn:hover svg g {
stroke: #fff;
}
.gh-toolbar-btn-bold {
font-weight: 700;
}

40
ghost/admin/app/styles/addons/ghost-editor/cardmenu.css
View File

@ -20,7 +20,16 @@
position: relative;
width: 350px;
height: 40px;
margin: -12px 0 -12px -15px;
margin: -12px -15px;
}
.gh-cardmenu-search svg {
position: absolute;
top: 11px;
left: 10px;
z-index: 100;
width: 20px;
height: 19px;
}
.gh-cardmenu-search-input {
@ -32,7 +41,7 @@
height: 40px;
font-size: 1.4rem;
line-height: 40px;
padding: 10px 0 10px 15px;
padding: 10px 0 10px 40px;
border: none;
border-radius: 4px 4px 0 0;
}
@ -47,17 +56,34 @@
border-radius: 4px;
}
.gh-cardmenu-card:hover {
cursor: pointer;
background: color(var(--lightgrey) l(+5%));
.gh-cardmenu-icon {
display: flex;
align-items: center;
}
.gh-cardmenu-icon svg {
width: 27px;
height: 27px;
fill: var(--darkgrey);
}
.gh-cardmenu-label {
font-size: 1.2rem;
margin: 7px 0 0 0;
font-size: 1.1rem;
color: var(--midgrey);
letter-spacing: 0.2px;
font-weight: 200;
}
.gh-cardmenu-card:hover {
cursor: pointer;
background: color(var(--lightgrey) l(+3%) s(-10%));
}
.gh-cardmenu-card:hover .gh-cardmenu-label {
color: var(--darkgrey);
font-weight: 300;
}
.gh-cardmenu-divider {
position: sticky;
top: -12px;
width: 350px;
padding: 5px 0;

15
ghost/admin/app/styles/patterns/buttons.css
View File

@ -389,24 +389,11 @@ Usage: CTA buttons grouped together horizontally.
margin-top: 5px;
}
.gh-btn-lg {
padding: 12px 18px;
border-radius: 4px;
font-size: 1.4rem;
line-height: 1.33;
}
.gh-btn-sm {
padding: 7px 10px;
border-radius: 2px;
font-size: 1rem;
line-height: 1.5;
}
.gh-btn-link {
border: 0;
}
/* Spin Buttons!
/* ---------------------------------------------------------- */
.spinner {

159
ghost/admin/app/templates/settings/labs.hbs
View File

@ -7,164 +7,49 @@
<p class="gh-box gh-box-info"><i class="icon-idea"></i>This is a testing ground for experimental features which aren't quite ready for primetime. They may change, break or inexplicably disappear at any time.</p>
{{!-- START: Card Menu Template --}}
{{!--
<div class="gh-setting-header">Card menu</div>
<div class="gh-setting">
<p>This is the intended output of the Ghost 1.0 editor card menu</p>
<div class="gh-cardmenu">
<div class="gh-cardmenu-search">
{{inline-svg "search.svg"}}
<input class="gh-input gh-cardmenu-search-input" type="text" placeholder="Search for a card..."/>
</div>
<div class="gh-cardmenu-divider">
Section
Primary
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">Icon</div>
<div class="gh-cardmenu-icon">{{inline-svg "text.svg"}}</div>
<div class="gh-cardmenu-label">Text</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">{{inline-svg "markdown.svg"}}</div>
<div class="gh-cardmenu-label">Markdown</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">{{inline-svg "photos.svg"}}</div>
<div class="gh-cardmenu-label">Image</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">Icon</div>
<div class="gh-cardmenu-label">Image</div>
<div class="gh-cardmenu-icon">{{inline-svg "brackets.svg"}}</div>
<div class="gh-cardmenu-label">Embed</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">Icon</div>
<div class="gh-cardmenu-label">Image</div>
<div class="gh-cardmenu-icon">{{inline-svg "line.svg"}}</div>
<div class="gh-cardmenu-label">Divider</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">Icon</div>
<div class="gh-cardmenu-label">Image</div>
</div>
<div class="gh-cardmenu-divider">
Section
<div class="gh-cardmenu-icon">{{inline-svg "list-bullet.svg"}}</div>
<div class="gh-cardmenu-label">Bullet list</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">Icon</div>
<div class="gh-cardmenu-label">Image</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">Icon</div>
<div class="gh-cardmenu-label">Image</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">Icon</div>
<div class="gh-cardmenu-label">Image</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">Icon</div>
<div class="gh-cardmenu-label">Image</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">Icon</div>
<div class="gh-cardmenu-label">Image</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">Icon</div>
<div class="gh-cardmenu-label">Image</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">Icon</div>
<div class="gh-cardmenu-label">Image</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">Icon</div>
<div class="gh-cardmenu-label">Image</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">Icon</div>
<div class="gh-cardmenu-label">Image</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">Icon</div>
<div class="gh-cardmenu-label">Image</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">Icon</div>
<div class="gh-cardmenu-label">Image</div>
</div>
<div class="gh-cardmenu-divider">
Section
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">Icon</div>
<div class="gh-cardmenu-label">Image</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">Icon</div>
<div class="gh-cardmenu-label">Image</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">Icon</div>
<div class="gh-cardmenu-label">Image</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">Icon</div>
<div class="gh-cardmenu-label">Image</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">Icon</div>
<div class="gh-cardmenu-label">Image</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">Icon</div>
<div class="gh-cardmenu-label">Image</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">Icon</div>
<div class="gh-cardmenu-label">Image</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">Icon</div>
<div class="gh-cardmenu-label">Image</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">Icon</div>
<div class="gh-cardmenu-label">Image</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">Icon</div>
<div class="gh-cardmenu-label">Image</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">Icon</div>
<div class="gh-cardmenu-label">Image</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">Icon</div>
<div class="gh-cardmenu-label">Image</div>
</div>
<div class="gh-cardmenu-divider">
Section
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">Icon</div>
<div class="gh-cardmenu-label">Image</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">Icon</div>
<div class="gh-cardmenu-label">Image</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">Icon</div>
<div class="gh-cardmenu-label">Image</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">Icon</div>
<div class="gh-cardmenu-label">Image</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">Icon</div>
<div class="gh-cardmenu-label">Image</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">Icon</div>
<div class="gh-cardmenu-label">Image</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon">Icon</div>
<div class="gh-cardmenu-label">Image</div>
<div class="gh-cardmenu-icon">{{inline-svg "list-number.svg"}}</div>
<div class="gh-cardmenu-label">Number list</div>
</div>
</div>
</div>
--}}
{{!-- END: Card Menu Template --}}
<div class="gh-setting-header">Migration options</div>

2
ghost/admin/lib/gh-koenig/addon/options/default-tools.js
View File

@ -167,7 +167,7 @@ export default function (editor, toolbar) {
}
},
{
name: 'L',
name: '<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="M14.5 12.5l.086.086c.781.781 2.047.781 2.828 0l3.965-3.964c1.166-1.167 1.166-3.075 0-4.243l-1.758-1.757c-1.166-1.167-3.076-1.167-4.242 0l-3.965 3.964c-.781.781-.781 2.047 0 2.829l.086.085M9.5 11.5l-.086-.085c-.781-.781-2.047-.781-2.828 0l-3.965 3.964c-1.166 1.167-1.166 3.076 0 4.243l1.758 1.757c1.166 1.167 3.076 1.167 4.242 0l3.965-3.964c.781-.781.781-2.047 0-2.829l-.086-.086M8.111 15.889l7.778-7.778"/></g></svg>',
label: 'Link',
class: 'link',
icon: 'link.svg',

2
ghost/admin/lib/gh-koenig/addon/templates/components/koenig-toolbar-button.hbs
View File

@ -1 +1 @@
{{{tool.name}}}
{{{tool.name}}}

10
ghost/admin/public/assets/icons/line.svg Normal file
View File

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="42px" height="4px" viewBox="0 0 42 4" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>Untitled</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
<path d="M1,2 L41,2" id="Line" stroke="#000000" stroke-width="2"></path>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 550 B

1
ghost/admin/public/assets/icons/link.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="M14.5 12.5l.086.086c.781.781 2.047.781 2.828 0l3.965-3.964c1.166-1.167 1.166-3.075 0-4.243l-1.758-1.757c-1.166-1.167-3.076-1.167-4.242 0l-3.965 3.964c-.781.781-.781 2.047 0 2.829l.086.085M9.5 11.5l-.086-.085c-.781-.781-2.047-.781-2.828 0l-3.965 3.964c-1.166 1.167-1.166 3.076 0 4.243l1.758 1.757c1.166 1.167 3.076 1.167 4.242 0l3.965-3.964c.781-.781.781-2.047 0-2.829l-.086-.086M8.111 15.889l7.778-7.778"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 607 B

1
ghost/admin/public/assets/icons/list-bullet.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"><circle cx="2.5" cy="4.5" r="2"/><path d="M8.569 4.428h14.931"/><circle cx="2.5" cy="12.5" r="2"/><path d="M8.569 12.428h14.931"/><circle cx="2.5" cy="20.5" r="2"/><path d="M8.569 20.427h14.931"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 388 B

1
ghost/admin/public/assets/icons/list-number.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="M6.5 4.5h17M6.5 12.5h17M6.5 20.5h17M2 6.5v-3.927l-1.5 1.464M2.569 14.5h-2.069c1.48-2 2-1.836 2-2.963 0-.552-.449-.982-1-.982-.553 0-.965.422-.965.974M.5 18.5h1.931l-1 1.537c.826 0 1 .481 1 .981s-.174.982-1 .982h-.931"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 420 B

12
ghost/admin/public/assets/icons/markdown.svg Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="43px" height="34px" viewBox="0 0 43 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>markdown</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" stroke="#000000" stroke-width="2" x="2" y="2" width="39" height="30" rx="2"></rect>
<polygon id="M" fill="#000000" points="19.5658884 12.6132812 19.5170603 12.6035156 14.9174509 24 13.638154 24 9.03854465 12.6132812 8.98971652 12.6230469 9.18502902 18.375 9.18502902 22.4960938 10.7768259 22.7695312 10.7768259 24 5.66940402 24 5.66940402 22.7695312 7.2612009 22.4960938 7.2612009 11.2949219 5.66940402 11.0214844 5.66940402 9.78125 9.7221384 9.78125 14.2533884 21.3339844 14.3119821 21.3339844 18.8334665 9.78125 22.8959665 9.78125 22.8959665 11.0214844 21.3041696 11.2949219 21.3041696 22.4960938 22.8959665 22.7695312 22.8959665 24 17.7885446 24 17.7885446 22.7695312 19.3803415 22.4960938 19.3803415 18.375"></polygon>
<path d="M36.0769232,18.5010984 L31.0384616,23.53956 L26,18.5010984 M31.0384616,23.53956 L31.0384616,10.4395605" id="Stroke-2" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
ghost/admin/public/assets/icons/text.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="M15.979 22.5l-7-20.5-6.979 20.5M4.383 15.5h9.207M.5 22.5h3.021M14.479 22.5h3.021M22.501 22.5l-4.598-13.465-2.36 6.932M16.92 17.5h3.768M21.516 22.5h1.984"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 356 B