Wiki nav redesign

app/coffee/modules/wiki/nav.coffee

@@ -39,48 +39,15 @@ WikiNavDirective = ($tgrepo, $log, $location, $confirm, $analytics, $loading, $t
                     $compile, $translate) ->
     template = $template.get("wiki/wiki-nav.html", true)
 
-    linkDragAndDrop = ($scope, $el, $attrs) ->
-        oldParentScope = null
-        newParentScope = null
-        itemEl = null
-        tdom = $el.find(".sortable")
-
-        addWikiLinkPermission = $scope.project.my_permissions.indexOf("add_wiki_link") > -1
-
-        if addWikiLinkPermission
-            drake = dragula([tdom[0]], {
-                direction: 'vertical',
-                copySortSource: false,
-                copy: false,
-                mirrorContainer: tdom[0],
-                moves: (item) -> return $(item).is('li')
-            })
-
-            drake.on 'dragend', (item) ->
-                itemEl = $(item)
-                item = itemEl.scope().link
-                itemIndex = itemEl.index()
-                $scope.$emit("wiki:links:move", item, itemIndex)
-
-            scroll = autoScroll(window, {
-                margin: 20,
-                pixels: 30,
-                scrollWhenOutside: true,
-                autoScroll: () ->
-                    return this.down && drake.dragging;
-            })
-
-        $scope.$on "$destroy", ->
-            $el.off()
-            if addWikiLinkPermission
-                drake.destroy()
-
     linkWikiLinks = ($scope, $el, $attrs) ->
         $ctrl = $el.controller()
 
         if not $attrs.ngModel?
             return $log.error "WikiNavDirective: no ng-model attr is defined"
 
+        addWikiLinkPermission = $scope.project.my_permissions.indexOf("add_wiki_link") > -1
+        drake = null
+
         render = (wikiLinks) ->
             addWikiLinkPermission = $scope.project.my_permissions.indexOf("add_wiki_link") > -1
             deleteWikiLinkPermission = $scope.project.my_permissions.indexOf("delete_wiki_link") > -1
@@ -95,8 +62,37 @@ WikiNavDirective = ($tgrepo, $log, $location, $confirm, $analytics, $loading, $t
             html = $compile(html)($scope)
 
             $el.off()
+            if addWikiLinkPermission and drake
+                drake.destroy()
+
             $el.html(html)
 
+            if addWikiLinkPermission
+                itemEl = null
+                tdom = $el.find(".sortable")
+
+                drake = dragula([tdom[0]], {
+                    direction: 'vertical',
+                    copySortSource: false,
+                    copy: false,
+                    mirrorContainer: tdom[0],
+                    moves: (item) -> return $(item).is('li')
+                })
+
+                drake.on 'dragend', (item) ->
+                    itemEl = $(item)
+                    item = itemEl.scope().link
+                    itemIndex = itemEl.index()
+                    $scope.$emit("wiki:links:move", item, itemIndex)
+
+                scroll = autoScroll(window, {
+                    margin: 20,
+                    pixels: 30,
+                    scrollWhenOutside: true,
+                    autoScroll: () ->
+                        return this.down && drake.dragging;
+                })
+
             $el.on "click", ".add-button", (event) ->
                 event.preventDefault()
                 $el.find(".new").removeClass("hidden")
@@ -171,7 +167,6 @@ WikiNavDirective = ($tgrepo, $log, $location, $confirm, $analytics, $loading, $t
 
     link = ($scope, $el, $attrs) ->
         linkWikiLinks($scope, $el, $attrs)
-        linkDragAndDrop($scope, $el, $attrs)
 
         $scope.$on "$destroy", ->
             $el.off()

app/locales/taiga/locale-en.json

@@ -1460,9 +1460,9 @@
         "DELETE_LINK_TITLE": "Delete Wiki link",
         "NAVIGATION": {
             "HOME": "Main Page",
-            "SECTION_NAME": "Links",
+            "SECTION_NAME": "BOOKMARKS",
-            "ACTION_ADD_LINK": "Add link",
+            "ACTION_ADD_LINK": "Add bookmark",
-            "ALL_PAGES": "All pages"
+            "ALL_PAGES": "All wiki pages"
         },
         "SUMMARY": {
             "TIMES_EDITED": "times <br />edited",

app/partials/wiki/wiki-list.jade

@@ -5,11 +5,11 @@ div.wrapper(
     ng-init="section='wiki'"
 )
     tg-project-menu
-    sidebar.menu-secondary.extrabar(ng-if="linksVisible")
+    sidebar.menu-secondary.extrabar.wiki-nav(
-        section.wiki-nav(
+        ng-if="linksVisible"
-            tg-wiki-nav
+        tg-wiki-nav
-            ng-model="wikiLinks"
+        ng-model="wikiLinks"
-        )
+    )
     section.main.wiki
         header
             h1

app/partials/wiki/wiki-nav.jade

@@ -1,56 +1,57 @@
 header
-    h1(translate="WIKI.NAVIGATION.SECTION_NAME")
+    h1.title(translate="WIKI.NAVIGATION.SECTION_NAME")
 
-nav
+ul.wiki-link-container
-    ul
+    li.wiki-link.fixed-link
-        li.wiki-link
+        a.link-title(
-            a.link-title(
+            href=""
-                href=""
+            tg-nav="project-wiki:project=project.slug"
-                tg-nav="project-wiki-list:project=project.slug"
+            translate="WIKI.NAVIGATION.HOME"
-                translate="WIKI.NAVIGATION.ALL_PAGES"
-            )
-
-        li.wiki-link
-            a.link-title(
-                href=""
-                tg-nav="project-wiki:project=project.slug"
-                translate="WIKI.NAVIGATION.HOME"
-            )
-
-    ul.sortable
-        li.wiki-link(
-            ng-repeat="link in wikiLinks"
-            data-id!="{{ $index }}"
-            tg-bind-scope
-            tg-class-permission="{'is-sortable': 'add_wiki_link'}"
         )
-            <% if (addWikiLinkPermission) { %>
-            tg-svg.dragger(svg-icon="icon-drag")
-            <% } %>
-            a.link-title(title!="{{ link.title }}", href!="{{ link.url }}") {{ link.title }}
 
-            <% if (deleteWikiLinkPermission) { %>
+ul.sortable.wiki-link-container
-            a.js-delete-link.remove-wiki-page(title!="{{'WIKI.DELETE_LINK_TITLE' | translate}}")
+    li.wiki-link(
-                tg-svg(svg-icon="icon-trash")
+        ng-repeat="link in wikiLinks"
-            <% } %>
+        data-id!="{{ $index }}"
+        tg-bind-scope
+        tg-class-permission="{'is-sortable': 'add_wiki_link'}"
+    )
+        <% if (addWikiLinkPermission) { %>
+        tg-svg.dragger(svg-icon="icon-drag")
+        <% } %>
+        a.link-title(title!="{{ link.title }}", href!="{{ link.url }}") {{ link.title }}
 
-            input.hidden(
+        <% if (deleteWikiLinkPermission) { %>
-                type="text"
+        a.js-delete-link.remove-wiki-page(title!="{{'WIKI.DELETE_LINK_TITLE' | translate}}")
-                placeholder="{{'COMMON.FIELDS.NAME' | translate}}"
+            tg-svg(svg-icon="icon-trash")
-                value!="{{ link.title }}"
+        <% } %>
-            )
 
-        li.new.hidden
+        input.hidden(
-            input(
+            type="text"
-                type="text"
+            placeholder="{{'COMMON.FIELDS.NAME' | translate}}"
-                placeholder="{{'COMMON.FIELDS.NAME' | translate}}"
+            value!="{{ link.title }}"
-            )
+        )
+
+ul.sortable.wiki-link-container
+    li.new.hidden
+        input(
+            type="text"
+            placeholder="{{'COMMON.FIELDS.NAME' | translate}}"
+        )
 
 <% if (addWikiLinkPermission) { %>
-a(
+a.add-button(
     href=""
     title="{{'WIKI.NAVIGATION.ACTION_ADD_LINK' | translate}}"
-    class="add-button button-gray"
 )
+    tg-svg(svg-icon="icon-add")
     span(translate="WIKI.NAVIGATION.ACTION_ADD_LINK")
 <% } %>
+
+ul.wiki-link-container.wiki-all-links
+    li.wiki-link.fixed-link
+        a.link-title(
+            href=""
+            tg-nav="project-wiki-list:project=project.slug"
+            translate="WIKI.NAVIGATION.ALL_PAGES"
+        )

app/partials/wiki/wiki.jade

@@ -1,13 +1,15 @@
 doctype html
 
-div.wrapper(ng-controller="WikiDetailController as ctrl",
+div.wrapper(
-            ng-init="section='wiki'")
+    ng-controller="WikiDetailController as ctrl"
+    ng-init="section='wiki'"
+)
     tg-project-menu
-    sidebar.menu-secondary.extrabar(ng-if="linksVisible")
+    sidebar.menu-secondary.extrabar.wiki-nav(
-        section.wiki-nav(
+        ng-if="linksVisible"
-            tg-wiki-nav
+        tg-wiki-nav
-            ng-model="wikiLinks"
+        ng-model="wikiLinks"
-        )
+    )
     section.main.wiki
         header
             h1

app/styles/modules/wiki/wiki-nav.scss

@@ -1,34 +1,97 @@
+.wiki-nav {
+    padding: 0;
+    width: 240px;
+    .title {
+        @include font-size(larger);
+        padding: 2rem 1rem 0 2rem;
+    }
+    .add-button {
+        align-items: center;
+        display: flex;
+        padding: 1rem 1rem 1rem 2rem;
+        text-transform: uppercase;
+        vertical-align: middle;
+        &:hover {
+            svg {
+                background: $primary-light;
+            }
+        }
+        svg {
+            @include svg-size(1.25rem);
+            background: $gray-light;
+            border-radius: 2px;
+            fill: $white;
+            margin-right: .5rem;
+            padding: .25rem;
+            transition: background .2s linear;
+        }
+    }
+    .wiki-link-container {
+        margin: 0;
+        &.wiki-all-links {
+            border-top: 1px solid $gray-light;
+        }
+    }
+    input[type="text"] {
+        background: $whitish;
+        color: $grayer;
+        margin: 1rem 1rem 1rem 2rem;
+        width: 80%;
+        @include placeholder {
+            color: $gray-light;
+        }
+    }
+    .loading {
+        padding: 1rem;
+        text-align: center;
+    }
+}
 .wiki-link {
-    @include font-type(text);
     align-items: center;
-    border-bottom: 1px solid $gray-light;
+    border-bottom: 1px solid $whitish;
     display: flex;
     justify-content: space-between;
-    padding: 1rem 0;
+    margin-left: 2rem;
-    text-transform: uppercase;
+    padding-right: 1rem;
+    position: relative;
     &:hover {
         .remove-wiki-page {
             cursor: pointer;
             opacity: 1;
             transition: opacity .2s linear;
-            transition-delay: .2s;
+            transition-delay: .1s;
         }
         .dragger {
             cursor: move;
-            fill: $gray-light;
             opacity: 1;
             transition: opacity .2s linear;
-            transition-delay: .2s;
+            transition-delay: .1s;
         }
     }
+    &.gu-mirror {
+        border-bottom: 0;
+    }
+    &.fixed-link {
+        @include font-size(large);
+        text-transform: uppercase;
+    }
     &.is-sortable {
         cursor: move;
     }
+    .link-title {
+        cursor: pointer;
+        display: block;
+        flex-grow: 1;
+        padding: 1rem 0;
+    }
     .dragger {
-        margin-right: .5rem;
+        fill: $gray-light;
+        left: -1rem;
         opacity: 0;
+        position: absolute;
+        top: 1rem;
         svg {
-            @include svg-size(.9rem);
+            @include svg-size(.7rem);
         }
     }
     .remove-wiki-page {
@@ -39,35 +102,4 @@
             }
         }
     }
-    .link-title {
-        cursor: pointer;
-        flex-grow: 1;
-    }
-    .icon-trash {
-        fill: $gray-light;
-    }
-}
-
-.wiki-nav {
-    .add-button {
-        color: $white;
-        display: block;
-        margin-bottom: .5rem;
-        text-align: center;
-    }
-    input[type="text"] {
-        @include font-type(text);
-        @include font-size(medium);
-        background: $grayer;
-        color: $whitish;
-        @include placeholder {
-            color: $gray-light;
-        }
-    }
-    .loading {
-        margin: 0;
-        padding: 8px;
-        text-align: center;
-        width: 100%;
-    }
 }