Merge pull request #1056 from taigaio/enhancement/wiki_links

Wiki nav redesign

app/coffee/modules/wiki/nav.coffee

@@ -39,15 +39,38 @@ WikiNavDirective = ($tgrepo, $log, $location, $confirm, $analytics, $loading, $t
                     $compile, $translate) ->
     template = $template.get("wiki/wiki-nav.html", true)
 
-    linkDragAndDrop = ($scope, $el, $attrs) ->
+    linkWikiLinks = ($scope, $el, $attrs) ->
-        oldParentScope = null
+        $ctrl = $el.controller()
-        newParentScope = null
+
+        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
+
+            html = template({
+                wikiLinks: wikiLinks,
+                projectSlug: $scope.projectSlug
+                addWikiLinkPermission: addWikiLinkPermission
+                deleteWikiLinkPermission: deleteWikiLinkPermission
+            })
+
+            html = $compile(html)($scope)
+
+            $el.off()
+            if addWikiLinkPermission and drake
+                drake.destroy()
+
+            $el.html(html)
+
+            if addWikiLinkPermission
                 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,
@@ -70,33 +93,6 @@ WikiNavDirective = ($tgrepo, $log, $location, $confirm, $analytics, $loading, $t
                         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"
-
-        render = (wikiLinks) ->
-            addWikiLinkPermission = $scope.project.my_permissions.indexOf("add_wiki_link") > -1
-            deleteWikiLinkPermission = $scope.project.my_permissions.indexOf("delete_wiki_link") > -1
-
-            html = template({
-                wikiLinks: wikiLinks,
-                projectSlug: $scope.projectSlug
-                addWikiLinkPermission: addWikiLinkPermission
-                deleteWikiLinkPermission: deleteWikiLinkPermission
-            })
-
-            html = $compile(html)($scope)
-
-            $el.off()
-            $el.html(html)
-
             $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,8 +5,8 @@ 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
         ng-model="wikiLinks"
     )

app/partials/wiki/wiki-nav.jade

@@ -1,23 +1,15 @@
 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(
-                href=""
-                tg-nav="project-wiki-list:project=project.slug"
-                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
+ul.sortable.wiki-link-container
     li.wiki-link(
         ng-repeat="link in wikiLinks"
         data-id!="{{ $index }}"
@@ -40,6 +32,7 @@ nav
             value!="{{ link.title }}"
         )
 
+ul.sortable.wiki-link-container
     li.new.hidden
         input(
             type="text"
@@ -47,10 +40,18 @@ nav
         )
 
 <% 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,10 +1,12 @@
 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
         ng-model="wikiLinks"
     )

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

@@ -1,34 +1,97 @@
-.wiki-link {
+.wiki-nav {
-    @include font-type(text);
+    padding: 0;
+    width: 240px;
+    .title {
+        @include font-size(larger);
+        padding: 2rem 1rem 0 2rem;
+    }
+    .add-button {
         align-items: center;
-    border-bottom: 1px solid $gray-light;
+        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 {
+    align-items: center;
+    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%;
-    }
 }