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 a86fe18ce5..8ad0df7b50 100644 Binary files a/services/web/public/img/onboarding/linksharing/link-sharing.png 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 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; } }