From 04d3e5cfe1b370ba2f54f9d970328373c46f4a46 Mon Sep 17 00:00:00 2001 From: James Allen Date: Wed, 18 Jun 2014 11:53:18 +0100 Subject: [PATCH] Allow project search to be cleared --- services/web/app/views/project/list.jade | 20 +++++++++++------- .../coffee/app/directives/focusInput.coffee | 9 ++++++++ .../coffee/app/directives/focusOn.coffee | 10 +++++++++ .../app/directives/stopPropagation.coffee | 3 --- services/web/public/coffee/app/main.coffee | 2 ++ .../web/public/coffee/app/project-list.coffee | 13 +++++------- .../web/public/coffee/app/user-details.coffee | 7 ------- .../public/stylesheets/components/forms.less | 21 +++++++++++++++++++ 8 files changed, 60 insertions(+), 25 deletions(-) create mode 100644 services/web/public/coffee/app/directives/focusInput.coffee create mode 100644 services/web/public/coffee/app/directives/focusOn.coffee diff --git a/services/web/app/views/project/list.jade b/services/web/app/views/project/list.jade index 421d6baebe..68fb9f027c 100644 --- a/services/web/app/views/project/list.jade +++ b/services/web/app/views/project/list.jade @@ -150,13 +150,19 @@ block content .row .col-md-12 form.project-search.form-horizontal(role="form") - .form-group.has-feedback.col-md-7 + .form-group.has-feedback.has-feedback-left.col-md-7 input.form-control.col-md-7( placeholder='Search projects…', autofocus='autofocus', - ng-model="searchText" + ng-model="searchText", + focus-on='search:clear' + ) + i.fa.fa-search.form-control-feedback-left + i.fa.fa-times.form-control-feedback( + ng-click="clearSearchText()", + style="cursor: pointer;", + ng-show="searchText.length > 0" ) - i.fa.fa-search.form-control-feedback //- i.fa.fa-remove .project-tools.js-toggle-tools @@ -302,7 +308,7 @@ block content placeholder="New Folder Name", ng-model="inputs.newTagName", ng-enter="create()", - ng-focus-on="open" + focus-on="open" ) .modal-footer button.btn.btn-default(ng-click="cancel()") Cancel @@ -317,7 +323,7 @@ block content placeholder="Project Name", ng-model="inputs.projectName", ng-enter="rename()", - ng-focus-on="open" + focus-on="open" ) .modal-footer button.btn.btn-default(ng-click="cancel()") Cancel @@ -334,7 +340,7 @@ block content placeholder="New Project Name", ng-model="inputs.projectName", ng-enter="clone()", - ng-focus-on="open" + focus-on="open" ) .modal-footer button.btn.btn-default( @@ -357,7 +363,7 @@ block content placeholder="Project Name", ng-model="inputs.projectName", ng-enter="create()", - ng-focus-on="open" + focus-on="open" ) .modal-footer button.btn.btn-default( diff --git a/services/web/public/coffee/app/directives/focusInput.coffee b/services/web/public/coffee/app/directives/focusInput.coffee new file mode 100644 index 0000000000..90f9439b82 --- /dev/null +++ b/services/web/public/coffee/app/directives/focusInput.coffee @@ -0,0 +1,9 @@ +define [ + "base" +], (App) -> + App.directive "focusInput", ($timeout) -> + return (scope, element, attr) -> + scope.$watch attr.focusInput, (value) -> + if value + $timeout -> + element.select() \ No newline at end of file diff --git a/services/web/public/coffee/app/directives/focusOn.coffee b/services/web/public/coffee/app/directives/focusOn.coffee new file mode 100644 index 0000000000..36bd31c0e1 --- /dev/null +++ b/services/web/public/coffee/app/directives/focusOn.coffee @@ -0,0 +1,10 @@ +define [ + "base" +], (App) -> + App.directive 'focusOn', ($timeout) -> + return { + restrict: 'AC' + link: (scope, element, attrs) -> + scope.$on attrs.focusOn, () -> + element.focus() + } \ No newline at end of file diff --git a/services/web/public/coffee/app/directives/stopPropagation.coffee b/services/web/public/coffee/app/directives/stopPropagation.coffee index 0a8c5d2779..99d0c649d8 100644 --- a/services/web/public/coffee/app/directives/stopPropagation.coffee +++ b/services/web/public/coffee/app/directives/stopPropagation.coffee @@ -2,12 +2,9 @@ define [ "base" ], (App) -> App.directive "stopPropagation", ($http) -> - console.log "Registering" return { restrict: "A", link: (scope, element, attrs) -> - console.log "linking" element.bind attrs.stopPropagation, (e) -> - console.log "click" e.stopPropagation() } diff --git a/services/web/public/coffee/app/main.coffee b/services/web/public/coffee/app/main.coffee index a2c60bc843..4ec44d2a0e 100644 --- a/services/web/public/coffee/app/main.coffee +++ b/services/web/public/coffee/app/main.coffee @@ -3,5 +3,7 @@ define [ "user-details" "directives/asyncForm" "directives/stopPropagation" + "directives/focusInput" + "directives/focusOn" ], () -> angular.bootstrap(document.body, ["SharelatexApp"]) \ No newline at end of file diff --git a/services/web/public/coffee/app/project-list.coffee b/services/web/public/coffee/app/project-list.coffee index 71b7caf5ac..e197eaa724 100644 --- a/services/web/public/coffee/app/project-list.coffee +++ b/services/web/public/coffee/app/project-list.coffee @@ -10,13 +10,6 @@ define [ scope.$eval(attrs.ngEnter, event: event) event.preventDefault() - App.directive 'ngFocusOn', ($timeout) -> - return { - restrict: 'AC' - link: (scope, element, attrs) -> - scope.$on attrs.ngFocusOn, () -> - element.focus() - } App.filter "formatDate", () -> (date, format = "Do MMM YYYY, h:mm a") -> @@ -57,6 +50,10 @@ define [ $scope.$watch "searchText", (value) -> $scope.updateVisibleProjects() + $scope.clearSearchText = () -> + $scope.searchText = "" + $scope.$emit "search:clear" + $scope.setFilter = (filter) -> $scope.filter = filter $scope.updateVisibleProjects() @@ -448,7 +445,7 @@ define [ if $scope.areSelectedProjectsInTag and partialSelection $scope.areSelectedProjectsInTag = "partial" - $scope.addOrRemoveProjectsFromTag = (e) -> + $scope.addOrRemoveProjectsFromTag = () -> if $scope.areSelectedProjectsInTag == true $scope.removeSelectedProjectsFromTag($scope.tag) $scope.areSelectedProjectsInTag = false diff --git a/services/web/public/coffee/app/user-details.coffee b/services/web/public/coffee/app/user-details.coffee index 83597fbff8..ffbbbb9fa6 100644 --- a/services/web/public/coffee/app/user-details.coffee +++ b/services/web/public/coffee/app/user-details.coffee @@ -5,13 +5,6 @@ define [ app.factory "Institutions", -> new AlgoliaSearch(window.algolia.institutions.app_id, window.algolia.institutions.api_key).initIndex("institutions") - App.directive "focusInput", ($timeout) -> - return (scope, element, attr) -> - scope.$watch attr.focusInput, (value) -> - if value - $timeout -> - element.select() - App.controller "UpdateForm", ($scope, $http, Institutions)-> $scope.institutions = [] $scope.formVisable = false diff --git a/services/web/public/stylesheets/components/forms.less b/services/web/public/stylesheets/components/forms.less index a6963f18b3..55b9660bdb 100755 --- a/services/web/public/stylesheets/components/forms.less +++ b/services/web/public/stylesheets/components/forms.less @@ -285,6 +285,23 @@ input[type="checkbox"], } } +.has-feedback-left { + position: relative; + .form-control { + padding-left: @input-height-base; + } + .form-control-feedback-left { + position: absolute; + top: (@line-height-computed + 5); // Height of the `label` and its margin + left: 0; + display: block; + width: @input-height-base; + height: @input-height-base; + line-height: @input-height-base; + text-align: center; + } +} + // Feedback states .has-success { .form-control-validation(@state-success-text; @state-success-text; @state-success-bg); @@ -445,4 +462,8 @@ input[type="checkbox"], top: 0; right: (@grid-gutter-width / 2); } + .has-feedback-left .form-control-feedback-left { + top: 0; + left: (@grid-gutter-width / 2); + } }