diff --git a/services/web/app/views/project/list.jade b/services/web/app/views/project/list.jade index 303d5b69ad..7e00e1874e 100644 --- a/services/web/app/views/project/list.jade +++ b/services/web/app/views/project/list.jade @@ -44,19 +44,19 @@ block content li a.menu-indent(href="/templates") View All ยป .row-spaced - ul.list-unstyled.folders-menu.js-folders-menu - li - a.menu-indent(href="#") All projects - li - a.menu-indent(href="#") Your projects - li - a.menu-indent(href="#") Shared with you + ul.list-unstyled.folders-menu.js-folders-menu(ng-controller="TagListController") + li(ng-class="{active: (view == 'all')}") + a.menu-indent(href="#", ng-click="selectAllProjects()") All projects + //- li + //- a.menu-indent(href="#") Your projects + //- li + //- a.menu-indent(href="#") Shared with you li h2 Folders - li(ng-repeat="tag in tags", ng-controller="TagController") - a.menu-indent(href="#") - i.icon.fa.fa-folder-o - | {{tag.name}} + li(ng-repeat="tag in tags", ng-controller="TagListItemController", ng-class="{active: tag.selected}") + a.menu-indent(href="#", ng-click="selectTag()") + i.icon.fa(ng-class="{'fa-folder-open-o': tag.selected, 'fa-folder-o': !tag.selected}") + | {{tag.name}} span.small ({{tag.project_ids.length}}) .row-spaced-small @@ -70,7 +70,7 @@ block content .row-spaced a(href="/user/bonus").btn.btn-info Upgrade Account - .col-md-10(ng-controller="ProjectListController") + .col-md-10 .container-fluid .row .col-md-12 @@ -95,7 +95,7 @@ block content span.caret ul.dropdown-menu.dropdown-menu-right(role="menu") li.dropdown-header Add to folder - li(ng-repeat="tag in tags", ng-controller="TagDropdownController") + li(ng-repeat="tag in tags", ng-controller="TagDropdownItemController") a.menu-indent(href="#", ng-click="addOrRemoveProjectsFromTag()") i.fa.fa-check(ng-if="areSelectedProjectsInTag") | {{tag.name}} @@ -126,7 +126,7 @@ block content span.owner OWNER .col-md-4 span.last-modified LAST MODIFIED - li.project_entry.container-fluid(ng-repeat="project in visibleProjects", ng-controller="ProjectController") + li.project_entry.container-fluid(ng-repeat="project in visibleProjects", ng-controller="ProjectListItemController") .row .col-md-6 input.select-item(type="checkbox", ng-model="project.selected", ng-change="onSelectedChange()") diff --git a/services/web/public/coffee/project-list.coffee b/services/web/public/coffee/project-list.coffee index d04cf29244..6e6cc36dcd 100644 --- a/services/web/public/coffee/project-list.coffee +++ b/services/web/public/coffee/project-list.coffee @@ -6,11 +6,9 @@ ProjectPageApp.filter "formatDate", () -> ProjectPageApp.controller "ProjectPageController", ($scope) -> $scope.projects = window.data.projects - $scope.tags = window.data.tags - -ProjectPageApp.controller "ProjectListController", ($scope) -> - $scope.allSelected = false $scope.visibleProjects = $scope.projects + $scope.tags = window.data.tags + $scope.allSelected = false # Any individual changes to the selection buttons invalidates # our 'select all' @@ -24,39 +22,70 @@ ProjectPageApp.controller "ProjectListController", ($scope) -> project.selected = $scope.allSelected $scope.$broadcast "selection:change" - $scope.clearSelections = () -> + $scope.$watch "searchText", (value) -> + $scope.updateVisibleProjects() + + $scope.clearProjectSelections = () -> for project in $scope.projects project.selected = false $scope.allSelected = false $scope.$broadcast "selection:change" + $scope.updateVisibleProjects = () -> + $scope.visibleProjects = [] + selectedTag = $scope.getSelectedTag() + for project in $scope.projects + visible = true + # Only show if it matches any search text + if $scope.searchText? and $scope.searchText != "" + if !project.name.toLowerCase().match($scope.searchText.toLowerCase()) + visible = false + # Only show if it matches the selected tag + if selectedTag? and project._id not in selectedTag.project_ids + visible = false + if visible + $scope.visibleProjects.push project + console.log "visible", $scope.visibleProjects + $scope.clearProjectSelections() + $scope.getSelectedProjects = () -> $scope.projects.filter (project) -> project.selected $scope.getSelectedProjectIds = () -> $scope.getSelectedProjects().map (project) -> project._id - $scope.$watch "searchText", (value) -> - $scope.updateVisibleProjects() + $scope.getSelectedTag = () -> + for tag in $scope.tags + return tag if tag.selected + return null - $scope.updateVisibleProjects = () -> - $scope.visibleProjects = [] - for project in $scope.projects - visible = true - if $scope.searchText? and $scope.searchText != "" - if !project.name.toLowerCase().match($scope.searchText.toLowerCase()) - visible = false - if visible - $scope.visibleProjects.push project - $scope.clearSelections() - -ProjectPageApp.controller "ProjectController", ($scope) -> +ProjectPageApp.controller "ProjectListItemController", ($scope) -> $scope.onSelectedChange = () -> $scope.$emit "selected:on-change" -ProjectPageApp.controller "TagController", ($scope) -> +ProjectPageApp.controller "TagListController", ($scope) -> + $scope.view = "all" -ProjectPageApp.controller "TagDropdownController", ($scope) -> + $scope.selectAllProjects = () -> + $scope._clearTags() + $scope.setActiveItem("all") + $scope.updateVisibleProjects() + + $scope._clearTags = () -> + for tag in $scope.tags + tag.selected = false + + $scope.setActiveItem = (view) -> + $scope.view = view + +ProjectPageApp.controller "TagListItemController", ($scope) -> + $scope.selectTag = () -> + $scope._clearTags() + $scope.tag.selected = true + $scope.setActiveItem("tag") + $scope.updateVisibleProjects() + +ProjectPageApp.controller "TagDropdownItemController", ($scope) -> $scope.$on "selection:change", (e, newValue, oldValue) -> console.log "selected watch listen" $scope.recalculateProjectsInTag() diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less index a79a1dffb6..d0b30aa51d 100644 --- a/services/web/public/stylesheets/app/project-list.less +++ b/services/web/public/stylesheets/app/project-list.less @@ -14,29 +14,31 @@ } ul.folders-menu { - margin: 0; - font-weight: 700; - a { - font-size: 0.8rem; - padding: 3px; - } - .active { - background-color: @red; - color: white; - padding-left: 6px; - a { - color: white; - } - } + margin: 0; + li { + line-height: 1; + padding: (@line-height-computed / 4) 0; + a { + font-size: 0.8rem; + color: #333; + padding-left: (@line-height-computed / 4); + } + .small { + font-size: 0.8rem; + color: @gray-light; + } + } + li.active { + border-right: 4px solid @red; + a { + font-weight: 700; + color: @link-color; + } + } h2 { - margin-top: @line-height-computed / 2; - margin-bottom: @line-height-computed / 4; + margin-top: @line-height-computed / 4; + margin-bottom: 0; font-size: @font-size-base; - margin-left: 3px; - } - .small { - font-size: 0.8rem; - color: @gray-light; } }