From 8e81f337e497a1196cc4b31efdb23713da7ac366 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Wed, 9 Jul 2014 17:29:29 +0200 Subject: [PATCH] Refactorized project navigation menus. --- app/coffee/app.coffee | 1 + app/coffee/modules/base.coffee | 134 +------------- app/coffee/modules/nav.coffee | 167 ++++++++++++++++++ app/index.jade | 4 +- app/partials/layout.jade | 2 +- .../{project-nav.jade => projects-nav.jade} | 2 +- app/styles/layout/base.scss | 8 +- app/styles/main.scss | 2 +- .../{project-nav.scss => projects-nav.scss} | 2 +- 9 files changed, 186 insertions(+), 136 deletions(-) create mode 100644 app/coffee/modules/nav.coffee rename app/partials/views/modules/{project-nav.jade => projects-nav.jade} (92%) rename app/styles/modules/{project-nav.scss => projects-nav.scss} (98%) diff --git a/app/coffee/app.coffee b/app/coffee/app.coffee index c93bcf55..3e5dd7fc 100644 --- a/app/coffee/app.coffee +++ b/app/coffee/app.coffee @@ -94,6 +94,7 @@ modules = [ "taigaIssues", "taigaSearch", "taigaAdmin", + "taigaNavMenu", "taigaLightboxes", # Vendor modules diff --git a/app/coffee/modules/base.coffee b/app/coffee/modules/base.coffee index c02ce508..5386f76e 100644 --- a/app/coffee/modules/base.coffee +++ b/app/coffee/modules/base.coffee @@ -25,137 +25,19 @@ bindOnce = @.taiga.bindOnce module = angular.module("taigaBase", ["taigaLocales"]) - ############################################################################# -## Global Page Controller +## Main Directive ############################################################################# -class MainTaigaController extends taiga.Controller - @.$inject = ["$scope", "$tgResources"] +TaigaMainDirective = ($rootscope, $window) -> + link = ($scope, $el, $attrs) -> + console.log "MAIN KAKA" + $window.onresize = () -> + $rootscope.$broadcast("resize") - constructor: (@scope, @rs) -> - promise = @.loadInitialData() - promise.then null, -> - console.log "FAIL" - # TODO - - loadInitialData: -> - return @rs.projects.list().then (projects) => - @scope.projects = projects - return projects - -############################################################################# -## Global Page Directive -############################################################################# - -MainTaigaDirective = ($log, $compile, $rootscope) -> - template = _.template(""" -

- - Taiga - -

- -
- -
- """) - - # WARNING: this code has traces of slighty hacky parts - # This rerenders and compiles the navigation when ng-view - # content loaded signal is raised using inner scope. - renderMainMenu = ($el, targetScope) -> - container = $el.find(".master > .wrapper") - menuDom = $el.find("nav.menu") - - if menuDom.hasClass("hidden") - menuDom.removeClass("hidden") - - dom = $compile(template({}))(targetScope) - menuDom.empty() - menuDom.append(dom) - - sectionName = targetScope.section - menuDom.find("a.active").removeClass("active") - menuDom.find("#nav-#{sectionName} > a").addClass("active") - - # Link function related to projects navigation - # part of main menu. - linkProjecsNav = ($scope, $el, $attrs, $ctrl) -> - $el.on "click", ".menu .logo > a", (event) -> - event.preventDefault() - $el.toggleClass("open-project-nav") - - $el.on "click", ".projects-list > li > a", (event) -> - $el.toggleClass("open-project-nav") - - linkMenuNav = ($scope, $el, $attrs, $ctrl) -> - $scope.$on "$viewContentLoaded", (ctx) -> - if ctx.targetScope.$$childHead is null - $log.error "No scope found for render menu." - else - renderMainMenu($el, ctx.targetScope.$$childHead) - - link = ($scope, $el, $attrs, $ctrl) -> - linkProjecsNav($scope, $el, $attrs, $ctrl) - linkMenuNav($scope, $el, $attrs, $ctrl) - - window.onresize = () -> - $rootscope.$broadcast("resize") - - return { - controller: MainTaigaController - link: link - } - - -module.directive("tgMain", ["$log", "$compile", "$rootScope", MainTaigaDirective]) + return {link:link} +module.directive("tgMain", ["$rootScope", "$window", TaigaMainDirective]) ############################################################################# ## Navigation diff --git a/app/coffee/modules/nav.coffee b/app/coffee/modules/nav.coffee new file mode 100644 index 00000000..d578b521 --- /dev/null +++ b/app/coffee/modules/nav.coffee @@ -0,0 +1,167 @@ +### +# Copyright (C) 2014 Andrey Antukh +# Copyright (C) 2014 Jesús Espino Garcia +# Copyright (C) 2014 David Barragán Merino +# +# This program is free software: you can redistribute it and/or modify +# it under the terms of the GNU Affero General Public License as +# published by the Free Software Foundation, either version 3 of the +# License, or (at your option) any later version. +# +# This program is distributed in the hope that it will be useful, +# but WITHOUT ANY WARRANTY; without even the implied warranty of +# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +# GNU Affero General Public License for more details. +# +# You should have received a copy of the GNU Affero General Public License +# along with this program. If not, see . +# +# File: modules/nav.coffee +### + +taiga = @.taiga +groupBy = @.taiga.groupBy +bindOnce = @.taiga.bindOnce + +module = angular.module("taigaNavMenu", []) + +############################################################################# +## Projects Navigation +############################################################################# + +class ProjectsNavigationController extends taiga.Controller + @.$inject = ["$scope", "$tgResources"] + + constructor: (@scope, @rs) -> + promise = @.loadInitialData() + promise.then null, -> + console.log "FAIL" + # TODO + + loadInitialData: -> + return @rs.projects.list().then (projects) => + @scope.projects = projects + return projects + + +ProjectsNavigationDirective = -> + link = ($scope, $el, $attrs, $ctrl) -> + console.log "PROJECTS NAV" + + + return { + link: link + controller: ProjectsNavigationController + } + + +module.directive("tgProjectsNav", ProjectsNavigationDirective) + + +############################################################################# +## Project +############################################################################# + +ProjectMenuDirective = ($log, $compile, $rootscope) -> + menuEntriesTemplate = _.template(""" + + """) + + mainTemplate = _.template(""" +

+ + Taiga + +

+
    +
    + +
    + """) + + renderMainMenu = ($el) -> + html = mainTemplate({}) + $el.html(html) + + # WARNING: this code has traces of slighty hacky parts + # This rerenders and compiles the navigation when ng-view + # content loaded signal is raised using inner scope. + renderMenuEntries = ($el, targetScope) -> + container = $el.find("ul.main-nav") + sectionName = targetScope.section + + dom = $compile(menuEntriesTemplate({}))(targetScope) + dom.find("a.active").removeClass("active") + dom.find("#nav-#{sectionName} > a").addClass("active") + + container.replaceWith(dom) + + + link = ($scope, $el, $attrs, $ctrl) -> + renderMainMenu($el) + + $scope.$on "$viewContentLoaded", (ctx) -> + if ctx.targetScope.$$childHead is null + $log.error "No scope found for render menu." + return + + if $el.hasClass("hidden") + $el.removeClass("hidden") + + renderMenuEntries($el, ctx.targetScope.$$childHead) + + return {link: link} + + +module.directive("tgProjectMenu", ["$log", "$compile", "$rootScope", ProjectMenuDirective]) + + diff --git a/app/index.jade b/app/index.jade index 739717ec..73fd4631 100644 --- a/app/index.jade +++ b/app/index.jade @@ -10,10 +10,10 @@ html(lang="en", ng-app="taiga") link(rel="stylesheet", href="/styles/main.css") body(tg-main) - include partials/views/modules/project-nav + include partials/views/modules/projects-nav //- the content of nav.menu is in coffe.modules.base TaigaMain directive - nav.menu.hidden + nav.menu.hidden(tg-project-menu) include partials/views/components/notification-message diff --git a/app/partials/layout.jade b/app/partials/layout.jade index e02a7b28..34e8146f 100644 --- a/app/partials/layout.jade +++ b/app/partials/layout.jade @@ -9,7 +9,7 @@ html(lang="en") link(rel="stylesheet", href="/styles/main.css") block head body - include views/modules/project-nav + include views/modules/projects-nav include views/modules/nav div.master diff --git a/app/partials/views/modules/project-nav.jade b/app/partials/views/modules/projects-nav.jade similarity index 92% rename from app/partials/views/modules/project-nav.jade rename to app/partials/views/modules/projects-nav.jade index 8fd13021..4b025415 100644 --- a/app/partials/views/modules/project-nav.jade +++ b/app/partials/views/modules/projects-nav.jade @@ -1,4 +1,4 @@ -nav.project-nav +nav.projects-nav(tg-projects-nav) h1 Your projects form fieldset diff --git a/app/styles/layout/base.scss b/app/styles/layout/base.scss index 321fefbc..ad2b6d64 100644 --- a/app/styles/layout/base.scss +++ b/app/styles/layout/base.scss @@ -11,11 +11,11 @@ body { -webkit-font-smoothing: antialiased; // Fix for webkit renderin height: 100%; min-height: 100%; - overflow-x: hidden; // open-project-nav + overflow-x: hidden; // open-projects-nav -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; width: 100%; - .project-nav { + .projects-nav { @include transform(translate3d(-300px, 0, 0)); @include transition (transform 1s ease); } @@ -30,8 +30,8 @@ body { @include transform(translate3d(0, 0, 0)); @include transition (transform 1s ease); } - &.open-project-nav { - .project-nav { + &.open-projects-nav { + .projects-nav { @include transform(translate3d(0, 0, 0)); @include transition (transform 1s ease); } diff --git a/app/styles/main.scss b/app/styles/main.scss index 1c669459..7a0f64c7 100755 --- a/app/styles/main.scss +++ b/app/styles/main.scss @@ -36,7 +36,7 @@ $prefix-for-spec: true; //Modules @import 'modules/nav'; -@import 'modules/project-nav'; +@import 'modules/projects-nav'; @import 'modules/sprints'; @import 'modules/burndown'; @import 'modules/backlog-table'; diff --git a/app/styles/modules/project-nav.scss b/app/styles/modules/projects-nav.scss similarity index 98% rename from app/styles/modules/project-nav.scss rename to app/styles/modules/projects-nav.scss index 266713ae..0871ffaf 100644 --- a/app/styles/modules/project-nav.scss +++ b/app/styles/modules/projects-nav.scss @@ -1,4 +1,4 @@ -.project-nav { +.projects-nav { @include transform(translate3d(-300px, 0, 0)); background-color: #232323; height: 100%;