diff --git a/app/coffee/app.coffee b/app/coffee/app.coffee index a09e1a27..81b29ead 100644 --- a/app/coffee/app.coffee +++ b/app/coffee/app.coffee @@ -611,7 +611,7 @@ init = ($log, $rootscope, $auth, $events, $analytics, $translate, $location, $na projectService.setSection(next.section) if next.params.pslug - projectService.setProject(next.params.pslug) + projectService.setProjectBySlug(next.params.pslug) else projectService.cleanProject() diff --git a/app/coffee/modules/admin/memberships.coffee b/app/coffee/modules/admin/memberships.coffee index 505419fe..087fcf16 100644 --- a/app/coffee/modules/admin/memberships.coffee +++ b/app/coffee/modules/admin/memberships.coffee @@ -402,9 +402,9 @@ MembershipsRowActionsDirective = ($log, $repo, $rs, $confirm, $compile, $transla defaultMsg = $translate.instant("ADMIN.MEMBERSHIP.DEFAULT_DELETE_MESSAGE", {email: member.email}) message = if member.user then member.full_name else defaultMsg - $confirm.askOnDelete(title, message).then (finish) -> - onSuccess = -> - finish() + $confirm.askOnDelete(title, message).then (askResponse) -> + onSuccess = => + askResponse.finish() if $scope.page > 1 && ($scope.count - 1) <= $scope.paginatedBy $ctrl.selectFilter("page", $scope.page - 1) @@ -414,8 +414,8 @@ MembershipsRowActionsDirective = ($log, $repo, $rs, $confirm, $compile, $transla text = $translate.instant("ADMIN.MEMBERSHIP.SUCCESS_DELETE") $confirm.notify("success", null, text) - onError = -> - finish(false) + onError = => + askResponse.finish(false) text = $translate.instant("ADMIN.MEMBERSHIP.ERROR_DELETE", {message: message}) $confirm.notify("error", null, text) diff --git a/app/coffee/modules/admin/third-parties.coffee b/app/coffee/modules/admin/third-parties.coffee index 7d36fc4c..5a5506eb 100644 --- a/app/coffee/modules/admin/third-parties.coffee +++ b/app/coffee/modules/admin/third-parties.coffee @@ -177,13 +177,13 @@ WebhookDirective = ($rs, $repo, $confirm, $loading, $translate) -> title = $translate.instant("ADMIN.WEBHOOKS.DELETE") message = $translate.instant("ADMIN.WEBHOOKS.WEBHOOK_NAME", {name: webhook.name}) - $confirm.askOnDelete(title, message).then (finish) => + $confirm.askOnDelete(title, message).then (askResponse) => onSucces = -> - finish() + askResponse.finish() $scope.$emit("webhooks:reload") onError = -> - finish(false) + askResponse.finish(false) $confirm.notify("error") $repo.remove(webhook).then(onSucces, onError) diff --git a/app/coffee/modules/backlog/lightboxes.coffee b/app/coffee/modules/backlog/lightboxes.coffee index 7d7a9c7b..721f4b76 100644 --- a/app/coffee/modules/backlog/lightboxes.coffee +++ b/app/coffee/modules/backlog/lightboxes.coffee @@ -96,15 +96,15 @@ CreateEditSprint = ($repo, $confirm, $rs, $rootscope, lightboxService, $loading, title = $translate.instant("LIGHTBOX.DELETE_SPRINT.TITLE") message = $scope.sprint.name - $confirm.askOnDelete(title, message).then (finish) => + $confirm.askOnDelete(title, message).then (askResponse) => onSuccess = -> - finish() + askResponse.finish() $scope.milestonesCounter -= 1 lightboxService.close($el) $rootscope.$broadcast("sprintform:remove:success", $scope.sprint) onError = -> - finish(false) + askResponse.finish(false) $confirm.notify("error") $repo.remove($scope.sprint).then(onSuccess, onError) diff --git a/app/coffee/modules/backlog/main.coffee b/app/coffee/modules/backlog/main.coffee index ef6f2fce..7c24f62f 100644 --- a/app/coffee/modules/backlog/main.coffee +++ b/app/coffee/modules/backlog/main.coffee @@ -546,15 +546,15 @@ class BacklogController extends mixOf(taiga.Controller, taiga.PageMixin, taiga.F message = us.subject - @confirm.askOnDelete(title, message).then (finish) => + @confirm.askOnDelete(title, message).then (askResponse) => # We modify the userstories in scope so the user doesn't see the removed US for a while @scope.userstories = _.without(@scope.userstories, us) promise = @.repo.remove(us) promise.then => - finish() + askResponse.finish() @.loadBacklog() promise.then null, => - finish(false) + askResponse.finish(false) @confirm.notify("error") addNewUs: (type) -> diff --git a/app/coffee/modules/common/attachments.coffee b/app/coffee/modules/common/attachments.coffee index fb966130..2993a531 100644 --- a/app/coffee/modules/common/attachments.coffee +++ b/app/coffee/modules/common/attachments.coffee @@ -136,16 +136,16 @@ class AttachmentsController extends taiga.Controller title = @translate.instant("ATTACHMENT.TITLE_LIGHTBOX_DELETE_ATTACHMENT") message = @translate.instant("ATTACHMENT.MSG_LIGHTBOX_DELETE_ATTACHMENT", {fileName: attachment.name}) - return @confirm.askOnDelete(title, message).then (finish) => + return @confirm.askOnDelete(title, message).then (askResponse) => onSuccess = => - finish() + askResponse.finish() index = @.attachments.indexOf(attachment) @.attachments.splice(index, 1) @.updateCounters() @rootscope.$broadcast("attachment:delete") onError = => - finish(false) + askResponse.finish(false) message = @translate.instant("ATTACHMENT.ERROR_DELETE_ATTACHMENT", {errorMessage: message}) @confirm.notify("error", null, message) return @q.reject() diff --git a/app/coffee/modules/common/components.coffee b/app/coffee/modules/common/components.coffee index 4fd9db57..bfc27854 100644 --- a/app/coffee/modules/common/components.coffee +++ b/app/coffee/modules/common/components.coffee @@ -223,11 +223,7 @@ WatchersDirective = ($rootscope, $confirm, $repo, $qqueue, $template, $compile, html = $compile(template(ctx))($scope) $el.html(html) - if isEditable() and watchers.length == 0 - $el.find(".title").text("Add watchers") - $el.find(".watchers-header").addClass("no-watchers") - - $el.on "click", ".icon-delete", (event) -> + $el.on "click", ".js-delete-watcher", (event) -> event.preventDefault() return if not isEditable() target = angular.element(event.currentTarget) @@ -236,15 +232,15 @@ WatchersDirective = ($rootscope, $confirm, $repo, $qqueue, $template, $compile, title = $translate.instant("COMMON.WATCHERS.TITLE_LIGHTBOX_DELETE_WARTCHER") message = $scope.usersById[watcherId].full_name_display - $confirm.askOnDelete(title, message).then (finish) => - finish() + $confirm.askOnDelete(title, message).then (askResponse) => + askResponse.finish() watcherIds = _.clone($model.$modelValue.watchers, false) watcherIds = _.pull(watcherIds, watcherId) deleteWatcher(watcherIds) - $el.on "click", ".add-watcher", (event) -> + $el.on "click", ".js-add-watcher", (event) -> event.preventDefault() return if not isEditable() $scope.$apply -> @@ -420,14 +416,14 @@ DeleteButtonDirective = ($log, $repo, $confirm, $location, $template) -> title = $attrs.onDeleteTitle subtitle = $model.$modelValue.subject - $confirm.askOnDelete(title, subtitle).then (finish) => + $confirm.askOnDelete(title, subtitle).then (askResponse) => promise = $repo.remove($model.$modelValue) promise.then => - finish() + askResponse.finish() url = $scope.$eval($attrs.onDeleteGoToUrl) $location.path(url) promise.then null, => - finish(false) + askResponse.finish(false) $confirm.notify("error") $scope.$on "$destroy", -> diff --git a/app/coffee/modules/common/lightboxes.coffee b/app/coffee/modules/common/lightboxes.coffee index fa1e5965..cd6f9925 100644 --- a/app/coffee/modules/common/lightboxes.coffee +++ b/app/coffee/modules/common/lightboxes.coffee @@ -478,7 +478,7 @@ AssignedToLightboxDirective = (lightboxService, lightboxKeyboardNavigationServic html = usersTemplate(ctx) html = $compile(html)($scope) - $el.find("div.watchers").html(html) + $el.find(".assigned-to-list").html(html) closeLightbox = () -> lightboxKeyboardNavigationService.stop() @@ -499,7 +499,7 @@ AssignedToLightboxDirective = (lightboxService, lightboxKeyboardNavigationServic render(selectedUser, searchingText) $el.find('input').focus() - $el.on "click", ".watcher-single", (event) -> + $el.on "click", ".assigned-to-single", (event) -> event.preventDefault() target = angular.element(event.currentTarget) @@ -573,7 +573,7 @@ WatchersLightboxDirective = ($repo, lightboxService, lightboxKeyboardNavigationS html = usersTemplate(ctx) html = $compile(html)($scope) - $el.find("div.watchers").html(html) + $el.find(".ticket-watchers").html(html) closeLightbox = () -> lightboxKeyboardNavigationService.stop() @@ -597,7 +597,7 @@ WatchersLightboxDirective = ($repo, lightboxService, lightboxKeyboardNavigationS render(users) $el.find("input").focus() - $el.on "click", ".watcher-single", debounce 2000, (event) -> + $el.on "click", ".user-list-single", debounce 2000, (event) -> closeLightbox() event.preventDefault() diff --git a/app/coffee/modules/common/loading.coffee b/app/coffee/modules/common/loading.coffee index 20e8d3ea..7bf8efbb 100644 --- a/app/coffee/modules/common/loading.coffee +++ b/app/coffee/modules/common/loading.coffee @@ -21,19 +21,29 @@ module = angular.module("taigaCommon") -TgLoadingService = -> +TgLoadingService = ($compile) -> spinner = "" return () -> service = { settings: { target: null, + scope: null, classes: [] - timeout: 0 + timeout: 0, + template: null }, target: (target) -> service.settings.target = target + return service + scope: (scope) -> + service.settings.scope = scope + + return service + template: (template) -> + service.settings.template = template + return service removeClasses: (classess...) -> service.settings.classes = classess @@ -51,9 +61,11 @@ TgLoadingService = -> # The loader is shown after that quantity of milliseconds timeoutId = setTimeout (-> if not target.hasClass('loading') - service.settings.oldContent = target.html() + if !service.settings.template + service.settings.template = target.html() target.addClass('loading') + target.html(spinner) ), service.settings.timeout @@ -71,25 +83,35 @@ TgLoadingService = -> removeClasses = service.settings.classes removeClasses.map (className) -> service.settings.target.addClass(className) - target.html(service.settings.oldContent) + target.html(service.settings.template) target.removeClass('loading') + if service.settings.scope + $compile(target.contents())(service.settings.scope) + return service } return service +TgLoadingService.$inject = [ + "$compile" +] + module.factory("$tgLoading", TgLoadingService) LoadingDirective = ($loading) -> link = ($scope, $el, attr) -> currentLoading = null + template = $el.html() $scope.$watch attr.tgLoading, (showLoading) => - if showLoading currentLoading = $loading() .target($el) + .timeout(50) + .template(template) + .scope($scope) .start() else if currentLoading currentLoading.finish() diff --git a/app/coffee/modules/issues/list.coffee b/app/coffee/modules/issues/list.coffee index 63640d44..6921b768 100644 --- a/app/coffee/modules/issues/list.coffee +++ b/app/coffee/modules/issues/list.coffee @@ -620,18 +620,18 @@ IssuesFiltersDirective = ($q, $log, $location, $rs, $confirm, $loading, $templat title = $translate.instant("ISSUES.FILTERS.CONFIRM_DELETE.TITLE") message = $translate.instant("ISSUES.FILTERS.CONFIRM_DELETE.MESSAGE", {customFilterName: customFilterName}) - $confirm.askOnDelete(title, message).then (finish) -> + $confirm.askOnDelete(title, message).then (askResponse) -> promise = $ctrl.deleteMyFilter(customFilterName) promise.then -> promise = $ctrl.loadMyFilters() promise.then (filters) -> - finish() + askResponse.finish() $scope.filters.myFilters = filters renderFilters($scope.filters.myFilters) promise.then null, -> - finish() + askResponse.finish() promise.then null, -> - finish(false) + askResponse.finish(false) $confirm.notify("error") diff --git a/app/coffee/modules/related-tasks.coffee b/app/coffee/modules/related-tasks.coffee index b2a4595f..0035a646 100644 --- a/app/coffee/modules/related-tasks.coffee +++ b/app/coffee/modules/related-tasks.coffee @@ -85,14 +85,15 @@ RelatedTaskRowDirective = ($repo, $compile, $confirm, $rootscope, $loading, $tem task = $model.$modelValue message = task.subject - $confirm.askOnDelete(title, message).then (finish) -> + $confirm.askOnDelete(title, message).then (askResponse) -> promise = $repo.remove(task) promise.then -> - finish() + askResponse.finish() $confirm.notify("success") $scope.$emit("related-tasks:delete") promise.then null, -> + askResponse.finish(false) $confirm.notify("error") $scope.$watch $attrs.ngModel, (val) -> diff --git a/app/coffee/modules/wiki/main.coffee b/app/coffee/modules/wiki/main.coffee index 902217e6..108149b0 100644 --- a/app/coffee/modules/wiki/main.coffee +++ b/app/coffee/modules/wiki/main.coffee @@ -126,15 +126,15 @@ class WikiDetailController extends mixOf(taiga.Controller, taiga.PageMixin) title = @translate.instant("WIKI.DELETE_LIGHTBOX_TITLE") message = @scope.wikiTitle - @confirm.askOnDelete(title, message).then (finish) => + @confirm.askOnDelete(title, message).then (askResponse) => onSuccess = => - finish() + askResponse.finish() ctx = {project: @scope.projectSlug} @location.path(@navUrls.resolve("project-wiki", ctx)) @confirm.notify("success") onError = => - finish(false) + askResponse.finish(false) @confirm.notify("error") @repo.remove(@scope.wiki).then onSuccess, onError diff --git a/app/coffee/modules/wiki/nav.coffee b/app/coffee/modules/wiki/nav.coffee index 15d46dd0..e63fb1a5 100644 --- a/app/coffee/modules/wiki/nav.coffee +++ b/app/coffee/modules/wiki/nav.coffee @@ -83,17 +83,17 @@ WikiNavDirective = ($tgrepo, $log, $location, $confirm, $navUrls, $analytics, $l title = $translate.instant("WIKI.DELETE_LIGHTBOX_TITLE") message = $scope.wikiLinks[linkId].title - $confirm.askOnDelete(title, message).then (finish) => + $confirm.askOnDelete(title, message).then (askResponse) => promise = $tgrepo.remove($scope.wikiLinks[linkId]) promise.then -> promise = $ctrl.loadWikiLinks() promise.then -> - finish() + askResponse.finish() render($scope.wikiLinks) promise.then null, -> - finish() + askResponse.finish() promise.then null, -> - finish(false) + askResponse.finish(false) $confirm.notify("error") $el.on "keyup", ".new input", (event) -> diff --git a/app/fonts/taiga.eot b/app/fonts/taiga.eot index f8cdfc90..17c23921 100644 Binary files a/app/fonts/taiga.eot and b/app/fonts/taiga.eot differ diff --git a/app/fonts/taiga.svg b/app/fonts/taiga.svg index 435c7a92..afb37235 100644 --- a/app/fonts/taiga.svg +++ b/app/fonts/taiga.svg @@ -30,34 +30,32 @@ - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + - - - - - - - - - - - - - + + + + + + + + + + + diff --git a/app/fonts/taiga.ttf b/app/fonts/taiga.ttf index 67c906cc..e31d761e 100644 Binary files a/app/fonts/taiga.ttf and b/app/fonts/taiga.ttf differ diff --git a/app/fonts/taiga.woff b/app/fonts/taiga.woff index 5c346f3a..e58fb93e 100644 Binary files a/app/fonts/taiga.woff and b/app/fonts/taiga.woff differ diff --git a/app/modules/home/duties/duty.jade b/app/modules/home/duties/duty.jade index c1877394..d3efacee 100644 --- a/app/modules/home/duties/duty.jade +++ b/app/modules/home/duties/duty.jade @@ -1,18 +1,23 @@ -a(href="{{ ::vm.duty.get('url') }}", title="{{ ::duty.get('subject') }}") - - img.avatar(ng-if="::vm.duty.get('assigned_to_extra_info')" - ng-src="{{ ::vm.duty.get('assigned_to_extra_info').get('photo') }}" - title="{{ ::vm.duty.get('assigned_to_extra_info').get('full_name_display') }}") - - img.avatar(ng-if="::!vm.duty.get('assigned_to_extra_info')" - src="/images/unnamed.png" - title="{{'ACTIVITY.VALUES.UNASSIGNED' | translate}}") - - div.duty-data - div - span.duty-type {{ ::vm.getDutyType() }} - span.duty-status(ng-style="{'color': vm.duty.get('status_extra_info').get('color')}") {{ ::vm.duty.get('status_extra_info').get('name') }} - span.duty-title - span.duty-id(tg-bo-ref="duty.get('ref')") - span.duty-name {{ ::duty.get('subject') }} - div.duty-project {{ ::vm.duty.get('projectName')}} +a.list-itemtype-ticket( + href="{{ ::vm.duty.get('url') }}" + title="{{ ::duty.get('subject') }}" +) + div.list-itemtype-avatar(ng-if="::vm.duty.get('assigned_to_extra_info')") + img( + ng-src="{{ ::vm.duty.get('assigned_to_extra_info').get('photo') }}" + title="{{ ::vm.duty.get('assigned_to_extra_info').get('full_name_display') }}" + ) + div.list-itemtype-avatar(ng-if="::!vm.duty.get('assigned_to_extra_info')") + img( + src="/images/unnamed.png" + title="{{'ACTIVITY.VALUES.UNASSIGNED' | translate}}" + ) + div.list-itemtype-ticket-data + p + span.ticket-project {{ ::vm.duty.get('projectName')}} + span.ticket-type {{ ::vm.getDutyType() }} + span.ticket-status(ng-style="{'color': vm.duty.get('status_extra_info').get('color')}") {{ ::vm.duty.get('status_extra_info').get('name') }} + + h2 + span.ticket-id(tg-bo-ref="duty.get('ref')") + span.ticket-title {{ ::duty.get('subject') }} diff --git a/app/modules/home/duties/duty.scss b/app/modules/home/duties/duty.scss index 8cb9d689..b8ca2f03 100644 --- a/app/modules/home/duties/duty.scss +++ b/app/modules/home/duties/duty.scss @@ -4,55 +4,25 @@ .duty-single { border-bottom: 1px solid $whitish; cursor: pointer; - padding: .5rem; + transition: background .2s; + transition-delay: .2s; + &:hover { + background: rgba($primary-light, .1); + } &:last-child { border: 0; } &.blocked { background: rgba($red-light, .2); - .duty-type, - .duty-status { - color: $red; - } + color: $red; } >a { align-items: center; + border-bottom: 0; display: flex; flex-direction: row; } } - .avatar { - flex-basis: 47px; - height: 47px; - margin-right: .5rem; - width: 47px; - } - .duty-data { - flex: 1; - margin-right: .5rem; - } - .duty-type, - .duty-status { - @extend %small; - color: $gray; - margin-right: .3rem; - } - .duty-title { - display: block; - margin-top: .25rem; - } - .duty-id { - color: $gray-light; - margin-right: .3rem; - } - .duty-project { - @extend %small; - align-self: flex-start; - color: $gray-light; - margin-left: auto; - text-align: right; - width: 120px; - } .see-more { display: block; margin: 2rem 30%; diff --git a/app/modules/navigation-bar/navigation-bar.scss b/app/modules/navigation-bar/navigation-bar.scss index 13702f76..920a1eea 100644 --- a/app/modules/navigation-bar/navigation-bar.scss +++ b/app/modules/navigation-bar/navigation-bar.scss @@ -106,7 +106,7 @@ $dropdown-width: 350px; min-width: $dropdown-width; position: absolute; top: 2.4rem; - z-index: 99; + z-index: 999; } } diff --git a/app/modules/user-timeline/user-timeline/user-timeline.scss b/app/modules/user-timeline/user-timeline/user-timeline.scss index 6446d82a..8086bcbd 100644 --- a/app/modules/user-timeline/user-timeline/user-timeline.scss +++ b/app/modules/user-timeline/user-timeline/user-timeline.scss @@ -1,7 +1,7 @@ .profile-timeline { .activity-item { border-bottom: 1px solid $whitish; - padding: 1rem .5rem; + padding: 1rem .5rem 1rem 0; position: relative; p { margin-bottom: 0; diff --git a/app/partials/common/components/assigned-to.jade b/app/partials/common/components/assigned-to.jade index ee144283..7ad68ab3 100644 --- a/app/partials/common/components/assigned-to.jade +++ b/app/partials/common/components/assigned-to.jade @@ -9,14 +9,14 @@ a(href="" title="{{ 'COMMON.ASSIGNED_TO.TITLE_ACTION_EDIT_ASSIGNMENT'|translate }}", class!="user-assigned <% if(isEditable){ %>editable<% }; %>") span.assigned-name - <% if (assignedTo) { %> - <%- assignedTo.full_name_display %> - <% } else { %> - | {{ 'COMMON.ASSIGNED_TO.NOT_ASSIGNED'|translate }} - <% } %> - <% if(isEditable){ %> - span.icon.icon-arrow-bottom - <% }; %> + <% if (assignedTo) { %> + <%- assignedTo.full_name_display %> + <% } else { %> + | {{ 'COMMON.ASSIGNED_TO.NOT_ASSIGNED'|translate }} + <% } %> + <% if(isEditable){ %> + span.icon.icon-arrow-bottom + <% }; %> <% if (assignedTo!==null && isEditable) { %> a.icon.icon-delete(href="" title="{{'COMMON.ASSIGNED_TO.DELETE_ASSIGNMENT' | translate}}") <% } %> diff --git a/app/partials/common/components/delete-button.jade b/app/partials/common/components/delete-button.jade index 205e4fb4..cc325950 100644 --- a/app/partials/common/components/delete-button.jade +++ b/app/partials/common/components/delete-button.jade @@ -1,2 +1,2 @@ -a(href="", class="button button-red") +a.button-red.button-delete(href="") span(translate="COMMON.DELETE") diff --git a/app/partials/common/components/status-display.jade b/app/partials/common/components/status-display.jade index 1062f3f4..d9c04b04 100644 --- a/app/partials/common/components/status-display.jade +++ b/app/partials/common/components/status-display.jade @@ -3,5 +3,5 @@ span(translate="COMMON.STATUS.CLOSED") <% } else { %> span(translate="COMMON.STATUS.OPEN") <% } %> -span(class="us-detail-status", style!="color:<%- status.color %>") +span(style!="color:<%- status.color %>") | <%- status.name %> diff --git a/app/partials/common/components/watchers.jade b/app/partials/common/components/watchers.jade index b11a4aeb..31e4ea94 100644 --- a/app/partials/common/components/watchers.jade +++ b/app/partials/common/components/watchers.jade @@ -1,22 +1,29 @@ -<% if(isEditable){ %> -.watchers-header - span.title(translate="COMMON.WATCHERS.TITLE") - a.icon.icon-plus.add-watcher(href="", title="{{'COMMON.WATCHERS.ADD' | translate}}") -<% } else if(watchers.length > 0){ %> -.watchers-header - span.title(translate="COMMON.WATCHERS.TITLE") -<% }; %> - <% _.each(watchers, function(watcher) { %> <% if(watcher) { %> -.watcher-single - .watcher-avatar - img(src!="<%- watcher.photo %>" alt!="<%- watcher.full_name_display %>") - .watcher-name +.user-list-single + .user-list-avatar + img( + src!="<%- watcher.photo %>" + alt!="<%- watcher.full_name_display %>" + ) + .user-list-name span <%- watcher.full_name_display %> <% if(isEditable){ %> - a.icon.icon-delete(data-watcher-id!="<%- watcher.id %>" href="" title="{{'COMMON.WATCHERS.DELETE' | translate}}") + a.icon.icon-delete.js-delete-watcher( + href="" + data-watcher-id!="<%- watcher.id %>" + title="{{'COMMON.WATCHERS.DELETE' | translate}}" + ) <% }; %> <% } %> <% }); %> + +<% if(isEditable){ %> +a.add-watcher.js-add-watcher( + href="" + title="{{'COMMON.WATCHERS.TITLE_ADD' | translate}}" +) + span.icon.icon-plus + span(translate="COMMON.WATCHERS.ADD") +<% }; %> diff --git a/app/partials/common/estimation/us-estimation-points-per-role.jade b/app/partials/common/estimation/us-estimation-points-per-role.jade index 8fd9ce85..904d6b4a 100644 --- a/app/partials/common/estimation/us-estimation-points-per-role.jade +++ b/app/partials/common/estimation/us-estimation-points-per-role.jade @@ -1,9 +1,9 @@ ul.points-per-role - li.total + li.ticket-role-points.total span.points <%- totalPoints %> span.role(translate="US.TOTAL_POINTS") <% _.each(roles, function(role) { %> - li(class!="total <% if(editable){ %>clickable<% } %>", data-role-id!="<%- role.id %>", title!="<%- role.name %>") + li.ticket-role-points(class!="total <% if(editable){ %>clickable<% } %>", data-role-id!="<%- role.id %>", title!="<%- role.name %>") span.points <%- role.points %> span.role <%- role.name %> <% }); %> diff --git a/app/partials/common/lightbox/lightbox-assigned-to-users.jade b/app/partials/common/lightbox/lightbox-assigned-to-users.jade index 6dd8e65b..49c44b9a 100644 --- a/app/partials/common/lightbox/lightbox-assigned-to-users.jade +++ b/app/partials/common/lightbox/lightbox-assigned-to-users.jade @@ -1,23 +1,38 @@ <% if (selected) { %> -.watcher-single.active - .watcher-avatar - a(href="", title="{{'COMMON.ASSIGNED_TO' | translate}}", class="avatar") +.user-list-single.is-active + .user-list-avatar + a( + href="" + title="{{'COMMON.ASSIGNED_TO' | translate}}" + ) img(src!="<%- selected.photo %>") - a(href="", title!="<%- selected.full_name_display %>", class="watcher-name") + a.user-list-name( + href="" + title!="<%- selected.full_name_display %>" + ) | <%-selected.full_name_display %> - a(href="", title="{{'COMMON.ASSIGNED_TO.REMOVE_ASSIGNED' | translate}}", class="icon icon-delete remove-assigned-to") + a.icon-delete.remove-assigned-to( + href="" + title="{{'COMMON.ASSIGNED_TO.REMOVE_ASSIGNED' | translate}}" + ) <% } %> <% _.each(users, function(user) { %> -.watcher-single(data-user-id!="<%- user.id %>") - .watcher-avatar - a(href="#", title="{{'COMMON.ASSIGNED_TO.TITLE' | translate}}", class="avatar") +.user-list-single(data-user-id!="<%- user.id %>") + .user-list-avatar + a( + href="#" + title="{{'COMMON.ASSIGNED_TO.TITLE' | translate}}" + ) img(src!="<%- user.photo %>") - a(href="", title!="<%- user.full_name_display %>", class="watcher-name") + a.user-list-name( + href="" + title!="<%- user.full_name_display %>" + ) | <%- user.full_name_display %> <% }) %> <% if (showMore) { %> -div(class="more-watchers") +.more-watchers span(translate="COMMON.ASSIGNED_TO.TOO_MANY") <% } %> diff --git a/app/partials/common/lightbox/lightbox-assigned-to.jade b/app/partials/common/lightbox/lightbox-assigned-to.jade index 34e87b9a..7f00751d 100644 --- a/app/partials/common/lightbox/lightbox-assigned-to.jade +++ b/app/partials/common/lightbox/lightbox-assigned-to.jade @@ -6,4 +6,4 @@ div.form input(type="text", data-maxlength="500", placeholder="{{'LIGHTBOX.ASSIGNED_TO.SEARCH' | translate}}", ng-model="usersSearch") //-This block is rendered by the directive - div.watchers + .assigned-to-list diff --git a/app/partials/common/lightbox/lightbox-users.jade b/app/partials/common/lightbox/lightbox-users.jade index 180b8fb3..2c43e246 100644 --- a/app/partials/common/lightbox/lightbox-users.jade +++ b/app/partials/common/lightbox/lightbox-users.jade @@ -4,5 +4,5 @@ div.form h2.title(translate="COMMON.WATCHERS.ADD") fieldset input(type="text", data-maxlength="500", placeholder="{{'LIGHTBOX.ASSIGNED_TO.SEARCH' | translate}}", ng-model="usersSearch") - div.watchers + div.ticket-watchers //- The content of this is rendered by directive diff --git a/app/partials/includes/modules/lightbox-us-create-edit.jade b/app/partials/includes/modules/lightbox-us-create-edit.jade index 067d5c27..98259aa3 100644 --- a/app/partials/includes/modules/lightbox-us-create-edit.jade +++ b/app/partials/includes/modules/lightbox-us-create-edit.jade @@ -6,7 +6,7 @@ form input(type="text", name="subject", ng-model="us.subject", placeholder="{{'COMMON.FIELDS.SUBJECT' | translate}}", data-required="true", data-maxlength="500") - fieldset.estimation + fieldset.ticket-estimation tg-lb-us-estimation(ng-model="us") fieldset diff --git a/app/styles/components/buttons.scss b/app/styles/components/buttons.scss index 51f877c7..743d669a 100755 --- a/app/styles/components/buttons.scss +++ b/app/styles/components/buttons.scss @@ -1,7 +1,7 @@ .button, %button { - @extend %medium; - @extend %title; + @extend %light; + @extend %small; background: transparent; border: 0; color: $white; diff --git a/app/styles/components/created-by.scss b/app/styles/components/created-by.scss index f021993a..734bd5f9 100644 --- a/app/styles/components/created-by.scss +++ b/app/styles/components/created-by.scss @@ -1,30 +1,27 @@ -.us-created-by { +.ticket-created-by { display: flex; margin-bottom: 1rem; margin-top: .5rem; position: relative; .user-avatar { - flex-basis: 40px; + flex-basis: 3rem; flex-grow: 0; + margin-right: .5rem; img { - border-radius: 8%; width: 100%; } } .created-by { - flex-basis: 70px; - flex-grow: 3; - margin-left: .5rem; .created-title, .created-date { + @extend %light; @extend %small; - color: $gray-light; + color: $gray; display: block; + line-height: 1.5; } - .created-user { - @extend %large; + .created-title { color: $primary; - cursor: default; &.editable { cursor: pointer; } diff --git a/app/styles/components/estimation.scss b/app/styles/components/estimation.scss new file mode 100644 index 00000000..340e7b11 --- /dev/null +++ b/app/styles/components/estimation.scss @@ -0,0 +1,66 @@ +%estimation { + .points-per-role { + display: flex; + flex-wrap: wrap; + } + .ticket-role-points { + background: rgba($gray-light, .1); + border-radius: 2px; + color: rgba($grayer, .3); + flex-basis: 20%; + flex-grow: 1; + flex-shrink: 0; + margin: .1rem; + padding: .5rem 0 .1rem; + position: relative; + text-align: center; + transition: color .3s linear; + &.active { + background: rgba($primary-light, .9); + color: $whitish; + } + &:first-child { + background: rgba($grayer, .25); + border-radius: 0; + color: $whitish; + } + &:last-child { + border: 0; + } + .points { + @extend %larger; + @extend %text; + display: block; + text-align: center; + } + .role { + @extend %small; + @include ellipsis(90%); + display: inline-block; + text-align: center; + } + } + .popover { + @include popover(200px, $top: 105%, $left: 35%, $arrow-width: 10px, $arrow-top: -5px, $arrow-left: 10px, $arrow-height: 10px); + li { + display: inline-block; + width: 23%; + } + a { + display: block; + text-align: center; + &:hover, + &.active { + background: $primary-light; + color: $white; + } + } + &.fix { + @include popover(200px, $top: 105%, $left: -160px, $arrow-width: 10px, $arrow-top: -5px, $arrow-left: 90%, $arrow-height: 10px); + } + } +} + +.ticket-estimation { + @extend %estimation; +} diff --git a/app/styles/components/list-items.scss b/app/styles/components/list-items.scss new file mode 100644 index 00000000..92e35c8a --- /dev/null +++ b/app/styles/components/list-items.scss @@ -0,0 +1,104 @@ +// Like and Watch number component + +// Common styles for all list items +@mixin list-itemtype-common { + @include list-itemtype-track; + border-bottom: 1px solid $whitish; + display: flex; + padding: .5rem; + padding-right: 0; + h2 { + @extend %normal; + @extend %text; + line-height: 1.4; + margin-bottom: 0; + text-transform: none; + } + p { + @extend %light; + margin-bottom: 0; + } + .list-itemtype-avatar { + flex-basis: 3rem; + flex-shrink: 0; + margin-right: .75rem; + min-width: 3rem; + img { + width: 100%; + } + } +} + +.list-itemtype-project { + @include list-itemtype-common; + justify-content: space-between; + h2 { + @extend %large; + } + .list-itemtype-project-members { + align-self: flex-end; + display: flex; + flex-direction: row-reverse; + flex-grow: 0; + flex-wrap: wrap-reverse; + margin-top: 1rem; + img { + border-radius: .1rem; + margin-right: .3rem; + width: 2rem; + } + } + .list-itemtype-project-tags { + align-self: flex-end; + display: flex; + flex: 3; + flex-wrap: wrap; + margin-top: .5rem; + } + .tag { + align-self: flex-end; + margin-right: .5rem; + padding: .5rem; + } +} + +.list-itemtype-ticket { + @include list-itemtype-common; + h2 { + @extend %medium; + } + .ticket-type, + .ticket-project { + margin-right: .3rem; + } + .ticket-project { + color: $gray-light; + } + .list-itemtype-ticket-data { + flex: 1; + margin-right: 1rem; + } + .ticket-id { + color: $gray-light; + margin-right: .3rem; + } + +} + + +.list-itemtype-user { + @include list-itemtype-common; + h2 { + @extend %large; + } + .extra-info { + @extend %small; + @extend %light; + margin-top: .25rem; + } +} + +.list-itemtype-timeline { + @include list-itemtype-common; + +} diff --git a/app/styles/components/track-btn.scss b/app/styles/components/track-btn.scss new file mode 100644 index 00000000..a03e694b --- /dev/null +++ b/app/styles/components/track-btn.scss @@ -0,0 +1,176 @@ +////////////////////// +//Watch like buttons +////////////////////// + +.track-buttons-container { + @extend %small; + position: relative; +} + +.track-button { + align-items: stretch; + display: inline-flex; + position: relative; + .track-inner { + align-items: stretch; + background: $whitish; + border-radius: 4px 0 0 4px; + display: inline-flex; + flex: 1; + margin-right: .1rem; + width: 140px; + &:hover { + background: darken($whitish, 5%); + transition: background .3s; + } + span { + align-self: center; + } + } + &:hover { + color: $blackish; + } + &.active { + .track-inner { + background: rgba($primary-light, .2); + } + .track-icon { + path { + fill: $primary; + } + } + } + &.watch-container { + margin-right: 1rem; + position: relative; + } + .track-icon { + padding: .3rem .6rem .3rem .75rem; + svg { + height: 1.1rem; + position: relative; + top: 2px; + width: 1.1rem; + } + path { + fill: $grayer; + } + } + .track-button-counter { + align-items: center; + border: 1px solid $whitish; + display: flex; + justify-content: center; + min-width: 2rem; + } +} +.watch-button, +.like-button { + &.active { + &.is-hover { + .track-inner { + background: $red; + color: $whitish; + transition: background .3s; + } + path { + fill: $red-light; + } + } + } +} + +.watch-options { + animation: dropdownFade .2s cubic-bezier(.09, 0, .99, .01) alternate; + background: rgba($black, .9); + border-radius: 4px; + margin: 0; + margin-top: 2.5rem; + min-width: 300px; + padding: 1rem; + position: absolute; + right: 0; + top: 0; + z-index: 99; + &.hidden { + animation: dropdownFade .2s cubic-bezier(.09, 0, .99, .01) reverse; + } + li { + margin: 0; + &:last-child a { + border: 0; + } + } + a { + @extend %light; + border-bottom: 1px solid rgba($gray-light, .3); + color: $white; + display: flex; + justify-content: space-between; + padding: .5rem 0; + &.active { + color: $primary-light; + } + } + .watch-check { + height: 1.25rem; + width: 1.25rem; + path { + fill: $primary-light; + } + } +} + +.upvote-btn { + align-content: center; + align-items: stretch; + display: flex; + flex: 0; + flex-basis: 3rem; + justify-content: center; + margin-right: .3rem; + a { + background: $whitish; + color: $gray-light; + display: block; + padding: 1rem; + text-align: center; + &:hover { + background: darken($whitish, 5%); + color: $primary-dark; + transition: background .3s; + path { + fill: $primary-dark; + } + } + &.active { + background: rgba($primary-light, .2); + color: $primary; + transition: all .3s; + path { + fill: $primary; + } + } + &.is-hover { + background: $red; + color: $whitish; + svg { + transform: rotate(180deg); + transition: all .3s; + } + path { + fill: $red-light; + } + } + } + svg { + height: 1rem; + width: 1rem; + } + span { + display: block; + } + path { + fill: $gray-light; + } +} diff --git a/app/styles/components/user-list.scss b/app/styles/components/user-list.scss new file mode 100644 index 00000000..0000c4dc --- /dev/null +++ b/app/styles/components/user-list.scss @@ -0,0 +1,84 @@ +%user-list { + .user-list-single { + align-content: center; + align-items: center; + background: transparent; + border-bottom: 1px solid $whitish; + display: flex; + padding: .5rem .5rem .3rem; + vertical-align: middle; + + &:last-child { + border: 0; + } + } + .user-list-avatar { + flex-basis: 3rem; + margin-right: .25rem; + max-width: 3rem; + img { + width: 100%; + } + } + .user-list-name { + @extend %light; + color: $grayer; + margin-left: .5rem; + } +} + +.assigned-to-list { + @extend %user-list; + margin-top: 1rem; + .user-list-single { + &:hover { + background: lighten($primary, 58%); + cursor: pointer; + transition: background .3s linear; + transition-delay: .2s; + } + &.is-active { + background: lighten($primary, 55%); + cursor: pointer; + margin-bottom: 1rem; + position: relative; + transition: background .3s linear; + transition-delay: .1s; + .icon-delete { + opacity: 1; + position: absolute; + right: 1rem; + top: 1.3rem; + transition: opacity .2s ease-in; + } + } + } +} + +.ticket-watchers { + @extend %user-list; + margin-top: 1rem; + .user-list-single { + &:hover { + .icon-delete { + opacity: 1; + transition: opacity .2s ease-in; + } + } + } + .user-list-name { + flex: 1; + position: relative; + } + .icon-delete { + opacity: 0; + position: absolute; + right: .5rem; + top: 0; + transition: all .2s ease-in; + &:hover { + color: $red; + transition: color .3s ease-in; + } + } +} diff --git a/app/styles/components/watchers.scss b/app/styles/components/watchers.scss deleted file mode 100644 index 5c456568..00000000 --- a/app/styles/components/watchers.scss +++ /dev/null @@ -1,66 +0,0 @@ -.watchers { - margin-top: 1rem; - .watchers-header { - border-bottom: 2px solid $gray-light; - padding: .5rem; - position: relative; - .title { - @extend %large; - @extend %title; - text-transform: uppercase; - } - .icon { - @extend %large; - position: absolute; - right: 1rem; - } - &.no-watchers { - border-bottom: 0; - } - } - .watcher-single { - align-content: center; - align-items: center; - background: transparent; - border-bottom: 1px solid $gray-light; - display: flex; - justify-content: center; - padding: .5rem 0 .3rem; - vertical-align: middle; - &:last-child { - border: 0; - } - &:hover { - .icon-delete { - opacity: 1; - transition: opacity .2s ease-in; - } - } - } - .watcher-avatar { - flex-basis: 3rem; - max-width: 3rem; - padding-left: .3rem; - img { - width: 100%; - } - } - .watcher-name { - @extend %small; - color: $grayer; - flex-grow: 8; - margin-left: 1rem; - position: relative; - } - .icon-delete { - opacity: 0; - position: absolute; - right: .5rem; - top: 0; - transition: all .2s ease-in; - &:hover { - color: $red; - transition: color .3s ease-in; - } - } -} diff --git a/app/styles/core/typography.scss b/app/styles/core/typography.scss index 9e50fb32..4738077e 100755 --- a/app/styles/core/typography.scss +++ b/app/styles/core/typography.scss @@ -1,14 +1,14 @@ // Typography - // Font face -@each $font-face in OpenSans-CondLight, OpenSans-Light, opensans-regular, opensans-semibold, taiga { +@each $font-face in OpenSans-CondLight, +OpenSans-Light, +opensans-regular, +opensans-semibold, +taiga { @font-face { font-family: '#{$font-face}'; - src: url('../fonts/#{$font-face}.eot?#iefix') format('embedded-opentype'), - url('../fonts/#{$font-face}.woff') format('woff'), - url('../fonts/#{$font-face}.ttf') format('truetype'), - url('../fonts/#{$font-face}.svg#{$font-face}') format('svg'); + src: url("../fonts/#{$font-face}.eot?#iefix") format('embedded-opentype'), url("../fonts/#{$font-face}.woff") format('woff'), url("../fonts/#{$font-face}.ttf") format('truetype'), url("../fonts/#{$font-face}.svg#{$font-face}") format('svg'); } } @@ -21,6 +21,7 @@ h6 { color: $blackish; font-weight: normal; line-height: 1.5; + a { font-weight: inherit; } @@ -32,6 +33,7 @@ h1 { line-height: 1.5; margin-bottom: 1rem; text-transform: uppercase; + span { @extend %xxlarge; margin-right: .5rem; @@ -39,22 +41,27 @@ h1 { text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; + &.green, &:last-child { flex-shrink: 0; } } + .project-name { display: inline-block; - max-width: 60%; + margin-bottom: 0; } + .project-name-short { display: inline-block; max-width: 40%; } + .green { color: $primary; } + .date { @include ellipsis(500px); color: $gray-light; @@ -71,12 +78,16 @@ h2 { p { line-height: 1.5; margin: 0 0 20px; + img { margin: 0; } } -em { font-style: italic; } +em { + font-style: italic; +} + strong { font-weight: bold; } @@ -93,14 +104,15 @@ hr { a, a:visited { text-decoration: none; + &:hover { transition: color .3s linear; } } // Taiga Icons - [data-icon]:before { + // scss-lint:disable ImportantRule content: attr(data-icon); font-family: 'taiga' !important; @@ -116,6 +128,7 @@ a:visited { [class^='icon-']:before, [class*=' icon-']:before { + // scss-lint:disable ImportantRule font-family: 'taiga' !important; -moz-osx-font-smoothing: grayscale; @@ -131,160 +144,203 @@ a:visited { .icon-bug:before { content: 'a'; } + .icon-copy:before { content: 'b'; } + .icon-minimize:before { content: 'c'; } + .icon-maximize:before { content: 'd'; } + .icon-comment:before { content: 'e'; } + .icon-plus:before { content: 'f'; } + .icon-attachments:before { content: 'g'; } + .icon-edit:before { content: 'h'; } + .icon-documents:before { content: 'i'; } + .icon-delete:before { content: 'j'; } + .icon-arrow-bottom:before { content: 'k'; } + .icon-arrow-left:before { content: 'l'; } + .icon-arrow-right:before { content: 'm'; } + .icon-arrow-up:before { content: 'n'; } + .icon-briefcase:before { content: 'o'; } + .icon-caret-down:before { content: 'p'; } + .icon-caret-up:before { content: 'q'; } + .icon-check-square:before { content: 'r'; } + .icon-notification-error:before { content: 's'; } + .icon-settings:before { content: 't'; } + .icon-document:before { content: 'u'; } + .icon-warning:before { content: 'v'; } + .icon-move:before { content: 'w'; } + .icon-drag-v:before { + content: 'x'; +} + +.icon-filter:before { content: 'y'; } -.icon-filter:before { + +.icon-help:before { content: 'z'; } -.icon-help:before { + +.icon-reload:before { + content: 'A'; +} + +.icon-writer:before { content: 'B'; } -.icon-reload:before { + +.icon-stats:before { content: 'C'; } -.icon-writer:before { + +.icon-floppy:before { content: 'D'; } -.icon-stats:before { + +.icon-warning-alt:before { content: 'E'; } -.icon-floppy:before { + +.icon-video:before { content: 'F'; } -.icon-warning-alt:before { + +.icon-bulk:before { + content: 'G'; +} + +.icon-vunfold:before { content: 'H'; } -.icon-video:before { + +.icon-tasks:before { content: 'I'; } -.icon-bulk:before { + +.icon-kanban:before { + content: 'J'; +} + +.icon-search:before { content: 'K'; } -.icon-vunfold:before { - content: 'M'; -} -.icon-tasks:before { - content: 'O'; -} -.icon-kanban:before { - content: 'P'; -} -.icon-search:before { - content: 'Q'; -} + .icon-wiki:before { content: 'L'; } + .icon-team:before { - content: 'T'; + content: 'M'; } + .icon-vfold:before { content: 'N'; } + .icon-issues:before { + content: 'O'; +} + +.icon-iocaine:before { + content: 'Q'; +} + +.icon-archive:before { + content: 'T'; +} + +.icon-capslock:before { content: 'U'; } -.icon-backlog:before, -.icon-scrum:before, { - content: 'R'; -} -.icon-iocaine:before { - content: 'S'; -} -.icon-closed-eye:before { + +.icon-upload:before { content: 'V'; } -.icon-open-eye:before { + +.icon-github:before { content: 'W'; } -.icon-archive:before { + +.icon-timeline:before { content: 'X'; } -.icon-capslock:before { + +.icon-backlog:before { + content: 'P'; +} + +.icon-project:before { + content: 'S'; +} + +.icon-heart:before { + content: 'R'; +} + +.icon-eye:before { content: 'Y'; } -.icon-upload:before { - content: 'Z'; -} -.icon-github:before { - content: 'A'; -} -.icon-timeline:before { - content: 'x'; -} -.icon-project:before { - content: 'G'; -} -.icon-star-fill:before { - content: 'J'; -} -.icon-star:before { - content: '0'; -} diff --git a/app/styles/dependencies/mixins.scss b/app/styles/dependencies/mixins.scss index cdde2e53..15005727 100644 --- a/app/styles/dependencies/mixins.scss +++ b/app/styles/dependencies/mixins.scss @@ -102,3 +102,34 @@ margin-left: calc(-#{$border-size}px + #{$border-width}px); } } + +// Mixin for track buttons +@mixin list-itemtype-track { + .list-itemtype-track { + @extend %small; + color: $gray-light; + display: flex; + flex-basis: 150px; + flex-shrink: 0; + justify-content: flex-end; + } + .list-itemtype-track-likers, + .list-itemtype-track-watchers { + display: inline-block; + width: 2.5rem; + &.active { + color: $primary; + path { + fill: currentcolor; + } + } + } + .icon { + svg { + max-width: 1rem; + } + path { + fill: currentcolor; + } + } +} diff --git a/app/styles/layout/us-detail.scss b/app/styles/layout/ticket-detail.scss similarity index 52% rename from app/styles/layout/us-detail.scss rename to app/styles/layout/ticket-detail.scss index f3ea42fe..3fa22c44 100644 --- a/app/styles/layout/us-detail.scss +++ b/app/styles/layout/ticket-detail.scss @@ -1,10 +1,17 @@ .us-story-main-data { margin-bottom: 2rem; + header { + align-content: center; + align-items: stretch; + display: flex; + justify-content: center; + margin-bottom: .5rem; + } .us-title { @extend %large; @extend %text; background: $whitish; - margin-bottom: .5rem; + flex: 1; padding: 1rem; position: relative; transition: all .2s linear; @@ -234,222 +241,3 @@ .comment-list { padding: 1rem; } - -.us-detail-status { - @extend %large; - color: $primary; - vertical-align: middle; -} - -.us-detail-progress-bar { - background: $grayer; - height: 26px; - margin-bottom: 1rem; - position: relative; - .current-progress { - background: $primary-light; - height: 26px; - left: 0; - position: absolute; - top: 0; - width: 60%; - } - .tasks-completed { - @extend %small; - color: $white; - left: 10px; - position: absolute; - top: 2px; - } -} - -.points-per-role { - display: flex; - flex-wrap: wrap; - position: relative; - > li { - background: rgba($gray-light, .1); - border-radius: 2px; - color: rgba($grayer, .3); - flex-basis: 80px; - flex-grow: 1; - flex-shrink: 0; - margin: .1rem; - max-width: 50%; - padding: .5rem 0 .1rem; - position: relative; - text-align: center; - transition: color .3s linear; - &.active { - background: rgba($primary-light, .9); - color: $whitish; - } - &:first-child { - background: rgba($grayer, .5); - color: $whitish; - } - &:last-child { - border: 0; - } - } - .points { - @extend %xlarge; - @extend %title; - display: block; - margin-bottom: .3rem; - text-align: center; - } - .role { - @extend %small; - @include ellipsis(90%); - display: inline-block; - text-align: center; - } - .popover { - @include popover(200px, $top: 105%, $left: 35%, $arrow-width: 10px, $arrow-top: -5px, $arrow-left: 10px, $arrow-height: 10px); - li { - display: inline-block; - width: 23%; - } - a { - display: block; - text-align: center; - &:hover, - &.active { - background: $primary-light; - color: $white; - } - } - &.fix { - @include popover(200px, $top: 105%, $left: -160px, $arrow-width: 10px, $arrow-top: -5px, $arrow-left: 90%, $arrow-height: 10px); - } - } - -} - -.duty-data-container { - @extend %small; - margin-bottom: 1rem; - .duty-data { - margin-bottom: .5rem; - &:last-child { - margin: 0; - } - div { - background: darken($whitish, 5%); - padding: .5rem; - padding-right: 1rem; - transition: background .2s ease-in; - } - .clickable { - &:hover { - background: darken($whitish, 10%); - transition: background .2s ease-in; - } - } - } - .level { - display: inline-block; - margin-right: .5rem; - vertical-align: top; - } - .level-name { - color: darken($whitish, 20%); - float: right; - text-transform: lowercase; - } -} - -.us-detail-settings { - margin-top: 2rem; - .button { - color: $white; - display: block; - margin-bottom: .5rem; - text-align: center; - width: 100%; - } - .button-gray { - background: $gray-light; - &:hover { - background: $gray-light; - } - &.editable { - &:hover { - background: $grayer; - cursor: pointer; - } - } - &.active { - background: $primary; - } - } - .item-block { - &.editable { - &:hover { - background: $red; - cursor: pointer; - } - } - } - .button-red { - &:hover, - &.active { - background: $red; - } - } - label { - &.editable { - cursor: pointer; - } - +input { - display: none; - } - } - span { - &.button-gray, - &.button-gray:hover { - background: $gray-light; - &.active { - background: $gray; - } - } - &.button-red, - &.button-red:hover { - background: $red-light; - &.active { - background: $red; - } - } - } - .loading-spinner { - @extend %loading-spinner; - } -} - -.us-status { - .type-data { - position: relative; - .pop-type { - @include popover(150px, '', 30px, '', ''); - } - } - .severity-data { - position: relative; - .pop-severity { - @include popover(150px, '', 30px, '', ''); - } - } - .priority-data { - position: relative; - .pop-priority { - @include popover(150px, '', 30px, '', ''); - } - } - .status-data { - position: relative; - .pop-status { - @include popover(150px, '', 30px, '', ''); - } - } -} diff --git a/app/styles/modules/backlog/backlog-table.scss b/app/styles/modules/backlog/backlog-table.scss index c128124e..a667513e 100644 --- a/app/styles/modules/backlog/backlog-table.scss +++ b/app/styles/modules/backlog/backlog-table.scss @@ -10,6 +10,7 @@ } .row { @extend %small; + align-items: center; border-bottom: 1px solid $gray-light; display: flex; padding: .5rem 0 .5rem .5rem; @@ -22,6 +23,24 @@ &:hover { background: transparent; } + .input { + flex-basis: 25px; + flex-grow: 0; + flex-shrink: 0; + } + .votes { + color: $gray; + flex-basis: 50px; + flex-grow: 0; + flex-shrink: 0; + text-align: center; + &.inactive { + color: $gray-light; + } + &.is-voted { + color: $primary-light; + } + } .user-stories { overflow: hidden; width: 100%; @@ -99,8 +118,8 @@ .backlog-table-header { .backlog-table-title { + @extend %text; @extend %medium; - @extend %bold; border-bottom: 2px solid $gray-light; flex-wrap: nowrap; padding-right: 30px; @@ -124,6 +143,7 @@ &:hover { background: lighten($primary, 60%); transition: background .2s ease-in; + transition-delay: .2s; .us-settings, .icon-drag-v { opacity: 1; @@ -150,26 +170,25 @@ height: 40px; width: 100%; } - .row-selected { + .row-selected, + .is-checked { background: lighten($primary, 60%); transition: background .2s ease-in; } + input { + &:checked { + color: $primary-light; + transition: color .2s ease-in; + } + } .user-story-name { align-items: center; display: flex; flex-wrap: nowrap; - input { - flex-shrink: 0; - margin-right: 1rem; - vertical-align: super; - &:checked+a { - color: $primary-light; - transition: color .2s ease-in; - } - } a { + @extend %light; display: inline-block; - flex-grow: 20; + flex: 1; max-width: 90%; overflow: hidden; text-overflow: ellipsis; diff --git a/app/styles/modules/common/assigned-to.scss b/app/styles/modules/common/assigned-to.scss index cfb80a23..207ae322 100644 --- a/app/styles/modules/common/assigned-to.scss +++ b/app/styles/modules/common/assigned-to.scss @@ -1,6 +1,7 @@ -.duty-assigned-to { +.ticket-assigned-to { + align-items: center; display: flex; - margin-top: 1rem; + margin-bottom: 1rem; position: relative; &:hover { .assigned-to { @@ -17,18 +18,19 @@ max-width: 2rem; } .user-avatar { - flex-grow: 1; + flex-basis: 4rem; + flex-shrink: 0; img { - border-radius: 8%; width: 100%; } } .assigned-to { - flex-grow: 3; - margin-left: 1rem; + flex-grow: 1; + margin-left: .5rem; .assigned-title { @extend %small; - color: $gray-light; + @extend %light; + color: $gray; display: block; } .user-assigned { @@ -40,7 +42,7 @@ cursor: pointer; } .icon { - vertical-align: top; + vertical-align: middle; } } .assigned-name { diff --git a/app/styles/modules/common/lightbox.scss b/app/styles/modules/common/lightbox.scss index a3eef28d..88a3fcb9 100644 --- a/app/styles/modules/common/lightbox.scss +++ b/app/styles/modules/common/lightbox.scss @@ -1,5 +1,9 @@ .lightbox { @extend %lightbox; + h2 { + @extend %larger; + @extend %text; + } } .lightbox-generic-form { @@ -17,9 +21,12 @@ margin-bottom: 1rem; max-height: 9rem; min-height: 7rem; + resize: vertical; } label { + @extend %xsmall; + background: $whitish; border: 1px solid $gray-light; color: $grayer; cursor: pointer; @@ -38,43 +45,33 @@ } .settings { - align-content: flex-start; - align-items: stretch; display: flex; - justify-content: flex-start; + justify-content: center; margin-bottom: 1rem; - fieldset { - flex-basis: 30%; - flex-grow: 1; margin-right: .5rem; - text-align: center; + &:hover { + color: $white; + transition: all .2s ease-in; + } &:last-child { margin: 0; } } - .requirement, .iocaine { &:hover { background: $primary-light; border: 1px solid $primary; - color: $white; - transition: all .2s ease-in; } } .blocked { - padding: 8px 30px; &:hover { background: $red-light; border: 1px solid $red; - color: $white; - transition: all .2s ease-in; } } - - .client-requirement, .team-requirement, .iocaine-flag { @@ -87,13 +84,16 @@ } .blocking-flag { + label { + align-self: stretch; + display: block; + } input:checked+label { background: $red; border: 1px solid $red; color: $white; } } - input { display: none; } @@ -464,30 +464,12 @@ flex-grow: 0; width: 600px; } - .watchers { - margin-top: 1rem; - min-height: 440px; - - .watcher-name { - flex-grow: 12; - } - } - .watcher-single { - position: relative; - &:hover, - &.active { - background: lighten($primary, 55%); - cursor: pointer; - } + .user-list-single { &:hover { + background: lighten($primary, 58%); + cursor: pointer; transition: background .3s linear; - } - &.active { - .icon { - opacity: 1; - right: 1rem; - top: 1.3rem; - } + transition-delay: .2s; } } .more-watchers { @@ -499,10 +481,12 @@ } .lb-create-edit-userstory { + .ticket-role-points { + flex-basis: 10%; + flex-grow: 1; + flex-shrink: 1; + } .points-per-role { margin-bottom: 1rem; - li { - margin: .5rem .1rem; - } } } diff --git a/app/styles/modules/common/ticket-data.scss b/app/styles/modules/common/ticket-data.scss new file mode 100644 index 00000000..245ca8e1 --- /dev/null +++ b/app/styles/modules/common/ticket-data.scss @@ -0,0 +1,199 @@ +.ticket-data { + .ticket-title { + @extend %larger; + @extend %light; + margin: 1.5rem 0 2rem; + text-transform: uppercase; + span { + margin-right: .25rem; + &:last-child { + @extend %large; + } + } + } + .ticket-data-container { + @extend %small; + @extend %normal; + margin-bottom: 1rem; + .icon { + margin-left: .25rem; + } + } + .level { + display: inline-block; + margin-right: .5rem; + vertical-align: top; + } + .level-name { + color: darken($whitish, 20%); + float: right; + text-transform: lowercase; + } + + .ticket-estimation { + .ticket-role-points { + &:first-child { + flex-basis: 100%; + max-width: 100%; + } + } + } +} + +.ticket-status { + margin-bottom: .5rem; + &:last-child { + margin: 0; + } + div { + background: darken($whitish, 5%); + padding: .5rem; + padding-right: 1rem; + transition: background .2s ease-in; + } + .clickable { + &:hover { + background: darken($whitish, 10%); + transition: background .2s ease-in; + } + } + .type-data { + position: relative; + .pop-type { + @include popover(150px, '', 30px, '', ''); + } + } + .severity-data { + position: relative; + .pop-severity { + @include popover(150px, '', 30px, '', ''); + } + } + .priority-data { + position: relative; + .pop-priority { + @include popover(150px, '', 30px, '', ''); + } + } + .status-data { + position: relative; + .pop-status { + @include popover(150px, '', 30px, '', ''); + } + } +} + +.ticket-track-buttons { + .track-inner { + @extend %light; + @extend %small; + background: darken($whitish, 5%); + padding: .25rem; + text-transform: uppercase; + transition: background .25s; + &:hover { + background: darken($whitish, 10%); + } + } + .track-button { + width: 100%; + } + .active { + .track-button-counter { + background: rgba($grayer, .5); + } + &:hover { + .track-inner { + background: rgba($primary-light, .2); + } + } + &.is-hover { + .track-inner { + background: $red; + color: $whitish; + transition: background .3s; + } + path { + fill: $red-light; + } + } + } + .track-button-counter { + @extend %large; + background: rgba($grayer, .25); + color: $whitish; + padding: 0 .5rem; + } + .vote-button { + margin-bottom: .3rem; + } + .watch-button { + border-bottom: 0; + } + .ticket-watchers { + margin: .5rem 0; + } + .add-watcher { + display: block; + margin: .5rem; + .icon { + background: rgba($grayer, .25); + color: $whitish; + margin-right: .5rem; + padding: .25rem; + } + &:hover { + .icon { + background: $primary-light; + color: $whitish; + transition: background .3s linear; + } + } + } +} + +.ticket-detail-settings { + margin-top: 2rem; + label, + .button { + display: block; + margin-bottom: .5rem; + text-align: center; + &.editable { + cursor: pointer; + } + +input { + display: none; + } + } + .loading-spinner { + @extend %loading-spinner; + } + .button-gray { + background: $gray-light; + &:hover { + background: $gray-light; + } + &.editable { + &:hover { + background: $grayer; + cursor: pointer; + } + } + &.active { + background: $primary; + } + } + .item-block { + &.editable { + &:hover { + background: $red; + cursor: pointer; + } + } + } + .button-red { + display: block; + margin-top: 2rem; + } +} diff --git a/app/styles/modules/home-project.scss b/app/styles/modules/home-project.scss index 4956a40e..187d441c 100644 --- a/app/styles/modules/home-project.scss +++ b/app/styles/modules/home-project.scss @@ -2,15 +2,35 @@ .single-project-intro { margin-bottom: 2rem; } + .intro-options { + align-items: center; + display: flex; + justify-content: space-between; + } h1 { + color: $primary; + display: inline-block; line-height: 1.2; - margin: 0; + margin-bottom: 0; + margin-right: 3rem; vertical-align: middle; } .private { font-size: 1rem; vertical-align: super; } + .like-watch-container { + margin-left: auto; + } + .track-buttons-container { + display: flex; + } + .like-button { + margin-right: .75rem; + } + .track-container { + @include list-itemtype-track; + } .description { @extend %light; @extend %medium; diff --git a/app/styles/modules/issues/issues-table.scss b/app/styles/modules/issues/issues-table.scss index 9dc0ee51..3b4f8a26 100644 --- a/app/styles/modules/issues/issues-table.scss +++ b/app/styles/modules/issues/issues-table.scss @@ -34,6 +34,9 @@ div { cursor: pointer; } + .votes { + color: $gray; + } } .table-main { @extend %small; @@ -58,6 +61,19 @@ text-align: center; width: 75px; } + .votes { + color: $gray; + flex-basis: 75px; + flex-shrink: 0; + text-align: center; + width: 75px; + &.inactive { + color: $gray-light; + } + &.is-voted { + color: $primary-light; + } + } .subject { overflow: hidden; padding-right: 1rem; diff --git a/app/styles/shame/shame.scss b/app/styles/shame/shame.scss index 43772411..9342e459 100644 --- a/app/styles/shame/shame.scss +++ b/app/styles/shame/shame.scss @@ -1,8 +1,8 @@ -// Shame SCSS decalrations to be refactorized +// Shame SCSS declarations to be refactorized _:-ms-fullscreen, :root .taskboard-table-body { .task-row { min-height: auto; } -} \ No newline at end of file +} diff --git a/app/svg/check.svg b/app/svg/check.svg new file mode 100644 index 00000000..d97a17c3 --- /dev/null +++ b/app/svg/check.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/svg/like.svg b/app/svg/like.svg new file mode 100644 index 00000000..dd7c202d --- /dev/null +++ b/app/svg/like.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/app/svg/logo-nav.svg b/app/svg/logo-nav.svg index f18d9ef6..ff0d29ec 100644 --- a/app/svg/logo-nav.svg +++ b/app/svg/logo-nav.svg @@ -1,18 +1,18 @@ - + \ No newline at end of file + diff --git a/app/svg/unwatch.svg b/app/svg/unwatch.svg new file mode 100644 index 00000000..9a305958 --- /dev/null +++ b/app/svg/unwatch.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/svg/upvote.svg b/app/svg/upvote.svg new file mode 100644 index 00000000..187d6159 --- /dev/null +++ b/app/svg/upvote.svg @@ -0,0 +1,14 @@ + + + + diff --git a/app/svg/watch.svg b/app/svg/watch.svg new file mode 100644 index 00000000..cfce30c5 --- /dev/null +++ b/app/svg/watch.svg @@ -0,0 +1,4 @@ + + + +