From a7e19bc23167b8c6c2b8d1e4ce99eda926c453da 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
---
 ghost/admin/assets/sass/layouts/settings.scss |  93 ++++++++
 ghost/admin/assets/sass/patterns/forms.scss   |   1 +
 ghost/admin/html/permalinks.html              | 214 ++++++++++++++++++
 3 files changed, 308 insertions(+)
 create mode 100644 ghost/admin/html/permalinks.html
diff --git a/ghost/admin/assets/sass/layouts/settings.scss b/ghost/admin/assets/sass/layouts/settings.scss
index 627adf91f3..83c45ce960 100644
--- a/ghost/admin/assets/sass/layouts/settings.scss
+++ b/ghost/admin/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/ghost/admin/assets/sass/patterns/forms.scss b/ghost/admin/assets/sass/patterns/forms.scss
index aada4e7c6e..0c5ff86044 100644
--- a/ghost/admin/assets/sass/patterns/forms.scss
+++ b/ghost/admin/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/ghost/admin/html/permalinks.html b/ghost/admin/html/permalinks.html
new file mode 100644
index 0000000000..20d50f2a68
--- /dev/null
+++ b/ghost/admin/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 &amp; 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
