From 048e241750a989edf2e410168baad5f2bbfe1ceb Mon Sep 17 00:00:00 2001
From: Paul Adam Davis <pauladamdavis@gmail.com>
Date: Tue, 16 Dec 2014 21:52:08 +0000
Subject: [PATCH] Navigation UI Mockup

Refs #4537

Static mockup of the navigation UI

- Includes hacky JS to simulate interactions (but not dragging, which is #4540 and no modal when deleting)
- Delete & add icons have invisible padding to increase hit area
- Drag handle has the `move` cursor
- Switches into a single column at 600px and below
---
 ghost/admin/assets/sass/layouts/settings.scss | 105 ++++++++-
 ghost/admin/html/navigation.html              | 199 ++++++++++++++++++
 2 files changed, 301 insertions(+), 3 deletions(-)
 create mode 100644 ghost/admin/html/navigation.html
diff --git a/ghost/admin/assets/sass/layouts/settings.scss b/ghost/admin/assets/sass/layouts/settings.scss
index 26d35676b4..e9b083e05a 100644
--- a/ghost/admin/assets/sass/layouts/settings.scss
+++ b/ghost/admin/assets/sass/layouts/settings.scss
@@ -5,15 +5,16 @@
 // Styles for the content management page, which is where
 // the posts are listed.
 //
-// * Navigation
+// * Settings Navigation
 // * Content
 // * Headers
 // * Custom Permalinks
+// * Navigation
 // ------------------------------------------------------------
 
 
 //
-// Navigation
+// Settings Navigation
 // --------------------------------------------------
 
 .settings-nav {
@@ -380,4 +381,102 @@
         margin-left: -5px;
         min-width: 320px;
     }
-}//.permalink-input-wrapper
\ No newline at end of file
+}//.permalink-input-wrapper
+
+
+//
+// Navigation
+// --------------------------------------------------
+
+.settings-navigation {}
+
+.navigation-item {
+    display: flex;
+
+    @media (max-width: 600px) {
+        margin-bottom: 20px;
+    }
+    @media (min-width: 601px) {
+        margin-bottom: 10px;
+    }
+}
+
+.navigation-item-drag-handle {
+    padding-left: 10px;
+    padding-right: 17px;
+    width: 27px;
+    cursor: move;
+}
+
+.navigation-inputs {
+    width: 100%;
+}
+
+@media (max-width: 600px) {
+    .navigation-item-label {
+        margin-bottom: 5px;
+    }
+
+    .navigation-item-label,
+    .navigation-item-url {
+        display: block;
+        width: 100%;
+    }
+}
+
+@media (min-width: 601px) {
+    .navigation-inputs {
+        display: flex;
+    }
+
+    .navigation-item-label {
+        flex-grow: 1;
+        margin-right: 10px;
+    }
+
+    .navigation-item-url {
+        flex-grow: 3;
+    }
+}
+
+.navigation-item-action {
+    padding-left: 10px;
+    width: 40px;
+    position: relative;
+
+    button {
+        width: 30px;
+        height: 30px;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        margin-top: -2px;
+    }
+
+    .icon-trash {
+        &:before {
+            color: $midbrown;
+            font-size: 16px;
+            transition: color 0.1s linear;
+        }
+
+        &:hover:before {
+            color: $red;
+        }
+    }
+
+    .icon-add {
+        &:before {
+            background: $green;
+            color: #fff;
+            font-size: 12px;
+            padding: 3px;
+            border-radius: 2px;
+            transition: background 0.1s linear;
+        }
+
+        &:hover:before {
+            background: darken($green, 10%);
+        }
+    }
+}
\ No newline at end of file
diff --git a/ghost/admin/html/navigation.html b/ghost/admin/html/navigation.html
new file mode 100644
index 0000000000..6425e077db
--- /dev/null
+++ b/ghost/admin/html/navigation.html
@@ -0,0 +1,199 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Navigation</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"><a href="#">General</a></li>
+                            <li class="settings-nav-users icon-users"><a href="#">Users</a></li>
+                            <li class="settings-nav-about icon-pacman"><a href="#">About</a></li>
+                            <li class="settings-nav-general icon-compass active"><a class="active" href="#">Navigation</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="#">Back</a>
+                            <h2 class="page-title">Navigation</h2>
+                            <section class="page-actions">
+                                <button type="button" class="btn btn-blue">Save</button>
+                            </section>
+                        </header>
+
+                        <section class="content settings-navigation">
+                            <form id="settings-navigation" novalidate="novalidate">
+
+                                <div class="navigation-item">
+                                    <button type="button" class="navigation-item-drag-handle icon-grab">
+                                        <span class="hidden">Reorder</span>
+                                    </button>
+                                    <div class="navigation-inputs">
+                                        <span class="navigation-item-label">
+                                            <input type="text" value="Home" placeholder="Label">
+                                        </span>
+                                        <span class="navigation-item-url">
+                                            <input type="text" value="http://my-ghost-blog.com/" placeholder="http://my-ghost-blog.com/">
+                                        </span>
+                                    </div>
+                                    <span class="navigation-item-action">
+                                        <button type="button" class="js-navigation-delete icon-trash">
+                                            <span class="hidden">Delete</span>
+                                        </button>
+                                    </span>
+                                </div>
+
+                                <div class="navigation-item">
+                                    <button type="button" class="navigation-item-drag-handle icon-grab">
+                                        <span class="hidden">Reorder</span>
+                                    </button>
+                                    <div class="navigation-inputs">
+                                        <span class="navigation-item-label">
+                                            <input type="text" value="About" placeholder="Label">
+                                        </span>
+                                        <span class="navigation-item-url">
+                                            <input type="text" value="http://my-ghost-blog.com/about" placeholder="http://my-ghost-blog.com/">
+                                        </span>
+                                    </div>
+                                    <span class="navigation-item-action">
+                                        <button type="button" class="js-navigation-delete icon-trash">
+                                            <span class="hidden">Delete</span>
+                                        </button>
+                                    </span>
+                                </div>
+
+                                <div class="navigation-item">
+                                    <button type="button" class="navigation-item-drag-handle icon-grab">
+                                        <span class="hidden">Reorder</span>
+                                    </button>
+                                    <div class="navigation-inputs">
+                                        <span class="navigation-item-label">
+                                            <input type="text" placeholder="Label">
+                                        </span>
+                                        <span class="navigation-item-url">
+                                            <input type="text" placeholder="http://my-ghost-blog.com/">
+                                        </span>
+                                    </div>
+                                    <span class="navigation-item-action">
+                                        <button type="button" class="js-add-navigation-link icon-add">
+                                            <span class="hidden">Add</span>
+                                        </button>
+                                    </span>
+                                </div>
+
+                            </form>
+                        </section>
+                    </section>
+
+                </div>
+            </div>
+        </main>
+
+    </div>
+
+</body>
+
+</html>
+
+<script src="../../../bower_components/jquery/dist/jquery.js"></script>
+<script>
+$(function() {
+
+    $('.navigation-item').on('click', '.js-add-navigation-link', function(e){
+        e.preventDefault();
+
+        if ($('.navigation-item:last input').val() == '') {
+            return;
+        }
+
+        var blank_item = $('.navigation-item:last').clone(true);
+        var delete_button = $('.navigation-item:first .js-navigation-delete').clone(true);
+
+        $('#settings-navigation').append(blank_item);
+        $('.navigation-item:last input').val('');
+        $('.navigation-item:last').prev('.navigation-item').find('.js-add-navigation-link').replaceWith(delete_button);
+    });
+
+    $('.navigation-item').on('click', '.js-navigation-delete', function(e){
+        e.preventDefault();
+        $(this).parents('.navigation-item').remove();
+    });
+
+});
+</script>
