New publish menu

This commit is contained in:
John O'Nolan 2017-03-11 19:23:44 +08:00
parent ab287848d4
commit e39a31656e
8 changed files with 565 additions and 48 deletions

View File

@ -30,6 +30,7 @@
@import "components/settings-menu.css";
@import "components/selectize.css";
@import "components/power-select.css";
@import "components/publishmenu.css";
/* Layouts: Groups of Components

View File

@ -0,0 +1,172 @@
/* Publish Menu
/* ---------------------------------------------------------- */
.gh-publishmenu-trigger {
color: var(--blue);
border: none;
}
.gh-publishmenu-trigger:focus {
outline: 0;
}
.gh-publishmenu {
position: relative;
z-index: 1000;
}
.gh-publishmenu-dropdown {
position: absolute;
top: 100%;
left: 0;
margin: 5px 0 20px 0;
padding: 20px;
width: 300px;
background-color: #fff;
background-clip: padding-box;
border-radius: 4px;
box-shadow: 0 0 0 1px rgba(99,114,130,0.16), 0 8px 16px rgba(27,39,51,0.08);
list-style: none;
text-align: left;
text-transform: none;
font-size: 1.4rem;
font-weight: normal;
}
.gh-publishmenu-heading {
margin: 0 0 15px 0;
font-size: 1.8rem;
line-height: 1.15em;
}
.gh-publishmenu-content {
margin: 20px 0;
border-top: var(--lightgrey) 1px solid;
border-bottom: var(--lightgrey) 1px solid;
}
.gh-publishmenu-footer {
display: flex;
align-items: center;
justify-content: flex-end;
margin: 15px 0 0 0;
}
.gh-publishmenu-button {
float: right;
}
.gh-publishmenu-radio {
display: flex;
margin: 25px 0;
}
.gh-publishmenu-radio-button {
flex-shrink: 0;
position: relative;
width: 15px;
height: 15px;
border: color(var(--lightgrey) l(-10%)) 1px solid;
border-radius: 100%;
background: #fff;
}
.gh-publishmenu-radio-content {
display: flex;
flex-direction: column;
margin: 0 0 0 15px;
}
.gh-publishmenu-radio-label {
font-size: 1.4rem;
line-height: 1.2em;
font-weight: 500;
}
.gh-publishmenu-radio-desc {
font-size: 1.3rem;
line-height: 1.4em;
font-weight: 200;
color: color(var(--midgrey) l(+10%));
}
.gh-publishmenu-radio-label:hover,
.gh-publishmenu-radio-button:hover {
cursor: pointer;
}
.gh-publishmenu-radio.active .gh-publishmenu-radio-button {
border-color: color(var(--blue) l(-12%));
background: var(--blue);
}
.gh-publishmenu-radio.active .gh-publishmenu-radio-button:before {
display: block;
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 7px;
height: 7px;
background: #fff;
border-radius: 100%;
box-shadow: rgba(0,0,0,0.25) 0 1px 3px;
}
.gh-publishmenu-schedule {
display: flex;
align-items: center;
justify-content: space-between;
}
.gh-publishmenu-schedule-date,
.gh-publishmenu-schedule-time {
display: flex;
align-items: center;
position: relative;
margin: 7px 0 4px;
padding: 6px 8px;
border: color(var(--lightgrey) l(-5%) s(-10%)) 1px solid;
border-radius: 3px;
transition: border-color 0.15s linear;
background: #fff;
}
.gh-publishmenu-schedule-time {
margin-left: 10px;
width: 170px;
}
.gh-publishmenu-radio input {
display: block;
padding: 0;
width: 100%;
border: none;
color: color(var(--midgrey) l(-18%));
font-size: 1.3rem;
line-height: 1em;
font-weight: 400;
user-select: text;
-webkit-appearance: none;
}
.gh-publishmenu-schedule-date:focus,
.gh-publishmenu-schedule-time:focus {
border-color: color(var(--lightgrey) l(-15%) s(-10%));
}
.gh-publishmenu-radio input:focus {
outline: 0;
}
.gh-publishmenu-schedule-date svg {
height: 14px;
fill: color(var(--midgrey) l(+15%));
}
.gh-publishmenu-schedule-timezone {
font-size: 1.1rem;
font-weight: 200;
color: color(var(--midgrey) l(+17%));
}

View File

@ -5,6 +5,8 @@
.gh-contentfilter {
display: flex;
align-items: center;
justify-content: space-between;
margin: 2vw 0 1vw;
padding: 0;
border-top: color(var(--lightgrey)) 1px solid;

View File

@ -126,10 +126,12 @@ select {
display: block;
padding: 10px 12px;
width: 100%;
height: 40px;
border: color(var(--lightgrey) l(-5%) s(-10%)) 1px solid;
border-radius: var(--border-radius);
color: color(var(--midgrey) l(-18%));
font-size: 1.6rem;
line-height: 1em;
font-weight: 300;
user-select: text;
transition: border-color 0.15s linear;

View File

@ -102,6 +102,7 @@ html {
font-family: var(--font-family);
font-size: 62.5%;
line-height: 1.65;
letter-spacing: 0.2px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

View File

@ -5,58 +5,61 @@
{{#link-to "editor.new" class="gh-btn gh-btn-green" data-test-new-post-button=true}}<span>New story</span>{{/link-to}}
</section>
</header>
<div class="gh-contentfilter">
{{#power-select
selected=selectedType
options=availableTypes
searchField="name"
onchange=(action "changeType")
tagName="div"
data-test-type-select=true
as |type|
}}
{{type.name}}
{{/power-select}}
<div class="gh-contentfilter-left">
{{#power-select
selected=selectedType
options=availableTypes
searchField="name"
onchange=(action "changeType")
tagName="div"
data-test-type-select=true
as |type|
}}
{{type.name}}
{{/power-select}}
{{#unless session.user.isAuthor}}
{{#power-select
selected=selectedAuthor
options=availableAuthors
searchField="name"
onchange=(action "changeAuthor")
tagName="div"
data-test-author-select=true
as |author|
}}
{{author.name}}
{{/power-select}}
{{/unless}}
{{#unless session.user.isAuthor}}
{{#power-select
selected=selectedAuthor
options=availableAuthors
searchField="name"
onchange=(action "changeAuthor")
tagName="div"
data-test-author-select=true
as |author|
}}
{{author.name}}
{{/power-select}}
{{/unless}}
{{#power-select
selected=selectedTag
options=availableTags
searchField="name"
onchange=(action "changeTag")
tagName="div"
data-test-tag-select=true
as |tag|
}}
{{tag.name}}
{{/power-select}}
{{#power-select
selected=selectedTag
options=availableTags
searchField="name"
onchange=(action "changeTag")
tagName="div"
data-test-tag-select=true
as |tag|
}}
{{tag.name}}
{{/power-select}}
</div>
Sort by:
{{#power-select
selected=selectedOrder
options=availableOrders
searchEnabled=false
onchange=(action "changeOrder")
tagName="div"
data-test-order-select=true
as |order|
}}
{{order.name}}
{{/power-select}}
<div class="gh-contentfilter-right">
Sort by:
{{#power-select
selected=selectedOrder
options=availableOrders
searchEnabled=false
onchange=(action "changeOrder")
tagName="div"
data-test-order-select=true
as |order|
}}
{{order.name}}
{{/power-select}}
</div>
</div>
<section class="content-list">

View File

@ -0,0 +1,277 @@
<html class="no-js desktop landscape" lang="en" data-ember-extension="1"><!--<![endif]--><head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Settings - Labs - Ghost 1.0</title>
<meta name="ghost-admin/config/environment" content="%7B%22modulePrefix%22%3A%22ghost-admin%22%2C%22environment%22%3A%22development%22%2C%22rootURL%22%3A%22/%22%2C%22locationType%22%3A%22trailing-history%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%2C%22EXTEND_PROTOTYPES%22%3A%7B%22Date%22%3Afalse%2C%22Array%22%3Atrue%2C%22String%22%3Atrue%2C%22Function%22%3Atrue%7D%2C%22ENABLE_DS_FILTER%22%3Atrue%7D%2C%22APP%22%3A%7B%22version%22%3A%221.0%22%2C%22LOG_ACTIVE_GENERATION%22%3Atrue%2C%22LOG_TRANSITIONS%22%3Atrue%2C%22LOG_TRANSITIONS_INTERNAL%22%3Atrue%2C%22LOG_VIEW_LOOKUPS%22%3Atrue%2C%22name%22%3A%22ghost-admin%22%7D%2C%22ember-simple-auth%22%3A%7B%7D%2C%22torii%22%3A%7B%7D%2C%22ember-cli-mirage%22%3A%7B%22enabled%22%3Afalse%2C%22usingProxy%22%3Afalse%2C%22useDefaultPassthroughs%22%3Atrue%7D%2C%22contentSecurityPolicyHeader%22%3A%22Content-Security-Policy-Report-Only%22%2C%22contentSecurityPolicy%22%3A%7B%22default-src%22%3A%5B%22%27none%27%22%5D%2C%22script-src%22%3A%5B%22%27self%27%22%5D%2C%22font-src%22%3A%5B%22%27self%27%22%5D%2C%22connect-src%22%3A%5B%22%27self%27%22%5D%2C%22img-src%22%3A%5B%22%27self%27%22%5D%2C%22style-src%22%3A%5B%22%27self%27%22%5D%2C%22media-src%22%3A%5B%22%27self%27%22%5D%7D%2C%22exportApplicationGlobal%22%3Atrue%2C%22ember-load%22%3A%7B%22loadingIndicatorClass%22%3A%22ember-load-indicator%22%7D%7D">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimal-ui">
<meta name="pinterest" content="nopin">
<meta http-equiv="cleartype" content="on">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Ghost">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="/ghost/assets/img/touch-icon-iphone.png?v=7d9315ee7c">
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/ghost/assets/img/touch-icon-ipad.png?v=7d9315ee7c">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/ghost/assets/img/small.png?v=7d9315ee7c">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/ghost/assets/img/medium.png?v=7d9315ee7c">
<meta name="application-name" content="Ghost">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-square70x70logo" content="http://localhost:2368/ghost/assets/img/small.png?v=7d9315ee7c">
<meta name="msapplication-square150x150logo" content="http://localhost:2368/ghost/assets/img/medium.png?v=7d9315ee7c">
<meta name="msapplication-square310x310logo" content="http://localhost:2368/ghost/assets/img/large.png?v=7d9315ee7c">
<link rel="stylesheet" href="http://localhost:2368/ghost/assets/vendor.css?v=7d9315ee7c">
<link rel="stylesheet" href="http://localhost:2368/ghost/assets/ghost.css?v=7d9315ee7c" title="light">
</head>
<body class="ember-application settings">
<div id="ember-basic-dropdown-wormhole"></div>
<script src="/ghost/assets/vendor.js?v=7d9315ee7c"></script>
<script src="/ghost/assets/ghost.js?v=7d9315ee7c"></script>
<div id="ember846" class="ember-view"><div id="ember888" class="gh-app ember-view"> <a href="javascript:;" id="ember928" class="sr-only sr-only-focusable ember-view">Skip to main content</a>
<aside id="ember931" class="gh-alerts ember-view"><!----></aside>
<div class="gh-viewport ">
<nav id="ember946" class="gh-nav ember-view"><div id="ember981" class="gh-menu-toggle ember-view"></div>
<header role="button" id="ember984" class="gh-nav-menu closed ember-view"> <div style="background-image: url(http://localhost:2368/favicon.png)" class="gh-nav-menu-icon"></div>
<div class="gh-nav-menu-details">
<div class="gh-nav-menu-details-blog">Ghost 1.0</div>
<div class="gh-nav-menu-details-user">John O'Nolan</div>
</div>
<i class="icon-arrow"></i>
</header><div id="ember987" class="dropdown closed fade-out closed ember-view"> <ul role="menu" style="right:-20px;left:auto;" class="dropdown-menu dropdown-triangle-top js-user-menu-dropdown-menu">
<li role="presentation"><a href="http://localhost:2368/" target="_blank">View site</a></li>
<li role="presentation"><a tabindex="-1" href="/ghost/about/" id="ember990" class="gh-nav-menu-about dropdown-item js-nav-item ember-view"><i class="icon-shop"></i> About Ghost</a></li>
<li class="divider"></li>
<li role="presentation"><a tabindex="-1" href="/ghost/team/john/" id="ember1013" class="dropdown-item user-menu-profile js-nav-item ember-view"><i class="icon-user"></i> Your Profile</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://support.ghost.org/" target="_blank" class="dropdown-item help-menu-support"><i class="icon-ambulance"></i> Support Center</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/intent/tweet?text=%40TryGhost+Hi%21+Can+you+help+me+with+&amp;related=TryGhost" target="_blank" onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;" class="dropdown-item help-menu-tweet"><i class="icon-twitter"></i> Tweet @TryGhost!</a></li>
<li class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://support.ghost.org/how-to-use-ghost/" target="_blank" class="dropdown-item help-menu-how-to"><i class="icon-book"></i> How to Use Ghost</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://ideas.ghost.org/" target="_blank" class="dropdown-item help-menu-wishlist"><i class="icon-idea"></i> Wishlist</a></li>
<li class="divider"></li>
<li role="presentation"><a tabindex="-1" href="/ghost/signout/" id="ember1037" class="dropdown-item user-menu-signout ember-view"><i class="icon-signout"></i> Sign Out</a></li>
</ul>
</div><section class="gh-nav-body">
<section class="gh-nav-search">
<div id="ember1048" class="gh-nav-search-input ember-view"><div id="ember1066" class="ember-basic-dropdown ember-view">
<div aria-haspopup="" aria-controls="ember-basic-dropdown-content-ember1066" tabindex="0" data-ebd-id="ember1066-trigger" role="button" id="ember1075" class="ember-power-select-trigger ember-basic-dropdown-trigger ember-basic-dropdown-trigger--in-place ember-view"><div id="ember1084" class="ember-view"><div class="ember-power-select-search">
<input type="search" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="combobox" placeholder="Search">
<button class="gh-nav-search-button" data-ember-action="" data-ember-action-1085="1085"><i class="icon-search"></i><span class="sr-only">Search</span></button>
</div>
</div></div>
<!---->
</div></div>
</section>
<ul class="gh-nav-list gh-nav-main">
<li><a href="/ghost/editor/" id="ember1095" class="gh-nav-main-editor ember-view"><i class="icon-pen"></i>New story</a></li>
<li>
<a href="/ghost/" id="ember1140" class="gh-nav-main-content ember-view"><i class="icon-content"></i>Stories</a>
</li>
<li><a href="/ghost/team/" id="ember1166" class="gh-nav-main-users ember-view"><i class="icon-team"></i>Team</a></li>
<!----> </ul>
<ul class="gh-nav-list gh-nav-settings">
<li class="gh-nav-list-h">Settings</li>
<li><a href="/ghost/settings/general/" id="ember1186" class="gh-nav-settings-general ember-view"><i class="icon-settings"></i>General</a></li>
<li><a href="/ghost/settings/design/" id="ember1206" class="gh-nav-settings-navigation ember-view"><i class="icon-compass"></i>Design</a></li>
<li><a href="/ghost/settings/tags/" id="ember1230" class="gh-nav-settings-tags ember-view"><i class="icon-tag"></i>Tags</a></li>
<li><a href="/ghost/settings/code-injection/" id="ember1258" class="gh-nav-settings-code-injection ember-view"><i class="icon-code"></i>Code injection</a></li>
<li><a href="/ghost/settings/apps/" id="ember1275" class="gh-nav-settings-apps ember-view"><i class="icon-box"></i>Apps</a></li>
<li><a href="/ghost/settings/labs/" id="ember1299" class="gh-nav-settings-labs active ember-view"><i class="icon-labs"></i>Labs</a></li>
</ul>
</section>
<div class="gh-autonav-toggle" data-ember-action="" data-ember-action-1300="1300"></div>
</nav>
<main id="ember1303" role="main" class="gh-main ember-view"> <section class="gh-canvas">
<header class="gh-canvas-header">
<h2 class="gh-canvas-title">Labs</h2>
</header>
<section class="view-container settings-debug">
<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>
<div class="gh-setting-header">Publish button</div>
<div class="gh-setting">
<div class="gh-publishmenu">
<div class="gh-publishmenu-content">
hello
</div>
</div>
</div>
<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">
<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.854 23.146l-9.009-9.009A8.455 8.455 0 0 0 17 8.5C17 3.813 13.187 0 8.5 0S0 3.813 0 8.5 3.813 17 8.5 17a8.45 8.45 0 0 0 5.637-2.156l9.009 9.009a.5.5 0 1 0 .708-.707zM1 8.5C1 4.364 4.364 1 8.5 1S16 4.364 16 8.5 12.636 16 8.5 16 1 12.636 1 8.5z"></path></svg>
<input type="text" placeholder="Search for a card..." class="gh-input gh-cardmenu-search-input">
</div>
<div class="gh-cardmenu-divider">
Primary
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.979 22.5l-7-20.5L2 22.5m2.383-7h9.207M.5 22.5h3.021m10.958 0H17.5m5.001 0L17.903 9.035l-2.36 6.932M16.92 17.5h3.768m.828 5H23.5" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none"></path></svg></div>
<div class="gh-cardmenu-label">Text</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon"><svg viewBox="0 0 43 34" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><rect stroke="#000" stroke-width="2" x="2" y="2" width="39" height="30" rx="2"></rect><path fill="#000" d="M19.566 12.613l-.049-.01L14.917 24h-1.279l-4.6-11.387-.048.01.195 5.752v4.121l1.592.274V24H5.669v-1.23l1.592-.274V11.295L5.67 11.02v-1.24h4.053l4.531 11.553h.059l4.521-11.553h4.063v1.24l-1.592.274v11.201l1.592.274V24h-5.107v-1.23l1.591-.274v-4.121z"></path><path d="M36.077 18.501l-5.039 5.039L26 18.5m5.038 5.039v-13.1" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg></div>
<div class="gh-cardmenu-label">Markdown</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon"><svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 18.5v-17a.5.5 0 0 0-.5-.5h-17a.5.5 0 0 0-.5.5v17a.5.5 0 0 0 .5.5h17a.5.5 0 0 0 .5-.5zM18 2v13h-2.161l-2.874-7.186a.5.5 0 0 0-.453-.314.529.529 0 0 0-.467.293l-2.17 4.775-1.99-2.389a.502.502 0 0 0-.813.063L4.217 15H2V2h16zm-3.238 13H5.383l2.183-3.639 2.049 2.46a.5.5 0 0 0 .839-.114l2.016-4.434L14.762 15zM2 18v-2h16v2H2zM22.884 7.242a.5.5 0 0 0-.339-.178l-1.992-.181a.5.5 0 0 0-.09.996l1.494.135-1.272 13.942-14.44-1.317a.502.502 0 0 0-.09.997l14.937 1.363.045.001a.501.501 0 0 0 .498-.455l1.363-14.939a.497.497 0 0 0-.114-.364zM6 8c1.103 0 2-.897 2-2s-.897-2-2-2-2 .897-2 2 .897 2 2 2zm0-3c.551 0 1 .449 1 1s-.449 1-1 1-1-.449-1-1 .449-1 1-1z"></path></svg></div>
<div class="gh-cardmenu-label">Image</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon"><svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.354 3.147a.5.5 0 0 0-.707 0l-8.5 8.5a.5.5 0 0 0 0 .707l8.5 8.5a.498.498 0 0 0 .707 0 .5.5 0 0 0 0-.707L1.207 12l8.147-8.146a.5.5 0 0 0 0-.707zm14.5 8.499l-8.5-8.5a.5.5 0 0 0-.707.707L22.793 12l-8.146 8.146a.5.5 0 0 0 .707.708l8.5-8.5a.502.502 0 0 0 0-.708z"></path></svg></div>
<div class="gh-cardmenu-label">Embed</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon"><svg viewBox="0 0 42 4" xmlns="http://www.w3.org/2000/svg"><path d="M1 2h40" stroke="#000" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="square"></path></svg></div>
<div class="gh-cardmenu-label">Divider</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon"><svg xmlns="http://www.w3.org/2000/svg" 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"></circle><path d="M8.569 4.428H23.5"></path><circle cx="2.5" cy="12.5" r="2"></circle><path d="M8.569 12.428H23.5"></path><circle cx="2.5" cy="20.5" r="2"></circle><path d="M8.569 20.427H23.5"></path></g></svg></div>
<div class="gh-cardmenu-label">Bullet list</div>
</div>
<div class="gh-cardmenu-card">
<div class="gh-cardmenu-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.5 4.5h17m-17 8h17m-17 8h17M2 6.5V2.573L.5 4.037M2.569 14.5H.5c1.48-2 2-1.836 2-2.963a.986.986 0 0 0-1-.982.948.948 0 0 0-.965.974M.5 18.5h1.931l-1 1.537c.826 0 1 .481 1 .981s-.174.982-1 .982H.5" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none"></path></svg></div>
<div class="gh-cardmenu-label">Number list</div>
</div>
</div>
</div>
<div class="gh-setting-header">Migration options</div>
<div class="gh-setting">
<div class="gh-setting-content">
<div class="gh-setting-title">Import content</div>
<div class="gh-setting-desc">Import posts from another Ghost installation</div>
<!---->
</div>
<div class="gh-setting-action">
<form id="settings-import" enctype="multipart/form-data">
<div id="importfile" class="flex ember-view"><input data-url="upload" type="file" name="importfile" accept="application/json,application/zip,application/x-zip-compressed" class="gh-input gh-input-file q">
<button id="startupload" type="submit" disabled="" class="gh-btn gh-btn-hover-blue" data-ember-action="" data-ember-action-1391="1391">
<span>Import</span>
</button>
</div>
</form>
</div>
</div>
<div class="gh-setting">
<div class="gh-setting-content">
<div class="gh-setting-title">Export your content</div>
<div class="gh-setting-desc">Download all of your posts and settings in a single, glorious JSON file</div>
</div>
<div class="gh-setting-action">
<button type="button" class="gh-btn gh-btn-hover-blue" data-ember-action="" data-ember-action-1392="1392"><span>Export</span></button>
</div>
</div>
<div class="gh-setting">
<div class="gh-setting-content">
<div class="gh-setting-title">Delete all content</div>
<div class="gh-setting-desc">Permanently delete all posts and tags from the database, a hard reset</div>
</div>
<div class="gh-setting-action">
<button type="button" class="gh-btn gh-btn-hover-red js-delete" data-ember-action="" data-ember-action-1393="1393"><span>Delete</span></button>
</div>
</div>
<div class="gh-setting-header">Testing tools</div>
<div class="gh-setting">
<div class="gh-setting-content">
<div class="gh-setting-title">Test email configuration</div>
<div class="gh-setting-desc">Send yourself a test email to make sure everything is working</div>
</div>
<div class="gh-setting-action">
<button id="sendtestemail" class="gh-btn gh-btn-hover-blue ember-view"> <span>Send</span>
</button>
</div>
</div>
<div class="gh-setting-header">Beta features</div>
<div class="gh-setting">
<div class="gh-setting-content">
<div class="gh-setting-title">Public API</div>
<div class="gh-setting-desc">For full instructions, read the <a href="http://support.ghost.org/public-api-beta/">developer guide</a></div>
</div>
<div class="gh-setting-action">
<div class="for-checkbox"><label for="labs-publicAPI" id="ember1399" class="checkbox ember-view"><input paramchecked="" name="labs[publicAPI]" id="labs-publicAPI" type="checkbox" value="" class="ember-view">
<span class="input-toggle-component"></span>
</label></div>
</div>
</div>
<div class="gh-setting">
<div class="gh-setting-content">
<div class="gh-setting-title">Night shift</div>
<div class="gh-setting-desc">Swap Ghost admin's colours to a dark background which is easy on the eyes</div>
</div>
<div class="gh-setting-action">
<div class="for-checkbox"><label for="labs-nightShift" id="ember1412" class="checkbox ember-view"><input name="labs[nightShift]" id="labs-nightShift" type="checkbox" value="" class="ember-view">
<span class="input-toggle-component"></span>
</label></div>
</div>
</div>
<div class="gh-setting">
<div class="gh-setting-content">
<div class="gh-setting-title">Subscribers</div>
<div class="gh-setting-desc">Collect email addresses from your readers, more info in <a href="http://support.ghost.org/subscribers-beta/">the docs</a></div>
</div>
<div class="gh-setting-action">
<div class="for-checkbox"><label for="labs-subscribers" id="ember1414" class="checkbox ember-view"><input name="labs[subscribers]" id="labs-subscribers" type="checkbox" value="" class="ember-view">
<span class="input-toggle-component"></span>
</label></div>
</div>
</div>
</section>
</section>
<!---->
</main>
<aside id="ember1316" class="gh-notifications ember-view"><!----></aside>
<div id="ember1319" class="content-cover ember-view"></div>
<!---->
<nav id="ember1322" class="gh-mobile-nav-bar ember-view"><a href="/ghost/editor/" id="ember1323" class="gh-nav-main-editor ember-view"><i class="icon-pen"></i>New story</a>
<a href="/ghost/" id="ember1324" class="gh-nav-main-content ember-view"><i class="icon-content"></i>Content</a>
<a href="/ghost/team/" id="ember1325" class="gh-nav-main-users ember-view"><i class="icon-team"></i>Team</a>
<div class="gh-mobile-nav-bar-more" data-ember-action="" data-ember-action-1326="1326"><i class="icon-gh"></i>More</div>
</nav>
</div>
</div>
<!---->
<div id="ember1329" class="ember-view">
</div>
</div></body></html>

View File

@ -6,6 +6,65 @@
<section class="view-container settings-debug">
<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: Publish Button Template --}}
<div class="gh-setting-header">Publish button</div>
<div class="gh-setting">
<div class="gh-publishmenu">
<a class="gh-btn gh-btn-outline gh-publishmenu-trigger" href="#"><span>Publish <i class="icon-arrow"></i></span></a>
<section class="gh-publishmenu-dropdown">
<header class="gh-publishmenu-heading">Ready to publish your post?</header>
<section class="gh-publishmenu-content">
<div class="gh-publishmenu-radio active">
<div class="gh-publishmenu-radio-button"></div>
<div class="gh-publishmenu-radio-content">
<div class="gh-publishmenu-radio-label">Set it live now</div>
<div class="gh-publishmenu-radio-desc">Publish this post immediately</div>
</div>
</div>
<div class="gh-publishmenu-radio">
<div class="gh-publishmenu-radio-button"></div>
<div class="gh-publishmenu-radio-content">
<div class="gh-publishmenu-radio-label">Schedule it for later</div>
<div class="gh-publishmenu-schedule">
<div class="gh-publishmenu-schedule-date">
<input type="text" value="09/03/2017" />
{{inline-svg "calendar"}}
</div>
<div class="gh-publishmenu-schedule-time">
<input type="text" value="14:39" />
<small class="gh-publishmenu-schedule-timezone">(UTC+11)</small>
</div>
</div>
<div class="gh-publishmenu-radio-desc">Set automatic future publish date</div>
</div>
</div>
</section>
<footer class="gh-publishmenu-footer">
<button class="gh-btn gh-btn-outline gh-btn-link"><span>Cancel</span></button>
<button class="gh-btn gh-btn-blue gh-publishmenu-button"><span>Publish</span></button>
</footer>
</section>
</div>
</div>
<br>{{!-- gratuitous spacer - delete me --}}
<br>{{!-- gratuitous spacer - delete me --}}
<br>{{!-- gratuitous spacer - delete me --}}
<br>{{!-- gratuitous spacer - delete me --}}
<br>{{!-- gratuitous spacer - delete me --}}
<br>{{!-- gratuitous spacer - delete me --}}
<br>{{!-- gratuitous spacer - delete me --}}
<br>{{!-- gratuitous spacer - delete me --}}
<br>{{!-- gratuitous spacer - delete me --}}
<br>{{!-- gratuitous spacer - delete me --}}
<br>{{!-- gratuitous spacer - delete me --}}
<br>{{!-- gratuitous spacer - delete me --}}
<br>{{!-- gratuitous spacer - delete me --}}
<br>{{!-- gratuitous spacer - delete me --}}
<br>{{!-- gratuitous spacer - delete me --}}
{{!-- START: Card Menu Template --}}
<div class="gh-setting-header">Card menu</div>
<div class="gh-setting">