diff --git a/services/web/app/coffee/Features/Project/ProjectController.coffee b/services/web/app/coffee/Features/Project/ProjectController.coffee index ae81a3f541..af5ea3e564 100644 --- a/services/web/app/coffee/Features/Project/ProjectController.coffee +++ b/services/web/app/coffee/Features/Project/ProjectController.coffee @@ -294,6 +294,23 @@ module.exports = ProjectController = else logger.log { user_id, event }, "autocompile onboarding not shown yet to this user" return cb(null, { enabled: true, showOnboarding: true }) + couldShowLinkSharingOnboarding: (cb) -> + cb = underscore.once(cb) + if !user_id? + return cb() + # Extract data from user's ObjectId + timestamp = parseInt(user_id.toString().substring(0, 8), 16) + userSignupDate = new Date(timestamp * 1000) + if userSignupDate > new Date("2017-11-10") + # Don't show for users who registered after it was released + return cb(null, false) + timeout = setTimeout cb, 500 + AnalyticsManager.getLastOccurance user_id, "shown-linksharing-onboarding", (error, event) -> + clearTimeout timeout + if error? || event? + return cb(null, false) + else + return cb(null, true) }, (err, results)-> if err? logger.err err:err, "error getting details for project page" @@ -308,11 +325,13 @@ module.exports = ProjectController = token = TokenAccessHandler.getRequestToken(req, project_id) isTokenMember = results.isTokenMember + # Roll out token-access based on Project owner enableTokenAccessUI = ProjectController._isInPercentageRollout( 'linksharing', project.owner_ref, 0 ) + showLinkSharingOnboarding = enableTokenAccessUI && results.couldShowLinkSharingOnboarding AuthorizationManager.getPrivilegeLevelForProject user_id, project_id, token, (error, privilegeLevel)-> return next(error) if error? if !privilegeLevel? or privilegeLevel == PrivilegeLevels.NONE @@ -364,6 +383,7 @@ module.exports = ProjectController = themes: THEME_LIST maxDocLength: Settings.max_doc_length enableTokenAccessUI: enableTokenAccessUI + showLinkSharingOnboarding: showLinkSharingOnboarding timer.done() _buildProjectList: (allProjects)-> diff --git a/services/web/app/views/project/editor.pug b/services/web/app/views/project/editor.pug index 5bb7f98354..b89fb28e94 100644 --- a/services/web/app/views/project/editor.pug +++ b/services/web/app/views/project/editor.pug @@ -126,6 +126,7 @@ block requirejs window.showPerUserTCNotice = #{!!showPerUserTCNotice}; window.autoCompileEnabled = #{!!autoCompileEnabled}; window.showAutoCompileOnboarding = #{!!showAutoCompileOnboarding} + window.showLinkSharingOnboarding = #{!!showLinkSharingOnboarding} window.wikiEnabled = #{!!(settings.apis.wiki && settings.apis.wiki.url)}; window.enableTokenAccessUI = #{enableTokenAccessUI} window.requirejs = { diff --git a/services/web/app/views/project/editor/editor.pug b/services/web/app/views/project/editor/editor.pug index 86cc63a5e5..dc40d7b9ba 100644 --- a/services/web/app/views/project/editor/editor.pug +++ b/services/web/app/views/project/editor/editor.pug @@ -108,3 +108,17 @@ div.full-size( p #{translate("auto_compile_onboarding_description")} button.btn.btn-default.btn-block(ng-click="dismiss()") | #{translate("got_it")} + +#onboarding-linksharing.onboarding-linksharing.popover( + ng-controller="LinkSharingOnboardingController" + ng-if="permissions.admin && onboarding.linkSharing == 'unseen'" + ng-class="placement" +) + .popover-inner + h3.popover-title #{translate("link_sharing")} + .popover-content + p #{translate("try_out_link_sharing")} + img(src="/img/onboarding/linksharing/link-sharing.png" width="100%") + p #{translate("try_link_sharing_description")} + button.btn.btn-default.btn-block(ng-click="dismiss()") + | #{translate("got_it")} diff --git a/services/web/app/views/project/editor/header.pug b/services/web/app/views/project/editor/header.pug index 8bd37f707c..49361b5a2e 100644 --- a/services/web/app/views/project/editor/header.pug +++ b/services/web/app/views/project/editor/header.pug @@ -99,7 +99,7 @@ header.toolbar.toolbar-header.toolbar-with-labels( i.review-icon p.toolbar-label | #{translate("review")} - a.btn.btn-full-height( + a.btn.btn-full-height#shareButton( href, ng-if="permissions.admin", ng-click="openShareProjectModal();", diff --git a/services/web/public/coffee/ide.coffee b/services/web/public/coffee/ide.coffee index 93d14c78e9..27e8094bf4 100644 --- a/services/web/public/coffee/ide.coffee +++ b/services/web/public/coffee/ide.coffee @@ -14,6 +14,7 @@ define [ "ide/SafariScrollPatcher" "ide/FeatureOnboardingController", "ide/AutoCompileOnboardingController", + "ide/LinkSharingOnboardingController", "ide/settings/index" "ide/share/index" "ide/chat/index" @@ -79,6 +80,7 @@ define [ } $scope.onboarding = { autoCompile: if window.showAutoCompileOnboarding then 'unseen' else 'dismissed' + linkSharing: if window.showLinkSharingOnboarding then 'unseen' else 'dismissed' } $scope.user = window.user $scope.__enableTokenAccessUI = window.enableTokenAccessUI == true @@ -169,6 +171,16 @@ define [ , 200 ) + # Count the first 'doc:opened' as a sign that the ide is loaded + # and broadcast a message. This is a good event to listen for + # if you want to wait until the ide is fully loaded and initialized + _loaded = false + $scope.$on 'doc:opened', () -> + if _loaded + return + $scope.$broadcast('ide:loaded') + _loaded = true + DARK_THEMES = [ "ambiance", "chaos", "clouds_midnight", "cobalt", "idle_fingers", "merbivore", "merbivore_soft", "mono_industrial", "monokai", diff --git a/services/web/public/coffee/ide/LinkSharingOnboardingController.coffee b/services/web/public/coffee/ide/LinkSharingOnboardingController.coffee new file mode 100644 index 0000000000..d2e6ae711e --- /dev/null +++ b/services/web/public/coffee/ide/LinkSharingOnboardingController.coffee @@ -0,0 +1,21 @@ +define [ + "base" +], (App) -> + App.controller "LinkSharingOnboardingController", ($scope, $timeout, event_tracking) -> + + popover = angular.element('#onboarding-linksharing') + popover.hide() + + $scope.dismiss = () -> + $scope.onboarding.linkSharing = 'dismissed' + event_tracking.sendMB "shown-linksharing-onboarding" + + $scope.$on 'ide:loaded', () -> + shareBtn = angular.element('#shareButton') + offset = shareBtn.offset() + popover.show() + $scope.placement = 'bottom' + popover.css({ + top: '' + (2) + 'px', + right: '' + (window.innerWidth - offset.left - (shareBtn.width() * 1.5) ) + 'px' + }) diff --git a/services/web/public/img/onboarding/linksharing/link-sharing.png b/services/web/public/img/onboarding/linksharing/link-sharing.png new file mode 100644 index 0000000000..8ad0df7b50 Binary files /dev/null and b/services/web/public/img/onboarding/linksharing/link-sharing.png differ diff --git a/services/web/public/stylesheets/app/editor/feature-onboarding.less b/services/web/public/stylesheets/app/editor/feature-onboarding.less index 475658f885..c19ac234af 100644 --- a/services/web/public/stylesheets/app/editor/feature-onboarding.less +++ b/services/web/public/stylesheets/app/editor/feature-onboarding.less @@ -143,3 +143,42 @@ a.feat-onboard-dismiss { right: -9.5px; } } + +.onboarding-linksharing { + display: block; + top: 10px; + &.popover { + left: auto !important; + } + + img { + margin-bottom: 10px; + border: 1px solid @gray-lighter; + } + + &::before, &::after { + content: ''; + border-width: 11px; + border-style: solid; + border-color: transparent; + top: 7px; + display: block; + position: absolute; + } + + // Bottom + &.bottom::before { + border-top-width: 0; + border-bottom-color: rgba(0, 0, 0, .3); + top: -10px; + right: 38px; + } + + &.bottom::after { + border-top-width: 0; + border-bottom-color: #f7f7f7; + top: -9.5px; + right: 38px; + } + +}