From d999ce555d86253db6a6f37a816b76ecb534f690 Mon Sep 17 00:00:00 2001
From: Paul Adam Davis <pauladamdavis@gmail.com>
Date: Tue, 30 Sep 2014 16:24:21 +0100
Subject: [PATCH] Custom permalink UI
References #3920
---
core/client/assets/sass/layouts/settings.scss | 93 ++++++++
core/client/assets/sass/patterns/forms.scss | 1 +
core/client/html/permalinks.html | 214 ++++++++++++++++++
3 files changed, 308 insertions(+)
create mode 100644 core/client/html/permalinks.html
diff --git a/core/client/assets/sass/layouts/settings.scss b/core/client/assets/sass/layouts/settings.scss
index 627adf91f3..83c45ce960 100644
--- a/core/client/assets/sass/layouts/settings.scss
+++ b/core/client/assets/sass/layouts/settings.scss
@@ -335,3 +335,96 @@
}
}
}
+
+
+
+// Custom permalink
+.permalink-input-wrapper {
+ position: relative;
+ outline: 0; // Kills the blue outline we get by adding tabindex="0"
+ padding-top: 6px;
+ padding-bottom: 6px;
+
+ &:focus,
+ &.focus {
+ border-color: $brown;
+
+ // The button-looking thing that opens a popover
+ .permalink-help {
+ border-color: $brown;
+ }
+ }
+
+ // A div that _looks_ like an input, but is a div
+ .permalink-fake-input {
+ display: flex;
+ flex-wrap: wrap;
+ margin-right: 26px;
+ }
+
+ .permalink-domain {
+ padding-right: 3px;
+ color: #7E878B;
+ }
+
+ // A collection of labels showing the URL structure
+ .permalink-structure {
+
+ .permalink-parameter {
+ position: relative;
+ top: -2px;
+ margin-left: 6px;
+
+ // The slash before each parameter
+ &:before {
+ content: "/";
+ position: absolute;
+ top: 4px;
+ left: -8px;
+ font-size: 1.4rem;
+ color: #7E878B;
+ }
+ }
+ }
+
+ // The actual input, which resets some styles inherited from the global input style
+ .permalink-input {
+ flex: 1 0;
+ margin: -6px 0 -6px -2px;
+ padding: 0 4px;
+ background: transparent;
+ min-width: 60px;
+ min-height: 30px;
+ border: 0;
+ }
+
+ // Shove the popover button and its container over to the right
+ .popover,
+ .permalink-help {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ width: 36px;
+ }
+
+ // Simple styles for the popover button-looking thing
+ .permalink-help {
+ border-left: 1px solid #E0DFD7;
+ transition: border-color 0.15s linear;
+
+ &:before {
+ color: #E0DFD7;
+ transition: color 0.15s linear;
+ }
+
+ &:hover:before {
+ color: $brown;
+ }
+ }
+
+ // Shift the popover (than opens over the top of everything) to the left a bit
+ .popover-item {
+ margin-left: -5px;
+ }
+}//.permalink-input-wrapper
\ No newline at end of file
diff --git a/core/client/assets/sass/patterns/forms.scss b/core/client/assets/sass/patterns/forms.scss
index aada4e7c6e..0c5ff86044 100644
--- a/core/client/assets/sass/patterns/forms.scss
+++ b/core/client/assets/sass/patterns/forms.scss
@@ -135,6 +135,7 @@ legend {
// Input, textarea & select
+.input,
input[type="email"],
input[type="number"],
input[type="password"],
diff --git a/core/client/html/permalinks.html b/core/client/html/permalinks.html
new file mode 100644
index 0000000000..20d50f2a68
--- /dev/null
+++ b/core/client/html/permalinks.html
@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <title>Permalinks</title>
+ <link rel="stylesheet" href="../assets/css/ghost.min.css">
+
+ <!-- Styles not needed for this. Just to get around various bits that Ember handles for us. -->
+ <style>
+ @media (max-width: 900px) {
+ .settings-nav {
+ top: 0;
+ left: -100%;
+ }
+ .settings-content {
+ margin-left: 0;
+ }
+ }
+ </style>
+</head>
+
+<body class="ember-application settings settings-view-general" data-apps="false" data-filestorage="true" data-blogurl="http://127.0.0.1:2368">
+
+ <div id="container"><a class="sr-only sr-only-focusable" href="#gh-main">Skip to main content</a>
+
+ <nav class="global-nav" role="navigation">
+
+ <a class="nav-item ghost-logo" href="/" title="/">
+ <div class="nav-label"><i class="icon-ghost"></i>
+ <span>Visit blog</span>
+ </div>
+ </a>
+
+ <a class="nav-item nav-content js-nav-item" href="/ghost/">
+ <div class="nav-label"><i class="icon-content"></i> Content</div>
+ </a>
+
+ <a class="nav-item nav-new js-nav-item" href="/ghost/editor/">
+ <div class="nav-label"><i class="icon-add"></i> New Post</div>
+ </a>
+
+
+ <a class="nav-item nav-settings js-nav-item active" href="/ghost/settings/">
+ <div class="nav-label"><i class="icon-settings2"></i> Settings</div>
+ </a>
+
+
+
+
+ <div class="nav-item user-menu" data-href="#">
+ <div class=" nav-label">
+ <div class="image">
+ <img src="../../../core/shared/img/user-image.png" alt="Paul Davis's profile picture">
+ </div>
+ <div class="name">
+ Paul Davis <i class="icon-chevron-down"></i>
+ <small>Profile & Settings</small>
+ </div>
+ </div>
+ </div>
+
+ </nav>
+
+ <div class="nav-cover js-nav-cover"></div>
+
+ <main id="gh-main" class="viewport" role="main" data-notification-count="0" data-bindattr-448="448">
+ <aside class="notifications top">
+ </aside>
+ <aside class="notifications bottom">
+ </aside>
+ <div>
+ <header class="page-header">
+ <button class="menu-button js-menu-button" data-ember-action="1221">
+ <span class="sr-only">Menu</span>
+ </button>
+ <h2 class="page-title">Settings</h2>
+ </header>
+
+ <div class="page-content">
+ <nav class="settings-nav js-settings-nav">
+ <ul>
+ <li class="settings-nav-general icon-settings active"><a class="active" href="/ghost/settings/general/">General</a>
+ </li>
+ <li class="settings-nav-users icon-users"><a href="/ghost/settings/users/">Users</a>
+ </li>
+ <li class="settings-nav-about icon-pacman"><a href="/ghost/settings/about/">About</a>
+ </li>
+ </ul>
+ </nav>
+
+ <section class="settings-content js-settings-content fade-in">
+
+ <header class="settings-view-header">
+ <a class="btn btn-default btn-back active" href="/ghost/settings/">Back</a>
+ <h2 class="page-title">General</h2>
+ <section class="page-actions">
+ <button type="button" class="btn btn-blue" data-ember-action="1271">Save</button>
+ </section>
+ </header>
+
+ <section class="content settings-general">
+ <form id="settings-general" novalidate="novalidate">
+
+ <div class="form-group">
+ <label for="blog-title">Blog Title</label>
+ <input id="blog-title" class="" type="text" name="general[title]" value="Paul Davis">
+ <p>The name of your blog</p>
+ </div>
+
+ <div class="form-group">
+ <label for="blog-logo">Blog Logo</label>
+ <button type="button" class="btn btn-green js-modal-logo" data-ember-action="1277">Upload Image</button>
+ <p>Display a sexy logo for your publication</p>
+ </div>
+
+ <fieldset>
+
+ <div class="form-group">
+ <label for="postsPerPage">Posts per page</label>
+ <input id="postsPerPage" class="" type="number" name="general[postsPerPage]" min="1" max="1000" value="5">
+ <p>How many posts should be displayed on each page</p>
+ </div>
+
+ <div class="form-group">
+ <label for="blog-permalinks">Permalinks</label>
+ <label class="permalink-input-wrapper input" tabindex="0">
+
+ <div class="permalink-fake-input">
+ <span class="permalink-domain">http://myblog.ghost.io</span>
+ <span class="permalink-structure">
+ <span class="permalink-parameter label label-default">journal</span>
+ <span class="permalink-parameter label label-default">year</span>
+ <span class="permalink-parameter label label-default">month</span>
+ <span class="permalink-parameter label label-default">day</span>
+ <span class="permalink-parameter label label-default">title</span>
+ </span>
+ <input id="blog-permalinks" class="permalink-input" type="text" name="general[permalinks]">
+ </div>
+
+ <div class="popover">
+ <button class="permalink-help button icon-question hover-me">
+ <span class="hidden">URL Structure Formatting</span>
+ </button>
+ <div class="popover-item closed popover-triangle-bottom">
+ <div class="popover-title">URL Structure Formatting</div>
+ <div class="popover-desc">You can use dynamic variables in this field.</div>
+ <div class="popover-body">
+ <p>
+ <b>%t</b> - The title of your post (or page)<br>
+ <b>%c</b> - The tag which your post is categorised in<br>
+ <b>%y</b> - The year your post was published<br>
+ <b>%m</b> - The month your post was published<br>
+ <b>%d</b> - The day your post was published
+ </p>
+ </div>
+ </div>
+ </div>
+
+ </label>
+ <p>The default URL structure for your blog</p>
+ </div>
+
+ <div class="form-group for-select">
+ <label for="activeTheme">Theme</label>
+ <span class="gh-select" data-bindattr-1286="1286" tabindex="0" data-select-text="Casper - 1.1.0">
+ <select id="activeTheme" class="ember-select" name="general[activeTheme]">
+ <option value="casper">Casper - 1.1.0</option>
+ <option value="hayleybrowne">HJB - 0.5</option>
+ <option value="mono">Mono - 0.1.0</option>
+ <option value="pad-gs">PAD-GS - 0.8</option>
+ <option value="pauladamdavis">PAD - 0.8</option>
+ </select>
+ </span>
+ <p>Select a theme for your blog</p>
+ </div>
+ </fieldset>
+ </form>
+ </section>
+ </section>
+ </div>
+ </div>
+ </main>
+
+ </div>
+
+</body>
+</html>
+
+<script src="../../../bower_components/jquery/dist/jquery.js"></script>
+<script>
+ $(function(){
+
+ $("#blog-permalinks").on("focus", function(){
+ $(".permalink-input-wrapper").addClass("focus");
+ $("#blog-permalinks").focus();
+ });
+ $("#blog-permalinks").on("blur", function(){
+ $(".permalink-input-wrapper").removeClass("focus");
+ });
+
+ $(".hover-me").hover(function(){
+ $(this).next(".popover-item").addClass("open fade-in").removeClass("closed fade-out");
+ }, function(){
+ $(this).next(".popover-item").removeClass("fade-in").addClass("fade-out");
+ $(this).next(".popover-item").on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function (event) {
+ if (event.originalEvent.animationName === 'fade-out') {
+ $(this).removeClass("open fade-out").addClass("closed");
+ }
+ });
+ });
+
+ });
+</script>
\ No newline at end of file