From 751572c9772d271f1eece3a9a080d21d52f207a9 Mon Sep 17 00:00:00 2001 From: James Allen Date: Fri, 13 Jun 2014 14:28:16 +0100 Subject: [PATCH] Only show actions buttons when projects are selected --- services/web/app/views/project/list.jade | 6 +- .../web/public/coffee/project-list.coffee | 21 +- .../web/public/stylesheets/core/mixins.less | 3 +- .../web/public/stylesheets/less/list.less | 245 ------------------ 4 files changed, 19 insertions(+), 256 deletions(-) delete mode 100644 services/web/public/stylesheets/less/list.less diff --git a/services/web/app/views/project/list.jade b/services/web/app/views/project/list.jade index c0d8151f03..5f3e0aa987 100644 --- a/services/web/app/views/project/list.jade +++ b/services/web/app/views/project/list.jade @@ -88,7 +88,7 @@ block content .project-tools.js-toggle-tools .btn-toolbar - .btn-group + .btn-group(ng-hide="selectedProjects.length < 1") a.btn.btn-default( href='#', data-original-title="Download", @@ -106,7 +106,7 @@ block content ) i.fa.fa-trash-o - .btn-group + .btn-group(ng-hide="selectedProjects.length < 1") a.btn.btn-default.dropdown-toggle( href="#", data-toggle="dropdown" @@ -134,7 +134,7 @@ block content li a(href="#", ng-click="openNewTagModal()") Create New Folder - .btn-group + .btn-group(ng-hide="selectedProjects.length != 1") a.btn.btn-default.dropdown-toggle(data-toggle="dropdown", href="#") More span.caret ul.dropdown-menu.dropdown-menu-right(role="menu") diff --git a/services/web/public/coffee/project-list.coffee b/services/web/public/coffee/project-list.coffee index 9ec658dfa6..89baf4040d 100644 --- a/services/web/public/coffee/project-list.coffee +++ b/services/web/public/coffee/project-list.coffee @@ -29,6 +29,7 @@ ProjectPageApp.controller "ProjectPageController", ($scope, $modal, $http) -> $scope.visibleProjects = $scope.projects $scope.tags = window.data.tags $scope.allSelected = false + $scope.selectedProjects = [] # Allow tags to be accessed on projects as well projectsById = {} @@ -63,6 +64,18 @@ ProjectPageApp.controller "ProjectPageController", ($scope, $modal, $http) -> $scope.allSelected = false $scope.$broadcast "selection:change" + $scope.updateSelectedProjects = () -> + $scope.selectedProjects = $scope.projects.filter (project) -> project.selected + + $scope.getSelectedProjects = () -> + $scope.selectedProjects + + $scope.getSelectedProjectIds = () -> + $scope.selectedProjects.map (project) -> project._id + + $scope.$on "selection:change", () -> + $scope.updateSelectedProjects() + $scope.updateVisibleProjects = () -> $scope.visibleProjects = [] selectedTag = $scope.getSelectedTag() @@ -75,19 +88,13 @@ ProjectPageApp.controller "ProjectPageController", ($scope, $modal, $http) -> # 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 else # We don't want hidden selections project.selected = false - $scope.getSelectedProjects = () -> - $scope.projects.filter (project) -> project.selected - - $scope.getSelectedProjectIds = () -> - $scope.getSelectedProjects().map (project) -> project._id - $scope.getSelectedTag = () -> for tag in $scope.tags return tag if tag.selected diff --git a/services/web/public/stylesheets/core/mixins.less b/services/web/public/stylesheets/core/mixins.less index 71723dba4a..cf1ed131e1 100755 --- a/services/web/public/stylesheets/core/mixins.less +++ b/services/web/public/stylesheets/core/mixins.less @@ -537,7 +537,8 @@ // Button sizes // ------------------------- .button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) { - padding: @padding-vertical @padding-horizontal; + // Remove 1px to make up for the extra px of border-bottom we've added + padding: @padding-vertical - 1 @padding-horizontal @padding-vertical; font-size: @font-size; line-height: @line-height; border-radius: @border-radius; diff --git a/services/web/public/stylesheets/less/list.less b/services/web/public/stylesheets/less/list.less deleted file mode 100644 index ec8cbd3c58..0000000000 --- a/services/web/public/stylesheets/less/list.less +++ /dev/null @@ -1,245 +0,0 @@ - -#projectList { - list-style-type: none; - margin: 0; - - .project_entry { - &:hover { - background-color: #eaeaea; - } - min-height: 40px; - - padding-left: 10px; - padding-top: 10px; - padding-bottom: 5px; - padding-right: 5px; - - .project-actions{ - float: right; - } - - .projectDetails { - padding-top: 5px; - padding-bottom: 5px; - color: #999; - font-size: 12px; - } - - .projectName { - font-family: 'Chivo',sans-serif; - font-weight: bold; - font-size: 22px; - } - - .tag-label { - margin-right: 5px; - font-size: 12px; - cursor: arrow; - i { - margin-top: 1px; - cursor: pointer; - } - margin-bottom: 5px; - } - - .addTagButton { - font-size: 12px; - cursor: pointer; - &:hover { - background-color: #468847; - } - } - } - - - -} - -#projectFilter { - margin-left: 8px; - width: 250px; - margin-top: -4px; - margin-bottom: 4px; - -} - - - - - - -#projectListArea { - - .search { - position: relative; - } - .search .search-query { - padding-left: 29px; - } - - .search { - - input{ - &:focus .icon-search { - background-image: url("/img/glyphicons-halflings-white.png") - } - } - - .icon-search { - position: absolute; - top: 3px; - left: 18px; - - } - - .icon-remove { - position: absolute; - top: 3px; - left:280px; - } - } - - .search .search-query:focus, .search .search-query.focused { - padding-left: 30px; - } - -} - -#newProject{ - .dropdown-menu { - right: 0; - left: auto; - } -} - -a.archived-projects { - padding: 6px 16px; - color: #aaa; -} - -.project-actions { - float: right; - .dropdown-menu { - right:0; - left: auto; - } -} - -.normalText{ - font-size : 13px; -} - -.clickable, #sections li{ - cursor: pointer; - cursor: hand; -} - - -.tag-list { - border-left: 1px solid #D9D9D9; - padding-left: 16px; - #allProjectTagsArea { - ul { - list-style:none; - margin: 0; - li { - margin: 8px 3px; - } - } - .number { - padding-left:5px; - font-size: 12px; - color: #999; - } - } -} - - - - -.twitter-typeahead .tt-query, -.twitter-typeahead .tt-hint { - margin-bottom: 0; -} - -.tt-dropdown-menu { - min-width: 160px; - margin-top: 2px; - padding: 5px 0; - background-color: #fff; - border: 1px solid #ccc; - border: 1px solid rgba(0,0,0,.2); - *border-right-width: 2px; - *border-bottom-width: 2px; - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; - -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2); - -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2); - box-shadow: 0 5px 10px rgba(0,0,0,.2); - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; -} - -.tt-suggestion { - display: block; - padding: 3px 20px; -} - -.tt-suggestion.tt-is-under-cursor { - color: #fff; - background-color: #0081c2; - background-image: -moz-linear-gradient(top, #0088cc, #0077b3); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3)); - background-image: -webkit-linear-gradient(top, #0088cc, #0077b3); - background-image: -o-linear-gradient(top, #0088cc, #0077b3); - background-image: linear-gradient(to bottom, #0088cc, #0077b3); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0) -} - -.tt-suggestion.tt-is-under-cursor a { - color: #fff; -} - -.tt-suggestion p { - margin: 0; -} - -.sharelatex-intro { - position: relative; - padding-top: 60px; - .create-project-arrow { - color: #666; - position: absolute; - top: 0; - right: 0; - font-size: 24px; - padding: 50px 55px 0 0; - margin-right: 20px; - margin-top: -30px; - background-image: url(/img/upwards-sweeping-arrow.png); - background-repeat: no-repeat; - background-position: top right; - } - - .welcome { - width: 350px; - margin: auto; - background-image: url(/brand/logo/logo-128.png); - background-position: top center; - background-repeat: no-repeat; - h2 { - font-size: 24px; - margin-bottom: 6px; - } - p { - font-size: 18px; - line-height: 22px; - } - padding-top: 130px; - text-align: center; - margin-bottom: 60px; - } -}