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",