From 8a24afa99764775e42ab4d9762d8b0fad409521f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= Date: Thu, 23 Jun 2016 12:49:27 +0200 Subject: [PATCH] Wiki nav redesign --- app/coffee/modules/wiki/nav.coffee | 69 ++++++++-------- app/locales/taiga/locale-en.json | 6 +- app/partials/wiki/wiki-list.jade | 10 +-- app/partials/wiki/wiki-nav.jade | 87 ++++++++++---------- app/partials/wiki/wiki.jade | 16 ++-- app/styles/modules/wiki/wiki-nav.scss | 112 +++++++++++++++++--------- 6 files changed, 165 insertions(+), 135 deletions(-) diff --git a/app/coffee/modules/wiki/nav.coffee b/app/coffee/modules/wiki/nav.coffee index 53fc3d3d..40c7bbd7 100644 --- a/app/coffee/modules/wiki/nav.coffee +++ b/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() diff --git a/app/locales/taiga/locale-en.json b/app/locales/taiga/locale-en.json index 649b5508..83b897de 100644 --- a/app/locales/taiga/locale-en.json +++ b/app/locales/taiga/locale-en.json @@ -1460,9 +1460,9 @@ "DELETE_LINK_TITLE": "Delete Wiki link", "NAVIGATION": { "HOME": "Main Page", - "SECTION_NAME": "Links", - "ACTION_ADD_LINK": "Add link", - "ALL_PAGES": "All pages" + "SECTION_NAME": "BOOKMARKS", + "ACTION_ADD_LINK": "Add bookmark", + "ALL_PAGES": "All wiki pages" }, "SUMMARY": { "TIMES_EDITED": "times
edited", diff --git a/app/partials/wiki/wiki-list.jade b/app/partials/wiki/wiki-list.jade index 284b57e9..413e694d 100644 --- a/app/partials/wiki/wiki-list.jade +++ b/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") - section.wiki-nav( - tg-wiki-nav - ng-model="wikiLinks" - ) + sidebar.menu-secondary.extrabar.wiki-nav( + ng-if="linksVisible" + tg-wiki-nav + ng-model="wikiLinks" + ) section.main.wiki header h1 diff --git a/app/partials/wiki/wiki-nav.jade b/app/partials/wiki/wiki-nav.jade index 20b9c680..93aa3e0d 100644 --- a/app/partials/wiki/wiki-nav.jade +++ b/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 - 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 - li.wiki-link( - ng-repeat="link in wikiLinks" - data-id!="{{ $index }}" - tg-bind-scope - tg-class-permission="{'is-sortable': 'add_wiki_link'}" +ul.wiki-link-container + li.wiki-link.fixed-link + a.link-title( + href="" + tg-nav="project-wiki:project=project.slug" + translate="WIKI.NAVIGATION.HOME" ) - <% if (addWikiLinkPermission) { %> - tg-svg.dragger(svg-icon="icon-drag") - <% } %> - a.link-title(title!="{{ link.title }}", href!="{{ link.url }}") {{ link.title }} - <% if (deleteWikiLinkPermission) { %> - a.js-delete-link.remove-wiki-page(title!="{{'WIKI.DELETE_LINK_TITLE' | translate}}") - tg-svg(svg-icon="icon-trash") - <% } %> +ul.sortable.wiki-link-container + 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 }} - input.hidden( - type="text" - placeholder="{{'COMMON.FIELDS.NAME' | translate}}" - value!="{{ link.title }}" - ) + <% if (deleteWikiLinkPermission) { %> + a.js-delete-link.remove-wiki-page(title!="{{'WIKI.DELETE_LINK_TITLE' | translate}}") + tg-svg(svg-icon="icon-trash") + <% } %> - li.new.hidden - input( - type="text" - placeholder="{{'COMMON.FIELDS.NAME' | translate}}" - ) + input.hidden( + type="text" + 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" + ) diff --git a/app/partials/wiki/wiki.jade b/app/partials/wiki/wiki.jade index 4435b495..ab482e0d 100644 --- a/app/partials/wiki/wiki.jade +++ b/app/partials/wiki/wiki.jade @@ -1,13 +1,15 @@ doctype html -div.wrapper(ng-controller="WikiDetailController as ctrl", - ng-init="section='wiki'") +div.wrapper( + ng-controller="WikiDetailController as ctrl" + ng-init="section='wiki'" +) tg-project-menu - sidebar.menu-secondary.extrabar(ng-if="linksVisible") - section.wiki-nav( - tg-wiki-nav - ng-model="wikiLinks" - ) + sidebar.menu-secondary.extrabar.wiki-nav( + ng-if="linksVisible" + tg-wiki-nav + ng-model="wikiLinks" + ) section.main.wiki header h1 diff --git a/app/styles/modules/wiki/wiki-nav.scss b/app/styles/modules/wiki/wiki-nav.scss index d7778923..ca0a521d 100644 --- a/app/styles/modules/wiki/wiki-nav.scss +++ b/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; - text-transform: uppercase; + margin-left: 2rem; + 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%; - } }