diff --git a/services/web/app/views/project/list/item.pug b/services/web/app/views/project/list/item.pug index deb9863d04..2e80810be4 100644 --- a/services/web/app/views/project/list/item.pug +++ b/services/web/app/views/project/list/item.pug @@ -1,7 +1,4 @@ -- var titleClasses = settings.overleaf ? "col-xs-6 col-sm-4 col-md-6" : "col-xs-6" -- var lastUpdatedClasses = settings.overleaf ? " col-xs-4 col-sm-3 col-md-2" : "col-xs-4" - -div(class=titleClasses) +td.selectProject input.select-item( select-individual, type="checkbox", @@ -10,29 +7,29 @@ div(class=titleClasses) stop-propagation="click" aria-label=translate('select_project') + " '{{ project.name }}'" ) - span - a.projectName( - ng-href="{{projectLink(project)}}" +td.projectName + a.projectName( + ng-href="{{projectLink(project)}}" + stop-propagation="click" + ) {{project.name}} + span( + ng-controller="TagListController" + ) + .tag-label( + ng-repeat='tag in project.tags' stop-propagation="click" - ) {{project.name}} - span( - ng-controller="TagListController" ) - .tag-label( - ng-repeat='tag in project.tags' - stop-propagation="click" - ) - a.label.label-default.tag-label-name( - href, - ng-click="selectTag(tag)" - ) {{tag.name}} - a.label.label-default.tag-label-remove( - href - ng-click="removeProjectFromTag(project, tag)" - ) × + a.label.label-default.tag-label-name( + href, + ng-click="selectTag(tag)" + ) {{tag.name}} + a.label.label-default.tag-label-remove( + href + ng-click="removeProjectFromTag(project, tag)" + ) × -.col-xs-2 - span.owner {{ownerName()}} +td + span.owner {{userDisplayName(project.owner)}} span(ng-if="isLinkSharingProject(project)") |   i.fa.fa-link.small( @@ -41,64 +38,52 @@ div(class=titleClasses) tooltip-append-to-body="true" ) -div(class=lastUpdatedClasses) - if settings.overleaf - span.last-modified(tooltip="{{project.lastUpdated | formatDate}}") {{project.lastUpdated | fromNowDate}} - else - span.last-modified {{project.lastUpdated | formatDate}} +td + span.last-modified(tooltip="{{project.lastUpdated | formatDate}}") + | {{project.lastUpdated | fromNowDate}} + span(ng-show='project.lastUpdatedBy') + | + | by {{userDisplayName(project.lastUpdatedBy)}} -if settings.overleaf - .hidden-xs.col-sm-3.col-md-2.action-btn-row - div( - ng-if="!project.isTableActionInflight" +td.text-right + div( + ng-if="!project.isTableActionInflight" + ) + button.btn.btn-link.action-btn( + tooltip=translate('copy'), + tooltip-placement="top", + tooltip-append-to-body="true", + ng-click="clone($event)" ) - button.btn.btn-link.action-btn( - tooltip=translate('copy'), - tooltip-placement="top", - tooltip-append-to-body="true", - ng-click="clone($event)" - ) - i.icon.fa.fa-files-o - button.btn.btn-link.action-btn( - tooltip=translate('download'), - tooltip-placement="top", - tooltip-append-to-body="true", - ng-click="download($event)" - ) - i.icon.fa.fa-cloud-download - button.btn.btn-link.action-btn( - ng-if="!project.archived && isOwner()" - tooltip=translate('archive'), - tooltip-placement="top", - tooltip-append-to-body="true", - ng-click="archiveOrLeave($event)" - ) - i.icon.fa.fa-inbox - button.btn.btn-link.action-btn( - ng-if="!project.archived && !isOwner()" - tooltip=translate('leave'), - tooltip-placement="top", - tooltip-append-to-body="true", - ng-click="archiveOrLeave($event)" - ) - i.icon.fa.fa-sign-out - button.btn.btn-link.action-btn( - ng-if="project.archived" - tooltip=translate('unarchive'), - tooltip-placement="top", - tooltip-append-to-body="true", - ng-click="restore($event)" - ) - i.icon.fa.fa-reply - button.btn.btn-link.action-btn( - ng-if="project.archived && isOwner()" - tooltip=translate('delete_forever'), - tooltip-placement="top", - tooltip-append-to-body="true", - ng-click="deleteProject($event)" - ) - i.icon.fa.fa-trash - div( - ng-if="project.isTableActionInflight" + i.icon.fa.fa-files-o + button.btn.btn-link.action-btn( + tooltip=translate('download'), + tooltip-placement="top", + tooltip-append-to-body="true", + ng-click="download($event)" ) - i.fa.fa-spinner.fa-spin \ No newline at end of file + i.icon.fa.fa-cloud-download + button.btn.btn-link.action-btn( + ng-if="!project.archived && isOwner()" + tooltip=translate('archive'), + tooltip-placement="top", + tooltip-append-to-body="true", + ng-click="archiveOrLeave($event)" + ) + i.icon.fa.fa-inbox + button.btn.btn-link.action-btn( + ng-if="!project.archived && !isOwner()" + tooltip=translate('leave'), + tooltip-placement="top", + tooltip-append-to-body="true", + ng-click="archiveOrLeave($event)" + ) + i.icon.fa.fa-sign-out + button.btn.btn-link.action-btn( + ng-if="project.archived" + tooltip=translate('unarchive'), + tooltip-placement="top", + tooltip-append-to-body="true", + ng-click="restore($event)" + ) + i.icon.fa.fa-reply diff --git a/services/web/app/views/project/list/project-list.pug b/services/web/app/views/project/list/project-list.pug index cfea4aa6c6..af3a569f3b 100644 --- a/services/web/app/views/project/list/project-list.pug +++ b/services/web/app/views/project/list/project-list.pug @@ -123,54 +123,44 @@ .col-xs-12 .card.card-thin.project-list-card - ul.list-unstyled.project-list.structured-list( - select-all-list, - ng-if="projects.length > 0", - max-height="projectListHeight - 25", - ng-cloak - ) - li.container-fluid - .row - - var titleClasses = settings.overleaf ? " col-xs-6 col-sm-4 col-md-6" : "col-xs-6" - - var lastUpdatedClasses = settings.overleaf ? " col-xs-4 col-sm-3 col-md-2" : "col-xs-4" - - div(class=titleClasses) - input.select-all( - select-all, - type="checkbox" - aria-label=translate('select_all_projects') - ) - span.header.clickable(ng-click="changePredicate('name')") #{translate("title")} - i.tablesort.fa(ng-class="getSortIconClass('name')") - .col-xs-2 - span.header.clickable(ng-click="changePredicate('accessLevel')") #{translate("owner")} - i.tablesort.fa(ng-class="getSortIconClass('accessLevel')") - div(class=lastUpdatedClasses) - span.header.clickable(ng-click="changePredicate('lastUpdated')") #{translate("last_modified")} - i.tablesort.fa(ng-class="getSortIconClass('lastUpdated')") - if settings.overleaf - .hidden-xs.col-sm-3.col-md-2.action-btn-row-header - span.header #{translate("actions")} - li.project_entry.container-fluid( - ng-repeat="project in visibleProjects | orderBy:predicate:reverse", - ng-controller="ProjectListItemController" - ) - .row( - ng-if="!project.isV1Project" - select-row - ) - include ./item - .row( - ng-if="project.isV1Project" - ) - include ./v1-item - li( - ng-if="visibleProjects.length == 0", + .table-wrapper(max-height="projectListHeight - 25",) + table.table.table-hover.project-list( + select-all-list, + ng-if="projects.length > 0", ng-cloak ) - .row - .col-xs-12.text-centered - small #{translate("no_projects")} + thead + tr + th.selectProject + input.select-all( + select-all, + type="checkbox" + aria-label=translate('select_all_projects') + ) + th.projectName + span.header.clickable(ng-click="changePredicate('name')") #{translate("title")} + i.tablesort.fa(ng-class="getSortIconClass('name')") + th + span.header.clickable(ng-click="changePredicate('accessLevel')") #{translate("owner")} + i.tablesort.fa(ng-class="getSortIconClass('accessLevel')") + th + span.header.clickable(ng-click="changePredicate('lastUpdated')") #{translate("last_modified")} + i.tablesort.fa(ng-class="getSortIconClass('lastUpdated')") + if settings.overleaf + th.text-right + span.header #{translate("actions")} + tbody + tr.project_entry( + ng-repeat="project in visibleProjects | orderBy:predicate:reverse", + ng-controller="ProjectListItemController" + ) + include ./item + tr( + ng-if="visibleProjects.length == 0", + ng-cloak + ) + td(colspan=5).text-center + small #{translate("no_projects")} div.welcome.text-centered(ng-if="projects.length == 0", ng-cloak) h2 #{translate("welcome_to_sl")} diff --git a/services/web/app/views/project/list/v1-item.pug b/services/web/app/views/project/list/v1-item.pug index 5a8e37bca0..bf8d7db9e9 100644 --- a/services/web/app/views/project/list/v1-item.pug +++ b/services/web/app/views/project/list/v1-item.pug @@ -19,7 +19,7 @@ ) {{project.name}} .col-xs-2 - span.owner {{ownerName()}} + span.owner {{userDisplayName(project.owner)}} .col-xs-4.col-sm-3.col-md-2 span.last-modified(tooltip="{{project.lastUpdated | formatDate}}") {{project.lastUpdated | fromNowDate}} \ No newline at end of file diff --git a/services/web/public/coffee/main/project-list/project-list.coffee b/services/web/public/coffee/main/project-list/project-list.coffee index 9a8d7f7a73..a6a4d48ef1 100644 --- a/services/web/public/coffee/main/project-list/project-list.coffee +++ b/services/web/public/coffee/main/project-list/project-list.coffee @@ -485,11 +485,11 @@ define [ $scope.isLinkSharingProject = (project) -> return project.source == 'token' - $scope.ownerName = () -> - if $scope.project.accessLevel == "owner" + $scope.userDisplayName = (user) -> + if user._id == window.user_id return "You" - else if $scope.project.owner? - return [$scope.project.owner.first_name, $scope.project.owner.last_name].filter((n) -> n?).join(" ") + else if user? + return [user.first_name, user.last_name].filter((n) -> n?).join(" ") else return "None" diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less index e5bc8da14c..34d3e25c75 100644 --- a/services/web/public/stylesheets/app/project-list.less +++ b/services/web/public/stylesheets/app/project-list.less @@ -314,8 +314,38 @@ ul.structured-list { padding: 0 (@line-height-computed / 4); } -ul.project-list { - li { +.table-wrapper { + overflow: scroll; +} + +table.project-list { + margin: 0; + width: 100%; + + th when (@is-overleaf = true) { + font-weight: 600; + } + th when (@is-overleaf = false) { + text-transform: uppercase; + font-weight: normal; + } + + // thead > tr > th { + // padding-top: @line-height-computed / 8; + // } + + td { + @media (min-width: @screen-md-min) { + white-space: nowrap; + } + &.projectName { + white-space: normal; + width: 50%; + } + &.selectProject { + width: 1%; + } + .last-modified when (@is-overleaf = false) { font-size: .8rem; } @@ -325,12 +355,13 @@ ul.project-list { .owner when (@is-overleaf = false) { margin-right: 0; } - .projectName { + a.projectName { margin-right: @line-height-computed / 4; padding: 0; vertical-align: inherit; white-space: normal; text-align: left; + color: @structured-list-link-color; } .tag-label { diff --git a/services/web/public/stylesheets/components/tables.less b/services/web/public/stylesheets/components/tables.less index c41989c04d..30ede6697c 100755 --- a/services/web/public/stylesheets/components/tables.less +++ b/services/web/public/stylesheets/components/tables.less @@ -34,7 +34,7 @@ th { // Bottom align for column headings > thead > tr > th { vertical-align: bottom; - border-bottom: 2px solid @table-border-color; + border-bottom: 1px solid @table-border-color; } // Remove top border from thead by default > caption + thead, diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 9d7eab3493..41bdbd2d9b 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -110,7 +110,7 @@ //## Customizes the `.table` component with basic values, each used across all table variations. //** Padding for ``s and ``s. -@table-cell-padding: 8px; +@table-cell-padding: @line-height-computed / 4; //** Padding for cells in `.table-condensed`. @table-condensed-cell-padding: 5px;