diff --git a/services/web/app/src/Features/Project/ProjectController.js b/services/web/app/src/Features/Project/ProjectController.js
index 3b6bc26d3e..7ff192d3b8 100644
--- a/services/web/app/src/Features/Project/ProjectController.js
+++ b/services/web/app/src/Features/Project/ProjectController.js
@@ -837,7 +837,7 @@ const ProjectController = {
showSupport: Features.hasFeature('support'),
showNewLogsUI: user.alphaProgram && !wantsOldLogsUI,
showNewChatUI: user.betaProgram && !wantsOldChatUI,
- showReactFileTree: user.alphaProgram && !wantsOldFileTreeUI
+ showReactFileTree: user.betaProgram && !wantsOldFileTreeUI
})
timer.done()
}
diff --git a/services/web/frontend/extracted-translation-keys.json b/services/web/frontend/extracted-translation-keys.json
index 07d4e21c64..387363efe2 100644
--- a/services/web/frontend/extracted-translation-keys.json
+++ b/services/web/frontend/extracted-translation-keys.json
@@ -119,5 +119,6 @@
"headers",
"math_inline",
"math_display",
- "done"
+ "done",
+ "file_tree_badge_tooltip"
]
diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-badge.js b/services/web/frontend/js/features/file-tree/components/file-tree-badge.js
new file mode 100644
index 0000000000..20f5b93afd
--- /dev/null
+++ b/services/web/frontend/js/features/file-tree/components/file-tree-badge.js
@@ -0,0 +1,29 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
+
+function FileTreeBadge() {
+ const { t } = useTranslation()
+
+ const tooltip = (
+
+ {t('file_tree_badge_tooltip')}
+
+ )
+
+ return (
+
+ ev.stopPropagation()}
+ >
+ {t('file_tree_badge_tooltip')}
+
+
+ )
+}
+
+export default FileTreeBadge
diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-toolbar.js b/services/web/frontend/js/features/file-tree/components/file-tree-toolbar.js
index b6969a6d5d..56a1932e40 100644
--- a/services/web/frontend/js/features/file-tree/components/file-tree-toolbar.js
+++ b/services/web/frontend/js/features/file-tree/components/file-tree-toolbar.js
@@ -7,6 +7,8 @@ import TooltipButton from '../../../shared/components/tooltip-button'
import { FileTreeMainContext } from '../contexts/file-tree-main'
import { useFileTreeActionable } from '../contexts/file-tree-actionable'
+import FileTreeBadge from './file-tree-badge'
+
function FileTreeToolbar() {
const { hasWritePermissions } = useContext(FileTreeMainContext)
@@ -71,7 +73,13 @@ function FileTreeToolbarRight() {
startDeleting
} = useFileTreeActionable()
- if (!canRename && !canDelete) return null
+ if (!canRename && !canDelete) {
+ return (
+
+
+
+ )
+ }
return (
@@ -93,6 +101,7 @@ function FileTreeToolbarRight() {
) : null}
+
)
}
diff --git a/services/web/frontend/stylesheets/_style_includes.less b/services/web/frontend/stylesheets/_style_includes.less
index 2ee68c51ac..e852fbaeea 100644
--- a/services/web/frontend/stylesheets/_style_includes.less
+++ b/services/web/frontend/stylesheets/_style_includes.less
@@ -56,6 +56,7 @@
@import 'components/nvd3_override.less';
@import 'components/infinite-scroll.less';
@import 'components/expand-collapse.less';
+@import 'components/beta-badges.less';
// Components w/ JavaScript
@import 'components/modals.less';
diff --git a/services/web/frontend/stylesheets/app/editor/outline.less b/services/web/frontend/stylesheets/app/editor/outline.less
index 8f93e731c7..7ed7ba0912 100644
--- a/services/web/frontend/stylesheets/app/editor/outline.less
+++ b/services/web/frontend/stylesheets/app/editor/outline.less
@@ -62,30 +62,6 @@
text-overflow: ellipsis;
}
-.outline-header-info-badge {
- display: inline-block;
- width: @outline-h-rhythm * 0.75;
- height: @outline-v-rhythm * 0.75;
- line-height: @outline-v-rhythm * 0.75;
- text-align: center;
- cursor: pointer;
- background-color: @info-badge-bg;
- font-family: @font-family-serif;
- color: #fff;
- font-style: italic;
- border-radius: @outline-h-rhythm * 0.375;
-
- &::before {
- content: 'i';
- }
-
- &:hover,
- &:focus {
- color: #fff;
- text-decoration: none;
- }
-}
-
.outline-body {
overflow-y: auto;
background-color: @file-tree-bg;
diff --git a/services/web/frontend/stylesheets/app/editor/toolbar.less b/services/web/frontend/stylesheets/app/editor/toolbar.less
index 9f0e809253..ae564f45b4 100644
--- a/services/web/frontend/stylesheets/app/editor/toolbar.less
+++ b/services/web/frontend/stylesheets/app/editor/toolbar.less
@@ -23,11 +23,11 @@
outline: none;
}
- > a:not(.btn),
+ > a:not(.btn):not(.badge),
> button,
- .toolbar-left > a:not(.btn),
+ .toolbar-left > a:not(.btn):not(.badge),
.toolbar-left > button,
- .toolbar-right > a:not(.btn),
+ .toolbar-right > a:not(.btn):not(.badge),
.toolbar-right > button {
display: inline-block;
color: @toolbar-icon-btn-color;
@@ -61,6 +61,10 @@
}
}
+ .toolbar-right > a.badge {
+ margin-left: 5px;
+ }
+
&.toolbar-pdf > a:not(.btn) {
margin-right: 3px;
}
diff --git a/services/web/frontend/stylesheets/components/beta-badges.less b/services/web/frontend/stylesheets/components/beta-badges.less
new file mode 100644
index 0000000000..98dff48ec8
--- /dev/null
+++ b/services/web/frontend/stylesheets/components/beta-badges.less
@@ -0,0 +1,36 @@
+.info-badge,
+.beta-badge {
+ display: block;
+ width: @line-height-computed * 0.75;
+ height: @line-height-computed * 0.75;
+ line-height: @line-height-computed * 0.75;
+ text-align: center;
+ cursor: pointer;
+ color: #fff;
+
+ &:hover,
+ &:focus {
+ color: #fff;
+ text-decoration: none;
+ }
+}
+
+.info-badge {
+ background-color: @info-badge-bg;
+ border-radius: @line-height-computed * 0.75;
+ font-family: @font-family-serif;
+ font-style: italic;
+
+ &::before {
+ content: 'i';
+ }
+}
+
+.beta-badge {
+ background-color: @orange;
+ border-radius: @border-radius-base;
+
+ &::before {
+ content: 'β';
+ }
+}
diff --git a/services/web/locales/en.json b/services/web/locales/en.json
index b546413f00..36ba00178d 100644
--- a/services/web/locales/en.json
+++ b/services/web/locales/en.json
@@ -1281,6 +1281,7 @@
"highest_priority_compiling": "Highest priority compiling",
"dropbox_sync": "Dropbox Sync",
"beta": "Beta",
+ "file_tree_badge_tooltip": "We made some improvements to the file tree. We hope you like it! Click here to manage your beta program membership",
"sign_up_now": "Sign Up Now",
"annual": "Annual",
"half_price_student": "Half Price Student Plans",