From 470ad36218d309a66edcbed354878a7fcc5268e8 Mon Sep 17 00:00:00 2001 From: Shane Kilkelly Date: Thu, 9 Nov 2017 14:28:11 +0000 Subject: [PATCH 1/7] Add onboarding popup for link-sharing --- .../Features/Project/ProjectController.coffee | 20 +++++++ services/web/app/views/project/editor.pug | 1 + .../web/app/views/project/editor/editor.pug | 14 +++++ .../web/app/views/project/editor/header.pug | 2 +- services/web/public/coffee/ide.coffee | 2 + .../LinkSharingOnboardingController.coffee | 24 ++++++++ .../onboarding/linksharing/link-sharing.png | Bin 0 -> 2965 bytes .../app/editor/feature-onboarding.less | 56 ++++++++++++++++++ 8 files changed, 118 insertions(+), 1 deletion(-) create mode 100644 services/web/public/coffee/ide/LinkSharingOnboardingController.coffee create mode 100644 services/web/public/img/onboarding/linksharing/link-sharing.png diff --git a/services/web/app/coffee/Features/Project/ProjectController.coffee b/services/web/app/coffee/Features/Project/ProjectController.coffee index bbfb47d6a1..bb08f49de5 100644 --- a/services/web/app/coffee/Features/Project/ProjectController.coffee +++ b/services/web/app/coffee/Features/Project/ProjectController.coffee @@ -290,6 +290,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" @@ -304,7 +321,9 @@ module.exports = ProjectController = token = TokenAccessHandler.getRequestToken(req, project_id) isTokenMember = results.isTokenMember + # Roll out token-access based on Project owner enableTokenAccessUI = ProjectController._isInPercentageRollout(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 @@ -356,6 +375,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..76d2998eab 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-popover.popover( + ng-controller="LinkSharingOnboardingController" + ng-if="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..d5023f96d0 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 diff --git a/services/web/public/coffee/ide/LinkSharingOnboardingController.coffee b/services/web/public/coffee/ide/LinkSharingOnboardingController.coffee new file mode 100644 index 0000000000..7b54328bd9 --- /dev/null +++ b/services/web/public/coffee/ide/LinkSharingOnboardingController.coffee @@ -0,0 +1,24 @@ +define [ + "base" +], (App) -> + App.controller "LinkSharingOnboardingController", ($scope, $timeout, event_tracking) -> + $scope._shown = false + + popover = angular.element('#onboarding-linksharing') + popover.hide() + + $scope.dismiss = () -> + $scope.onboarding.linkSharing = 'dismissed' + event_tracking.sendMB "shown-linksharing-onboarding" + + $scope.$on 'doc:opened', () -> + return if $scope._shown + shareBtn = angular.element('#shareButton') + offset = shareBtn.offset() + popover.show() + $scope.placement = 'bottom' + popover.offset({ + top: offset.top + 8 + shareBtn.height(), + left: offset.left + }) + $scope.shown = true 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 0000000000000000000000000000000000000000..a86fe18ce58213d3e2cf9f8c1c946b5607155e8b GIT binary patch literal 2965 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 literal 0 HcmV?d00001 diff --git a/services/web/public/stylesheets/app/editor/feature-onboarding.less b/services/web/public/stylesheets/app/editor/feature-onboarding.less index 475658f885..26cbb3cf4d 100644 --- a/services/web/public/stylesheets/app/editor/feature-onboarding.less +++ b/services/web/public/stylesheets/app/editor/feature-onboarding.less @@ -143,3 +143,59 @@ a.feat-onboard-dismiss { right: -9.5px; } } +.onboarding-popover { + display: block; + top: 10px; + + 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; + } + + &.right::before { + border-left-width: 0; + border-right-color: rgba(0, 0, 0, .3); + left: -11px; + } + + &.right::after { + border-left-width: 0; + border-right-color: #f7f7f7; + left: -9.5px; + } + + &.left::before { + border-right-width: 0; + border-left-color: rgba(0, 0, 0, .3); + right: -11px + } + + &.left::after { + border-right-width: 0; + border-left-color: #f7f7f7; + right: -9.5px; + } + + &.bottom::before { + border-top-width: 0; + border-bottom-color: rgba(0, 0, 0, .3); + top: -11px + } + + &.bottom::after { + border-top-width: 0; + border-bottom-color: #f7f7f7; + top: -9.5px; + } + +} From 766c8d6f0ff8e8d33d47d66e02850ee5ee6fe1a7 Mon Sep 17 00:00:00 2001 From: Shane Kilkelly Date: Thu, 9 Nov 2017 15:12:55 +0000 Subject: [PATCH 2/7] Add a general 'ide:loaded' event, to init popover --- services/web/public/coffee/ide.coffee | 10 ++++++++++ .../coffee/ide/LinkSharingOnboardingController.coffee | 6 ++---- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/services/web/public/coffee/ide.coffee b/services/web/public/coffee/ide.coffee index d5023f96d0..27e8094bf4 100644 --- a/services/web/public/coffee/ide.coffee +++ b/services/web/public/coffee/ide.coffee @@ -171,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 index 7b54328bd9..7e945f1b6a 100644 --- a/services/web/public/coffee/ide/LinkSharingOnboardingController.coffee +++ b/services/web/public/coffee/ide/LinkSharingOnboardingController.coffee @@ -2,7 +2,6 @@ define [ "base" ], (App) -> App.controller "LinkSharingOnboardingController", ($scope, $timeout, event_tracking) -> - $scope._shown = false popover = angular.element('#onboarding-linksharing') popover.hide() @@ -11,8 +10,8 @@ define [ $scope.onboarding.linkSharing = 'dismissed' event_tracking.sendMB "shown-linksharing-onboarding" - $scope.$on 'doc:opened', () -> - return if $scope._shown + $scope.$on 'ide:loaded', () -> + console.log ">> woot" shareBtn = angular.element('#shareButton') offset = shareBtn.offset() popover.show() @@ -21,4 +20,3 @@ define [ top: offset.top + 8 + shareBtn.height(), left: offset.left }) - $scope.shown = true From 44420b41d64a76c7506773864e3d2c5272060a3b Mon Sep 17 00:00:00 2001 From: Shane Kilkelly Date: Thu, 9 Nov 2017 15:13:58 +0000 Subject: [PATCH 3/7] Remove stray console log --- .../web/public/coffee/ide/LinkSharingOnboardingController.coffee | 1 - 1 file changed, 1 deletion(-) diff --git a/services/web/public/coffee/ide/LinkSharingOnboardingController.coffee b/services/web/public/coffee/ide/LinkSharingOnboardingController.coffee index 7e945f1b6a..61c7059a25 100644 --- a/services/web/public/coffee/ide/LinkSharingOnboardingController.coffee +++ b/services/web/public/coffee/ide/LinkSharingOnboardingController.coffee @@ -11,7 +11,6 @@ define [ event_tracking.sendMB "shown-linksharing-onboarding" $scope.$on 'ide:loaded', () -> - console.log ">> woot" shareBtn = angular.element('#shareButton') offset = shareBtn.offset() popover.show() From 666ee0669a4275356616ac36c68f5b65b7c580ae Mon Sep 17 00:00:00 2001 From: Shane Kilkelly Date: Fri, 10 Nov 2017 10:24:36 +0000 Subject: [PATCH 4/7] Alter position of link-sharing popover, and better image --- .../web/app/views/project/editor/editor.pug | 2 +- .../LinkSharingOnboardingController.coffee | 4 +-- .../onboarding/linksharing/link-sharing.png | Bin 2965 -> 4289 bytes .../app/editor/feature-onboarding.less | 32 ++++-------------- 4 files changed, 9 insertions(+), 29 deletions(-) diff --git a/services/web/app/views/project/editor/editor.pug b/services/web/app/views/project/editor/editor.pug index 76d2998eab..8c43c0b002 100644 --- a/services/web/app/views/project/editor/editor.pug +++ b/services/web/app/views/project/editor/editor.pug @@ -109,7 +109,7 @@ div.full-size( button.btn.btn-default.btn-block(ng-click="dismiss()") | #{translate("got_it")} -#onboarding-linksharing.onboarding-popover.popover( +#onboarding-linksharing.onboarding-linksharing.popover( ng-controller="LinkSharingOnboardingController" ng-if="onboarding.linkSharing == 'unseen'" ng-class="placement" diff --git a/services/web/public/coffee/ide/LinkSharingOnboardingController.coffee b/services/web/public/coffee/ide/LinkSharingOnboardingController.coffee index 61c7059a25..60897abb35 100644 --- a/services/web/public/coffee/ide/LinkSharingOnboardingController.coffee +++ b/services/web/public/coffee/ide/LinkSharingOnboardingController.coffee @@ -16,6 +16,6 @@ define [ popover.show() $scope.placement = 'bottom' popover.offset({ - top: offset.top + 8 + shareBtn.height(), - left: offset.left + top: offset.top + 11 + shareBtn.height(), + left: offset.left - 180 }) diff --git a/services/web/public/img/onboarding/linksharing/link-sharing.png b/services/web/public/img/onboarding/linksharing/link-sharing.png index a86fe18ce58213d3e2cf9f8c1c946b5607155e8b..8ad0df7b5011a529c88b198590c8fc6d33726a0a 100644 GIT binary patch literal 4289 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 diff --git a/services/web/public/stylesheets/app/editor/feature-onboarding.less b/services/web/public/stylesheets/app/editor/feature-onboarding.less index 26cbb3cf4d..2a5c66d262 100644 --- a/services/web/public/stylesheets/app/editor/feature-onboarding.less +++ b/services/web/public/stylesheets/app/editor/feature-onboarding.less @@ -143,7 +143,8 @@ a.feat-onboard-dismiss { right: -9.5px; } } -.onboarding-popover { + +.onboarding-linksharing { display: block; top: 10px; @@ -162,40 +163,19 @@ a.feat-onboard-dismiss { position: absolute; } - &.right::before { - border-left-width: 0; - border-right-color: rgba(0, 0, 0, .3); - left: -11px; - } - - &.right::after { - border-left-width: 0; - border-right-color: #f7f7f7; - left: -9.5px; - } - - &.left::before { - border-right-width: 0; - border-left-color: rgba(0, 0, 0, .3); - right: -11px - } - - &.left::after { - border-right-width: 0; - border-left-color: #f7f7f7; - right: -9.5px; - } - + // Bottom &.bottom::before { border-top-width: 0; border-bottom-color: rgba(0, 0, 0, .3); - top: -11px + top: -11px; + right: 38px; } &.bottom::after { border-top-width: 0; border-bottom-color: #f7f7f7; top: -9.5px; + right: 38px; } } From faf6178fa8c3da4fad5c73bc85bd700bb70235bc Mon Sep 17 00:00:00 2001 From: Shane Kilkelly Date: Fri, 10 Nov 2017 11:09:46 +0000 Subject: [PATCH 5/7] Restrict link-sharing onboarding popup to admins. Only people with admin permission to the Project can see the Share button and dialog. It doesn't make sense to alert users who can't interact with the feature anyway. --- services/web/app/views/project/editor/editor.pug | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/services/web/app/views/project/editor/editor.pug b/services/web/app/views/project/editor/editor.pug index 8c43c0b002..dc40d7b9ba 100644 --- a/services/web/app/views/project/editor/editor.pug +++ b/services/web/app/views/project/editor/editor.pug @@ -111,7 +111,7 @@ div.full-size( #onboarding-linksharing.onboarding-linksharing.popover( ng-controller="LinkSharingOnboardingController" - ng-if="onboarding.linkSharing == 'unseen'" + ng-if="permissions.admin && onboarding.linkSharing == 'unseen'" ng-class="placement" ) .popover-inner From 42c097467103f7e8d51c36878f5f1d0ed7fce6eb Mon Sep 17 00:00:00 2001 From: Shane Kilkelly Date: Fri, 10 Nov 2017 12:05:12 +0000 Subject: [PATCH 6/7] Place the linksharing popover from the right, not the left. This ensures the popover reflows properly with window resize. --- .../coffee/ide/LinkSharingOnboardingController.coffee | 6 +++--- .../public/stylesheets/app/editor/feature-onboarding.less | 3 +++ 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/services/web/public/coffee/ide/LinkSharingOnboardingController.coffee b/services/web/public/coffee/ide/LinkSharingOnboardingController.coffee index 60897abb35..d2e6ae711e 100644 --- a/services/web/public/coffee/ide/LinkSharingOnboardingController.coffee +++ b/services/web/public/coffee/ide/LinkSharingOnboardingController.coffee @@ -15,7 +15,7 @@ define [ offset = shareBtn.offset() popover.show() $scope.placement = 'bottom' - popover.offset({ - top: offset.top + 11 + shareBtn.height(), - left: offset.left - 180 + popover.css({ + top: '' + (2) + 'px', + right: '' + (window.innerWidth - offset.left - (shareBtn.width() * 1.5) ) + 'px' }) diff --git a/services/web/public/stylesheets/app/editor/feature-onboarding.less b/services/web/public/stylesheets/app/editor/feature-onboarding.less index 2a5c66d262..1e41fecad2 100644 --- a/services/web/public/stylesheets/app/editor/feature-onboarding.less +++ b/services/web/public/stylesheets/app/editor/feature-onboarding.less @@ -147,6 +147,9 @@ a.feat-onboard-dismiss { .onboarding-linksharing { display: block; top: 10px; + &.popover { + left: auto !important; + } img { margin-bottom: 10px; From 87e4303aac4c396b816f6b190f41567efe001355 Mon Sep 17 00:00:00 2001 From: Shane Kilkelly Date: Fri, 10 Nov 2017 13:25:59 +0000 Subject: [PATCH 7/7] Thin out the border around link-sharing onboarding popover arrow --- .../web/public/stylesheets/app/editor/feature-onboarding.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/services/web/public/stylesheets/app/editor/feature-onboarding.less b/services/web/public/stylesheets/app/editor/feature-onboarding.less index 1e41fecad2..c19ac234af 100644 --- a/services/web/public/stylesheets/app/editor/feature-onboarding.less +++ b/services/web/public/stylesheets/app/editor/feature-onboarding.less @@ -170,7 +170,7 @@ a.feat-onboard-dismiss { &.bottom::before { border-top-width: 0; border-bottom-color: rgba(0, 0, 0, .3); - top: -11px; + top: -10px; right: 38px; }