diff --git a/services/web/app/views/project/list.pug b/services/web/app/views/project/list.pug index 57a893f131..28ade7f7b1 100644 --- a/services/web/app/views/project/list.pug +++ b/services/web/app/views/project/list.pug @@ -47,6 +47,28 @@ block content aside.project-list-sidebar include ./list/side-bar + .project-list-sidebar-survey( + ng-if="shouldShowSurveyLink" + ng-cloak + ) + | What would you like to see next in Overleaf? + | + | + a.project-list-sidebar-survey-link( + href="https://forms.gle/om5t48UUj7LecHMP8" + target="_blank" + rel="noreferrer noopener" + ) Take our short survey + | . + button.project-list-sidebar-survey-dismiss( + type="button" + title="Dismiss Overleaf survey" + ng-click="dismissSurvey()" + ) + span( + aria-hidden="true" + ) × + .project-list-main.col-md-10.col-xs-9 include ./list/notifications include ./list/project-list diff --git a/services/web/frontend/js/main/project-list/project-list.js b/services/web/frontend/js/main/project-list/project-list.js index 1dcc871f6d..d8c46c6481 100644 --- a/services/web/frontend/js/main/project-list/project-list.js +++ b/services/web/frontend/js/main/project-list/project-list.js @@ -25,6 +25,17 @@ define(['base', 'main/project-list/services/project-list'], function(App) { newValue === 'ownerName' ? ownerNameComparator : defaultComparator }) + $scope.shouldShowSurveyLink = true + + if (localStorage('dismissed-db-survey') === true) { + $scope.shouldShowSurveyLink = false + } + + $scope.dismissSurvey = () => { + localStorage('dismissed-db-survey', true) + $scope.shouldShowSurveyLink = false + } + $timeout(() => recalculateProjectListHeight(), 10) $scope.$watch( diff --git a/services/web/frontend/stylesheets/app/sidebar-v2-dash-pane.less b/services/web/frontend/stylesheets/app/sidebar-v2-dash-pane.less index 5262b72058..edb4a600a9 100644 --- a/services/web/frontend/stylesheets/app/sidebar-v2-dash-pane.less +++ b/services/web/frontend/stylesheets/app/sidebar-v2-dash-pane.less @@ -11,6 +11,51 @@ padding-right: 15px; } +.project-list-sidebar-survey { + position: relative; + font-size: @font-size-small; + background-color: @v2-dash-pane-bg; + color: @v2-dash-pane-subdued-color; + padding: @folders-menu-item-v-padding 20px @folders-menu-item-v-padding + @folders-menu-item-h-padding; + &::before { + content: ''; + display: block; + height: 15px; + background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1), transparent); + position: absolute; + bottom: 100%; + width: 100%; + left: 0; + } +} +.project-list-sidebar-survey-link { + color: @v2-dash-pane-color; + font-weight: bold; + &:hover, + &:active, + &:focus { + text-decoration: none; + color: @v2-dash-pane-color; + } +} + +.project-list-sidebar-survey-dismiss { + .btn-inline-link; + position: absolute; + top: @folders-menu-item-v-padding; + right: @folders-menu-item-v-padding; + font-size: @font-size-base; + line-height: 1; + color: @v2-dash-pane-color; + &:hover, + &:active, + &:focus { + text-decoration: none; + color: @v2-dash-pane-color; + } +} + .project-list-sidebar-v2-pane { flex-grow: 0; flex-shrink: 0; diff --git a/services/web/frontend/stylesheets/core/ol-variables.less b/services/web/frontend/stylesheets/core/ol-variables.less index 0f85ff3794..b9bd6562e1 100644 --- a/services/web/frontend/stylesheets/core/ol-variables.less +++ b/services/web/frontend/stylesheets/core/ol-variables.less @@ -180,6 +180,7 @@ @v2-dash-pane-bg: @ol-blue-gray-4; @v2-dash-pane-link-color: #fff; @v2-dash-pane-color: #fff; +@v2-dash-pane-subdued-color: @ol-blue-gray-2; @v2-dash-pane-toggle-color: #fff; @v2-dash-pane-btn-bg: @ol-blue-gray-5; @v2-dash-pane-btn-hover-bg: @ol-blue-gray-6;