From b7bc5dd636f8f44c46af44e79ea6ab6ab1cc0c58 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81lex=20Hermida?= Date: Mon, 16 Apr 2018 17:03:37 +0200 Subject: [PATCH] Refactor lightbox --- app/coffee/modules/common/components.coffee | 6 ++ app/coffee/modules/common/lightboxes.coffee | 79 ++++++++++++------- .../lightbox/lightbox-assigned-to-users.jade | 18 +++-- app/styles/components/user-list.scss | 44 +++++++++++ 4 files changed, 109 insertions(+), 38 deletions(-) diff --git a/app/coffee/modules/common/components.coffee b/app/coffee/modules/common/components.coffee index ae65482a..238a31d7 100644 --- a/app/coffee/modules/common/components.coffee +++ b/app/coffee/modules/common/components.coffee @@ -386,6 +386,12 @@ AssignedUsersDirective = ($rootscope, $confirm, $repo, $modelTransform, $templat deleteAssignedUser(assignedUserIds) + $scope.$on "assigned-user:deleted", (ctx, assignedUserId) -> + assignedUsersIds = _.clone($model.$modelValue.assigned_users, false) + assignedUsersIds = _.pull(assignedUsersIds, assignedUserId) + assignedUsersIds = _.uniq(assignedUsersIds) + deleteAssignedUser(assignedUsersIds) + $scope.$on "assigned-user:added", (ctx, assignedUserId) -> assignedUsers = _.clone($model.$modelValue.assigned_users, false) assignedUsers.push(assignedUserId) diff --git a/app/coffee/modules/common/lightboxes.coffee b/app/coffee/modules/common/lightboxes.coffee index cd370894..09d534ec 100644 --- a/app/coffee/modules/common/lightboxes.coffee +++ b/app/coffee/modules/common/lightboxes.coffee @@ -701,36 +701,51 @@ module.directive("tgLbAssignedto", ["lightboxService", "lightboxKeyboardNavigati AssignedUsersLightboxDirective = ($repo, lightboxService, lightboxKeyboardNavigationService, $template, $compile, avatarService) -> link = ($scope, $el, $attrs) -> + selectedUsers = [] selectedItem = null usersTemplate = $template.get("common/lightbox/lightbox-assigned-to-users.html", true) - # Get prefiltered users by text - # and without now assigned users. - getFilteredUsers = (text="") -> - _filterUsers = (text, user) -> - if selectedItem && _.find(selectedItem.assigned_users, (x) -> x == user.id) - return false + normalizeString = (string) -> + normalizedString = string + normalizedString = normalizedString.replace("Á", "A").replace("Ä", "A").replace("À", "A") + normalizedString = normalizedString.replace("É", "E").replace("Ë", "E").replace("È", "E") + normalizedString = normalizedString.replace("Í", "I").replace("Ï", "I").replace("Ì", "I") + normalizedString = normalizedString.replace("Ó", "O").replace("Ö", "O").replace("Ò", "O") + normalizedString = normalizedString.replace("Ú", "U").replace("Ü", "U").replace("Ù", "U") + return normalizedString - username = user.full_name_display.toUpperCase() - text = text.toUpperCase() - return _.includes(username, text) + filterUsers = (text, user) -> + username = user.full_name_display.toUpperCase() + username = normalizeString(username) + text = text.toUpperCase() + text = normalizeString(text) - users = _.clone($scope.activeUsers, true) - users = _.filter(users, _.partial(_filterUsers, text)) - return users + return _.includes(username, text) # Render the specific list of users. - render = (users) -> - visibleUsers = _.slice(users, 0, 5) + render = (assignedUsersIds, text) -> + users = _.clone($scope.activeUsers, true) + users = _.sortBy(users, (o) -> if o.id is $scope.user.id then 0 else o.id) + users = _.filter(users, _.partial(filterUsers, text)) if text? - visibleUsers = _.map visibleUsers, (user) -> - user.avatar = avatarService.getAvatar(user) + # Add selected users + selected = [] + _.map users, (user) -> + if user.id in assignedUsersIds + user.avatar = avatarService.getAvatar(user) + selected.push(user) - return user + # Filter users in searchs + + visible = [] + _.map users, (user) -> + if user.id not in assignedUsersIds + user.avatar = avatarService.getAvatar(user) + visible.push(user) ctx = { - selected: false - users: visibleUsers + selected: selected + users: _.slice(visible, 0, 5) showMore: users.length > 5 } @@ -744,20 +759,17 @@ AssignedUsersLightboxDirective = ($repo, lightboxService, lightboxKeyboardNaviga $scope.$on "assigned-user:add", (ctx, item) -> selectedItem = item - users = getFilteredUsers() - render(users) + selectedUsers = item.assigned_users + render(selectedUsers) lightboxService.open($el).then -> $el.find("input").focus() lightboxKeyboardNavigationService.init($el) $scope.$watch "usersSearch", (searchingText) -> - if not searchingText? - return - - users = getFilteredUsers(searchingText) - render(users) - $el.find("input").focus() + if searchingText? + render(selectedUsers, searchingText) + $el.find('input').focus() $el.on "click", ".user-list-single", debounce 200, (event) -> closeLightbox() @@ -769,14 +781,21 @@ AssignedUsersLightboxDirective = ($repo, lightboxService, lightboxKeyboardNaviga $scope.usersSearch = null $scope.$broadcast("assigned-user:added", target.data("user-id"), selectedItem) + $el.on "click", ".remove-assigned-to", (event) -> + event.preventDefault() + target = angular.element(event.currentTarget) + event.stopPropagation() + + $scope.$apply -> + $scope.usersSearch = null + $scope.$broadcast("assigned-user:deleted", target.data("user-id"), selectedItem) + closeLightbox() + $el.on "click", ".close", (event) -> event.preventDefault() closeLightbox() - $scope.$apply -> - $scope.usersSearch = null - $scope.$on "$destroy", -> $el.off() diff --git a/app/partials/common/lightbox/lightbox-assigned-to-users.jade b/app/partials/common/lightbox/lightbox-assigned-to-users.jade index 16c06377..2ec6eb4d 100644 --- a/app/partials/common/lightbox/lightbox-assigned-to-users.jade +++ b/app/partials/common/lightbox/lightbox-assigned-to-users.jade @@ -1,25 +1,27 @@ -<% if (selected) { %> -.user-list-single.is-active +//- <% if (selected) { %> +<% _.each(selected, function(user) { %> +.user-list-multiple.is-active(data-user-id!="<%- user.id %>") .user-list-avatar a( href="" title="{{'COMMON.ASSIGNED_TO' | translate}}" ) img( - style!="background: <%- selected.avatar.bg %>" - src!="<%- selected.avatar.url %>" + style!="background: <%- user.avatar.bg %>" + src!="<%- user.avatar.url %>" ) a.user-list-name( href="" - title!="<%- selected.full_name_display %>" + title!="<%- user.full_name_display %>" ng-non-bindable ) - | <%-selected.full_name_display %> + | <%-user.full_name_display %> tg-svg.remove-assigned-to( svg-icon="icon-close", - svg-title-translate="COMMON.ASSIGNED_TO.REMOVE_ASSIGNED" + svg-title-translate="COMMON.ASSIGNED_TO.REMOVE_ASSIGNED", + data-user-id!="<%- user.id %>" ) -<% } %> +<% }) %> <% _.each(users, function(user) { %> .user-list-single(data-user-id!="<%- user.id %>") diff --git a/app/styles/components/user-list.scss b/app/styles/components/user-list.scss index feeaf44a..732b48cb 100644 --- a/app/styles/components/user-list.scss +++ b/app/styles/components/user-list.scss @@ -12,6 +12,19 @@ border: 0; } } + .user-list-multiple { + align-content: center; + align-items: center; + background: transparent; + border-bottom: 1px solid $whitish; + display: flex; + padding: .25rem 0; + vertical-align: middle; + + &:last-child { + border: 0; + } + } .user-list-avatar { flex-basis: 3rem; margin-right: .25rem; @@ -61,6 +74,37 @@ } } } + + .user-list-multiple { + &:hover, + &.selected { + background: rgba(lighten($primary-light, 30%), .3); + cursor: pointer; + } + &:hover { + transition: background .3s linear; + transition-delay: .2s; + } + &.is-active { + background: rgba(lighten($primary-light, 30%), .3); + cursor: pointer; + position: relative; + transition: background .3s linear; + transition-delay: .1s; + } + .remove-assigned-to { + display: block; + fill: $grayer; + opacity: 1; + position: absolute; + right: 1rem; + top: 1.5rem; + transition: all .2s ease-in; + &:hover { + fill: $red; + } + } + } } .ticket-watchers {