From 9208fe7c30480ccc77bccc94af7a33ba1c0a09a2 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 26 Sep 2016 15:02:54 +0100 Subject: [PATCH 1/7] Basic mark-up for AB testing labels. --- .../web/app/views/project/editor/header.jade | 365 ++++++++++++------ 1 file changed, 247 insertions(+), 118 deletions(-) diff --git a/services/web/app/views/project/editor/header.jade b/services/web/app/views/project/editor/header.jade index 8fef09c9c2..4b12c95ec8 100644 --- a/services/web/app/views/project/editor/header.jade +++ b/services/web/app/views/project/editor/header.jade @@ -1,123 +1,252 @@ -header.toolbar.toolbar-header(ng-cloak, ng-hide="state.loading") - a.btn.btn-full-height( - href, - ng-click="ui.leftMenuShown = true" - tooltip='#{translate("menu")}', - tooltip-placement="bottom", - tooltip-append-to-body="true" +div(sixpack-switch="editor-header") + + header.toolbar.toolbar-header( + ng-cloak, + ng-hide="state.loading" + sixpack-default ) - i.fa.fa-fw.fa-bars - a( - href="/project" - tooltip="#{translate('back_to_projects')}", - tooltip-placement="bottom", - tooltip-append-to-body="true" - ) - i.fa.fa-fw.fa-level-up - span(ng-controller="PdfViewToggleController") + a.btn.btn-full-height( + href, + ng-click="ui.leftMenuShown = true" + tooltip='#{translate("menu")}', + tooltip-placement="bottom", + tooltip-append-to-body="true" + ) + i.fa.fa-fw.fa-bars a( - href, - ng-show="ui.pdfLayout == 'flat' && fileTreeClosed", - tooltip="PDF", + href="/project" + tooltip="#{translate('back_to_projects')}", tooltip-placement="bottom", - tooltip-append-to-body="true", - ng-click="togglePdfView()", - ng-class="{ 'active': ui.view == 'pdf' }" + tooltip-append-to-body="true" ) - i.fa.fa-file-pdf-o - - .toolbar-center.project-name(ng-controller="ProjectNameController") - span.name( - ng-dblclick="!permissions.admin || startRenaming()", - ng-show="!state.renaming" - ) {{ project.name }} - - input.form-control( - type="text" - ng-model="inputs.name", - ng-show="state.renaming", - on-enter="finishRenaming()", - ng-blur="finishRenaming()", - select-name-when="state.renaming" - ) - - a.rename( - ng-if="permissions.admin", - href='#', - tooltip-placement="bottom", - tooltip="#{translate('rename')}", - tooltip-append-to-body="true", - ng-click="startRenaming()", - ng-show="!state.renaming" - ) - i.fa.fa-pencil - - .toolbar-right - span.online-users( - ng-show="onlineUsersArray.length > 0" - ng-controller="OnlineUsersController" - ) - span(ng-if="onlineUsersArray.length < 4") - span.online-user( - ng-repeat="user in onlineUsersArray", - ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }", - popover="{{ user.name }}" - popover-placement="bottom" - popover-append-to-body="true" - popover-trigger="mouseenter" - ng-click="gotoUser(user)" - ) {{ user.name.slice(0,1) }} - - span.dropdown(dropdown, ng-if="onlineUsersArray.length >= 4") - span.online-user.online-user-multi( - dropdown-toggle, - tooltip="#{translate('connected_users')}", - tooltip-placement="left" - ) - strong {{ onlineUsersArray.length }} - i.fa.fa-fw.fa-user - ul.dropdown-menu.pull-right - li.dropdown-header #{translate('connected_users')} - li(ng-repeat="user in onlineUsersArray") - a(href, ng-click="gotoUser(user)") - span.online-user( - ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }" - ) {{ user.name.slice(0,1) }} - | {{ user.name }} - - - a.btn.btn-full-height( - href, - ng-if="permissions.admin", - tooltip="#{translate('share')}", - tooltip-placement="bottom", - ng-mouseenter="trackHover('share')" - ng-click="openShareProjectModal()", - ng-controller="ShareController" - ) - i.fa.fa-fw.fa-group - a.btn.btn-full-height( - href, - ng-mouseenter="trackHover('track-changes')" - ng-click="toggleTrackChanges()", - ng-class="{ active: (ui.view == 'track-changes') }" - tooltip="#{translate('recent_changes')}", - tooltip-placement="bottom" - ) - i.fa.fa-fw.fa-history - a.btn.btn-full-height( - href, - tooltip="#{translate('chat')}", - tooltip-placement="bottom", - ng-class="{ active: ui.chatOpen }", - ng-mouseenter="trackHover('chat')" - ng-click="toggleChat()", - ng-controller="ChatButtonController", - ng-show="!anonymous" - ) - i.fa.fa-fw.fa-comment( - ng-class="{ 'bounce': unreadMessages > 0 }" + i.fa.fa-fw.fa-level-up + + span(ng-controller="PdfViewToggleController") + a( + href, + ng-show="ui.pdfLayout == 'flat' && fileTreeClosed", + tooltip="PDF", + tooltip-placement="bottom", + tooltip-append-to-body="true", + ng-click="togglePdfView()", + ng-class="{ 'active': ui.view == 'pdf' }" ) - span.label.label-info( - ng-show="unreadMessages > 0" - ) {{ unreadMessages }} \ No newline at end of file + i.fa.fa-file-pdf-o + + .toolbar-center.project-name(ng-controller="ProjectNameController") + span.name( + ng-dblclick="!permissions.admin || startRenaming()", + ng-show="!state.renaming" + ) {{ project.name }} + + input.form-control( + type="text" + ng-model="inputs.name", + ng-show="state.renaming", + on-enter="finishRenaming()", + ng-blur="finishRenaming()", + select-name-when="state.renaming" + ) + + a.rename( + ng-if="permissions.admin", + href='#', + tooltip-placement="bottom", + tooltip="#{translate('rename')}", + tooltip-append-to-body="true", + ng-click="startRenaming()", + ng-show="!state.renaming" + ) + i.fa.fa-pencil + + .toolbar-right + span.online-users( + ng-show="onlineUsersArray.length > 0" + ng-controller="OnlineUsersController" + ) + span(ng-if="onlineUsersArray.length < 4") + span.online-user( + ng-repeat="user in onlineUsersArray", + ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }", + popover="{{ user.name }}" + popover-placement="bottom" + popover-append-to-body="true" + popover-trigger="mouseenter" + ng-click="gotoUser(user)" + ) {{ user.name.slice(0,1) }} + + span.dropdown(dropdown, ng-if="onlineUsersArray.length >= 4") + span.online-user.online-user-multi( + dropdown-toggle, + tooltip="#{translate('connected_users')}", + tooltip-placement="left" + ) + strong {{ onlineUsersArray.length }} + i.fa.fa-fw.fa-user + ul.dropdown-menu.pull-right + li.dropdown-header #{translate('connected_users')} + li(ng-repeat="user in onlineUsersArray") + a(href, ng-click="gotoUser(user)") + span.online-user( + ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }" + ) {{ user.name.slice(0,1) }} + | {{ user.name }} + + + a.btn.btn-full-height( + href, + ng-if="permissions.admin", + tooltip="#{translate('share')}", + tooltip-placement="bottom", + ng-mouseenter="trackHover('share')" + ng-click="openShareProjectModal()", + ng-controller="ShareController" + ) + i.fa.fa-fw.fa-group + a.btn.btn-full-height( + href, + ng-mouseenter="trackHover('track-changes')" + ng-click="toggleTrackChanges()", + ng-class="{ active: (ui.view == 'track-changes') }" + tooltip="#{translate('recent_changes')}", + tooltip-placement="bottom" + ) + i.fa.fa-fw.fa-history + a.btn.btn-full-height( + href, + tooltip="#{translate('chat')}", + tooltip-placement="bottom", + ng-class="{ active: ui.chatOpen }", + ng-mouseenter="trackHover('chat')" + ng-click="toggleChat()", + ng-controller="ChatButtonController", + ng-show="!anonymous" + ) + i.fa.fa-fw.fa-comment( + ng-class="{ 'bounce': unreadMessages > 0 }" + ) + span.label.label-info( + ng-show="unreadMessages > 0" + ) {{ unreadMessages }} + + header.toolbar.toolbar-header.toolbar-with-labels( + ng-cloak, + ng-hide="state.loading" + sixpack-when="labels" + ) + a.btn.btn-full-height( + href, + ng-click="ui.leftMenuShown = true" + ) + i.fa.fa-fw.fa-bars + p.toolbar-label Menu + a( + href="/project" + ) + i.fa.fa-fw.fa-level-up + p.toolbar-label Back + + span(ng-controller="PdfViewToggleController") + a( + href, + ng-show="ui.pdfLayout == 'flat' && fileTreeClosed", + tooltip="PDF", + tooltip-placement="bottom", + tooltip-append-to-body="true", + ng-click="togglePdfView()", + ng-class="{ 'active': ui.view == 'pdf' }" + ) + i.fa.fa-file-pdf-o + + .toolbar-center.project-name(ng-controller="ProjectNameController") + span.name( + ng-dblclick="!permissions.admin || startRenaming()", + ng-show="!state.renaming" + ) {{ project.name }} + + input.form-control( + type="text" + ng-model="inputs.name", + ng-show="state.renaming", + on-enter="finishRenaming()", + ng-blur="finishRenaming()", + select-name-when="state.renaming" + ) + + a.rename( + ng-if="permissions.admin", + href='#', + tooltip-placement="bottom", + tooltip="#{translate('rename')}", + tooltip-append-to-body="true", + ng-click="startRenaming()", + ng-show="!state.renaming" + ) + i.fa.fa-pencil + + .toolbar-right + span.online-users( + ng-show="onlineUsersArray.length > 0" + ng-controller="OnlineUsersController" + ) + span(ng-if="onlineUsersArray.length < 4") + span.online-user( + ng-repeat="user in onlineUsersArray", + ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }", + popover="{{ user.name }}" + popover-placement="bottom" + popover-append-to-body="true" + popover-trigger="mouseenter" + ng-click="gotoUser(user)" + ) {{ user.name.slice(0,1) }} + + span.dropdown(dropdown, ng-if="onlineUsersArray.length >= 4") + span.online-user.online-user-multi( + dropdown-toggle, + tooltip="#{translate('connected_users')}", + tooltip-placement="left" + ) + strong {{ onlineUsersArray.length }} + i.fa.fa-fw.fa-user + ul.dropdown-menu.pull-right + li.dropdown-header #{translate('connected_users')} + li(ng-repeat="user in onlineUsersArray") + a(href, ng-click="gotoUser(user)") + span.online-user( + ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }" + ) {{ user.name.slice(0,1) }} + | {{ user.name }} + + + a.btn.btn-full-height( + href, + ng-if="permissions.admin", + ng-mouseenter="trackHover('share')" + ng-click="openShareProjectModal()", + ng-controller="ShareController" + ) + i.fa.fa-fw.fa-group + p.toolbar-label Share + a.btn.btn-full-height( + href, + ng-mouseenter="trackHover('track-changes')" + ng-click="toggleTrackChanges()", + ng-class="{ active: (ui.view == 'track-changes') }" + ) + i.fa.fa-fw.fa-history + p.toolbar-label Changes + a.btn.btn-full-height( + href, + ng-class="{ active: ui.chatOpen }", + ng-mouseenter="trackHover('chat')" + ng-click="toggleChat()", + ng-controller="ChatButtonController", + ng-show="!anonymous" + ) + i.fa.fa-fw.fa-comment( + ng-class="{ 'bounce': unreadMessages > 0 }" + ) + span.label.label-info( + ng-show="unreadMessages > 0" + ) {{ unreadMessages }} + p.toolbar-label Chat \ No newline at end of file From 23671c7b1899c8220020b49cdf41621598467d9a Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 26 Sep 2016 15:03:04 +0100 Subject: [PATCH 2/7] Label styling. --- .../stylesheets/app/editor/toolbar.less | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/services/web/public/stylesheets/app/editor/toolbar.less b/services/web/public/stylesheets/app/editor/toolbar.less index f83135972f..a05747a37a 100644 --- a/services/web/public/stylesheets/app/editor/toolbar.less +++ b/services/web/public/stylesheets/app/editor/toolbar.less @@ -130,6 +130,29 @@ } } +.toolbar.toolbar-with-labels { + height: 50px; + + .btn-full-height { + padding: 0 10px; + } + + & ~ #ide-body { + top: 50px; + } + + .project-name .name { + padding: 12px; + } +} + +.toolbar-label { + margin: 0; + font-size: 0.6em; + font-weight: normal; + min-width: 35px; +} + .editor-dark { .toolbar-alt { background-color: darken(@editor-dark-background-color, 0%); From d97313d22c46898f2a763849493fbb54a9a4b464 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 26 Sep 2016 16:09:27 +0100 Subject: [PATCH 3/7] Horizontal layout. --- .../web/app/views/project/editor/header.jade | 24 +++++++-------- .../stylesheets/app/editor/toolbar.less | 29 ++++++++----------- 2 files changed, 24 insertions(+), 29 deletions(-) diff --git a/services/web/app/views/project/editor/header.jade b/services/web/app/views/project/editor/header.jade index 4b12c95ec8..914448fe05 100644 --- a/services/web/app/views/project/editor/header.jade +++ b/services/web/app/views/project/editor/header.jade @@ -134,17 +134,17 @@ div(sixpack-switch="editor-header") ng-hide="state.loading" sixpack-when="labels" ) - a.btn.btn-full-height( - href, - ng-click="ui.leftMenuShown = true" - ) - i.fa.fa-fw.fa-bars - p.toolbar-label Menu - a( - href="/project" - ) - i.fa.fa-fw.fa-level-up - p.toolbar-label Back + .toolbar-left + a.btn.btn-full-height( + href, + ng-click="ui.leftMenuShown = true" + ) + i.fa.fa-fw.fa-bars + p.toolbar-label Menu + a( + href="/project" + ) + i.fa.fa-fw.fa-level-up span(ng-controller="PdfViewToggleController") a( @@ -234,7 +234,7 @@ div(sixpack-switch="editor-header") ng-class="{ active: (ui.view == 'track-changes') }" ) i.fa.fa-fw.fa-history - p.toolbar-label Changes + p.toolbar-label History a.btn.btn-full-height( href, ng-class="{ active: ui.chatOpen }", diff --git a/services/web/public/stylesheets/app/editor/toolbar.less b/services/web/public/stylesheets/app/editor/toolbar.less index a05747a37a..2f088cf515 100644 --- a/services/web/public/stylesheets/app/editor/toolbar.less +++ b/services/web/public/stylesheets/app/editor/toolbar.less @@ -17,7 +17,9 @@ outline: none; } - > a:not(.btn), .toolbar-right > a:not(.btn) { + > a:not(.btn), + .toolbar-left > a:not(.btn), + .toolbar-right > a:not(.btn) { display: inline-block; color: @gray-light; padding: 4px 10px 5px; @@ -64,6 +66,11 @@ } } + .toolbar-left { + float: left; + text-align: center; + } + .toolbar-right { float: right; .btn-full-height { @@ -131,26 +138,14 @@ } .toolbar.toolbar-with-labels { - height: 50px; - - .btn-full-height { - padding: 0 10px; - } - - & ~ #ide-body { - top: 50px; - } - - .project-name .name { - padding: 12px; - } } .toolbar-label { - margin: 0; - font-size: 0.6em; + display: inline-block; + margin: 0 4px; + font-size: 12px; font-weight: normal; - min-width: 35px; + vertical-align: middle; } .editor-dark { From 6ccf7288e6f23065fbd8eabbd025cc428246af6e Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 26 Sep 2016 16:18:37 +0100 Subject: [PATCH 4/7] Register conversions. --- .../web/app/views/project/editor/header.jade | 32 ++++++++++++------- 1 file changed, 20 insertions(+), 12 deletions(-) diff --git a/services/web/app/views/project/editor/header.jade b/services/web/app/views/project/editor/header.jade index 914448fe05..546927a336 100644 --- a/services/web/app/views/project/editor/header.jade +++ b/services/web/app/views/project/editor/header.jade @@ -10,7 +10,8 @@ div(sixpack-switch="editor-header") ng-click="ui.leftMenuShown = true" tooltip='#{translate("menu")}', tooltip-placement="bottom", - tooltip-append-to-body="true" + tooltip-append-to-body="true", + sixpack-convert="editor-header" ) i.fa.fa-fw.fa-bars a( @@ -100,7 +101,8 @@ div(sixpack-switch="editor-header") tooltip-placement="bottom", ng-mouseenter="trackHover('share')" ng-click="openShareProjectModal()", - ng-controller="ShareController" + ng-controller="ShareController", + sixpack-convert="editor-header" ) i.fa.fa-fw.fa-group a.btn.btn-full-height( @@ -109,7 +111,8 @@ div(sixpack-switch="editor-header") ng-click="toggleTrackChanges()", ng-class="{ active: (ui.view == 'track-changes') }" tooltip="#{translate('recent_changes')}", - tooltip-placement="bottom" + tooltip-placement="bottom", + sixpack-convert="editor-header" ) i.fa.fa-fw.fa-history a.btn.btn-full-height( @@ -120,7 +123,8 @@ div(sixpack-switch="editor-header") ng-mouseenter="trackHover('chat')" ng-click="toggleChat()", ng-controller="ChatButtonController", - ng-show="!anonymous" + ng-show="!anonymous", + sixpack-convert="editor-header" ) i.fa.fa-fw.fa-comment( ng-class="{ 'bounce': unreadMessages > 0 }" @@ -137,10 +141,11 @@ div(sixpack-switch="editor-header") .toolbar-left a.btn.btn-full-height( href, - ng-click="ui.leftMenuShown = true" + ng-click="ui.leftMenuShown = true", + sixpack-convert="editor-header" ) i.fa.fa-fw.fa-bars - p.toolbar-label Menu + p.toolbar-label #{translate("menu")} a( href="/project" ) @@ -223,25 +228,28 @@ div(sixpack-switch="editor-header") ng-if="permissions.admin", ng-mouseenter="trackHover('share')" ng-click="openShareProjectModal()", - ng-controller="ShareController" + ng-controller="ShareController", + sixpack-convert="editor-header" ) i.fa.fa-fw.fa-group - p.toolbar-label Share + p.toolbar-label #{translate("share")} a.btn.btn-full-height( href, ng-mouseenter="trackHover('track-changes')" ng-click="toggleTrackChanges()", - ng-class="{ active: (ui.view == 'track-changes') }" + ng-class="{ active: (ui.view == 'track-changes') }", + sixpack-convert="editor-header" ) i.fa.fa-fw.fa-history - p.toolbar-label History + p.toolbar-label #{translate("history")} a.btn.btn-full-height( href, ng-class="{ active: ui.chatOpen }", ng-mouseenter="trackHover('chat')" ng-click="toggleChat()", ng-controller="ChatButtonController", - ng-show="!anonymous" + ng-show="!anonymous", + sixpack-convert="editor-header" ) i.fa.fa-fw.fa-comment( ng-class="{ 'bounce': unreadMessages > 0 }" @@ -249,4 +257,4 @@ div(sixpack-switch="editor-header") span.label.label-info( ng-show="unreadMessages > 0" ) {{ unreadMessages }} - p.toolbar-label Chat \ No newline at end of file + p.toolbar-label #{translate("chat")} \ No newline at end of file From 38d04e27c9250ba97edfa39ca10307cf64a14f7c Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Tue, 27 Sep 2016 11:50:34 +0100 Subject: [PATCH 5/7] Restrict AB test to newly registered users. --- .../web/app/views/project/editor/header.jade | 373 ++++++++++++------ services/web/public/coffee/ide.coffee | 7 + 2 files changed, 258 insertions(+), 122 deletions(-) diff --git a/services/web/app/views/project/editor/header.jade b/services/web/app/views/project/editor/header.jade index 546927a336..44f384a376 100644 --- a/services/web/app/views/project/editor/header.jade +++ b/services/web/app/views/project/editor/header.jade @@ -1,9 +1,7 @@ -div(sixpack-switch="editor-header") - +div(ng-if="!shouldABTestHeaderLabels") header.toolbar.toolbar-header( ng-cloak, ng-hide="state.loading" - sixpack-default ) a.btn.btn-full-height( href, @@ -11,7 +9,6 @@ div(sixpack-switch="editor-header") tooltip='#{translate("menu")}', tooltip-placement="bottom", tooltip-append-to-body="true", - sixpack-convert="editor-header" ) i.fa.fa-fw.fa-bars a( @@ -102,7 +99,6 @@ div(sixpack-switch="editor-header") ng-mouseenter="trackHover('share')" ng-click="openShareProjectModal()", ng-controller="ShareController", - sixpack-convert="editor-header" ) i.fa.fa-fw.fa-group a.btn.btn-full-height( @@ -112,7 +108,6 @@ div(sixpack-switch="editor-header") ng-class="{ active: (ui.view == 'track-changes') }" tooltip="#{translate('recent_changes')}", tooltip-placement="bottom", - sixpack-convert="editor-header" ) i.fa.fa-fw.fa-history a.btn.btn-full-height( @@ -124,7 +119,6 @@ div(sixpack-switch="editor-header") ng-click="toggleChat()", ng-controller="ChatButtonController", ng-show="!anonymous", - sixpack-convert="editor-header" ) i.fa.fa-fw.fa-comment( ng-class="{ 'bounce': unreadMessages > 0 }" @@ -133,128 +127,263 @@ div(sixpack-switch="editor-header") ng-show="unreadMessages > 0" ) {{ unreadMessages }} - header.toolbar.toolbar-header.toolbar-with-labels( - ng-cloak, - ng-hide="state.loading" - sixpack-when="labels" - ) - .toolbar-left +div(ng-if="shouldABTestHeaderLabels") + div(sixpack-switch="editor-header") + header.toolbar.toolbar-header( + ng-cloak, + ng-hide="state.loading" + sixpack-default + ) a.btn.btn-full-height( href, - ng-click="ui.leftMenuShown = true", + ng-click="ui.leftMenuShown = true" + tooltip='#{translate("menu")}', + tooltip-placement="bottom", + tooltip-append-to-body="true", sixpack-convert="editor-header" ) i.fa.fa-fw.fa-bars - p.toolbar-label #{translate("menu")} a( href="/project" + tooltip="#{translate('back_to_projects')}", + tooltip-placement="bottom", + tooltip-append-to-body="true" ) i.fa.fa-fw.fa-level-up - - span(ng-controller="PdfViewToggleController") - a( - href, - ng-show="ui.pdfLayout == 'flat' && fileTreeClosed", - tooltip="PDF", - tooltip-placement="bottom", - tooltip-append-to-body="true", - ng-click="togglePdfView()", - ng-class="{ 'active': ui.view == 'pdf' }" - ) - i.fa.fa-file-pdf-o - - .toolbar-center.project-name(ng-controller="ProjectNameController") - span.name( - ng-dblclick="!permissions.admin || startRenaming()", - ng-show="!state.renaming" - ) {{ project.name }} - - input.form-control( - type="text" - ng-model="inputs.name", - ng-show="state.renaming", - on-enter="finishRenaming()", - ng-blur="finishRenaming()", - select-name-when="state.renaming" - ) - - a.rename( - ng-if="permissions.admin", - href='#', - tooltip-placement="bottom", - tooltip="#{translate('rename')}", - tooltip-append-to-body="true", - ng-click="startRenaming()", - ng-show="!state.renaming" - ) - i.fa.fa-pencil - - .toolbar-right - span.online-users( - ng-show="onlineUsersArray.length > 0" - ng-controller="OnlineUsersController" - ) - span(ng-if="onlineUsersArray.length < 4") - span.online-user( - ng-repeat="user in onlineUsersArray", - ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }", - popover="{{ user.name }}" - popover-placement="bottom" - popover-append-to-body="true" - popover-trigger="mouseenter" - ng-click="gotoUser(user)" - ) {{ user.name.slice(0,1) }} - - span.dropdown(dropdown, ng-if="onlineUsersArray.length >= 4") - span.online-user.online-user-multi( - dropdown-toggle, - tooltip="#{translate('connected_users')}", - tooltip-placement="left" - ) - strong {{ onlineUsersArray.length }} - i.fa.fa-fw.fa-user - ul.dropdown-menu.pull-right - li.dropdown-header #{translate('connected_users')} - li(ng-repeat="user in onlineUsersArray") - a(href, ng-click="gotoUser(user)") - span.online-user( - ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }" - ) {{ user.name.slice(0,1) }} - | {{ user.name }} - - - a.btn.btn-full-height( - href, - ng-if="permissions.admin", - ng-mouseenter="trackHover('share')" - ng-click="openShareProjectModal()", - ng-controller="ShareController", - sixpack-convert="editor-header" - ) - i.fa.fa-fw.fa-group - p.toolbar-label #{translate("share")} - a.btn.btn-full-height( - href, - ng-mouseenter="trackHover('track-changes')" - ng-click="toggleTrackChanges()", - ng-class="{ active: (ui.view == 'track-changes') }", - sixpack-convert="editor-header" - ) - i.fa.fa-fw.fa-history - p.toolbar-label #{translate("history")} - a.btn.btn-full-height( - href, - ng-class="{ active: ui.chatOpen }", - ng-mouseenter="trackHover('chat')" - ng-click="toggleChat()", - ng-controller="ChatButtonController", - ng-show="!anonymous", - sixpack-convert="editor-header" - ) - i.fa.fa-fw.fa-comment( - ng-class="{ 'bounce': unreadMessages > 0 }" + + span(ng-controller="PdfViewToggleController") + a( + href, + ng-show="ui.pdfLayout == 'flat' && fileTreeClosed", + tooltip="PDF", + tooltip-placement="bottom", + tooltip-append-to-body="true", + ng-click="togglePdfView()", + ng-class="{ 'active': ui.view == 'pdf' }" ) - span.label.label-info( - ng-show="unreadMessages > 0" - ) {{ unreadMessages }} - p.toolbar-label #{translate("chat")} \ No newline at end of file + i.fa.fa-file-pdf-o + + .toolbar-center.project-name(ng-controller="ProjectNameController") + span.name( + ng-dblclick="!permissions.admin || startRenaming()", + ng-show="!state.renaming" + ) {{ project.name }} + + input.form-control( + type="text" + ng-model="inputs.name", + ng-show="state.renaming", + on-enter="finishRenaming()", + ng-blur="finishRenaming()", + select-name-when="state.renaming" + ) + + a.rename( + ng-if="permissions.admin", + href='#', + tooltip-placement="bottom", + tooltip="#{translate('rename')}", + tooltip-append-to-body="true", + ng-click="startRenaming()", + ng-show="!state.renaming" + ) + i.fa.fa-pencil + + .toolbar-right + span.online-users( + ng-show="onlineUsersArray.length > 0" + ng-controller="OnlineUsersController" + ) + span(ng-if="onlineUsersArray.length < 4") + span.online-user( + ng-repeat="user in onlineUsersArray", + ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }", + popover="{{ user.name }}" + popover-placement="bottom" + popover-append-to-body="true" + popover-trigger="mouseenter" + ng-click="gotoUser(user)" + ) {{ user.name.slice(0,1) }} + + span.dropdown(dropdown, ng-if="onlineUsersArray.length >= 4") + span.online-user.online-user-multi( + dropdown-toggle, + tooltip="#{translate('connected_users')}", + tooltip-placement="left" + ) + strong {{ onlineUsersArray.length }} + i.fa.fa-fw.fa-user + ul.dropdown-menu.pull-right + li.dropdown-header #{translate('connected_users')} + li(ng-repeat="user in onlineUsersArray") + a(href, ng-click="gotoUser(user)") + span.online-user( + ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }" + ) {{ user.name.slice(0,1) }} + | {{ user.name }} + + + a.btn.btn-full-height( + href, + ng-if="permissions.admin", + tooltip="#{translate('share')}", + tooltip-placement="bottom", + ng-mouseenter="trackHover('share')" + ng-click="openShareProjectModal()", + ng-controller="ShareController", + sixpack-convert="editor-header" + ) + i.fa.fa-fw.fa-group + a.btn.btn-full-height( + href, + ng-mouseenter="trackHover('track-changes')" + ng-click="toggleTrackChanges()", + ng-class="{ active: (ui.view == 'track-changes') }" + tooltip="#{translate('recent_changes')}", + tooltip-placement="bottom", + sixpack-convert="editor-header" + ) + i.fa.fa-fw.fa-history + a.btn.btn-full-height( + href, + tooltip="#{translate('chat')}", + tooltip-placement="bottom", + ng-class="{ active: ui.chatOpen }", + ng-mouseenter="trackHover('chat')" + ng-click="toggleChat()", + ng-controller="ChatButtonController", + ng-show="!anonymous", + sixpack-convert="editor-header" + ) + i.fa.fa-fw.fa-comment( + ng-class="{ 'bounce': unreadMessages > 0 }" + ) + span.label.label-info( + ng-show="unreadMessages > 0" + ) {{ unreadMessages }} + + header.toolbar.toolbar-header.toolbar-with-labels( + ng-cloak, + ng-hide="state.loading" + sixpack-when="labels" + ) + .toolbar-left + a.btn.btn-full-height( + href, + ng-click="ui.leftMenuShown = true", + sixpack-convert="editor-header" + ) + i.fa.fa-fw.fa-bars + p.toolbar-label #{translate("menu")} + a( + href="/project" + ) + i.fa.fa-fw.fa-level-up + + span(ng-controller="PdfViewToggleController") + a( + href, + ng-show="ui.pdfLayout == 'flat' && fileTreeClosed", + tooltip="PDF", + tooltip-placement="bottom", + tooltip-append-to-body="true", + ng-click="togglePdfView()", + ng-class="{ 'active': ui.view == 'pdf' }" + ) + i.fa.fa-file-pdf-o + + .toolbar-center.project-name(ng-controller="ProjectNameController") + span.name( + ng-dblclick="!permissions.admin || startRenaming()", + ng-show="!state.renaming" + ) {{ project.name }} + + input.form-control( + type="text" + ng-model="inputs.name", + ng-show="state.renaming", + on-enter="finishRenaming()", + ng-blur="finishRenaming()", + select-name-when="state.renaming" + ) + + a.rename( + ng-if="permissions.admin", + href='#', + tooltip-placement="bottom", + tooltip="#{translate('rename')}", + tooltip-append-to-body="true", + ng-click="startRenaming()", + ng-show="!state.renaming" + ) + i.fa.fa-pencil + + .toolbar-right + span.online-users( + ng-show="onlineUsersArray.length > 0" + ng-controller="OnlineUsersController" + ) + span(ng-if="onlineUsersArray.length < 4") + span.online-user( + ng-repeat="user in onlineUsersArray", + ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }", + popover="{{ user.name }}" + popover-placement="bottom" + popover-append-to-body="true" + popover-trigger="mouseenter" + ng-click="gotoUser(user)" + ) {{ user.name.slice(0,1) }} + + span.dropdown(dropdown, ng-if="onlineUsersArray.length >= 4") + span.online-user.online-user-multi( + dropdown-toggle, + tooltip="#{translate('connected_users')}", + tooltip-placement="left" + ) + strong {{ onlineUsersArray.length }} + i.fa.fa-fw.fa-user + ul.dropdown-menu.pull-right + li.dropdown-header #{translate('connected_users')} + li(ng-repeat="user in onlineUsersArray") + a(href, ng-click="gotoUser(user)") + span.online-user( + ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }" + ) {{ user.name.slice(0,1) }} + | {{ user.name }} + + + a.btn.btn-full-height( + href, + ng-if="permissions.admin", + ng-mouseenter="trackHover('share')" + ng-click="openShareProjectModal()", + ng-controller="ShareController", + sixpack-convert="editor-header" + ) + i.fa.fa-fw.fa-group + p.toolbar-label #{translate("share")} + a.btn.btn-full-height( + href, + ng-mouseenter="trackHover('track-changes')" + ng-click="toggleTrackChanges()", + ng-class="{ active: (ui.view == 'track-changes') }", + sixpack-convert="editor-header" + ) + i.fa.fa-fw.fa-history + p.toolbar-label #{translate("history")} + a.btn.btn-full-height( + href, + ng-class="{ active: ui.chatOpen }", + ng-mouseenter="trackHover('chat')" + ng-click="toggleChat()", + ng-controller="ChatButtonController", + ng-show="!anonymous", + sixpack-convert="editor-header" + ) + i.fa.fa-fw.fa-comment( + ng-class="{ 'bounce': unreadMessages > 0 }" + ) + span.label.label-info( + ng-show="unreadMessages > 0" + ) {{ unreadMessages }} + p.toolbar-label #{translate("chat")} \ No newline at end of file diff --git a/services/web/public/coffee/ide.coffee b/services/web/public/coffee/ide.coffee index 2553bf9c42..e9e759eaf6 100644 --- a/services/web/public/coffee/ide.coffee +++ b/services/web/public/coffee/ide.coffee @@ -71,6 +71,13 @@ define [ $scope.chat = {} + + # Only run the header AB test for newly registered users. + _abTestStartDate = new Date(Date.UTC(2016, 8, 22)) + _userSignUpDate = new Date(window.user.signUpDate) + + $scope.shouldABTestHeaderLabels = _userSignUpDate > _abTestStartDate + # Tracking code. $scope.$watch "ui.view", (newView, oldView) -> if newView? and newView != "editor" and newView != "pdf" From b6d237e18976582e39c3634ba00002cd1dd4a4d8 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Tue, 27 Sep 2016 16:01:56 +0100 Subject: [PATCH 6/7] More granular tracking, in metabase. --- .../web/app/views/project/editor/header.jade | 16 ++++++++-------- services/web/public/coffee/ide.coffee | 18 +++++++++++++++--- 2 files changed, 23 insertions(+), 11 deletions(-) diff --git a/services/web/app/views/project/editor/header.jade b/services/web/app/views/project/editor/header.jade index 44f384a376..2dd84db21d 100644 --- a/services/web/app/views/project/editor/header.jade +++ b/services/web/app/views/project/editor/header.jade @@ -136,7 +136,7 @@ div(ng-if="shouldABTestHeaderLabels") ) a.btn.btn-full-height( href, - ng-click="ui.leftMenuShown = true" + ng-click="ui.leftMenuShown = true; trackABTestConversion('menu');" tooltip='#{translate("menu")}', tooltip-placement="bottom", tooltip-append-to-body="true", @@ -229,7 +229,7 @@ div(ng-if="shouldABTestHeaderLabels") tooltip="#{translate('share')}", tooltip-placement="bottom", ng-mouseenter="trackHover('share')" - ng-click="openShareProjectModal()", + ng-click="openShareProjectModal(); trackABTestConversion('share');", ng-controller="ShareController", sixpack-convert="editor-header" ) @@ -237,7 +237,7 @@ div(ng-if="shouldABTestHeaderLabels") a.btn.btn-full-height( href, ng-mouseenter="trackHover('track-changes')" - ng-click="toggleTrackChanges()", + ng-click="toggleTrackChanges(); trackABTestConversion('history');", ng-class="{ active: (ui.view == 'track-changes') }" tooltip="#{translate('recent_changes')}", tooltip-placement="bottom", @@ -250,7 +250,7 @@ div(ng-if="shouldABTestHeaderLabels") tooltip-placement="bottom", ng-class="{ active: ui.chatOpen }", ng-mouseenter="trackHover('chat')" - ng-click="toggleChat()", + ng-click="toggleChat(); trackABTestConversion('chat');", ng-controller="ChatButtonController", ng-show="!anonymous", sixpack-convert="editor-header" @@ -270,7 +270,7 @@ div(ng-if="shouldABTestHeaderLabels") .toolbar-left a.btn.btn-full-height( href, - ng-click="ui.leftMenuShown = true", + ng-click="ui.leftMenuShown = true; trackABTestConversion('menu');", sixpack-convert="editor-header" ) i.fa.fa-fw.fa-bars @@ -355,7 +355,7 @@ div(ng-if="shouldABTestHeaderLabels") a.btn.btn-full-height( href, ng-if="permissions.admin", - ng-mouseenter="trackHover('share')" + ng-mouseenter="trackHover('share'); trackABTestConversion('share');" ng-click="openShareProjectModal()", ng-controller="ShareController", sixpack-convert="editor-header" @@ -365,7 +365,7 @@ div(ng-if="shouldABTestHeaderLabels") a.btn.btn-full-height( href, ng-mouseenter="trackHover('track-changes')" - ng-click="toggleTrackChanges()", + ng-click="toggleTrackChanges(); trackABTestConversion('history');", ng-class="{ active: (ui.view == 'track-changes') }", sixpack-convert="editor-header" ) @@ -375,7 +375,7 @@ div(ng-if="shouldABTestHeaderLabels") href, ng-class="{ active: ui.chatOpen }", ng-mouseenter="trackHover('chat')" - ng-click="toggleChat()", + ng-click="toggleChat(); trackABTestConversion('chat');", ng-controller="ChatButtonController", ng-show="!anonymous", sixpack-convert="editor-header" diff --git a/services/web/public/coffee/ide.coffee b/services/web/public/coffee/ide.coffee index e9e759eaf6..57c89dc932 100644 --- a/services/web/public/coffee/ide.coffee +++ b/services/web/public/coffee/ide.coffee @@ -44,7 +44,7 @@ define [ SafariScrollPatcher ) -> - App.controller "IdeController", ($scope, $timeout, ide, localStorage, event_tracking) -> + App.controller "IdeController", ($scope, $timeout, ide, localStorage, sixpack, event_tracking) -> # Don't freak out if we're already in an apply callback $scope.$originalApply = $scope.$apply $scope.$apply = (fn = () ->) -> @@ -73,10 +73,22 @@ define [ # Only run the header AB test for newly registered users. - _abTestStartDate = new Date(Date.UTC(2016, 8, 22)) + _abTestStartDate = new Date(Date.UTC(2016, 8, 28)) _userSignUpDate = new Date(window.user.signUpDate) - $scope.shouldABTestHeaderLabels = _userSignUpDate > _abTestStartDate + $scope.shouldABTestHeaderLabels = _userSignUpDate < _abTestStartDate + $scope.headerLabelsABVariant = "" + + if ($scope.shouldABTestHeaderLabels) + sixpack.participate "editor-header", [ "default", "labels"], (chosenVariation) -> + $scope.headerLabelsABVariant = chosenVariation + + $scope.trackABTestConversion = (headerItem) -> + event_tracking.sendMB "header-label-ab-conversion", { + headerItem: headerItem, + variant: $scope.headerLabelsABVariant + } + # Tracking code. $scope.$watch "ui.view", (newView, oldView) -> From 270bf816671cd7f01db5c64438431d104d3eca60 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Tue, 27 Sep 2016 16:12:45 +0100 Subject: [PATCH 7/7] Cleanup. --- services/web/public/coffee/ide.coffee | 3 +-- services/web/public/stylesheets/app/editor/toolbar.less | 3 --- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/services/web/public/coffee/ide.coffee b/services/web/public/coffee/ide.coffee index 57c89dc932..5c8c90c39d 100644 --- a/services/web/public/coffee/ide.coffee +++ b/services/web/public/coffee/ide.coffee @@ -76,7 +76,7 @@ define [ _abTestStartDate = new Date(Date.UTC(2016, 8, 28)) _userSignUpDate = new Date(window.user.signUpDate) - $scope.shouldABTestHeaderLabels = _userSignUpDate < _abTestStartDate + $scope.shouldABTestHeaderLabels = _userSignUpDate > _abTestStartDate $scope.headerLabelsABVariant = "" if ($scope.shouldABTestHeaderLabels) @@ -89,7 +89,6 @@ define [ variant: $scope.headerLabelsABVariant } - # Tracking code. $scope.$watch "ui.view", (newView, oldView) -> if newView? and newView != "editor" and newView != "pdf" diff --git a/services/web/public/stylesheets/app/editor/toolbar.less b/services/web/public/stylesheets/app/editor/toolbar.less index 2f088cf515..07e9481cad 100644 --- a/services/web/public/stylesheets/app/editor/toolbar.less +++ b/services/web/public/stylesheets/app/editor/toolbar.less @@ -137,9 +137,6 @@ } } -.toolbar.toolbar-with-labels { -} - .toolbar-label { display: inline-block; margin: 0 4px;